From 760050ba58de814c26d9cfe93e73c0eddbc0b24d Mon Sep 17 00:00:00 2001
From: Daniel Wood <s.d.wood.82@googlemail.com>
Date: Sun, 5 Apr 2026 08:58:13 +0100
Subject: [PATCH 1/4] Enable cursor support

---
 src/js/components/canvas.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/js/components/canvas.js b/src/js/components/canvas.js
index 282d67c..bd02d46 100644
--- a/src/js/components/canvas.js
+++ b/src/js/components/canvas.js
@@ -15,6 +15,9 @@ export default class Canvas extends Component{
     // set the paint callback
     this.props.core.canvas.setExternalPaintCallbackFunction(this.paint.bind(this))
 
+    // set the cursor callback
+    this.props.core.canvas.setCursorCallbackFunction(this.onCursorChange.bind(this))
+
     // add keydown eventlistener
     document.addEventListener("keydown", this.boundHandleKeyPress)
 
@@ -29,6 +32,7 @@ export default class Canvas extends Component{
   componentDidUpdate(prevProps) {
     if (prevProps.core !== this.props.core) {
       this.props.core.canvas.setExternalPaintCallbackFunction(this.paint.bind(this));
+      this.props.core.canvas.setCursorCallbackFunction(this.onCursorChange.bind(this));
       this.paint();
     }
   }
@@ -36,6 +40,17 @@ export default class Canvas extends Component{
   componentWillUnmount() {
     document.removeEventListener("keydown", this.boundHandleKeyPress)
     this.resizeObserver.disconnect();
+    this.props.core.canvas.setCursorCallbackFunction(undefined);
+  }
+
+  onCursorChange(state) {
+    const cursors = {
+      DEFAULT: 'crosshair',
+      GRAB: 'grab',
+      GRABBING: 'grabbing',
+      SELECTION: 'cell',
+    };
+    this.canvasRef.current.style.cursor = cursors[state] ?? 'crosshair';
   }
 
   paint() {

From ea1a78b8ea78e865fe3ceacfb4d7cbe8b9748213 Mon Sep 17 00:00:00 2001
From: Daniel Wood <s.d.wood.82@googlemail.com>
Date: Sun, 5 Apr 2026 10:04:16 +0100
Subject: [PATCH 2/4] Disconnect the cursor callback on core changes

---
 src/js/components/canvas.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/components/canvas.js b/src/js/components/canvas.js
index bd02d46..7b58947 100644
--- a/src/js/components/canvas.js
+++ b/src/js/components/canvas.js
@@ -31,6 +31,7 @@ export default class Canvas extends Component{
 
   componentDidUpdate(prevProps) {
     if (prevProps.core !== this.props.core) {
+      prevProps.core.canvas.setCursorCallbackFunction(undefined);
       this.props.core.canvas.setExternalPaintCallbackFunction(this.paint.bind(this));
       this.props.core.canvas.setCursorCallbackFunction(this.onCursorChange.bind(this));
       this.paint();

From 3f378bcf52f7e688ecaff51b9921a1c6b55a32a1 Mon Sep 17 00:00:00 2001
From: Daniel Wood <s.d.wood.82@googlemail.com>
Date: Sun, 5 Apr 2026 10:06:44 +0100
Subject: [PATCH 3/4] Update canvas.js

---
 src/js/components/canvas.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/js/components/canvas.js b/src/js/components/canvas.js
index 7b58947..0f7c17c 100644
--- a/src/js/components/canvas.js
+++ b/src/js/components/canvas.js
@@ -7,6 +7,7 @@ export default class Canvas extends Component{
 
     this.canvasRef = React.createRef();
     this.boundHandleKeyPress = this.handleKeyPress.bind(this)
+    this.boundOnCursorChange = this.onCursorChange.bind(this)
     this.state = { contextMenu: null };
   }
 
@@ -16,7 +17,7 @@ export default class Canvas extends Component{
     this.props.core.canvas.setExternalPaintCallbackFunction(this.paint.bind(this))
 
     // set the cursor callback
-    this.props.core.canvas.setCursorCallbackFunction(this.onCursorChange.bind(this))
+    this.props.core.canvas.setCursorCallbackFunction(this.boundOnCursorChange)
 
     // add keydown eventlistener
     document.addEventListener("keydown", this.boundHandleKeyPress)
@@ -33,7 +34,7 @@ export default class Canvas extends Component{
     if (prevProps.core !== this.props.core) {
       prevProps.core.canvas.setCursorCallbackFunction(undefined);
       this.props.core.canvas.setExternalPaintCallbackFunction(this.paint.bind(this));
-      this.props.core.canvas.setCursorCallbackFunction(this.onCursorChange.bind(this));
+      this.props.core.canvas.setCursorCallbackFunction(this.boundOnCursorChange);
       this.paint();
     }
   }

From 565456afbb21fef2f431d18a5825f68a871a04cc Mon Sep 17 00:00:00 2001
From: Daniel Wood <s.d.wood.82@googlemail.com>
Date: Sun, 5 Apr 2026 10:07:48 +0100
Subject: [PATCH 4/4] Guard on state ref

---
 src/js/components/canvas.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/components/canvas.js b/src/js/components/canvas.js
index 0f7c17c..024a35e 100644
--- a/src/js/components/canvas.js
+++ b/src/js/components/canvas.js
@@ -46,6 +46,7 @@ export default class Canvas extends Component{
   }
 
   onCursorChange(state) {
+    if (!this.canvasRef.current) return;
     const cursors = {
       DEFAULT: 'crosshair',
       GRAB: 'grab',