circuitscript 0.5.4 → 0.5.5

package/dist/cjs/render/layout.js

@@ -11,6 +11,7 @@ const globals_js_1 = require("../globals.js");
 const geometry_js_1 = require("./geometry.js");
 const Frame_js_1 = require("../objects/Frame.js");
 const utils_js_1 = require("../utils.js");
+const errors_js_1 = require("../errors.js");
 const types_js_1 = require("../objects/types.js");
 const PinDefinition_js_1 = require("../objects/PinDefinition.js");
 const helpers_js_1 = require("../helpers.js");
@@ -182,6 +183,7 @@ class LayoutEngine {
     placeFrames(graph, subgraphInfo, frameObjects) {
         const baseFrame = frameObjects[0];
         baseFrame.padding = (0, NumericValue_js_1.numeric)(0);
+        baseFrame.gap = (0, NumericValue_js_1.numeric)(globals_js_1.defaultGridSizeUnits);
         baseFrame.borderWidth = (0, NumericValue_js_1.numeric)(0);
         if (this.showBaseFrame) {
             baseFrame.borderWidth = (0, NumericValue_js_1.numeric)(5);
@@ -258,51 +260,49 @@ class LayoutEngine {
         });
     }
     placeAndSizeFrame(frame, level = 0) {
+        if (level > 50) {
+            throw 'Exceeded placeAndSizeFrame depth limit!';
+        }
+        this.printLevel(level, `placeAndSizeFrame called`);
         const innerFrames = frame.innerItems;
         const gridSize = globals_js_1.defaultGridSizeUnits;
         const frameDirection = frame.direction;
-        const boundPoints = [];
-        const frameSizes = innerFrames.map(innerFrame => {
+        const isFrameDirectionRow = frameDirection === Frame_js_1.FramePlotDirection.Row;
+        this.printLevel(level, `frame info, id: ${frame.frameId}, direction: ${frameDirection}, virtual: ${frame.virtual}`);
+        const frameParams = frame.frame.parameters;
+        let hAlign = geometry_js_1.HorizontalAlign.Center;
+        let vAlign = geometry_js_1.VerticalAlign.Top;
+        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 (frame.overwriteAlignParamsForTitleLayout) {
+            hAlign = geometry_js_1.HorizontalAlign.Center;
+            vAlign = geometry_js_1.VerticalAlign.Top;
+        }
+        this.printLevel(level, `align params: ${hAlign} ${vAlign}`);
+        this.printLevel(level, `size inner frames, length: ${innerFrames.length}`);
+        for (const innerFrame of innerFrames) {
             if (innerFrame.renderType === RenderFrameType.Elements) {
-                innerFrame.bounds = (0, utils_js_1.resizeToNearestGrid)(innerFrame.bounds, gridSize);
+                if (!innerFrame.didResize) {
+                    innerFrame.bounds = (0, utils_js_1.resizeToNearestGrid)(innerFrame.bounds, gridSize);
+                    innerFrame.didResize = true;
+                }
                 innerFrame.translateX = innerFrame.bounds.xmin;
                 innerFrame.translateY = innerFrame.bounds.ymin;
+                this.printLevel(level, `element frame, id: ${innerFrame.frameId}, bounds: ${JSON.stringify(innerFrame.bounds)}`);
             }
             else {
                 this.placeAndSizeFrame(innerFrame, level + 1);
             }
-            return innerFrame.bounds;
-        });
-        const maxWidth = Math.max(...frameSizes.map(item => {
-            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 = 0;
-        const inRowShouldCenterInnerFrames = true;
-        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) {
-                    titleFrameWidth = width;
-                    return accum;
-                }
-                return accum + width +
-                    ((index + 1 < frameSizes.length) ? frame.gap.toNumber() : 0);
-            }, 0);
-        }
-        else {
-            accumRowWidth = maxWidth;
         }
+        this.printLevel(level, 'done sizing inner frames');
         let frameWidth = (0, NumericValue_js_1.numeric)(0);
         let frameHeight = (0, NumericValue_js_1.numeric)(0);
-        let frameXMin = (0, NumericValue_js_1.numeric)(0);
-        let frameYMin = (0, NumericValue_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);
@@ -332,6 +332,9 @@ class LayoutEngine {
                     (0, helpers_js_1.milsToMM)(y2).sub(frameMinY).toNumber(),
                 ]);
             });
+            if (!frameParams.has(Frame_js_1.FrameParamKeys.VerticalAlign)) {
+                vAlign = geometry_js_1.VerticalAlign.Center;
+            }
         }
         else {
             if (frame.width !== null) {
@@ -341,197 +344,144 @@ class LayoutEngine {
                 frameHeight = frame.height;
             }
         }
-        const offsetX = frame.padding;
-        const offsetY = frame.padding;
-        let centeredOffsetX = 0;
-        let widthForTitle;
-        if (frameWidth.toNumber() !== 0) {
-            widthForTitle = frameWidth.toNumber();
-        }
-        else if (titleFrameWidth > accumRowWidth) {
-            widthForTitle = titleFrameWidth;
+        const innerFramesWithoutTitle = innerFrames.filter(item => !item.containsTitle);
+        this.printLevel(level, `split into lines, width: ${frameWidth.toNumber()} height: ${frameHeight.toNumber()}, padding: ${frame.padding.toNumber()}, gap: ${frame.gap.toNumber()}, direction: ${frameDirection}`);
+        const frameLines = SplitIntoLines(frameWidth, frameHeight, frame.padding, frame.gap, frameDirection, innerFramesWithoutTitle, avoidAreas);
+        this.printLevel(level, `frame lines: ${frameLines.length}`);
+        if (frameLines.length > 1) {
+            this.printLevel(level, `split lines to containers`);
+            const newInnerFrames = [];
+            for (const line of frameLines) {
+                const container = RenderFrame.createContainer(frame.gap);
+                container.innerItems = [...line];
+                container.direction = frameDirection;
+                container.frame.parameters.set(Frame_js_1.FrameParamKeys.HorizontalAlign, hAlign);
+                container.frame.parameters.set(Frame_js_1.FrameParamKeys.VerticalAlign, vAlign);
+                if (isFrameDirectionRow) {
+                    if (frameWidth.toNumber() !== 0) {
+                        container.width = frameWidth.sub(frame.padding.mul(2));
+                    }
+                    const itemHeights = container.innerItems.map(frame => {
+                        const bounds = frame.bounds;
+                        return (bounds.ymax - bounds.ymin);
+                    });
+                    const maxHeight = Math.max(...itemHeights);
+                    container.height = (0, NumericValue_js_1.numeric)(maxHeight);
+                    this.printLevel(level, `set container size w: ${container.width}, h: ${container.height}`);
+                }
+                else {
+                    if (frameHeight.toNumber() !== 0) {
+                        container.height = frameHeight.sub(frame.padding.mul(2));
+                    }
+                }
+                newInnerFrames.push(container);
+            }
+            const container = RenderFrame.createContainer(frame.gap);
+            container.direction = isFrameDirectionRow ? Frame_js_1.FramePlotDirection.Column : Frame_js_1.FramePlotDirection.Row;
+            container.innerItems = newInnerFrames;
+            frame.innerItems = [container];
+            this.placeAndSizeFrame(frame, level + 1);
         }
         else {
-            widthForTitle = accumRowWidth;
-        }
-        if (frameDirection === Frame_js_1.FramePlotDirection.Row &&
-            inRowShouldCenterInnerFrames &&
-            titleFrameWidth !== null && titleFrameWidth > accumRowWidth) {
-            centeredOffsetX =
-                (0, utils_js_1.toNearestGrid)(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
-        }
-        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, NumericValue_js_1.numeric)(0);
-        let accumY = (0, NumericValue_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, NumericValue_js_1.numeric)(0);
-            let innerFrameY = (0, NumericValue_js_1.numeric)(0);
-            if (innerFrame.containsTitle) {
-                innerFrame.x = offsetX.add(accumX);
-                innerFrame.y = offsetY.add(accumY);
-                accumY = accumY.add(innerFrameHeight).add(frame.gap);
+            let accumValue = frame.padding.copy();
+            const bounds = [];
+            for (const innerFrame of innerFrames) {
+                const { width: innerFrameWidth, height: innerFrameHeight } = (0, utils_js_1.getBoundsSize)(innerFrame.bounds);
+                if (isFrameDirectionRow) {
+                    innerFrame.x = accumValue.copy();
+                    innerFrame.y = frame.padding.copy();
+                    accumValue = accumValue.add(innerFrameWidth).add(frame.gap);
+                }
+                else {
+                    innerFrame.x = frame.padding.copy();
+                    innerFrame.y = accumValue.copy();
+                    accumValue = accumValue.add(innerFrameHeight).add(frame.gap);
+                }
+                bounds.push([innerFrame.x.toNumber(), innerFrame.y.toNumber()], [
+                    innerFrame.x.add(innerFrameWidth).toNumber(),
+                    innerFrame.y.add(innerFrameHeight).toNumber(),
+                ]);
             }
-            else {
-                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 (boundPoints.length > 0 && (doesExceedFrameHeight || doesOverlapAreasToAvoid)) {
-                            innerFrameY = offsetY;
-                            const nextX = (0, NumericValue_js_1.numeric)(xmax).sub(offsetX).add(frame.gap);
-                            innerFrameX = offsetX.add(nextX);
-                            accumY = (0, NumericValue_js_1.numeric)(0);
-                            accumX = nextX;
-                        }
-                        arrangeLineAttempts++;
-                        if (arrangeLineAttempts > maxAttempts) {
-                            throw "Failed to place inner frame";
-                        }
+            const frameInnerBounds = getBoundsFromPoints(bounds);
+            const contentsPaddedBounds = (0, utils_js_1.resizeBounds)(frameInnerBounds, frame.padding.toNumber());
+            const contentsPaddedWidth = (0, NumericValue_js_1.roundValue)(contentsPaddedBounds.xmax - contentsPaddedBounds.xmin).toNumber();
+            const contentsPaddedHeight = (0, NumericValue_js_1.roundValue)(contentsPaddedBounds.ymax - contentsPaddedBounds.ymin).toNumber();
+            const contentsWidth = (0, NumericValue_js_1.roundValue)(frameInnerBounds.xmax - frameInnerBounds.xmin).toNumber();
+            const contentsHeight = (0, NumericValue_js_1.roundValue)(frameInnerBounds.ymax - frameInnerBounds.ymin).toNumber();
+            if (frameWidth.toNumber() === 0) {
+                frameWidth = (0, NumericValue_js_1.numeric)(contentsPaddedWidth);
+            }
+            if (frameHeight.toNumber() === 0) {
+                frameHeight = (0, NumericValue_js_1.numeric)(contentsPaddedHeight);
+            }
+            frame.bounds = {
+                xmin: contentsPaddedBounds.xmin,
+                xmax: contentsPaddedBounds.xmin + frameWidth.toNumber(),
+                ymin: contentsPaddedBounds.ymin,
+                ymax: contentsPaddedBounds.ymin + frameHeight.toNumber(),
+            };
+            this.printLevel(level, `alignment h: ${hAlign}, v: ${vAlign}`);
+            const tmpFrameWidth = frameWidth.sub(frame.padding.mul(2));
+            const tmpFrameHeight = frameHeight.sub(frame.padding.mul(2));
+            this.printLevel(level, `inner frame size, width: ${tmpFrameWidth}, height: ${tmpFrameHeight}`);
+            let offsetX = 0;
+            let offsetY = 0;
+            if (isFrameDirectionRow) {
+                switch (hAlign) {
+                    case geometry_js_1.HorizontalAlign.Left:
+                        offsetX = 0;
+                        break;
+                    case geometry_js_1.HorizontalAlign.Center:
+                        offsetX = (0, utils_js_1.toNearestGrid)(tmpFrameWidth.sub(contentsWidth).div(2).toNumber(), gridSize);
+                        break;
+                    case geometry_js_1.HorizontalAlign.Right:
+                        offsetX = (0, utils_js_1.toNearestGrid)(tmpFrameWidth.sub(contentsWidth).toNumber(), gridSize);
+                        break;
+                }
+                offsetX = (0, NumericValue_js_1.roundValue)(offsetX).toNumber();
+                offsetY = 0;
+                for (const innerFrame of innerFrames) {
+                    const { height: innerFrameHeight } = (0, utils_js_1.getBoundsSize)(innerFrame.bounds);
+                    if (vAlign === geometry_js_1.VerticalAlign.Center) {
+                        offsetY = (0, utils_js_1.toNearestGrid)(tmpFrameHeight.sub(innerFrameHeight).div(2).toNumber(), gridSize);
+                    }
+                    else if (vAlign === geometry_js_1.VerticalAlign.Bottom) {
+                        offsetY = (0, utils_js_1.toNearestGrid)(tmpFrameHeight.sub(innerFrameHeight).toNumber(), gridSize);
                     }
-                    innerFrame.x = innerFrameX;
-                    innerFrame.y = innerFrameY;
-                    accumY = accumY.add(innerFrameHeight).add(frame.gap);
+                    offsetY = (0, NumericValue_js_1.roundValue)(offsetY).toNumber();
+                    innerFrame.x = innerFrame.x.add(offsetX);
+                    innerFrame.y = innerFrame.y.add(offsetY);
                 }
-                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 (boundPoints.length > 0 && (doesExceedFrameWidth || doesOverlapAreasToAvoid)) {
-                            innerFrameX = offsetX.add(centeredOffsetX);
-                            const { ymax } = getBoundsFromPoints(boundPoints);
-                            const nextY = (0, NumericValue_js_1.numeric)(ymax).sub(offsetY).add(frame.gap);
-                            innerFrameY = offsetY.add(nextY);
-                            accumX = (0, NumericValue_js_1.numeric)(0);
-                            accumY = nextY;
-                        }
-                        else {
-                            break;
-                        }
-                        arrangeLineAttempts++;
-                        if (arrangeLineAttempts > maxAttempts) {
-                            throw "Failed to place inner frame";
-                        }
+            }
+            else {
+                switch (vAlign) {
+                    case geometry_js_1.VerticalAlign.Top:
+                        offsetY = 0;
+                        break;
+                    case geometry_js_1.VerticalAlign.Center:
+                        offsetY = (0, utils_js_1.toNearestGrid)(tmpFrameHeight.sub(contentsHeight).div(2).toNumber(), gridSize);
+                        break;
+                    case geometry_js_1.VerticalAlign.Bottom:
+                        offsetY = (0, utils_js_1.toNearestGrid)(tmpFrameHeight.sub(contentsHeight).toNumber(), gridSize);
+                        break;
+                }
+                offsetX = 0;
+                offsetY = (0, NumericValue_js_1.roundValue)(offsetY).toNumber();
+                for (const innerFrame of innerFrames) {
+                    const { width: innerFrameHeight } = (0, utils_js_1.getBoundsSize)(innerFrame.bounds);
+                    if (hAlign === geometry_js_1.HorizontalAlign.Center) {
+                        offsetX = (0, utils_js_1.toNearestGrid)(tmpFrameWidth.sub(innerFrameHeight).div(2).toNumber(), gridSize);
                     }
-                    innerFrame.x = innerFrameX;
-                    innerFrame.y = innerFrameY;
-                    accumX = accumX.add(innerFrameWidth).add(frame.gap);
+                    else if (hAlign === geometry_js_1.HorizontalAlign.Right) {
+                        offsetX = (0, utils_js_1.toNearestGrid)(tmpFrameWidth.sub(innerFrameHeight).toNumber(), gridSize);
+                    }
+                    offsetX = (0, NumericValue_js_1.roundValue)(offsetX).toNumber();
+                    innerFrame.x = innerFrame.x.add(offsetX);
+                    innerFrame.y = innerFrame.y.add(offsetY);
                 }
             }
-            boundPoints.push([
-                innerFrame.x.toNumber(),
-                innerFrame.y.toNumber()
-            ], [
-                innerFrame.x.add(innerFrameWidth).toNumber(),
-                innerFrame.y.add(innerFrameHeight).toNumber()
-            ]);
-        });
-        const contentsBounds = (0, utils_js_1.resizeBounds)(getBoundsFromPoints(boundPoints), frame.padding.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, NumericValue_js_1.numeric)(0);
-            frameYMin = (0, NumericValue_js_1.numeric)(0);
-        }
-        else {
-            frameXMin = (0, NumericValue_js_1.numeric)(contentsBounds.xmin);
-            frameYMin = (0, NumericValue_js_1.numeric)(contentsBounds.ymin);
-        }
-        if (frameWidth.toNumber() === 0) {
-            frameWidth = (0, NumericValue_js_1.numeric)(contentsWidth);
-        }
-        if (frameHeight.toNumber() === 0) {
-            frameHeight = (0, NumericValue_js_1.numeric)(contentsHeight);
-        }
-        const titleFrame = innerFrames.find(frame => {
-            return frame.containsTitle;
-        });
-        if (titleFrame) {
-            const { width: innerFrameWidth } = (0, utils_js_1.getBoundsSize)(titleFrame.bounds);
-            let titleOffset = 0;
-            switch (title_align) {
-                case geometry_js_1.HorizontalAlign.Left:
-                    titleOffset = 0;
-                    break;
-                case geometry_js_1.HorizontalAlign.Middle:
-                    titleOffset = (0, utils_js_1.toNearestGrid)(widthForTitle / 2 - innerFrameWidth / 2, gridSize);
-                    break;
-                case geometry_js_1.HorizontalAlign.Right:
-                    titleOffset = frameWidth.toNumber() - innerFrameWidth;
-                    break;
-            }
-            titleFrame.x = titleFrame.x.add(titleOffset);
-        }
-        let frameOffsetX = 0;
-        let frameOffsetY = 0;
-        switch (hAlign) {
-            case geometry_js_1.HorizontalAlign.Left:
-                frameOffsetX = 0;
-                break;
-            case geometry_js_1.HorizontalAlign.Middle:
-                frameOffsetX = (0, utils_js_1.toNearestGrid)((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
-                break;
-            case geometry_js_1.HorizontalAlign.Right:
-                frameOffsetX = (0, utils_js_1.toNearestGrid)(frameWidth.toNumber() - contentsWidth, gridSize);
-                break;
-        }
-        switch (vAlign) {
-            case geometry_js_1.VerticalAlign.Top:
-                frameOffsetY = 0;
-                break;
-            case geometry_js_1.VerticalAlign.Middle:
-                frameOffsetY = (0, utils_js_1.toNearestGrid)((frameHeight.toNumber() - contentsHeight) / 2, gridSize);
-                break;
-            case geometry_js_1.VerticalAlign.Bottom:
-                frameOffsetY = (0, utils_js_1.toNearestGrid)(frameHeight.toNumber() - contentsHeight, gridSize);
-                break;
-        }
-        innerFrames.forEach(innerFrame => {
-            innerFrame.x = innerFrame.x.add(frameOffsetX);
-            innerFrame.y = innerFrame.y.add(frameOffsetY);
-        });
-        frame.bounds = {
-            xmin: frameXMin.toNumber(),
-            ymin: frameYMin.toNumber(),
-            xmax: frameXMin.toNumber() + frameWidth.toNumber(),
-            ymax: frameYMin.toNumber() + frameHeight.toNumber(),
-        };
+        return;
     }
     dumpFrame(frame, level = 0) {
         this.print(level, "".padStart(level * 4), 'frame, items:', frame.innerItems.length);
@@ -598,33 +548,80 @@ class LayoutEngine {
         };
     }
     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(Frame_js_1.FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
-                tmpFrame.containsTitle = true;
-                tmpFrame.subgraphId = title.replace(/\s/g, "_");
-                const textObject = new RenderText(title);
-                textObject.fontSize = (0, NumericValue_js_1.numeric)(globals_js_1.defaultFrameTitleTextSize);
-                textObject.fontWeight = 'bold';
-                textObject.symbol.refreshDrawing();
-                tmpFrame.innerItems.push(textObject);
-                const tmpBox = textObject.symbol.drawing.getBoundingBox();
-                tmpFrame.bounds = {
-                    xmin: tmpBox.start[0],
-                    ymin: tmpBox.start[1],
-                    xmax: tmpBox.start[0] + tmpBox.width,
-                    ymax: tmpBox.start[1] + tmpBox.height
-                };
-                textObject.x = (0, NumericValue_js_1.numeric)(0);
-                textObject.y = (0, NumericValue_js_1.numeric)(0);
-                frame.innerItems.splice(0, 0, tmpFrame);
-                this.printLevel(level, frame, 'added text', tmpFrame);
-                textObjects.push(textObject);
-                elementFrames.splice(0, 0, tmpFrame);
+        if (frame.renderType !== RenderFrameType.Container) {
+            return;
+        }
+        const frameObject = frame.frame;
+        const frameParams = frame.frame.parameters;
+        const isSheetFrame = frameObject.frameType === globals_js_1.FrameType.Sheet;
+        if (frameParams.has(Frame_js_1.FrameParamKeys.Title) && !isSheetFrame) {
+            const title = frameParams.get(Frame_js_1.FrameParamKeys.Title);
+            const titleFrame = new RenderFrame(new Frame_js_1.Frame(Frame_js_1.FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
+            titleFrame.containsTitle = true;
+            titleFrame.subgraphId = title.replace(/\s/g, "_");
+            const textObject = new RenderText(title);
+            textObject.fontSize = (0, NumericValue_js_1.numeric)(globals_js_1.defaultFrameTitleTextSize);
+            textObject.fontWeight = 'bold';
+            textObject.x = (0, NumericValue_js_1.numeric)(0);
+            textObject.y = (0, NumericValue_js_1.numeric)(0);
+            textObject.symbol.refreshDrawing();
+            titleFrame.innerItems = [textObject];
+            const tmpBox = textObject.symbol.drawing.getBoundingBox();
+            const tmpBounds = {
+                xmin: tmpBox.start[0],
+                ymin: tmpBox.start[1],
+                xmax: tmpBox.start[0] + tmpBox.width,
+                ymax: tmpBox.start[1] + tmpBox.height
+            };
+            titleFrame.bounds = (0, utils_js_1.resizeToNearestGrid)(tmpBounds, globals_js_1.defaultGridSizeUnits);
+            titleFrame.didResize = true;
+            const titleFrameContainer = RenderFrame.createContainer((0, NumericValue_js_1.numeric)(0));
+            titleFrameContainer.innerItems = [titleFrame];
+            if (frameParams.has(Frame_js_1.FrameParamKeys.TitleAlign)) {
+                const alignValue = frameParams.get(Frame_js_1.FrameParamKeys.TitleAlign);
+                titleFrameContainer.frame.parameters.set(Frame_js_1.FrameParamKeys.HorizontalAlign, alignValue);
+            }
+            const container = RenderFrame.createContainer(frame.gap);
+            container.direction = frame.direction;
+            container.innerItems = [...frame.innerItems];
+            let hAlign = geometry_js_1.HorizontalAlign.Center;
+            let vAlign = geometry_js_1.VerticalAlign.Center;
+            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);
+            }
+            container.frame.parameters.set(Frame_js_1.FrameParamKeys.HorizontalAlign, hAlign);
+            container.frame.parameters.set(Frame_js_1.FrameParamKeys.VerticalAlign, vAlign);
+            const columnLayoutContainer = RenderFrame.createContainer((0, NumericValue_js_1.numeric)(globals_js_1.defaultGridSizeUnits));
+            columnLayoutContainer.direction = Frame_js_1.FramePlotDirection.Column;
+            columnLayoutContainer.innerItems = [
+                titleFrameContainer,
+                container,
+            ];
+            const frameWidth = frame.width ?? (0, NumericValue_js_1.numeric)(0);
+            if (frameWidth.toNumber() !== 0) {
+                columnLayoutContainer.width = frameWidth.sub(frame.padding.mul(2));
+                container.width = columnLayoutContainer.width.copy();
+                titleFrameContainer.width = columnLayoutContainer.width.copy();
             }
+            const frameHeight = frame.height ?? (0, NumericValue_js_1.numeric)(0);
+            if (frameHeight.toNumber() !== 0) {
+                columnLayoutContainer.height = frameHeight.sub(frame.padding.mul(2));
+                const { height: titleFrameHeight } = (0, utils_js_1.getBoundsSize)(titleFrame.bounds);
+                container.height = columnLayoutContainer.height
+                    .sub(titleFrameHeight)
+                    .sub(columnLayoutContainer.gap);
+            }
+            frame.innerItems = [columnLayoutContainer];
+            frame.overwriteAlignParamsForTitleLayout = true;
+            columnLayoutContainer.overwriteAlignParamsForTitleLayout = true;
+            this.printLevel(level, frame, 'added text', titleFrame);
+            textObjects.push(textObject);
+            elementFrames.splice(0, 0, titleFrame);
         }
     }
     sizeSubGraphs(graph) {
@@ -784,7 +781,7 @@ class LayoutEngine {
                     const targetOriginNode = findOriginNode(targetNode);
                     const itemOriginNode = findOriginNode(item);
                     if (targetOriginNode !== itemOriginNode) {
-                        throw "Wire auto length failed. Please specify a fixed wire length.";
+                        throw new errors_js_1.AutoWireFailedError_("Wire auto length failed. Please specify a fixed wire length.", item.wire);
                     }
                     const [untilX, untilY] = getNodePositionAtPin(targetNode, pin);
                     item.setEndAuto(untilX, untilY);
@@ -921,17 +918,6 @@ function getNodePositionAtPin(item, pin) {
         (0, NumericValue_js_1.roundValue)(x), (0, NumericValue_js_1.roundValue)(y)
     ];
 }
-function getNeighbours(graph, nodeIds) {
-    return nodeIds.reduce((accum, nodeId) => {
-        const tmp = graph.neighbors(nodeId);
-        if (tmp) {
-            tmp.forEach(neighborNodeId => {
-                accum.push([nodeId, neighborNodeId]);
-            });
-        }
-        return accum;
-    }, []);
-}
 function applyComponentParamsToSymbol(componentUnit, symbol) {
     const { widthProp = null, heightProp = null } = componentUnit;
     const newMap = new Map(componentUnit.parameters);
@@ -1251,7 +1237,7 @@ class RenderText extends RenderObject {
 }
 exports.RenderText = RenderText;
 class RenderFrame extends RenderObject {
-    constructor(frame, type = RenderFrameType.Container) {
+    constructor(frame, type = RenderFrameType.Container, virtual = false) {
         super();
         this.bounds = null;
         this.innerItems = [];
@@ -1260,15 +1246,21 @@ class RenderFrame extends RenderObject {
         this.padding = (0, helpers_js_1.milsToMM)(100);
         this.gap = (0, helpers_js_1.milsToMM)(100);
         this.borderWidth = (0, NumericValue_js_1.numeric)(5);
+        this.borderColor = "#111";
         this.direction = Frame_js_1.FramePlotDirection.Row;
         this.width = null;
         this.height = null;
         this.subgraphId = "";
         this.containsTitle = false;
+        this.overwriteAlignParamsForTitleLayout = false;
+        this.virtual = false;
+        this.didResize = false;
+        this.lineIndex = 0;
         this.frame = frame;
         this.renderType = type;
         this.frameId = RenderFrame.FrameIdCounter;
         RenderFrame.FrameIdCounter++;
+        this.virtual = virtual;
     }
     toString() {
         let name = "";
@@ -1281,6 +1273,13 @@ class RenderFrame extends RenderObject {
         return name + ": " + this.x + "," + this.y
             + " bounds:" + (this.bounds && (0, utils_js_1.printBounds)(this.bounds));
     }
+    static createContainer(gap) {
+        const tmpFrame = new RenderFrame(new Frame_js_1.Frame(Frame_js_1.FixedFrameIds.FrameIdNotUsed), RenderFrameType.Container, true);
+        tmpFrame.gap = gap.copy();
+        tmpFrame.borderWidth = (0, NumericValue_js_1.numeric)(0);
+        tmpFrame.padding = (0, NumericValue_js_1.numeric)(0);
+        return tmpFrame;
+    }
 }
 exports.RenderFrame = RenderFrame;
 RenderFrame.FrameIdCounter = 0;
@@ -1341,3 +1340,76 @@ exports.ExtractDrawingRects = ExtractDrawingRects;
 function isPointOverlap(x, y, other) {
     return (x >= other.x && y >= other.y && x <= (other.x + other.width) && y <= (other.y + other.height));
 }
+function SplitIntoLines(frameWidth, frameHeight, framePadding, frameGap, frameDirection, innerFrames, avoidAreas) {
+    if (frameWidth.toNumber() === 0) {
+        frameWidth = (0, NumericValue_js_1.numeric)(1e24);
+    }
+    if (frameHeight.toNumber() === 0) {
+        frameHeight = (0, NumericValue_js_1.numeric)(1e24);
+    }
+    const allGroups = [];
+    let currentGroup = [];
+    const tmpFrameWidth = frameWidth.sub(framePadding.mul(2)).toNumber();
+    const tmpFrameHeight = frameHeight.sub(framePadding.mul(2)).toNumber();
+    const isRowDirection = frameDirection === Frame_js_1.FramePlotDirection.Row;
+    const dimensionLimit = isRowDirection ? tmpFrameWidth : tmpFrameHeight;
+    let accumX = (0, NumericValue_js_1.numeric)(0);
+    let accumY = (0, NumericValue_js_1.numeric)(0);
+    const framePaddingValue = framePadding.toNumber();
+    avoidAreas = avoidAreas.map(bounds => {
+        return [
+            bounds[0] - framePaddingValue,
+            bounds[1] - framePaddingValue,
+            bounds[2] - framePaddingValue,
+            bounds[3] - framePaddingValue
+        ];
+    });
+    for (const innerFrame of innerFrames) {
+        const { width: innerFrameWidth, height: innerFrameHeight } = (0, utils_js_1.getBoundsSize)(innerFrame.bounds);
+        const tmpX1 = accumX.toNumber();
+        const tmpY1 = accumY.toNumber();
+        const tmpX2 = tmpX1 + innerFrameWidth;
+        const tmpY2 = tmpY1 + innerFrameHeight;
+        const frameArea = [tmpX1, tmpY1, tmpX2, tmpY2];
+        const conditionOverlapAvoidAreas = avoidAreas.filter(area => (0, utils_js_1.areasOverlap)(frameArea, area)).length > 0;
+        if (isRowDirection) {
+            const tmpX = accumX.add(innerFrameWidth).toNumber();
+            const conditionExceedDimension = tmpX > dimensionLimit;
+            if ((conditionExceedDimension || conditionOverlapAvoidAreas) && currentGroup.length > 0) {
+                allGroups.push(currentGroup);
+                const heightsInLine = currentGroup.map(item => item.height);
+                const maxHeight = Math.max(...heightsInLine);
+                accumX = (0, NumericValue_js_1.numeric)(0);
+                accumY = accumY.add(frameGap).add(maxHeight);
+                currentGroup = [];
+            }
+            accumX = accumX.add(innerFrameWidth).add(frameGap);
+        }
+        else {
+            const tmpY = accumY.add(innerFrameHeight).toNumber();
+            const conditionExistDimension = tmpY > dimensionLimit;
+            if ((conditionExistDimension || conditionOverlapAvoidAreas) && currentGroup.length > 0) {
+                allGroups.push(currentGroup);
+                const widthsInLine = currentGroup.map(item => item.width);
+                const maxWidth = Math.max(...widthsInLine);
+                accumX = accumX.add(frameGap).add(maxWidth);
+                accumY = (0, NumericValue_js_1.numeric)(0);
+                currentGroup = [];
+            }
+            accumY = accumY.add(innerFrameHeight).add(frameGap);
+        }
+        currentGroup.push({
+            x: accumX.toNumber(),
+            y: accumY.toNumber(),
+            width: innerFrameWidth,
+            height: innerFrameHeight,
+            frame: innerFrame
+        });
+    }
+    if (currentGroup.length > 0) {
+        allGroups.push(currentGroup);
+    }
+    return allGroups.map(lines => {
+        return lines.map(layoutItem => layoutItem.frame);
+    });
+}