From 0048b5a0fe6ef3e5659c1520cd452b919eebfda7 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Fri, 13 Dec 2024 12:01:21 -0800
Subject: [PATCH] [i18n] Add INodeSlot.localized_name field (#376)

* [i18n] Add INodeSlot.localized_name field

* nit
---
 src/LGraphCanvas.ts |  2 +-
 src/LGraphNode.ts   |  4 ++--
 src/draw.ts         |  2 +-
 src/interfaces.ts   | 18 +++++++++++++++++-
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts
index a8407e9..74a400e 100644
--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -3348,7 +3348,7 @@ export class LGraphCanvas {
           // TODO: Find a cheap way to measure text, and do it on node label change instead of here
           // Input icon width + text approximation
           const width =
-            20 + ((input.label?.length ?? input.name?.length) || 3) * 7
+            20 + ((input.label?.length ?? input.localized_name?.length ?? input.name?.length) || 3) * 7
           is_inside = isInRectangle(
             canvasx,
             canvasy,
diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts
index 2fa439c..457297e 100644
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -1421,7 +1421,7 @@ export class LGraphNode implements Positionable, IPinnable {
     if (this.inputs) {
       for (let i = 0, l = this.inputs.length; i < l; ++i) {
         const input = this.inputs[i]
-        const text = input.label || input.name || ""
+        const text = input.label || input.localized_name || input.name || ""
         const text_width = compute_text_size(text)
         if (input_width < text_width)
           input_width = text_width
@@ -1431,7 +1431,7 @@ export class LGraphNode implements Positionable, IPinnable {
     if (this.outputs) {
       for (let i = 0, l = this.outputs.length; i < l; ++i) {
         const output = this.outputs[i]
-        const text = output.label || output.name || ""
+        const text = output.label || output.localized_name || output.name || ""
         const text_width = compute_text_size(text)
         if (output_width < text_width)
           output_width = text_width
diff --git a/src/draw.ts b/src/draw.ts
index 54ccf32..e198cd1 100644
--- a/src/draw.ts
+++ b/src/draw.ts
@@ -117,7 +117,7 @@ export function drawSlot(
 
   // render slot label
   if (render_text) {
-    const text = slot.label != null ? slot.label : slot.name
+    const text = slot.label || slot.localized_name || slot.name
     if (text) {
       // TODO: Finish impl.  Highlight text on mouseover unless we're connecting links.
       ctx.fillStyle = label_color
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 7acd026..b260c63 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -190,7 +190,24 @@ export interface IOptionalSlotData<TSlot extends INodeInputSlot | INodeOutputSlo
 export type ISlotType = number | string
 
 export interface INodeSlot {
+  /**
+   * The name of the slot in English.
+   * Will be included in the serialized data.
+   */
   name: string
+  /**
+   * The localized name of the slot to display in the UI.
+   * Takes higher priority than {@link name} if set.
+   * Will be included in the serialized data.
+   */
+  localized_name?: string
+  /**
+   * The name of the slot to display in the UI, modified by the user.
+   * Takes higher priority than {@link display_name} if set.
+   * Will be included in the serialized data.
+   */
+  label?: string
+
   type: ISlotType
   dir?: LinkDirection
   removable?: boolean
@@ -198,7 +215,6 @@ export interface INodeSlot {
   not_subgraph_input?: boolean
   color_off?: CanvasColour
   color_on?: CanvasColour
-  label?: string
   locked?: boolean
   nameLocked?: boolean
   pos?: Point