circuitscript 0.0.38 → 0.1.2

package/dist/esm/draw_symbols.mjs

@@ -1,8 +1,10 @@
 import { milsToMM } from "./helpers.mjs";
-import { ColorScheme, CustomSymbolParamTextSize, CustomSymbolPinIdSize, CustomSymbolPinTextSize, CustomSymbolRefDesSize, PortArrowSize, PortPaddingHorizontal, PortPaddingVertical, ReferenceTypes, SymbolPinSide, defaultFont, defaultPinIdTextSize, defaultPinNameTextSize, defaultSymbolLineWidth, fontDisplayScale } from "./globals.mjs";
-import { Geometry, GeometryProp, HorizontalAlign, Textbox, VerticalAlign } from "./geometry.mjs";
+import { ColorScheme, CustomSymbolParamTextSize, CustomSymbolPinIdSize, CustomSymbolPinTextSize, CustomSymbolRefDesSize, PortArrowSize, PortPaddingHorizontal, PortPaddingVertical, ReferenceTypes, RenderFlags, SymbolPinSide, defaultFont, defaultPinIdTextSize, defaultPinNameTextSize, defaultSymbolLineWidth, fontDisplayScale } from "./globals.mjs";
+import { Geometry, GeometryProp, HorizontalAlign, HorizontalAlignProp, Textbox, VerticalAlign, VerticalAlignProp } from "./geometry.mjs";
 import { PinTypes } from "./objects/PinTypes.mjs";
-import { roundValue } from "./utils.mjs";
+import { roundValue, throwWithContext } from "./utils.mjs";
+import { DeclaredReference, UndeclaredReference } from "./objects/types.mjs";
+import { numeric, NumericValue } from "./objects/ParamDefinition.mjs";
 export class SymbolGraphic {
     drawPortsName = true;
     displayBounds = false;
@@ -10,9 +12,12 @@ export class SymbolGraphic {
     _angle = 0;
     _flipX = 0;
     _flipY = 0;
-    width;
-    height;
+    width = numeric(-1);
+    height = numeric(-1);
     labelTexts = new Map();
+    constructor() {
+        this.drawing = new SymbolDrawing();
+    }
     get angle() {
         return (this._angle % 360);
     }
@@ -37,15 +42,21 @@ export class SymbolGraphic {
     }
     calculateSize() {
         const { width, height } = this.drawing.getBoundingBox();
-        this.width = width;
-        this.height = height;
-    }
-    size() {
+        this.width = numeric(width);
+        this.height = numeric(height);
         return {
+            bodyWidth: numeric(-1),
+            bodyHeight: numeric(-1),
             width: this.width,
             height: this.height
         };
     }
+    size() {
+        return {
+            width: this.width.toNumber(),
+            height: this.height.toNumber(),
+        };
+    }
     draw(group, extra) {
         const innerGroup = group.group();
         this.drawBody(innerGroup);
@@ -82,15 +93,15 @@ export class SymbolGraphic {
     drawBounds(group) {
         const bbox = this.drawing.getBoundingBox();
         const originSize = milsToMM(10);
-        group.circle(originSize)
-            .translate(-originSize / 2, -originSize / 2)
+        group.circle(originSize.toNumber())
+            .translate(originSize.neg().div(2).toNumber(), originSize.neg().div(2).toNumber())
             .fill('red')
             .stroke('none');
         group.rect(bbox.width, bbox.height)
             .translate(bbox.start[0], bbox.start[1])
             .fill('none')
             .stroke({
-            width: milsToMM(2),
+            width: milsToMM(2).toNumber(),
             color: '#ccc',
         });
     }
@@ -100,7 +111,7 @@ export class SymbolGraphic {
             const { path, lineColor, fillColor, lineWidth } = pathInfo;
             group.path(path)
                 .stroke({
-                width: lineWidth,
+                width: lineWidth.toNumber(),
                 color: lineColor,
             })
                 .fill(fillColor);
@@ -120,7 +131,8 @@ export class SymbolGraphic {
         const labels = this.drawing.getLabels();
         labels.forEach(label => {
             const tmpLabel = label;
-            const { fontSize = 50, anchor = HorizontalAlign.Left, vanchor = VerticalAlign.Bottom, fontWeight = 'regular', angle: labelAngle = 0, textColor = "#333", } = tmpLabel.style ?? {};
+            const { fontSize = numeric(50), anchor = HorizontalAlign.Left, vanchor = VerticalAlign.Bottom, fontWeight = 'regular', angle: tmpLabelAngle = numeric(0), textColor = "#333", } = tmpLabel.style ?? {};
+            const labelAngle = tmpLabelAngle.toNumber();
             let anchorStyle = 'start';
             let dominantBaseline = 'auto';
             let useAnchor = anchor;
@@ -132,40 +144,44 @@ export class SymbolGraphic {
             }
             switch (useAnchor) {
                 case HorizontalAlign.Left:
-                    anchorStyle = (this.flipX === 0) ? 'start' : 'end';
+                    anchorStyle = (this.flipX === 0)
+                        ? HorizontalAlignProp.Start : HorizontalAlignProp.End;
                     break;
                 case HorizontalAlign.Middle:
-                    anchorStyle = 'middle';
+                    anchorStyle = HorizontalAlignProp.Middle;
                     break;
                 case HorizontalAlign.Right:
-                    anchorStyle = (this.flipX === 0) ? 'end' : 'start';
+                    anchorStyle = (this.flipX === 0)
+                        ? HorizontalAlignProp.End : HorizontalAlignProp.Start;
                     break;
             }
             switch (useDominantBaseline) {
                 case VerticalAlign.Top:
-                    dominantBaseline = (this.flipY === 0) ? 'hanging' : 'text-top';
+                    dominantBaseline = (this.flipY === 0)
+                        ? VerticalAlignProp.Hanging : VerticalAlignProp.TextTop;
                     break;
                 case VerticalAlign.Middle:
-                    dominantBaseline = 'middle';
+                    dominantBaseline = VerticalAlignProp.Central;
                     break;
                 case VerticalAlign.Bottom:
-                    dominantBaseline = (this.flipY === 0) ? 'text-top' : 'hanging';
+                    dominantBaseline = (this.flipY === 0)
+                        ? VerticalAlignProp.TextTop : VerticalAlignProp.Hanging;
                     break;
             }
             const position = tmpLabel.getLabelPosition();
             if (this.flipX !== 0) {
-                position[0] *= -1;
+                position[0] = position[0].neg();
             }
             if (this.flipY !== 0) {
-                position[1] *= -1;
+                position[1] = position[1].neg();
             }
             const useFont = defaultFont;
             const textContainer = group.group();
             let translateX, translateY;
             let useRotateAngle = 0;
             if (isRotation180) {
-                translateX = -position[0];
-                translateY = -position[1];
+                translateX = position[0].neg();
+                translateY = position[1].neg();
                 useRotateAngle = 0;
             }
             else {
@@ -235,7 +251,7 @@ export class SymbolGraphic {
                     }
                     textContainer.path(path)
                         .stroke({
-                        width: milsToMM(5),
+                        width: milsToMM(5).toNumber(),
                         color: '#333'
                     })
                         .fill('none')
@@ -243,47 +259,55 @@ export class SymbolGraphic {
                         .translate(boundsTranslateX, boundsY - paddingVert);
                 }
             }
-            const drawTextBounds = false;
-            const drawBoxBounds = false;
-            const drawOrigin = false;
-            if (drawBoxBounds) {
+            if (RenderFlags.ShowLabelBoxBounds) {
                 const box = tmpLabel.box;
-                textContainer.rect(box.width, box.height).fill('red')
+                textContainer.rect(box.width, box.height)
+                    .fill('none')
+                    .stroke({
+                    width: 0.1,
+                    color: 'blue',
+                })
                     .translate(box.xmin, box.ymin)
-                    .scale(this.flipX !== 0 ? -1 : 1, 1, -box.xmin, box.ymin);
+                    .rotate(labelAngle, -box.xmin, -box.ymin);
             }
-            if (drawTextBounds) {
+            if (RenderFlags.ShowLabelBounds) {
                 const textBounds = tmpLabel.textMeasurementBounds;
                 const xOffset = (this.flipX !== 0) ? textBounds.width : 0;
-                textContainer.rect(textBounds.width, textBounds.height).fill('#cccccc')
+                textContainer.rect(textBounds.width, textBounds.height)
+                    .fill('none')
+                    .stroke({
+                    width: 0.1,
+                    color: 'red',
+                })
                     .translate(textBounds.x - xOffset, textBounds.y);
             }
-            textContainer.translate(translateX, translateY)
-                .rotate(useRotateAngle, -translateX, -translateY);
+            textContainer.translate(translateX.toNumber(), translateY.toNumber())
+                .rotate(useRotateAngle, -translateX.toNumber(), -translateY.toNumber());
             textContainer.text(tmpLabel.text)
                 .fill(textColor)
                 .font({
                 family: useFont,
-                size: fontSize * fontDisplayScale,
+                size: fontSize.toNumber() * fontDisplayScale,
                 anchor: anchorStyle,
                 'dominant-baseline': dominantBaseline,
                 weight: fontWeight,
             })
-                .rotate(labelAngle);
+                .attr("xml:space", "preserve")
+                .rotate(labelAngle, 0, 0);
             const { a, b, c, d, e, f } = textContainer.matrix();
             const newMatrix = {
-                a: roundValue(a),
-                b: roundValue(b),
-                c: roundValue(c),
-                d: roundValue(d),
-                e: roundValue(e),
-                f: roundValue(f),
+                a: roundValue(numeric(a)).toNumber(),
+                b: roundValue(numeric(b)).toNumber(),
+                c: roundValue(numeric(c)).toNumber(),
+                d: roundValue(numeric(d)).toNumber(),
+                e: roundValue(numeric(e)).toNumber(),
+                f: roundValue(numeric(f)).toNumber(),
             };
             textContainer.transform(newMatrix);
-            if (drawOrigin) {
-                const originSize = milsToMM(10);
+            if (RenderFlags.ShowLabelOrigin) {
+                const originSize = milsToMM(10).toNumber();
                 textContainer.circle(originSize)
-                    .translate(originSize / 2, originSize / 2)
+                    .translate(-originSize / 2, -originSize / 2)
                     .fill('green');
             }
         });
@@ -310,41 +334,19 @@ export class SymbolGraphic {
             return VerticalAlign.Middle;
         }
     }
-    setLabelValue(labelId, labelValue) {
-        this.labelTexts.set(labelId, labelValue);
-    }
-    getLabelValue(labelId) {
-        if (this.labelTexts.has(labelId)) {
-            return this.labelTexts.get(labelId);
-        }
-        return undefined;
-    }
-}
-export function SymbolFactory(name) {
-    switch (name) {
-        case 'point':
-            return new SymbolPointHidden();
-    }
-    return null;
-}
-export class SymbolPointHidden extends SymbolGraphic {
-    generateDrawing() {
-        const drawing = new SymbolDrawing();
-        drawing.addPin(1, 0, 0, 0, 0);
-        this.drawing = drawing;
-    }
 }
 export class SymbolText extends SymbolGraphic {
     text;
-    fontSize = 40;
+    fontSize = numeric(40);
     fontWeight = 'regular';
     constructor(text) {
         super();
         this.text = text;
     }
     generateDrawing() {
-        const drawing = new SymbolDrawing();
-        drawing.addTextbox(0, 0, this.text, {
+        const drawing = this.drawing;
+        drawing.clear();
+        drawing.addTextbox(numeric(0), numeric(0), this.text, {
             fontSize: this.fontSize,
             anchor: HorizontalAlign.Middle,
             fontWeight: this.fontWeight,
@@ -364,13 +366,23 @@ export class SymbolPlaceholder extends SymbolGraphic {
             [PlaceHolderCommands.units, ['mils'], {}],
             [PlaceHolderCommands.lineColor, [ColorScheme.PinLineColor], {}],
             [PlaceHolderCommands.textColor, [ColorScheme.PinNameColor], {}],
-            [PlaceHolderCommands.lineWidth, [5], {}],
+            [PlaceHolderCommands.lineWidth, [numeric(5)], {}],
             ...drawing.getCommands()
         ];
         drawing.log('id: ', drawing.id, 'angle: ', this._angle, "commands:", commands.length);
         let lineColor = "#333";
         let textColor = "#333";
-        commands.forEach(([commandName, positionParams, keywordParams]) => {
+        commands.forEach(([commandName, positionParams, keywordParams, ctx]) => {
+            positionParams = positionParams.map(param => {
+                return this.resolveReference(param);
+            });
+            if (keywordParams instanceof Map) {
+                const tmpKeywordParams = new Map(keywordParams);
+                tmpKeywordParams.forEach((value, key) => {
+                    tmpKeywordParams.set(key, this.resolveReference(value));
+                });
+                keywordParams = tmpKeywordParams;
+            }
             switch (commandName) {
                 case PlaceHolderCommands.rect:
                     drawing.log('add rect', ...positionParams);
@@ -409,7 +421,7 @@ export class SymbolPlaceholder extends SymbolGraphic {
                     drawing.addArc(...positionParams);
                     break;
                 case PlaceHolderCommands.circle:
-                    drawing.addArc(...positionParams, 0, 360);
+                    drawing.addArc(...positionParams, numeric(0), numeric(360));
                     break;
                 case PlaceHolderCommands.triangle:
                     drawing.addTriangle(...positionParams);
@@ -426,23 +438,24 @@ export class SymbolPlaceholder extends SymbolGraphic {
                     if (style['textColor'] === undefined) {
                         style['textColor'] = textColor;
                     }
-                    positionParams = [...positionParams];
-                    positionParams.push(style);
-                    const labelId = positionParams[0];
-                    const tmpPositionParams = [...positionParams];
-                    const tmpLabelValue = this.getLabelValue(labelId);
-                    if (tmpLabelValue !== undefined) {
-                        tmpPositionParams[3] = tmpLabelValue;
-                    }
+                    const tmpPositionParams = [
+                        positionParams[1], positionParams[2],
+                        positionParams[0], style
+                    ];
                     drawing.log('add label', JSON.stringify(tmpPositionParams));
-                    drawing.addLabelId(...tmpPositionParams);
+                    try {
+                        drawing.addLabelMils(...tmpPositionParams);
+                    }
+                    catch (err) {
+                        throwWithContext(ctx, err);
+                    }
                     break;
                 }
                 case PlaceHolderCommands.text: {
                     const style = this.parseLabelStyle(keywordParams);
                     const content = keywordParams.get('content');
-                    let offsetX = 0;
-                    let offsetY = 0;
+                    let offsetX = numeric(0);
+                    let offsetY = numeric(0);
                     if (keywordParams.has('offset')) {
                         const offset = keywordParams.get('offset');
                         offsetX = offset[0];
@@ -459,13 +472,30 @@ export class SymbolPlaceholder extends SymbolGraphic {
         });
         drawing.log("=== end generate drawing ===");
     }
+    resolveReference(param) {
+        if (param instanceof DeclaredReference) {
+            return param.value;
+        }
+        else if (param instanceof UndeclaredReference) {
+            throw "Undefined symbol: " + param.nameString();
+        }
+        return param;
+    }
     parseLabelStyle(keywordParams) {
         const keywords = ['fontSize', 'anchor', 'vanchor',
-            'angle', 'textColor', 'portType'];
+            'angle', 'textColor', 'portType', 'bold'];
         const style = {};
         keywords.forEach(item => {
             if (keywordParams.has(item)) {
                 style[item] = keywordParams.get(item);
+                if (item === 'bold') {
+                    if (keywordParams.get(item) === true) {
+                        style['fontWeight'] = 'bold';
+                    }
+                    else {
+                        style['fontWeight'] = 'normal';
+                    }
+                }
             }
         });
         return style;
@@ -477,6 +507,9 @@ export class SymbolPlaceholder extends SymbolGraphic {
         let displayPinId = true;
         if (keywordParams.has(keywordDisplayPinId)) {
             const value = keywordParams.get(keywordDisplayPinId);
+            if (value instanceof NumericValue && value.toNumber() === 0) {
+                displayPinId = false;
+            }
             if (value === 0 || value === false) {
                 displayPinId = false;
             }
@@ -500,7 +533,7 @@ export class SymbolPlaceholder extends SymbolGraphic {
                 startX,
                 startY,
                 startX,
-                startY + magnitude
+                startY.add(magnitude)
             ];
         }
         else if (commandName === PlaceHolderCommands.hpin) {
@@ -509,7 +542,7 @@ export class SymbolPlaceholder extends SymbolGraphic {
                 positionParams[0],
                 startX,
                 startY,
-                startX + magnitude,
+                startX.add(magnitude),
                 startY
             ];
         }
@@ -531,11 +564,12 @@ export class SymbolPlaceholder extends SymbolGraphic {
         const offset1 = 15;
         const offset2 = 15;
         let pinNameOffsetX = milsToMM(offset1);
-        let pinIdOffsetX = 0;
+        let pinIdOffsetX = numeric(0);
         let pinIdAlignment = HorizontalAlign.Left;
         let pinIdVAlignment = VerticalAlign.Bottom;
         let pinIdOffsetY = milsToMM(-offset2);
-        switch (angle) {
+        const angleValue = angle.toNumber();
+        switch (angleValue) {
             case 0:
                 pinNameAlignment = HorizontalAlign.Left;
                 pinNameOffsetX = milsToMM(offset1);
@@ -558,16 +592,16 @@ export class SymbolPlaceholder extends SymbolGraphic {
                 pinIdVAlignment = VerticalAlign.Top;
                 break;
         }
-        if (angle === 0 || angle === 90 || angle === 180 || angle === 270) {
+        if (angleValue === 0 || angleValue === 90 || angleValue === 180 || angleValue === 270) {
             const usePinName = pinNameParam ?? "";
-            usePinName !== "" && drawing.addLabel(endX + pinNameOffsetX, endY, usePinName, {
-                fontSize: defaultPinNameTextSize,
+            usePinName !== "" && drawing.addLabel(endX.add(pinNameOffsetX), endY, usePinName, {
+                fontSize: numeric(defaultPinNameTextSize),
                 anchor: pinNameAlignment,
                 vanchor: VerticalAlign.Middle,
                 textColor: pinNameColor,
             });
-            displayPinId && drawing.addLabel(endX + pinIdOffsetX, endY + pinIdOffsetY, pinId.toString(), {
-                fontSize: defaultPinIdTextSize,
+            displayPinId && drawing.addLabel(endX.add(pinIdOffsetX), endY.add(pinIdOffsetY), pinId.toDisplayString(), {
+                fontSize: numeric(defaultPinIdTextSize),
                 anchor: pinIdAlignment,
                 vanchor: pinIdVAlignment,
                 textColor: lineColor
@@ -604,58 +638,74 @@ export var PlaceHolderCommands;
 export class SymbolCustom extends SymbolGraphic {
     pinDefinition = [];
     bodyWidth = milsToMM(400);
+    bodyHeight = milsToMM(100);
     pinLength = milsToMM(100);
     width = milsToMM(100);
     height = milsToMM(100);
     pinSpacing = milsToMM(100);
     pinTextPadding = milsToMM(5);
     pins = [];
-    _cacheLeftPins;
-    _cacheRightPins;
-    constructor(pinDefinition) {
+    _cacheLeftPins = [];
+    _cacheRightPins = [];
+    _cacheTopPins = [];
+    _cacheBottomPins = [];
+    pinMaxPositions;
+    constructor(pinDefinition, pinMaxPositions) {
         super();
         this.pinDefinition = pinDefinition;
+        this.pinMaxPositions = pinMaxPositions;
     }
     generateDrawing() {
-        const leftPins = this.pinDefinition.filter(item => {
-            return item.side === SymbolPinSide.Left;
-        });
-        const rightPins = this.pinDefinition.filter(item => {
-            return item.side === SymbolPinSide.Right;
-        });
-        const maxLeftPins = Math.max(...leftPins.map(item => item.position)) + 1;
-        const maxRightPins = Math.max(...rightPins.map(item => item.position)) + 1;
-        const drawing = new SymbolDrawing();
+        const leftPins = this.getPins(SymbolPinSide.Left);
+        const rightPins = this.getPins(SymbolPinSide.Right);
+        const topPins = this.getPins(SymbolPinSide.Top);
+        const bottomPins = this.getPins(SymbolPinSide.Bottom);
+        this.drawing.clear();
+        const drawing = this.drawing;
         drawing.angle = this._angle;
         drawing.flipX = this._flipX;
         drawing.flipY = this._flipY;
-        const bodyWidth = this.bodyWidth;
-        const bodyHeight = (1 + Math.max(maxLeftPins, maxRightPins)) * this.pinSpacing;
+        const { bodyWidth, bodyHeight } = this.calculateSize();
         const defaultLineColor = ColorScheme.PinLineColor;
         drawing.addSetLineColor(defaultLineColor);
-        drawing.addSetLineWidth(5);
-        drawing.addRectMM(0, 0, bodyWidth, bodyHeight);
-        this.generateDrawingPins(drawing, bodyWidth, bodyHeight, leftPins, rightPins, defaultLineColor);
+        drawing.addSetLineWidth(numeric(5));
+        drawing.addRectMM(numeric(0), numeric(0), bodyWidth, bodyHeight);
+        this.generateDrawingPins(drawing, bodyWidth, bodyHeight, {
+            left: leftPins, right: rightPins, top: topPins, bottom: bottomPins
+        }, defaultLineColor);
         this.drawing = drawing;
         this._cacheLeftPins = leftPins;
         this._cacheRightPins = rightPins;
+        this._cacheTopPins = topPins;
+        this._cacheBottomPins = bottomPins;
     }
-    generateDrawingPins(drawing, bodyWidthMM, bodyHeightMM, leftPins, rightPins, defaultLineColor) {
-        const leftPinStart = -bodyWidthMM / 2;
-        const rightPinStart = bodyWidthMM / 2;
-        const pinStartY = -bodyHeightMM / 2;
+    getPins(side) {
+        const pins = this.pinDefinition.filter(item => {
+            return item.side === side;
+        });
+        return pins;
+    }
+    generateDrawingPins(drawing, bodyWidthMM, bodyHeightMM, pins, defaultLineColor) {
+        const { left: leftPins, right: rightPins, top: topPins, bottom: bottomPins } = pins;
+        const leftPinStart = bodyWidthMM.neg().div(2);
+        const rightPinStart = bodyWidthMM.div(2);
+        const topPinStart = bodyHeightMM.neg().div(2);
+        const bottomPinStart = bodyHeightMM.div(2);
+        const pinStartY = bodyHeightMM.neg().div(2);
+        const pinStartX = bodyWidthMM.neg().div(2);
+        const tmpPinSpacing = this.pinSpacing.toNumber();
         leftPins.forEach(pin => {
             const position = pin.position;
-            const pinY = pinStartY + (position + 1) * this.pinSpacing;
-            drawing.addPinMM(pin.pinId, leftPinStart - this.pinLength, pinY, leftPinStart, pinY, defaultLineColor);
-            drawing.addLabel(leftPinStart + milsToMM(20), pinY, pin.text, {
-                fontSize: CustomSymbolPinTextSize,
+            const pinY = pinStartY.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), leftPinStart.sub(this.pinLength), pinY, leftPinStart, pinY, defaultLineColor);
+            drawing.addLabel(leftPinStart.add(milsToMM(20)), pinY, pin.text, {
+                fontSize: numeric(CustomSymbolPinTextSize),
                 anchor: HorizontalAlign.Left,
                 vanchor: VerticalAlign.Middle,
                 textColor: ColorScheme.PinNameColor,
             });
-            drawing.addLabel(leftPinStart - milsToMM(10), pinY - milsToMM(10), pin.pinId.toString(), {
-                fontSize: CustomSymbolPinIdSize,
+            drawing.addLabel(leftPinStart.sub(milsToMM(10)), pinY.sub(milsToMM(10)), pin.pinId.toString(), {
+                fontSize: numeric(CustomSymbolPinIdSize),
                 anchor: HorizontalAlign.Right,
                 vanchor: VerticalAlign.Bottom,
                 textColor: defaultLineColor
@@ -663,32 +713,70 @@ export class SymbolCustom extends SymbolGraphic {
         });
         rightPins.forEach(pin => {
             const position = pin.position;
-            const pinY = pinStartY + (position + 1) * this.pinSpacing;
-            drawing.addPinMM(pin.pinId, rightPinStart + this.pinLength, pinY, rightPinStart, pinY, defaultLineColor);
-            drawing.addLabel(rightPinStart - milsToMM(20), pinY, pin.text, {
-                fontSize: CustomSymbolPinTextSize,
+            const pinY = pinStartY.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), rightPinStart.add(this.pinLength), pinY, rightPinStart, pinY, defaultLineColor);
+            drawing.addLabel(rightPinStart.sub(milsToMM(20)), pinY, pin.text, {
+                fontSize: numeric(CustomSymbolPinTextSize),
                 anchor: HorizontalAlign.Right,
                 vanchor: VerticalAlign.Middle,
                 textColor: ColorScheme.PinNameColor,
             });
-            drawing.addLabel(rightPinStart + milsToMM(10), pinY - milsToMM(10), pin.pinId.toString(), {
-                fontSize: CustomSymbolPinIdSize,
+            drawing.addLabel(rightPinStart.add(milsToMM(10)), pinY.sub(milsToMM(10)), pin.pinId.toString(), {
+                fontSize: numeric(CustomSymbolPinIdSize),
                 anchor: HorizontalAlign.Left,
                 vanchor: VerticalAlign.Bottom,
                 textColor: defaultLineColor
             });
         });
-        const instanceName = this.getLabelValue("refdes");
-        instanceName && drawing.addLabel(-bodyWidthMM / 2, -bodyHeightMM / 2 - milsToMM(20), instanceName, {
-            fontSize: CustomSymbolRefDesSize,
+        topPins.forEach(pin => {
+            const position = pin.position;
+            const pinX = pinStartX.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), pinX, topPinStart.sub(this.pinLength), pinX, topPinStart, defaultLineColor);
+            drawing.addLabel(pinX, topPinStart.add(milsToMM(20)), pin.text, {
+                fontSize: numeric(CustomSymbolPinTextSize),
+                anchor: HorizontalAlign.Right,
+                vanchor: VerticalAlign.Middle,
+                textColor: ColorScheme.PinNameColor,
+                angle: numeric(-90),
+            });
+            drawing.addLabel(pinX.sub(milsToMM(10)), topPinStart.sub(milsToMM(10)), pin.pinId.toString(), {
+                fontSize: numeric(CustomSymbolPinIdSize),
+                anchor: HorizontalAlign.Left,
+                vanchor: VerticalAlign.Bottom,
+                textColor: defaultLineColor,
+                angle: numeric(-90),
+            });
+        });
+        bottomPins.forEach(pin => {
+            const position = pin.position;
+            const pinX = pinStartX.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), pinX, bottomPinStart.add(this.pinLength), pinX, bottomPinStart, defaultLineColor);
+            drawing.addLabel(pinX, bottomPinStart.sub(milsToMM(20)), pin.text, {
+                fontSize: numeric(CustomSymbolPinTextSize),
+                anchor: HorizontalAlign.Left,
+                vanchor: VerticalAlign.Middle,
+                textColor: ColorScheme.PinNameColor,
+                angle: numeric(-90),
+            });
+            drawing.addLabel(pinX.sub(milsToMM(10)), bottomPinStart.add(milsToMM(10)), pin.pinId.toString(), {
+                fontSize: numeric(CustomSymbolPinIdSize),
+                anchor: HorizontalAlign.Right,
+                vanchor: VerticalAlign.Bottom,
+                textColor: defaultLineColor,
+                angle: numeric(-90)
+            });
+        });
+        const instanceName = drawing.variables.get('refdes');
+        instanceName && drawing.addLabel(bodyWidthMM.neg().div(2), bodyHeightMM.neg().div(2).sub(milsToMM(20)), instanceName, {
+            fontSize: numeric(CustomSymbolRefDesSize),
             anchor: HorizontalAlign.Left,
         });
         const acceptedMPNKeys = ['MPN', 'mpn', 'manufacturer_pn'];
         acceptedMPNKeys.some(key => {
-            const labelValue = this.getLabelValue(key);
+            const labelValue = drawing.variables.get(key);
             if (labelValue !== undefined) {
-                drawing.addLabel(-bodyWidthMM / 2, bodyHeightMM / 2 + milsToMM(20), labelValue, {
-                    fontSize: CustomSymbolParamTextSize,
+                drawing.addLabel(bodyWidthMM.neg().div(2), bodyHeightMM.div(2).add(milsToMM(20)), labelValue, {
+                    fontSize: numeric(CustomSymbolParamTextSize),
                     anchor: HorizontalAlign.Left,
                     vanchor: VerticalAlign.Top,
                 });
@@ -696,25 +784,55 @@ export class SymbolCustom extends SymbolGraphic {
         });
     }
     calculateSize() {
-        this.width = this.bodyWidth + 2 * this.pinLength;
-        this.height = (1 + Math.max(this._cacheLeftPins.length, this._cacheRightPins.length)) * this.pinSpacing;
+        const tmpPinSpacing = this.pinSpacing.toNumber();
+        const tmpPinLength = this.pinLength.toNumber();
+        const { [SymbolPinSide.Top]: maxTopPins, [SymbolPinSide.Bottom]: maxBottomPins, [SymbolPinSide.Left]: maxLeftPins, [SymbolPinSide.Right]: maxRightPins } = this.pinMaxPositions;
+        const bodyWidthFromPins = numeric((1 + Math.max(maxTopPins, maxBottomPins)) * tmpPinSpacing);
+        const bodyWidth = Math.max(bodyWidthFromPins.toNumber(), this.bodyWidth.toNumber());
+        let tmpBodyHeight = 0;
+        if (maxLeftPins === 0 && maxRightPins === 0) {
+            tmpBodyHeight = 3;
+        }
+        else {
+            tmpBodyHeight = (1 + Math.max(maxLeftPins, maxRightPins));
+        }
+        const bodyHeight = Math.max(tmpBodyHeight * tmpPinSpacing, this.bodyHeight.toNumber());
+        const useHeight = bodyHeight
+            + ((this._cacheTopPins.length > 0) ? tmpPinLength : 0)
+            + ((this._cacheBottomPins.length > 0) ? tmpPinLength : 0);
+        const useWidth = bodyWidth
+            + ((this._cacheLeftPins.length > 0) ? tmpPinLength : 0)
+            + ((this._cacheRightPins.length > 0) ? tmpPinLength : 0);
+        this.width = numeric(useWidth);
+        this.height = numeric(useHeight);
+        return {
+            bodyWidth: numeric(bodyWidth),
+            bodyHeight: numeric(bodyHeight),
+            width: this.width,
+            height: this.height
+        };
     }
 }
 export class SymbolCustomModule extends SymbolCustom {
-    pinLength = 0;
+    pinLength = milsToMM(0);
     portWidth = milsToMM(100);
     portHeight = milsToMM(50);
-    generateDrawingPins(drawing, bodyWidthMM, bodyHeightMM, leftPins, rightPins, defaultLineColor) {
-        const leftPinStart = -bodyWidthMM / 2;
-        const rightPinStart = bodyWidthMM / 2;
-        const pinStartY = -bodyHeightMM / 2;
+    generateDrawingPins(drawing, bodyWidthMM, bodyHeightMM, pins, defaultLineColor) {
+        const leftPinStart = bodyWidthMM.neg().div(2);
+        const rightPinStart = bodyWidthMM.div(2);
+        const topPinStart = bodyHeightMM.neg().div(2);
+        const bottomPinStart = bodyHeightMM.div(2);
+        const pinStartY = bodyHeightMM.neg().div(2);
+        const pinStartX = bodyWidthMM.neg().div(2);
+        const tmpPinSpacing = this.pinSpacing.toNumber();
+        const { left: leftPins, right: rightPins, top: topPins, bottom: bottomPins } = pins;
         leftPins.forEach(pin => {
             const position = pin.position;
-            const pinY = pinStartY + (position + 1) * this.pinSpacing;
-            drawing.addPinMM(pin.pinId, leftPinStart - this.pinLength, pinY, leftPinStart, pinY, defaultLineColor);
+            const pinY = pinStartY.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), leftPinStart.sub(this.pinLength), pinY, leftPinStart, pinY, defaultLineColor);
             drawing.addModulePort(leftPinStart, pinY, this.portWidth, this.portHeight, pin.pinType);
-            drawing.addLabel(leftPinStart + this.portWidth + milsToMM(20), pinY, pin.text, {
-                fontSize: 40,
+            drawing.addLabel(leftPinStart.add(this.portWidth).add(milsToMM(20)), pinY, pin.text, {
+                fontSize: numeric(40),
                 anchor: HorizontalAlign.Left,
                 vanchor: VerticalAlign.Middle,
                 textColor: ColorScheme.PinNameColor,
@@ -722,14 +840,40 @@ export class SymbolCustomModule extends SymbolCustom {
         });
         rightPins.forEach(pin => {
             const position = pin.position;
-            const pinY = pinStartY + (position + 1) * this.pinSpacing;
-            drawing.addPinMM(pin.pinId, rightPinStart + this.pinLength, pinY, rightPinStart, pinY, defaultLineColor);
+            const pinY = pinStartY.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), rightPinStart.add(this.pinLength), pinY, rightPinStart, pinY, defaultLineColor);
             drawing.addModulePort(rightPinStart, pinY, this.portWidth, this.portHeight, pin.pinType, -1);
-            drawing.addLabel(rightPinStart - this.portWidth - milsToMM(20), pinY, pin.text, {
-                fontSize: 40,
+            drawing.addLabel(rightPinStart.sub(this.portWidth).sub(milsToMM(20)), pinY, pin.text, {
+                fontSize: numeric(40),
+                anchor: HorizontalAlign.Right,
+                vanchor: VerticalAlign.Middle,
+                textColor: ColorScheme.PinNameColor,
+            });
+        });
+        topPins.forEach(pin => {
+            const position = pin.position;
+            const pinX = pinStartX.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), pinX, topPinStart.sub(this.pinLength), pinX, topPinStart, defaultLineColor);
+            drawing.addModulePort(pinX, topPinStart, this.portWidth, this.portHeight, pin.pinType, 1, 90);
+            drawing.addLabel(pinX, topPinStart.add(this.portWidth).add(milsToMM(20)), pin.text, {
+                fontSize: numeric(40),
                 anchor: HorizontalAlign.Right,
                 vanchor: VerticalAlign.Middle,
                 textColor: ColorScheme.PinNameColor,
+                angle: numeric(-90),
+            });
+        });
+        bottomPins.forEach(pin => {
+            const position = pin.position;
+            const pinX = pinStartX.add((position + 1) * tmpPinSpacing);
+            drawing.addPinMM(numeric(pin.pinId), pinX, bottomPinStart, pinX, bottomPinStart.sub(this.pinLength), defaultLineColor);
+            drawing.addModulePort(pinX, bottomPinStart, this.portWidth, this.portHeight, pin.pinType, 1, -90);
+            drawing.addLabel(pinX, bottomPinStart.sub(this.portWidth).sub(milsToMM(20)), pin.text, {
+                fontSize: numeric(40),
+                anchor: HorizontalAlign.Left,
+                vanchor: VerticalAlign.Middle,
+                textColor: ColorScheme.PinNameColor,
+                angle: numeric(-90),
             });
         });
     }
@@ -740,8 +884,9 @@ export class SymbolDrawing {
     angle = 0;
     flipX = 0;
     flipY = 0;
-    mainOrigin = [0, 0];
+    mainOrigin = [numeric(0), numeric(0)];
     logger = null;
+    variables = new Map();
     clear() {
         this.items = [];
         this.pins = [];
@@ -766,26 +911,30 @@ export class SymbolDrawing {
     }
     addPinMM(pinId, startXMM, startYMM, endXMM, endYMM, lineColor) {
         let angle = 0;
-        if (startXMM === endXMM) {
-            if (startYMM > endYMM) {
+        const tmpStartXMM = startXMM.toNumber();
+        const tmpEndXMM = endXMM.toNumber();
+        const tmpStartYMM = startYMM.toNumber();
+        const tmpEndYMM = endYMM.toNumber();
+        if (tmpStartXMM === tmpEndXMM) {
+            if (tmpStartYMM > tmpEndYMM) {
                 angle = 270;
             }
-            else if (startYMM < endYMM) {
+            else if (tmpStartYMM < tmpEndYMM) {
                 angle = 90;
             }
         }
         else {
-            if (startXMM < endXMM) {
+            if (tmpStartXMM < tmpEndXMM) {
                 angle = 0;
             }
-            else if (startXMM > endXMM) {
+            else if (tmpStartXMM > tmpEndXMM) {
                 angle = 180;
             }
         }
         this.pins.push([
             pinId,
             Geometry.segment([startXMM, startYMM], [endXMM, endYMM]),
-            angle,
+            numeric(angle),
             lineColor
         ]);
         return this;
@@ -794,14 +943,14 @@ export class SymbolDrawing {
         startX = milsToMM(startX);
         startY = milsToMM(startY);
         value = milsToMM(value);
-        this.items.push(Geometry.segment([startX, startY], [startX, startY + value]));
+        this.items.push(Geometry.segment([startX, startY], [startX, startY.add(value)]));
         return this;
     }
     addHLine(startX, startY, value) {
         startX = milsToMM(startX);
         startY = milsToMM(startY);
         value = milsToMM(value);
-        this.items.push(Geometry.segment([startX, startY], [startX + value, startY]));
+        this.items.push(Geometry.segment([startX, startY], [startX.add(value), startY]));
         return this;
     }
     addRect(centerX, centerY, width, height) {
@@ -812,14 +961,14 @@ export class SymbolDrawing {
         return this.addRectMM(centerX, centerY, width, height);
     }
     addRectMM(centerX, centerY, width, height) {
-        const width2 = width / 2;
-        const height2 = height / 2;
+        const width2 = width.div(2);
+        const height2 = height.div(2);
         this.items.push(Geometry.polygon([
-            [centerX - width2, centerY - height2],
-            [centerX + width2, centerY - height2],
-            [centerX + width2, centerY + height2],
-            [centerX - width2, centerY + height2],
-            [centerX - width2, centerY - height2]
+            [centerX.sub(width2), centerY.sub(height2)],
+            [centerX.add(width2), centerY.sub(height2)],
+            [centerX.add(width2), centerY.add(height2)],
+            [centerX.sub(width2), centerY.add(height2)],
+            [centerX.sub(width2), centerY.sub(height2)]
         ]));
         return this;
     }
@@ -831,25 +980,15 @@ export class SymbolDrawing {
         width = milsToMM(width);
         const line = Geometry.line(startX, startY, endX, endY);
         const normLine = line.norm;
-        const dx1 = normLine.x * width / 2;
-        const dy1 = normLine.y * width / 2;
-        const dx2 = normLine.x * -width / 2;
-        const dy2 = normLine.y * -width / 2;
+        const dx1 = numeric(normLine.x).mul(width).div(2);
+        const dy1 = numeric(normLine.y).mul(width).div(2);
+        const dx2 = numeric(normLine.x).mul(width.neg()).div(2);
+        const dy2 = numeric(normLine.y).mul(width.neg()).div(2);
         this.items.push(Geometry.polygon([
-            [dx1 + startX, dy1 + startY],
-            [dx2 + startX, dy2 + startY],
+            [dx1.add(startX), dy1.add(startY)],
+            [dx2.add(startX), dy2.add(startY)],
             [endX, endY],
-            [dx1 + startX, dy1 + startY],
-        ]));
-        return this;
-    }
-    addRect2(x, y, x2, y2) {
-        this.items.push(Geometry.polygon([
-            [x, y],
-            [x2, y],
-            [x2, y2],
-            [x, y2],
-            [x, y]
+            [dx1.add(startX), dy1.add(startY)],
         ]));
         return this;
     }
@@ -857,10 +996,10 @@ export class SymbolDrawing {
         this.items.push(Geometry.label(null, x, y, textValue, style));
         return this;
     }
-    addLabelId(id, x, y, textValue, style) {
+    addLabelMils(x, y, textValue, style) {
         x = milsToMM(x);
         y = milsToMM(y);
-        this.items.push(Geometry.label(id, x, y, textValue, style));
+        this.items.push(Geometry.label(null, x, y, textValue, style));
         return this;
     }
     addTextbox(x, y, textValue, style) {
@@ -869,54 +1008,59 @@ export class SymbolDrawing {
         this.items.push(Geometry.textbox(null, x, y, textValue, style));
         return this;
     }
-    addModulePort(x, y, width, height, portType = PinTypes.Any, scaleX = 1) {
-        const height2 = height / 2;
+    addModulePort(x, y, width, height, portType = PinTypes.Any, scaleX = 1, angle = 0) {
+        const height2 = height.div(2);
         let path = [];
         const arrowSize = milsToMM(30);
         if (portType === PinTypes.Any) {
             path = [
-                [0, -height2],
-                [width, -height2],
-                [width, +height2],
-                [0, +height2],
-                [0, -height2]
+                [numeric(0), height2.neg()],
+                [width, height2.neg()],
+                [width, height2],
+                [numeric(0), height2],
+                [numeric(0), height2.neg()]
             ];
         }
         else if (portType === PinTypes.Output) {
             path = [
-                [arrowSize, -height2],
-                [width, -height2],
+                [arrowSize, height2.neg()],
+                [width, height2.neg()],
                 [width, height2],
                 [arrowSize, height2],
-                [0, 0],
-                [arrowSize, -height2]
+                [numeric(0), numeric(0)],
+                [arrowSize, height2.neg()]
             ];
         }
         else if (portType === PinTypes.Input) {
             path = [
-                [0, -height2],
-                [width - arrowSize, -height2],
-                [width, 0],
-                [width - arrowSize, height2],
-                [0, +height2],
-                [0, -height2],
+                [numeric(0), height2.neg()],
+                [width.sub(arrowSize), height2.neg()],
+                [width, numeric(0)],
+                [width.sub(arrowSize), height2],
+                [numeric(0), height2],
+                [numeric(0), height2.neg()],
             ];
         }
         else if (portType === PinTypes.IO) {
             path = [
-                [arrowSize, -height2],
-                [width - arrowSize, -height2],
-                [width, 0],
-                [width - arrowSize, +height2],
-                [arrowSize, +height2],
-                [0, 0],
-                [0 + arrowSize, -height2],
+                [arrowSize, height2.neg()],
+                [width.sub(arrowSize), height2.neg()],
+                [width, numeric(0)],
+                [width.sub(arrowSize), height2],
+                [arrowSize, height2],
+                [numeric(0), numeric(0)],
+                [arrowSize, height2.neg()],
             ];
         }
         path = path.map(point => {
-            return [x + point[0] * scaleX, y + point[1]];
+            return [
+                x.add(point[0].mul(scaleX)),
+                y.add(point[1])
+            ];
         });
-        this.items.push(Geometry.polygon(path));
+        const polygon = Geometry.polygon(path)
+            .rotate(angle * Math.PI / 180, Geometry.point(x, y));
+        this.items.push(polygon);
         return this;
     }
     addPath(...pathParts) {
@@ -925,6 +1069,9 @@ export class SymbolDrawing {
                 accum = accum.concat(tmp.split(" "));
             }
             else if (typeof tmp === "number") {
+                accum.push(numeric(tmp));
+            }
+            else if (tmp instanceof NumericValue) {
                 accum.push(tmp);
             }
             return accum;
@@ -937,14 +1084,14 @@ export class SymbolDrawing {
                 if (currentObj !== null) {
                     geomObjects.push(currentObj);
                 }
-                const x = milsToMM(Number(parts[i + 1]));
-                const y = milsToMM(Number(parts[i + 2]));
+                const x = milsToMM(parts[i + 1]);
+                const y = milsToMM(parts[i + 2]);
                 currentObj = [[x, y]];
                 i += 2;
             }
             else if (command === 'L') {
-                const x = milsToMM(Number(parts[i + 1]));
-                const y = milsToMM(Number(parts[i + 2]));
+                const x = milsToMM(parts[i + 1]);
+                const y = milsToMM(parts[i + 2]);
                 currentObj.push([x, y]);
                 i += 2;
             }
@@ -990,8 +1137,8 @@ export class SymbolDrawing {
         x = milsToMM(x);
         y = milsToMM(y);
         radius = milsToMM(radius);
-        startAngle = startAngle * Math.PI / 180;
-        endAngle = endAngle * Math.PI / 180;
+        startAngle = startAngle.mul(Math.PI).div(180);
+        endAngle = endAngle.mul(Math.PI).div(180);
         this.items.push(Geometry.arc([x, y], radius, startAngle, endAngle, true));
         return this;
     }
@@ -1001,7 +1148,7 @@ export class SymbolDrawing {
     }
     getPaths() {
         let currentFill = "#fff";
-        let currentLineWidth = 1;
+        let currentLineWidth = numeric(1);
         let currentLineColor = '#333';
         const pathItems = [];
         this.items.forEach(item => {
@@ -1068,7 +1215,7 @@ export class SymbolDrawing {
     }
     getPinPosition(pinId) {
         const pin = this.pins.find(item => {
-            return item[0] === pinId;
+            return item[0].toNumber() === pinId;
         });
         if (pin) {
             const [, feature, angle] = pin;
@@ -1086,31 +1233,27 @@ export class SymbolDrawing {
 }
 export class SymbolDrawingCommands extends SymbolDrawing {
     id = "";
-    commands;
-    constructor(commands) {
+    commands = [];
+    paramIds = [];
+    callback;
+    constructor(callback) {
         super();
-        this.commands = commands;
+        this.callback = callback;
         this.id = Math.random().toString().slice(2);
     }
+    runCommands() {
+        this.commands = this.callback(this.variables);
+    }
     getCommands() {
+        this.runCommands();
         return this.commands;
     }
     clone() {
-        const tmpCommands = this.commands.map(item => {
-            if (item[0] === PlaceHolderCommands.label) {
-                const commandName = item[0];
-                const positionParams = item[1];
-                const keywordParams = item[2];
-                const newMap = new Map();
-                for (const [key, value] of keywordParams) {
-                    newMap.set(key, value);
-                }
-                return [commandName, positionParams, newMap];
-            }
-            else {
-                return [...item];
-            }
-        });
-        return new SymbolDrawingCommands(tmpCommands);
+        const cloned = new SymbolDrawingCommands(this.callback);
+        cloned.variables = this.variables;
+        return cloned;
+    }
+    eq(other) {
+        return this.callback === other.callback;
     }
 }