circuitscript 0.1.0 → 0.1.3

package/dist/cjs/layout.js

@@ -11,9 +11,9 @@ const Frame_js_1 = require("./objects/Frame.js");
 const utils_js_1 = require("./utils.js");
 const types_js_1 = require("./objects/types.js");
 const helpers_js_1 = require("./helpers.js");
+const ParamDefinition_js_1 = require("./objects/ParamDefinition.js");
 class LayoutEngine {
     constructor(options = { showBaseFrame: false }) {
-        this.placeSubgraphVersion = 2;
         this.layoutWarnings = [];
         this.showBaseFrame = false;
         this.logger = new logger_js_1.Logger();
@@ -115,8 +115,8 @@ 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),
                     };
                 });
             });
@@ -127,7 +127,7 @@ class LayoutEngine {
                 intersectPoints,
             });
             intersectPoints.forEach(([x, y]) => {
-                junctions.push(new RenderJunction(x, y));
+                junctions.push(new RenderJunction((0, ParamDefinition_js_1.numeric)(x), (0, ParamDefinition_js_1.numeric)(y)));
             });
         }
         return {
@@ -137,21 +137,21 @@ class LayoutEngine {
     }
     placeFrames(graph, subgraphInfo, frameObjects) {
         const baseFrame = frameObjects[0];
-        baseFrame.padding = 0;
-        baseFrame.borderWidth = 0;
+        baseFrame.padding = (0, ParamDefinition_js_1.numeric)(0);
+        baseFrame.borderWidth = (0, ParamDefinition_js_1.numeric)(0);
         if (this.showBaseFrame) {
-            baseFrame.borderWidth = 5;
-            baseFrame.width = 11692 - 400 * 2;
-            baseFrame.height = 8267 - 400 * 2;
+            baseFrame.borderWidth = (0, ParamDefinition_js_1.numeric)(5);
+            baseFrame.width = (0, ParamDefinition_js_1.numeric)(11692 - 400 * 2);
+            baseFrame.height = (0, ParamDefinition_js_1.numeric)(8267 - 400 * 2);
         }
-        baseFrame.x = 0;
-        baseFrame.y = 0;
-        let textObjects = [];
-        let elementFrames = [];
+        baseFrame.x = (0, ParamDefinition_js_1.numeric)(0);
+        baseFrame.y = (0, ParamDefinition_js_1.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;
@@ -176,10 +176,10 @@ 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);
             }
@@ -191,18 +191,20 @@ class LayoutEngine {
         const innerItems = frame.innerItems;
         innerItems.forEach(innerFrame => {
             if (innerFrame.frame.frameType === globals_js_1.FrameType.Sheet) {
-                innerFrame.x = 0;
-                innerFrame.y = 0;
+                innerFrame.x = (0, ParamDefinition_js_1.numeric)(0);
+                innerFrame.y = (0, ParamDefinition_js_1.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 {
@@ -214,11 +216,10 @@ class LayoutEngine {
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
         const gridSize = globals_js_1.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 = (0, utils_js_1.resizeToNearestGrid)(innerFrame.bounds, gridSize);
                 innerFrame.translateX = innerFrame.bounds.xmin;
                 innerFrame.translateY = innerFrame.bounds.ymin;
@@ -232,10 +233,14 @@ class LayoutEngine {
             const { width } = (0, utils_js_1.getBoundsSize)(item);
             return width;
         }));
+        const maxHeight = Math.max(...frameSizes.map(item => {
+            const { height } = (0, utils_js_1.getBoundsSize)(item);
+            return height;
+        }));
         let accumRowWidth = 0;
-        let titleFrameWidth = null;
+        let titleFrameWidth = 0;
         const inRowShouldCenterInnerFrames = true;
-        if (frame.direction === Frame_js_1.FramePlotDirection.Row) {
+        if (frameDirection === Frame_js_1.FramePlotDirection.Row) {
             accumRowWidth = frameSizes.reduce((accum, item, index) => {
                 const { width } = (0, utils_js_1.getBoundsSize)(item);
                 if (frame.innerItems[index].containsTitle) {
@@ -243,85 +248,252 @@ 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 = (0, ParamDefinition_js_1.numeric)(0);
+        let frameHeight = (0, ParamDefinition_js_1.numeric)(0);
+        let frameXMin = (0, ParamDefinition_js_1.numeric)(0);
+        let frameYMin = (0, ParamDefinition_js_1.numeric)(0);
+        const frameParams = frame.frame.parameters;
+        const avoidAreas = [];
+        if (frameParams.has(Frame_js_1.FrameParamKeys.SheetType)) {
+            const frameComponent = frameParams.get(Frame_js_1.FrameParamKeys.SheetType);
+            const frameDrawing = frameComponent.displayProp;
+            frameDrawing.variables = (0, utils_js_1.combineMaps)(frameComponent.parameters, frameParams);
+            const rects = ExtractDrawingRects(frameDrawing);
+            const drawableRect = rects.find(rect => rect.className === 'plot-area');
+            let frameMinX = (0, ParamDefinition_js_1.numeric)(0);
+            let frameMinY = (0, ParamDefinition_js_1.numeric)(0);
+            if (drawableRect) {
+                frameMinX = (0, helpers_js_1.milsToMM)(drawableRect.x);
+                frameMinY = (0, helpers_js_1.milsToMM)(drawableRect.y);
+                frameWidth = (0, helpers_js_1.milsToMM)(drawableRect.width);
+                frameHeight = (0, helpers_js_1.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([
+                    (0, helpers_js_1.milsToMM)(x1).sub(frameMinX).toNumber(),
+                    (0, helpers_js_1.milsToMM)(y1).sub(frameMinY).toNumber(),
+                    (0, helpers_js_1.milsToMM)(x2).sub(frameMinX).toNumber(),
+                    (0, helpers_js_1.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 === Frame_js_1.FramePlotDirection.Row &&
+        if (frameDirection === Frame_js_1.FramePlotDirection.Row &&
             inRowShouldCenterInnerFrames &&
             titleFrameWidth !== null && titleFrameWidth > accumRowWidth) {
-            centeredOffsetX = (0, utils_js_1.toNearestGrid)(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
+            centeredOffsetX =
+                (0, utils_js_1.toNearestGrid)(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
         }
-        innerFrames.forEach(innerFrame => {
-            const { width: frameWidth, height: frameHeight } = (0, utils_js_1.getBoundsSize)(innerFrame.bounds);
+        let title_align = geometry_js_1.HorizontalAlign.Middle;
+        if (frameParams.has(Frame_js_1.FrameParamKeys.TitleAlign)) {
+            title_align = frameParams.get(Frame_js_1.FrameParamKeys.TitleAlign);
+        }
+        let accumX = (0, ParamDefinition_js_1.numeric)(0);
+        let accumY = (0, ParamDefinition_js_1.numeric)(0);
+        innerFrames.forEach((innerFrame, index) => {
+            const { width: innerFrameWidth, height: innerFrameHeight } = (0, utils_js_1.getBoundsSize)(innerFrame.bounds);
+            let arrangeLineAttempts = 0;
+            const maxAttempts = 10;
+            let innerFrameX = (0, ParamDefinition_js_1.numeric)(0);
+            let innerFrameY = (0, ParamDefinition_js_1.numeric)(0);
             if (innerFrame.containsTitle) {
-                innerFrame.x = offsetX + accumX + (0, utils_js_1.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 === Frame_js_1.FramePlotDirection.Column) {
-                    innerFrame.x = offsetX + accumX + (0, utils_js_1.toNearestGrid)(maxWidth / 2 - frameWidth / 2, gridSize);
-                    innerFrame.y = offsetY + accumY;
-                    accumY += (frameHeight + frame.gap);
+                if (frameDirection === Frame_js_1.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 => (0, utils_js_1.areasOverlap)(frameArea, area));
+                        const doesOverlapAreasToAvoid = overlaps.length > 0;
+                        if (doesExceedFrameHeight || doesOverlapAreasToAvoid) {
+                            innerFrameY = offsetY;
+                            const nextX = (0, ParamDefinition_js_1.numeric)(xmax).sub(offsetX).add(frame.gap);
+                            innerFrameX = offsetX.add(nextX);
+                            accumY = (0, ParamDefinition_js_1.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 === Frame_js_1.FramePlotDirection.Row) {
-                    innerFrame.x = offsetX + centeredOffsetX + accumX;
-                    innerFrame.y = offsetY + accumY;
-                    accumX += (frameWidth + frame.gap);
+                else if (frameDirection === Frame_js_1.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 => (0, utils_js_1.areasOverlap)(frameArea, area));
+                        const doesOverlapAreasToAvoid = overlaps.length > 0;
+                        if (doesExceedFrameWidth || doesOverlapAreasToAvoid) {
+                            innerFrameX = offsetX.add(centeredOffsetX);
+                            const { ymax } = getBoundsFromPoints(boundPoints);
+                            const nextY = (0, ParamDefinition_js_1.numeric)(ymax).sub(offsetY).add(frame.gap);
+                            innerFrameY = offsetY.add(nextY);
+                            accumX = (0, ParamDefinition_js_1.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 = (0, utils_js_1.resizeBounds)(getBoundsFromPoints(boundPoints), frame.padding);
-        if (frame.frame.parameters.has(Frame_js_1.FrameParamKeys.SheetType)) {
-            const frameComponent = frame.frame.parameters.get(Frame_js_1.FrameParamKeys.SheetType);
-            const frameDrawing = frameComponent.displayProp;
-            frameDrawing.variables = (0, utils_js_1.combineMaps)(frameComponent.parameters, frame.frame.parameters);
-            const rects = ExtractDrawingRects(frameDrawing);
-            let frameWidth = 0;
-            let frameHeight = 0;
-            if (rects[1]) {
-                frameWidth = (0, helpers_js_1.milsToMM)(rects[1].width);
-                frameHeight = (0, helpers_js_1.milsToMM)(rects[1].height);
-            }
-            const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
-            const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
-            const frameOffsetX = (0, utils_js_1.toNearestGrid)((frameWidth - contentsWidth) / 2, gridSize);
-            const frameOffsetY = (0, utils_js_1.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 = (0, utils_js_1.resizeBounds)(getBoundsFromPoints(boundPoints), frame.padding.toNumber());
+        const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
+        const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
+        let hAlign = geometry_js_1.HorizontalAlign.Middle;
+        let vAlign = geometry_js_1.VerticalAlign.Middle;
+        if (frameParams.has(Frame_js_1.FrameParamKeys.HorizontalAlign)) {
+            hAlign =
+                frameParams.get(Frame_js_1.FrameParamKeys.HorizontalAlign);
+        }
+        if (frameParams.has(Frame_js_1.FrameParamKeys.VerticalAlign)) {
+            vAlign =
+                frameParams.get(Frame_js_1.FrameParamKeys.VerticalAlign);
+        }
+        if (frameParams.has(Frame_js_1.FrameParamKeys.SheetType)) {
+            frameXMin = (0, ParamDefinition_js_1.numeric)(0);
+            frameYMin = (0, ParamDefinition_js_1.numeric)(0);
         }
         else {
-            frame.bounds = contentsBounds;
+            frameXMin = (0, ParamDefinition_js_1.numeric)(contentsBounds.xmin);
+            frameYMin = (0, ParamDefinition_js_1.numeric)(contentsBounds.ymin);
+        }
+        if (frameWidth.toNumber() === 0) {
+            frameWidth = (0, ParamDefinition_js_1.numeric)(contentsWidth);
+        }
+        if (frameHeight.toNumber() === 0) {
+            frameHeight = (0, ParamDefinition_js_1.numeric)(contentsHeight);
+        }
+        const titleFrame = innerFrames.find(frame => {
+            return frame.containsTitle;
+        });
+        if (titleFrame) {
+            const { width: innerFrameWidth } = (0, utils_js_1.getBoundsSize)(titleFrame.bounds);
+            let titleOffset = 0;
+            switch (title_align) {
+                case geometry_js_1.HorizontalAlign.Left:
+                    titleOffset = 0;
+                    break;
+                case geometry_js_1.HorizontalAlign.Middle:
+                    titleOffset = (0, utils_js_1.toNearestGrid)(widthForTitle / 2 - innerFrameWidth / 2, gridSize);
+                    break;
+                case geometry_js_1.HorizontalAlign.Right:
+                    titleOffset = frameWidth.toNumber() - innerFrameWidth;
+                    break;
+            }
+            titleFrame.x = titleFrame.x.add(titleOffset);
+        }
+        let frameOffsetX = 0;
+        let frameOffsetY = 0;
+        switch (hAlign) {
+            case geometry_js_1.HorizontalAlign.Left:
+                frameOffsetX = 0;
+                break;
+            case geometry_js_1.HorizontalAlign.Middle:
+                frameOffsetX = (0, utils_js_1.toNearestGrid)((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
+                break;
+            case geometry_js_1.HorizontalAlign.Right:
+                frameOffsetX = (0, utils_js_1.toNearestGrid)(frameWidth.toNumber() - contentsWidth, gridSize);
+                break;
+        }
+        switch (vAlign) {
+            case geometry_js_1.VerticalAlign.Top:
+                frameOffsetY = 0;
+                break;
+            case geometry_js_1.VerticalAlign.Middle:
+                frameOffsetY = (0, utils_js_1.toNearestGrid)((frameHeight.toNumber() - contentsHeight) / 2, gridSize);
+                break;
+            case geometry_js_1.VerticalAlign.Bottom:
+                frameOffsetY = (0, utils_js_1.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;
                     }
@@ -332,7 +504,7 @@ class LayoutEngine {
                 }));
             }
             else {
-                this.print(level, "".padStart(level * 4), 'container');
+                this.print(level, "".padStart(level * 4), '- container');
                 this.dumpFrame(item, level + 1);
             }
         });
@@ -349,21 +521,21 @@ 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_js_1.Frame(-2), RenderFrameType.Elements);
+                    if (withinSubgraph !== undefined) {
+                        const tmpFrame = new RenderFrame(new Frame_js_1.Frame(Frame_js_1.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);
                     }
@@ -374,16 +546,23 @@ 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 === globals_js_1.FrameType.Sheet;
             if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Title) && !isSheetFrame) {
                 const title = frameObject.parameters.get(Frame_js_1.FrameParamKeys.Title);
-                const tmpFrame = new RenderFrame(new Frame_js_1.Frame(-2), RenderFrameType.Elements);
+                const tmpFrame = new RenderFrame(new Frame_js_1.Frame(Frame_js_1.FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
                 tmpFrame.containsTitle = true;
                 tmpFrame.subgraphId = title.replace(/\s/g, "_");
                 const textObject = new RenderText(title);
-                textObject.fontSize = globals_js_1.defaultFrameTitleTextSize;
+                textObject.fontSize = (0, ParamDefinition_js_1.numeric)(globals_js_1.defaultFrameTitleTextSize);
                 textObject.fontWeight = 'bold';
                 textObject.symbol.refreshDrawing();
                 tmpFrame.innerItems.push(textObject);
@@ -394,18 +573,14 @@ class LayoutEngine {
                     xmax: tmpBox.start[0] + tmpBox.width,
                     ymax: tmpBox.start[1] + tmpBox.height
                 };
-                textObject.x = 0;
-                textObject.y = 0;
+                textObject.x = (0, ParamDefinition_js_1.numeric)(0);
+                textObject.y = (0, ParamDefinition_js_1.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;
@@ -415,161 +590,155 @@ class LayoutEngine {
             compound: true,
         });
         this.print('sequence length:', sequence.length);
-        const baseRenderFrame = new RenderFrame(new Frame_js_1.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_js_1.Frame(Frame_js_1.FixedFrameIds.BaseFrame));
+        const frameStack = [baseFrame];
+        const containerFrames = [baseFrame];
+        sequence.forEach((sequenceStep, index) => {
+            const action = sequenceStep[0];
             let tmpComponent;
-            if (action === ExecutionScope_js_1.SequenceAction.At || action === ExecutionScope_js_1.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(globals_js_1.ParamKeys.net_name) === globals_js_1.GlobalNames.gnd) {
-                        displayProp = 'gnd';
-                    }
-                    if (displayProp !== null) {
+            switch (action) {
+                case ExecutionScope_js_1.SequenceAction.To:
+                case ExecutionScope_js_1.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 draw_symbols_js_1.SymbolDrawing) {
                             tmpSymbol = new draw_symbols_js_1.SymbolPlaceholder(displayProp);
                             tmpSymbol.drawing.logger = this.logger;
                         }
-                        else if (typeof displayProp === "string") {
-                            tmpSymbol = (0, draw_symbols_js_1.SymbolFactory)(displayProp);
+                        else {
+                            const symbolPinDefinitions = generateLayoutPinDefinition(component);
+                            if (component.typeProp === globals_js_1.ComponentTypes.module) {
+                                tmpSymbol = new draw_symbols_js_1.SymbolCustomModule(symbolPinDefinitions, component.pinsMaxPositions);
+                            }
+                            else {
+                                tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
+                            }
                         }
-                    }
-                    else {
-                        const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        if (component.typeProp === 'module') {
-                            tmpSymbol = new draw_symbols_js_1.SymbolCustomModule(symbolPinDefinitions);
+                        applyComponentParamsToSymbol(component, tmpSymbol);
+                        if (component.parameters.has(globals_js_1.ParamKeys.angle)) {
+                            const value = component.parameters.get(globals_js_1.ParamKeys.angle).toNumber();
+                            tmpSymbol.angle = value;
                         }
-                        else {
-                            tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions);
+                        if (component.parameters.has(globals_js_1.ParamKeys.flipX)) {
+                            tmpSymbol.flipX =
+                                component.parameters.get(globals_js_1.ParamKeys.flipX);
                         }
+                        if (component.parameters.has(globals_js_1.ParamKeys.flipY)) {
+                            tmpSymbol.flipY =
+                                component.parameters.get(globals_js_1.ParamKeys.flipY);
+                        }
+                        if (tmpSymbol instanceof draw_symbols_js_1.SymbolCustom) {
+                            if (widthProp) {
+                                tmpSymbol.bodyWidth = (0, helpers_js_1.milsToMM)(widthProp);
+                            }
+                            if (heightProp) {
+                                tmpSymbol.bodyHeight = (0, helpers_js_1.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 draw_symbols_js_1.SymbolCustom && widthProp) {
-                        tmpSymbol.bodyWidth = (0, helpers_js_1.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 === ExecutionScope_js_1.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 === ExecutionScope_js_1.SequenceAction.To) {
-                    this.setGraphEdge(graph, previousNode, tmpInstanceName, makeEdgeValue(previousNode, previousPin, tmpInstanceName, pin, i));
-                }
-                previousNode = tmpInstanceName;
-                previousPin = pin;
-            }
-            else if (action === ExecutionScope_js_1.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 ExecutionScope_js_1.SequenceAction.Wire: {
+                    const [, wireId, wireSegments] = sequenceStep;
+                    const wire = new RenderWire((0, ParamDefinition_js_1.numeric)(0), (0, ParamDefinition_js_1.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(ExecutionScope_js_1.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 ExecutionScope_js_1.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(ExecutionScope_js_1.SequenceAction.Wire, wireId, JSON.stringify(wireSegmentsInfo));
-            }
-            else if (action === ExecutionScope_js_1.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 === ExecutionScope_js_1.SequenceAction.Frame) {
-                const [, frameObject, frameAction] = sequence[i];
-                if (frameAction === ExecutionScope_js_1.FrameAction.Enter) {
-                    const prevFrame = frameStack[frameStack.length - 1];
-                    const newFrame = new RenderFrame(frameObject);
-                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Direction)) {
-                        newFrame.direction =
-                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Direction);
-                    }
-                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Padding)) {
-                        newFrame.padding =
-                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Padding);
-                    }
-                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Border)) {
-                        newFrame.borderWidth =
-                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Border);
-                    }
-                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Width)) {
-                        newFrame.width =
-                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Width);
+                case ExecutionScope_js_1.SequenceAction.Frame: {
+                    const [, frameObject, frameAction] = sequenceStep;
+                    if (frameAction === ExecutionScope_js_1.FrameAction.Enter) {
+                        const prevFrame = frameStack[frameStack.length - 1];
+                        const newFrame = new RenderFrame(frameObject);
+                        if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Direction)) {
+                            newFrame.direction =
+                                frameObject.parameters.get(Frame_js_1.FrameParamKeys.Direction);
+                        }
+                        if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Padding)) {
+                            newFrame.padding = (0, helpers_js_1.milsToMM)(frameObject.parameters.get(Frame_js_1.FrameParamKeys.Padding));
+                        }
+                        if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Border)) {
+                            newFrame.borderWidth =
+                                frameObject.parameters.get(Frame_js_1.FrameParamKeys.Border);
+                        }
+                        if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Width)) {
+                            newFrame.width = (0, helpers_js_1.milsToMM)(frameObject.parameters.get(Frame_js_1.FrameParamKeys.Width));
+                        }
+                        if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Height)) {
+                            newFrame.height = (0, helpers_js_1.milsToMM)(frameObject.parameters.get(Frame_js_1.FrameParamKeys.Height));
+                        }
+                        containerFrames.push(newFrame);
+                        frameStack.push(newFrame);
+                        prevFrame && prevFrame.innerItems.push(newFrame);
                     }
-                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Height)) {
-                        newFrame.height =
-                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Height);
+                    else if (frameAction === ExecutionScope_js_1.FrameAction.Exit) {
+                        frameStack.pop();
                     }
-                    containerFrames.push(newFrame);
-                    frameStack.push(newFrame);
-                    prevFrame && prevFrame.innerItems.push(newFrame);
-                }
-                else if (frameAction === ExecutionScope_js_1.FrameAction.Exit) {
-                    frameStack.pop();
+                    break;
                 }
             }
-        }
+        });
         return {
             graph,
             containerFrames,
@@ -584,10 +753,10 @@ 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;
@@ -630,12 +799,7 @@ 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;
@@ -653,7 +817,7 @@ class LayoutEngine {
         }
         if (subgraphEdges.length === 0) {
             const [, node1] = graph.node(firstNodeId);
-            this.placeNodeAtPosition(0, 0, node1, 1);
+            this.placeNodeAtPosition((0, ParamDefinition_js_1.numeric)(0), (0, ParamDefinition_js_1.numeric)(0), node1, 1);
             return;
         }
         let fixedNode;
@@ -666,7 +830,7 @@ 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((0, ParamDefinition_js_1.numeric)(0), (0, ParamDefinition_js_1.numeric)(0), node1, pin1);
                 firstNodePlaced = true;
                 node1.isFloating = false;
                 originNodes.push(node1);
@@ -689,7 +853,7 @@ 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((0, ParamDefinition_js_1.numeric)(0), (0, ParamDefinition_js_1.numeric)(0), node1, pin1);
                 node1.isFloating = false;
                 fixedNode = node1;
                 fixedNodePin = pin1;
@@ -706,7 +870,7 @@ 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;
@@ -783,8 +947,8 @@ 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);
@@ -798,68 +962,15 @@ 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) {
@@ -868,8 +979,8 @@ 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);
@@ -909,12 +1020,12 @@ class LayoutEngine {
 }
 exports.LayoutEngine = LayoutEngine;
 function getNodePositionAtPin(item, pin) {
-    let x = 0;
-    let y = 0;
+    let x = (0, ParamDefinition_js_1.numeric)(0);
+    let y = (0, ParamDefinition_js_1.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) {
@@ -923,8 +1034,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 [
@@ -957,7 +1068,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) ? globals_js_1.SymbolPinSide.Left : globals_js_1.SymbolPinSide.Right,
                 pinId: existingPinIds[i],
                 text: pin.name,
                 position: pinPosition,
@@ -976,24 +1087,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 ParamDefinition_js_1.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(",");
@@ -1035,21 +1146,21 @@ 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 } = (0, utils_js_1.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);
 }
@@ -1067,8 +1178,8 @@ function getBoundsFromPoints(points) {
 }
 class RenderObject {
     constructor() {
-        this.x = -1;
-        this.y = -1;
+        this.x = (0, ParamDefinition_js_1.numeric)(-1);
+        this.y = (0, ParamDefinition_js_1.numeric)(-1);
         this.isFloating = true;
         this.floatingRelativeTo = [];
     }
@@ -1111,7 +1222,7 @@ class RenderWire extends RenderObject {
                 tmpX += useValue;
             }
             else if (direction === globals_js_1.WireAutoDirection.Auto || direction === globals_js_1.WireAutoDirection.Auto_) {
-                const { valueXY = [0, 0] } = segment;
+                const { valueXY = [(0, ParamDefinition_js_1.numeric)(0), (0, ParamDefinition_js_1.numeric)(0)] } = segment;
                 const tmpPoints = this.getAutoPoints(valueXY, direction);
                 tmpPoints.forEach(point => {
                     if (point[0] !== 0 || point[1] !== 0) {
@@ -1129,8 +1240,8 @@ class RenderWire extends RenderObject {
         this.points = points;
     }
     getAutoPoints(value, direction) {
-        const valueX = (0, utils_js_1.roundValue)(value[0]);
-        const valueY = (0, utils_js_1.roundValue)(value[1]);
+        const valueX = (0, utils_js_1.roundValue)(value[0]).toNumber();
+        const valueY = (0, utils_js_1.roundValue)(value[1]).toNumber();
         const inQuadrant = geometry_js_1.Geometry.getQuadrant(valueX, valueY);
         const [dx, dy] = [valueX, valueY];
         if (direction === globals_js_1.WireAutoDirection.Auto) {
@@ -1186,16 +1297,16 @@ class RenderWire extends RenderObject {
                 useValue = value;
             }
             if (direction === types_js_1.Direction.Down) {
-                tmpY += useValue;
+                tmpY = tmpY.add(useValue);
             }
             else if (direction === types_js_1.Direction.Up) {
-                tmpY -= useValue;
+                tmpY = tmpY.sub(useValue);
             }
             else if (direction === types_js_1.Direction.Left) {
-                tmpX -= useValue;
+                tmpX = tmpX.sub(useValue);
             }
             else if (direction === types_js_1.Direction.Right) {
-                tmpX += useValue;
+                tmpX = tmpX.add(useValue);
             }
         });
         let useValue = null;
@@ -1203,22 +1314,22 @@ class RenderWire extends RenderObject {
         const lastSegment = this.segments[this.segments.length - 1];
         switch (lastSegment.direction) {
             case types_js_1.Direction.Left:
-                useValue = tmpX - untilX;
+                useValue = tmpX.sub(untilX);
                 break;
             case types_js_1.Direction.Right:
-                useValue = untilX - tmpX;
+                useValue = untilX.sub(tmpX);
                 break;
             case types_js_1.Direction.Up:
-                useValue = untilY - tmpY;
+                useValue = untilY.sub(tmpY);
                 break;
             case types_js_1.Direction.Down:
-                useValue = tmpY - untilY;
+                useValue = tmpY.sub(untilY);
                 break;
             case globals_js_1.WireAutoDirection.Auto:
             case globals_js_1.WireAutoDirection.Auto_:
                 valueXY = [
-                    untilX - tmpX,
-                    untilY - tmpY,
+                    untilX.sub(tmpX),
+                    untilY.sub(tmpY),
                 ];
                 useValue = 0;
                 break;
@@ -1269,7 +1380,7 @@ class RenderText extends RenderObject {
     }
     constructor(text) {
         super();
-        this._fontSize = 12;
+        this._fontSize = (0, ParamDefinition_js_1.numeric)(12);
         this._fontWeight = 'regular';
         this.symbol = new draw_symbols_js_1.SymbolText(text);
     }
@@ -1284,25 +1395,25 @@ class RenderFrame extends RenderObject {
         this.translateY = 0;
         this.padding = (0, helpers_js_1.milsToMM)(100);
         this.gap = (0, helpers_js_1.milsToMM)(100);
+        this.borderWidth = (0, ParamDefinition_js_1.numeric)(5);
         this.direction = Frame_js_1.FramePlotDirection.Column;
-        this.borderWidth = 5;
         this.width = null;
         this.height = null;
-        this.size = null;
         this.subgraphId = "";
         this.containsTitle = false;
         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:" + (0, utils_js_1.printBounds)(this.bounds);
+        return name + ": " + this.x + "," + this.y
+            + " bounds:" + (this.bounds && (0, utils_js_1.printBounds)(this.bounds));
     }
 }
 exports.RenderFrame = RenderFrame;
@@ -1327,7 +1438,7 @@ function CalculatePinPositions(component) {
     }
     else {
         const symbolPinDefinitions = generateLayoutPinDefinition(component);
-        tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions);
+        tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
     }
     applyComponentParamsToSymbol(component, tmpSymbol);
     tmpSymbol.refreshDrawing();
@@ -1342,9 +1453,17 @@ function ExtractDrawingRects(drawing) {
     return drawing.getCommands().filter(item => {
         return (item[0] === draw_symbols_js_1.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
         };
     });
 }