@teachinglab/omd 0.7.21 → 0.7.23

package/canvas/core/omdCanvas.js

@@ -117,6 +117,8 @@ export class omdCanvas {
         this.svg.setAttribute('viewBox', `0 0 ${this.config.width} ${this.config.height}`);
         this.svg.style.cssText = `
             display: block;
+            width: 100%;
+            height: 100%;
             background: ${this.config.backgroundColor};
             cursor: none;
             touch-action: none;
@@ -441,11 +443,16 @@ export class omdCanvas {
     }
     
     /**
-     * Handle window resize
+     * Handle window resize — resize the canvas to match the container.
      * @private
      */
     _handleResize() {
-        // Optional: implement responsive behavior
+        if (!this.container) return;
+        const w = Math.max(400, this.container.clientWidth  || this.container.getBoundingClientRect().width  || 0);
+        const h = Math.max(400, this.container.clientHeight || this.container.getBoundingClientRect().height || 0);
+        if (!w || !h) return;
+        if (Math.abs(w - this.config.width) < 1 && Math.abs(h - this.config.height) < 1) return;
+        this.resize(w, h);
     }
     
     /**

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.23",
   "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);
+    }
+}