@teachinglab/omd 0.7.32 → 0.7.34

package/omd/display/omdDisplay.js

@@ -24,6 +24,8 @@ export class omdDisplay {
             centerContent: true,
             topMargin: 40,
             bottomMargin: 16,
+            observeResize: true,
+            expandViewboxToFitContent: true,
             fitToContent: true,   // Fit to content size by default
             autoScale: false,     // Don't auto-scale by default
             maxScale: 1,          // Do not upscale beyond 1 by default
@@ -76,7 +78,7 @@ export class omdDisplay {
         }
 
         // Handle resize
-        if (window.ResizeObserver) {
+        if (this.options.observeResize && window.ResizeObserver) {
             this.resizeObserver = new ResizeObserver(() => {
                 this._handleResize();
             });
@@ -103,6 +105,13 @@ export class omdDisplay {
         if (this.options.debugExtents) this._drawDebugOverlays();
     }
 
+    _syncViewboxToContainer(width = this.container.offsetWidth || 0, height = this.container.offsetHeight || 0) {
+        if (!width || !height) return;
+        this.svg.setViewbox(width, height);
+        this.svg.setWidthAndHeight(width, height);
+        this._lastViewbox = `0 0 ${width} ${height}`;
+    }
+
     /**
      * Ensure the internal SVG viewBox is at least as large as the provided content dimensions.
      * This prevents clipping when content is larger than the current viewBox.
@@ -573,6 +582,11 @@ export class omdDisplay {
         // prefer expanding the SVG viewBox instead of moving nodes.
         const scaledWidthFinal = contentWidth * scale;
         const scaledHeightFinal = contentHeight * scale;
+        const availableHeight = Math.max(
+            0,
+            containerHeight - (this.options.topMargin || 0) - (this.options.bottomMargin || 0)
+        );
+        const y = (this.options.topMargin || 0) + Math.max(0, (availableHeight - scaledHeightFinal) / 2);
         const totalNeededH = scaledHeightFinal + (this.options.topMargin || 0) + (this.options.bottomMargin || 0);
 
         const willOverflowHoriz = scaledWidthFinal > containerWidth;
@@ -582,15 +596,18 @@ export class omdDisplay {
         const contentSig = `${contentWidth}x${contentHeight}x${scale}`;
         if (this._lastCenterSignature === contentSig && !willOverflowHoriz && !willOverflowVert) {
             // Only update position; skip expensive ensureViewboxFits
-            if (this.node.setPosition) this.node.setPosition(x, this.options.topMargin);
+            if (this.node.setPosition) this.node.setPosition(x, y);
             return;
         }
 
         if (willOverflowHoriz || willOverflowVert) {
             // Set scale but do NOT reposition node (preserve its absolute positions).
             if (this.node.setScale) this.node.setScale(scale);
-            // Expand viewBox to contain entire unscaled content so nothing is clipped.
-            this._ensureViewboxFits(contentWidth, contentHeight);
+            if (this.options.expandViewboxToFitContent !== false) {
+                this._ensureViewboxFits(contentWidth, contentHeight);
+            } else {
+                this._syncViewboxToContainer(containerWidth, containerHeight);
+            }
             // Reposition overlay toolbar in case viewBox/container changed
             this._repositionOverlayToolbar();
 
@@ -603,14 +620,16 @@ export class omdDisplay {
             }
             if (this.options.debugExtents) this._drawDebugOverlays();
         } else {
-            // Y is top margin; scaled content will grow downward
-            this.node.setPosition(x, this.options.topMargin);
+            this.node.setPosition(x, y);
 
             // Reposition overlay toolbar (if any)
             this._repositionOverlayToolbar();
 
-            // Ensure viewBox can contain the (unscaled) content to avoid clipping in some hosts
-            this._ensureViewboxFits(contentWidth, contentHeight);
+            if (this.options.expandViewboxToFitContent !== false) {
+                this._ensureViewboxFits(contentWidth, contentHeight);
+            } else {
+                this._syncViewboxToContainer(containerWidth, containerHeight);
+            }
 
             if (totalNeededH > containerHeight) {
                 // Let the host scroll vertically; keep horizontal overflow hidden to avoid layout shift
@@ -822,10 +841,13 @@ export class omdDisplay {
         // Ensure overlay toolbar is positioned initially
         this._repositionOverlayToolbar();
 
-    // Also ensure the viewBox is large enough to contain the node (avoid clipping)
-    const cw = (this.node && this.node.width) ? this.node.width : 0;
-    const ch = (this.node && this.node.height) ? this.node.height : 0;
-    this._ensureViewboxFits(cw, ch);
+    if (this.options.expandViewboxToFitContent !== false) {
+        const cw = (this.node && this.node.width) ? this.node.width : 0;
+        const ch = (this.node && this.node.height) ? this.node.height : 0;
+        this._ensureViewboxFits(cw, ch);
+    } else {
+        this._syncViewboxToContainer();
+    }
 
         if (this.options.debugExtents) this._drawDebugOverlays();
         else this._clearDebugOverlays();

package/package.json

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

package/src/omdCoordinatePlane.js

@@ -55,6 +55,10 @@ export class omdCoordinatePlane extends jsvgGroup {
         this.variables = [];
         this.basePaddingBottom = 30;
         this.interactivePaddingBottom = 0;
+        this.customPaddingTop = null;
+        this.customPaddingRight = null;
+        this.customPaddingBottom = null;
+        this.customPaddingLeft = null;
         this.renderedFunctionEntries = [];
         this.sliderControlRows = [];
 
@@ -87,12 +91,29 @@ export class omdCoordinatePlane extends jsvgGroup {
         this.forceAllTickLabels = (data.forceAllTickLabels !== undefined) ? data.forceAllTickLabels : this.forceAllTickLabels;
         this.showTickLabels = (data.showTickLabels !== undefined) ? data.showTickLabels : this.showTickLabels;
 
+        if (typeof data.graphPadding === "number") {
+            this.customPaddingTop = data.graphPadding;
+            this.customPaddingRight = data.graphPadding;
+            this.customPaddingBottom = data.graphPadding;
+            this.customPaddingLeft = data.graphPadding;
+        } else if (data.graphPadding && typeof data.graphPadding === "object") {
+            if (typeof data.graphPadding.top === "number") this.customPaddingTop = data.graphPadding.top;
+            if (typeof data.graphPadding.right === "number") this.customPaddingRight = data.graphPadding.right;
+            if (typeof data.graphPadding.bottom === "number") this.customPaddingBottom = data.graphPadding.bottom;
+            if (typeof data.graphPadding.left === "number") this.customPaddingLeft = data.graphPadding.left;
+        }
+
+        if (typeof data.paddingTop === "number") this.customPaddingTop = data.paddingTop;
+        if (typeof data.paddingRight === "number") this.customPaddingRight = data.paddingRight;
+        if (typeof data.paddingBottom === "number") this.customPaddingBottom = data.paddingBottom;
+        if (typeof data.paddingLeft === "number") this.customPaddingLeft = data.paddingLeft;
+
         // 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.interactive = data.interactive === true;
+        this.interactive = data.interactive === true || data.interactive === "true";
         this.variables = this.normalizeInteractiveVariables(
             data.variables || data.interactiveVariables || []
         );
@@ -167,7 +188,7 @@ export class omdCoordinatePlane extends jsvgGroup {
 
         this.sliderControlRows = [];
         if (this.shouldShowInteractiveControls()) {
-            this.createInteractiveControls(contentGroup.svgObject);
+            this.createInteractiveControls(this.svgObject);
         }
     }
 
@@ -295,14 +316,19 @@ export class omdCoordinatePlane extends jsvgGroup {
     // ===== Helper functions =====
 
     calculatePadding() {
-        this.paddingLeft = this.yLabel ? 50 : 30;
-        this.basePaddingBottom = this.xLabel ? 50 : 30;
+        const defaultPaddingLeft = this.yLabel ? 50 : 30;
+        const defaultPaddingBottom = this.xLabel ? 50 : 30;
+        const defaultPaddingTop = 25;
+        const defaultPaddingRight = 25;
+
+        this.paddingLeft = typeof this.customPaddingLeft === "number" ? this.customPaddingLeft : defaultPaddingLeft;
+        this.basePaddingBottom = typeof this.customPaddingBottom === "number" ? this.customPaddingBottom : defaultPaddingBottom;
         this.interactivePaddingBottom = this.shouldShowInteractiveControls()
             ? this.getInteractiveControlHeight()
             : 0;
         this.paddingBottom = this.basePaddingBottom + this.interactivePaddingBottom;
-        this.paddingTop = 25;
-        this.paddingRight = 25;
+        this.paddingTop = typeof this.customPaddingTop === "number" ? this.customPaddingTop : defaultPaddingTop;
+        this.paddingRight = typeof this.customPaddingRight === "number" ? this.customPaddingRight : defaultPaddingRight;
     }
 
     computeAxisPos(isXAxis, value) {