From be8dc6867e09e981b023100a3c18b9a292eee6c7 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Fri, 28 Feb 2025 01:50:39 +1100
Subject: [PATCH] [Refactor] Prefer event listeners to callback props (#637)

N.B.: `onerror` replacement is not a `window` or `Element` instance.
---
 eslint.config.js    | 1 -
 src/LGraph.ts       | 4 ++--
 src/LGraphCanvas.ts | 8 ++++----
 src/LGraphNode.ts   | 4 ++--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 7455b1bda..dbb73d8a8 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -63,7 +63,6 @@ export default tseslint.config(
       "unicorn/no-this-assignment": "off",
       "unicorn/no-useless-switch-case": "off",
       "unicorn/no-zero-fractions": "off",
-      "unicorn/prefer-add-event-listener": "off",
       "unicorn/prefer-blob-reading-methods": "off",
       "unicorn/prefer-default-parameters": "off",
       "unicorn/prefer-math-min-max": "off",
diff --git a/src/LGraph.ts b/src/LGraph.ts
index d371a47af..e415e9718 100644
--- a/src/LGraph.ts
+++ b/src/LGraph.ts
@@ -1713,8 +1713,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
       that.configure(data)
       callback?.()
     })
-    req.onerror = function (err) {
+    req.addEventListener("error", (err) => {
       console.error("Error loading graph:", err)
-    }
+    })
   }
 }
diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts
index 275fcf6bb..e63c89ca8 100644
--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -3592,10 +3592,10 @@ export class LGraphCanvas implements ConnectionColorContext {
           if (node.onDropData) {
             // prepare reader
             const reader = new FileReader()
-            reader.onload = function (event) {
+            reader.addEventListener("load", function (event) {
               const data = event.target.result
               node.onDropData(data, filename, file)
-            }
+            })
 
             // read data
             const type = file.type.split("/")[0]
@@ -4521,9 +4521,9 @@ export class LGraphCanvas implements ConnectionColorContext {
           this._bg_img.name = this.background_image
           this._bg_img.src = this.background_image
           const that = this
-          this._bg_img.onload = function () {
+          this._bg_img.addEventListener("load", function () {
             that.draw(true, true)
-          }
+          })
         }
 
         let pattern = this._pattern
diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts
index 463e9b83f..b6fd2f518 100644
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -2760,10 +2760,10 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     img.ready = false
 
     const dirty = () => this.setDirtyCanvas(true)
-    img.onload = function (this: AsyncImageElement) {
+    img.addEventListener("load", function (this: AsyncImageElement) {
       this.ready = true
       dirty()
-    }
+    })
     return img
   }