feat: improve this-binding #3

zhzLuke96 · zhzLuke96 · commit 7670771855f5 · 2025-03-19T15:26:42.000+08:00
- Address remaining instances of xx = this;
diff --git a/apps/editor/src/Editor.ts b/apps/editor/src/Editor.ts
@@ -150,16 +150,14 @@ export default class Editor {
         this.root
             .querySelector<HTMLDivElement>(".header .tools-left")!
             .appendChild(this.meter);
-        var self = this;
-
         setInterval(() => {
             this.meter!.querySelector<HTMLDivElement>(
                 ".cpuload .fgload",
-            )!.style.width = 2 * self.graph.execution_time * 90 + "px";
-            if (self.graph.status == LGraphStatus.STATUS_RUNNING) {
+            )!.style.width = 2 * this.graph.execution_time * 90 + "px";
+            if (this.graph.status == LGraphStatus.STATUS_RUNNING) {
                 this.meter!.querySelector<HTMLDivElement>(
                     ".gpuload .fgload",
-                )!.style.width = self.graphCanvas.render_time * 10 * 90 + "px";
+                )!.style.width = this.graphCanvas.render_time * 10 * 90 + "px";
             } else {
                 this.meter!.querySelector<HTMLDivElement>(
                     ".gpuload .fgload",
@@ -265,9 +263,8 @@ export default class Editor {
             throw "Fullscreen not supported";
         }
 
-        var self = this;
-        setTimeout(function () {
-            self.graphCanvas.resize();
+        setTimeout(() => {
+            this.graphCanvas.resize();
         }, 100);
     }
 
diff --git a/packages/core/src/ContextMenu.ts b/packages/core/src/ContextMenu.ts
@@ -387,7 +387,7 @@ export default class ContextMenu {
         //menu option clicked
         const inner_onclick = (_e: MouseEvent) => {
             let index = parseInt(element.dataset["value"]);
-            var value = ctxMenu.values[index];
+            var value = this.values[index];
             if (LiteGraph.debug)
                 console.debug("ContextMenu inner_onclick", index, value);
 
@@ -466,8 +466,6 @@ export default class ContextMenu {
             LiteGraph.pointerListenerAdd(element, "enter", inner_over);
         }
 
-        let ctxMenu = this;
-
         function inner_over(e: MouseEvent) {
             var value = this.value;
             if (!value || !value.has_submenu) {
@@ -527,7 +525,6 @@ export default class ContextMenu {
     }
 
     protected setupComboFilter() {
-        const menuThis = this;
         const { values, options, root: $root } = this;
         const is_long_combo =
             this.options.className?.includes("combo-menu") &&
@@ -649,7 +646,7 @@ export default class ContextMenu {
                         selectedItem?.click();
                         break;
                     case "Escape":
-                        menuThis.close();
+                        this.close();
                         break;
                 }
             });
diff --git a/packages/core/src/LGraphCanvas.ts b/packages/core/src/LGraphCanvas.ts
@@ -2030,6 +2030,20 @@ export default class LGraphCanvas
         var width = node.size[0];
         var ref_window = this.getCanvasWindow();
 
+        const inner_value_change = (widget: IWidget, value: any) => {
+            widget.value = value;
+            if (
+                widget.options &&
+                widget.options.property &&
+                node.properties[widget.options.property] !== undefined
+            ) {
+                node.setProperty(widget.options.property, value);
+            }
+            if (widget.callback) {
+                widget.callback(widget.value, this, node, pos, event);
+            }
+        };
+
         for (var i = 0; i < node.widgets.length; ++i) {
             var w = node.widgets[i];
             if (!w || w.disabled) continue;
@@ -2263,21 +2277,6 @@ export default class LGraphCanvas
             return w;
         } //end for
 
-        const thisCanvas = this;
-        function inner_value_change(widget: IWidget, value: any) {
-            widget.value = value;
-            if (
-                widget.options &&
-                widget.options.property &&
-                node.properties[widget.options.property] !== undefined
-            ) {
-                node.setProperty(widget.options.property, value);
-            }
-            if (widget.callback) {
-                widget.callback(widget.value, thisCanvas, node, pos, event);
-            }
-        }
-
         return null;
     }
 
@@ -2341,27 +2340,26 @@ export default class LGraphCanvas
             return;
         }
 
-        var self = this;
         var delta = this.live_mode ? 1.1 : 0.9;
         if (this.live_mode) {
             this.live_mode = false;
             this.editor_alpha = 0.1;
         }
 
-        var t = setInterval(function () {
-            self.editor_alpha *= delta;
-            self.dirty_canvas = true;
-            self.dirty_bgcanvas = true;
+        var t = setInterval(() => {
+            this.editor_alpha *= delta;
+            this.dirty_canvas = true;
+            this.dirty_bgcanvas = true;
 
-            if (delta < 1 && self.editor_alpha < 0.01) {
+            if (delta < 1 && this.editor_alpha < 0.01) {
                 clearInterval(t);
                 if (delta < 1) {
-                    self.live_mode = true;
+                    this.live_mode = true;
                 }
             }
-            if (delta > 1 && self.editor_alpha > 0.99) {
+            if (delta > 1 && this.editor_alpha > 0.99) {
                 clearInterval(t);
-                self.editor_alpha = 1;
+                this.editor_alpha = 1;
             }
         }, 1);
     }
diff --git a/packages/core/src/LGraphCanvas_UI.ts b/packages/core/src/LGraphCanvas_UI.ts
@@ -2148,24 +2148,23 @@ export default class LGraphCanvas_UI {
         // this.SELECTED_NODE = node;
         this.closePanels();
         var ref_window = this.getCanvasWindow();
-        var graphcanvas = this;
         var panel = this.createPanel(node.title || "", {
             closable: true,
             window: ref_window,
             onOpen: function () {
                 // graphcanvas.NODEPANEL_IS_OPEN = true;
             },
-            onClose: function () {
+            onClose: () => {
                 // graphcanvas.NODEPANEL_IS_OPEN = false;
-                graphcanvas.node_panel = null;
+                this.node_panel = null;
             },
         }) as INodePanel;
-        graphcanvas.node_panel = panel;
+        this.node_panel = panel;
         panel.id = "node-panel";
         panel.node = node;
         panel.classList.add("settings");
 
-        function inner_refresh() {
+        const inner_refresh = () => {
             panel.content.innerHTML = ""; //clear
             panel.addHTML(
                 "<span class='node_type'>" +
@@ -2177,8 +2176,8 @@ export default class LGraphCanvas_UI {
 
             panel.addHTML("<h3>Properties</h3>");
 
-            var fUpdate = function (name: string, value: any) {
-                graphcanvas.graph.beforeChange(node);
+            var fUpdate = (name: string, value: any) => {
+                this.graph.beforeChange(node);
                 switch (name) {
                     case "Title":
                         node.title = value;
@@ -2206,8 +2205,8 @@ export default class LGraphCanvas_UI {
                         node.setProperty(name, value);
                         break;
                 }
-                graphcanvas.graph.afterChange();
-                graphcanvas.dirty_canvas = true;
+                this.graph.afterChange();
+                this.dirty_canvas = true;
             };
 
             panel.addWidget("string", "Title", node.title, {}, fUpdate);
@@ -2270,9 +2269,9 @@ export default class LGraphCanvas_UI {
                     panel.close();
                 })
                 .classList.add("delete");
-        }
+        };
 
-        panel.inner_showCodePad = function (propname: string): void {
+        panel.inner_showCodePad = (propname: string): void => {
             panel.classList.remove("settings");
             panel.classList.add("centered");
 
@@ -2289,7 +2288,7 @@ export default class LGraphCanvas_UI {
               {*/
             panel.alt_content.innerHTML = "<textarea class='code'></textarea>";
             var textarea = panel.alt_content.querySelector("textarea");
-            var fDoneWith = function () {
+            var fDoneWith = () => {
                 panel.toggleAltContent(false); //if(node_prop_div) node_prop_div.style.display = "block"; // panel.close();
                 panel.toggleFooterVisibility(true);
                 textarea.parentNode.removeChild(textarea);
@@ -2298,7 +2297,7 @@ export default class LGraphCanvas_UI {
                 inner_refresh();
             };
             textarea.value = node.properties[propname];
-            textarea.addEventListener("keydown", function (e) {
+            textarea.addEventListener("keydown", (e) => {
                 if (e.code == "Enter" && e.ctrlKey) {
                     node.setProperty(propname, textarea.value);
                     fDoneWith();
@@ -2308,7 +2307,7 @@ export default class LGraphCanvas_UI {
             panel.toggleFooterVisibility(false);
             textarea.style.height = "calc(100% - 40px)";
             /*}*/
-            var assign = panel.addButton("Assign", function () {
+            var assign = panel.addButton("Assign", () => {
                 node.setProperty(propname, textarea.value);
                 fDoneWith();
             });
@@ -3851,7 +3850,6 @@ export default class LGraphCanvas_UI {
                         }
                         let parentNode = this.parentNode as HTMLElement;
                         var propname = parentNode.dataset["property"];
-                        var elem_that = this;
                         let choices = Array.from(values).map((v) => {
                             return { content: v };
                         });
@@ -3860,21 +3858,20 @@ export default class LGraphCanvas_UI {
                             {
                                 event: event as MouseEventExt,
                                 className: "dark combo-menu",
-                                callback: inner_clicked,
+                                callback: (
+                                    v: IContextMenuItem,
+                                    option: IContextMenuOptions,
+                                    event: MouseEventExt,
+                                ) => {
+                                    //node.setProperty(propname,v);
+                                    //graphcanvas.dirty_canvas = true;
+                                    this.innerText = v.content;
+                                    innerChange(propname, v.content);
+                                    return false;
+                                },
                             },
                             ref_window,
                         );
-                        function inner_clicked(
-                            v: IContextMenuItem,
-                            option: IContextMenuOptions,
-                            event: MouseEventExt,
-                        ) {
-                            //node.setProperty(propname,v);
-                            //graphcanvas.dirty_canvas = true;
-                            elem_that.innerText = v.content;
-                            innerChange(propname, v.content);
-                            return false;
-                        }
                     },
                 );
             }
diff --git a/packages/core/src/nodes/GraphInput.ts b/packages/core/src/nodes/GraphInput.ts
@@ -61,8 +61,6 @@ export default class GraphInput extends LGraphNode {
     constructor(title?: string) {
         super(title);
 
-        let that = this;
-
         this.nameWidget = this.addWidget(
             "text",
             "Name",
@@ -91,8 +89,8 @@ export default class GraphInput extends LGraphNode {
             "number",
             "Value",
             this.properties.value,
-            function (v) {
-                that.setProperty("value", v);
+            (v) => {
+                this.setProperty("value", v);
             },
         );
 
diff --git a/packages/core/src/nodes/GraphOutput.ts b/packages/core/src/nodes/GraphOutput.ts
@@ -55,8 +55,6 @@ export default class GraphOutput extends LGraphNode {
     constructor(title?: string) {
         super(title);
 
-        let that = this;
-
         this.nameWidget = this.addWidget(
             "text",
             "Name",
