@teachinglab/omd 0.6.1 → 0.6.2

package/src/omdTapeDiagram.js

@@ -1,245 +1,245 @@
-import { omdColor } from "./omdColor.js";
-import { jsvgGroup, jsvgRect, jsvgTextBox, jsvgLine} from "@teachinglab/jsvg";
-
-export class omdTapeLabel extends jsvgGroup
-{
-    constructor()
-    {
-        // initialization
-        super();
-
-        this.startValue = 1;
-        this.endValue = 3;
-        this.startIndex = 0;
-        this.endIndex = 1;
-        this.label = "label";
-        this.showBelow = false;
-        this.unitWidth = 30;
-        this.indexPositions = [];
-
-        this.startPos = 0;
-        this.endPos = 0;
-
-        this.updateLayout();
-    }
-    
-    setIndexPositions( xPosArray )
-    {
-        this.indexPositions = xPosArray
-    }
-
-    loadFromJSON( data )
-    {
-        if (!data || typeof data !== "object") { return; }
-
-        const { startIndex, endIndex, label, showBelow } = data;
-
-        if (startIndex !== undefined) {
-            this.startIndex = startIndex;
-            if (startIndex >= 0 && startIndex <= this.indexPositions.length) {
-                this.startPos = this.indexPositions[startIndex];
-            }
-        }
-
-        if (endIndex !== undefined) {
-            this.endIndex = endIndex;
-            if (endIndex >= 0 && endIndex <= this.indexPositions.length) {
-                this.endPos = this.indexPositions[endIndex];
-            }
-        }
-
-        // startValue/endValue no longer supported; use startIndex/endIndex only
-
-        if (label !== undefined) { this.label = label; }
-        if (showBelow !== undefined) { this.showBelow = showBelow; }
-
-        this.updateLayout();
-    }
-
-    updateLayout()
-    {
-        this.removeAllChildren();
-
-        // make line
-        var startX = this.startPos;
-        var endX = this.endPos;
-        var W = endX - startX;
-        this.line = new jsvgLine();
-        this.line.setEndpoints( startX, 0, endX, 0 );
-        this.addChild( this.line );
-
-        // make ticks
-        var tick = new jsvgLine();
-        tick.setEndpoints( startX, -3, startX, 3 );
-        this.addChild( tick );
-
-        tick = new jsvgLine();
-        tick.setEndpoints( endX, -3, endX, 3 );
-        this.addChild( tick );
-
-         // make label text
-        var labelText = new jsvgTextBox();
-        labelText.setWidthAndHeight( W,30 );
-        labelText.setText ( this.name );
-        labelText.setFontFamily( "Albert Sans" );
-        labelText.setFontColor( "black" );
-        labelText.setFontSize( 14 );
-        labelText.setAlignment("center");
-        labelText.setText( this.label );
-        if ( this.showBelow )
-            labelText.setPosition( startX, 5 );
-        else
-            labelText.setPosition( startX, -20 );
-        this.addChild( labelText );
-
-        // Calculate dimensions for this label
-        var labelWidth = Math.max(W, endX);
-        var labelHeight = this.showBelow ? 35 : 30; // Account for text position
-        
-        // Set proper bounds and viewBox for the label
-        this.setWidthAndHeight( labelWidth, labelHeight );
-        this.svgObject.setAttribute("viewBox", `0 ${this.showBelow ? -5 : -25} ${labelWidth} ${labelHeight}`);
-    }
-}
-
-export class omdTapeDiagram extends jsvgGroup
-{
-    constructor()
-    {
-        // initialization
-        super();
-
-        this.type = "omdTapeDiagram";
-
-        this.values = []; 
-        this.showValues = true;
-        this.colors = [];
-        this.labelSet = [];
-        this.unitWidth = 30;
-        this.updateLayout();
-    }
-
-    loadFromJSON( data )
-    {
-        if ( typeof data.values != "undefined" )
-            this.values = data.values;
-
-        if ( typeof data.showValues != "undefined" )
-            this.showValues = data.showValues;
-
-        if ( typeof data.colors != "undefined" )
-            this.colors = data.colors;
-
-        if ( typeof data.labelSet != "undefined" )
-            this.labelSet = data.labelSet;
-
-        if ( typeof data.unitWidth != "undefined" )
-            this.unitWidth = data.unitWidth;
-
-        this.updateLayout();
-    }
-
-    setValues( newValues )
-    {
-        this.values = newValues;
-    }
-
-    updateLayout()
-    {
-        this.removeAllChildren();
-
-        // console.log( this.values );
-
-        // make box with text
-        var pX = 0;
-        var indexPositions = [];
-        for( var i=0; i<this.values.length; i++ )
-        {
-            indexPositions.push(pX);
-
-            var value = this.values[i];
-            var W = 30;
-            if ( typeof value == "string" )
-            {
-                W = 20 + value.length*10;
-            }
-            else
-            {
-                W = value * this.unitWidth;
-            }
-            
-
-            // make box
-            var box = new jsvgRect();
-            box.setWidthAndHeight( W, 30 );
-            box.setCornerRadius(5);
-            box.setStrokeColor( "white" );
-            box.setStrokeWidth( 1 );
-            
-            // Use custom color if available, otherwise default to light gray
-            var boxColor = omdColor.lightGray;
-            if ( this.colors && this.colors.length > i && this.colors[i] )
-            {
-                boxColor = this.colors[i];
-            }
-            box.setFillColor( boxColor );
-            
-            box.setPosition( pX, 0 );
-            this.addChild( box );
-
-            // make box text
-            var boxText = new jsvgTextBox();
-            boxText.setWidthAndHeight( W,30 );
-            boxText.setText ( this.name );
-            boxText.setFontFamily( "Albert Sans" );
-            boxText.setFontColor( "black" );
-            boxText.setFontSize( 18 );
-            boxText.setAlignment("center");
-            boxText.setVerticalCentering();
-            boxText.setText( value.toString() );
-            boxText.setPosition( pX, 0 );
-            this.addChild( boxText );
-
-            pX += W;
-        }
-
-        indexPositions.push(pX);
-
-        // Calculate actual content dimensions
-        var contentWidth = pX; // Total width of all boxes
-        var contentHeight = 30; // Height of the tape
-        var labelHeight = 0;
-
-        // Check if labels extend the height
-        for ( var labelData of this.labelSet )
-        {
-            if ( labelData.showBelow )
-                labelHeight = Math.max(labelHeight, 70); // 40 offset + 30 text height
-            else
-                labelHeight = Math.max(labelHeight, 30); // 20 offset above + 10 buffer
-        }
-        
-        if ( labelHeight > 0 )
-            contentHeight += labelHeight;
-
-        // make label text
-        for ( var labelData of this.labelSet )
-        {
-            var T = new omdTapeLabel();
-            T.unitWidth = this.unitWidth;
-            T.setIndexPositions( indexPositions );
-            T.loadFromJSON( labelData );
-            if ( T.showBelow )
-                T.setPosition( 0, 40 );
-            else
-                T.setPosition( 0, -10 );
-            this.addChild( T )
-        }
-
-        // Set proper bounds to hug the content
-        this.setWidthAndHeight( contentWidth, contentHeight );
-        // Fix the viewBox to match our actual content dimensions (no padding)
-        this.svgObject.setAttribute("viewBox", `0 0 ${contentWidth} ${contentHeight}`);
-    }
-
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgTextBox, jsvgLine} from "@teachinglab/jsvg";
+
+export class omdTapeLabel extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.startValue = 1;
+        this.endValue = 3;
+        this.startIndex = 0;
+        this.endIndex = 1;
+        this.label = "label";
+        this.showBelow = false;
+        this.unitWidth = 30;
+        this.indexPositions = [];
+
+        this.startPos = 0;
+        this.endPos = 0;
+
+        this.updateLayout();
+    }
+    
+    setIndexPositions( xPosArray )
+    {
+        this.indexPositions = xPosArray
+    }
+
+    loadFromJSON( data )
+    {
+        if (!data || typeof data !== "object") { return; }
+
+        const { startIndex, endIndex, label, showBelow } = data;
+
+        if (startIndex !== undefined) {
+            this.startIndex = startIndex;
+            if (startIndex >= 0 && startIndex <= this.indexPositions.length) {
+                this.startPos = this.indexPositions[startIndex];
+            }
+        }
+
+        if (endIndex !== undefined) {
+            this.endIndex = endIndex;
+            if (endIndex >= 0 && endIndex <= this.indexPositions.length) {
+                this.endPos = this.indexPositions[endIndex];
+            }
+        }
+
+        // startValue/endValue no longer supported; use startIndex/endIndex only
+
+        if (label !== undefined) { this.label = label; }
+        if (showBelow !== undefined) { this.showBelow = showBelow; }
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // make line
+        var startX = this.startPos;
+        var endX = this.endPos;
+        var W = endX - startX;
+        this.line = new jsvgLine();
+        this.line.setEndpoints( startX, 0, endX, 0 );
+        this.addChild( this.line );
+
+        // make ticks
+        var tick = new jsvgLine();
+        tick.setEndpoints( startX, -3, startX, 3 );
+        this.addChild( tick );
+
+        tick = new jsvgLine();
+        tick.setEndpoints( endX, -3, endX, 3 );
+        this.addChild( tick );
+
+         // make label text
+        var labelText = new jsvgTextBox();
+        labelText.setWidthAndHeight( W,30 );
+        labelText.setText ( this.name );
+        labelText.setFontFamily( "Albert Sans" );
+        labelText.setFontColor( "black" );
+        labelText.setFontSize( 14 );
+        labelText.setAlignment("center");
+        labelText.setText( this.label );
+        if ( this.showBelow )
+            labelText.setPosition( startX, 5 );
+        else
+            labelText.setPosition( startX, -20 );
+        this.addChild( labelText );
+
+        // Calculate dimensions for this label
+        var labelWidth = Math.max(W, endX);
+        var labelHeight = this.showBelow ? 35 : 30; // Account for text position
+        
+        // Set proper bounds and viewBox for the label
+        this.setWidthAndHeight( labelWidth, labelHeight );
+        this.svgObject.setAttribute("viewBox", `0 ${this.showBelow ? -5 : -25} ${labelWidth} ${labelHeight}`);
+    }
+}
+
+export class omdTapeDiagram extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdTapeDiagram";
+
+        this.values = []; 
+        this.showValues = true;
+        this.colors = [];
+        this.labelSet = [];
+        this.unitWidth = 30;
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.values != "undefined" )
+            this.values = data.values;
+
+        if ( typeof data.showValues != "undefined" )
+            this.showValues = data.showValues;
+
+        if ( typeof data.colors != "undefined" )
+            this.colors = data.colors;
+
+        if ( typeof data.labelSet != "undefined" )
+            this.labelSet = data.labelSet;
+
+        if ( typeof data.unitWidth != "undefined" )
+            this.unitWidth = data.unitWidth;
+
+        this.updateLayout();
+    }
+
+    setValues( newValues )
+    {
+        this.values = newValues;
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // console.log( this.values );
+
+        // make box with text
+        var pX = 0;
+        var indexPositions = [];
+        for( var i=0; i<this.values.length; i++ )
+        {
+            indexPositions.push(pX);
+
+            var value = this.values[i];
+            var W = 30;
+            if ( typeof value == "string" )
+            {
+                W = 20 + value.length*10;
+            }
+            else
+            {
+                W = value * this.unitWidth;
+            }
+            
+
+            // make box
+            var box = new jsvgRect();
+            box.setWidthAndHeight( W, 30 );
+            box.setCornerRadius(5);
+            box.setStrokeColor( "white" );
+            box.setStrokeWidth( 1 );
+            
+            // Use custom color if available, otherwise default to light gray
+            var boxColor = omdColor.lightGray;
+            if ( this.colors && this.colors.length > i && this.colors[i] )
+            {
+                boxColor = this.colors[i];
+            }
+            box.setFillColor( boxColor );
+            
+            box.setPosition( pX, 0 );
+            this.addChild( box );
+
+            // make box text
+            var boxText = new jsvgTextBox();
+            boxText.setWidthAndHeight( W,30 );
+            boxText.setText ( this.name );
+            boxText.setFontFamily( "Albert Sans" );
+            boxText.setFontColor( "black" );
+            boxText.setFontSize( 18 );
+            boxText.setAlignment("center");
+            boxText.setVerticalCentering();
+            boxText.setText( value.toString() );
+            boxText.setPosition( pX, 0 );
+            this.addChild( boxText );
+
+            pX += W;
+        }
+
+        indexPositions.push(pX);
+
+        // Calculate actual content dimensions
+        var contentWidth = pX; // Total width of all boxes
+        var contentHeight = 30; // Height of the tape
+        var labelHeight = 0;
+
+        // Check if labels extend the height
+        for ( var labelData of this.labelSet )
+        {
+            if ( labelData.showBelow )
+                labelHeight = Math.max(labelHeight, 70); // 40 offset + 30 text height
+            else
+                labelHeight = Math.max(labelHeight, 30); // 20 offset above + 10 buffer
+        }
+        
+        if ( labelHeight > 0 )
+            contentHeight += labelHeight;
+
+        // make label text
+        for ( var labelData of this.labelSet )
+        {
+            var T = new omdTapeLabel();
+            T.unitWidth = this.unitWidth;
+            T.setIndexPositions( indexPositions );
+            T.loadFromJSON( labelData );
+            if ( T.showBelow )
+                T.setPosition( 0, 40 );
+            else
+                T.setPosition( 0, -10 );
+            this.addChild( T )
+        }
+
+        // Set proper bounds to hug the content
+        this.setWidthAndHeight( contentWidth, contentHeight );
+        // Fix the viewBox to match our actual content dimensions (no padding)
+        this.svgObject.setAttribute("viewBox", `0 0 ${contentWidth} ${contentHeight}`);
+    }
+
 }

package/src/omdTerm.js

@@ -1,92 +1,92 @@
-
-import { omdColor } from "./omdColor.js";
-import { omdMetaExpression } from "./omdMetaExpression.js"
-import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
-export class omdTerm extends omdMetaExpression
-{
-    constructor( coefficient=1, variable='', exponent=1 )
-    {
-        // initialization
-        super();
-
-        this.type = "omdTerm";
-        this.coefficient = coefficient;
-        this.variable = variable;
-        this.exponent = exponent;
-
-        this.numText = new jsvgTextBox();
-        this.numText.setWidthAndHeight( 30,30 );
-        this.numText.setText ( this.name );
-        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( coefficient, variable, exponent );
-        this.updateLayout();
-    }
-
-    loadFromJSON( data )
-    {
-        if ( typeof data.coefficient != "undefined" )
-            this.coefficient = data.coefficient;
-
-        if ( typeof data.variable != "undefined" )
-            this.variable = data.variable;
-    
-        if ( typeof data.exponent != "undefined" )
-            this.exponent = data.exponent;
-
-        this.updateLayout();
-    }
-
-    setValue( coefficient, variable='', exponent=1 )
-    {
-        this.coefficient = coefficient;
-        this.variable = variable;
-        this.exponent = exponent;
-
-        this.updateLayout();
-    }
-
-    updateLayout()
-    {
-        var T = "";
-        if ( this.variable && this.variable.length != 0 )
-        {
-            T = this.coefficient.toString() + this.variable;
-            if ( this.coefficient == 1)
-            {
-                T = this.variable;
-            }
-        }
-        else
-        {
-            T = this.coefficient.toString();
-        }
-
-        if ( this.exponent )
-        {
-            if ( this.exponent == 1 )
-            {
-                // don't show it
-            }
-            else if ( this.exponent == 2 )
-                T += "²";
-            else if ( this.exponent == 3 )
-                T += "³";
-            else
-                T += "<sup>" + this.exponent.toString() + "</sup>";
-        }
-
-        var W = 15 + T.length*10;
-        this.backRect.setWidthAndHeight( W, 30 );
-        this.numText.setWidthAndHeight( W, 30 );
-        this.numText.setText ( T );
-
-        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 omdTerm extends omdMetaExpression
+{
+    constructor( coefficient=1, variable='', exponent=1 )
+    {
+        // initialization
+        super();
+
+        this.type = "omdTerm";
+        this.coefficient = coefficient;
+        this.variable = variable;
+        this.exponent = exponent;
+
+        this.numText = new jsvgTextBox();
+        this.numText.setWidthAndHeight( 30,30 );
+        this.numText.setText ( this.name );
+        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( coefficient, variable, exponent );
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.coefficient != "undefined" )
+            this.coefficient = data.coefficient;
+
+        if ( typeof data.variable != "undefined" )
+            this.variable = data.variable;
+    
+        if ( typeof data.exponent != "undefined" )
+            this.exponent = data.exponent;
+
+        this.updateLayout();
+    }
+
+    setValue( coefficient, variable='', exponent=1 )
+    {
+        this.coefficient = coefficient;
+        this.variable = variable;
+        this.exponent = exponent;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        var T = "";
+        if ( this.variable && this.variable.length != 0 )
+        {
+            T = this.coefficient.toString() + this.variable;
+            if ( this.coefficient == 1)
+            {
+                T = this.variable;
+            }
+        }
+        else
+        {
+            T = this.coefficient.toString();
+        }
+
+        if ( this.exponent )
+        {
+            if ( this.exponent == 1 )
+            {
+                // don't show it
+            }
+            else if ( this.exponent == 2 )
+                T += "²";
+            else if ( this.exponent == 3 )
+                T += "³";
+            else
+                T += "<sup>" + this.exponent.toString() + "</sup>";
+        }
+
+        var W = 15 + T.length*10;
+        this.backRect.setWidthAndHeight( W, 30 );
+        this.numText.setWidthAndHeight( W, 30 );
+        this.numText.setText ( T );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
 }