circuitscript 0.1.2 → 0.1.4

package/dist/cjs/layout.js

@@ -14,7 +14,6 @@ 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();
@@ -142,17 +141,17 @@ class LayoutEngine {
         baseFrame.borderWidth = (0, ParamDefinition_js_1.numeric)(0);
         if (this.showBaseFrame) {
             baseFrame.borderWidth = (0, ParamDefinition_js_1.numeric)(5);
-            baseFrame.width = 11692 - 400 * 2;
-            baseFrame.height = 8267 - 400 * 2;
+            baseFrame.width = (0, ParamDefinition_js_1.numeric)(11692 - 400 * 2);
+            baseFrame.height = (0, ParamDefinition_js_1.numeric)(8267 - 400 * 2);
         }
         baseFrame.x = (0, ParamDefinition_js_1.numeric)(0);
         baseFrame.y = (0, ParamDefinition_js_1.numeric)(0);
-        let textObjects = [];
-        let elementFrames = [];
         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;
@@ -177,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);
             }
@@ -199,11 +198,13 @@ class LayoutEngine {
                 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 = item2.x.add(innerFrame.x).sub(innerFrame.translateX);
-                    item2.y = item2.y.add(innerFrame.y).sub(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 {
@@ -215,11 +216,10 @@ class LayoutEngine {
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
         const gridSize = globals_js_1.defaultGridSizeUnits;
-        let accumX = (0, ParamDefinition_js_1.numeric)(0);
-        let accumY = (0, ParamDefinition_js_1.numeric)(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;
@@ -233,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) {
@@ -250,85 +254,246 @@ class LayoutEngine {
         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.add(accumX).add((0, utils_js_1.toNearestGrid)(widthForTitle / 2 - frameWidth / 2, gridSize));
+                innerFrame.x = offsetX.add(accumX);
                 innerFrame.y = offsetY.add(accumY);
-                accumY = accumY.add(frameHeight).add(frame.gap);
+                accumY = accumY.add(innerFrameHeight).add(frame.gap);
             }
             else {
-                if (frame.direction === Frame_js_1.FramePlotDirection.Column) {
-                    innerFrame.x = offsetX.add(accumX).add((0, utils_js_1.toNearestGrid)(maxWidth / 2 - frameWidth / 2, gridSize));
-                    innerFrame.y = offsetY.add(accumY);
-                    accumY = accumY.add(frameHeight).add(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.add(centeredOffsetX).add(accumX);
-                    innerFrame.y = offsetY.add(accumY);
-                    accumX = accumX.add(frameWidth).add(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.add(frameWidth), innerFrame.y.add(frameHeight)]);
+            boundPoints.push([
+                innerFrame.x.toNumber(),
+                innerFrame.y.toNumber()
+            ], [
+                innerFrame.x.add(innerFrameWidth).toNumber(),
+                innerFrame.y.add(innerFrameHeight).toNumber()
+            ]);
         });
-        const tmpBoundPoints = boundPoints.map(item => {
-            return [
-                item[0].toNumber(),
-                item[1].toNumber(),
-            ];
+        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 {
+            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;
         });
-        const contentsBounds = (0, utils_js_1.resizeBounds)(getBoundsFromPoints(tmpBoundPoints), frame.padding.toNumber());
-        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, ParamDefinition_js_1.numeric)(0);
-            let frameHeight = (0, ParamDefinition_js_1.numeric)(0);
-            if (rects[1]) {
-                frameWidth = (0, helpers_js_1.milsToMM)(rects[1].width);
-                frameHeight = (0, helpers_js_1.milsToMM)(rects[1].height);
+        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;
             }
-            const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
-            const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
-            const frameOffsetX = (0, utils_js_1.toNearestGrid)((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
-            const frameOffsetY = (0, utils_js_1.toNearestGrid)((frameHeight.toNumber() - contentsHeight) / 2, gridSize);
-            innerFrames.forEach(innerFrame => {
-                innerFrame.x = innerFrame.x.add(frameOffsetX);
-                innerFrame.y = innerFrame.y.add(frameOffsetY);
-            });
-            frame.bounds = {
-                xmin: 0,
-                ymin: 0,
-                xmax: frameWidth.toNumber(),
-                ymax: frameHeight.toNumber(),
-            };
+            titleFrame.x = titleFrame.x.add(titleOffset);
         }
-        else {
-            frame.bounds = contentsBounds;
+        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;
                     }
@@ -339,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);
             }
         });
@@ -356,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);
                     }
@@ -381,12 +546,19 @@ 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);
@@ -409,10 +581,6 @@ class LayoutEngine {
                 elementFrames.splice(0, 0, tmpFrame);
             }
         }
-        return {
-            elementFrames,
-            textObjects,
-        };
     }
     generateLayoutGraph(sequence, nets) {
         let previousNode = null;
@@ -422,158 +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);
-                    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 {
-                        const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        if (component.typeProp === globals_js_1.ComponentTypes.module) {
-                            tmpSymbol = new draw_symbols_js_1.SymbolCustomModule(symbolPinDefinitions, component.pinsMaxPositions);
+            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 {
-                            tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
+                            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);
+                            }
                         }
-                    }
-                    applyComponentParamsToSymbol(component, tmpSymbol);
-                    let didSetAngle = false;
-                    if (component.parameters.has(globals_js_1.ParamKeys.angle)) {
-                        didSetAngle = true;
-                        const value = component.parameters.get(globals_js_1.ParamKeys.angle).toNumber();
-                        tmpSymbol.angle = value;
-                    }
-                    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);
+                        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;
+                        }
+                        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 (heightProp) {
-                            tmpSymbol.bodyHeight = (0, helpers_js_1.milsToMM)(heightProp);
+                        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);
                     }
-                    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, 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;
+                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,
@@ -588,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;
@@ -634,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;
@@ -802,59 +962,6 @@ 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, ParamDefinition_js_1.numeric)(0), (0, ParamDefinition_js_1.numeric)(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 = item.x.add(offsetX);
         item.y = item.y.add(offsetY);
@@ -1289,20 +1396,20 @@ class RenderFrame extends RenderObject {
         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.direction = Frame_js_1.FramePlotDirection.Row;
         this.width = null;
         this.height = 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
@@ -1346,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
         };
     });
 }