@teachinglab/omd 0.7.21 → 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.21",
+  "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/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);
+    }
+}