@teachinglab/omd 0.6.1 → 0.6.2

package/src/omdNode.js

@@ -1,384 +1,384 @@
-import { omdMetaExpression } from "../src/omdMetaExpression.js";
-import { jsvgTextLine, jsvgLine } from "@teachinglab/jsvg";
-
-/**
- * omdNode - A minimal class representing a node in the expression tree
- * Focuses purely on tree structure and layout, delegates visuals to superclasses
- * Uses math.js AST format
- */
-export class omdNode extends omdMetaExpression {
-    /**
-     * Constructor - Creates a tree node from math.js AST data
-     * @param {Object} nodeData - The AST node from math.js parser
-     */
-    constructor(nodeData) {
-        super();
-        
-        this.type = "omdNode";
-        this.nodeData = nodeData; // The AST node from math.js
-        this.childNodes = []; // Array of child omdNodes
-        this.edgeLines = []; // Array of edge lines
-        this.zoomLevel = 1.0; // Current zoom level
-        
-        // Initialize the tree structure
-        this.initializeNode();
-    }
-
-    /**
-     * Sets zoom level for this node and all children recursively
-     * @param {number} zoom - The zoom level (1.0 = 100%, 2.0 = 200%, etc.)
-     */
-    setZoomLevel(zoom) {
-        this.zoomLevel = zoom;
-        // Apply to all child nodes
-        this.childNodes.forEach(child => child.setZoomLevel(zoom));
-        // Invalidate cached dimensions
-        this.invalidateCache();
-    }
-
-    /**
-     * Gets the width of this node, scaled by zoom level
-     * @returns {number} The node width in pixels
-     */
-    get nodeWidth() {
-        if (!this._cachedWidth) {
-            // Use superclass text measurement if available, otherwise estimate
-            const label = this.getNodeLabel();
-            const baseWidth = Math.max(label.length * 12 + 20, 60);
-            this._cachedWidth = baseWidth * this.zoomLevel;
-        }
-        return this._cachedWidth;
-    }
-
-    /**
-     * Gets the height of this node, scaled by zoom level
-     * @returns {number} The node height in pixels
-     */
-    get nodeHeight() {
-        return 50 * this.zoomLevel;
-    }
-
-    /**
-     * Gets the total width needed for this entire subtree
-     * @returns {number} The subtree width in pixels
-     */
-    get subtreeWidth() {
-        if (this.childNodes.length === 0) {
-            return this.nodeWidth;
-        }
-        
-        const childSubtreeWidths = this.childNodes.map(child => child.subtreeWidth);
-        const totalChildWidth = childSubtreeWidths.reduce((sum, width) => sum + width, 0);
-        const spacing = (this.childNodes.length - 1) * this.nodeSpacing;
-        
-        return Math.max(this.nodeWidth, totalChildWidth + spacing);
-    }
-
-    /**
-     * Gets the horizontal spacing between child nodes, scaled by zoom level
-     * @returns {number} The spacing in pixels
-     */
-    get nodeSpacing() {
-        return 100 * this.zoomLevel;
-    }
-
-    /**
-     * Gets the vertical spacing between tree levels, scaled by zoom level
-     * @returns {number} The level height in pixels
-     */
-    get levelHeight() {
-        return 120 * this.zoomLevel;
-    }
-
-    /**
-     * Invalidates cached dimension calculations when content changes
-     */
-    invalidateCache() {
-        this._cachedWidth = null;
-        if (this.parent && this.parent.invalidateCache) {
-            this.parent.invalidateCache();
-        }
-    }
-
-    /**
-     * Main initialization method - sets up visuals, creates children, and layouts tree
-     */
-    initializeNode() {
-        this.setupVisuals();
-        this.createChildNodes();
-        this.layoutTree();
-    }
-
-    /**
-     * Creates the visual elements for this node (text label and background)
-     */
-    setupVisuals() {
-        // Create text label using jsvg
-        this.nodeLabel = new jsvgTextLine();
-        this.nodeLabel.setText(this.getNodeLabel());
-        this.nodeLabel.setFontSize(24 * this.zoomLevel);
-        this.nodeLabel.setAlignment('center');
-
-        // Update superclass background size
-        this.updateSize();
-        
-        // Position text at center
-        this.nodeLabel.setPosition(this.nodeWidth/2, this.nodeHeight/2);
-        this.addChild(this.nodeLabel);
-    }
-
-    /**
-     * Updates the size of visual elements to match calculated dimensions
-     */
-    updateSize() {
-        // Update the superclass background rectangle
-        this.backRect.setWidthAndHeight(this.nodeWidth, this.nodeHeight);
-        this.setWidthAndHeight(this.nodeWidth, this.nodeHeight);
-    }
-
-    /**
-     * Creates child nodes from AST data and connecting edge lines
-     */
-    createChildNodes() {
-        const childrenData = this.getNodeChildren();
-
-        childrenData.forEach((childData, index) => {
-            // Create child node
-            const childNode = new omdNode(childData); 
-            childNode.parent = this;
-            this.childNodes.push(childNode); 
-            this.addChild(childNode); 
-
-            // Create edge line
-            const edge = new jsvgLine();
-            edge.setStrokeWidth(3);
-            this.edgeLines.push(edge);
-            this.addChild(edge); 
-        });
-    }
-
-    /**
-     * Recursively layouts the entire tree structure
-     */
-    layoutTree() {
-        if (this.childNodes.length === 0) return;
-        
-        // Layout children first to get their final sizes
-        this.childNodes.forEach(child => child.layoutTree());
-        
-        // Calculate positions
-        this.positionChildren();
-        this.updateEdges();
-    }
-
-    /**
-     * Positions child nodes horizontally to center them under this node
-     */
-    positionChildren() {
-        if (this.childNodes.length === 0) return;
-
-        // Calculate starting position to center children
-        const totalWidth = this.childNodes.reduce((sum, child) => sum + child.subtreeWidth, 0);
-        const totalSpacing = (this.childNodes.length - 1) * this.nodeSpacing;
-        const totalRequiredWidth = totalWidth + totalSpacing;
-        
-        const startX = -totalRequiredWidth / 2 + this.nodeWidth / 2;
-        const childY = this.nodeHeight + this.levelHeight;
-        
-        let currentX = startX;
-        
-        this.childNodes.forEach((child, index) => {
-            // Center child in its allocated subtree space
-            const childX = currentX + child.subtreeWidth / 2 - child.nodeWidth / 2;
-            
-            // Position using jsvg method
-            child.setPosition(childX, childY);
-            
-            // Move to next position
-            currentX += child.subtreeWidth + this.nodeSpacing;
-        });
-    }
-
-    /**
-     * Updates the connecting edge lines between this node and its children
-     */
-    updateEdges() {
-        this.childNodes.forEach((child, index) => {
-            if (this.edgeLines[index]) {
-                // Connect center-bottom of parent to center-top of child
-                const parentCenterX = this.nodeWidth / 2;
-                const parentBottomY = this.nodeHeight;
-                
-                const childCenterX = child.xpos + child.nodeWidth / 2;
-                const childTopY = child.ypos;
-                
-                this.edgeLines[index].setEndpointA(parentCenterX, parentBottomY);
-                this.edgeLines[index].setEndpointB(childCenterX, childTopY);
-            }
-        });
-    }
-
-    /**
-     * Extracts child node data from the math.js AST based on node type
-     * @returns {Array} Array of child AST nodes
-     */
-    getNodeChildren() {
-        if (!this.nodeData) return [];
-        
-        const nodeType = this.detectNodeType();
-        
-        // Handle math.js node types
-        switch (nodeType) {
-            case 'FunctionNode':
-                return this.nodeData.args || [];
-            case 'MatrixNode':
-                return this.nodeData.args || [];
-            case 'OperatorNode':
-                return this.nodeData.args || [];
-            case 'ParenthesisNode':
-                return [this.nodeData.content];
-            case 'ArrayNode':
-                return this.nodeData.items || [];
-            case 'IndexNode':
-                return [this.nodeData.object, this.nodeData.index];
-            case 'AccessorNode':
-                return [this.nodeData.object, this.nodeData.index];
-            case 'AssignmentNode':
-                return [this.nodeData.object, this.nodeData.value];
-            case 'ConditionalNode':
-                return [this.nodeData.condition, this.nodeData.trueExpr, this.nodeData.falseExpr];
-            default:
-                return [];
-        }
-    }
-
-    /**
-     * Determines the type of math.js AST node by examining its properties
-     * @returns {string} The node type (e.g., 'OperatorNode', 'ConstantNode', etc.)
-     */
-    detectNodeType() {
-        if (!this.nodeData) return 'Unknown';
-        
-        // Check for properties that uniquely identify each node type
-        if (this.nodeData.hasOwnProperty('op') && this.nodeData.hasOwnProperty('args')) {
-            return 'OperatorNode';
-        } else if (this.nodeData.hasOwnProperty('fn') && this.nodeData.hasOwnProperty('args')) {
-            if (this.nodeData.fn === 'matrix') {
-                return 'MatrixNode';
-            }
-            return 'FunctionNode';
-        } else if (this.nodeData.hasOwnProperty('value')) {
-            return 'ConstantNode';
-        } else if (this.nodeData.hasOwnProperty('name') && !this.nodeData.hasOwnProperty('args')) {
-            return 'SymbolNode';
-        } else if (this.nodeData.hasOwnProperty('content')) {
-            return 'ParenthesisNode';
-        } else if (this.nodeData.hasOwnProperty('items')) {
-            return 'ArrayNode';
-        } else if (this.nodeData.hasOwnProperty('object') && this.nodeData.hasOwnProperty('index')) {
-            return 'IndexNode';
-        } else if (this.nodeData.hasOwnProperty('condition')) {
-            return 'ConditionalNode';
-        }
-        
-        return 'Unknown';
-    }
-
-    /**
-     * Generates the display label for this node based on its AST data
-     * @returns {string} The text label to display in the node
-     */
-    getNodeLabel() {
-        const nodeType = this.detectNodeType();
-        
-        switch (nodeType) {
-            case 'ConstantNode':
-                return this.nodeData.value.toString();
-            case 'SymbolNode':
-                return this.nodeData.name;
-            case 'FunctionNode':
-                return this.nodeData.fn.name || this.nodeData.fn;
-            case 'MatrixNode':
-                if (this.nodeData.args && this.nodeData.args.length > 0) {
-                    const firstArg = this.nodeData.args[0];
-                    if (firstArg && firstArg.items) {
-                        const rows = firstArg.items.length;
-                        const cols = firstArg.items[0] && firstArg.items[0].items ? firstArg.items[0].items.length : 1;
-                        return `Matrix ${rows}×${cols}`;
-                    }
-                }
-                return 'Matrix';
-            case 'OperatorNode':
-                const operatorMap = {
-                    'add': '+',
-                    'subtract': '-',
-                    'multiply': '*',
-                    'divide': '/',
-                    'pow': '^',
-                    'unaryMinus': '-',
-                    'unaryPlus': '+'
-                };
-                return operatorMap[this.nodeData.fn] || this.nodeData.fn;
-            case 'ParenthesisNode':
-                return '( )';
-            case 'ArrayNode':
-                return '[ ]';
-            case 'IndexNode':
-                return '[]';
-            case 'AccessorNode':
-                return '.';
-            case 'AssignmentNode':
-                return '=';
-            case 'ConditionalNode':
-                return '?:';
-            default:
-                return nodeType || '?';
-        }
-    }
-
-    /**
-     * Calculates the bounding box of this entire subtree
-     * @returns {Object} Object with left, right, top, bottom coordinates
-     */
-    getTreeBounds() {
-        const myX = this.xpos || 0;
-        const myY = this.ypos || 0;
-        
-        if (this.childNodes.length === 0) {
-            return {
-                left: myX,
-                right: myX + this.nodeWidth,
-                top: myY,
-                bottom: myY + this.nodeHeight
-            };
-        }
-
-        let left = myX;
-        let right = myX + this.nodeWidth;
-        let top = myY;
-        let bottom = myY + this.nodeHeight;
-        
-        this.childNodes.forEach(child => {
-            const childBounds = child.getTreeBounds();
-            left = Math.min(left, childBounds.left);
-            right = Math.max(right, childBounds.right);
-            top = Math.min(top, childBounds.top);
-            bottom = Math.max(bottom, childBounds.bottom);
-        });
-
-        return { left, right, top, bottom };
-    }
-
-    /**
-     * Gets the total dimensions of this tree for layout purposes
-     * @returns {Object} Object with width, height, and bounds
-     */
-    getTreeDimensions() {
-        const bounds = this.getTreeBounds();
-        return {
-            width: bounds.right - bounds.left,
-            height: bounds.bottom - bounds.top,
-            bounds: bounds
-        };
-    }
+import { omdMetaExpression } from "../src/omdMetaExpression.js";
+import { jsvgTextLine, jsvgLine } from "@teachinglab/jsvg";
+
+/**
+ * omdNode - A minimal class representing a node in the expression tree
+ * Focuses purely on tree structure and layout, delegates visuals to superclasses
+ * Uses math.js AST format
+ */
+export class omdNode extends omdMetaExpression {
+    /**
+     * Constructor - Creates a tree node from math.js AST data
+     * @param {Object} nodeData - The AST node from math.js parser
+     */
+    constructor(nodeData) {
+        super();
+        
+        this.type = "omdNode";
+        this.nodeData = nodeData; // The AST node from math.js
+        this.childNodes = []; // Array of child omdNodes
+        this.edgeLines = []; // Array of edge lines
+        this.zoomLevel = 1.0; // Current zoom level
+        
+        // Initialize the tree structure
+        this.initializeNode();
+    }
+
+    /**
+     * Sets zoom level for this node and all children recursively
+     * @param {number} zoom - The zoom level (1.0 = 100%, 2.0 = 200%, etc.)
+     */
+    setZoomLevel(zoom) {
+        this.zoomLevel = zoom;
+        // Apply to all child nodes
+        this.childNodes.forEach(child => child.setZoomLevel(zoom));
+        // Invalidate cached dimensions
+        this.invalidateCache();
+    }
+
+    /**
+     * Gets the width of this node, scaled by zoom level
+     * @returns {number} The node width in pixels
+     */
+    get nodeWidth() {
+        if (!this._cachedWidth) {
+            // Use superclass text measurement if available, otherwise estimate
+            const label = this.getNodeLabel();
+            const baseWidth = Math.max(label.length * 12 + 20, 60);
+            this._cachedWidth = baseWidth * this.zoomLevel;
+        }
+        return this._cachedWidth;
+    }
+
+    /**
+     * Gets the height of this node, scaled by zoom level
+     * @returns {number} The node height in pixels
+     */
+    get nodeHeight() {
+        return 50 * this.zoomLevel;
+    }
+
+    /**
+     * Gets the total width needed for this entire subtree
+     * @returns {number} The subtree width in pixels
+     */
+    get subtreeWidth() {
+        if (this.childNodes.length === 0) {
+            return this.nodeWidth;
+        }
+        
+        const childSubtreeWidths = this.childNodes.map(child => child.subtreeWidth);
+        const totalChildWidth = childSubtreeWidths.reduce((sum, width) => sum + width, 0);
+        const spacing = (this.childNodes.length - 1) * this.nodeSpacing;
+        
+        return Math.max(this.nodeWidth, totalChildWidth + spacing);
+    }
+
+    /**
+     * Gets the horizontal spacing between child nodes, scaled by zoom level
+     * @returns {number} The spacing in pixels
+     */
+    get nodeSpacing() {
+        return 100 * this.zoomLevel;
+    }
+
+    /**
+     * Gets the vertical spacing between tree levels, scaled by zoom level
+     * @returns {number} The level height in pixels
+     */
+    get levelHeight() {
+        return 120 * this.zoomLevel;
+    }
+
+    /**
+     * Invalidates cached dimension calculations when content changes
+     */
+    invalidateCache() {
+        this._cachedWidth = null;
+        if (this.parent && this.parent.invalidateCache) {
+            this.parent.invalidateCache();
+        }
+    }
+
+    /**
+     * Main initialization method - sets up visuals, creates children, and layouts tree
+     */
+    initializeNode() {
+        this.setupVisuals();
+        this.createChildNodes();
+        this.layoutTree();
+    }
+
+    /**
+     * Creates the visual elements for this node (text label and background)
+     */
+    setupVisuals() {
+        // Create text label using jsvg
+        this.nodeLabel = new jsvgTextLine();
+        this.nodeLabel.setText(this.getNodeLabel());
+        this.nodeLabel.setFontSize(24 * this.zoomLevel);
+        this.nodeLabel.setAlignment('center');
+
+        // Update superclass background size
+        this.updateSize();
+        
+        // Position text at center
+        this.nodeLabel.setPosition(this.nodeWidth/2, this.nodeHeight/2);
+        this.addChild(this.nodeLabel);
+    }
+
+    /**
+     * Updates the size of visual elements to match calculated dimensions
+     */
+    updateSize() {
+        // Update the superclass background rectangle
+        this.backRect.setWidthAndHeight(this.nodeWidth, this.nodeHeight);
+        this.setWidthAndHeight(this.nodeWidth, this.nodeHeight);
+    }
+
+    /**
+     * Creates child nodes from AST data and connecting edge lines
+     */
+    createChildNodes() {
+        const childrenData = this.getNodeChildren();
+
+        childrenData.forEach((childData, index) => {
+            // Create child node
+            const childNode = new omdNode(childData); 
+            childNode.parent = this;
+            this.childNodes.push(childNode); 
+            this.addChild(childNode); 
+
+            // Create edge line
+            const edge = new jsvgLine();
+            edge.setStrokeWidth(3);
+            this.edgeLines.push(edge);
+            this.addChild(edge); 
+        });
+    }
+
+    /**
+     * Recursively layouts the entire tree structure
+     */
+    layoutTree() {
+        if (this.childNodes.length === 0) return;
+        
+        // Layout children first to get their final sizes
+        this.childNodes.forEach(child => child.layoutTree());
+        
+        // Calculate positions
+        this.positionChildren();
+        this.updateEdges();
+    }
+
+    /**
+     * Positions child nodes horizontally to center them under this node
+     */
+    positionChildren() {
+        if (this.childNodes.length === 0) return;
+
+        // Calculate starting position to center children
+        const totalWidth = this.childNodes.reduce((sum, child) => sum + child.subtreeWidth, 0);
+        const totalSpacing = (this.childNodes.length - 1) * this.nodeSpacing;
+        const totalRequiredWidth = totalWidth + totalSpacing;
+        
+        const startX = -totalRequiredWidth / 2 + this.nodeWidth / 2;
+        const childY = this.nodeHeight + this.levelHeight;
+        
+        let currentX = startX;
+        
+        this.childNodes.forEach((child, index) => {
+            // Center child in its allocated subtree space
+            const childX = currentX + child.subtreeWidth / 2 - child.nodeWidth / 2;
+            
+            // Position using jsvg method
+            child.setPosition(childX, childY);
+            
+            // Move to next position
+            currentX += child.subtreeWidth + this.nodeSpacing;
+        });
+    }
+
+    /**
+     * Updates the connecting edge lines between this node and its children
+     */
+    updateEdges() {
+        this.childNodes.forEach((child, index) => {
+            if (this.edgeLines[index]) {
+                // Connect center-bottom of parent to center-top of child
+                const parentCenterX = this.nodeWidth / 2;
+                const parentBottomY = this.nodeHeight;
+                
+                const childCenterX = child.xpos + child.nodeWidth / 2;
+                const childTopY = child.ypos;
+                
+                this.edgeLines[index].setEndpointA(parentCenterX, parentBottomY);
+                this.edgeLines[index].setEndpointB(childCenterX, childTopY);
+            }
+        });
+    }
+
+    /**
+     * Extracts child node data from the math.js AST based on node type
+     * @returns {Array} Array of child AST nodes
+     */
+    getNodeChildren() {
+        if (!this.nodeData) return [];
+        
+        const nodeType = this.detectNodeType();
+        
+        // Handle math.js node types
+        switch (nodeType) {
+            case 'FunctionNode':
+                return this.nodeData.args || [];
+            case 'MatrixNode':
+                return this.nodeData.args || [];
+            case 'OperatorNode':
+                return this.nodeData.args || [];
+            case 'ParenthesisNode':
+                return [this.nodeData.content];
+            case 'ArrayNode':
+                return this.nodeData.items || [];
+            case 'IndexNode':
+                return [this.nodeData.object, this.nodeData.index];
+            case 'AccessorNode':
+                return [this.nodeData.object, this.nodeData.index];
+            case 'AssignmentNode':
+                return [this.nodeData.object, this.nodeData.value];
+            case 'ConditionalNode':
+                return [this.nodeData.condition, this.nodeData.trueExpr, this.nodeData.falseExpr];
+            default:
+                return [];
+        }
+    }
+
+    /**
+     * Determines the type of math.js AST node by examining its properties
+     * @returns {string} The node type (e.g., 'OperatorNode', 'ConstantNode', etc.)
+     */
+    detectNodeType() {
+        if (!this.nodeData) return 'Unknown';
+        
+        // Check for properties that uniquely identify each node type
+        if (this.nodeData.hasOwnProperty('op') && this.nodeData.hasOwnProperty('args')) {
+            return 'OperatorNode';
+        } else if (this.nodeData.hasOwnProperty('fn') && this.nodeData.hasOwnProperty('args')) {
+            if (this.nodeData.fn === 'matrix') {
+                return 'MatrixNode';
+            }
+            return 'FunctionNode';
+        } else if (this.nodeData.hasOwnProperty('value')) {
+            return 'ConstantNode';
+        } else if (this.nodeData.hasOwnProperty('name') && !this.nodeData.hasOwnProperty('args')) {
+            return 'SymbolNode';
+        } else if (this.nodeData.hasOwnProperty('content')) {
+            return 'ParenthesisNode';
+        } else if (this.nodeData.hasOwnProperty('items')) {
+            return 'ArrayNode';
+        } else if (this.nodeData.hasOwnProperty('object') && this.nodeData.hasOwnProperty('index')) {
+            return 'IndexNode';
+        } else if (this.nodeData.hasOwnProperty('condition')) {
+            return 'ConditionalNode';
+        }
+        
+        return 'Unknown';
+    }
+
+    /**
+     * Generates the display label for this node based on its AST data
+     * @returns {string} The text label to display in the node
+     */
+    getNodeLabel() {
+        const nodeType = this.detectNodeType();
+        
+        switch (nodeType) {
+            case 'ConstantNode':
+                return this.nodeData.value.toString();
+            case 'SymbolNode':
+                return this.nodeData.name;
+            case 'FunctionNode':
+                return this.nodeData.fn.name || this.nodeData.fn;
+            case 'MatrixNode':
+                if (this.nodeData.args && this.nodeData.args.length > 0) {
+                    const firstArg = this.nodeData.args[0];
+                    if (firstArg && firstArg.items) {
+                        const rows = firstArg.items.length;
+                        const cols = firstArg.items[0] && firstArg.items[0].items ? firstArg.items[0].items.length : 1;
+                        return `Matrix ${rows}×${cols}`;
+                    }
+                }
+                return 'Matrix';
+            case 'OperatorNode':
+                const operatorMap = {
+                    'add': '+',
+                    'subtract': '-',
+                    'multiply': '*',
+                    'divide': '/',
+                    'pow': '^',
+                    'unaryMinus': '-',
+                    'unaryPlus': '+'
+                };
+                return operatorMap[this.nodeData.fn] || this.nodeData.fn;
+            case 'ParenthesisNode':
+                return '( )';
+            case 'ArrayNode':
+                return '[ ]';
+            case 'IndexNode':
+                return '[]';
+            case 'AccessorNode':
+                return '.';
+            case 'AssignmentNode':
+                return '=';
+            case 'ConditionalNode':
+                return '?:';
+            default:
+                return nodeType || '?';
+        }
+    }
+
+    /**
+     * Calculates the bounding box of this entire subtree
+     * @returns {Object} Object with left, right, top, bottom coordinates
+     */
+    getTreeBounds() {
+        const myX = this.xpos || 0;
+        const myY = this.ypos || 0;
+        
+        if (this.childNodes.length === 0) {
+            return {
+                left: myX,
+                right: myX + this.nodeWidth,
+                top: myY,
+                bottom: myY + this.nodeHeight
+            };
+        }
+
+        let left = myX;
+        let right = myX + this.nodeWidth;
+        let top = myY;
+        let bottom = myY + this.nodeHeight;
+        
+        this.childNodes.forEach(child => {
+            const childBounds = child.getTreeBounds();
+            left = Math.min(left, childBounds.left);
+            right = Math.max(right, childBounds.right);
+            top = Math.min(top, childBounds.top);
+            bottom = Math.max(bottom, childBounds.bottom);
+        });
+
+        return { left, right, top, bottom };
+    }
+
+    /**
+     * Gets the total dimensions of this tree for layout purposes
+     * @returns {Object} Object with width, height, and bounds
+     */
+    getTreeDimensions() {
+        const bounds = this.getTreeBounds();
+        return {
+            width: bounds.right - bounds.left,
+            height: bounds.bottom - bounds.top,
+            bounds: bounds
+        };
+    }
 }