Fix CI workflow step names and add event listener cleanup (#13)

Author: Copilot

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v5
 
-    - name: Setup Node.js 22.x
+    - name: Setup Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x
@@ -46,7 +46,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v5
 
-    - name: Setup Node.js 22.x
+    - name: Setup Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x
@@ -66,7 +66,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v5
 
-    - name: Setup Node.js 22.x
+    - name: Setup Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x
@@ -92,7 +92,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v5
 
-    - name: Setup Node.js 22.x
+    - name: Setup Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x
@@ -115,7 +115,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v5
 
-    - name: Setup Node.js 22.x
+    - name: Setup Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x
@@ -135,7 +135,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v5
 
-    - name: Setup Node.js 22.x
+    - name: Setup Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x

examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs

@@ -124,17 +124,26 @@ export const controls = ({ React, jsx, fragment }) => {
         componentDidMount() {
             const { canvas, app } = this;
             // console.log("componentDidMount()", { canvas, app });
-            canvas.addEventListener('mousemove', this.mouseEvent.bind(this));
-            canvas.addEventListener('mousedown', this.mouseEvent.bind(this));
-            canvas.addEventListener('touchmove', this.mouseEvent.bind(this));
-            canvas.addEventListener('touchstart', this.mouseEvent.bind(this));
+            this.boundMouseEvent = this.mouseEvent.bind(this);
+            canvas.addEventListener('mousemove', this.boundMouseEvent);
+            canvas.addEventListener('mousedown', this.boundMouseEvent);
+            canvas.addEventListener('touchmove', this.boundMouseEvent);
+            canvas.addEventListener('touchstart', this.boundMouseEvent);
             if (!app) {
                 console.warn('no app');
                 return;
             }
             this.onAppStart();
         }
 
+        componentWillUnmount() {
+            const { canvas } = this;
+            canvas.removeEventListener('mousemove', this.boundMouseEvent);
+            canvas.removeEventListener('mousedown', this.boundMouseEvent);
+            canvas.removeEventListener('touchmove', this.boundMouseEvent);
+            canvas.removeEventListener('touchstart', this.boundMouseEvent);
+        }
+
         render() {
             return fragment(jsx('canvas', { ref: this.refCanvas }));
         }

examples/src/examples/animation/blend-trees-2d-directional.controls.mjs

@@ -78,6 +78,11 @@ export const controls = ({ React, jsx, fragment }) => {
         };
         canvas.addEventListener('mousemove', mouseEvent);
         canvas.addEventListener('mousedown', mouseEvent);
+
+        return () => {
+            canvas.removeEventListener('mousemove', mouseEvent);
+            canvas.removeEventListener('mousedown', mouseEvent);
+        };
     });
     return fragment(jsx('canvas', { ref: canvasRef }));
 };