@teachinglab/omd 0.7.26 → 0.7.28

package/canvas/ui/toolbar.js

@@ -45,12 +45,25 @@ export class Toolbar {
         
         // Create a jsvgGroup for the toolbar
         this.toolbarGroup = new jsvgGroup();
+        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);
+        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();
@@ -311,4 +324,31 @@ export class Toolbar {
         }
         this.buttons.clear();
     }
+
+    _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;
+        }
+
+        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);
+        }
+
+        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.26",
+  "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>