@teachinglab/omd 0.6.1 → 0.6.2

package/src/omdNumber.js

@@ -1,53 +1,53 @@
-
-import { omdColor } from "./omdColor.js";
-import { omdMetaExpression } from "./omdMetaExpression.js"
-import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
-export class omdNumber extends omdMetaExpression
-{
-    constructor( V = 1 )
-    {
-        // initialization
-        super();
-
-        this.type = "omdNumber";
-        this.value = V;
-
-        this.numText = new jsvgTextBox();
-        this.numText.setWidthAndHeight( 30,30 );
-        this.numText.setText ( this.value.toString() );
-        this.numText.setFontFamily( "Albert Sans" );
-        this.numText.setFontColor( "black" );
-        this.numText.setFontSize( 18 );
-        this.numText.setVerticalCentering();
-        this.numText.setAlignment("center");
-        // this.numText.div.style.border = "1px solid black";
-        this.addChild( this.numText );
-
-        this.setValue( V );
-    }
-
-    loadFromJSON( data )
-    {
-        if ( typeof data.value != "undefined" )
-            this.value = data.value;
-
-        this.updateLayout();
-    }
-
-    setValue( V )
-    {
-        this.value = V;
-        this.updateLayout();   
-    }
-
-    updateLayout()
-    {
-        var T = this.value.toString();
-        var W = 10 + T.length*10;
-        this.backRect.setWidthAndHeight( W, 30 );
-        this.numText.setWidthAndHeight( W, 30 );
-        this.numText.setText ( this.value.toString() );
-
-        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
-    }
+
+import { omdColor } from "./omdColor.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
+export class omdNumber extends omdMetaExpression
+{
+    constructor( V = 1 )
+    {
+        // initialization
+        super();
+
+        this.type = "omdNumber";
+        this.value = V;
+
+        this.numText = new jsvgTextBox();
+        this.numText.setWidthAndHeight( 30,30 );
+        this.numText.setText ( this.value.toString() );
+        this.numText.setFontFamily( "Albert Sans" );
+        this.numText.setFontColor( "black" );
+        this.numText.setFontSize( 18 );
+        this.numText.setVerticalCentering();
+        this.numText.setAlignment("center");
+        // this.numText.div.style.border = "1px solid black";
+        this.addChild( this.numText );
+
+        this.setValue( V );
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.value != "undefined" )
+            this.value = data.value;
+
+        this.updateLayout();
+    }
+
+    setValue( V )
+    {
+        this.value = V;
+        this.updateLayout();   
+    }
+
+    updateLayout()
+    {
+        var T = this.value.toString();
+        var W = 10 + T.length*10;
+        this.backRect.setWidthAndHeight( W, 30 );
+        this.numText.setWidthAndHeight( W, 30 );
+        this.numText.setText ( this.value.toString() );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
 }

package/src/omdNumberLine.js

@@ -1,113 +1,115 @@
-
-import { omdColor } from "./omdColor.js";
-import { jsvgGroup, jsvgRect, jsvgLine, jsvgTextBox, jsvgEllipse } from "@teachinglab/jsvg";
-
-export class omdNumberLine extends jsvgGroup
-{
-    constructor()
-    {
-        // initialization
-        super();
-
-        this.type = "omdNumberLine";
-
-        this.min = 0;
-        this.max = 10;
-        this.dotValues = []; 
-        this.label = "";  
-        this.updateLayout();
-    }
-
-    loadFromJSON( data )
-    {
-        if ( typeof data.min != "undefined" )
-            this.min = data.min;
-
-        if ( typeof data.max != "undefined" )
-            this.max = data.max;
-
-        if ( typeof data.dotValues != "undefined" )
-            this.dotValues = data.dotValues;
-
-        if ( typeof data.label != "undefined" )
-            this.label = data.label;
-
-        this.updateLayout();
-    }
-
-    setMinAndMax( min, max )
-    {
-        this.min = min;
-        this.max = max;
-    }
-
-    addNumberDot( V )
-    {
-        this.dotValues.push( V );
-    }
-
-    updateLayout()
-    {
-        this.removeAllChildren();
-
-        // Set proper dimensions and viewBox for positioning
-        this.width = 360;
-        this.height = 70;
-        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
-
-        // make line
-        this.line = new jsvgRect();
-        // this.line.setStrokeColor( "black" );
-        // this.line.setStrokeWidth( 1 );
-        // this.line.setEndpoints( 0,0, 300, 0 );
-        this.line.setWidthAndHeight(320,5);
-        this.line.setPosition( 20, 22.5 );
-        this.line.setFillColor( omdColor.mediumGray );
-        this.line.setCornerRadius( 2.5 );
-        this.addChild( this.line );
-
-        // make ticks with text
-        for( var i=this.min; i<=this.max; i++ )
-        {
-            var N = i - this.min;
-            var dX = 300 / (this.max - this.min);
-
-            var pX = 30 + N*dX;
-
-            var tick = new jsvgLine();
-            tick.setStrokeColor( "black" );
-            tick.setStrokeWidth( 1 );
-            tick.setEndpoints( pX, 20, pX, 30 );
-            this.addChild( tick );
-
-            var tickText = new jsvgTextBox();
-            tickText.setWidthAndHeight( 30,30 );
-            tickText.setText ( this.name );
-            tickText.setFontFamily( "Albert Sans" );
-            tickText.setFontColor( "black" );
-            tickText.setFontSize( 10 );
-            tickText.setAlignment("center");
-            tickText.setText( i.toString() );
-            tickText.setPosition( pX-15, 32 );
-            this.addChild( tickText );
-        }
-
-        // make dots
-        for( var i=0; i<this.dotValues.length; i++ )
-        {
-            var V = this.dotValues[i];
-
-            var N = V - this.min;
-            var dX = 300 / (this.max - this.min);
-            var pX = 30 + N*dX;
-
-            var dot = new jsvgEllipse();
-            dot.setFillColor( "black" );
-            dot.setStrokeWidth( 0 );
-            dot.setWidthAndHeight( 9,9 );
-            dot.setPosition( pX, 25 );
-            this.addChild( dot );
-        }
-    }
-
+
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgLine, jsvgTextBox, jsvgEllipse } from "@teachinglab/jsvg";
+
+export class omdNumberLine extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdNumberLine";
+
+        this.min = 0;
+        this.max = 10;
+        this.dotValues = []; 
+        this.label = "";  
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.min != "undefined" )
+            this.min = data.min;
+
+        if ( typeof data.max != "undefined" )
+            this.max = data.max;
+
+        if ( typeof data.dotValues != "undefined" )
+            this.dotValues = data.dotValues;
+
+        if ( typeof data.label != "undefined" )
+            this.label = data.label;
+
+        this.updateLayout();
+    }
+
+    setMinAndMax( min, max )
+    {
+        this.min = min;
+        this.max = max;
+        this.updateLayout();
+    }
+
+    addNumberDot( V )
+    {
+        this.dotValues.push( V );
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // Set proper dimensions and viewBox for positioning
+        this.width = 360;
+        this.height = 70;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+
+        // make line
+        this.line = new jsvgRect();
+        // this.line.setStrokeColor( "black" );
+        // this.line.setStrokeWidth( 1 );
+        // this.line.setEndpoints( 0,0, 300, 0 );
+        this.line.setWidthAndHeight(320,5);
+        this.line.setPosition( 20, 22.5 );
+        this.line.setFillColor( omdColor.mediumGray );
+        this.line.setCornerRadius( 2.5 );
+        this.addChild( this.line );
+
+        // make ticks with text
+        for( var i=this.min; i<=this.max; i++ )
+        {
+            var N = i - this.min;
+            var dX = 300 / (this.max - this.min);
+
+            var pX = 30 + N*dX;
+
+            var tick = new jsvgLine();
+            tick.setStrokeColor( "black" );
+            tick.setStrokeWidth( 1 );
+            tick.setEndpoints( pX, 20, pX, 30 );
+            this.addChild( tick );
+
+            var tickText = new jsvgTextBox();
+            tickText.setWidthAndHeight( 30,30 );
+            tickText.setText ( this.name );
+            tickText.setFontFamily( "Albert Sans" );
+            tickText.setFontColor( "black" );
+            tickText.setFontSize( 10 );
+            tickText.setAlignment("center");
+            tickText.setText( i.toString() );
+            tickText.setPosition( pX-15, 32 );
+            this.addChild( tickText );
+        }
+
+        // make dots
+        for( var i=0; i<this.dotValues.length; i++ )
+        {
+            var V = this.dotValues[i];
+
+            var N = V - this.min;
+            var dX = 300 / (this.max - this.min);
+            var pX = 30 + N*dX;
+
+            var dot = new jsvgEllipse();
+            dot.setFillColor( "black" );
+            dot.setStrokeWidth( 0 );
+            dot.setWidthAndHeight( 9,9 );
+            dot.setPosition( pX, 25 );
+            this.addChild( dot );
+        }
+    }
+
 }

package/src/omdNumberTile.js

@@ -1,119 +1,119 @@
-import {
-    omdColor
-} from "./omdColor.js";
-import { jsvgGroup, jsvgRect, jsvgEllipse } from "@teachinglab/jsvg";
-
-export class omdNumberTile extends jsvgGroup {
-    constructor() {
-        // initialization
-        super();
-
-        this.type = "omdNumberLine";
-
-        this.value = 1;
-        this.size = 'large';
-        this.dotsPerColumn = 10; // arrange dots in columns of 10 by default
-        this.backgroundColor = omdColor.lightGray;
-        this.dotColor = "black";
-        this.updateLayout();
-    }
-
-    loadFromJSON(data) {
-        if (typeof data.value != "undefined")
-            this.value = data.value;
-
-        if (typeof data.size != "undefined")
-            this.size = data.size;
-
-        if (typeof data.dotsPerColumn != "undefined")
-            this.dotsPerColumn = Math.max(1, Number(data.dotsPerColumn));
-
-        if (typeof data.backgroundColor != "undefined")
-            this.backgroundColor = data.backgroundColor;
-
-        if (typeof data.dotColor != "undefined")
-            this.dotColor = data.dotColor;
-
-        this.updateLayout();
-    }
-
-    setValue(V) {
-        this.value = V;
-        this.updateLayout();
-    }
-
-    setSize(size) {
-        this.size = size;
-        this.updateLayout();
-    }
-
-    updateLayout() {
-        this.removeAllChildren();
-
-        // Normalize inputs
-        const totalValue = Math.max(0, Number(this.value) || 0);
-        const perColumn = Math.max(1, Number(this.dotsPerColumn) || 1);
-
-        // 2) Sizing based on selected tile size
-        let dotSize;
-        if (this.size === 'large') {
-            dotSize = 15;
-        } else if (this.size === 'medium') {
-            dotSize = 12;
-        } else {
-            dotSize = 5;
-        }
-
-        const gap = Math.max(2, Math.round(dotSize * 0.6));
-        const pad = Math.max(3, Math.round(dotSize * 0.8));
-
-        // Grid geometry
-        const columns = Math.ceil(totalValue / perColumn);
-        const rowsTallest = Math.min(perColumn, totalValue);
-
-        // Expose for external alignment consumers
-        this._dotSize = dotSize;
-        this._pad = pad;
-
-        // Compute background rect 
-        const innerW = columns > 0 ? (columns * dotSize + (columns - 1) * gap) : 0;
-        const innerH = rowsTallest > 0 ? (rowsTallest * dotSize + (rowsTallest - 1) * gap) : 0;
-        const W = innerW + 2 * pad;
-        const H = innerH + 2 * pad;
-
-        const backRect = new jsvgRect();
-        backRect.setWidthAndHeight(W, H);
-        
-        // Pill for single column; rounded rectangle for multiple
-        const cornerR = (columns > 1) ? Math.round(dotSize) : Math.min(W, H) / 2;
-        backRect.setCornerRadius(cornerR);
-        backRect.setFillColor(this.backgroundColor || omdColor.lightGray);
-        this.addChild(backRect);
-
-        this.width = backRect.width;
-        this.height = backRect.height;
-        // Ensure group viewBox matches content so hosts size correctly
-        this.svgObject.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
-
-        // Render dots top-down, perColumn dots per column
-        for (let i = 0; i < totalValue; i++) {
-            const col = Math.floor(i / perColumn);
-            const row = i % perColumn;
-            const cx = pad + col * (dotSize + gap) + dotSize / 2;
-            const cy = pad + row * (dotSize + gap) + dotSize / 2;
-            const dot = new jsvgEllipse();
-            dot.setFillColor(this.dotColor || "black");
-            dot.setWidthAndHeight(dotSize, dotSize);
-            dot.setPosition(cx, cy);
-            this.addChild(dot);
-        }
-    }
-
-    // Returns y of the top-most dot center in local coordinates
-    getTopDotCenterY() {
-        const pad = this._pad ?? 0;
-        const dotSize = this._dotSize ?? 0;
-        return pad + dotSize / 2;
-    }
-
+import {
+    omdColor
+} from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgEllipse } from "@teachinglab/jsvg";
+
+export class omdNumberTile extends jsvgGroup {
+    constructor() {
+        // initialization
+        super();
+
+        this.type = "omdNumberLine";
+
+        this.value = 1;
+        this.size = 'large';
+        this.dotsPerColumn = 10; // arrange dots in columns of 10 by default
+        this.backgroundColor = omdColor.lightGray;
+        this.dotColor = "black";
+        this.updateLayout();
+    }
+
+    loadFromJSON(data) {
+        if (typeof data.value != "undefined")
+            this.value = data.value;
+
+        if (typeof data.size != "undefined")
+            this.size = data.size;
+
+        if (typeof data.dotsPerColumn != "undefined")
+            this.dotsPerColumn = Math.max(1, Number(data.dotsPerColumn));
+
+        if (typeof data.backgroundColor != "undefined")
+            this.backgroundColor = data.backgroundColor;
+
+        if (typeof data.dotColor != "undefined")
+            this.dotColor = data.dotColor;
+
+        this.updateLayout();
+    }
+
+    setValue(V) {
+        this.value = V;
+        this.updateLayout();
+    }
+
+    setSize(size) {
+        this.size = size;
+        this.updateLayout();
+    }
+
+    updateLayout() {
+        this.removeAllChildren();
+
+        // Normalize inputs
+        const totalValue = Math.max(0, Number(this.value) || 0);
+        const perColumn = Math.max(1, Number(this.dotsPerColumn) || 1);
+
+        // 2) Sizing based on selected tile size
+        let dotSize;
+        if (this.size === 'large') {
+            dotSize = 15;
+        } else if (this.size === 'medium') {
+            dotSize = 12;
+        } else {
+            dotSize = 5;
+        }
+
+        const gap = Math.max(2, Math.round(dotSize * 0.6));
+        const pad = Math.max(3, Math.round(dotSize * 0.8));
+
+        // Grid geometry
+        const columns = Math.ceil(totalValue / perColumn);
+        const rowsTallest = Math.min(perColumn, totalValue);
+
+        // Expose for external alignment consumers
+        this._dotSize = dotSize;
+        this._pad = pad;
+
+        // Compute background rect 
+        const innerW = columns > 0 ? (columns * dotSize + (columns - 1) * gap) : 0;
+        const innerH = rowsTallest > 0 ? (rowsTallest * dotSize + (rowsTallest - 1) * gap) : 0;
+        const W = innerW + 2 * pad;
+        const H = innerH + 2 * pad;
+
+        const backRect = new jsvgRect();
+        backRect.setWidthAndHeight(W, H);
+        
+        // Pill for single column; rounded rectangle for multiple
+        const cornerR = (columns > 1) ? Math.round(dotSize) : Math.min(W, H) / 2;
+        backRect.setCornerRadius(cornerR);
+        backRect.setFillColor(this.backgroundColor || omdColor.lightGray);
+        this.addChild(backRect);
+
+        this.width = backRect.width;
+        this.height = backRect.height;
+        // Ensure group viewBox matches content so hosts size correctly
+        this.svgObject.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
+
+        // Render dots top-down, perColumn dots per column
+        for (let i = 0; i < totalValue; i++) {
+            const col = Math.floor(i / perColumn);
+            const row = i % perColumn;
+            const cx = pad + col * (dotSize + gap) + dotSize / 2;
+            const cy = pad + row * (dotSize + gap) + dotSize / 2;
+            const dot = new jsvgEllipse();
+            dot.setFillColor(this.dotColor || "black");
+            dot.setWidthAndHeight(dotSize, dotSize);
+            dot.setPosition(cx, cy);
+            this.addChild(dot);
+        }
+    }
+
+    // Returns y of the top-most dot center in local coordinates
+    getTopDotCenterY() {
+        const pad = this._pad ?? 0;
+        const dotSize = this._dotSize ?? 0;
+        return pad + dotSize / 2;
+    }
+
 }