circuitscript 0.1.0 → 0.1.3

package/dist/esm/layout.mjs

@@ -1,16 +1,16 @@
 import { Graph, alg } from '@dagrejs/graphlib';
-import { SymbolCustom, SymbolDrawing, SymbolFactory, SymbolCustomModule, SymbolPlaceholder, SymbolText, PlaceHolderCommands } from "./draw_symbols.mjs";
+import { SymbolCustom, SymbolDrawing, SymbolCustomModule, SymbolPlaceholder, SymbolText, PlaceHolderCommands } from "./draw_symbols.mjs";
 import { FrameAction, SequenceAction } from "./objects/ExecutionScope.mjs";
-import { defaultFrameTitleTextSize, defaultGridSizeUnits, FrameType, GlobalNames, ParamKeys, WireAutoDirection } from './globals.mjs';
-import { Geometry } from './geometry.mjs';
+import { ComponentTypes, defaultFrameTitleTextSize, defaultGridSizeUnits, FrameType, ParamKeys, SymbolPinSide, WireAutoDirection } from './globals.mjs';
+import { Geometry, HorizontalAlign, VerticalAlign } from './geometry.mjs';
 import { Logger } from './logger.mjs';
-import { Frame, FrameParamKeys, FramePlotDirection } from './objects/Frame.mjs';
-import { combineMaps, getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, roundValue, toNearestGrid } from './utils.mjs';
+import { FixedFrameIds, Frame, FrameParamKeys, FramePlotDirection } from './objects/Frame.mjs';
+import { areasOverlap, combineMaps, getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, roundValue, toNearestGrid } from './utils.mjs';
 import { Direction } from './objects/types.mjs';
 import { milsToMM, UnitDimension } from './helpers.mjs';
+import { numeric, NumericValue } from './objects/ParamDefinition.mjs';
 export class LayoutEngine {
     logger;
-    placeSubgraphVersion = 2;
     layoutWarnings = [];
     showBaseFrame = false;
     constructor(options = { showBaseFrame: false }) {
@@ -113,8 +113,8 @@ export class LayoutEngine {
             const allLines = wires.map(wire => {
                 return wire.points.map(pt => {
                     return {
-                        x: wire.x + pt.x,
-                        y: wire.y + pt.y,
+                        x: wire.x.add(pt.x),
+                        y: wire.y.add(pt.y),
                     };
                 });
             });
@@ -125,7 +125,7 @@ export class LayoutEngine {
                 intersectPoints,
             });
             intersectPoints.forEach(([x, y]) => {
-                junctions.push(new RenderJunction(x, y));
+                junctions.push(new RenderJunction(numeric(x), numeric(y)));
             });
         }
         return {
@@ -135,21 +135,21 @@ export class LayoutEngine {
     }
     placeFrames(graph, subgraphInfo, frameObjects) {
         const baseFrame = frameObjects[0];
-        baseFrame.padding = 0;
-        baseFrame.borderWidth = 0;
+        baseFrame.padding = numeric(0);
+        baseFrame.borderWidth = numeric(0);
         if (this.showBaseFrame) {
-            baseFrame.borderWidth = 5;
-            baseFrame.width = 11692 - 400 * 2;
-            baseFrame.height = 8267 - 400 * 2;
+            baseFrame.borderWidth = numeric(5);
+            baseFrame.width = numeric(11692 - 400 * 2);
+            baseFrame.height = numeric(8267 - 400 * 2);
         }
-        baseFrame.x = 0;
-        baseFrame.y = 0;
-        let textObjects = [];
-        let elementFrames = [];
+        baseFrame.x = numeric(0);
+        baseFrame.y = numeric(0);
         baseFrame.bounds = {
             xmin: 0, ymin: 0,
             xmax: 0, ymax: 0,
         };
+        let textObjects = [];
+        let elementFrames = [];
         if (subgraphInfo.length > 0) {
             const result = this.prepareFrames(graph, subgraphInfo, baseFrame);
             textObjects = result.textObjects;
@@ -174,10 +174,10 @@ export class LayoutEngine {
         const innerItems = frame.innerItems;
         const frames = [];
         innerItems.forEach(item => {
-            if (item.type === RenderFrameType.Elements) {
+            if (item.renderType === RenderFrameType.Elements) {
                 frames.push(item);
             }
-            else if (item.type === RenderFrameType.Container) {
+            else if (item.renderType === RenderFrameType.Container) {
                 const innerFrames = this.collectElementFrames(item, level + 1);
                 frames.push(...innerFrames);
             }
@@ -189,18 +189,20 @@ export class LayoutEngine {
         const innerItems = frame.innerItems;
         innerItems.forEach(innerFrame => {
             if (innerFrame.frame.frameType === FrameType.Sheet) {
-                innerFrame.x = 0;
-                innerFrame.y = 0;
+                innerFrame.x = numeric(0);
+                innerFrame.y = numeric(0);
             }
             else {
-                innerFrame.x += frame.x;
-                innerFrame.y += frame.y;
+                innerFrame.x = innerFrame.x.add(frame.x);
+                innerFrame.y = innerFrame.y.add(frame.y);
             }
-            if (innerFrame.type === RenderFrameType.Elements) {
+            if (innerFrame.renderType === RenderFrameType.Elements) {
                 this.print(level, "".padStart(level * 4), 'element frame', innerFrame.x, innerFrame.y);
-                innerFrame.innerItems.forEach(item2 => {
-                    item2.x += innerFrame.x - innerFrame.translateX;
-                    item2.y += innerFrame.y - innerFrame.translateY;
+                const diffX = innerFrame.x.sub(innerFrame.translateX);
+                const diffY = innerFrame.y.sub(innerFrame.translateY);
+                innerFrame.innerItems.forEach(item => {
+                    item.x = item.x.add(diffX);
+                    item.y = item.y.add(diffY);
                 });
             }
             else {
@@ -212,11 +214,10 @@ export class LayoutEngine {
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
         const gridSize = defaultGridSizeUnits;
-        let accumX = 0;
-        let accumY = 0;
+        const frameDirection = frame.direction;
         const boundPoints = [];
         const frameSizes = innerFrames.map(innerFrame => {
-            if (innerFrame.type === RenderFrameType.Elements) {
+            if (innerFrame.renderType === RenderFrameType.Elements) {
                 innerFrame.bounds = resizeToNearestGrid(innerFrame.bounds, gridSize);
                 innerFrame.translateX = innerFrame.bounds.xmin;
                 innerFrame.translateY = innerFrame.bounds.ymin;
@@ -230,10 +231,14 @@ export class LayoutEngine {
             const { width } = getBoundsSize(item);
             return width;
         }));
+        const maxHeight = Math.max(...frameSizes.map(item => {
+            const { height } = getBoundsSize(item);
+            return height;
+        }));
         let accumRowWidth = 0;
-        let titleFrameWidth = null;
+        let titleFrameWidth = 0;
         const inRowShouldCenterInnerFrames = true;
-        if (frame.direction === FramePlotDirection.Row) {
+        if (frameDirection === FramePlotDirection.Row) {
             accumRowWidth = frameSizes.reduce((accum, item, index) => {
                 const { width } = getBoundsSize(item);
                 if (frame.innerItems[index].containsTitle) {
@@ -241,85 +246,252 @@ export class LayoutEngine {
                     return accum;
                 }
                 return accum + width +
-                    ((index + 1 < frameSizes.length) ? frame.gap : 0);
+                    ((index + 1 < frameSizes.length) ? frame.gap.toNumber() : 0);
             }, 0);
         }
         else {
             accumRowWidth = maxWidth;
         }
+        let frameWidth = numeric(0);
+        let frameHeight = numeric(0);
+        let frameXMin = numeric(0);
+        let frameYMin = numeric(0);
+        const frameParams = frame.frame.parameters;
+        const avoidAreas = [];
+        if (frameParams.has(FrameParamKeys.SheetType)) {
+            const frameComponent = frameParams.get(FrameParamKeys.SheetType);
+            const frameDrawing = frameComponent.displayProp;
+            frameDrawing.variables = combineMaps(frameComponent.parameters, frameParams);
+            const rects = ExtractDrawingRects(frameDrawing);
+            const drawableRect = rects.find(rect => rect.className === 'plot-area');
+            let frameMinX = numeric(0);
+            let frameMinY = numeric(0);
+            if (drawableRect) {
+                frameMinX = milsToMM(drawableRect.x);
+                frameMinY = milsToMM(drawableRect.y);
+                frameWidth = milsToMM(drawableRect.width);
+                frameHeight = milsToMM(drawableRect.height);
+            }
+            const infoAreaRect = rects.filter(rect => rect.className === 'keepout-area');
+            infoAreaRect.forEach(area => {
+                const x1 = area.x;
+                const y1 = area.y;
+                const x2 = area.x.add(area.width);
+                const y2 = area.y.add(area.height);
+                avoidAreas.push([
+                    milsToMM(x1).sub(frameMinX).toNumber(),
+                    milsToMM(y1).sub(frameMinY).toNumber(),
+                    milsToMM(x2).sub(frameMinX).toNumber(),
+                    milsToMM(y2).sub(frameMinY).toNumber(),
+                ]);
+            });
+        }
+        else {
+            if (frame.width !== null) {
+                frameWidth = frame.width;
+            }
+            if (frame.height !== null) {
+                frameHeight = frame.height;
+            }
+        }
         const offsetX = frame.padding;
         const offsetY = frame.padding;
         let centeredOffsetX = 0;
         let widthForTitle;
-        if (titleFrameWidth > accumRowWidth) {
+        if (frameWidth.toNumber() !== 0) {
+            widthForTitle = frameWidth.toNumber();
+        }
+        else if (titleFrameWidth > accumRowWidth) {
             widthForTitle = titleFrameWidth;
         }
         else {
             widthForTitle = accumRowWidth;
         }
-        if (frame.direction === FramePlotDirection.Row &&
+        if (frameDirection === FramePlotDirection.Row &&
             inRowShouldCenterInnerFrames &&
             titleFrameWidth !== null && titleFrameWidth > accumRowWidth) {
-            centeredOffsetX = toNearestGrid(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
+            centeredOffsetX =
+                toNearestGrid(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
         }
-        innerFrames.forEach(innerFrame => {
-            const { width: frameWidth, height: frameHeight } = getBoundsSize(innerFrame.bounds);
+        let title_align = HorizontalAlign.Middle;
+        if (frameParams.has(FrameParamKeys.TitleAlign)) {
+            title_align = frameParams.get(FrameParamKeys.TitleAlign);
+        }
+        let accumX = numeric(0);
+        let accumY = numeric(0);
+        innerFrames.forEach((innerFrame, index) => {
+            const { width: innerFrameWidth, height: innerFrameHeight } = getBoundsSize(innerFrame.bounds);
+            let arrangeLineAttempts = 0;
+            const maxAttempts = 10;
+            let innerFrameX = numeric(0);
+            let innerFrameY = numeric(0);
             if (innerFrame.containsTitle) {
-                innerFrame.x = offsetX + accumX + toNearestGrid(widthForTitle / 2 - frameWidth / 2, gridSize);
-                innerFrame.y = offsetY + accumY;
-                accumY += (frameHeight + frame.gap);
+                innerFrame.x = offsetX.add(accumX);
+                innerFrame.y = offsetY.add(accumY);
+                accumY = accumY.add(innerFrameHeight).add(frame.gap);
             }
             else {
-                if (frame.direction === FramePlotDirection.Column) {
-                    innerFrame.x = offsetX + accumX + toNearestGrid(maxWidth / 2 - frameWidth / 2, gridSize);
-                    innerFrame.y = offsetY + accumY;
-                    accumY += (frameHeight + frame.gap);
+                if (frameDirection === FramePlotDirection.Column) {
+                    innerFrameX = offsetX.add(accumX);
+                    innerFrameY = offsetY.add(accumY);
+                    while (arrangeLineAttempts < maxAttempts) {
+                        const innerFrameY2 = innerFrameY.toNumber() + innerFrameHeight;
+                        const doesExceedFrameHeight = (frameHeight.toNumber() > 0
+                            && innerFrameY2 > frameHeight.toNumber());
+                        const { xmax } = getBoundsFromPoints(boundPoints);
+                        const tmpX1 = innerFrameX.toNumber();
+                        const tmpY1 = innerFrameY.toNumber();
+                        const tmpX2 = tmpX1 + innerFrameWidth;
+                        const tmpY2 = tmpY1 + innerFrameHeight;
+                        const frameArea = [tmpX1, tmpY1, tmpX2, tmpY2];
+                        const overlaps = avoidAreas.filter(area => areasOverlap(frameArea, area));
+                        const doesOverlapAreasToAvoid = overlaps.length > 0;
+                        if (doesExceedFrameHeight || doesOverlapAreasToAvoid) {
+                            innerFrameY = offsetY;
+                            const nextX = numeric(xmax).sub(offsetX).add(frame.gap);
+                            innerFrameX = offsetX.add(nextX);
+                            accumY = numeric(0);
+                            accumX = nextX;
+                        }
+                        arrangeLineAttempts++;
+                        if (arrangeLineAttempts > maxAttempts) {
+                            throw "Failed to place inner frame";
+                        }
+                    }
+                    innerFrame.x = innerFrameX;
+                    innerFrame.y = innerFrameY;
+                    accumY = accumY.add(innerFrameHeight).add(frame.gap);
                 }
-                else if (frame.direction === FramePlotDirection.Row) {
-                    innerFrame.x = offsetX + centeredOffsetX + accumX;
-                    innerFrame.y = offsetY + accumY;
-                    accumX += (frameWidth + frame.gap);
+                else if (frameDirection === FramePlotDirection.Row) {
+                    innerFrameX = offsetX.add(centeredOffsetX).add(accumX);
+                    innerFrameY = offsetY.add(accumY);
+                    while (arrangeLineAttempts < maxAttempts) {
+                        const innerFrameX2 = innerFrameX.toNumber() + innerFrameWidth;
+                        const doesExceedFrameWidth = (frameWidth.toNumber() > 0
+                            && innerFrameX2 > frameWidth.toNumber());
+                        const tmpX1 = innerFrameX.toNumber();
+                        const tmpY1 = innerFrameY.toNumber();
+                        const tmpX2 = tmpX1 + innerFrameWidth;
+                        const tmpY2 = tmpY1 + innerFrameHeight;
+                        const frameArea = [tmpX1, tmpY1, tmpX2, tmpY2];
+                        const overlaps = avoidAreas.filter(area => areasOverlap(frameArea, area));
+                        const doesOverlapAreasToAvoid = overlaps.length > 0;
+                        if (doesExceedFrameWidth || doesOverlapAreasToAvoid) {
+                            innerFrameX = offsetX.add(centeredOffsetX);
+                            const { ymax } = getBoundsFromPoints(boundPoints);
+                            const nextY = numeric(ymax).sub(offsetY).add(frame.gap);
+                            innerFrameY = offsetY.add(nextY);
+                            accumX = numeric(0);
+                            accumY = nextY;
+                        }
+                        else {
+                            break;
+                        }
+                        arrangeLineAttempts++;
+                        if (arrangeLineAttempts > maxAttempts) {
+                            throw "Failed to place inner frame";
+                        }
+                    }
+                    innerFrame.x = innerFrameX;
+                    innerFrame.y = innerFrameY;
+                    accumX = accumX.add(innerFrameWidth).add(frame.gap);
                 }
             }
-            boundPoints.push([innerFrame.x, innerFrame.y], [innerFrame.x + frameWidth, innerFrame.y + frameHeight]);
+            boundPoints.push([
+                innerFrame.x.toNumber(),
+                innerFrame.y.toNumber()
+            ], [
+                innerFrame.x.add(innerFrameWidth).toNumber(),
+                innerFrame.y.add(innerFrameHeight).toNumber()
+            ]);
         });
-        const contentsBounds = resizeBounds(getBoundsFromPoints(boundPoints), frame.padding);
-        if (frame.frame.parameters.has(FrameParamKeys.SheetType)) {
-            const frameComponent = frame.frame.parameters.get(FrameParamKeys.SheetType);
-            const frameDrawing = frameComponent.displayProp;
-            frameDrawing.variables = combineMaps(frameComponent.parameters, frame.frame.parameters);
-            const rects = ExtractDrawingRects(frameDrawing);
-            let frameWidth = 0;
-            let frameHeight = 0;
-            if (rects[1]) {
-                frameWidth = milsToMM(rects[1].width);
-                frameHeight = milsToMM(rects[1].height);
-            }
-            const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
-            const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
-            const frameOffsetX = toNearestGrid((frameWidth - contentsWidth) / 2, gridSize);
-            const frameOffsetY = toNearestGrid((frameHeight - contentsHeight) / 2, gridSize);
-            innerFrames.forEach(innerFrame => {
-                innerFrame.x += frameOffsetX;
-                innerFrame.y += frameOffsetY;
-            });
-            frame.bounds = {
-                xmin: 0,
-                ymin: 0,
-                xmax: frameWidth,
-                ymax: frameHeight
-            };
+        const contentsBounds = resizeBounds(getBoundsFromPoints(boundPoints), frame.padding.toNumber());
+        const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
+        const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
+        let hAlign = HorizontalAlign.Middle;
+        let vAlign = VerticalAlign.Middle;
+        if (frameParams.has(FrameParamKeys.HorizontalAlign)) {
+            hAlign =
+                frameParams.get(FrameParamKeys.HorizontalAlign);
+        }
+        if (frameParams.has(FrameParamKeys.VerticalAlign)) {
+            vAlign =
+                frameParams.get(FrameParamKeys.VerticalAlign);
+        }
+        if (frameParams.has(FrameParamKeys.SheetType)) {
+            frameXMin = numeric(0);
+            frameYMin = numeric(0);
         }
         else {
-            frame.bounds = contentsBounds;
+            frameXMin = numeric(contentsBounds.xmin);
+            frameYMin = numeric(contentsBounds.ymin);
+        }
+        if (frameWidth.toNumber() === 0) {
+            frameWidth = numeric(contentsWidth);
+        }
+        if (frameHeight.toNumber() === 0) {
+            frameHeight = numeric(contentsHeight);
+        }
+        const titleFrame = innerFrames.find(frame => {
+            return frame.containsTitle;
+        });
+        if (titleFrame) {
+            const { width: innerFrameWidth } = getBoundsSize(titleFrame.bounds);
+            let titleOffset = 0;
+            switch (title_align) {
+                case HorizontalAlign.Left:
+                    titleOffset = 0;
+                    break;
+                case HorizontalAlign.Middle:
+                    titleOffset = toNearestGrid(widthForTitle / 2 - innerFrameWidth / 2, gridSize);
+                    break;
+                case HorizontalAlign.Right:
+                    titleOffset = frameWidth.toNumber() - innerFrameWidth;
+                    break;
+            }
+            titleFrame.x = titleFrame.x.add(titleOffset);
+        }
+        let frameOffsetX = 0;
+        let frameOffsetY = 0;
+        switch (hAlign) {
+            case HorizontalAlign.Left:
+                frameOffsetX = 0;
+                break;
+            case HorizontalAlign.Middle:
+                frameOffsetX = toNearestGrid((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
+                break;
+            case HorizontalAlign.Right:
+                frameOffsetX = toNearestGrid(frameWidth.toNumber() - contentsWidth, gridSize);
+                break;
+        }
+        switch (vAlign) {
+            case VerticalAlign.Top:
+                frameOffsetY = 0;
+                break;
+            case VerticalAlign.Middle:
+                frameOffsetY = toNearestGrid((frameHeight.toNumber() - contentsHeight) / 2, gridSize);
+                break;
+            case VerticalAlign.Bottom:
+                frameOffsetY = toNearestGrid(frameHeight.toNumber() - contentsHeight, gridSize);
+                break;
         }
+        innerFrames.forEach(innerFrame => {
+            innerFrame.x = innerFrame.x.add(frameOffsetX);
+            innerFrame.y = innerFrame.y.add(frameOffsetY);
+        });
+        frame.bounds = {
+            xmin: frameXMin.toNumber(),
+            ymin: frameYMin.toNumber(),
+            xmax: frameXMin.toNumber() + frameWidth.toNumber(),
+            ymax: frameYMin.toNumber() + frameHeight.toNumber(),
+        };
     }
     dumpFrame(frame, level = 0) {
         this.print(level, "".padStart(level * 4), 'frame, items:', frame.innerItems.length);
         frame.innerItems.forEach(item => {
             item = item;
-            if (item.type === RenderFrameType.Elements) {
-                this.print(level, "".padStart(level * 4), 'element frame, items:', item.innerItems.map(item => {
+            if (item.renderType === RenderFrameType.Elements) {
+                this.print(level, "".padStart(level * 4), '- element frame, items:', item.innerItems.map(item => {
                     if (item instanceof RenderComponent) {
                         return item.component.instanceName;
                     }
@@ -330,7 +502,7 @@ export class LayoutEngine {
                 }));
             }
             else {
-                this.print(level, "".padStart(level * 4), 'container');
+                this.print(level, "".padStart(level * 4), '- container');
                 this.dumpFrame(item, level + 1);
             }
         });
@@ -347,21 +519,21 @@ export class LayoutEngine {
                 accum.push(item);
             }
             else if (item instanceof RenderComponent) {
-                const instanceName = item.component.instanceName;
+                const { instanceName } = item.component;
                 if (ignoreItems.indexOf(instanceName) === -1) {
-                    const subgraph = subgraphInfo.find(item => {
-                        return item.components.indexOf(instanceName) !== -1;
+                    const withinSubgraph = subgraphInfo.find(subgraphInfo => {
+                        return subgraphInfo.components.indexOf(instanceName) !== -1;
                     });
-                    if (subgraph !== undefined) {
-                        const tmpFrame = new RenderFrame(new Frame(-2), RenderFrameType.Elements);
+                    if (withinSubgraph !== undefined) {
+                        const tmpFrame = new RenderFrame(new Frame(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
                         tmpFrame.subgraphId = instanceName;
                         tmpFrame.innerItems =
-                            subgraph.components.map(instanceName => {
+                            withinSubgraph.components.map(instanceName => {
                                 const [, component,] = graph.node(instanceName);
                                 return component;
                             });
-                        tmpFrame.bounds = subgraph.bounds;
-                        ignoreItems.push(...subgraph.components);
+                        tmpFrame.bounds = withinSubgraph.bounds;
+                        ignoreItems.push(...withinSubgraph.components);
                         accum.push(tmpFrame);
                         elementFrames.push(tmpFrame);
                     }
@@ -372,16 +544,23 @@ export class LayoutEngine {
             }
             return accum;
         }, []);
-        if (frame.type === RenderFrameType.Container) {
+        this.checkAddFrameTitle(frame, elementFrames, textObjects, level);
+        return {
+            elementFrames,
+            textObjects,
+        };
+    }
+    checkAddFrameTitle(frame, elementFrames, textObjects, level) {
+        if (frame.renderType === RenderFrameType.Container) {
             const frameObject = frame.frame;
             const isSheetFrame = frameObject.frameType === FrameType.Sheet;
             if (frameObject.parameters.has(FrameParamKeys.Title) && !isSheetFrame) {
                 const title = frameObject.parameters.get(FrameParamKeys.Title);
-                const tmpFrame = new RenderFrame(new Frame(-2), RenderFrameType.Elements);
+                const tmpFrame = new RenderFrame(new Frame(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
                 tmpFrame.containsTitle = true;
                 tmpFrame.subgraphId = title.replace(/\s/g, "_");
                 const textObject = new RenderText(title);
-                textObject.fontSize = defaultFrameTitleTextSize;
+                textObject.fontSize = numeric(defaultFrameTitleTextSize);
                 textObject.fontWeight = 'bold';
                 textObject.symbol.refreshDrawing();
                 tmpFrame.innerItems.push(textObject);
@@ -392,18 +571,14 @@ export class LayoutEngine {
                     xmax: tmpBox.start[0] + tmpBox.width,
                     ymax: tmpBox.start[1] + tmpBox.height
                 };
-                textObject.x = 0;
-                textObject.y = 0;
+                textObject.x = numeric(0);
+                textObject.y = numeric(0);
                 frame.innerItems.splice(0, 0, tmpFrame);
                 this.printLevel(level, frame, 'added text', tmpFrame);
                 textObjects.push(textObject);
                 elementFrames.splice(0, 0, tmpFrame);
             }
         }
-        return {
-            elementFrames,
-            textObjects,
-        };
     }
     generateLayoutGraph(sequence, nets) {
         let previousNode = null;
@@ -413,161 +588,155 @@ export class LayoutEngine {
             compound: true,
         });
         this.print('sequence length:', sequence.length);
-        const baseRenderFrame = new RenderFrame(new Frame(-1));
-        const frameStack = [baseRenderFrame];
-        const containerFrames = [baseRenderFrame];
-        for (let i = 0; i < sequence.length; i++) {
-            const action = sequence[i][0];
+        const baseFrame = new RenderFrame(new Frame(FixedFrameIds.BaseFrame));
+        const frameStack = [baseFrame];
+        const containerFrames = [baseFrame];
+        sequence.forEach((sequenceStep, index) => {
+            const action = sequenceStep[0];
             let tmpComponent;
-            if (action === SequenceAction.At || action === SequenceAction.To) {
-                this.print(...sequence[i]);
-                const component = sequence[i][1];
-                const pin = sequence[i][2];
-                const tmpInstanceName = component.instanceName;
-                if (!graph.hasNode(tmpInstanceName)) {
-                    this.print('create instance', tmpInstanceName);
-                    let { displayProp = null, widthProp = null, typeProp = null } = component;
-                    let tmpSymbol;
-                    if (displayProp === null &&
-                        component.parameters.get(ParamKeys.net_name) === GlobalNames.gnd) {
-                        displayProp = 'gnd';
-                    }
-                    if (displayProp !== null) {
+            switch (action) {
+                case SequenceAction.To:
+                case SequenceAction.At: {
+                    this.print(...sequenceStep);
+                    const [, component, pin] = sequenceStep;
+                    const tmpInstanceName = component.instanceName;
+                    if (!graph.hasNode(tmpInstanceName)) {
+                        this.print('create instance', tmpInstanceName);
+                        const { displayProp = null, widthProp = null, heightProp = null } = component;
+                        let tmpSymbol;
                         if (displayProp instanceof SymbolDrawing) {
                             tmpSymbol = new SymbolPlaceholder(displayProp);
                             tmpSymbol.drawing.logger = this.logger;
                         }
-                        else if (typeof displayProp === "string") {
-                            tmpSymbol = SymbolFactory(displayProp);
+                        else {
+                            const symbolPinDefinitions = generateLayoutPinDefinition(component);
+                            if (component.typeProp === ComponentTypes.module) {
+                                tmpSymbol = new SymbolCustomModule(symbolPinDefinitions, component.pinsMaxPositions);
+                            }
+                            else {
+                                tmpSymbol = new SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
+                            }
                         }
-                    }
-                    else {
-                        const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        if (component.typeProp === 'module') {
-                            tmpSymbol = new SymbolCustomModule(symbolPinDefinitions);
+                        applyComponentParamsToSymbol(component, tmpSymbol);
+                        if (component.parameters.has(ParamKeys.angle)) {
+                            const value = component.parameters.get(ParamKeys.angle).toNumber();
+                            tmpSymbol.angle = value;
                         }
-                        else {
-                            tmpSymbol = new SymbolCustom(symbolPinDefinitions);
+                        if (component.parameters.has(ParamKeys.flipX)) {
+                            tmpSymbol.flipX =
+                                component.parameters.get(ParamKeys.flipX);
                         }
+                        if (component.parameters.has(ParamKeys.flipY)) {
+                            tmpSymbol.flipY =
+                                component.parameters.get(ParamKeys.flipY);
+                        }
+                        if (tmpSymbol instanceof SymbolCustom) {
+                            if (widthProp) {
+                                tmpSymbol.bodyWidth = milsToMM(widthProp);
+                            }
+                            if (heightProp) {
+                                tmpSymbol.bodyHeight = milsToMM(heightProp);
+                            }
+                        }
+                        tmpSymbol.refreshDrawing();
+                        const { width: useWidth, height: useHeight } = tmpSymbol.size();
+                        tmpComponent = new RenderComponent(component, useWidth, useHeight);
+                        tmpComponent.symbol = tmpSymbol;
+                        graph.setNode(tmpInstanceName, [RenderItemType.Component, tmpComponent, index]);
+                        const currentFrame = frameStack[frameStack.length - 1];
+                        currentFrame && currentFrame.innerItems.push(tmpComponent);
                     }
-                    applyComponentParamsToSymbol(component, tmpSymbol);
-                    let didSetAngle = false;
-                    if (component.parameters.has('angle')) {
-                        didSetAngle = true;
-                        tmpSymbol.angle = component.parameters.get('angle');
-                    }
-                    if (component.parameters.has('flipX')) {
-                        tmpSymbol.flipX =
-                            component.parameters.get('flipX');
-                    }
-                    if (component.parameters.has('flipY')) {
-                        tmpSymbol.flipY =
-                            component.parameters.get('flipY');
-                    }
-                    if (tmpSymbol instanceof SymbolCustom && widthProp) {
-                        tmpSymbol.bodyWidth = milsToMM(widthProp);
-                    }
-                    if (!didSetAngle && component.parameters.has('_addDirection')) {
-                        tmpSymbol.refreshDrawing(false);
-                        tmpSymbol.angle = calculateSymbolAngle(tmpSymbol, component.parameters.get('_addPin'), component.parameters.get('_addDirection'));
+                    if (action === SequenceAction.To && previousNode && previousPin) {
+                        this.setGraphEdge(graph, previousNode, tmpInstanceName, makeEdgeValue(previousNode, previousPin, tmpInstanceName, pin, index));
                     }
-                    tmpSymbol.refreshDrawing();
-                    const { width: useWidth, height: useHeight } = tmpSymbol.size();
-                    tmpComponent = new RenderComponent(component, useWidth, useHeight);
-                    tmpComponent.symbol = tmpSymbol;
-                    graph.setNode(tmpInstanceName, [RenderItemType.Component, tmpComponent, i]);
-                    const currentFrame = frameStack[frameStack.length - 1];
-                    currentFrame && currentFrame.innerItems.push(tmpComponent);
+                    previousNode = tmpInstanceName;
+                    previousPin = pin;
+                    break;
                 }
-                if (action === SequenceAction.To) {
-                    this.setGraphEdge(graph, previousNode, tmpInstanceName, makeEdgeValue(previousNode, previousPin, tmpInstanceName, pin, i));
-                }
-                previousNode = tmpInstanceName;
-                previousPin = pin;
-            }
-            else if (action === SequenceAction.Wire) {
-                const [, wireId, wireSegments] = sequence[i];
-                const wire = new RenderWire(0, 0, wireSegments);
-                wire.id = wireId;
-                let useNetName = null;
-                if (previousNode !== null) {
-                    const [prevNodeType, prevNodeItem] = graph.node(previousNode);
-                    if (prevNodeType === RenderItemType.Component) {
-                        const matchingItem = nets.find(([comp, pin]) => {
-                            return comp.instanceName === previousNode && pin === previousPin;
-                        });
-                        useNetName = matchingItem !== undefined ? matchingItem[2].name : null;
-                    }
-                    else if (prevNodeType === RenderItemType.Wire) {
-                        useNetName = prevNodeItem.netName;
+                case SequenceAction.Wire: {
+                    const [, wireId, wireSegments] = sequenceStep;
+                    const wire = new RenderWire(numeric(0), numeric(0), wireSegments);
+                    wire.id = wireId;
+                    let useNetName = null;
+                    if (previousNode !== null) {
+                        const [prevNodeType, prevNodeItem] = graph.node(previousNode);
+                        if (prevNodeType === RenderItemType.Component) {
+                            const matchingItem = nets.find(([comp, pin]) => {
+                                return comp.instanceName === previousNode && pin === previousPin;
+                            });
+                            useNetName = matchingItem !== undefined ? matchingItem[2].name : null;
+                        }
+                        else if (prevNodeType === RenderItemType.Wire) {
+                            useNetName = prevNodeItem.netName;
+                        }
                     }
+                    wire.netName = useNetName;
+                    const wireName = getWireName(wire.id);
+                    graph.setNode(wireName, [RenderItemType.Wire, wire, index]);
+                    this.setGraphEdge(graph, previousNode, wireName, makeEdgeValue(previousNode, previousPin, wireName, 0, index));
+                    previousNode = wireName;
+                    previousPin = 1;
+                    const wireSegmentsInfo = wireSegments.map(item => {
+                        const tmp = {
+                            direction: item.direction,
+                            value: item.value,
+                        };
+                        if (item.valueXY) {
+                            tmp.valueXY = item.valueXY;
+                        }
+                        if (item.until) {
+                            tmp.until = [item.until[0].toString(), item.until[1]];
+                        }
+                        return tmp;
+                    });
+                    this.print(SequenceAction.Wire, wireId, JSON.stringify(wireSegmentsInfo));
+                    break;
                 }
-                wire.netName = useNetName;
-                const wireName = getWireName(wire.id);
-                graph.setNode(wireName, [RenderItemType.Wire, wire, i]);
-                this.setGraphEdge(graph, previousNode, wireName, makeEdgeValue(previousNode, previousPin, wireName, 0, i));
-                previousNode = wireName;
-                previousPin = 1;
-                const wireSegmentsInfo = wireSegments.map(item => {
-                    const tmp = {
-                        direction: item.direction,
-                        value: item.value,
-                    };
-                    if (item.valueXY) {
-                        tmp.valueXY = item.valueXY;
+                case SequenceAction.WireJump: {
+                    this.print(...sequenceStep);
+                    const wireId = sequenceStep[1];
+                    const wireName = getWireName(wireId);
+                    let wirePin = 1;
+                    if (sequenceStep.length === 3) {
+                        wirePin = sequenceStep[2];
                     }
-                    if (item.until) {
-                        tmp.until = [item.until[0].toString(), item.until[1]];
-                    }
-                    return tmp;
-                });
-                this.print(SequenceAction.Wire, wireId, JSON.stringify(wireSegmentsInfo));
-            }
-            else if (action === SequenceAction.WireJump) {
-                this.print(...sequence[i]);
-                const wireId = sequence[i][1];
-                const wireName = getWireName(wireId);
-                let wirePin = 1;
-                if (sequence[i].length === 3) {
-                    wirePin = sequence[i][2];
+                    previousNode = wireName;
+                    previousPin = wirePin;
+                    break;
                 }
-                previousNode = wireName;
-                previousPin = wirePin;
-            }
-            else if (action === SequenceAction.Frame) {
-                const [, frameObject, frameAction] = sequence[i];
-                if (frameAction === FrameAction.Enter) {
-                    const prevFrame = frameStack[frameStack.length - 1];
-                    const newFrame = new RenderFrame(frameObject);
-                    if (frameObject.parameters.has(FrameParamKeys.Direction)) {
-                        newFrame.direction =
-                            frameObject.parameters.get(FrameParamKeys.Direction);
-                    }
-                    if (frameObject.parameters.has(FrameParamKeys.Padding)) {
-                        newFrame.padding =
-                            frameObject.parameters.get(FrameParamKeys.Padding);
-                    }
-                    if (frameObject.parameters.has(FrameParamKeys.Border)) {
-                        newFrame.borderWidth =
-                            frameObject.parameters.get(FrameParamKeys.Border);
-                    }
-                    if (frameObject.parameters.has(FrameParamKeys.Width)) {
-                        newFrame.width =
-                            frameObject.parameters.get(FrameParamKeys.Width);
+                case SequenceAction.Frame: {
+                    const [, frameObject, frameAction] = sequenceStep;
+                    if (frameAction === FrameAction.Enter) {
+                        const prevFrame = frameStack[frameStack.length - 1];
+                        const newFrame = new RenderFrame(frameObject);
+                        if (frameObject.parameters.has(FrameParamKeys.Direction)) {
+                            newFrame.direction =
+                                frameObject.parameters.get(FrameParamKeys.Direction);
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Padding)) {
+                            newFrame.padding = milsToMM(frameObject.parameters.get(FrameParamKeys.Padding));
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Border)) {
+                            newFrame.borderWidth =
+                                frameObject.parameters.get(FrameParamKeys.Border);
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Width)) {
+                            newFrame.width = milsToMM(frameObject.parameters.get(FrameParamKeys.Width));
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Height)) {
+                            newFrame.height = milsToMM(frameObject.parameters.get(FrameParamKeys.Height));
+                        }
+                        containerFrames.push(newFrame);
+                        frameStack.push(newFrame);
+                        prevFrame && prevFrame.innerItems.push(newFrame);
                     }
-                    if (frameObject.parameters.has(FrameParamKeys.Height)) {
-                        newFrame.height =
-                            frameObject.parameters.get(FrameParamKeys.Height);
+                    else if (frameAction === FrameAction.Exit) {
+                        frameStack.pop();
                     }
-                    containerFrames.push(newFrame);
-                    frameStack.push(newFrame);
-                    prevFrame && prevFrame.innerItems.push(newFrame);
-                }
-                else if (frameAction === FrameAction.Exit) {
-                    frameStack.pop();
+                    break;
                 }
             }
-        }
+        });
         return {
             graph,
             containerFrames,
@@ -582,10 +751,10 @@ export class LayoutEngine {
         this.print('===== placing subgraphs =====');
         this.print('number of subgraphs: ', subGraphs.length);
         const subgraphInfo = [];
-        subGraphs.forEach(innerGraph => {
+        subGraphs.forEach(subGraph => {
             let smallestNodeIdLevel = Number.POSITIVE_INFINITY;
-            let smallestNodeId = null;
-            innerGraph.forEach(nodeId => {
+            let smallestNodeId = "";
+            subGraph.forEach(nodeId => {
                 const [, , sequenceId] = graph.node(nodeId);
                 if (sequenceId < smallestNodeIdLevel) {
                     smallestNodeIdLevel = sequenceId;
@@ -628,12 +797,7 @@ export class LayoutEngine {
             }
             return accum;
         }, []);
-        if (this.placeSubgraphVersion === 1) {
-            this.placeSubgraph(graph, firstNodeId, subgraphEdges);
-        }
-        else if (this.placeSubgraphVersion === 2) {
-            this.placeSubgraphV2(graph, firstNodeId, subgraphEdges);
-        }
+        this.placeSubgraphV2(graph, firstNodeId, subgraphEdges);
     }
     placeSubgraphV2(graph, firstNodeId, subgraphEdges) {
         let firstNodePlaced = false;
@@ -651,7 +815,7 @@ export class LayoutEngine {
         }
         if (subgraphEdges.length === 0) {
             const [, node1] = graph.node(firstNodeId);
-            this.placeNodeAtPosition(0, 0, node1, 1);
+            this.placeNodeAtPosition(numeric(0), numeric(0), node1, 1);
             return;
         }
         let fixedNode;
@@ -664,7 +828,7 @@ export class LayoutEngine {
             const [, node2] = graph.node(nodeId2);
             if (nodeId1 === firstNodeId && !firstNodePlaced) {
                 this.print('first node placed at origin');
-                this.placeNodeAtPosition(0, 0, node1, pin1);
+                this.placeNodeAtPosition(numeric(0), numeric(0), node1, pin1);
                 firstNodePlaced = true;
                 node1.isFloating = false;
                 originNodes.push(node1);
@@ -687,7 +851,7 @@ export class LayoutEngine {
                 originNodes.push(node1);
                 originNodeGroups.set(node1.toString(), [node1]);
                 this.print('creating new origin node at', node1);
-                this.placeNodeAtPosition(0, 0, node1, pin1);
+                this.placeNodeAtPosition(numeric(0), numeric(0), node1, pin1);
                 node1.isFloating = false;
                 fixedNode = node1;
                 fixedNodePin = pin1;
@@ -704,7 +868,7 @@ export class LayoutEngine {
                 else {
                     const [x1, y1] = getNodePositionAtPin(node1, pin1);
                     const [x2, y2] = getNodePositionAtPin(node2, pin2);
-                    if (x1 !== x2 && y1 !== y2) {
+                    if (!x1.eq(x2) && !y1.eq(y2)) {
                         if (node1 instanceof RenderWire &&
                             node2 instanceof RenderComponent) {
                             const refdes = node2.component.assignedRefDes;
@@ -781,8 +945,8 @@ export class LayoutEngine {
         this.print('merging origin node groups, fixed:', keepOriginNode, ', other:', otherOriginNode);
         const [x, y] = getNodePositionAtPin(fixedNode, fixedNodePin);
         const [otherNodeOriginX, otherNodeOriginY] = getNodePositionAtPin(mergedNode, mergedNodePin);
-        const offsetX = x - otherNodeOriginX;
-        const offsetY = y - otherNodeOriginY;
+        const offsetX = x.sub(otherNodeOriginX);
+        const offsetY = y.sub(otherNodeOriginY);
         this.print('offset of other origin:', offsetX, offsetY);
         const otherItemsLinkedToOriginNode = originNodeGroups.get(otherOriginNode);
         this.print('nodes in other origin:', otherItemsLinkedToOriginNode);
@@ -796,68 +960,15 @@ export class LayoutEngine {
         this.print('removed other origin');
         this.print('merge completed');
     }
-    placeSubgraph(graph, firstNodeId, subgraphEdges) {
-        let firstNodePlaced = false;
-        subgraphEdges.forEach(edge => {
-            const [nodeId1, pin1, nodeId2, pin2] = graph.edge(edge);
-            const [, node1] = graph.node(nodeId1);
-            const [, node2] = graph.node(nodeId2);
-            if (nodeId1 === firstNodeId && !firstNodePlaced) {
-                this.print('first node placed at origin');
-                this.placeNodeAtPosition(0, 0, node1, pin1);
-                firstNodePlaced = true;
-                node1.isFloating = false;
-            }
-            let fixedNode;
-            let fixedNodePin;
-            let floatingNode;
-            let floatingNodePin;
-            this.print('edge:', '[', node1, pin1, node1.isFloating, ']', '[', node2, pin2, node2.isFloating, ']');
-            if (!node1.isFloating && node2.isFloating) {
-                fixedNode = node1;
-                fixedNodePin = pin1;
-                floatingNode = node2;
-                floatingNodePin = pin2;
-            }
-            else if (node1.isFloating && !node2.isFloating) {
-                fixedNode = node2;
-                fixedNodePin = pin2;
-                floatingNode = node1;
-                floatingNodePin = pin1;
-            }
-            else if (node1.isFloating && node2.isFloating) {
-                this.print('both nodes are floating', node1, 'pin', pin1, 'and', node2, 'pin', pin2);
-                node1.floatingRelativeTo.push([pin1, nodeId2, pin2]);
-                node2.floatingRelativeTo.push([pin2, nodeId1, pin1]);
-            }
-            if (fixedNode && floatingNode) {
-                this.print('place floating node', floatingNode, 'pin', floatingNodePin, 'to', fixedNode, 'pin', fixedNodePin);
-                const [x, y] = getNodePositionAtPin(fixedNode, fixedNodePin);
-                this.placeNodeAtPosition(x, y, floatingNode, floatingNodePin);
-                floatingNode.isFloating = false;
-                this.placeFloatingItems(graph, floatingNode);
-            }
-            [node1, node2].forEach(item => {
-                if (item instanceof RenderWire) {
-                    if (item.isEndAutoLength()) {
-                        const [instance, pin] = item.getEndAuto();
-                        const [, targetNode] = graph.node(instance.instanceName);
-                        const [untilX, untilY] = getNodePositionAtPin(targetNode, pin);
-                        item.setEndAuto(untilX, untilY);
-                    }
-                }
-            });
-        });
-    }
     translateNodeBy(offsetX, offsetY, item) {
-        item.x += offsetX;
-        item.y += offsetY;
+        item.x = item.x.add(offsetX);
+        item.y = item.y.add(offsetY);
     }
     placeNodeAtPosition(fromX, fromY, item, pin, depth = 0) {
         if (item instanceof RenderComponent) {
             const pinPosition = item.symbol.pinPosition(pin);
-            item.x = fromX - pinPosition.x;
-            item.y = fromY - pinPosition.y;
+            item.x = fromX.sub(pinPosition.x);
+            item.y = fromY.sub(pinPosition.y);
         }
         else if (item instanceof RenderWire) {
             if (pin === 0) {
@@ -866,8 +977,8 @@ export class LayoutEngine {
             }
             else {
                 const wireEnd = item.getWireEnd();
-                item.x = fromX - wireEnd.x;
-                item.y = fromY - wireEnd.y;
+                item.x = fromX.sub(wireEnd.x);
+                item.y = fromY.sub(wireEnd.y);
             }
         }
         this.print(this.padLevel(depth), 'place', item, 'pin', pin, 'at', item.x, item.y);
@@ -906,12 +1017,12 @@ export class LayoutEngine {
     }
 }
 function getNodePositionAtPin(item, pin) {
-    let x = 0;
-    let y = 0;
+    let x = numeric(0);
+    let y = numeric(0);
     if (item instanceof RenderComponent) {
         const pinPosition = item.symbol.pinPosition(pin);
-        x = item.x + pinPosition.x;
-        y = item.y + pinPosition.y;
+        x = item.x.add(pinPosition.x);
+        y = item.y.add(pinPosition.y);
     }
     else if (item instanceof RenderWire) {
         if (pin === 0) {
@@ -920,8 +1031,8 @@ function getNodePositionAtPin(item, pin) {
         }
         else {
             const wireEnd = item.getWireEnd();
-            x = item.x + wireEnd.x;
-            y = item.y + wireEnd.y;
+            x = item.x.add(wireEnd.x);
+            y = item.y.add(wireEnd.y);
         }
     }
     return [
@@ -954,7 +1065,7 @@ function generateLayoutPinDefinition(component) {
             const pinPosition = Math.floor(i / 2);
             const pin = pins.get(existingPinIds[i]);
             symbolPinDefinitions.push({
-                side: (i % 2 === 0) ? "left" : "right",
+                side: (i % 2 === 0) ? SymbolPinSide.Left : SymbolPinSide.Right,
                 pinId: existingPinIds[i],
                 text: pin.name,
                 position: pinPosition,
@@ -973,24 +1084,24 @@ function generateLayoutPinDefinition(component) {
                 useItems = [...items];
             }
             useItems.forEach(pinId => {
-                if (existingPinIds.indexOf(pinId) !== -1) {
-                    const pin = pins.get(pinId);
-                    symbolPinDefinitions.push({
-                        side: key,
-                        pinId: pinId,
-                        text: pin.name,
-                        position: pin.position,
-                        pinType: pin.pinType,
-                    });
-                    addedPins.push(pinId);
+                if (pinId instanceof NumericValue) {
+                    const pinIdValue = pinId.toNumber();
+                    if (existingPinIds.indexOf(pinIdValue) !== -1) {
+                        const pin = pins.get(pinIdValue);
+                        symbolPinDefinitions.push({
+                            side: key,
+                            pinId: pinIdValue,
+                            text: pin.name,
+                            position: pin.position,
+                            pinType: pin.pinType,
+                        });
+                        addedPins.push(pinIdValue);
+                    }
                 }
             });
         }
-        const unplacedPins = [];
-        existingPinIds.forEach(item => {
-            if (addedPins.indexOf(item) === -1) {
-                unplacedPins.push(item);
-            }
+        const unplacedPins = existingPinIds.filter(pinId => {
+            return addedPins.indexOf(pinId) === -1;
         });
         if (unplacedPins.length > 0) {
             throw "'arrange' property is defined, but not all pins are specified: " + unplacedPins.join(",");
@@ -1031,21 +1142,21 @@ export function getBounds(components, wires, junctions, frames) {
         const bbox = item.symbol.drawing.getBoundingBox();
         const [x1, y1] = bbox.start;
         const [x2, y2] = bbox.end;
-        points.push([x1 + item.x, y1 + item.y]);
-        points.push([x2 + item.x, y2 + item.y]);
+        points.push([x1 + item.x.toNumber(), y1 + item.y.toNumber()]);
+        points.push([x2 + item.x.toNumber(), y2 + item.y.toNumber()]);
     });
     wires.forEach(wire => {
         wire.points.forEach(point => {
-            points.push([wire.x + point.x, wire.y + point.y]);
+            points.push([wire.x.add(point.x).toNumber(), wire.y.add(point.y).toNumber()]);
         });
     });
     junctions.forEach(item => {
-        points.push([item.x, item.y]);
+        points.push([item.x.toNumber(), item.y.toNumber()]);
     });
     frames.forEach(item => {
         const { width, height } = getBoundsSize(item.bounds);
-        points.push([item.x, item.y]);
-        points.push([item.x + width, item.y + height]);
+        points.push([item.x.toNumber(), item.y.toNumber()]);
+        points.push([item.x.toNumber() + width, item.y.toNumber() + height]);
     });
     return getBoundsFromPoints(points);
 }
@@ -1061,8 +1172,8 @@ function getBoundsFromPoints(points) {
     };
 }
 export class RenderObject {
-    x = -1;
-    y = -1;
+    x = numeric(-1);
+    y = numeric(-1);
     isFloating = true;
     floatingRelativeTo = [];
 }
@@ -1105,7 +1216,7 @@ export class RenderWire extends RenderObject {
                 tmpX += useValue;
             }
             else if (direction === WireAutoDirection.Auto || direction === WireAutoDirection.Auto_) {
-                const { valueXY = [0, 0] } = segment;
+                const { valueXY = [numeric(0), numeric(0)] } = segment;
                 const tmpPoints = this.getAutoPoints(valueXY, direction);
                 tmpPoints.forEach(point => {
                     if (point[0] !== 0 || point[1] !== 0) {
@@ -1123,8 +1234,8 @@ export class RenderWire extends RenderObject {
         this.points = points;
     }
     getAutoPoints(value, direction) {
-        const valueX = roundValue(value[0]);
-        const valueY = roundValue(value[1]);
+        const valueX = roundValue(value[0]).toNumber();
+        const valueY = roundValue(value[1]).toNumber();
         const inQuadrant = Geometry.getQuadrant(valueX, valueY);
         const [dx, dy] = [valueX, valueY];
         if (direction === WireAutoDirection.Auto) {
@@ -1180,16 +1291,16 @@ export class RenderWire extends RenderObject {
                 useValue = value;
             }
             if (direction === Direction.Down) {
-                tmpY += useValue;
+                tmpY = tmpY.add(useValue);
             }
             else if (direction === Direction.Up) {
-                tmpY -= useValue;
+                tmpY = tmpY.sub(useValue);
             }
             else if (direction === Direction.Left) {
-                tmpX -= useValue;
+                tmpX = tmpX.sub(useValue);
             }
             else if (direction === Direction.Right) {
-                tmpX += useValue;
+                tmpX = tmpX.add(useValue);
             }
         });
         let useValue = null;
@@ -1197,22 +1308,22 @@ export class RenderWire extends RenderObject {
         const lastSegment = this.segments[this.segments.length - 1];
         switch (lastSegment.direction) {
             case Direction.Left:
-                useValue = tmpX - untilX;
+                useValue = tmpX.sub(untilX);
                 break;
             case Direction.Right:
-                useValue = untilX - tmpX;
+                useValue = untilX.sub(tmpX);
                 break;
             case Direction.Up:
-                useValue = untilY - tmpY;
+                useValue = untilY.sub(tmpY);
                 break;
             case Direction.Down:
-                useValue = tmpY - untilY;
+                useValue = tmpY.sub(untilY);
                 break;
             case WireAutoDirection.Auto:
             case WireAutoDirection.Auto_:
                 valueXY = [
-                    untilX - tmpX,
-                    untilY - tmpY,
+                    untilX.sub(tmpX),
+                    untilY.sub(tmpY),
                 ];
                 useValue = 0;
                 break;
@@ -1250,7 +1361,7 @@ export class RenderComponent extends RenderObject {
 }
 export class RenderText extends RenderObject {
     symbol;
-    _fontSize = 12;
+    _fontSize = numeric(12);
     _fontWeight = 'regular';
     get fontSize() {
         return this._fontSize;
@@ -1279,28 +1390,28 @@ export class RenderFrame extends RenderObject {
     translateY = 0;
     padding = milsToMM(100);
     gap = milsToMM(100);
+    borderWidth = numeric(5);
     direction = FramePlotDirection.Column;
-    borderWidth = 5;
     width = null;
     height = null;
-    size = null;
     subgraphId = "";
-    type;
+    renderType;
     containsTitle = false;
     constructor(frame, type = RenderFrameType.Container) {
         super();
         this.frame = frame;
-        this.type = type;
+        this.renderType = type;
     }
     toString() {
         let name = "";
-        if (this.type === RenderFrameType.Container) {
+        if (this.renderType === RenderFrameType.Container) {
             name = 'container_' + this.frame.frameId;
         }
-        else if (this.type === RenderFrameType.Elements) {
+        else if (this.renderType === RenderFrameType.Elements) {
             name = 'elements_' + this.subgraphId;
         }
-        return name + ": " + this.x + "," + this.y + " bounds:" + printBounds(this.bounds);
+        return name + ": " + this.x + "," + this.y
+            + " bounds:" + (this.bounds && printBounds(this.bounds));
     }
 }
 export var RenderFrameType;
@@ -1325,7 +1436,7 @@ export function CalculatePinPositions(component) {
     }
     else {
         const symbolPinDefinitions = generateLayoutPinDefinition(component);
-        tmpSymbol = new SymbolCustom(symbolPinDefinitions);
+        tmpSymbol = new SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
     }
     applyComponentParamsToSymbol(component, tmpSymbol);
     tmpSymbol.refreshDrawing();
@@ -1339,9 +1450,17 @@ export function ExtractDrawingRects(drawing) {
     return drawing.getCommands().filter(item => {
         return (item[0] === PlaceHolderCommands.rect);
     }).map(item => {
+        const map = item[2];
+        let className = undefined;
+        if (map.has('class')) {
+            className = map.get('class');
+        }
         return {
+            x: item[1][0],
+            y: item[1][1],
             width: item[1][2],
             height: item[1][3],
+            className
         };
     });
 }