@teachinglab/omd 0.7.22 → 0.7.24

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/package.json

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

package/src/omd.js

@@ -28,6 +28,7 @@ import { omdRectangle } from "./omdShapes.js";
 import { omdEllipse } from "./omdShapes.js";
 import { omdCircle } from "./omdShapes.js";
 import { omdRegularPolygon } from "./omdShapes.js";
+import { omdLabel } from "./omdLabel.js";
 import { jsvgContainer } from "@teachinglab/jsvg";
 
 export class omd extends jsvgContainer
@@ -172,6 +173,9 @@ export class omd extends jsvgContainer
             case "regularPolygon":
                 N = new omdRegularPolygon();
                 break;
+            case "label":
+                N = new omdLabel();
+                break;
             default:
                 console.error(`Unsupported OMD type: ${omdType}. Available types: number, variable, operator, term, expression, powerExpression, rationalExpression, function, equation, numberLine, balanceHanger, tapeDiagram, numberTile, ratioChart, coordinatePlane, spinner, table, tileEquation, rightTriangle, isoscelesTriangle, rectangle, ellipse, circle, regularPolygon`);
                 return;