circuitscript 0.5.4 → 0.5.6

package/dist/esm/render/layout.js

@@ -5,6 +5,7 @@ import { DefaultComponentUnit, defaultFrameTitleTextSize, defaultGridSizeUnits,
 import { Geometry, HorizontalAlign, VerticalAlign } from './geometry.js';
 import { FixedFrameIds, Frame, FrameParamKeys, FramePlotDirection } from '../objects/Frame.js';
 import { areasOverlap, combineMaps, getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, toNearestGrid } from '../utils.js';
+import { AutoWireFailedError_ } from "../errors.js";
 import { Direction } from '../objects/types.js';
 import { PinId } from '../objects/PinDefinition.js';
 import { milsToMM, UnitDimension } from '../helpers.js';
@@ -177,6 +178,7 @@ export class LayoutEngine {
     placeFrames(graph, subgraphInfo, frameObjects) {
         const baseFrame = frameObjects[0];
         baseFrame.padding = numeric(0);
+        baseFrame.gap = numeric(defaultGridSizeUnits);
         baseFrame.borderWidth = numeric(0);
         if (this.showBaseFrame) {
             baseFrame.borderWidth = numeric(5);
@@ -253,51 +255,49 @@ export 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 = defaultGridSizeUnits;
         const frameDirection = frame.direction;
-        const boundPoints = [];
-        const frameSizes = innerFrames.map(innerFrame => {
+        const isFrameDirectionRow = frameDirection === FramePlotDirection.Row;
+        this.printLevel(level, `frame info, id: ${frame.frameId}, direction: ${frameDirection}, virtual: ${frame.virtual}`);
+        const frameParams = frame.frame.parameters;
+        let hAlign = HorizontalAlign.Center;
+        let vAlign = VerticalAlign.Top;
+        if (frameParams.has(FrameParamKeys.HorizontalAlign)) {
+            hAlign =
+                frameParams.get(FrameParamKeys.HorizontalAlign);
+        }
+        if (frameParams.has(FrameParamKeys.VerticalAlign)) {
+            vAlign =
+                frameParams.get(FrameParamKeys.VerticalAlign);
+        }
+        if (frame.overwriteAlignParamsForTitleLayout) {
+            hAlign = HorizontalAlign.Center;
+            vAlign = 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 = resizeToNearestGrid(innerFrame.bounds, gridSize);
+                if (!innerFrame.didResize) {
+                    innerFrame.bounds = 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 } = getBoundsSize(item);
-            return width;
-        }));
-        const maxHeight = Math.max(...frameSizes.map(item => {
-            const { height } = getBoundsSize(item);
-            return height;
-        }));
-        let accumRowWidth = 0;
-        let titleFrameWidth = 0;
-        const inRowShouldCenterInnerFrames = true;
-        if (frameDirection === FramePlotDirection.Row) {
-            accumRowWidth = frameSizes.reduce((accum, item, index) => {
-                const { width } = 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 = 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);
@@ -327,6 +327,9 @@ export class LayoutEngine {
                     milsToMM(y2).sub(frameMinY).toNumber(),
                 ]);
             });
+            if (!frameParams.has(FrameParamKeys.VerticalAlign)) {
+                vAlign = VerticalAlign.Center;
+            }
         }
         else {
             if (frame.width !== null) {
@@ -336,197 +339,144 @@ export 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(FrameParamKeys.HorizontalAlign, hAlign);
+                container.frame.parameters.set(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 = 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 ? FramePlotDirection.Column : FramePlotDirection.Row;
+            container.innerItems = newInnerFrames;
+            frame.innerItems = [container];
+            this.placeAndSizeFrame(frame, level + 1);
         }
         else {
-            widthForTitle = accumRowWidth;
-        }
-        if (frameDirection === FramePlotDirection.Row &&
-            inRowShouldCenterInnerFrames &&
-            titleFrameWidth !== null && titleFrameWidth > accumRowWidth) {
-            centeredOffsetX =
-                toNearestGrid(titleFrameWidth / 2 - accumRowWidth / 2, gridSize);
-        }
-        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);
-                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 } = 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 === 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 (boundPoints.length > 0 && (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";
-                        }
+            const frameInnerBounds = getBoundsFromPoints(bounds);
+            const contentsPaddedBounds = resizeBounds(frameInnerBounds, frame.padding.toNumber());
+            const contentsPaddedWidth = roundValue(contentsPaddedBounds.xmax - contentsPaddedBounds.xmin).toNumber();
+            const contentsPaddedHeight = roundValue(contentsPaddedBounds.ymax - contentsPaddedBounds.ymin).toNumber();
+            const contentsWidth = roundValue(frameInnerBounds.xmax - frameInnerBounds.xmin).toNumber();
+            const contentsHeight = roundValue(frameInnerBounds.ymax - frameInnerBounds.ymin).toNumber();
+            if (frameWidth.toNumber() === 0) {
+                frameWidth = numeric(contentsPaddedWidth);
+            }
+            if (frameHeight.toNumber() === 0) {
+                frameHeight = 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 HorizontalAlign.Left:
+                        offsetX = 0;
+                        break;
+                    case HorizontalAlign.Center:
+                        offsetX = toNearestGrid(tmpFrameWidth.sub(contentsWidth).div(2).toNumber(), gridSize);
+                        break;
+                    case HorizontalAlign.Right:
+                        offsetX = toNearestGrid(tmpFrameWidth.sub(contentsWidth).toNumber(), gridSize);
+                        break;
+                }
+                offsetX = roundValue(offsetX).toNumber();
+                offsetY = 0;
+                for (const innerFrame of innerFrames) {
+                    const { height: innerFrameHeight } = getBoundsSize(innerFrame.bounds);
+                    if (vAlign === VerticalAlign.Center) {
+                        offsetY = toNearestGrid(tmpFrameHeight.sub(innerFrameHeight).div(2).toNumber(), gridSize);
+                    }
+                    else if (vAlign === VerticalAlign.Bottom) {
+                        offsetY = toNearestGrid(tmpFrameHeight.sub(innerFrameHeight).toNumber(), gridSize);
                     }
-                    innerFrame.x = innerFrameX;
-                    innerFrame.y = innerFrameY;
-                    accumY = accumY.add(innerFrameHeight).add(frame.gap);
+                    offsetY = roundValue(offsetY).toNumber();
+                    innerFrame.x = innerFrame.x.add(offsetX);
+                    innerFrame.y = innerFrame.y.add(offsetY);
                 }
-                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 (boundPoints.length > 0 && (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";
-                        }
+            }
+            else {
+                switch (vAlign) {
+                    case VerticalAlign.Top:
+                        offsetY = 0;
+                        break;
+                    case VerticalAlign.Center:
+                        offsetY = toNearestGrid(tmpFrameHeight.sub(contentsHeight).div(2).toNumber(), gridSize);
+                        break;
+                    case VerticalAlign.Bottom:
+                        offsetY = toNearestGrid(tmpFrameHeight.sub(contentsHeight).toNumber(), gridSize);
+                        break;
+                }
+                offsetX = 0;
+                offsetY = roundValue(offsetY).toNumber();
+                for (const innerFrame of innerFrames) {
+                    const { width: innerFrameHeight } = getBoundsSize(innerFrame.bounds);
+                    if (hAlign === HorizontalAlign.Center) {
+                        offsetX = toNearestGrid(tmpFrameWidth.sub(innerFrameHeight).div(2).toNumber(), gridSize);
                     }
-                    innerFrame.x = innerFrameX;
-                    innerFrame.y = innerFrameY;
-                    accumX = accumX.add(innerFrameWidth).add(frame.gap);
+                    else if (hAlign === HorizontalAlign.Right) {
+                        offsetX = toNearestGrid(tmpFrameWidth.sub(innerFrameHeight).toNumber(), gridSize);
+                    }
+                    offsetX = 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 = 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;
-        });
-        if (titleFrame) {
-            const { width: innerFrameWidth } = getBoundsSize(titleFrame.bounds);
-            let titleOffset = 0;
-            switch (title_align) {
-                case HorizontalAlign.Left:
-                    titleOffset = 0;
-                    break;
-                case HorizontalAlign.Middle:
-                    titleOffset = toNearestGrid(widthForTitle / 2 - innerFrameWidth / 2, gridSize);
-                    break;
-                case HorizontalAlign.Right:
-                    titleOffset = frameWidth.toNumber() - innerFrameWidth;
-                    break;
-            }
-            titleFrame.x = titleFrame.x.add(titleOffset);
-        }
-        let frameOffsetX = 0;
-        let frameOffsetY = 0;
-        switch (hAlign) {
-            case HorizontalAlign.Left:
-                frameOffsetX = 0;
-                break;
-            case HorizontalAlign.Middle:
-                frameOffsetX = toNearestGrid((frameWidth.toNumber() - contentsWidth) / 2, gridSize);
-                break;
-            case HorizontalAlign.Right:
-                frameOffsetX = toNearestGrid(frameWidth.toNumber() - contentsWidth, gridSize);
-                break;
-        }
-        switch (vAlign) {
-            case VerticalAlign.Top:
-                frameOffsetY = 0;
-                break;
-            case VerticalAlign.Middle:
-                frameOffsetY = toNearestGrid((frameHeight.toNumber() - contentsHeight) / 2, gridSize);
-                break;
-            case VerticalAlign.Bottom:
-                frameOffsetY = toNearestGrid(frameHeight.toNumber() - contentsHeight, gridSize);
-                break;
-        }
-        innerFrames.forEach(innerFrame => {
-            innerFrame.x = innerFrame.x.add(frameOffsetX);
-            innerFrame.y = innerFrame.y.add(frameOffsetY);
-        });
-        frame.bounds = {
-            xmin: frameXMin.toNumber(),
-            ymin: frameYMin.toNumber(),
-            xmax: frameXMin.toNumber() + frameWidth.toNumber(),
-            ymax: frameYMin.toNumber() + frameHeight.toNumber(),
-        };
+        return;
     }
     dumpFrame(frame, level = 0) {
         this.print(level, "".padStart(level * 4), 'frame, items:', frame.innerItems.length);
@@ -593,33 +543,80 @@ export class LayoutEngine {
         };
     }
     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(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
-                tmpFrame.containsTitle = true;
-                tmpFrame.subgraphId = title.replace(/\s/g, "_");
-                const textObject = new RenderText(title);
-                textObject.fontSize = numeric(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 = numeric(0);
-                textObject.y = numeric(0);
-                frame.innerItems.splice(0, 0, tmpFrame);
-                this.printLevel(level, frame, 'added text', tmpFrame);
-                textObjects.push(textObject);
-                elementFrames.splice(0, 0, tmpFrame);
+        if (frame.renderType !== RenderFrameType.Container) {
+            return;
+        }
+        const frameObject = frame.frame;
+        const frameParams = frame.frame.parameters;
+        const isSheetFrame = frameObject.frameType === FrameType.Sheet;
+        if (frameParams.has(FrameParamKeys.Title) && !isSheetFrame) {
+            const title = frameParams.get(FrameParamKeys.Title);
+            const titleFrame = new RenderFrame(new Frame(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Elements);
+            titleFrame.containsTitle = true;
+            titleFrame.subgraphId = title.replace(/\s/g, "_");
+            const textObject = new RenderText(title);
+            textObject.fontSize = numeric(defaultFrameTitleTextSize);
+            textObject.fontWeight = 'bold';
+            textObject.x = numeric(0);
+            textObject.y = 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 = resizeToNearestGrid(tmpBounds, defaultGridSizeUnits);
+            titleFrame.didResize = true;
+            const titleFrameContainer = RenderFrame.createContainer(numeric(0));
+            titleFrameContainer.innerItems = [titleFrame];
+            if (frameParams.has(FrameParamKeys.TitleAlign)) {
+                const alignValue = frameParams.get(FrameParamKeys.TitleAlign);
+                titleFrameContainer.frame.parameters.set(FrameParamKeys.HorizontalAlign, alignValue);
+            }
+            const container = RenderFrame.createContainer(frame.gap);
+            container.direction = frame.direction;
+            container.innerItems = [...frame.innerItems];
+            let hAlign = HorizontalAlign.Center;
+            let vAlign = VerticalAlign.Center;
+            if (frameParams.has(FrameParamKeys.HorizontalAlign)) {
+                hAlign =
+                    frameParams.get(FrameParamKeys.HorizontalAlign);
+            }
+            if (frameParams.has(FrameParamKeys.VerticalAlign)) {
+                vAlign =
+                    frameParams.get(FrameParamKeys.VerticalAlign);
+            }
+            container.frame.parameters.set(FrameParamKeys.HorizontalAlign, hAlign);
+            container.frame.parameters.set(FrameParamKeys.VerticalAlign, vAlign);
+            const columnLayoutContainer = RenderFrame.createContainer(numeric(defaultGridSizeUnits));
+            columnLayoutContainer.direction = FramePlotDirection.Column;
+            columnLayoutContainer.innerItems = [
+                titleFrameContainer,
+                container,
+            ];
+            const frameWidth = frame.width ?? 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 ?? numeric(0);
+            if (frameHeight.toNumber() !== 0) {
+                columnLayoutContainer.height = frameHeight.sub(frame.padding.mul(2));
+                const { height: titleFrameHeight } = 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) {
@@ -779,7 +776,7 @@ export 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 AutoWireFailedError_("Wire auto length failed. Please specify a fixed wire length.", item.wire);
                     }
                     const [untilX, untilY] = getNodePositionAtPin(targetNode, pin);
                     item.setEndAuto(untilX, untilY);
@@ -915,17 +912,6 @@ function getNodePositionAtPin(item, pin) {
         roundValue(x), 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;
-    }, []);
-}
 export function applyComponentParamsToSymbol(componentUnit, symbol) {
     const { widthProp = null, heightProp = null } = componentUnit;
     const newMap = new Map(componentUnit.parameters);
@@ -1255,19 +1241,25 @@ export class RenderFrame extends RenderObject {
     padding = milsToMM(100);
     gap = milsToMM(100);
     borderWidth = numeric(5);
+    borderColor = "#111";
     direction = FramePlotDirection.Row;
     width = null;
     height = null;
     subgraphId = "";
     renderType;
     containsTitle = false;
+    overwriteAlignParamsForTitleLayout = false;
+    virtual = false;
+    didResize = false;
+    lineIndex = 0;
     frameId;
-    constructor(frame, type = RenderFrameType.Container) {
+    constructor(frame, type = RenderFrameType.Container, virtual = false) {
         super();
         this.frame = frame;
         this.renderType = type;
         this.frameId = RenderFrame.FrameIdCounter;
         RenderFrame.FrameIdCounter++;
+        this.virtual = virtual;
     }
     toString() {
         let name = "";
@@ -1280,6 +1272,13 @@ export class RenderFrame extends RenderObject {
         return name + ": " + this.x + "," + this.y
             + " bounds:" + (this.bounds && printBounds(this.bounds));
     }
+    static createContainer(gap) {
+        const tmpFrame = new RenderFrame(new Frame(FixedFrameIds.FrameIdNotUsed), RenderFrameType.Container, true);
+        tmpFrame.gap = gap.copy();
+        tmpFrame.borderWidth = numeric(0);
+        tmpFrame.padding = numeric(0);
+        return tmpFrame;
+    }
 }
 export var RenderFrameType;
 (function (RenderFrameType) {
@@ -1338,3 +1337,76 @@ export function ExtractDrawingRects(drawing) {
 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 = numeric(1e24);
+    }
+    if (frameHeight.toNumber() === 0) {
+        frameHeight = 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 === FramePlotDirection.Row;
+    const dimensionLimit = isRowDirection ? tmpFrameWidth : tmpFrameHeight;
+    let accumX = numeric(0);
+    let accumY = 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 } = 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 => 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 = 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 = 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);
+    });
+}