@teachinglab/omd 0.7.27 → 0.7.29

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/jsvg/jsvg.js

@@ -400,6 +400,25 @@ export class jsvgEllipse extends jsvgObject
         this.height = h;
         this.svgObject.setAttribute("ry", (this.height/2).toString() );
     }
+
+    setPosition( x, y )
+    {
+        this.xpos = x;
+        this.ypos = y;
+        this.svgObject.setAttribute("cx", x.toString() );
+        this.svgObject.setAttribute("cy", y.toString() );
+        this.svgObject.setAttribute("transform", "" );
+    }
+
+    updateTransform()
+    {
+        var transformParams = "";
+        if ( this.scale != 1.0 )
+            transformParams += " scale(" + this.scale.toString()  + ")";
+        if ( this.rotation != 0.0 )
+            transformParams += " rotate(" + this.rotation + ")";
+        this.svgObject.setAttribute("transform", transformParams.trim() );
+    }
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.27",
+  "version": "0.7.29",
   "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>

package/src/omdShapes.js

@@ -148,10 +148,15 @@ export class omdIsoscelesTriangle extends jsvgGroup
     {
         this.shapePath.clearPoints();
 
-        this.shapePath.addPoint( -0.5*this.unitScale*this.triangleBase, 0 );
-        this.shapePath.addPoint(  0.5*this.unitScale*this.triangleBase, 0 );
-        this.shapePath.addPoint( 0, -1.0*this.unitScale*this.triangleHeight );
-        this.shapePath.addPoint( -0.5*this.unitScale*this.triangleBase, 0 );
+        const baseWidth = this.unitScale * this.triangleBase;
+        const triangleHeight = this.unitScale * this.triangleHeight;
+        const offsetX = 10;
+        const offsetY = triangleHeight + 10;
+
+        this.shapePath.addPoint( offsetX, offsetY );
+        this.shapePath.addPoint( offsetX + baseWidth, offsetY );
+        this.shapePath.addPoint( offsetX + baseWidth * 0.5, offsetY - triangleHeight );
+        this.shapePath.addPoint( offsetX, offsetY );
 
         this.shapePath.updatePath();
 
@@ -286,7 +291,11 @@ export class omdEllipse extends jsvgGroup
 
     updateLayout()
     {
-        this.shapePath.setWidthAndHeight( this.rectWidth*this.unitScale, this.rectHeight*this.unitScale );
+        const ellipseWidth = this.rectWidth * this.unitScale;
+        const ellipseHeight = this.rectHeight * this.unitScale;
+
+        this.shapePath.setWidthAndHeight( ellipseWidth, ellipseHeight );
+        this.shapePath.setPosition( ellipseWidth * 0.5 + 10, ellipseHeight * 0.5 + 10 );
 
         // Set dimensions and viewBox for API compatibility
         this.width = this.rectWidth * this.unitScale + 20;
@@ -330,7 +339,10 @@ export class omdCircle extends jsvgGroup
 
     updateLayout()
     {
-        this.shapePath.setWidthAndHeight( 2.0*this.radius*this.unitScale, 2.0*this.radius*this.unitScale );
+        const diameter = 2.0 * this.radius * this.unitScale;
+
+        this.shapePath.setWidthAndHeight( diameter, diameter );
+        this.shapePath.setPosition( this.radius * this.unitScale + 10, this.radius * this.unitScale + 10 );
 
         // Set dimensions and viewBox for API compatibility
         this.width = 2.0 * this.radius * this.unitScale + 20;