@teachinglab/omd 0.2.1 → 0.2.4

package/omd/core/omdEquationStack.js

@@ -67,6 +67,7 @@ export class omdEquationStack extends jsvgGroup {
         this.layoutGroup = new jsvgLayoutGroup();
         this.layoutGroup.setSpacer(16); // Adjust as needed for spacing
         this.layoutGroup.addChild(this.sequence);
+        this._overlayChildren = [];
         
         // Handle toolbar positioning
         const position = this.toolbarOptions?.position || this.options.toolbarPosition; // backward compat
@@ -201,6 +202,204 @@ export class omdEquationStack extends jsvgGroup {
             toolbarGroup.svgObject.style.display = 'block';
             toolbarGroup.svgObject.style.zIndex = '1000';
         }
+
+        // Update any overlay children so they remain locked to container anchors
+        try {
+            this.updateOverlayChildren(containerWidth, containerHeight, padding);
+        } catch (_) {}
+    }
+    /**
+     * General helper to position an overlay child relative to a chosen anchor.
+     * Does not assume only the toolbar; supports various anchors and options.
+     * @param {object} child - A jsvg node (or any object with setPosition/setScale)
+     * @param {number} containerWidth - Width of the container (px)
+     * @param {number} containerHeight - Height of the container (px)
+     * @param {object} [opts] - Options
+     * @param {string} [opts.anchor='toolbar-center'] - One of: 'toolbar-center','toolbar-left','toolbar-right','top-left','top-center','top-right','custom'
+     * @param {number} [opts.offsetX=0] - Horizontal offset in screen pixels (positive -> right)
+     * @param {number} [opts.offsetY=0] - Vertical offset in screen pixels (positive -> down)
+     * @param {number} [opts.padding=16] - Padding from edges when computing anchor
+     * @param {boolean} [opts.counterScale=true] - Whether to counter-scale the child to keep constant on-screen size
+     * @param {boolean} [opts.addToStack=true] - Whether to add the child to this stack's children (default true)
+     * @param {{x:number,y:number}|null} [opts.customCoords=null] - If anchor==='custom', use these screen coords
+     * @returns {object|null} The child or null if not applicable
+     */
+    addOverlayChild(child, containerWidth, containerHeight, opts = {}) {
+        const {
+            anchor = 'toolbar-center',
+            offsetX = 0,
+            offsetY = 0,
+            padding = 16,
+            counterScale = true,
+            addToStack = true,
+            customCoords = null
+        } = opts || {};
+
+        // Basic validation
+        if (!child || typeof containerWidth !== 'number' || typeof containerHeight !== 'number') return null;
+
+        const stackX = this.xpos || 0;
+        const stackY = this.ypos || 0;
+        const s = (typeof this.scale === 'number' && this.scale > 0) ? this.scale : 1;
+
+        // Determine base container (screen) coordinates for the anchor
+        let containerX = 0;
+        let containerY = 0;
+
+        if (anchor === 'custom' && customCoords && typeof customCoords.x === 'number' && typeof customCoords.y === 'number') {
+            containerX = Math.round(customCoords.x);
+            containerY = Math.round(customCoords.y);
+        } else if (anchor.startsWith('toolbar')) {
+            if (!this.toolbar) return null;
+            const tbW = this.toolbar.elements?.background?.width || 0;
+            const tbH = this.toolbar.elements?.background?.height || 0;
+            const left = (containerWidth - tbW) / 2;
+            const right = left + tbW;
+            const center = left + (tbW / 2);
+            containerY = Math.round(containerHeight - tbH - (typeof padding === 'number' ? padding : this.overlayPadding));
+            if (anchor === 'toolbar-center') containerX = Math.round(center);
+            else if (anchor === 'toolbar-left') containerX = Math.round(left);
+            else if (anchor === 'toolbar-right') containerX = Math.round(right);
+            else containerX = Math.round(center);
+        } else if (anchor.startsWith('top')) {
+            const topY = Math.round(typeof padding === 'number' ? padding : 16);
+            const leftX = Math.round(typeof padding === 'number' ? padding : 16);
+            const rightX = Math.round(containerWidth - (typeof padding === 'number' ? padding : 16));
+            containerY = topY;
+            if (anchor === 'top-left') containerX = leftX;
+            else if (anchor === 'top-center') containerX = Math.round(containerWidth / 2);
+            else if (anchor === 'top-right') containerX = rightX;
+            else containerX = leftX;
+        } else {
+            // fallback: center
+            containerX = Math.round(containerWidth / 2);
+            containerY = Math.round(containerHeight / 2);
+        }
+
+        // Apply offsets (in screen pixels)
+        containerX = Math.round(containerX + (offsetX || 0));
+        containerY = Math.round(containerY + (offsetY || 0));
+
+        // Convert to stack-local coordinates
+        const x = (containerX - stackX) / s;
+        const y = (containerY - stackY) / s;
+
+        // Optionally counter-scale child to keep constant on-screen size
+        if (counterScale && child && typeof child.setScale === 'function') {
+            try { child.setScale(1 / s); } catch (_) {}
+        }
+
+        // Position child in stack-local coords
+        if (child && typeof child.setPosition === 'function') {
+            try { child.setPosition(x, y); } catch (_) {}
+        }
+
+        // Optionally add to this stack
+        if (addToStack) {
+            try { this.addChild(child); } catch (_) {
+                try { this.layoutGroup.addChild(child); } catch (_) {}
+            }
+        }
+
+        // Remember the overlay child and its options so we can reposition it when
+        // the stack's scale/position changes (e.g., during zoom/center operations).
+        try {
+            // Store a shallow copy of opts to avoid external mutation surprises
+            const stored = { anchor, offsetX, offsetY, padding, counterScale, addToStack, customCoords };
+            this._overlayChildren.push({ child, opts: stored });
+        } catch (_) {}
+
+        // Make sure it's visible and above toolbar
+        if (child && child.svgObject) {
+            try { child.svgObject.style.zIndex = '1001'; } catch (_) {}
+            try { child.svgObject.style.display = 'block'; } catch (_) {}
+        }
+
+        return child;
+    }
+
+    /**
+     * Recompute and apply positions for tracked overlay children.
+     * Called automatically during `positionToolbarOverlay` and can be called
+     * manually if you change container size/stack position outside normal flows.
+     */
+    updateOverlayChildren(containerWidth, containerHeight, padding = 16) {
+        if (!Array.isArray(this._overlayChildren) || this._overlayChildren.length === 0) return;
+
+        const stackX = this.xpos || 0;
+        const stackY = this.ypos || 0;
+        const s = (typeof this.scale === 'number' && this.scale > 0) ? this.scale : 1;
+
+        for (const entry of this._overlayChildren) {
+            if (!entry || !entry.child) continue;
+            const child = entry.child;
+            const o = entry.opts || {};
+            const anchor = o.anchor || 'toolbar-center';
+            const offsetX = o.offsetX || 0;
+            const offsetY = o.offsetY || 0;
+            const pad = (typeof o.padding === 'number') ? o.padding : padding;
+            const counterScale = (typeof o.counterScale === 'boolean') ? o.counterScale : true;
+            const customCoords = o.customCoords || null;
+
+            // Compute container anchor coords (duplicated logic from addOverlayChild)
+            let containerX = 0;
+            let containerY = 0;
+            if (anchor === 'custom' && customCoords && typeof customCoords.x === 'number' && typeof customCoords.y === 'number') {
+                containerX = Math.round(customCoords.x + offsetX);
+                containerY = Math.round(customCoords.y + offsetY);
+            } else if (anchor.startsWith('toolbar')) {
+                if (!this.toolbar) continue;
+                const tbW = this.toolbar.elements?.background?.width || 0;
+                const tbH = this.toolbar.elements?.background?.height || 0;
+                const left = (containerWidth - tbW) / 2;
+                const right = left + tbW;
+                const center = left + (tbW / 2);
+                containerY = Math.round(containerHeight - tbH - pad + offsetY);
+                if (anchor === 'toolbar-center') containerX = Math.round(center + offsetX);
+                else if (anchor === 'toolbar-left') containerX = Math.round(left + offsetX);
+                else if (anchor === 'toolbar-right') containerX = Math.round(right + offsetX);
+                else containerX = Math.round(center + offsetX);
+            } else if (anchor.startsWith('top')) {
+                const topY = Math.round(pad);
+                const leftX = Math.round(pad);
+                const rightX = Math.round(containerWidth - pad);
+                containerY = topY + offsetY;
+                if (anchor === 'top-left') containerX = leftX + offsetX;
+                else if (anchor === 'top-center') containerX = Math.round(containerWidth / 2) + offsetX;
+                else if (anchor === 'top-right') containerX = rightX + offsetX;
+                else containerX = leftX + offsetX;
+            } else {
+                containerX = Math.round(containerWidth / 2 + offsetX);
+                containerY = Math.round(containerHeight / 2 + offsetY);
+            }
+
+            // Convert to stack-local coordinates
+            const x = (containerX - stackX) / s;
+            const y = (containerY - stackY) / s;
+
+            // Apply counter-scaling and position
+            if (counterScale && child && typeof child.setScale === 'function') {
+                try { child.setScale(1 / s); } catch (_) {}
+            }
+            if (child && typeof child.setPosition === 'function') {
+                try { child.setPosition(x, y); } catch (_) {}
+            }
+        }
+    }
+
+    /**
+     * Remove a previously added overlay child (if present).
+     */
+    removeOverlayChild(child) {
+        if (!child || !Array.isArray(this._overlayChildren)) return false;
+        let idx = -1;
+        for (let i = 0; i < this._overlayChildren.length; i++) {
+            if (this._overlayChildren[i].child === child) { idx = i; break; }
+        }
+        if (idx === -1) return false;
+        this._overlayChildren.splice(idx, 1);
+        try { this.removeChild(child); } catch (_) {}
+        return true;
     }
 
     /**

package/omd/display/omdDisplay.js

@@ -378,6 +378,8 @@ export class omdDisplay {
         }
     }
 
+    
+
     /**
      * Sets the font size
      * @param {number} size - The font size

package/omd/nodes/omdUnaryExpressionNode.js

@@ -1,228 +1,228 @@
-import { omdNode } from "./omdNode.js";
-import { getNodeForAST } from "../core/omdUtilities.js";
-import { omdOperatorNode } from "./omdOperatorNode.js";
-import { omdConstantNode } from "./omdConstantNode.js";
-import { omdBinaryExpressionNode } from "./omdBinaryExpressionNode.js";
-import { simplifyStep } from "../simplification/omdSimplification.js";
-
-/**
- * Represents a unary expression, like negation (-(x+y)).
- * @extends omdNode
- */
-export class omdUnaryExpressionNode extends omdNode {
-    /**
-     * @param {Object} ast - The AST node from math.js.
-     */
-    constructor(ast) {
-        super(ast);
-        this.type = "omdUnaryExpressionNode";
-        if (!ast.args || ast.args.length !== 1) {
-            console.error("omdUnaryExpressionNode requires an AST node with exactly 1 argument", ast);
-            return;
-        }
-
-        this.op = this.createOperatorNode(ast);
-        this.operand = this.createExpressionNode(ast.args[0]);
-        
-        // Set the operation property for compatibility with SimplificationEngine
-        this.operation = ast.fn || ast.op;
-
-        // Populate the argumentNodeList for mathematical child nodes
-        this.operand = this.operand;
-        this.argument = this.operand;
-        this.argumentNodeList.operand = this.operand;
-        this.argumentNodeList.argument = this.argument;
-
-        this.addChild(this.op);
-        this.addChild(this.operand);
-    }
-
-    createOperatorNode(ast) {
-        const opNode = new omdOperatorNode({ op: ast.op, fn: ast.fn });
-        opNode.parent = this;
-        return opNode;
-    }
-    
-    createExpressionNode(ast) {
-        const NodeClass = getNodeForAST(ast);
-        const node = new NodeClass(ast);
-        node.parent = this;
-        return node;
-    }
-
-    computeDimensions() {
-        this.op.computeDimensions();
-        this.operand.computeDimensions();
-
-        const opWidth = this.op.width;
-        // No extra spacing for unary minus.
-        const argWidth = this.operand.width;
-        
-        const totalWidth = opWidth + argWidth;
-        const totalHeight = Math.max(this.op.height, this.operand.height);
-
-        this.setWidthAndHeight(totalWidth, totalHeight);
-    }
-
-    updateLayout() {
-        this.op.updateLayout();
-        this.operand.updateLayout();
-        
-        const opY = (this.height - this.op.height) / 2;
-        const argY = (this.height - this.operand.height) / 2;
-
-        this.op.setPosition(0, opY);
-        this.operand.setPosition(this.op.width, argY);
-    }
-
-    clone() {
-        // Create a new node. The constructor will add a backRect and temporary children.
-        const tempAst = { type: 'OperatorNode', op: '-', args: [{type: 'ConstantNode', value: 1}] };
-        const clone = new omdUnaryExpressionNode(tempAst);
-
-        // Keep the backRect, but get rid of the temporary children.
-        const backRect = clone.backRect;
-        clone.removeAllChildren();
-        clone.addChild(backRect);
-        
-        // Manually clone the real children to ensure the entire tree has correct provenance.
-    clone.op = this.op.clone();
-    clone.addChild(clone.op);
-
-    clone.operand = this.operand.clone();
-    clone.addChild(clone.operand);
-        
-    // Ensure `argument` alias exists on the clone for compatibility
-    clone.argument = clone.operand;
-        
-    // Rebuild the argument list and copy AST data.
-    clone.argumentNodeList = { operand: clone.operand, argument: clone.argument };
-        clone.astNodeData = JSON.parse(JSON.stringify(this.astNodeData));
-
-        // The crucial step: link the clone to its origin.
-        clone.provenance.push(this.id);
-
-        return clone;
-    }
-
-    /**
-     * A unary expression is constant if its operand is constant.
-     * @returns {boolean}
-     */
-    isConstant() {
-        return !!(this.operand && typeof this.operand.isConstant === 'function' && this.operand.isConstant());
-    }
-
-    /**
-     * Get numeric value for unary expression (handles unary minus)
-     * @returns {number}
-     */
-    getValue() {
-        if (!this.isConstant()) throw new Error('Node is not a constant expression');
-        const val = this.operand.getValue();
-        if (this.operation === 'unaryMinus' || (this.op && this.op.opName === '-')) {
-            return -val;
-        }
-        return val;
-    }
-
-    /**
-     * If the operand represents a rational constant, return its rational pair adjusted for sign.
-     */
-    getRationalValue() {
-        if (!this.isConstant()) throw new Error('Node is not a constant expression');
-
-        // If operand supports getRationalValue, use it and adjust sign
-        if (typeof this.operand.getRationalValue === 'function') {
-            const { num, den } = this.operand.getRationalValue();
-            if (this.operation === 'unaryMinus' || (this.op && this.op.opName === '-')) {
-                return { num: -num, den };
-            }
-            return { num, den };
-        }
-
-        // Fallback: treat operand as integer rational
-        const raw = this.operand.getValue();
-        if (this.operation === 'unaryMinus' || (this.op && this.op.opName === '-')) {
-            return { num: -raw, den: 1 };
-        }
-        return { num: raw, den: 1 };
-    }
-
-    /**
-     * Converts the omdUnaryExpressionNode to a math.js AST node.
-     * @returns {Object} A math.js-compatible AST node.
-     */
-    toMathJSNode() {
-        const astNode = {
-            type: 'OperatorNode',
-            op: this.op.opName,
-            fn: this.operation,
-            args: [this.operand.toMathJSNode()],
-            id: this.id,
-            provenance: this.provenance
-        };
-
-        // Add a clone method to maintain compatibility with math.js's expectations.
-        astNode.clone = function() {
-            const clonedNode = { ...this };
-            clonedNode.args = this.args.map(arg => arg.clone());
-            return clonedNode;
-        };
-        return astNode;
-    }
-
-    /**
-     * Converts the unary expression node to a string.
-     * @returns {string} The string representation of the expression.
-     */
-    toString() {
-        const operandStr = this.operand.toString();
-        if (this.needsParentheses()) {
-            return `${this.op.opName}(${operandStr})`;
-        }
-        return `${this.op.opName}${operandStr}`;
-    }
-
-    /**
-     * Check if the operand needs parentheses.
-     * @returns {boolean} Whether parentheses are required
-     */
-    needsParentheses() {
-        // Parentheses are needed if the operand is a binary expression.
-        return this.operand.type === 'omdBinaryExpressionNode';
-    }
-
-    /**
-     * Evaluate the negation.
-     * @param {Object} variables - Variable name to value mapping
-     * @returns {number} The negated result
-     */
-    evaluate(variables = {}) {
-        if (!this.operand.evaluate) return NaN;
-        const value = this.operand.evaluate(variables);
-        if (this.op.opName === '-') {
-            return -value;
-        }
-        return value; // For other potential unary ops like '+'
-    }
-
-    /**
-     * Create a negation node from a string.
-     * @static
-     * @param {string} expressionString - Expression with negation
-     * @returns {omdUnaryExpressionNode}
-     */
-    static fromString(expressionString) {
-        try {
-            const ast = window.math.parse(expressionString);
-            if (ast.type === 'OperatorNode' && ast.fn === 'unaryMinus') {
-                return new omdUnaryExpressionNode(ast);
-            }
-            throw new Error("Expression is not a unary minus operation.");
-        } catch (error) {
-            console.error("Failed to create unary expression node from string:", error);
-            throw error;
-        }
-    }
+import { omdNode } from "./omdNode.js";
+import { getNodeForAST } from "../core/omdUtilities.js";
+import { omdOperatorNode } from "./omdOperatorNode.js";
+import { omdConstantNode } from "./omdConstantNode.js";
+import { omdBinaryExpressionNode } from "./omdBinaryExpressionNode.js";
+import { simplifyStep } from "../simplification/omdSimplification.js";
+
+/**
+ * Represents a unary expression, like negation (-(x+y)).
+ * @extends omdNode
+ */
+export class omdUnaryExpressionNode extends omdNode {
+    /**
+     * @param {Object} ast - The AST node from math.js.
+     */
+    constructor(ast) {
+        super(ast);
+        this.type = "omdUnaryExpressionNode";
+        if (!ast.args || ast.args.length !== 1) {
+            console.error("omdUnaryExpressionNode requires an AST node with exactly 1 argument", ast);
+            return;
+        }
+
+        this.op = this.createOperatorNode(ast);
+        this.operand = this.createExpressionNode(ast.args[0]);
+        
+        // Set the operation property for compatibility with SimplificationEngine
+        this.operation = ast.fn || ast.op;
+
+        // Populate the argumentNodeList for mathematical child nodes
+        this.operand = this.operand;
+        this.argument = this.operand;
+        this.argumentNodeList.operand = this.operand;
+        this.argumentNodeList.argument = this.argument;
+
+        this.addChild(this.op);
+        this.addChild(this.operand);
+    }
+
+    createOperatorNode(ast) {
+        const opNode = new omdOperatorNode({ op: ast.op, fn: ast.fn });
+        opNode.parent = this;
+        return opNode;
+    }
+    
+    createExpressionNode(ast) {
+        const NodeClass = getNodeForAST(ast);
+        const node = new NodeClass(ast);
+        node.parent = this;
+        return node;
+    }
+
+    computeDimensions() {
+        this.op.computeDimensions();
+        this.operand.computeDimensions();
+
+        const opWidth = this.op.width;
+        // No extra spacing for unary minus.
+        const argWidth = this.operand.width;
+        
+        const totalWidth = opWidth + argWidth;
+        const totalHeight = Math.max(this.op.height, this.operand.height);
+
+        this.setWidthAndHeight(totalWidth, totalHeight);
+    }
+
+    updateLayout() {
+        this.op.updateLayout();
+        this.operand.updateLayout();
+        
+        const opY = (this.height - this.op.height) / 2;
+        const argY = (this.height - this.operand.height) / 2;
+
+        this.op.setPosition(0, opY);
+        this.operand.setPosition(this.op.width, argY);
+    }
+
+    clone() {
+        // Create a new node. The constructor will add a backRect and temporary children.
+        const tempAst = { type: 'OperatorNode', op: '-', args: [{type: 'ConstantNode', value: 1}] };
+        const clone = new omdUnaryExpressionNode(tempAst);
+
+        // Keep the backRect, but get rid of the temporary children.
+        const backRect = clone.backRect;
+        clone.removeAllChildren();
+        clone.addChild(backRect);
+        
+        // Manually clone the real children to ensure the entire tree has correct provenance.
+    clone.op = this.op.clone();
+    clone.addChild(clone.op);
+
+    clone.operand = this.operand.clone();
+    clone.addChild(clone.operand);
+        
+    // Ensure `argument` alias exists on the clone for compatibility
+    clone.argument = clone.operand;
+        
+    // Rebuild the argument list and copy AST data.
+    clone.argumentNodeList = { operand: clone.operand, argument: clone.argument };
+        clone.astNodeData = JSON.parse(JSON.stringify(this.astNodeData));
+
+        // The crucial step: link the clone to its origin.
+        clone.provenance.push(this.id);
+
+        return clone;
+    }
+
+    /**
+     * A unary expression is constant if its operand is constant.
+     * @returns {boolean}
+     */
+    isConstant() {
+        return !!(this.operand && typeof this.operand.isConstant === 'function' && this.operand.isConstant());
+    }
+
+    /**
+     * Get numeric value for unary expression (handles unary minus)
+     * @returns {number}
+     */
+    getValue() {
+        if (!this.isConstant()) throw new Error('Node is not a constant expression');
+        const val = this.operand.getValue();
+        if (this.operation === 'unaryMinus' || (this.op && this.op.opName === '-')) {
+            return -val;
+        }
+        return val;
+    }
+
+    /**
+     * If the operand represents a rational constant, return its rational pair adjusted for sign.
+     */
+    getRationalValue() {
+        if (!this.isConstant()) throw new Error('Node is not a constant expression');
+
+        // If operand supports getRationalValue, use it and adjust sign
+        if (typeof this.operand.getRationalValue === 'function') {
+            const { num, den } = this.operand.getRationalValue();
+            if (this.operation === 'unaryMinus' || (this.op && this.op.opName === '-')) {
+                return { num: -num, den };
+            }
+            return { num, den };
+        }
+
+        // Fallback: treat operand as integer rational
+        const raw = this.operand.getValue();
+        if (this.operation === 'unaryMinus' || (this.op && this.op.opName === '-')) {
+            return { num: -raw, den: 1 };
+        }
+        return { num: raw, den: 1 };
+    }
+
+    /**
+     * Converts the omdUnaryExpressionNode to a math.js AST node.
+     * @returns {Object} A math.js-compatible AST node.
+     */
+    toMathJSNode() {
+        const astNode = {
+            type: 'OperatorNode',
+            op: this.op.opName,
+            fn: this.operation,
+            args: [this.operand.toMathJSNode()],
+            id: this.id,
+            provenance: this.provenance
+        };
+
+        // Add a clone method to maintain compatibility with math.js's expectations.
+        astNode.clone = function() {
+            const clonedNode = { ...this };
+            clonedNode.args = this.args.map(arg => arg.clone());
+            return clonedNode;
+        };
+        return astNode;
+    }
+
+    /**
+     * Converts the unary expression node to a string.
+     * @returns {string} The string representation of the expression.
+     */
+    toString() {
+        const operandStr = this.operand.toString();
+        if (this.needsParentheses()) {
+            return `${this.op.opName}(${operandStr})`;
+        }
+        return `${this.op.opName}${operandStr}`;
+    }
+
+    /**
+     * Check if the operand needs parentheses.
+     * @returns {boolean} Whether parentheses are required
+     */
+    needsParentheses() {
+        // Parentheses are needed if the operand is a binary expression.
+        return this.operand.type === 'omdBinaryExpressionNode';
+    }
+
+    /**
+     * Evaluate the negation.
+     * @param {Object} variables - Variable name to value mapping
+     * @returns {number} The negated result
+     */
+    evaluate(variables = {}) {
+        if (!this.operand.evaluate) return NaN;
+        const value = this.operand.evaluate(variables);
+        if (this.op.opName === '-') {
+            return -value;
+        }
+        return value; // For other potential unary ops like '+'
+    }
+
+    /**
+     * Create a negation node from a string.
+     * @static
+     * @param {string} expressionString - Expression with negation
+     * @returns {omdUnaryExpressionNode}
+     */
+    static fromString(expressionString) {
+        try {
+            const ast = window.math.parse(expressionString);
+            if (ast.type === 'OperatorNode' && ast.fn === 'unaryMinus') {
+                return new omdUnaryExpressionNode(ast);
+            }
+            throw new Error("Expression is not a unary minus operation.");
+        } catch (error) {
+            console.error("Failed to create unary expression node from string:", error);
+            throw error;
+        }
+    }
 }

package/package.json

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

package/src/omdCoordinatePlane.js

@@ -130,6 +130,19 @@ export class omdCoordinatePlane extends jsvgGroup {
         const firstTick = Math.ceil(min);
         const lastTick = Math.floor(max);
         const minLabelSpacing = 10;
+        const labelWidthEstimate = 20; // matches createNumericLabel width
+        const requiredLabelSpacing = minLabelSpacing + labelWidthEstimate;
+
+        // Compute label interval for label display only
+        let labelInterval = interval;
+        if (!this.forceAllTickLabels) {
+            const span = isXAxis ? this.xMax - this.xMin : this.yMax - this.yMin;
+            let floored = Math.floor(span / 10) * 10;
+            let raw = floored / 6;
+            let rounded = Math.round(raw / 5) * 5;
+            if (rounded === 0) rounded = 1;
+            labelInterval = rounded;
+        }
 
         let lastLabelPos = -Infinity;
         let zeroLineDrawn = false;
@@ -147,16 +160,28 @@ export class omdCoordinatePlane extends jsvgGroup {
                 zeroLineDrawn = true;
             }
 
-            const isEdgeTick = value === firstTick || value === lastTick;
-            const shouldShowLabel = this.showTickLabels && (
-                this.forceAllTickLabels ||
-                isEdgeTick ||
-                Math.abs(pos - lastLabelPos) >= minLabelSpacing
-            );
+            let shouldShowLabel = false;
+            if (this.showTickLabels) {
+                if (this.forceAllTickLabels) {
+                    shouldShowLabel = true;
+                } else {
+                    // Only show label if value is a multiple of labelInterval
+                    const eps = 1e-9;
+                    const isMultiple = (v, candidate) => Math.abs(v / candidate - Math.round(v / candidate)) < eps;
+                    shouldShowLabel = isMultiple(value, labelInterval);
+                }
+            }
 
             if (shouldShowLabel) {
                 this.addTickLabel(gridHolder, isXAxis, pos, value);
-                lastLabelPos = pos;
+                // store the actual clamped center used by addTickLabel
+                if (isXAxis) {
+                    const center = Math.max(20, Math.min(pos, this.width - 20));
+                    lastLabelPos = center;
+                } else {
+                    const center = Math.max(15, Math.min(pos, this.height - 7.5));
+                    lastLabelPos = center;
+                }
             }
         }