circuitscript 0.1.2 → 0.1.4

package/dist/esm/layout.mjs

@@ -2,16 +2,15 @@ import { Graph, alg } from '@dagrejs/graphlib';
 import { SymbolCustom, SymbolDrawing, SymbolCustomModule, SymbolPlaceholder, SymbolText, PlaceHolderCommands } from "./draw_symbols.mjs";
 import { FrameAction, SequenceAction } from "./objects/ExecutionScope.mjs";
 import { ComponentTypes, defaultFrameTitleTextSize, defaultGridSizeUnits, FrameType, ParamKeys, SymbolPinSide, WireAutoDirection } from './globals.mjs';
-import { Geometry } from './geometry.mjs';
+import { Geometry, HorizontalAlign, VerticalAlign } from './geometry.mjs';
 import { Logger } from './logger.mjs';
-import { Frame, FrameParamKeys, FramePlotDirection } from './objects/Frame.mjs';
-import { combineMaps, getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, roundValue, toNearestGrid } from './utils.mjs';
+import { FixedFrameIds, Frame, FrameParamKeys, FramePlotDirection } from './objects/Frame.mjs';
+import { areasOverlap, combineMaps, getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, roundValue, toNearestGrid } from './utils.mjs';
 import { Direction } from './objects/types.mjs';
 import { milsToMM, UnitDimension } from './helpers.mjs';
 import { numeric, NumericValue } from './objects/ParamDefinition.mjs';
 export class LayoutEngine {
     logger;
-    placeSubgraphVersion = 2;
     layoutWarnings = [];
     showBaseFrame = false;
     constructor(options = { showBaseFrame: false }) {
@@ -140,17 +139,17 @@ export class LayoutEngine {
         baseFrame.borderWidth = numeric(0);
         if (this.showBaseFrame) {
             baseFrame.borderWidth = numeric(5);
-            baseFrame.width = 11692 - 400 * 2;
-            baseFrame.height = 8267 - 400 * 2;
+            baseFrame.width = numeric(11692 - 400 * 2);
+            baseFrame.height = numeric(8267 - 400 * 2);
         }
         baseFrame.x = numeric(0);
         baseFrame.y = 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;
@@ -175,10 +174,10 @@ export class LayoutEngine {
         const innerItems = frame.innerItems;
         const frames = [];
         innerItems.forEach(item => {
-            if (item.type === RenderFrameType.Elements) {
+            if (item.renderType === RenderFrameType.Elements) {
                 frames.push(item);
             }
-            else if (item.type === RenderFrameType.Container) {
+            else if (item.renderType === RenderFrameType.Container) {
                 const innerFrames = this.collectElementFrames(item, level + 1);
                 frames.push(...innerFrames);
             }
@@ -197,11 +196,13 @@ export 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 {
@@ -213,11 +214,10 @@ export class LayoutEngine {
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
         const gridSize = defaultGridSizeUnits;
-        let accumX = numeric(0);
-        let accumY = 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 = resizeToNearestGrid(innerFrame.bounds, gridSize);
                 innerFrame.translateX = innerFrame.bounds.xmin;
                 innerFrame.translateY = innerFrame.bounds.ymin;
@@ -231,10 +231,14 @@ export class LayoutEngine {
             const { width } = getBoundsSize(item);
             return width;
         }));
+        const maxHeight = Math.max(...frameSizes.map(item => {
+            const { height } = getBoundsSize(item);
+            return height;
+        }));
         let accumRowWidth = 0;
-        let titleFrameWidth = null;
+        let titleFrameWidth = 0;
         const inRowShouldCenterInnerFrames = true;
-        if (frame.direction === FramePlotDirection.Row) {
+        if (frameDirection === FramePlotDirection.Row) {
             accumRowWidth = frameSizes.reduce((accum, item, index) => {
                 const { width } = getBoundsSize(item);
                 if (frame.innerItems[index].containsTitle) {
@@ -248,85 +252,246 @@ export class LayoutEngine {
         else {
             accumRowWidth = maxWidth;
         }
+        let frameWidth = numeric(0);
+        let frameHeight = numeric(0);
+        let frameXMin = numeric(0);
+        let frameYMin = numeric(0);
+        const frameParams = frame.frame.parameters;
+        const avoidAreas = [];
+        if (frameParams.has(FrameParamKeys.SheetType)) {
+            const frameComponent = frameParams.get(FrameParamKeys.SheetType);
+            const frameDrawing = frameComponent.displayProp;
+            frameDrawing.variables = combineMaps(frameComponent.parameters, frameParams);
+            const rects = ExtractDrawingRects(frameDrawing);
+            const drawableRect = rects.find(rect => rect.className === 'plot-area');
+            let frameMinX = numeric(0);
+            let frameMinY = numeric(0);
+            if (drawableRect) {
+                frameMinX = milsToMM(drawableRect.x);
+                frameMinY = milsToMM(drawableRect.y);
+                frameWidth = milsToMM(drawableRect.width);
+                frameHeight = milsToMM(drawableRect.height);
+            }
+            const infoAreaRect = rects.filter(rect => rect.className === 'keepout-area');
+            infoAreaRect.forEach(area => {
+                const x1 = area.x;
+                const y1 = area.y;
+                const x2 = area.x.add(area.width);
+                const y2 = area.y.add(area.height);
+                avoidAreas.push([
+                    milsToMM(x1).sub(frameMinX).toNumber(),
+                    milsToMM(y1).sub(frameMinY).toNumber(),
+                    milsToMM(x2).sub(frameMinX).toNumber(),
+                    milsToMM(y2).sub(frameMinY).toNumber(),
+                ]);
+            });
+        }
+        else {
+            if (frame.width !== null) {
+                frameWidth = frame.width;
+            }
+            if (frame.height !== null) {
+                frameHeight = frame.height;
+            }
+        }
         const offsetX = frame.padding;
         const offsetY = frame.padding;
         let centeredOffsetX = 0;
         let widthForTitle;
-        if (titleFrameWidth > accumRowWidth) {
+        if (frameWidth.toNumber() !== 0) {
+            widthForTitle = frameWidth.toNumber();
+        }
+        else if (titleFrameWidth > accumRowWidth) {
             widthForTitle = titleFrameWidth;
         }
         else {
             widthForTitle = accumRowWidth;
         }
-        if (frame.direction === FramePlotDirection.Row &&
+        if (frameDirection === FramePlotDirection.Row &&
             inRowShouldCenterInnerFrames &&
             titleFrameWidth !== null && titleFrameWidth > accumRowWidth) {
-            centeredOffsetX = toNearestGrid(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
+            centeredOffsetX =
+                toNearestGrid(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
         }
-        innerFrames.forEach(innerFrame => {
-            const { width: frameWidth, height: frameHeight } = getBoundsSize(innerFrame.bounds);
+        let title_align = HorizontalAlign.Middle;
+        if (frameParams.has(FrameParamKeys.TitleAlign)) {
+            title_align = frameParams.get(FrameParamKeys.TitleAlign);
+        }
+        let accumX = numeric(0);
+        let accumY = numeric(0);
+        innerFrames.forEach((innerFrame, index) => {
+            const { width: innerFrameWidth, height: innerFrameHeight } = getBoundsSize(innerFrame.bounds);
+            let arrangeLineAttempts = 0;
+            const maxAttempts = 10;
+            let innerFrameX = numeric(0);
+            let innerFrameY = numeric(0);
             if (innerFrame.containsTitle) {
-                innerFrame.x = offsetX.add(accumX).add(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 === FramePlotDirection.Column) {
-                    innerFrame.x = offsetX.add(accumX).add(toNearestGrid(maxWidth / 2 - frameWidth / 2, gridSize));
-                    innerFrame.y = offsetY.add(accumY);
-                    accumY = accumY.add(frameHeight).add(frame.gap);
+                if (frameDirection === FramePlotDirection.Column) {
+                    innerFrameX = offsetX.add(accumX);
+                    innerFrameY = offsetY.add(accumY);
+                    while (arrangeLineAttempts < maxAttempts) {
+                        const innerFrameY2 = innerFrameY.toNumber() + innerFrameHeight;
+                        const doesExceedFrameHeight = (frameHeight.toNumber() > 0
+                            && innerFrameY2 > frameHeight.toNumber());
+                        const { xmax } = getBoundsFromPoints(boundPoints);
+                        const tmpX1 = innerFrameX.toNumber();
+                        const tmpY1 = innerFrameY.toNumber();
+                        const tmpX2 = tmpX1 + innerFrameWidth;
+                        const tmpY2 = tmpY1 + innerFrameHeight;
+                        const frameArea = [tmpX1, tmpY1, tmpX2, tmpY2];
+                        const overlaps = avoidAreas.filter(area => areasOverlap(frameArea, area));
+                        const doesOverlapAreasToAvoid = overlaps.length > 0;
+                        if (doesExceedFrameHeight || doesOverlapAreasToAvoid) {
+                            innerFrameY = offsetY;
+                            const nextX = numeric(xmax).sub(offsetX).add(frame.gap);
+                            innerFrameX = offsetX.add(nextX);
+                            accumY = numeric(0);
+                            accumX = nextX;
+                        }
+                        arrangeLineAttempts++;
+                        if (arrangeLineAttempts > maxAttempts) {
+                            throw "Failed to place inner frame";
+                        }
+                    }
+                    innerFrame.x = innerFrameX;
+                    innerFrame.y = innerFrameY;
+                    accumY = accumY.add(innerFrameHeight).add(frame.gap);
                 }
-                else if (frame.direction === FramePlotDirection.Row) {
-                    innerFrame.x = offsetX.add(centeredOffsetX).add(accumX);
-                    innerFrame.y = offsetY.add(accumY);
-                    accumX = accumX.add(frameWidth).add(frame.gap);
+                else if (frameDirection === FramePlotDirection.Row) {
+                    innerFrameX = offsetX.add(centeredOffsetX).add(accumX);
+                    innerFrameY = offsetY.add(accumY);
+                    while (arrangeLineAttempts < maxAttempts) {
+                        const innerFrameX2 = innerFrameX.toNumber() + innerFrameWidth;
+                        const doesExceedFrameWidth = (frameWidth.toNumber() > 0
+                            && innerFrameX2 > frameWidth.toNumber());
+                        const tmpX1 = innerFrameX.toNumber();
+                        const tmpY1 = innerFrameY.toNumber();
+                        const tmpX2 = tmpX1 + innerFrameWidth;
+                        const tmpY2 = tmpY1 + innerFrameHeight;
+                        const frameArea = [tmpX1, tmpY1, tmpX2, tmpY2];
+                        const overlaps = avoidAreas.filter(area => areasOverlap(frameArea, area));
+                        const doesOverlapAreasToAvoid = overlaps.length > 0;
+                        if (doesExceedFrameWidth || doesOverlapAreasToAvoid) {
+                            innerFrameX = offsetX.add(centeredOffsetX);
+                            const { ymax } = getBoundsFromPoints(boundPoints);
+                            const nextY = numeric(ymax).sub(offsetY).add(frame.gap);
+                            innerFrameY = offsetY.add(nextY);
+                            accumX = numeric(0);
+                            accumY = nextY;
+                        }
+                        else {
+                            break;
+                        }
+                        arrangeLineAttempts++;
+                        if (arrangeLineAttempts > maxAttempts) {
+                            throw "Failed to place inner frame";
+                        }
+                    }
+                    innerFrame.x = innerFrameX;
+                    innerFrame.y = innerFrameY;
+                    accumX = accumX.add(innerFrameWidth).add(frame.gap);
                 }
             }
-            boundPoints.push([innerFrame.x, innerFrame.y], [innerFrame.x.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 = resizeBounds(getBoundsFromPoints(boundPoints), frame.padding.toNumber());
+        const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
+        const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
+        let hAlign = HorizontalAlign.Middle;
+        let vAlign = VerticalAlign.Middle;
+        if (frameParams.has(FrameParamKeys.HorizontalAlign)) {
+            hAlign =
+                frameParams.get(FrameParamKeys.HorizontalAlign);
+        }
+        if (frameParams.has(FrameParamKeys.VerticalAlign)) {
+            vAlign =
+                frameParams.get(FrameParamKeys.VerticalAlign);
+        }
+        if (frameParams.has(FrameParamKeys.SheetType)) {
+            frameXMin = numeric(0);
+            frameYMin = numeric(0);
+        }
+        else {
+            frameXMin = numeric(contentsBounds.xmin);
+            frameYMin = numeric(contentsBounds.ymin);
+        }
+        if (frameWidth.toNumber() === 0) {
+            frameWidth = numeric(contentsWidth);
+        }
+        if (frameHeight.toNumber() === 0) {
+            frameHeight = numeric(contentsHeight);
+        }
+        const titleFrame = innerFrames.find(frame => {
+            return frame.containsTitle;
         });
-        const contentsBounds = resizeBounds(getBoundsFromPoints(tmpBoundPoints), frame.padding.toNumber());
-        if (frame.frame.parameters.has(FrameParamKeys.SheetType)) {
-            const frameComponent = frame.frame.parameters.get(FrameParamKeys.SheetType);
-            const frameDrawing = frameComponent.displayProp;
-            frameDrawing.variables = combineMaps(frameComponent.parameters, frame.frame.parameters);
-            const rects = ExtractDrawingRects(frameDrawing);
-            let frameWidth = numeric(0);
-            let frameHeight = numeric(0);
-            if (rects[1]) {
-                frameWidth = milsToMM(rects[1].width);
-                frameHeight = milsToMM(rects[1].height);
+        if (titleFrame) {
+            const { width: innerFrameWidth } = getBoundsSize(titleFrame.bounds);
+            let titleOffset = 0;
+            switch (title_align) {
+                case HorizontalAlign.Left:
+                    titleOffset = 0;
+                    break;
+                case HorizontalAlign.Middle:
+                    titleOffset = toNearestGrid(widthForTitle / 2 - innerFrameWidth / 2, gridSize);
+                    break;
+                case HorizontalAlign.Right:
+                    titleOffset = frameWidth.toNumber() - innerFrameWidth;
+                    break;
             }
-            const contentsWidth = contentsBounds.xmax - contentsBounds.xmin;
-            const contentsHeight = contentsBounds.ymax - contentsBounds.ymin;
-            const frameOffsetX = toNearestGrid((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
-            const frameOffsetY = 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 HorizontalAlign.Left:
+                frameOffsetX = 0;
+                break;
+            case HorizontalAlign.Middle:
+                frameOffsetX = toNearestGrid((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
+                break;
+            case HorizontalAlign.Right:
+                frameOffsetX = toNearestGrid(frameWidth.toNumber() - contentsWidth, gridSize);
+                break;
+        }
+        switch (vAlign) {
+            case VerticalAlign.Top:
+                frameOffsetY = 0;
+                break;
+            case VerticalAlign.Middle:
+                frameOffsetY = toNearestGrid((frameHeight.toNumber() - contentsHeight) / 2, gridSize);
+                break;
+            case VerticalAlign.Bottom:
+                frameOffsetY = toNearestGrid(frameHeight.toNumber() - contentsHeight, gridSize);
+                break;
         }
+        innerFrames.forEach(innerFrame => {
+            innerFrame.x = innerFrame.x.add(frameOffsetX);
+            innerFrame.y = innerFrame.y.add(frameOffsetY);
+        });
+        frame.bounds = {
+            xmin: frameXMin.toNumber(),
+            ymin: frameYMin.toNumber(),
+            xmax: frameXMin.toNumber() + frameWidth.toNumber(),
+            ymax: frameYMin.toNumber() + frameHeight.toNumber(),
+        };
     }
     dumpFrame(frame, level = 0) {
         this.print(level, "".padStart(level * 4), 'frame, items:', frame.innerItems.length);
         frame.innerItems.forEach(item => {
             item = item;
-            if (item.type === RenderFrameType.Elements) {
-                this.print(level, "".padStart(level * 4), 'element frame, items:', item.innerItems.map(item => {
+            if (item.renderType === RenderFrameType.Elements) {
+                this.print(level, "".padStart(level * 4), '- element frame, items:', item.innerItems.map(item => {
                     if (item instanceof RenderComponent) {
                         return item.component.instanceName;
                     }
@@ -337,7 +502,7 @@ export class LayoutEngine {
                 }));
             }
             else {
-                this.print(level, "".padStart(level * 4), 'container');
+                this.print(level, "".padStart(level * 4), '- container');
                 this.dumpFrame(item, level + 1);
             }
         });
@@ -354,21 +519,21 @@ export class LayoutEngine {
                 accum.push(item);
             }
             else if (item instanceof RenderComponent) {
-                const instanceName = item.component.instanceName;
+                const { instanceName } = item.component;
                 if (ignoreItems.indexOf(instanceName) === -1) {
-                    const subgraph = subgraphInfo.find(item => {
-                        return item.components.indexOf(instanceName) !== -1;
+                    const withinSubgraph = subgraphInfo.find(subgraphInfo => {
+                        return subgraphInfo.components.indexOf(instanceName) !== -1;
                     });
-                    if (subgraph !== undefined) {
-                        const tmpFrame = new RenderFrame(new Frame(-2), RenderFrameType.Elements);
+                    if (withinSubgraph !== undefined) {
+                        const tmpFrame = new RenderFrame(new Frame(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
                         tmpFrame.subgraphId = instanceName;
                         tmpFrame.innerItems =
-                            subgraph.components.map(instanceName => {
+                            withinSubgraph.components.map(instanceName => {
                                 const [, component,] = graph.node(instanceName);
                                 return component;
                             });
-                        tmpFrame.bounds = subgraph.bounds;
-                        ignoreItems.push(...subgraph.components);
+                        tmpFrame.bounds = withinSubgraph.bounds;
+                        ignoreItems.push(...withinSubgraph.components);
                         accum.push(tmpFrame);
                         elementFrames.push(tmpFrame);
                     }
@@ -379,12 +544,19 @@ export class LayoutEngine {
             }
             return accum;
         }, []);
-        if (frame.type === RenderFrameType.Container) {
+        this.checkAddFrameTitle(frame, elementFrames, textObjects, level);
+        return {
+            elementFrames,
+            textObjects,
+        };
+    }
+    checkAddFrameTitle(frame, elementFrames, textObjects, level) {
+        if (frame.renderType === RenderFrameType.Container) {
             const frameObject = frame.frame;
             const isSheetFrame = frameObject.frameType === FrameType.Sheet;
             if (frameObject.parameters.has(FrameParamKeys.Title) && !isSheetFrame) {
                 const title = frameObject.parameters.get(FrameParamKeys.Title);
-                const tmpFrame = new RenderFrame(new Frame(-2), RenderFrameType.Elements);
+                const tmpFrame = new RenderFrame(new Frame(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
                 tmpFrame.containsTitle = true;
                 tmpFrame.subgraphId = title.replace(/\s/g, "_");
                 const textObject = new RenderText(title);
@@ -407,10 +579,6 @@ export class LayoutEngine {
                 elementFrames.splice(0, 0, tmpFrame);
             }
         }
-        return {
-            elementFrames,
-            textObjects,
-        };
     }
     generateLayoutGraph(sequence, nets) {
         let previousNode = null;
@@ -420,158 +588,155 @@ export class LayoutEngine {
             compound: true,
         });
         this.print('sequence length:', sequence.length);
-        const baseRenderFrame = new RenderFrame(new Frame(-1));
-        const frameStack = [baseRenderFrame];
-        const containerFrames = [baseRenderFrame];
-        for (let i = 0; i < sequence.length; i++) {
-            const action = sequence[i][0];
+        const baseFrame = new RenderFrame(new Frame(FixedFrameIds.BaseFrame));
+        const frameStack = [baseFrame];
+        const containerFrames = [baseFrame];
+        sequence.forEach((sequenceStep, index) => {
+            const action = sequenceStep[0];
             let tmpComponent;
-            if (action === SequenceAction.At || action === SequenceAction.To) {
-                this.print(...sequence[i]);
-                const component = sequence[i][1];
-                const pin = sequence[i][2];
-                const tmpInstanceName = component.instanceName;
-                if (!graph.hasNode(tmpInstanceName)) {
-                    this.print('create instance', tmpInstanceName);
-                    const { displayProp = null, widthProp = null, heightProp = null } = component;
-                    let tmpSymbol;
-                    if (displayProp instanceof SymbolDrawing) {
-                        tmpSymbol = new SymbolPlaceholder(displayProp);
-                        tmpSymbol.drawing.logger = this.logger;
-                    }
-                    else {
-                        const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        if (component.typeProp === ComponentTypes.module) {
-                            tmpSymbol = new SymbolCustomModule(symbolPinDefinitions, component.pinsMaxPositions);
+            switch (action) {
+                case SequenceAction.To:
+                case SequenceAction.At: {
+                    this.print(...sequenceStep);
+                    const [, component, pin] = sequenceStep;
+                    const tmpInstanceName = component.instanceName;
+                    if (!graph.hasNode(tmpInstanceName)) {
+                        this.print('create instance', tmpInstanceName);
+                        const { displayProp = null, widthProp = null, heightProp = null } = component;
+                        let tmpSymbol;
+                        if (displayProp instanceof SymbolDrawing) {
+                            tmpSymbol = new SymbolPlaceholder(displayProp);
+                            tmpSymbol.drawing.logger = this.logger;
                         }
                         else {
-                            tmpSymbol = new SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
+                            const symbolPinDefinitions = generateLayoutPinDefinition(component);
+                            if (component.typeProp === ComponentTypes.module) {
+                                tmpSymbol = new SymbolCustomModule(symbolPinDefinitions, component.pinsMaxPositions);
+                            }
+                            else {
+                                tmpSymbol = new SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
+                            }
                         }
-                    }
-                    applyComponentParamsToSymbol(component, tmpSymbol);
-                    let didSetAngle = false;
-                    if (component.parameters.has(ParamKeys.angle)) {
-                        didSetAngle = true;
-                        const value = component.parameters.get(ParamKeys.angle).toNumber();
-                        tmpSymbol.angle = value;
-                    }
-                    if (component.parameters.has(ParamKeys.flipX)) {
-                        tmpSymbol.flipX =
-                            component.parameters.get(ParamKeys.flipX);
-                    }
-                    if (component.parameters.has(ParamKeys.flipY)) {
-                        tmpSymbol.flipY =
-                            component.parameters.get(ParamKeys.flipY);
-                    }
-                    if (tmpSymbol instanceof SymbolCustom) {
-                        if (widthProp) {
-                            tmpSymbol.bodyWidth = milsToMM(widthProp);
+                        applyComponentParamsToSymbol(component, tmpSymbol);
+                        if (component.parameters.has(ParamKeys.angle)) {
+                            const value = component.parameters.get(ParamKeys.angle).toNumber();
+                            tmpSymbol.angle = value;
+                        }
+                        if (component.parameters.has(ParamKeys.flipX)) {
+                            tmpSymbol.flipX =
+                                component.parameters.get(ParamKeys.flipX);
+                        }
+                        if (component.parameters.has(ParamKeys.flipY)) {
+                            tmpSymbol.flipY =
+                                component.parameters.get(ParamKeys.flipY);
                         }
-                        if (heightProp) {
-                            tmpSymbol.bodyHeight = milsToMM(heightProp);
+                        if (tmpSymbol instanceof SymbolCustom) {
+                            if (widthProp) {
+                                tmpSymbol.bodyWidth = milsToMM(widthProp);
+                            }
+                            if (heightProp) {
+                                tmpSymbol.bodyHeight = milsToMM(heightProp);
+                            }
                         }
+                        tmpSymbol.refreshDrawing();
+                        const { width: useWidth, height: useHeight } = tmpSymbol.size();
+                        tmpComponent = new RenderComponent(component, useWidth, useHeight);
+                        tmpComponent.symbol = tmpSymbol;
+                        graph.setNode(tmpInstanceName, [RenderItemType.Component, tmpComponent, index]);
+                        const currentFrame = frameStack[frameStack.length - 1];
+                        currentFrame && currentFrame.innerItems.push(tmpComponent);
                     }
-                    if (!didSetAngle && component.parameters.has('_addDirection')) {
-                        tmpSymbol.refreshDrawing(false);
-                        tmpSymbol.angle = calculateSymbolAngle(tmpSymbol, component.parameters.get('_addPin'), component.parameters.get('_addDirection'));
+                    if (action === SequenceAction.To && previousNode && previousPin) {
+                        this.setGraphEdge(graph, previousNode, tmpInstanceName, makeEdgeValue(previousNode, previousPin, tmpInstanceName, pin, index));
                     }
-                    tmpSymbol.refreshDrawing();
-                    const { width: useWidth, height: useHeight } = tmpSymbol.size();
-                    tmpComponent = new RenderComponent(component, useWidth, useHeight);
-                    tmpComponent.symbol = tmpSymbol;
-                    graph.setNode(tmpInstanceName, [RenderItemType.Component, tmpComponent, i]);
-                    const currentFrame = frameStack[frameStack.length - 1];
-                    currentFrame && currentFrame.innerItems.push(tmpComponent);
+                    previousNode = tmpInstanceName;
+                    previousPin = pin;
+                    break;
                 }
-                if (action === SequenceAction.To) {
-                    this.setGraphEdge(graph, previousNode, tmpInstanceName, makeEdgeValue(previousNode, previousPin, tmpInstanceName, pin, i));
-                }
-                previousNode = tmpInstanceName;
-                previousPin = pin;
-            }
-            else if (action === SequenceAction.Wire) {
-                const [, wireId, wireSegments] = sequence[i];
-                const wire = new RenderWire(numeric(0), numeric(0), wireSegments);
-                wire.id = wireId;
-                let useNetName = null;
-                if (previousNode !== null) {
-                    const [prevNodeType, prevNodeItem] = graph.node(previousNode);
-                    if (prevNodeType === RenderItemType.Component) {
-                        const matchingItem = nets.find(([comp, pin]) => {
-                            return comp.instanceName === previousNode && pin === previousPin;
-                        });
-                        useNetName = matchingItem !== undefined ? matchingItem[2].name : null;
-                    }
-                    else if (prevNodeType === RenderItemType.Wire) {
-                        useNetName = prevNodeItem.netName;
+                case SequenceAction.Wire: {
+                    const [, wireId, wireSegments] = sequenceStep;
+                    const wire = new RenderWire(numeric(0), numeric(0), wireSegments);
+                    wire.id = wireId;
+                    let useNetName = null;
+                    if (previousNode !== null) {
+                        const [prevNodeType, prevNodeItem] = graph.node(previousNode);
+                        if (prevNodeType === RenderItemType.Component) {
+                            const matchingItem = nets.find(([comp, pin]) => {
+                                return comp.instanceName === previousNode && pin === previousPin;
+                            });
+                            useNetName = matchingItem !== undefined ? matchingItem[2].name : null;
+                        }
+                        else if (prevNodeType === RenderItemType.Wire) {
+                            useNetName = prevNodeItem.netName;
+                        }
                     }
+                    wire.netName = useNetName;
+                    const wireName = getWireName(wire.id);
+                    graph.setNode(wireName, [RenderItemType.Wire, wire, index]);
+                    this.setGraphEdge(graph, previousNode, wireName, makeEdgeValue(previousNode, previousPin, wireName, 0, index));
+                    previousNode = wireName;
+                    previousPin = 1;
+                    const wireSegmentsInfo = wireSegments.map(item => {
+                        const tmp = {
+                            direction: item.direction,
+                            value: item.value,
+                        };
+                        if (item.valueXY) {
+                            tmp.valueXY = item.valueXY;
+                        }
+                        if (item.until) {
+                            tmp.until = [item.until[0].toString(), item.until[1]];
+                        }
+                        return tmp;
+                    });
+                    this.print(SequenceAction.Wire, wireId, JSON.stringify(wireSegmentsInfo));
+                    break;
                 }
-                wire.netName = useNetName;
-                const wireName = getWireName(wire.id);
-                graph.setNode(wireName, [RenderItemType.Wire, wire, i]);
-                this.setGraphEdge(graph, previousNode, wireName, makeEdgeValue(previousNode, previousPin, wireName, 0, i));
-                previousNode = wireName;
-                previousPin = 1;
-                const wireSegmentsInfo = wireSegments.map(item => {
-                    const tmp = {
-                        direction: item.direction,
-                        value: item.value,
-                    };
-                    if (item.valueXY) {
-                        tmp.valueXY = item.valueXY;
+                case SequenceAction.WireJump: {
+                    this.print(...sequenceStep);
+                    const wireId = sequenceStep[1];
+                    const wireName = getWireName(wireId);
+                    let wirePin = 1;
+                    if (sequenceStep.length === 3) {
+                        wirePin = sequenceStep[2];
                     }
-                    if (item.until) {
-                        tmp.until = [item.until[0].toString(), item.until[1]];
-                    }
-                    return tmp;
-                });
-                this.print(SequenceAction.Wire, wireId, JSON.stringify(wireSegmentsInfo));
-            }
-            else if (action === SequenceAction.WireJump) {
-                this.print(...sequence[i]);
-                const wireId = sequence[i][1];
-                const wireName = getWireName(wireId);
-                let wirePin = 1;
-                if (sequence[i].length === 3) {
-                    wirePin = sequence[i][2];
+                    previousNode = wireName;
+                    previousPin = wirePin;
+                    break;
                 }
-                previousNode = wireName;
-                previousPin = wirePin;
-            }
-            else if (action === SequenceAction.Frame) {
-                const [, frameObject, frameAction] = sequence[i];
-                if (frameAction === FrameAction.Enter) {
-                    const prevFrame = frameStack[frameStack.length - 1];
-                    const newFrame = new RenderFrame(frameObject);
-                    if (frameObject.parameters.has(FrameParamKeys.Direction)) {
-                        newFrame.direction =
-                            frameObject.parameters.get(FrameParamKeys.Direction);
-                    }
-                    if (frameObject.parameters.has(FrameParamKeys.Padding)) {
-                        newFrame.padding =
-                            frameObject.parameters.get(FrameParamKeys.Padding);
-                    }
-                    if (frameObject.parameters.has(FrameParamKeys.Border)) {
-                        newFrame.borderWidth =
-                            frameObject.parameters.get(FrameParamKeys.Border);
-                    }
-                    if (frameObject.parameters.has(FrameParamKeys.Width)) {
-                        newFrame.width =
-                            frameObject.parameters.get(FrameParamKeys.Width);
+                case SequenceAction.Frame: {
+                    const [, frameObject, frameAction] = sequenceStep;
+                    if (frameAction === FrameAction.Enter) {
+                        const prevFrame = frameStack[frameStack.length - 1];
+                        const newFrame = new RenderFrame(frameObject);
+                        if (frameObject.parameters.has(FrameParamKeys.Direction)) {
+                            newFrame.direction =
+                                frameObject.parameters.get(FrameParamKeys.Direction);
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Padding)) {
+                            newFrame.padding = milsToMM(frameObject.parameters.get(FrameParamKeys.Padding));
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Border)) {
+                            newFrame.borderWidth =
+                                frameObject.parameters.get(FrameParamKeys.Border);
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Width)) {
+                            newFrame.width = milsToMM(frameObject.parameters.get(FrameParamKeys.Width));
+                        }
+                        if (frameObject.parameters.has(FrameParamKeys.Height)) {
+                            newFrame.height = milsToMM(frameObject.parameters.get(FrameParamKeys.Height));
+                        }
+                        containerFrames.push(newFrame);
+                        frameStack.push(newFrame);
+                        prevFrame && prevFrame.innerItems.push(newFrame);
                     }
-                    if (frameObject.parameters.has(FrameParamKeys.Height)) {
-                        newFrame.height =
-                            frameObject.parameters.get(FrameParamKeys.Height);
+                    else if (frameAction === FrameAction.Exit) {
+                        frameStack.pop();
                     }
-                    containerFrames.push(newFrame);
-                    frameStack.push(newFrame);
-                    prevFrame && prevFrame.innerItems.push(newFrame);
-                }
-                else if (frameAction === FrameAction.Exit) {
-                    frameStack.pop();
+                    break;
                 }
             }
-        }
+        });
         return {
             graph,
             containerFrames,
@@ -586,10 +751,10 @@ export class LayoutEngine {
         this.print('===== placing subgraphs =====');
         this.print('number of subgraphs: ', subGraphs.length);
         const subgraphInfo = [];
-        subGraphs.forEach(innerGraph => {
+        subGraphs.forEach(subGraph => {
             let smallestNodeIdLevel = Number.POSITIVE_INFINITY;
-            let smallestNodeId = null;
-            innerGraph.forEach(nodeId => {
+            let smallestNodeId = "";
+            subGraph.forEach(nodeId => {
                 const [, , sequenceId] = graph.node(nodeId);
                 if (sequenceId < smallestNodeIdLevel) {
                     smallestNodeIdLevel = sequenceId;
@@ -632,12 +797,7 @@ export class LayoutEngine {
             }
             return accum;
         }, []);
-        if (this.placeSubgraphVersion === 1) {
-            this.placeSubgraph(graph, firstNodeId, subgraphEdges);
-        }
-        else if (this.placeSubgraphVersion === 2) {
-            this.placeSubgraphV2(graph, firstNodeId, subgraphEdges);
-        }
+        this.placeSubgraphV2(graph, firstNodeId, subgraphEdges);
     }
     placeSubgraphV2(graph, firstNodeId, subgraphEdges) {
         let firstNodePlaced = false;
@@ -800,59 +960,6 @@ export class LayoutEngine {
         this.print('removed other origin');
         this.print('merge completed');
     }
-    placeSubgraph(graph, firstNodeId, subgraphEdges) {
-        let firstNodePlaced = false;
-        subgraphEdges.forEach(edge => {
-            const [nodeId1, pin1, nodeId2, pin2] = graph.edge(edge);
-            const [, node1] = graph.node(nodeId1);
-            const [, node2] = graph.node(nodeId2);
-            if (nodeId1 === firstNodeId && !firstNodePlaced) {
-                this.print('first node placed at origin');
-                this.placeNodeAtPosition(numeric(0), 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);
@@ -1284,23 +1391,23 @@ export class RenderFrame extends RenderObject {
     padding = milsToMM(100);
     gap = milsToMM(100);
     borderWidth = numeric(5);
-    direction = FramePlotDirection.Column;
+    direction = FramePlotDirection.Row;
     width = null;
     height = null;
     subgraphId = "";
-    type;
+    renderType;
     containsTitle = false;
     constructor(frame, type = RenderFrameType.Container) {
         super();
         this.frame = frame;
-        this.type = type;
+        this.renderType = type;
     }
     toString() {
         let name = "";
-        if (this.type === RenderFrameType.Container) {
+        if (this.renderType === RenderFrameType.Container) {
             name = 'container_' + this.frame.frameId;
         }
-        else if (this.type === RenderFrameType.Elements) {
+        else if (this.renderType === RenderFrameType.Elements) {
             name = 'elements_' + this.subgraphId;
         }
         return name + ": " + this.x + "," + this.y
@@ -1343,9 +1450,17 @@ export function ExtractDrawingRects(drawing) {
     return drawing.getCommands().filter(item => {
         return (item[0] === PlaceHolderCommands.rect);
     }).map(item => {
+        const map = item[2];
+        let className = undefined;
+        if (map.has('class')) {
+            className = map.get('class');
+        }
         return {
+            x: item[1][0],
+            y: item[1][1],
             width: item[1][2],
             height: item[1][3],
+            className
         };
     });
 }