@teachinglab/omd 0.7.20 → 0.7.22

package/canvas/events/eventManager.js

@@ -214,10 +214,15 @@ export class EventManager {
         // Show custom cursor when entering canvas
         if (this.canvas.cursor) {
             this.canvas.cursor.show();
-            // Update cursor from current tool config
+            // Ensure the cursor shape matches the active tool (fixes stale crosshair on first entry)
             const activeTool = this.canvas.toolManager.getActiveTool();
-            if (activeTool && activeTool.config) {
-                this.canvas.cursor.updateFromToolConfig(activeTool.config);
+            if (activeTool) {
+                if (activeTool.getCursor) {
+                    this.canvas.cursor.setShape(activeTool.getCursor());
+                }
+                if (activeTool.config) {
+                    this.canvas.cursor.updateFromToolConfig(activeTool.config);
+                }
             }
         }
         // If mouse is down (event.buttons !== 0), start drawing

package/canvas/ui/cursor.js

@@ -60,8 +60,8 @@ export class Cursor {
             this.element.appendChild(shape);
         });
         
-        // Show default shape initially
-        this.setShape('default');
+        // Show pencil (blue dot) shape initially so the first visible cursor is always a dot
+        this.setShape('pencil');
     }
     
     /**

package/package.json

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

package/src/index.js

@@ -48,6 +48,7 @@ export {
     omdShapeLabelSet 
 } from './omdShapes.js';
 export { omdSpinner } from './omdSpinner.js';
+export { omdLabel } from './omdLabel.js';
 export { omdProblem } from './omdProblem.js';
 
 // Default export for organized access

package/src/omdExpression.js

@@ -8,6 +8,7 @@ import { omdNumber } from "./omdNumber.js";
 import { omdVariable } from "./omdVariable.js";
 import { omdMetaExpression } from "./omdMetaExpression.js"
 import { parseExpressionString } from "./omdUtils.js";
+import { getNodeForAST } from "../omd/core/omdUtilities.js";
 
 export class omdExpression extends omdMetaExpression
 {
@@ -21,6 +22,7 @@ export class omdExpression extends omdMetaExpression
         this.operatorSet = [];
         
         this.inset = 5;
+        this.expressionNode = null;
 
         this.expressionStack = new jsvgLayoutGroup();
         this.expressionStack.setPosition( this.inset, 0 );
@@ -28,15 +30,56 @@ export class omdExpression extends omdMetaExpression
         this.addChild( this.expressionStack );
     }
 
+    _renderWithExpressionNode(expressionString, fontSize) {
+        if (typeof math === 'undefined' || typeof math.parse !== 'function') {
+            throw new Error('math.js is required to parse expression strings');
+        }
+
+        const ast = math.parse(expressionString);
+        const NodeType = getNodeForAST(ast);
+        const exprNode = new NodeType(ast);
+
+        if (typeof fontSize === 'number' && exprNode.setFontSize) {
+            exprNode.setFontSize(fontSize);
+        }
+
+        if (exprNode.hideBackgroundByDefault) exprNode.hideBackgroundByDefault();
+        if (exprNode.computeDimensions) exprNode.computeDimensions();
+        if (exprNode.updateLayout) exprNode.updateLayout();
+
+        if (typeof this.expressionStack.removeAllChildren === 'function') {
+            this.expressionStack.removeAllChildren();
+        } else {
+            this.expressionStack.childList = [];
+        }
+        this.expressionStack.addChild(exprNode);
+        this.expressionStack.setSpacer(0);
+
+        this.expressionNode = exprNode;
+        this.updateLayout();
+    }
+
     loadFromJSON( data )
     {
         // Accept either structured object or a plain expression string
         if ( typeof data === 'string' ) {
+            try {
+                this._renderWithExpressionNode(data, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdExpression math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
             const parsed = parseExpressionString(data);
             if ( parsed ) data = parsed;
         }
         // Handle object with 'expression' string property
         else if ( typeof data === 'object' && data.expression && typeof data.expression === 'string' ) {
+            try {
+                this._renderWithExpressionNode(data.expression, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdExpression math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
              const parsed = parseExpressionString(data.expression);
              if ( parsed ) {
                  // Merge parsed data into data object
@@ -117,6 +160,24 @@ export class omdExpression extends omdMetaExpression
 
     updateLayout()
     {
+        if (this.expressionNode) {
+            const node = this.expressionNode;
+            if (node.computeDimensions) node.computeDimensions();
+            if (node.updateLayout) node.updateLayout();
+
+            this.expressionStack.doHorizontalLayout();
+            this.expressionStack.setPosition(this.inset, this.inset);
+
+            const W = node.width || this.expressionStack.width;
+            const H = node.height || this.expressionStack.height;
+
+            this.backRect.setWidthAndHeight( W + this.inset*2, H + this.inset*2 );
+            this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+            this.width = this.backRect.width;
+            this.height = this.backRect.height;
+            return;
+        }
+
         this.expressionStack.doHorizontalLayout();
 
         var W = this.expressionStack.width;

package/src/omdFactory.js

@@ -42,6 +42,7 @@ import {
     omdCircle,
     omdRegularPolygon
 } from './omdShapes.js';
+import { omdLabel } from './omdLabel.js';
 
 /**
  * Map of omdType strings to their corresponding class constructors
@@ -71,7 +72,8 @@ const OMD_TYPE_MAP = {
     'rectangle': omdRectangle,
     'ellipse': omdEllipse,
     'circle': omdCircle,
-    'regularPolygon': omdRegularPolygon
+    'regularPolygon': omdRegularPolygon,
+    'label': omdLabel,
 };
 
 /**

package/src/omdLabel.js

@@ -0,0 +1,66 @@
+import { omdMetaExpression } from "./omdMetaExpression.js";
+import { jsvgTextBox } from "@teachinglab/jsvg";
+
+const SIZE_MAP = {
+    small:  14,
+    medium: 20,
+    large:  28,
+};
+
+export class omdLabel extends omdMetaExpression
+{
+    constructor()
+    {
+        super();
+
+        this.type = "omdLabel";
+        this.text = "";
+        this.size = "medium"; // small | medium | large
+
+        this.textBox = new jsvgTextBox();
+        this.textBox.setFontFamily("Albert Sans");
+        this.textBox.setFontColor("black");
+        this.textBox.setVerticalCentering();
+        this.textBox.setAlignment("left");
+        this.addChild(this.textBox);
+
+        this.backRect.setFillColor("transparent");
+        this.backRect.setOpacity(0);
+    }
+
+    loadFromJSON(data)
+    {
+        if (typeof data === 'string') {
+            this.text = data;
+        } else {
+            if (typeof data.text  !== "undefined") this.text  = data.text;
+            if (typeof data.size  !== "undefined") this.size  = data.size;
+            if (typeof data.color !== "undefined") this.textBox.setFontColor(data.color);
+        }
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        const fontSize = SIZE_MAP[this.size] ?? SIZE_MAP.medium;
+        this.textBox.setFontSize(fontSize);
+
+        const padding = 8;
+        const approxCharW = fontSize * 0.58;
+        const W = Math.max(60, Math.ceil(String(this.text).length * approxCharW) + padding * 2);
+        const H = fontSize + padding * 2;
+
+        this.textBox.setWidthAndHeight(W, H);
+        this.textBox.setText(this.text ?? "");
+
+        this.backRect.setWidthAndHeight(W, H);
+        this.setWidthAndHeight(W, H);
+        this.width  = W;
+        this.height = H;
+    }
+
+    hideBackgroundByDefault()
+    {
+        this.backRect.setOpacity(0);
+    }
+}