@teachinglab/omd 0.7.17 → 0.7.19

package/canvas/core/canvasConfig.js

@@ -48,7 +48,26 @@ export class CanvasConfig {
             danger: '#dc3545',
             ...options.theme
         };
-        
+
+        // Selection / resize-handle styling
+        this.selection = {
+            // Selection border
+            border: {
+                color:        options.selection?.border?.color        ?? '#007bff',
+                width:        options.selection?.border?.width        ?? 2,
+                dasharray:    options.selection?.border?.dasharray    ?? '4,2',
+                cornerRadius: options.selection?.border?.cornerRadius ?? undefined,
+            },
+            // Resize handles
+            handle: {
+                size:         options.selection?.handle?.size         ?? 8,
+                color:        options.selection?.handle?.color        ?? '#007bff',
+                strokeColor:  options.selection?.handle?.strokeColor  ?? '#ffffff',
+                strokeWidth:  options.selection?.handle?.strokeWidth  ?? 1,
+                cornerRadius: options.selection?.handle?.cornerRadius ?? 1,
+            },
+        };
+
         // Validate configuration
         this._validate();
     }
@@ -156,7 +175,8 @@ export class CanvasConfig {
             enableKeyboardShortcuts: this.enableKeyboardShortcuts,
             enableMultiTouch: this.enableMultiTouch,
             tools: JSON.parse(JSON.stringify(this.tools)),
-            theme: { ...this.theme }
+            theme: { ...this.theme },
+            selection: JSON.parse(JSON.stringify(this.selection))
         });
     }
     
@@ -178,7 +198,8 @@ export class CanvasConfig {
             enableKeyboardShortcuts: this.enableKeyboardShortcuts,
             enableMultiTouch: this.enableMultiTouch,
             tools: this.tools,
-            theme: this.theme
+            theme: this.theme,
+            selection: this.selection
         };
     }
     

package/canvas/core/omdCanvas.js

@@ -199,6 +199,13 @@ export class omdCanvas {
         if (this.config.enableFocusFrames) {
             this.focusFrameManager = new FocusFrameManager(this);
         }
+
+        // Apply any selection styles defined in config to the ResizeHandleManager
+        // (PointerTool registers the manager on canvas.resizeHandleManager during its constructor)
+        if (this.resizeHandleManager && this.config.selection) {
+            this.resizeHandleManager.setSelectionStyle(this.config.selection.border);
+            this.resizeHandleManager.setHandleStyle(this.config.selection.handle);
+        }
     }
     
     /**
@@ -547,4 +554,42 @@ export class omdCanvas {
         this.isDestroyed = true;
         this.emit('destroyed');
     }
-} 
+    /**
+     * Style the selection border shown when an OMD visual is selected.
+     * Can be called at any time; changes take effect immediately.
+     * @param {Object} style
+     * @param {string}  [style.color]        - Border stroke colour (e.g. '#007bff')
+     * @param {number}  [style.width]        - Border stroke width in px
+     * @param {string}  [style.dasharray]    - SVG stroke-dasharray (e.g. '4,2' or 'none')
+     * @param {number}  [style.cornerRadius] - Border corner radius
+     */
+    setSelectionStyle(style = {}) {
+        if (this.resizeHandleManager) {
+            this.resizeHandleManager.setSelectionStyle(style);
+        }
+        // Persist into config so clones / serialisation reflect the change
+        if (this.config.selection?.border) {
+            Object.assign(this.config.selection.border, style);
+        }
+    }
+
+    /**
+     * Style the resize handles shown when an OMD visual is selected.
+     * Can be called at any time; changes take effect immediately.
+     * @param {Object} style
+     * @param {number}  [style.size]         - Handle size in px
+     * @param {string}  [style.color]        - Handle fill colour
+     * @param {string}  [style.strokeColor]  - Handle border colour
+     * @param {number}  [style.strokeWidth]  - Handle border width in px
+     * @param {number}  [style.cornerRadius] - Handle corner radius (0 = square, size/2 = circle)
+     */
+    setHandleStyle(style = {}) {
+        if (this.resizeHandleManager) {
+            this.resizeHandleManager.setHandleStyle(style);
+        }
+        // Persist into config
+        if (this.config.selection?.handle) {
+            Object.assign(this.config.selection.handle, style);
+        }
+    }
+} 

package/canvas/features/resizeHandleManager.js

@@ -24,7 +24,7 @@ export class ResizeHandleManager {
         // Resize constraints
         this.minSize = 20;
         this.maxSize = 800;
-        this.maintainAspectRatio = false; // Can be toggled with shift key
+        this.maintainAspectRatio = true; // Always maintain aspect ratio by default
     }
     
     /**
@@ -195,25 +195,23 @@ export class ResizeHandleManager {
                 break;
         }
         
-        // Maintain aspect ratio if requested
+        // Maintain aspect ratio — use the larger delta to drive the resize
         if (this.maintainAspectRatio) {
             const aspectRatio = startWidth / startHeight;
-            
-            if (handle.type.includes('e') || handle.type.includes('w')) {
-                // Width-based resize
+            const widthChange = Math.abs(newWidth - startWidth);
+            const heightChange = Math.abs(newHeight - startHeight);
+
+            if (widthChange >= heightChange) {
                 newHeight = newWidth / aspectRatio;
-            } else if (handle.type.includes('n') || handle.type.includes('s')) {
-                // Height-based resize
-                newWidth = newHeight * aspectRatio;
+                // Correct offsetY for top-anchored corners
+                if (handle.type.includes('n')) {
+                    offsetY = startHeight - newHeight;
+                }
             } else {
-                // Corner resize - use the dimension with larger change
-                const widthChange = Math.abs(newWidth - startWidth);
-                const heightChange = Math.abs(newHeight - startHeight);
-                
-                if (widthChange > heightChange) {
-                    newHeight = newWidth / aspectRatio;
-                } else {
-                    newWidth = newHeight * aspectRatio;
+                newWidth = newHeight * aspectRatio;
+                // Correct offsetX for left-anchored corners
+                if (handle.type.includes('w')) {
+                    offsetX = startWidth - newWidth;
                 }
             }
         }
@@ -264,6 +262,68 @@ export class ResizeHandleManager {
         this.resizeData = null;
     }
     
+    /**
+     * Style the selection border.
+     * @param {Object} style
+     * @param {string}  [style.color]       - Stroke colour of the border (e.g. '#007bff')
+     * @param {number}  [style.width]       - Stroke width in px
+     * @param {string}  [style.dasharray]   - SVG stroke-dasharray value (e.g. '4,2' or 'none')
+     * @param {number}  [style.cornerRadius]- rx/ry corner radius of the border rect
+     */
+    setSelectionStyle({ color, width, dasharray, cornerRadius } = {}) {
+        if (color !== undefined)       this.selectionBorderColor = color;
+        if (width !== undefined)       this.selectionBorderWidth = width;
+        if (dasharray !== undefined)   this.selectionBorderDasharray = dasharray;
+        if (cornerRadius !== undefined) this.selectionBorderCornerRadius = cornerRadius;
+
+        // Re-apply to live border if one exists
+        if (this.selectionBorder) {
+            this.selectionBorder.setAttribute('stroke', this.selectionBorderColor);
+            this.selectionBorder.setAttribute('stroke-width', this.selectionBorderWidth);
+            this.selectionBorder.setAttribute('stroke-dasharray',
+                this.selectionBorderDasharray !== undefined ? this.selectionBorderDasharray : '4,2');
+            if (this.selectionBorderCornerRadius !== undefined) {
+                this.selectionBorder.setAttribute('rx', this.selectionBorderCornerRadius);
+                this.selectionBorder.setAttribute('ry', this.selectionBorderCornerRadius);
+            }
+        }
+    }
+
+    /**
+     * Style the resize handles.
+     * @param {Object} style
+     * @param {number}  [style.size]         - Handle square size in px
+     * @param {string}  [style.color]        - Fill colour
+     * @param {string}  [style.strokeColor]  - Border colour
+     * @param {number}  [style.strokeWidth]  - Border width
+     * @param {number}  [style.cornerRadius] - rx/ry corner radius (0 = square, size/2 = circle)
+     */
+    setHandleStyle({ size, color, strokeColor, strokeWidth, cornerRadius } = {}) {
+        if (size !== undefined)         this.handleSize = size;
+        if (color !== undefined)        this.handleColor = color;
+        if (strokeColor !== undefined)  this.handleStrokeColor = strokeColor;
+        if (strokeWidth !== undefined)  this.handleStrokeWidth = strokeWidth;
+        if (cornerRadius !== undefined) this.handleCornerRadius = cornerRadius;
+
+        // Re-apply to any live handles
+        const radius = this.handleCornerRadius !== undefined
+            ? this.handleCornerRadius
+            : 1;
+        this.handles.forEach(h => {
+            h.element.setAttribute('width',  this.handleSize);
+            h.element.setAttribute('height', this.handleSize);
+            h.element.setAttribute('fill',   this.handleColor);
+            h.element.setAttribute('stroke', this.handleStrokeColor);
+            h.element.setAttribute('stroke-width', this.handleStrokeWidth);
+            h.element.setAttribute('rx', radius);
+        });
+
+        // Reposition so centres stay correct after a size change
+        if (this.handles.length > 0) {
+            this._updateHandlePositions();
+        }
+    }
+
     /**
      * Update handle positions for currently selected element (called externally)
      */
@@ -304,7 +364,12 @@ export class ResizeHandleManager {
         this.selectionBorder.setAttribute('fill', 'none');
         this.selectionBorder.setAttribute('stroke', this.selectionBorderColor);
         this.selectionBorder.setAttribute('stroke-width', this.selectionBorderWidth);
-        this.selectionBorder.setAttribute('stroke-dasharray', '4,2');
+        this.selectionBorder.setAttribute('stroke-dasharray',
+            this.selectionBorderDasharray !== undefined ? this.selectionBorderDasharray : '4,2');
+        if (this.selectionBorderCornerRadius !== undefined) {
+            this.selectionBorder.setAttribute('rx', this.selectionBorderCornerRadius);
+            this.selectionBorder.setAttribute('ry', this.selectionBorderCornerRadius);
+        }
         this.selectionBorder.style.pointerEvents = 'none';
         this.selectionBorder.classList.add('omd-selection-border');
         
@@ -346,15 +411,12 @@ export class ResizeHandleManager {
     _createResizeHandles() {
         if (!this.selectedElement) return;
         
+        // Only corner handles — mid-edge handles would break aspect ratio
         const handleTypes = [
             { type: 'nw', pos: 'top-left' },
-            { type: 'n', pos: 'top-center' },
             { type: 'ne', pos: 'top-right' },
-            { type: 'e', pos: 'middle-right' },
             { type: 'se', pos: 'bottom-right' },
-            { type: 's', pos: 'bottom-center' },
-            { type: 'sw', pos: 'bottom-left' },
-            { type: 'w', pos: 'middle-left' }
+            { type: 'sw', pos: 'bottom-left' }
         ];
         
         handleTypes.forEach(handleDef => {
@@ -371,12 +433,13 @@ export class ResizeHandleManager {
     _createHandle(type, position) {
         const handle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
         
+        const cornerRadius = this.handleCornerRadius !== undefined ? this.handleCornerRadius : 1;
         handle.setAttribute('width', this.handleSize);
         handle.setAttribute('height', this.handleSize);
         handle.setAttribute('fill', this.handleColor);
         handle.setAttribute('stroke', this.handleStrokeColor);
         handle.setAttribute('stroke-width', this.handleStrokeWidth);
-        handle.setAttribute('rx', 1);
+        handle.setAttribute('rx', cornerRadius);
         handle.style.cursor = this.getCursorForHandle(type);
         handle.classList.add('resize-handle', `resize-handle-${type}`);
         

package/canvas/tools/PointerTool.js

@@ -972,6 +972,15 @@ export class PointerTool extends Tool {
             selectionLayer.removeChild(selectionLayer.firstChild);
         }
 
+        // If a single OMD element was directly clicked, ResizeHandleManager already draws
+        // its own selection border + handles — don't draw a second box on top of it.
+        // For drag-box selections (no active resizeHandleManager element), always draw the box.
+        if (this.selectedSegments.size === 0 &&
+            this.selectedOMDElements.size > 0 &&
+            this.resizeHandleManager?.selectedElement !== null) {
+            return;
+        }
+
         const bounds = this._getSelectionBounds();
         if (!bounds) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.17",
+  "version": "0.7.19",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -16,7 +16,7 @@
     "omd/",
     "docs/",
     "canvas/",
-    "jsvg/"  ,
+    "jsvg/",
     "npm-docs/",
     "README.md"
   ],
@@ -34,7 +34,7 @@
   "dependencies": {
     "@teachinglab/jsvg": "^0.1.1",
     "mathjs": "^14.5.2",
-    "openai": "6.6.0" 
+    "openai": "6.6.0"
   },
   "scripts": {
     "dev": "npm run build:docs && vite",

package/src/json-schemas.md

@@ -216,7 +216,12 @@ This document provides schemas and examples for the `loadFromJSON` method used i
   "backgroundCornerRadius": "number",
   "backgroundOpacity": "number",
   "showBackground": "boolean",
-  "alternatingRowColors": ["array"]
+  "alternatingRowColors": ["array - e.g. ['#EEEEEE', '#FFFFFF']; index 0 used for header row"],
+  "headerBackgroundColor": "string (used when alternatingRowColors is not set)",
+  "cellBackgroundColor": "string (used when alternatingRowColors is not set)",
+  "evenRowColor": "string (legacy)",
+  "oddRowColor": "string (legacy)",
+  "alternatingRowOpacity": "number (legacy)"
 }
 ```
 
@@ -243,7 +248,7 @@ This document provides schemas and examples for the `loadFromJSON` method used i
   "backgroundCornerRadius": 15,
   "backgroundOpacity": 1.0,
   "showBackground": true,
-  "alternatingRowColors": ["#F0F0F0", "#FFFFFF"]
+  "alternatingRowColors": ["#EEEEEE", "#FFFFFF"]
 }
 ```
 
@@ -295,23 +300,149 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 
 ## 8. `omdShapes`
 
-`omdShapes` represents geometric shapes such as circles, rectangles, and polygons.
+`omdShapes` is a module containing several individual geometric shape classes. Each is used by `omdCoordinatePlane`'s `shapeSet` array (via the `omdType` field) and can also be instantiated independently.
 
-### Schema
+---
+
+### 8a. `omdRightTriangle`
+
+#### Schema
 ```json
 {
-  "type": "string",
-  "dimensions": "object",
-  "color": "string"
+  "horizontalLeg": "number (default: 5)",
+  "verticalLeg": "number (default: 10)",
+  "angleA": "number (optional) - angle in degrees; used with hypotenuse to compute legs",
+  "hypotenuse": "number (optional)",
+  "unitScale": "number (default: 10) - pixels per unit",
+  "showLabels": "boolean (default: false)"
 }
 ```
 
-### Example
+#### Example
 ```json
 {
-  "type": "circle",
-  "dimensions": { "radius": 10 },
-  "color": "#FF0000"
+  "omdType": "rightTriangle",
+  "horizontalLeg": 3,
+  "verticalLeg": 4,
+  "unitScale": 20,
+  "showLabels": true
+}
+```
+
+---
+
+### 8b. `omdIsoscelesTriangle`
+
+#### Schema
+```json
+{
+  "base": "number (default: 5)",
+  "height": "number (default: 10)",
+  "unitScale": "number (default: 10)",
+  "showLabels": "boolean (default: false)"
+}
+```
+
+#### Example
+```json
+{
+  "omdType": "isoscelesTriangle",
+  "base": 6,
+  "height": 8,
+  "unitScale": 15
+}
+```
+
+---
+
+### 8c. `omdRectangle`
+
+#### Schema
+```json
+{
+  "width": "number (default: 10)",
+  "height": "number (default: 10)",
+  "unitScale": "number (default: 10)",
+  "showLabels": "boolean (default: false)"
+}
+```
+
+#### Example
+```json
+{
+  "omdType": "rectangle",
+  "width": 5,
+  "height": 3,
+  "unitScale": 20,
+  "showLabels": true
+}
+```
+
+---
+
+### 8d. `omdEllipse`
+
+#### Schema
+```json
+{
+  "width": "number (default: 10)",
+  "height": "number (default: 5)",
+  "unitScale": "number (default: 10)"
+}
+```
+
+#### Example
+```json
+{
+  "omdType": "ellipse",
+  "width": 8,
+  "height": 4,
+  "unitScale": 12
+}
+```
+
+---
+
+### 8e. `omdCircle`
+
+#### Schema
+```json
+{
+  "radius": "number (default: 5)",
+  "unitScale": "number (default: 10)"
+}
+```
+
+#### Example
+```json
+{
+  "omdType": "circle",
+  "radius": 4,
+  "unitScale": 15
+}
+```
+
+---
+
+### 8f. `omdRegularPolygon`
+
+#### Schema
+```json
+{
+  "radius": "number (default: 5)",
+  "numberOfSides": "number (default: 5)",
+  "unitScale": "number (default: 10)",
+  "showLabels": "boolean (default: false)"
+}
+```
+
+#### Example
+```json
+{
+  "omdType": "regularPolygon",
+  "radius": 5,
+  "numberOfSides": 6,
+  "unitScale": 18
 }
 ```
 
@@ -346,14 +477,16 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 ### Schema
 ```json
 {
-  "valueA": "number",
-  "valueB": "number",
-  "renderType": "string",
-  "size": "string"
+  "valueA": "number - filled/first portion (alias: numerator)",
+  "valueB": "number - unfilled/second portion",
+  "numerator": "number (optional alias for valueA)",
+  "denominator": "number (optional) - when provided with numerator, sets valueA=numerator and valueB=denominator-numerator",
+  "renderType": "string - 'pie' | 'dots' | 'dot' | 'tile' | 'bar' (default: 'pie')",
+  "size": "string - 'small' | 'medium' | 'large' (default: 'large')"
 }
 ```
 
-### Example
+### Example (basic)
 ```json
 {
   "valueA": 3,
@@ -363,6 +496,16 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 }
 ```
 
+### Example (fraction form)
+```json
+{
+  "numerator": 2,
+  "denominator": 5,
+  "renderType": "dots",
+  "size": "medium"
+}
+```
+
 ---
 
 ## 11. `omdProblem`
@@ -465,6 +608,7 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 ```json
 {
   "title": "string (optional)",
+  "label": "string (optional) - secondary label text",
   "min": "number (required)",
   "max": "number (required)",
   "increment": "number (optional, default: 1)",
@@ -618,10 +762,14 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 ### Schema
 ```json
 {
-  "graphEquations": ["array"],
-  "lineSegments": ["array"],
-  "dotValues": ["array"],
-  "shapeSet": ["array"],
+  "graphEquations": [
+    "array of objects: { equation, color, strokeWidth, domain: { min, max }, label, labelAtX, labelPosition: 'above'|'below'|'left'|'right' }"
+  ],
+  "lineSegments": [
+    "array of objects: { point1: [x, y], point2: [x, y], color, strokeWidth }"
+  ],
+  "dotValues": ["array of [x, y] or [x, y, color] tuples"],
+  "shapeSet": ["array of shape objects with omdType (see omdShapes)"],
   "xMin": "number",
   "xMax": "number",
   "yMin": "number",
@@ -629,7 +777,7 @@ This document provides schemas and examples for the `loadFromJSON` method used i
   "xLabel": "string",
   "yLabel": "string",
   "axisLabelOffsetPx": "number",
-  "size": "string",
+  "size": "string - 'small' | 'medium' | 'large'",
   "tickInterval": "number",
   "forceAllTickLabels": "boolean",
   "tickLabelOffsetPx": "number",
@@ -645,14 +793,22 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 ```json
 {
   "graphEquations": [
-    { "equation": "y = x^2", "color": "blue", "strokeWidth": 2, "domain": { "min": -5, "max": 5 } }
+    {
+      "equation": "y = x^2",
+      "color": "blue",
+      "strokeWidth": 2,
+      "domain": { "min": -5, "max": 5 },
+      "label": "f(x) = x²",
+      "labelAtX": 2,
+      "labelPosition": "above"
+    }
   ],
   "lineSegments": [
     { "point1": [0, 0], "point2": [1, 1], "color": "red", "strokeWidth": 2 }
   ],
   "dotValues": [[0, 0, "green"], [1, 1, "blue"]],
   "shapeSet": [
-    { "omdType": "circle", "radius": 5, "color": "yellow" }
+    { "omdType": "circle", "radius": 1, "unitScale": 15 }
   ],
   "xMin": -5,
   "xMax": 5,
@@ -682,7 +838,8 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 ### Preferred schema (string form)
 ```json
 {
-  "equation": "sin(x) + 2 = 3"
+  "equation": "sin(x) + 2 = 3",
+  "fontSize": "number (optional) - font size for the rendered equation"
 }
 ```
 
@@ -700,5 +857,48 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 { "equation": "sin(x) + 2 = 3" }
 ```
 ```json
-{ "equation": "(x^2 + 3x - 4)/(2x) = 5" }
+{ "equation": "(x^2 + 3x - 4)/(2x) = 5", "fontSize": 20 }
+```
+
+---
+
+## 21. `omdBalanceHanger`
+
+`omdBalanceHanger` is a visual balance/scale with values stacked on each arm. Variable values (strings) render as ellipse pills; numeric values render as rounded rectangles. The `tilt` property visually tips the beam left or right.
+
+### Schema
+```json
+{
+  "leftValues": ["array - strings or numbers to stack on the left arm (default: [])"],
+  "rightValues": ["array - strings or numbers to stack on the right arm (default: [])"],
+  "tilt": "string - 'none' | 'left' | 'right' (default: 'none')",
+  "fontFamily": "string (default: 'Albert Sans')",
+  "fontSize": "number (default: 18)",
+  "backgroundColor": "string (default: lightGray)",
+  "backgroundCornerRadius": "number (default: 5)",
+  "backgroundOpacity": "number (default: 1.0)",
+  "showBackground": "boolean (default: true)"
+}
+```
+
+### Example
+```json
+{
+  "leftValues": ["x", "x", "3"],
+  "rightValues": ["9"],
+  "tilt": "none",
+  "fontFamily": "Albert Sans",
+  "fontSize": 18
+}
+```
+
+### Example (tilted)
+```json
+{
+  "leftValues": [5, 3],
+  "rightValues": [4],
+  "tilt": "left",
+  "backgroundColor": "#E0F0FF",
+  "backgroundCornerRadius": 8
+}
 ```

package/src/omdCoordinatePlane.js

@@ -12,6 +12,18 @@ import {
 export class omdCoordinatePlane extends jsvgGroup {
     constructor() {
         super();
+
+        // Replace the default <g> element with an <svg> element so that
+        // overflow:hidden is respected and getBBox() returns the correct
+        // clipped dimensions (fixing the oversized selection box bug).
+        const svgNS = "http://www.w3.org/2000/svg";
+        const svgEl = document.createElementNS(svgNS, "svg");
+        if (this.svgObject && this.svgObject.parentNode) {
+            this.svgObject.parentNode.replaceChild(svgEl, this.svgObject);
+        }
+        this.svgObject = svgEl;
+        this.svgObject.setAttribute("overflow", "hidden");
+
         this.graphEquations = [];
         this.lineSegments = [];
         this.dotValues = [];