@teachinglab/omd 0.2.6 → 0.2.8

package/package.json

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

package/src/omdBalanceHanger.js

@@ -17,6 +17,12 @@ export class omdBalanceHanger extends jsvgGroup
         this.fontFamily = "Albert Sans";
         this.fontSize = 18;
 
+        // Background customization properties
+        this.backgroundColor = omdColor.lightGray;
+        this.backgroundCornerRadius = 5;
+        this.backgroundOpacity = 1.0;
+        this.showBackground = true;
+
         this.updateLayout();
     }
 
@@ -37,6 +43,16 @@ export class omdBalanceHanger extends jsvgGroup
         if ( typeof data.fontSize != "undefined" )
             this.fontSize = data.fontSize;
 
+        // Load background customization properties
+        if ( typeof data.backgroundColor != "undefined" )
+            this.backgroundColor = data.backgroundColor;
+        if ( typeof data.backgroundCornerRadius != "undefined" )
+            this.backgroundCornerRadius = data.backgroundCornerRadius;
+        if ( typeof data.backgroundOpacity != "undefined" )
+            this.backgroundOpacity = data.backgroundOpacity;
+        if ( typeof data.showBackground != "undefined" )
+            this.showBackground = data.showBackground;
+
         this.updateLayout();
     }
 
@@ -139,7 +155,21 @@ export class omdBalanceHanger extends jsvgGroup
                 box.setCornerRadius(5);
                 box.setPosition( xOffset-W/2, yOffset + i*40 );
             }
-            box.setFillColor( omdColor.lightGray );
+            
+            // Apply customizable background properties
+            if (this.showBackground) {
+                box.setFillColor(this.backgroundColor);
+                if (this.backgroundOpacity < 1.0) {
+                    box.setOpacity(this.backgroundOpacity);
+                }
+            } else {
+                box.setFillColor("transparent");
+            }
+            
+            // Only apply corner radius to rectangular boxes (jsvgRect), not ellipses
+            if (this.backgroundCornerRadius > 0 && box.setCornerRadius) {
+                box.setCornerRadius(this.backgroundCornerRadius);
+            }
             
             this.addChild( box );
 

package/src/omdColor.js

@@ -10,4 +10,5 @@ export var omdColor =
     red: '#DB2323',
     green: '#6FDE29',
     blue: '#2386DB',
+    white: '#FFFFFF',
 }

package/src/omdCoordinatePlane.js

@@ -33,6 +33,12 @@ export class omdCoordinatePlane extends jsvgGroup {
         this.tickLabelOffsetPx = 5; //offset from axes
         this.showTickLabels = true; // show numeric tick labels
 
+        // Background customization properties
+        this.backgroundColor = omdColor.lightGray;
+        this.backgroundCornerRadius = 15;
+        this.backgroundOpacity = 1.0;
+        this.showBackground = true;
+
         this.calculatePadding();
         this.updateLayout();
     }
@@ -62,6 +68,12 @@ export class omdCoordinatePlane extends jsvgGroup {
         this.forceAllTickLabels = (data.forceAllTickLabels !== undefined) ? data.forceAllTickLabels : this.forceAllTickLabels;
         this.showTickLabels = (data.showTickLabels !== undefined) ? data.showTickLabels : this.showTickLabels;
 
+        // Load background customization properties
+        this.backgroundColor = data.backgroundColor || this.backgroundColor;
+        this.backgroundCornerRadius = (data.backgroundCornerRadius !== undefined) ? data.backgroundCornerRadius : this.backgroundCornerRadius;
+        this.backgroundOpacity = (data.backgroundOpacity !== undefined) ? data.backgroundOpacity : this.backgroundOpacity;
+        this.showBackground = (data.showBackground !== undefined) ? data.showBackground : this.showBackground;
+
         this.calculatePadding();
         this.updateLayout();
     }
@@ -80,11 +92,20 @@ export class omdCoordinatePlane extends jsvgGroup {
 
         const whiteRect = new jsvgRect();
         whiteRect.setWidthAndHeight(outerWidth, outerHeight);
-        whiteRect.setFillColor(omdColor.lightGray);
+        
+        // Apply customizable background properties
+        if (this.showBackground) {
+            whiteRect.setFillColor(this.backgroundColor);
+            if (this.backgroundOpacity < 1.0) {
+                whiteRect.setOpacity(this.backgroundOpacity);
+            }
+        } else {
+            whiteRect.setFillColor("transparent");
+        }
         whiteRect.setStrokeWidth(0);
 
-        if (whiteRect.setCornerRadius) {
-            whiteRect.setCornerRadius(15);
+        if (whiteRect.setCornerRadius && this.backgroundCornerRadius > 0) {
+            whiteRect.setCornerRadius(this.backgroundCornerRadius);
         }
 
         clipMask.addChild(whiteRect);
@@ -489,4 +510,33 @@ export class omdCoordinatePlane extends jsvgGroup {
             holder.addChild(shape);
         }
     }
+
+    // Background customization methods
+    setBackgroundColor(color) {
+        this.backgroundColor = color;
+        this.updateLayout();
+    }
+
+    setBackgroundCornerRadius(radius) {
+        this.backgroundCornerRadius = radius;
+        this.updateLayout();
+    }
+
+    setBackgroundOpacity(opacity) {
+        this.backgroundOpacity = Math.max(0, Math.min(1, opacity));
+        this.updateLayout();
+    }
+
+    setShowBackground(show) {
+        this.showBackground = show;
+        this.updateLayout();
+    }
+
+    setBackgroundStyle(options = {}) {
+        if (options.backgroundColor !== undefined) this.backgroundColor = options.backgroundColor;
+        if (options.cornerRadius !== undefined) this.backgroundCornerRadius = options.cornerRadius;
+        if (options.opacity !== undefined) this.backgroundOpacity = Math.max(0, Math.min(1, options.opacity));
+        if (options.show !== undefined) this.showBackground = options.show;
+        this.updateLayout();
+    }
 }

package/src/omdMetaExpression.js

@@ -16,7 +16,7 @@ export class omdMetaExpression extends jsvgGroup
         this.backRect = new jsvgRect();
         this.backRect.setWidthAndHeight( 30,30 );
         this.backRect.setCornerRadius( 5 );
-        this.backRect.setFillColor( omdColor.lightGray );
+        this.backRect.setFillColor( this.getBackgroundColor() );
         this.addChild( this.backRect );
 
         // Old events for selection - we will replace these with provenance highlighting
@@ -63,6 +63,10 @@ export class omdMetaExpression extends jsvgGroup
         return this.fontSize || 16;
     }
 
+    getBackgroundColor() {
+        return this._backgroundStyle?.backgroundColor ?? omdColor.lightGray;
+    }
+
     // ===== PROVENANCE HIGHLIGHTING =====
 
     highlightProvenance(event, color = omdColor.hiliteColor, minStepNumber = -Infinity) {
@@ -160,7 +164,7 @@ export class omdMetaExpression extends jsvgGroup
             this.backRect.setOpacity(1.0);
         } else {
             // Reset to default state
-            this.backRect.setFillColor(omdColor.lightGray);
+            this.backRect.setFillColor(this.getBackgroundColor());
             if (!this.defaultOpaqueBack) {
                 this.backRect.setOpacity(0.01);
             }
@@ -224,7 +228,7 @@ export class omdMetaExpression extends jsvgGroup
 
         if (root === this && this.parent instanceof omdMetaExpression) return;
         
-        this.backRect.setFillColor( omdColor.lightGray );
+        this.backRect.setFillColor( this.getBackgroundColor() );
         if ( this.defaultOpaqueBack == false )
            this.backRect.setOpacity(0.01);
         
@@ -281,7 +285,7 @@ export class omdMetaExpression extends jsvgGroup
         this.backRect.setOpacity(0.01);
     }
     
-    makeBackgroundLight() { this.backRect.setFillColor( omdColor.lightGray ) }
+    makeBackgroundLight() { this.backRect.setFillColor( this.getBackgroundColor() ) }
     makeBackgroundDark() { this.backRect.setFillColor( omdColor.mediumGray ) }
 
 }

package/src/omdTable.js

@@ -1,5 +1,5 @@
 import { omdColor } from "./omdColor.js";
-import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
+import { jsvgGroup, jsvgRect, jsvgTextBox, jsvgClipMask } from "@teachinglab/jsvg";
 
 export class omdTable extends jsvgGroup
 {
@@ -27,6 +27,22 @@ export class omdTable extends jsvgGroup
         this.maxCellWidth = 300;
         this.padding = 10;
 
+        // Background customization properties
+        this.backgroundColor = omdColor.lightGray;
+        this.backgroundCornerRadius = 15;
+        this.backgroundOpacity = 1.0;
+        this.showBackground = true;
+
+        // Alternating row color properties
+        this.alternatingRowColors = null; // Should be an array of colors or null
+        this.headerBackgroundColor = omdColor.lightGray;
+        this.cellBackgroundColor = "white";
+        
+        // Legacy properties for backward compatibility
+        this.evenRowColor = "rgba(255,255,255,0.5)";
+        this.oddRowColor = "transparent";
+        this.alternatingRowOpacity = 1.0;
+
         this.updateLayout();
     }
 
@@ -92,6 +108,28 @@ export class omdTable extends jsvgGroup
         if ( typeof data.padding != "undefined" )
             this.padding = data.padding;
 
+        // Load background customization properties
+        if ( typeof data.backgroundColor != "undefined" )
+            this.backgroundColor = data.backgroundColor;
+        if ( typeof data.backgroundCornerRadius != "undefined" )
+            this.backgroundCornerRadius = data.backgroundCornerRadius;
+        if ( typeof data.backgroundOpacity != "undefined" )
+            this.backgroundOpacity = data.backgroundOpacity;
+        if ( typeof data.showBackground != "undefined" )
+            this.showBackground = data.showBackground;
+
+        // Load alternating row color properties
+        if ( typeof data.alternatingRowColors != "undefined" ) {
+            this.alternatingRowColors = data.alternatingRowColors;
+            console.log('LoadFromJSON - Setting alternatingRowColors to:', this.alternatingRowColors);
+        }
+        if ( typeof data.evenRowColor != "undefined" )
+            this.evenRowColor = data.evenRowColor;
+        if ( typeof data.oddRowColor != "undefined" )
+            this.oddRowColor = data.oddRowColor;
+        if ( typeof data.alternatingRowOpacity != "undefined" )
+            this.alternatingRowOpacity = data.alternatingRowOpacity;
+
         this.updateLayout();
     }
 
@@ -155,6 +193,10 @@ export class omdTable extends jsvgGroup
 
     updateLayout()
     {
+        console.log('updateLayout called - alternatingRowColors:', this.alternatingRowColors);
+        console.log('alternatingRowColors type:', typeof this.alternatingRowColors);
+        console.log('alternatingRowColors isArray:', Array.isArray(this.alternatingRowColors));
+        
         this.removeAllChildren();
 
         // If an equation is provided, generate data before measuring/layout
@@ -182,29 +224,49 @@ export class omdTable extends jsvgGroup
         // 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);
+
+        // Create a clipped group for rounded corners if corner radius is specified
+        let tableContentGroup;
+        if (this.backgroundCornerRadius > 0) {
+            // Create clip mask with rounded corners
+            const clipMask = new jsvgClipMask(this.width, bodyHeight, this.backgroundCornerRadius);
+            clipMask.setPosition(contentOffsetX, titleOffset);
+            this.addChild(clipMask);
+            
+            // Table content will be added to the clip mask
+            tableContentGroup = clipMask;
+            
+            // Create table background inside the clip mask (so it gets rounded corners)
+            if (this.showBackground) {
+                const tableBg = new jsvgRect();
+                tableBg.setWidthAndHeight(this.width, bodyHeight);
+                tableBg.setFillColor(this.backgroundColor);
+                if (this.backgroundOpacity < 1.0) {
+                    tableBg.setOpacity(this.backgroundOpacity);
+                }
+                tableBg.setStrokeWidth(0);
+                tableBg.setPosition(0, 0); // Relative to clip mask
+                tableContentGroup.addChild(tableBg);
+            }
+        } else {
+            // No clipping needed, create background and use the main group
+            if (this.showBackground) {
+                const tableBg = new jsvgRect();
+                tableBg.setWidthAndHeight(this.width, bodyHeight);
+                tableBg.setFillColor(this.backgroundColor);
+                if (this.backgroundOpacity < 1.0) {
+                    tableBg.setOpacity(this.backgroundOpacity);
+                }
+                tableBg.setStrokeWidth(0);
+                tableBg.setPosition(contentOffsetX, titleOffset);
+                this.addChild(tableBg);
+            }
+            tableContentGroup = this;
         }
 
+        // Remove the separate footer rectangle since the main background now covers everything
+
         // Generate data from equation if provided; otherwise assume valid data/headers
         if (this.equation && this.equation.length > 0) {
             this.generateDataFromEquation();
@@ -230,33 +292,45 @@ export class omdTable extends jsvgGroup
             currentY += 30;
         }
 
-        // Create header row (lightGray, no border, no rounded corners for cells)
+        // Create header row
         let currentX = 0;
+        const headerY = 0; // Relative to the clipped content group
+        
+        // First create a full-width header background if using alternating colors
+        if (this.alternatingRowColors && Array.isArray(this.alternatingRowColors) && this.alternatingRowColors.length > 0) {
+            console.log('Creating header background with color:', this.alternatingRowColors[0]);
+            const headerBg = new jsvgRect();
+            headerBg.setWidthAndHeight(this.width, this.headerHeight);
+            headerBg.setFillColor(this.alternatingRowColors[0]); // Headers use first color
+            headerBg.setCornerRadius(0);
+            headerBg.setStrokeWidth(0);
+            headerBg.setPosition(0, headerY);
+            tableContentGroup.addChild(headerBg);
+        } else {
+            console.log('NOT creating header background - alternatingRowColors:', this.alternatingRowColors);
+        }
+        
         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 {
+            
+            // Only create individual header background if NOT using alternating colors
+            if (!this.alternatingRowColors || !Array.isArray(this.alternatingRowColors) || this.alternatingRowColors.length === 0) {
+                var headerRect = new jsvgRect();
+                headerRect.setWidthAndHeight(cellWidth, this.headerHeight);
+                headerRect.setFillColor(this.headerBackgroundColor || omdColor.lightGray);
                 headerRect.setCornerRadius(0);
+                headerRect.setStrokeWidth(0);
+                headerRect.setPosition(currentX, headerY);
+                tableContentGroup.addChild(headerRect);
             }
-            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);
+            headerText.setPosition(currentX, headerY);
+            tableContentGroup.addChild(headerText);
             currentX += cellWidth;
         }
         currentY += this.headerHeight;
@@ -265,28 +339,37 @@ export class omdTable extends jsvgGroup
         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) {
+            const rowY = this.headerHeight + row * this.cellHeight; // Relative to clipped content group
+            
+            // Create row background with alternating colors if enabled
+            if (this.alternatingRowColors && Array.isArray(this.alternatingRowColors) && this.alternatingRowColors.length > 0) {
+                const colorIndex = (row + 1) % this.alternatingRowColors.length; // +1 to account for header
+                const rowColor = this.alternatingRowColors[colorIndex];
+                
+                console.log(`Creating row ${row} background with color:`, rowColor, 'at position:', 0, rowY);
+                
                 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.setFillColor(rowColor);
+                if (this.backgroundOpacity < 1.0) {
+                    barRect.setOpacity(this.backgroundOpacity);
                 }
+                // No corner radius on individual row backgrounds - clip mask handles the rounding
+                barRect.setCornerRadius(0);
                 barRect.setStrokeWidth(0);
-                barRect.setPosition(contentOffsetX, currentY);
-                this.addChild(barRect);
+                barRect.setPosition(0, rowY);
+                tableContentGroup.addChild(barRect);
+            } else {
+                console.log(`Row ${row}: No alternating colors - alternatingRowColors:`, this.alternatingRowColors);
             }
+            
             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);
+                cellText.setPosition(currentX, rowY);
+                tableContentGroup.addChild(cellText);
                 currentX += cellWidth;
             }
             currentY += this.cellHeight;
@@ -302,8 +385,8 @@ export class omdTable extends jsvgGroup
                 vline.setCornerRadius(0);
                 vline.setOpacity(0.5);
                 vline.setStrokeWidth(0);
-                vline.setPosition(x + contentOffsetX, titleOffset);
-                this.addChild(vline);
+                vline.setPosition(x, 0); // Relative to the clipped content group
+                tableContentGroup.addChild(vline);
             }
         }
         // Use displayWidth for the viewBox so the title never clips,
@@ -366,4 +449,51 @@ export class omdTable extends jsvgGroup
         this.data = [];
         this.updateLayout();
     }
+
+    // Background customization methods
+    setBackgroundColor(color) {
+        this.backgroundColor = color;
+        this.updateLayout();
+    }
+
+    setBackgroundCornerRadius(radius) {
+        this.backgroundCornerRadius = radius;
+        this.updateLayout();
+    }
+
+    setBackgroundOpacity(opacity) {
+        this.backgroundOpacity = Math.max(0, Math.min(1, opacity));
+        this.updateLayout();
+    }
+
+    setShowBackground(show) {
+        this.showBackground = show;
+        this.updateLayout();
+    }
+
+    setBackgroundStyle(options = {}) {
+        if (options.backgroundColor !== undefined) this.backgroundColor = options.backgroundColor;
+        if (options.cornerRadius !== undefined) this.backgroundCornerRadius = options.cornerRadius;
+        if (options.opacity !== undefined) this.backgroundOpacity = Math.max(0, Math.min(1, options.opacity));
+        if (options.show !== undefined) this.showBackground = options.show;
+        this.updateLayout();
+    }
+
+    // Alternating row colors methods
+    setAlternatingRowColors(colors) {
+        console.log('setAlternatingRowColors called with:', colors);
+        this.alternatingRowColors = colors;
+        console.log('alternatingRowColors set to:', this.alternatingRowColors);
+        this.updateLayout();
+    }
+
+    setHeaderBackgroundColor(color) {
+        this.headerBackgroundColor = color;
+        this.updateLayout();
+    }
+
+    setCellBackgroundColor(color) {
+        this.cellBackgroundColor = color;
+        this.updateLayout();
+    }
 }