@teachinglab/omd 0.7.25 → 0.7.27

package/canvas/core/omdCanvas.js

@@ -202,6 +202,11 @@ export class omdCanvas {
             this.focusFrameManager = new FocusFrameManager(this);
         }
 
+        // Keep the custom cursor above toolbar/buttons and all other SVG UI.
+        if (this.cursor && this.svg) {
+            this.cursor.attachTo(this.svg);
+        }
+
         // Apply any selection styles defined in config to the ResizeHandleManager
         // (PointerTool registers the manager on canvas.resizeHandleManager during its constructor)
         if (this.resizeHandleManager && this.config.selection) {

package/canvas/ui/cursor.js

@@ -461,4 +461,13 @@ export class Cursor {
             this.element.parentNode.removeChild(this.element);
         }
     }
+
+    /**
+     * Reattach the cursor element to a specific parent so it can sit above other SVG UI.
+     * @param {SVGElement} parent
+     */
+    attachTo(parent) {
+        if (!parent || !this.element) return;
+        parent.appendChild(this.element);
+    }
 } 

package/canvas/ui/toolbar.js

@@ -45,12 +45,26 @@ export class Toolbar {
         
         // Create a jsvgGroup for the toolbar
         this.toolbarGroup = new jsvgGroup();
+        this.toolbarGroup.svgObject.style.cursor = 'none';
         
         // Stop pointer events from bubbling to canvas to prevent drawing while interacting with toolbar
         const stopPropagation = (e) => e.stopPropagation();
         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();
+            }
+        });
         
         // Create background rectangle
         this.background = new jsvgRect();
@@ -311,4 +325,22 @@ export class Toolbar {
         }
         this.buttons.clear();
     }
+
+    _syncCanvasCursor(event, forceShow = false) {
+        if (!this.canvas?.cursor || !this.canvas?.clientToSVG) return;
+
+        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);
+            }
+        }
+    }
 } 

package/package.json

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