circuitscript 0.0.28 → 0.0.31

package/dist/esm/execute.mjs

@@ -3,7 +3,7 @@ import { ClassComponent } from './objects/ClassComponent.mjs';
 import { ActiveObject, ExecutionScope, FrameAction, SequenceAction } from './objects/ExecutionScope.mjs';
 import { Net } from './objects/Net.mjs';
 import { PortSide } from './objects/PinDefinition.mjs';
-import { Direction } from './objects/types.mjs';
+import { DeclaredReference, Direction } from './objects/types.mjs';
 import { Wire } from './objects/Wire.mjs';
 import { Frame } from './objects/Frame.mjs';
 import { CalculatePinPositions } from './layout.mjs';
@@ -199,20 +199,20 @@ export class ExecutionContext {
         return component;
     }
     printPoint(extra = '') {
-        let netName = NoNetText;
+        let netString = NoNetText;
         if (this.scope.currentComponent === null || this.scope.currentPin === null) {
             this.log((extra !== '' ? (extra + ' ') : '') + 'point is null');
             return;
         }
         if (this.scope.hasNet(this.scope.currentComponent, this.scope.currentPin)) {
-            netName = this.scope
+            netString = this.scope
                 .getNet(this.scope.currentComponent, this.scope.currentPin)
                 .toString();
         }
         this.log((extra !== '' ? (extra + ' ') : '') + 'point: ' +
             this.scope.currentComponent.instanceName +
             ' ' +
-            this.scope.currentPin + ' ' + netName);
+            this.scope.currentPin + ' ' + netString);
     }
     addComponentExisting(component, pin) {
         const startPin = pin;
@@ -466,34 +466,34 @@ export class ExecutionContext {
         for (let i = 0; i < reversed.length; i++) {
             const context = reversed[i];
             if (context.hasFunction(idName)) {
-                return {
+                return new DeclaredReference({
                     found: true,
                     value: context.getFunction(idName),
                     type: ReferenceTypes.function,
                     name: idName,
-                };
+                });
             }
             else if (context.scope.variables.has(idName)) {
-                return {
+                return new DeclaredReference({
                     found: true,
                     value: context.scope.variables.get(idName),
                     type: ReferenceTypes.variable,
                     name: idName,
-                };
+                });
             }
             else if (context.scope.instances.has(idName)) {
-                return {
+                return new DeclaredReference({
                     found: true,
                     value: context.scope.instances.get(idName),
                     type: ReferenceTypes.instance,
                     name: idName,
-                };
+                });
             }
         }
-        return {
+        return new DeclaredReference({
             found: false,
             name: idName,
-        };
+        });
     }
     callFunction(functionName, functionParams, executionStack, netNamespace) {
         let __runFunc = null;
@@ -520,6 +520,7 @@ export class ExecutionContext {
         }
         if (__runFunc !== null) {
             this.log(`call function '${functionName}'`);
+            this.log(`net namespace: ${netNamespace}`);
             const functionResult = __runFunc(functionParams, { netNamespace });
             this.log(`done call function '${functionName}'`);
             return functionResult;
@@ -652,6 +653,10 @@ export class ExecutionContext {
         this.scope.setActive(ActiveObject.Wire, wireId);
         this.scope.sequence.push([SequenceAction.Wire, wireId, tmp]);
         this.scope.currentComponent.pinWires.set(this.scope.currentPin, tmp);
+        if (!this.scope.currentComponent.didSetWireOrientationAngle) {
+            this.applyComponentAngleFromWire(this.scope.currentComponent, this.scope.currentPin, true);
+            this.scope.currentComponent.didSetWireOrientationAngle = true;
+        }
     }
     addPoint(pointId, userDefined = true) {
         if (this.scope.instances.has(pointId)) {
@@ -702,18 +707,37 @@ export class ExecutionContext {
             this.scope.currentComponent.styles[key] = styles[key];
         }
     }
-    applyComponentAngleFromWire(component, pin) {
+    applyComponentAngleFromWire(component, pin, opposite = false) {
         if (this.componentAngleFollowsWire
             && component.followWireOrientationProp
             && component.useWireOrientationAngle
+            && !component.didSetWireOrientationAngle
             && this.scope.currentWireId !== -1) {
             const currentWire = this.scope.wires[this.scope.currentWireId];
-            const lastSegment = currentWire.path[currentWire.path.length - 1];
+            let useSegment = currentWire.path[currentWire.path.length - 1];
+            if (opposite) {
+                useSegment = currentWire.path[0];
+            }
             const pinPositions = CalculatePinPositions(component);
             if (pinPositions.has(pin)) {
                 const connectedPinPos = pinPositions.get(pin);
                 let targetAngle = null;
-                switch (lastSegment.direction) {
+                let useDirection = useSegment.direction;
+                if (opposite) {
+                    if (useDirection === Direction.Down) {
+                        useDirection = Direction.Up;
+                    }
+                    else if (useDirection === Direction.Up) {
+                        useDirection = Direction.Down;
+                    }
+                    else if (useDirection === Direction.Right) {
+                        useDirection = Direction.Left;
+                    }
+                    else if (useDirection === Direction.Left) {
+                        useDirection = Direction.Right;
+                    }
+                }
+                switch (useDirection) {
                     case Direction.Down:
                         targetAngle = 90;
                         break;
@@ -752,6 +776,7 @@ export class ExecutionContext {
                     component.setParam('angle', 270);
                 }
                 component.wireOrientationAngle = useAngle;
+                component.didSetWireOrientationAngle = true;
             }
         }
     }

package/dist/esm/geometry.mjs

@@ -1,7 +1,9 @@
 import Flatten from '@flatten-js/core';
 import { measureTextSize2 } from './sizing.mjs';
-import { defaultFont } from './globals.mjs';
+import { defaultFont, fontDisplayScale, PortArrowSize, PortPaddingHorizontal, PortPaddingVertical } from './globals.mjs';
 import { NumericValue } from './objects/ParamDefinition.mjs';
+import { AllPinTypes, PinTypes } from './objects/PinTypes.mjs';
+import { roundValue } from './utils.mjs';
 export class Textbox extends Flatten.Polygon {
     id;
     text;
@@ -41,32 +43,90 @@ export class Textbox extends Flatten.Polygon {
         else {
             throw 'Invalid string passed into textbox';
         }
-        const { fontSize = 10, anchor = HorizontalAlign.Left, vanchor = VerticalAlign.Bottom, fontWeight = 'regular', } = style ?? {};
-        const { width, height, box } = measureTextSize2(useText, defaultFont, fontSize, fontWeight, anchor, vanchor);
-        const polygonCoords = [
-            [box.x, box.y],
-            [box.x2, box.y],
-            [box.x2, box.y2],
-            [box.x, box.y2],
-            [box.x, box.y],
-        ];
+        const { fontSize = 10, anchor = HorizontalAlign.Left, vanchor = VerticalAlign.Bottom, fontWeight = 'regular', portType = null, } = style ?? {};
+        const { width, height, box } = measureTextSize2(useText, defaultFont, fontSize * fontDisplayScale, fontWeight, anchor, vanchor);
+        let polygonCoords = [];
+        let anchorOffsetX = 0;
+        let anchorOffsetY = 0;
+        if (portType === null) {
+            polygonCoords = [
+                [box.x, box.y],
+                [box.x2, box.y],
+                [box.x2, box.y2],
+                [box.x, box.y2],
+                [box.x, box.y],
+            ];
+        }
+        else if (AllPinTypes.indexOf(portType) !== -1) {
+            const paddingHorizontal = PortPaddingHorizontal;
+            const paddingVert = PortPaddingVertical;
+            if (portType === PinTypes.Input) {
+                polygonCoords = [
+                    [box.x - paddingHorizontal - PortArrowSize, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal - PortArrowSize, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal - PortArrowSize, box.y - paddingVert],
+                ];
+                anchorOffsetX += (PortArrowSize + paddingHorizontal);
+            }
+            else if (portType === PinTypes.Output) {
+                polygonCoords = [
+                    [box.x - paddingHorizontal, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal + PortArrowSize, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal + PortArrowSize, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal, box.y - paddingVert],
+                ];
+                anchorOffsetX += paddingHorizontal;
+            }
+            else if (portType === PinTypes.IO) {
+                polygonCoords = [
+                    [box.x - paddingHorizontal - PortArrowSize, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal + PortArrowSize, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal + PortArrowSize, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal - PortArrowSize, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal - PortArrowSize, box.y - paddingVert],
+                ];
+                anchorOffsetX += paddingHorizontal + PortArrowSize;
+            }
+            else if (portType === PinTypes.Any) {
+                polygonCoords = [
+                    [box.x - paddingHorizontal, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal, box.y - paddingVert],
+                    [box.x2 + paddingHorizontal, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal, box.y2 + paddingVert],
+                    [box.x - paddingHorizontal, box.y - paddingVert],
+                ];
+                anchorOffsetX += paddingHorizontal;
+            }
+            anchorOffsetY += paddingVert / 2;
+        }
         const polygon = new Flatten.Polygon(polygonCoords);
-        return new Textbox(id, useText, [x, y], polygon, style, box, label);
+        return new Textbox(id, useText, [x + anchorOffsetX, y + anchorOffsetY], polygon, style, box, label);
     }
     rotate(angle, origin) {
         const feature = super.rotate(angle, origin);
-        return new Textbox(this.id, this.text, this.anchorPoint, feature, this.style, this.textMeasurementBounds, this.label);
+        const newAnchorPoint = this.transformAnchorPoint(segment => segment.rotate(angle, origin));
+        return new Textbox(this.id, this.text, newAnchorPoint, feature, this.style, this.textMeasurementBounds, this.label);
     }
     transform(matrix) {
         const feature = super.transform(matrix);
-        return new Textbox(this.id, this.text, this.anchorPoint, feature, this.style, this.textMeasurementBounds, this.label);
+        const newAnchorPoint = this.transformAnchorPoint(segment => segment.transform(matrix));
+        return new Textbox(this.id, this.text, newAnchorPoint, feature, this.style, this.textMeasurementBounds, this.label);
+    }
+    transformAnchorPoint(callback) {
+        const anchorPointSegment = new Flatten.Segment(new Flatten.Point(0, 0), new Flatten.Point(this.anchorPoint));
+        const newSegment = callback(anchorPointSegment);
+        const lastPoint = newSegment.vertices[newSegment.vertices.length - 1];
+        return [
+            lastPoint.x, lastPoint.y
+        ];
     }
     getLabelPosition() {
         return this.anchorPoint;
     }
 }
-export class Label extends Textbox {
-}
 export class GeometryProp {
     name;
     value;
@@ -150,7 +210,7 @@ export class Geometry {
                 && feature.text.trim().length === 0) {
                 return;
             }
-            if (feature instanceof Textbox && !feature.label) {
+            if (feature instanceof Textbox) {
                 const [x, y] = feature.anchorPoint;
                 box = {
                     xmin: box.xmin + x,
@@ -247,7 +307,9 @@ export class Geometry {
         const existingSegments = [];
         wirePoints.forEach(points => {
             const tmpPoints = points.map(pt => {
-                return new Flatten.Point(pt.x, pt.y);
+                const roundedX = roundValue(pt.x);
+                const roundedY = roundValue(pt.y);
+                return new Flatten.Point(roundedX, roundedY);
             });
             for (let i = 0; i < tmpPoints.length - 1; i++) {
                 const pt1 = tmpPoints[i];

package/dist/esm/globals.mjs

@@ -23,15 +23,49 @@ export var SymbolPinSide;
     SymbolPinSide["Left"] = "left";
     SymbolPinSide["Right"] = "right";
 })(SymbolPinSide || (SymbolPinSide = {}));
+export var LengthUnit;
+(function (LengthUnit) {
+    LengthUnit["mm"] = "mm";
+    LengthUnit["mils"] = "mils";
+    LengthUnit["px"] = "px";
+})(LengthUnit || (LengthUnit = {}));
+export var WireAutoDirection;
+(function (WireAutoDirection) {
+    WireAutoDirection["Auto"] = "auto";
+    WireAutoDirection["Auto_"] = "auto_";
+})(WireAutoDirection || (WireAutoDirection = {}));
+export const MilsToMM = 0.0254;
+export const MMToPx = 3.779276;
+export const PxToMM = 0.2645833;
 export const portWidth = 20;
 export const portHeight = 2;
-export const defaultFont = 'Open Sans-Regular, Arial';
-export const defaultFontBold = 'Open Sans-Bold, Arial-Bold, Arial';
+export const defaultGridSizeUnits = MilsToMM * 100;
+export const defaultZoomScale = 2.5;
+export const fontDisplayScale = 0.032;
+export const defaultSymbolLineWidth = MilsToMM * 6;
+export const defaultWireLineWidth = MilsToMM * 6;
+export const defaultPinNameTextSize = 40;
+export const defaultPinIdTextSize = 30;
+export const CustomSymbolPinTextSize = defaultPinNameTextSize;
+export const CustomSymbolPinIdSize = defaultPinIdTextSize;
+export const CustomSymbolRefDesSize = 50;
+export const CustomSymbolParamTextSize = 40;
+export const defaultFrameTitleTextSize = 60;
+export const displayUnits = LengthUnit.mils;
+export const defaultFont = 'Arial';
+export const defaultFontBold = 'Arial';
 export const defaultFontSize = 10;
-export const bodyColor = '#FFFEAF';
-export const junctionSize = 5;
-export const junctionColor = 'rgb(0, 132, 0)';
-export const wireColor = 'rgb(0, 132, 0)';
+export const junctionSize = MilsToMM * 20;
+export const PortArrowSize = MilsToMM * 50;
+export const PortPaddingHorizontal = MilsToMM * 10;
+export const PortPaddingVertical = MilsToMM * 10;
+export const ColorScheme = {
+    BodyColor: 'rgb(255, 255, 194)',
+    JunctionColor: 'rgba(0, 132, 0)',
+    WireColor: 'rgb(0, 132, 0)',
+    PinLineColor: '#333',
+    PinNameColor: '#333',
+};
 export var ComponentTypes;
 (function (ComponentTypes) {
     ComponentTypes["gnd"] = "gnd";

package/dist/esm/helpers.mjs

@@ -13,6 +13,7 @@ import { MainLexer } from "./lexer.mjs";
 import { CircuitScriptParser } from "./antlr/CircuitScriptParser.mjs";
 import { prepareTokens, SemanticTokensVisitor } from "./SemanticTokenVisitor.mjs";
 import path from "path";
+import { LengthUnit, MilsToMM, PxToMM } from "./globals.mjs";
 export var JSModuleType;
 (function (JSModuleType) {
     JSModuleType["CommonJs"] = "cjs";
@@ -163,7 +164,10 @@ export function renderScript(scriptData, outputPath, options) {
     const { tree, parser, hasParseError, hasError, parserTimeTaken, lexerTimeTaken } = parseFileWithVisitor(visitor, scriptData);
     showStats && console.log('Lexing took:', lexerTimeTaken);
     showStats && console.log('Parsing took:', parserTimeTaken);
-    dumpNets && console.log(visitor.dumpNets());
+    if (dumpNets) {
+        const nets = visitor.dumpNets();
+        console.log(nets);
+    }
     dumpData && writeFileSync('dump/tree.lisp', tree.toStringTree(null, parser));
     dumpData && writeFileSync('dump/raw-parser.txt', visitor.logger.dump());
     if (hasError || hasParseError) {
@@ -254,3 +258,36 @@ export function getPackageVersion() {
     const { version } = packageJson;
     return version;
 }
+export class UnitDimension {
+    type;
+    value;
+    constructor(value, type = LengthUnit.mils) {
+        this.value = value;
+        this.type = type;
+    }
+    getMM() {
+        switch (this.type) {
+            case LengthUnit.mm:
+                return this.value;
+            case LengthUnit.mils:
+                return this.value * MilsToMM;
+            case LengthUnit.px:
+                return this.value * PxToMM;
+        }
+    }
+    static mm(value) {
+        return new UnitDimension(value, LengthUnit.mm);
+    }
+    static mils(value) {
+        return new UnitDimension(value, LengthUnit.mils);
+    }
+    static px(value) {
+        return new UnitDimension(value, LengthUnit.px);
+    }
+}
+export function milsToMM(value) {
+    return value * MilsToMM;
+}
+export function pxToMM(value) {
+    return value * PxToMM;
+}

package/dist/esm/layout.mjs

@@ -1,13 +1,14 @@
 import { Graph, alg } from '@dagrejs/graphlib';
-import { SymbolCustom, SymbolDrawing, SymbolFactory, SymbolPlaceholder, SymbolText } from "./draw_symbols.mjs";
+import { SymbolCustom, SymbolDrawing, SymbolFactory, SymbolCustomModule, SymbolPlaceholder, SymbolText } from "./draw_symbols.mjs";
 import { FrameAction, SequenceAction } from "./objects/ExecutionScope.mjs";
-import { GlobalNames, ParamKeys } from './globals.mjs';
+import { defaultFrameTitleTextSize, defaultGridSizeUnits, GlobalNames, ParamKeys, WireAutoDirection } from './globals.mjs';
 import { NumericValue } from './objects/ParamDefinition.mjs';
 import { Geometry } from './geometry.mjs';
 import { Logger } from './logger.mjs';
 import { Frame, FrameParamKeys, FramePlotDirection } from './objects/Frame.mjs';
-import { getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, toNearestGrid } from './utils.mjs';
+import { getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, roundValue, toNearestGrid } from './utils.mjs';
 import { Direction } from './objects/types.mjs';
+import { milsToMM, UnitDimension } from './helpers.mjs';
 export class LayoutEngine {
     logger;
     placeSubgraphVersion = 2;
@@ -184,7 +185,7 @@ export class LayoutEngine {
     }
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
-        const gridSize = 20;
+        const gridSize = defaultGridSizeUnits;
         let accumX = 0;
         let accumY = 0;
         const boundPoints = [];
@@ -324,7 +325,7 @@ export class LayoutEngine {
                 tmpFrame.containsTitle = true;
                 tmpFrame.subgraphId = title.replace(/\s/g, "_");
                 const textObject = new RenderText(title);
-                textObject.fontSize = 16;
+                textObject.fontSize = defaultFrameTitleTextSize;
                 textObject.fontWeight = 'bold';
                 textObject.symbol.refreshDrawing();
                 tmpFrame.innerItems.push(textObject);
@@ -386,7 +387,12 @@ export class LayoutEngine {
                     }
                     else {
                         const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        tmpSymbol = new SymbolCustom(symbolPinDefinitions);
+                        if (component.typeProp === 'module') {
+                            tmpSymbol = new SymbolCustomModule(symbolPinDefinitions);
+                        }
+                        else {
+                            tmpSymbol = new SymbolCustom(symbolPinDefinitions);
+                        }
                     }
                     applyComponentParamsToSymbol(typeProp, component, tmpSymbol);
                     let didSetAngle = false;
@@ -403,7 +409,7 @@ export class LayoutEngine {
                             component.parameters.get('flipY');
                     }
                     if (tmpSymbol instanceof SymbolCustom && widthProp) {
-                        tmpSymbol.bodyWidth = widthProp;
+                        tmpSymbol.bodyWidth = milsToMM(widthProp);
                     }
                     if (!didSetAngle && component.parameters.has('_addDirection')) {
                         tmpSymbol.refreshDrawing(false);
@@ -584,6 +590,10 @@ export class LayoutEngine {
             this.placeNodeAtPosition(0, 0, node1, 1);
             return;
         }
+        let fixedNode;
+        let fixedNodePin;
+        let floatingNode;
+        let floatingNodePin;
         subgraphEdges.forEach(edge => {
             const [nodeId1, pin1, nodeId2, pin2] = graph.edge(edge);
             const [, node1] = graph.node(nodeId1);
@@ -596,10 +606,6 @@ export class LayoutEngine {
                 originNodes.push(node1);
                 originNodeGroups.set(node1.toString(), [node1]);
             }
-            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;
@@ -655,12 +661,17 @@ export class LayoutEngine {
             }
             [node1, node2].forEach(item => {
                 if (item instanceof RenderWire && item.isEndAutoLength()) {
-                    this.print('auto length wire', item);
                     const [instance, pin] = item.getEndAuto();
                     const [, targetNode] = graph.node(instance.instanceName);
+                    this.print('wire auto length to target:', instance, pin);
                     if (targetNode.isFloating) {
                         throw "Cannot create auto wire with floating node! Wire id: " + item.id + " to node " + instance + " pin " + pin;
                     }
+                    const targetOriginNode = findOriginNode(targetNode);
+                    const itemOriginNode = findOriginNode(item);
+                    if (targetOriginNode !== itemOriginNode) {
+                        throw "Wire auto length failed. Please specify a fixed wire length.";
+                    }
                     const [untilX, untilY] = getNodePositionAtPin(targetNode, pin);
                     item.setEndAuto(untilX, untilY);
                 }
@@ -824,25 +835,27 @@ export class LayoutEngine {
     }
 }
 function getNodePositionAtPin(item, pin) {
+    let x = 0;
+    let y = 0;
     if (item instanceof RenderComponent) {
         const pinPosition = item.symbol.pinPosition(pin);
-        return [
-            item.x + pinPosition.x,
-            item.y + pinPosition.y
-        ];
+        x = item.x + pinPosition.x;
+        y = item.y + pinPosition.y;
     }
     else if (item instanceof RenderWire) {
         if (pin === 0) {
-            return [item.x, item.y];
+            x = item.x;
+            y = item.y;
         }
         else {
             const wireEnd = item.getWireEnd();
-            return [
-                item.x + wireEnd.x,
-                item.y + wireEnd.y
-            ];
+            x = item.x + wireEnd.x;
+            y = item.y + wireEnd.y;
         }
     }
+    return [
+        roundValue(x), roundValue(y)
+    ];
 }
 function getNeighbours(graph, nodeIds) {
     return nodeIds.reduce((accum, nodeId) => {
@@ -868,11 +881,13 @@ function generateLayoutPinDefinition(component) {
     if (component.arrangeProps === null) {
         for (let i = 0; i < existingPinIds.length; i++) {
             const pinPosition = Math.floor(i / 2);
+            const pin = pins.get(existingPinIds[i]);
             symbolPinDefinitions.push({
                 side: (i % 2 === 0) ? "left" : "right",
                 pinId: existingPinIds[i],
-                text: pins.get(existingPinIds[i]).name,
+                text: pin.name,
                 position: pinPosition,
+                pinType: pin.pinType,
             });
         }
     }
@@ -888,11 +903,13 @@ function generateLayoutPinDefinition(component) {
             }
             useItems.forEach(pinId => {
                 if (existingPinIds.indexOf(pinId) !== -1) {
+                    const pin = pins.get(pinId);
                     symbolPinDefinitions.push({
                         side: key,
                         pinId: pinId,
-                        text: pins.get(pinId).name,
-                        position: pins.get(pinId).position,
+                        text: pin.name,
+                        position: pin.position,
+                        pinType: pin.pinType,
                     });
                     addedPins.push(pinId);
                 }
@@ -1013,19 +1030,26 @@ export class RenderWire extends RenderObject {
         this.segments.forEach(segment => {
             const { direction, value } = segment;
             let didAddPoint = false;
+            let useValue;
+            if (value instanceof UnitDimension) {
+                useValue = value.getMM();
+            }
+            else {
+                useValue = value;
+            }
             if (direction === Direction.Down) {
-                tmpY += value;
+                tmpY += useValue;
             }
             else if (direction === Direction.Up) {
-                tmpY -= value;
+                tmpY -= useValue;
             }
             else if (direction === Direction.Left) {
-                tmpX -= value;
+                tmpX -= useValue;
             }
             else if (direction === Direction.Right) {
-                tmpX += value;
+                tmpX += useValue;
             }
-            else if (direction === 'auto' || direction === "auto_") {
+            else if (direction === WireAutoDirection.Auto || direction === WireAutoDirection.Auto_) {
                 const { valueXY = [0, 0] } = segment;
                 const tmpPoints = this.getAutoPoints(valueXY, direction);
                 tmpPoints.forEach(point => {
@@ -1044,9 +1068,11 @@ export class RenderWire extends RenderObject {
         this.points = points;
     }
     getAutoPoints(value, direction) {
-        const inQuadrant = Geometry.getQuadrant(value[0], value[1]);
-        const [dx, dy] = value;
-        if (direction === 'auto') {
+        const valueX = roundValue(value[0]);
+        const valueY = roundValue(value[1]);
+        const inQuadrant = Geometry.getQuadrant(valueX, valueY);
+        const [dx, dy] = [valueX, valueY];
+        if (direction === WireAutoDirection.Auto) {
             switch (inQuadrant) {
                 case 0:
                 case 2:
@@ -1056,7 +1082,7 @@ export class RenderWire extends RenderObject {
                     return [[0, dy], [dx, 0]];
             }
         }
-        else if (direction === 'auto_') {
+        else if (direction === WireAutoDirection.Auto_) {
             switch (inQuadrant) {
                 case 0:
                 case 2:
@@ -1091,17 +1117,24 @@ export class RenderWire extends RenderObject {
         let tmpY = this.y;
         excludeLastSegment.forEach(segment => {
             const { direction, value } = segment;
+            let useValue;
+            if (value instanceof UnitDimension) {
+                useValue = value.getMM();
+            }
+            else {
+                useValue = value;
+            }
             if (direction === Direction.Down) {
-                tmpY += value;
+                tmpY += useValue;
             }
             else if (direction === Direction.Up) {
-                tmpY -= value;
+                tmpY -= useValue;
             }
             else if (direction === Direction.Left) {
-                tmpX -= value;
+                tmpX -= useValue;
             }
             else if (direction === Direction.Right) {
-                tmpX += value;
+                tmpX += useValue;
             }
         });
         let useValue = null;
@@ -1120,8 +1153,8 @@ export class RenderWire extends RenderObject {
             case Direction.Down:
                 useValue = tmpY - untilY;
                 break;
-            case 'auto':
-            case 'auto_':
+            case WireAutoDirection.Auto:
+            case WireAutoDirection.Auto_:
                 valueXY = [
                     untilX - tmpX,
                     untilY - tmpY,
@@ -1189,10 +1222,10 @@ export class RenderFrame extends RenderObject {
     innerItems = [];
     translateX = 0;
     translateY = 0;
-    padding = 20;
-    gap = 20;
+    padding = milsToMM(100);
+    gap = milsToMM(100);
     direction = FramePlotDirection.Column;
-    borderWidth = 1;
+    borderWidth = 5;
     subgraphId = "";
     type;
     containsTitle = false;