[Refactor] Fix assignment of this to const (#631)

Refactors using arrows funcs or storing the once-off requirement as an
action, removing the need to dereference this inside the function.

src/LGraph.ts

@@ -364,7 +364,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
     this.starttime = LiteGraph.getTime()
     this.last_update_time = this.starttime
     interval ||= 0
-    const that = this
 
     // execute once per frame
     if (
@@ -372,24 +371,24 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
       typeof window != "undefined" &&
       window.requestAnimationFrame
     ) {
-      function on_frame() {
-        if (that.execution_timer_id != -1) return
+      const on_frame = () => {
+        if (this.execution_timer_id != -1) return
 
         window.requestAnimationFrame(on_frame)
-        that.onBeforeStep?.()
-        that.runStep(1, !that.catch_errors)
-        that.onAfterStep?.()
+        this.onBeforeStep?.()
+        this.runStep(1, !this.catch_errors)
+        this.onAfterStep?.()
       }
       this.execution_timer_id = -1
       on_frame()
     } else {
       // execute every 'interval' ms
       // @ts-expect-error
-      this.execution_timer_id = setInterval(function () {
+      this.execution_timer_id = setInterval(() => {
         // execute
-        that.onBeforeStep?.()
-        that.runStep(1, !that.catch_errors)
-        that.onAfterStep?.()
+        this.onBeforeStep?.()
+        this.runStep(1, !this.catch_errors)
+        this.onAfterStep?.()
       }, interval)
     }
   }
@@ -468,11 +467,11 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
 
         this.onAfterExecute?.()
         this.errors_in_execution = false
-      } catch (err) {
+      } catch (error) {
         this.errors_in_execution = true
-        if (LiteGraph.throw_errors) throw err
+        if (LiteGraph.throw_errors) throw error
 
-        if (LiteGraph.debug) console.log("Error during execution: " + err)
+        if (LiteGraph.debug) console.log("Error during execution: " + error)
         this.stop()
       }
     }
@@ -661,7 +660,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
 
       for (let i = 0; i < current.inputs.length; ++i) {
         const input = current.getInputNode(i)
-        if (input && ancestors.indexOf(input) == -1) {
+        if (input && !ancestors.includes(input)) {
           pending.push(input)
         }
       }
@@ -1128,8 +1127,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
       newnode.graph = this
       this._nodes_by_id[newnode.id] = newnode
 
-      if (node.inputs) newnode.inputs = node.inputs.concat()
-      if (node.outputs) newnode.outputs = node.outputs.concat()
+      if (node.inputs) newnode.inputs = [...node.inputs]
+      if (node.outputs) newnode.outputs = [...node.outputs]
     }
     this.updateExecutionOrder()
   }
@@ -1707,7 +1706,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
     const req = new XMLHttpRequest()
     req.open("GET", url, true)
     req.send(null)
-    req.onload = function () {
+    req.addEventListener("load", function () {
       if (req.status !== 200) {
         console.error("Error loading graph:", req.status, req.response)
         return
@@ -1715,7 +1714,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
       const data = JSON.parse(req.response)
       that.configure(data)
       callback?.()
-    }
+    })
     req.onerror = function (err) {
       console.error("Error loading graph:", err)
     }

src/LGraphCanvas.ts

@@ -6959,7 +6959,13 @@ export class LGraphCanvas implements ConnectionColorContext {
         value_element.addEventListener("click", function (event) {
           const values = options.values || []
           const propname = this.parentNode.dataset["property"]
-          const elem_that = this
+          const inner_clicked = (v) => {
+            // node.setProperty(propname,v);
+            // graphcanvas.dirty_canvas = true;
+            this.textContent = v
+            innerChange(propname, v)
+            return false
+          }
           new LiteGraph.ContextMenu(
             values,
             {
@@ -6970,13 +6976,6 @@ export class LGraphCanvas implements ConnectionColorContext {
             // @ts-expect-error
             ref_window,
           )
-          function inner_clicked(v) {
-            // node.setProperty(propname,v);
-            // graphcanvas.dirty_canvas = true;
-            elem_that.textContent = v
-            innerChange(propname, v)
-            return false
-          }
         })
       }
 
@@ -7004,24 +7003,23 @@ export class LGraphCanvas implements ConnectionColorContext {
     this.SELECTED_NODE = node
     this.closePanels()
     const ref_window = this.getCanvasWindow()
-    const graphcanvas = this
     const panel = this.createPanel(node.title || "", {
       closable: true,
       window: ref_window,
-      onOpen: function () {
-        graphcanvas.NODEPANEL_IS_OPEN = true
+      onOpen: () => {
+        this.NODEPANEL_IS_OPEN = true
       },
-      onClose: function () {
-        graphcanvas.NODEPANEL_IS_OPEN = false
-        graphcanvas.node_panel = null
+      onClose: () => {
+        this.NODEPANEL_IS_OPEN = false
+        this.node_panel = null
       },
     })
-    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 = () => {
       // clear
       panel.content.innerHTML = ""
       // @ts-expect-error ctor props
@@ -7029,8 +7027,8 @@ export class LGraphCanvas implements ConnectionColorContext {
 
       panel.addHTML("<h3>Properties</h3>")
 
-      const fUpdate = function (name, value) {
-        graphcanvas.graph.beforeChange(node)
+      const fUpdate = (name, value) => {
+        this.graph.beforeChange(node)
         switch (name) {
         case "Title":
           node.title = value
@@ -7056,8 +7054,8 @@ export class LGraphCanvas implements ConnectionColorContext {
           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)
@@ -7311,7 +7309,6 @@ export class LGraphCanvas implements ConnectionColorContext {
   }
 
   processContextMenu(node: LGraphNode, event: CanvasMouseEvent): void {
-    const that = this
     const canvas = LGraphCanvas.active_canvas
     const ref_window = canvas.getCanvasWindow()
 
@@ -7404,6 +7401,12 @@ export class LGraphCanvas implements ConnectionColorContext {
     // @ts-expect-error Remove param ref_window - unused
     new LiteGraph.ContextMenu(menu_info, options, ref_window)
 
+    const createDialog = (options: IDialogOptions) => this.createDialog(
+      "<span class='name'>Name</span><input autofocus type='text'/><button>OK</button>",
+      options,
+    )
+    const setDirty = () => this.setDirty(true)
+
     function inner_option_clicked(v, options) {
       if (!v) return
 
@@ -7432,10 +7435,8 @@ export class LGraphCanvas implements ConnectionColorContext {
         const slot_info = info.input
           ? node.getInputInfo(info.slot)
           : node.getOutputInfo(info.slot)
-        const dialog = that.createDialog(
-          "<span class='name'>Name</span><input autofocus type='text'/><button>OK</button>",
-          options,
-        )
+        const dialog = createDialog(options)
+
         const input = dialog.querySelector("input")
         if (input && slot_info) {
           input.value = slot_info.label || ""
@@ -7446,7 +7447,7 @@ export class LGraphCanvas implements ConnectionColorContext {
             if (slot_info) {
               slot_info.label = input.value
             }
-            that.setDirty(true)
+            setDirty()
           }
           dialog.close()
           node.graph.afterChange()

src/LGraphNode.ts

@@ -2762,10 +2762,10 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     img.src = LiteGraph.node_images_path + url
     img.ready = false
 
-    const that = this
+    const dirty = () => this.setDirtyCanvas(true)
     img.onload = function (this: AsyncImageElement) {
       this.ready = true
-      that.setDirtyCanvas(true)
+      dirty()
     }
     return img
   }