@teachinglab/omd 0.7.27 → 0.7.28

package/canvas/ui/toolbar.js

@@ -45,26 +45,25 @@ export class Toolbar {
         
         // Create a jsvgGroup for the toolbar
         this.toolbarGroup = new jsvgGroup();
-        this.toolbarGroup.svgObject.style.cursor = 'none';
+        this.toolbarGroup.svgObject.style.cursor = 'pointer';
         
         // Stop pointer events from bubbling to canvas to prevent drawing while interacting with toolbar
         const stopPropagation = (e) => e.stopPropagation();
+        const hideCanvasCursor = (e) => {
+            e.stopPropagation();
+            this.canvas.cursor?.hide?.();
+        };
+        const restoreCanvasCursor = (e) => {
+            e.stopPropagation();
+            this._restoreCanvasCursor(e);
+        };
+
         this.toolbarGroup.svgObject.addEventListener('pointerdown', stopPropagation);
+        this.toolbarGroup.svgObject.addEventListener('pointermove', stopPropagation);
         this.toolbarGroup.svgObject.addEventListener('pointerup', stopPropagation);
-
-        // Keep the custom cursor alive while hovering toolbar controls.
-        this.toolbarGroup.svgObject.addEventListener('pointermove', (e) => {
-            e.stopPropagation();
-            this._syncCanvasCursor(e);
-        });
-        this.toolbarGroup.svgObject.addEventListener('pointerenter', (e) => {
-            this._syncCanvasCursor(e, true);
-        });
-        this.toolbarGroup.svgObject.addEventListener('pointerleave', () => {
-            if (this.canvas.cursor) {
-                this.canvas.cursor.hide();
-            }
-        });
+        this.toolbarGroup.svgObject.addEventListener('pointerenter', hideCanvasCursor);
+        this.toolbarGroup.svgObject.addEventListener('pointerleave', restoreCanvasCursor);
+        this.toolbarGroup.svgObject.addEventListener('pointercancel', restoreCanvasCursor);
         
         // Create background rectangle
         this.background = new jsvgRect();
@@ -326,21 +325,30 @@ export class Toolbar {
         this.buttons.clear();
     }
 
-    _syncCanvasCursor(event, forceShow = false) {
-        if (!this.canvas?.cursor || !this.canvas?.clientToSVG) return;
+    _restoreCanvasCursor(event) {
+        if (!this.canvas?.cursor) return;
+
+        const nextTarget = event?.relatedTarget;
+        const isStillInsideCanvas = !!(nextTarget && this.canvas?.svg?.contains?.(nextTarget));
+
+        if (!isStillInsideCanvas) {
+            this.canvas.cursor.hide();
+            return;
+        }
 
-        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
-        this.canvas.cursor.setPosition(canvasCoords.x, canvasCoords.y);
+        if (this.canvas.clientToSVG && typeof event?.clientX === 'number' && typeof event?.clientY === 'number') {
+            const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
+            this.canvas.cursor.setPosition(canvasCoords.x, canvasCoords.y);
+        }
 
-        if (forceShow) {
-            this.canvas.cursor.show();
-            const activeTool = this.canvas.toolManager?.getActiveTool?.();
-            if (activeTool?.getCursor) {
-                this.canvas.cursor.setShape(activeTool.getCursor());
-            }
-            if (activeTool?.config) {
-                this.canvas.cursor.updateFromToolConfig(activeTool.config);
-            }
+        const activeTool = this.canvas.toolManager?.getActiveTool?.();
+        if (activeTool?.getCursor) {
+            this.canvas.cursor.setShape(activeTool.getCursor());
         }
+        if (activeTool?.config) {
+            this.canvas.cursor.updateFromToolConfig(activeTool.config);
+        }
+
+        this.canvas.cursor.show();
     }
 } 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.27",
+  "version": "0.7.28",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

package/readme.html

@@ -145,7 +145,7 @@
     </div>
     
     <div class="content">
-        <h1 id="omd-on-screen-math-display">OMD (Open Math Display)</h1>
+        <h1 id="omd-open-math-display">OMD (Open Math Display)</h1>
 <blockquote>
 <p>A JavaScript library for creating interactive mathematical interfaces in web applications</p>
 </blockquote>