@teachinglab/omd 0.1.0

package/src/omdSpinner.js

@@ -0,0 +1,148 @@
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgEllipse, jsvgPath, jsvgLine, jsvgTextBox } from "@teachinglab/jsvg";
+
+export class omdSpinner extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdNumberLine";
+        this.size = "medium";
+
+        this.divisions = 5;
+        this.arrowPosition = 1;
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.divisions != "undefined" )
+            this.divisions = data.divisions;
+
+        if ( typeof data.arrowPosition != "undefined" )
+            this.arrowPosition = data.arrowPosition;
+
+        if ( typeof data.size != "undefined" )
+            this.size = data.size;
+    
+        this.updateLayout();
+    }
+
+    setDivisions( D )
+    {
+        this.divisions = D;
+        this.updateLayout();
+    }
+
+    setRenderType( R )
+    {
+        this.renderType = R;
+        this.updateLayout();
+    }
+
+    setSize( S )
+    {
+        this.size = S;
+        this.updateLayout();
+    }
+
+    setArrowPosition( index )
+    {
+        this.arrowPosition = index;
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // holder group
+        var G = new jsvgGroup();
+        this.addChild( G );
+       
+        var circleSize = 120;
+        var textSize = 14;
+        if ( this.size == "large" )
+        {
+            circleSize = 120;
+            textSize = 14;
+        }
+        if ( this.size == "medium" )
+        {
+            circleSize = 80;
+            textSize = 12;
+        }
+        if ( this.size == "small" )
+        {
+            circleSize = 40;
+            textSize = 10;
+        }
+
+        // make circle
+        var C = new jsvgEllipse();
+        C.setFillColor( omdColor.mediumGray );
+        C.setWidthAndHeight( circleSize, circleSize );
+        G.addChild( C );
+
+        // offset circle position
+        G.setPosition( circleSize/2, circleSize/2 );
+
+        // make division lines
+        var total = this.divisions;
+        var dA = Math.PI*2.0 / total;
+        for( var i=0; i<total; i++ )
+        {
+            var A = i * dA - Math.PI/2.0;
+            var pX = Math.cos(A) * circleSize/2;
+            var pY = Math.sin(A) * circleSize/2;
+            var L = new jsvgLine();
+            L.setStrokeColor("white");
+            L.setEndpoints( 0, 0, pX, pY );
+            G.addChild( L );
+
+            // make tick numbers
+            var A = (i+0.5) * dA - Math.PI/2.0;
+            var pX = Math.cos(A) * circleSize*0.40;
+            var pY = Math.sin(A) * circleSize*0.40;
+            var tickText = new jsvgTextBox();
+            tickText.setWidthAndHeight( 30,30 );
+            tickText.setText ( (i+1).toString() );
+            tickText.setFontFamily( "Albert Sans" );
+            tickText.setFontColor( "black" );
+            tickText.setFontSize( textSize );
+            tickText.setAlignment("center");
+            tickText.setPosition( pX-15, pY-7 );
+            G.addChild( tickText );
+        }
+
+        
+
+        // make arrow
+        var D = circleSize*0.40;
+        this.arrow = new jsvgPath();
+        this.arrow.addPoint( 0,0 );
+        this.arrow.addPoint( D*0.8,D*0.1 );
+        this.arrow.addPoint( D,0 );
+        this.arrow.addPoint( D*0.8,D*-0.1 );
+        this.arrow.addPoint( 0,0 );
+        this.arrow.updatePath();
+        this.arrow.setFillColor( "black" );
+        this.arrow.setOpacity( 0.80 );
+        G.addChild( this.arrow );
+
+        // set arrow position
+        var A = -90 + 360.0 / this.divisions * (this.arrowPosition-0.5);
+        this.arrow.setRotation( A );
+
+
+
+        // var L = new jsvgLine();
+        // var lineLength = circleSize*0.4;
+        // L.setEndpoints( 0,0, lineLength,0 );
+        // L.setStrokeColor("black");
+        // L.setStrokeWidth(2);
+        // L.setRotation( -22.5 );
+    }
+}

package/src/omdString.js

@@ -0,0 +1,39 @@
+
+import { omdColor } from "./omdColor.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+
+export class omdString extends omdMetaExpression
+{
+    constructor( V = 'string' )
+    {
+        // initialization
+        super();
+
+        this.type = "omdVariable";
+
+        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.setName( V );
+    }
+
+    setName( newName )
+    {
+        this.name = newName;
+
+        var W = 15 + this.name.length*10;
+        this.backRect.setWidthAndHeight( W, 30 );
+        this.numText.setWidthAndHeight( W, 30 );
+        this.numText.setText ( this.name );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
+}

package/src/omdTable.js

@@ -0,0 +1,369 @@
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
+
+export class omdTable extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdTable";
+
+        this.equation = "";
+        this.data = [];
+        this.headers = ['x', 'y'];
+        this.xMin = -5;
+        this.xMax = 5;
+        this.stepSize = 1;
+        this.title = "";
+        this.fontSize = 14;
+        this.headerFontSize = 16;
+        this.fontFamily = "Albert Sans";
+        this.headerFontFamily = "Albert Sans";
+        this.cellHeight = 35;
+        this.headerHeight = 40;
+        this.minCellWidth = 80;
+        this.maxCellWidth = 300;
+        this.padding = 10;
+
+        this.updateLayout();
+    }
+
+    // Estimate title width in pixels based on font size and text length
+    estimateTitleWidth()
+    {
+        if (!this.title || this.title.length === 0) return 0;
+        const titleFontSize = this.headerFontSize + 2;
+        const padding = 40; // side padding inside the title text box
+        const minWidth = 200;
+        const estimated = Math.round(this.title.length * (titleFontSize * 0.6)) + padding;
+        return Math.max(minWidth, estimated);
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.equation != "undefined" )
+            this.equation = data.equation;
+
+        if ( typeof data.data != "undefined" )
+            this.data = data.data;
+
+        if ( typeof data.headers != "undefined" )
+            this.headers = data.headers;
+
+        if ( typeof data.xMin != "undefined" )
+            this.xMin = data.xMin;
+
+        if ( typeof data.xMax != "undefined" )
+            this.xMax = data.xMax;
+
+        if ( typeof data.stepSize != "undefined" )
+            this.stepSize = data.stepSize;
+
+        if ( typeof data.title != "undefined" )
+            this.title = data.title;
+
+
+        if ( typeof data.fontSize != "undefined" )
+            this.fontSize = data.fontSize;
+
+        if ( typeof data.headerFontSize != "undefined" )
+            this.headerFontSize = data.headerFontSize;
+
+        if ( typeof data.fontFamily != "undefined" )
+            this.fontFamily = data.fontFamily;
+
+        if ( typeof data.headerFontFamily != "undefined" )
+            this.headerFontFamily = data.headerFontFamily;
+
+        if ( typeof data.cellHeight != "undefined" )
+            this.cellHeight = data.cellHeight;
+
+        if ( typeof data.headerHeight != "undefined" )
+            this.headerHeight = data.headerHeight;
+
+        if ( typeof data.minCellWidth != "undefined" )
+            this.minCellWidth = data.minCellWidth;
+
+        if ( typeof data.maxCellWidth != "undefined" )
+            this.maxCellWidth = data.maxCellWidth;
+
+        if ( typeof data.padding != "undefined" )
+            this.padding = data.padding;
+
+        this.updateLayout();
+    }
+
+    setEquation( equation )
+    {
+        this.equation = equation;
+        this.updateLayout();
+    }
+
+    setData( data, headers )
+    {
+        this.data = data;
+        if ( headers )
+            this.headers = headers;
+        this.updateLayout();
+    }
+
+    calculateOptimalCellWidth(columnIndex)
+    {
+        let maxLength = (this.headers[columnIndex] ?? '').toString().length;
+        
+        // Assume rows are arrays aligned with headers
+        for (let row of this.data) {
+            const cellValue = row[columnIndex];
+            if (cellValue !== null && cellValue !== undefined) {
+                maxLength = Math.max(maxLength, cellValue.toString().length);
+            }
+        }
+        
+        // Estimate width based on character count (approximate 8 pixels per character)
+        const estimatedWidth = Math.max(maxLength * 8 + this.padding * 2, this.minCellWidth);
+        return Math.min(estimatedWidth, this.maxCellWidth);
+    }
+
+    generateDataFromEquation()
+    {
+        if (!this.equation || this.equation.trim().length === 0) return;
+
+        // Clear existing data and set headers
+        this.data = [];
+        this.headers = ['x', 'y'];
+
+        // Basic normalization for inline math
+        let expression = this.equation;
+        if (expression.toLowerCase().startsWith('y=')) {
+            expression = expression.substring(2).trim();
+        }
+        expression = expression
+            .replace(/(\d)([a-z])/gi, '$1*$2')
+            .replace(/([a-z])(\d)/gi, '$1*$2')
+            .replace(/\^/g, '**');
+
+        const evaluateExpression = new Function('x', `return ${expression};`);
+
+        for (let x = this.xMin; x <= this.xMax; x += this.stepSize) {
+            let y = evaluateExpression(x);
+            y = Math.round(y * 100) / 100;
+            this.data.push([x, y]);
+        }
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // If an equation is provided, generate data before measuring/layout
+        if (this.equation && this.equation.length > 0) {
+            this.generateDataFromEquation();
+        }
+
+        // Calculate table dimensions
+        const numCols = this.headers.length;
+        const numRows = this.data.length;
+        let cellWidths = [];
+        let totalWidth = 0;
+        for (let col = 0; col < numCols; col++) {
+            const width = this.calculateOptimalCellWidth(col);
+            cellWidths.push(width);
+            totalWidth += width;
+        }
+        this.width = totalWidth;
+        const titleOffset = (this.title && this.title.length > 0) ? 30 : 0;
+        const bodyHeight = this.headerHeight + numRows * this.cellHeight;
+        const totalHeight = titleOffset + bodyHeight;
+        this.height = totalHeight;
+
+        // Compute a display width that ensures the title is not clipped,
+        // without changing column widths or table background.
+        const titleBoxWidth = this.estimateTitleWidth();
+        const displayWidth = Math.max(this.width, titleBoxWidth);
+
+        // Table background with corner radius (all four corners, covers full height)
+        const tableBg = new jsvgRect();
+        tableBg.setWidthAndHeight(this.width, bodyHeight);
+        tableBg.setFillColor(omdColor.lightGray);
+        tableBg.setCornerRadius(15);
+        tableBg.setStrokeWidth(0);
+        const contentOffsetX = Math.max(0, (displayWidth - this.width) / 2);
+        tableBg.setPosition(contentOffsetX, titleOffset);
+        this.addChild(tableBg);
+
+        // Draw a rounded footer rectangle under the last row to provide bottom rounded corners
+        if (numRows > 0) {
+            const footer = new jsvgRect();
+            footer.setWidthAndHeight(this.width, this.cellHeight);
+            footer.setFillColor(omdColor.lightGray);
+            footer.setCornerRadius(15);
+            footer.setStrokeWidth(0);
+            const footerY = titleOffset + this.headerHeight + (numRows - 1) * this.cellHeight;
+            footer.setPosition(contentOffsetX, footerY);
+            this.addChild(footer);
+        }
+
+        // Generate data from equation if provided; otherwise assume valid data/headers
+        if (this.equation && this.equation.length > 0) {
+            this.generateDataFromEquation();
+        }
+
+        let currentY = 0;
+        // Add title if provided
+        if (this.title && this.title.length > 0) {
+            var titleText = new jsvgTextBox();
+            // Use an expanded text box width (only for title) to avoid clipping
+            titleText.setWidthAndHeight(titleBoxWidth, 25);
+            titleText.setText(this.title);
+            titleText.setFontFamily(this.headerFontFamily);
+            titleText.setFontColor("black");
+            titleText.setFontSize(this.headerFontSize + 2);
+            titleText.setAlignment("center");
+            titleText.setVerticalCentering();
+            // Center the title within the display width (table is centered within display)
+            const titleX = Math.max(0, (displayWidth - titleBoxWidth) / 2);
+            titleText.setPosition(titleX, currentY);
+            titleText.setFontWeight(600);
+            this.addChild(titleText);
+            currentY += 30;
+        }
+
+        // Create header row (lightGray, no border, no rounded corners for cells)
+        let currentX = 0;
+        for (let col = 0; col < numCols; col++) {
+            const cellWidth = cellWidths[col];
+            var headerRect = new jsvgRect();
+            headerRect.setWidthAndHeight(cellWidth, this.headerHeight);
+            headerRect.setFillColor(omdColor.lightGray);
+            // Use rx/ry for top corners only on first and last header cells
+            if (col === 0 && numCols === 1) {
+                headerRect.setCornerRadius(15); // single column, round all corners
+            } else if (col === 0) {
+                headerRect.setCornerRadius(15); // round top-left
+            } else if (col === numCols - 1) {
+                headerRect.setCornerRadius(15); // round top-right
+            } else {
+                headerRect.setCornerRadius(0);
+            }
+            headerRect.setStrokeWidth(0);
+            headerRect.setPosition(currentX + contentOffsetX, currentY);
+            this.addChild(headerRect);
+            const headerText = this.createHeaderTextBox(
+                cellWidth,
+                this.headerHeight,
+                this.headers[col] || `Col ${col + 1}`
+            );
+            headerText.setPosition(currentX + contentOffsetX, currentY);
+            this.addChild(headerText);
+            currentX += cellWidth;
+        }
+        currentY += this.headerHeight;
+
+        // Create data rows with alternating colors
+        for (let row = 0; row < numRows; row++) {
+            const rowData = this.data[row];
+            let currentX = 0;
+            // Alternating bar: odd rows white 50% opacity, even rows transparent
+            if (row % 2 === 0) {
+                var barRect = new jsvgRect();
+                barRect.setWidthAndHeight(this.width, this.cellHeight);
+                barRect.setFillColor("rgba(255,255,255,0.5)");
+                // Round the bottom corners on the last row to respect the table background rounding
+                if (row === numRows - 1) {
+                    barRect.setCornerRadius(15);
+                } else {
+                    barRect.setCornerRadius(0);
+                }
+                barRect.setStrokeWidth(0);
+                barRect.setPosition(contentOffsetX, currentY);
+                this.addChild(barRect);
+            }
+            for (let col = 0; col < numCols; col++) {
+                const cellWidth = cellWidths[col];
+                const cellText = this.createBodyTextBox(cellWidth, this.cellHeight, "");
+                const cellValue = rowData[col];
+                cellText.setText((cellValue ?? '').toString());
+                cellText.setPosition(currentX + contentOffsetX, currentY);
+                this.addChild(cellText);
+                currentX += cellWidth;
+            }
+            currentY += this.cellHeight;
+        }
+        // Draw vertical dividing lines at each column boundary (except the far right edge)
+        if (numCols > 1) {
+            let x = 0;
+            for (let col = 0; col < numCols - 1; col++) {
+                x += cellWidths[col];
+                const vline = new jsvgRect(); 
+                vline.setWidthAndHeight(1, Math.max(0, bodyHeight - 1));
+                vline.setFillColor("black");
+                vline.setCornerRadius(0);
+                vline.setOpacity(0.5);
+                vline.setStrokeWidth(0);
+                vline.setPosition(x + contentOffsetX, titleOffset);
+                this.addChild(vline);
+            }
+        }
+        // Use displayWidth for the viewBox so the title never clips,
+        // but keep the table background at the original table width
+        this.setWidthAndHeight(displayWidth, totalHeight);
+        this.svgObject.setAttribute("viewBox", `0 0 ${displayWidth} ${totalHeight}`);
+    }
+
+    // ===== Helpers for consistent styling (match other components) =====
+    createHeaderTextBox(width, height, text) {
+        const tb = new jsvgTextBox();
+        tb.setWidthAndHeight(width, height);
+        tb.setText(text);
+        tb.setFontFamily(this.headerFontFamily);
+        tb.setFontColor("black");
+        tb.setFontSize(this.headerFontSize);
+        tb.setAlignment("center");
+        tb.setVerticalCentering();
+        tb.setFontWeight(600);
+        return tb;
+    }
+
+    createBodyTextBox(width, height, text) {
+        const tb = new jsvgTextBox();
+        tb.setWidthAndHeight(width, height);
+        tb.setText(text);
+        tb.setFontFamily(this.fontFamily);
+        tb.setFontColor("black");
+        tb.setFontSize(this.fontSize);
+        tb.setAlignment("center");
+        tb.setVerticalCentering();
+        tb.setFontWeight(400);
+        return tb;
+    }
+
+    addRow( rowData )
+    {
+        this.data.push( rowData );
+        this.updateLayout();
+    }
+
+    setHeaders( headers )
+    {
+        this.headers = headers;
+        this.updateLayout();
+    }
+
+    setFont( fontFamily, headerFontFamily )
+    {
+        this.fontFamily = fontFamily;
+        if ( headerFontFamily )
+            this.headerFontFamily = headerFontFamily;
+        else
+            this.headerFontFamily = fontFamily;
+        this.updateLayout();
+    }
+
+    clearData()
+    {
+        this.data = [];
+        this.updateLayout();
+    }
+}