circuitscript 0.1.0 → 0.1.2

package/dist/esm/objects/ClassComponent.mjs

@@ -1,6 +1,7 @@
 import { SymbolDrawingCommands } from '../draw_symbols.mjs';
 import { PinDefinition, PinIdType } from './PinDefinition.mjs';
 import { PinTypes } from './PinTypes.mjs';
+import { ParamKeys } from '../globals.mjs';
 export class ClassComponent {
     instanceName;
     numPins;
@@ -8,14 +9,15 @@ export class ClassComponent {
     pins = new Map();
     pinNets = new Map();
     pinWires = new Map();
+    pinsMaxPositions = {};
     _cachedPins;
     _cachedParams;
-    className;
     _copyID = null;
     _copyFrom = null;
     arrangeProps = null;
     displayProp = null;
     widthProp = null;
+    heightProp = null;
     typeProp = null;
     copyProp = false;
     angleProp = 0;
@@ -23,17 +25,10 @@ export class ClassComponent {
     wireOrientationAngle = 0;
     useWireOrientationAngle = true;
     didSetWireOrientationAngle = false;
-    styles = {};
     assignedRefDes = null;
-    moduleContainsExpressions;
-    moduleCounter = 0;
-    moduleExecutionContext;
-    moduleExecutionContextName;
-    modulePinIdToPortMap;
-    constructor(instanceName, numPins, className) {
+    constructor(instanceName, numPins) {
         this.instanceName = instanceName;
         this.numPins = numPins;
-        this.className = className;
     }
     setupPins() {
         for (let i = 1; i < this.numPins + 1; i++) {
@@ -110,25 +105,26 @@ export class ClassComponent {
     toString() {
         return this.instanceName;
     }
-    static simple(instanceName, numPins, className) {
-        const component = new ClassComponent(instanceName, numPins, className);
+    static simple(instanceName, numPins) {
+        const component = new ClassComponent(instanceName, numPins);
         component.setupPins();
         return component;
     }
     isEqual(other) {
         return this.instanceName === other.instanceName
             && this.numPins === other.numPins
-            && this.className === other.className
             && this._copyID === other._copyID
             && this.arrangeProps === other.arrangeProps
-            && this.displayProp === other.displayProp
+            && ((this.displayProp === null && other.displayProp === null)
+                ||
+                    (this.displayProp !== null && other.displayProp !== null && this.displayProp.eq(other.displayProp)))
             && this.widthProp === other.widthProp
             && this.typeProp === other.typeProp
             && this._cachedPins === other._cachedPins
             && this._cachedParams === other._cachedParams;
     }
     clone() {
-        const component = new ClassComponent(this.instanceName, this.numPins, this.className);
+        const component = new ClassComponent(this.instanceName, this.numPins);
         component._copyID = this._copyID;
         component.arrangeProps = this.arrangeProps;
         component.widthProp = this.widthProp;
@@ -136,17 +132,12 @@ export class ClassComponent {
         component.angleProp = this.angleProp;
         component.followWireOrientationProp = this.followWireOrientationProp;
         component.useWireOrientationAngle = this.useWireOrientationAngle;
-        if (this.displayProp) {
-            if (typeof this.displayProp === "string") {
-                component.displayProp = this.displayProp;
-            }
-            else if (this.displayProp instanceof SymbolDrawingCommands) {
-                component.displayProp =
-                    this.displayProp.clone();
-            }
+        if (this.displayProp instanceof SymbolDrawingCommands) {
+            component.displayProp =
+                this.displayProp.clone();
         }
         for (const [key, value] of this.parameters) {
-            if (key === 'flipX' || key === 'flipY' || key === 'angle') {
+            if (key === ParamKeys.flipX || key === ParamKeys.flipY || key === ParamKeys.angle) {
                 continue;
             }
             component.parameters.set(key, value);
@@ -154,10 +145,14 @@ export class ClassComponent {
         for (const [key, value] of this.pins) {
             component.pins.set(key, value);
         }
-        for (const key in this.styles) {
-            component.styles[key] = this.styles[key];
-        }
         component.refreshCache();
         return component;
     }
 }
+export class ModuleComponent extends ClassComponent {
+    moduleContainsExpressions;
+    moduleCounter = 0;
+    moduleExecutionContext;
+    moduleExecutionContextName;
+    modulePinIdToPortMap;
+}

package/dist/esm/objects/ExecutionScope.mjs

@@ -46,10 +46,7 @@ export class ExecutionScope {
     }
     getNet(component, pin) {
         const result = this.findNet(component, pin);
-        if (result) {
-            return result[2];
-        }
-        return null;
+        return result ? result[2] : null;
     }
     setNet(component, pin, net) {
         const pair = this.findNet(component, pin);
@@ -112,6 +109,15 @@ export class ExecutionScope {
         this.currentWireId = -1;
         this.currentFrameId = -1;
     }
+    setCurrent(component, pin = null) {
+        this.currentComponent = component;
+        if (component !== null) {
+            this.currentPin = (pin === null) ? component.getDefaultPin() : pin;
+        }
+        else {
+            this.currentPin = null;
+        }
+    }
 }
 export var SequenceAction;
 (function (SequenceAction) {

package/dist/esm/objects/Frame.mjs

@@ -1,8 +1,9 @@
+import { FrameType } from "../globals.mjs";
 export class Frame {
     parameters = new Map();
     frameId;
     frameType;
-    constructor(frameId, frameType) {
+    constructor(frameId, frameType = FrameType.Frame) {
         this.frameId = frameId;
         this.frameType = frameType;
     }

package/dist/esm/objects/ParamDefinition.mjs

@@ -1,3 +1,5 @@
+import { getNumberExponential, getNumberExponentialText, resolveToNumericValue } from "../utils";
+import { Big } from 'big.js';
 export class ParamDefinition {
     paramName;
     paramValue;
@@ -8,8 +10,26 @@ export class ParamDefinition {
 }
 export class NumericValue {
     value;
-    constructor(value) {
+    valuePart;
+    prefixPart;
+    constructor(value, prefix = 0) {
         this.value = value;
+        if (typeof value === 'string') {
+            const matches = value.match(/^([\d]+(?:.[\d]+)?)([\w]*)$/);
+            if (matches) {
+                this.valuePart = new Big(matches[1]);
+                this.prefixPart = getNumberExponential(matches[2]);
+            }
+            else {
+                throw new Error("Invalid numeric value: " + value);
+            }
+        }
+        else {
+            this.valuePart = new Big(value);
+            this.prefixPart = prefix;
+            this.value = this.valuePart.toString()
+                + getNumberExponentialText(prefix);
+        }
     }
     toString() {
         return 'numeric:' + this.value;
@@ -18,11 +38,57 @@ export class NumericValue {
         if (typeof this.value === 'number') {
             return this.value.toString();
         }
-        else if (typeof this.value === 'string') {
-            return this.value;
+        else {
+            return this.valuePart.toString()
+                + getNumberExponentialText(this.prefixPart);
+        }
+    }
+    toNumber() {
+        return this.toBigNumber().toNumber();
+    }
+    toBigNumber() {
+        return this.valuePart.mul(new Big(Math.pow(10, this.prefixPart)));
+    }
+    div(value) {
+        if (typeof value === 'number') {
+            value = numeric(value);
+        }
+        return resolveToNumericValue(this.toBigNumber().div(value.toBigNumber()));
+    }
+    mul(value) {
+        if (typeof value === 'number') {
+            value = numeric(value);
         }
+        return resolveToNumericValue(this.toBigNumber().mul(value.toBigNumber()));
+    }
+    add(value) {
+        if (typeof value === 'number') {
+            value = numeric(value);
+        }
+        return resolveToNumericValue(this.toBigNumber().add(value.toBigNumber()));
+    }
+    sub(value) {
+        if (typeof value === 'number') {
+            value = numeric(value);
+        }
+        return resolveToNumericValue(this.toBigNumber().sub(value.toBigNumber()));
+    }
+    mod(value) {
+        if (typeof value === 'number') {
+            value = numeric(value);
+        }
+        return resolveToNumericValue(this.toBigNumber().mod(value.toBigNumber()));
+    }
+    neg() {
+        return resolveToNumericValue(this.toBigNumber().neg());
+    }
+    eq(value) {
+        return this.toBigNumber().eq(value.toBigNumber());
     }
 }
+export function numeric(value) {
+    return new NumericValue(value);
+}
 export class PercentageValue {
     value;
     constructor(value) {
@@ -31,4 +97,54 @@ export class PercentageValue {
     toString() {
         return this.value.toString();
     }
+    toNumber() {
+        return 0;
+    }
+}
+export class WrappedNumber {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value.toString();
+    }
+    toNumber() {
+        return this.value;
+    }
+}
+export class NumberOperator {
+    prepare(value) {
+        if (typeof value === 'number') {
+            return new WrappedNumber(value);
+        }
+        else {
+            return value;
+        }
+    }
+    multiply(value1, value2) {
+        const big1 = new Big(value1.toNumber());
+        const big2 = new Big(value2.toNumber());
+        return resolveToNumericValue(big1.mul(big2));
+    }
+    divide(value1, value2) {
+        const big1 = new Big(value1.toNumber());
+        const big2 = new Big(value2.toNumber());
+        return resolveToNumericValue(big1.div(big2));
+    }
+    addition(value1, value2) {
+        const big1 = new Big(value1.toNumber());
+        const big2 = new Big(value2.toNumber());
+        return resolveToNumericValue(big1.add(big2));
+    }
+    subtraction(value1, value2) {
+        const big1 = new Big(value1.toNumber());
+        const big2 = new Big(value2.toNumber());
+        return resolveToNumericValue(big1.sub(big2));
+    }
+    modulus(value1, value2) {
+        const big1 = new Big(value1.toNumber());
+        const big2 = new Big(value2.toNumber());
+        return resolveToNumericValue(big1.mod(big2));
+    }
 }

package/dist/esm/objects/PinDefinition.mjs

@@ -27,5 +27,3 @@ export var PortSide;
     PortSide["SOUTH"] = "SOUTH";
     PortSide["NORTH"] = "NORTH";
 })(PortSide || (PortSide = {}));
-export class PinReference {
-}

package/dist/esm/render.mjs

@@ -1,10 +1,10 @@
 import { SVG, registerWindow } from '@svgdotjs/svg.js';
 import { ExtractDrawingRects, RenderFrameType, getBounds } from "./layout.mjs";
 import { applyFontsToSVG, getCreateSVGWindow } from './sizing.mjs';
-import { ColorScheme, ComponentTypes, FrameType, MMToPt, MMToPx, ParamKeys, RenderFlags, defaultFont, defaultGridSizeUnits, defaultPageSpacingMM, defaultWireLineWidth, fontDisplayScale, junctionSize } from './globals.mjs';
+import { ColorScheme, ComponentTypes, FrameType, MMToPt, MMToPx, ParamKeys, RenderFlags, defaultGridSizeUnits, defaultPageSpacingMM, defaultWireLineWidth, fontDisplayScale, junctionSize } from './globals.mjs';
 import { NumericValue } from './objects/ParamDefinition.mjs';
 import { combineMaps, getBoundsSize } from './utils.mjs';
-import { getPaperSize, milsToMM, PaperGridReferences } from './helpers.mjs';
+import { getPaperSize, milsToMM } from './helpers.mjs';
 import SVGtoPDF from 'svg-to-pdfkit';
 import { FrameParamKeys } from './objects/Frame.mjs';
 import { SymbolPlaceholder } from './draw_symbols.mjs';
@@ -16,11 +16,12 @@ function createSvgCanvas() {
     applyFontsToSVG(canvas);
     return canvas;
 }
-export function renderSheetsToSVG(sheetFrames) {
+export function renderSheetsToSVG(sheetFrames, logger) {
     const canvas = createSvgCanvas();
     sheetFrames.forEach((sheet, index) => {
         const sheetGroup = canvas.group();
-        sheetGroup.id('sheet-' + index);
+        sheetGroup.id('sheet-' + index).addClass('sheet');
+        logger.add('rendering sheet: sheet-' + index);
         const { components, wires, junctions, mergedWires, frames, textObjects } = sheet;
         const allFrames = [sheet.frame, ...frames];
         let gridBounds = null;
@@ -29,6 +30,7 @@ export function renderSheetsToSVG(sheetFrames) {
         let yOffset = 0;
         let sheetYOffset = 0;
         if (sheet.frame.frame) {
+            logger.add('drawing frame');
             const frameComponent = sheet.frame.frame.parameters
                 .get(FrameParamKeys.SheetType);
             if (frameComponent) {
@@ -41,15 +43,18 @@ export function renderSheetsToSVG(sheetFrames) {
                 let widthMM = 0;
                 let heightMM = 0;
                 if (frameRects[0]) {
-                    originalWidthMM = milsToMM(frameRects[0].width);
-                    originalHeightMM = milsToMM(frameRects[0].height);
+                    originalWidthMM = milsToMM(frameRects[0].width).toNumber();
+                    originalHeightMM = milsToMM(frameRects[0].height).toNumber();
+                    logger.add('first frame size: ' + originalWidthMM + ' ' + originalHeightMM);
                 }
                 if (frameRects[1]) {
-                    widthMM = milsToMM(frameRects[1].width);
-                    heightMM = milsToMM(frameRects[1].height);
+                    widthMM = milsToMM(frameRects[1].width).toNumber();
+                    heightMM = milsToMM(frameRects[1].height).toNumber();
+                    logger.add('second frame size: ' + widthMM + ' ' + heightMM);
                 }
                 xOffset = (originalWidthMM - widthMM) / 2;
                 yOffset = (originalHeightMM - heightMM) / 2;
+                logger.add('offset', xOffset, yOffset);
                 sheetYOffset = index * (originalHeightMM + defaultPageSpacingMM);
                 gridBounds = {
                     xmin: 0,
@@ -60,8 +65,10 @@ export function renderSheetsToSVG(sheetFrames) {
                 extendGrid = false;
             }
         }
-        const sheetElements = sheetGroup.group();
-        generateSVGChild(sheetElements, components, wires, junctions, mergedWires, allFrames, textObjects, gridBounds, extendGrid);
+        logger.add('sheet contents offset: ' + xOffset + ' ' + yOffset);
+        logger.add('generating svg children in sheet');
+        const sheetElements = sheetGroup.group().addClass('sheet-elements');
+        generateSVGChild(sheetElements, components, wires, junctions, mergedWires, allFrames, textObjects, gridBounds, extendGrid, logger);
         sheetElements.translate(xOffset, yOffset);
         sheetGroup.translate(0, sheetYOffset);
     });
@@ -105,16 +112,18 @@ export function generatePdfOutput(doc, canvas, sheetSize, sheetSizeDefined, zoom
         }
     });
 }
-function generateSVGChild(canvas, components, wires, junctions, mergedWires, frameObjects, textObjects, gridBounds, extendGrid) {
+function generateSVGChild(canvas, components, wires, junctions, mergedWires, frameObjects, textObjects, gridBounds, extendGrid, logger) {
     const displayWireId = false;
     if (gridBounds === null) {
+        logger.add('get grid bounds');
         gridBounds = getBounds(components, wires, junctions, frameObjects);
     }
-    drawGrid(canvas.group().translate(0, 0), gridBounds, extendGrid);
+    logger.add('grid bounds', gridBounds.xmin, gridBounds.ymin, gridBounds.xmax, gridBounds.ymax);
+    drawGrid(canvas.group().translate(0, 0), gridBounds, extendGrid, logger);
     components.forEach(item => {
         const { x, y, width, height } = item;
         const symbolGroup = canvas.group();
-        symbolGroup.translate(x, y);
+        symbolGroup.translate(x.toNumber(), y.toNumber());
         const { symbol = null } = item;
         if (symbol !== null && symbol) {
             const extra = {};
@@ -151,7 +160,7 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
                 family: 'Arial',
                 size: 50 * fontDisplayScale,
             })
-                .translate(wire.x + 5, wire.y + 5);
+                .translate(wire.x.add(5).toNumber(), wire.y.add(5).toNumber());
         });
     }
     const mergedWireGroup = canvas.group();
@@ -185,7 +194,7 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
             drawSheetFrameBorder(frameGroup, item);
         }
         else {
-            if (borderWidth > 0) {
+            if (borderWidth.toNumber() > 0) {
                 if (item.type === RenderFrameType.Container) {
                     strokeColor = '#111';
                 }
@@ -197,24 +206,27 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
                 }
                 const tmpRect = frameGroup.rect(width, height)
                     .fill('none')
-                    .stroke({ width: milsToMM(borderWidth), color: strokeColor });
-                tmpRect.translate(item.x, item.y);
+                    .stroke({
+                    width: milsToMM(borderWidth).toNumber(),
+                    color: strokeColor
+                });
+                tmpRect.translate(item.x.toNumber(), item.y.toNumber());
             }
         }
     });
     textObjects.forEach(item => {
         const { x, y, symbol } = item;
         const innerGroup = canvas.group();
-        innerGroup.translate(x, y);
+        innerGroup.translate(x.toNumber(), y.toNumber());
         symbol.draw(innerGroup);
     });
-    const originSize = milsToMM(10);
+    const originSize = milsToMM(10).toNumber();
     RenderFlags.ShowOrigin && canvas.group().translate(0, 0)
         .circle(originSize)
         .translate(-originSize / 2, -originSize / 2)
         .stroke('none').fill('red');
 }
-function drawGrid(group, canvasSize, extendGrid) {
+function drawGrid(group, canvasSize, extendGrid, logger) {
     const gridSize = defaultGridSizeUnits;
     const { xmin, ymin, xmax, ymax } = canvasSize;
     const extraValue = extendGrid ? 1 : 0;
@@ -228,8 +240,12 @@ function drawGrid(group, canvasSize, extendGrid) {
         : (ymax - ymin);
     const numCols = Math.floor((gridEndX - gridStartX) / gridSize)
         + (extendGrid ? 1 : 0);
+    const originSize = milsToMM(10).toNumber();
+    RenderFlags.ShowGridOrigin && group.circle(originSize)
+        .translate(-originSize / 2, -originSize / 2)
+        .stroke('none').fill('blue');
     const lines = [];
-    const smallOffset = milsToMM(3);
+    const smallOffset = milsToMM(3).toNumber();
     const startY = gridStartY - smallOffset / 2;
     const endY = gridEndY + smallOffset;
     for (let i = 0; i < numCols; i++) {
@@ -237,12 +253,13 @@ function drawGrid(group, canvasSize, extendGrid) {
         lines.push(`M ${startX} ${startY} L ${startX} ${endY}`);
     }
     const strokeSize = milsToMM(3);
-    group.path(lines.join(" "))
+    group.addClass('grid')
+        .path(lines.join(" "))
         .attr({
-        'stroke-dasharray': `${strokeSize},${gridSize - strokeSize}`,
+        'stroke-dasharray': `${strokeSize.toNumber()},${gridSize - strokeSize.toNumber()}`,
     })
         .stroke({
-        width: strokeSize,
+        width: strokeSize.toNumber(),
         color: '#000'
     });
 }
@@ -259,94 +276,7 @@ function drawSheetFrameBorder(frameGroup, frame) {
             symbol.draw(sheetFrameGroup);
             const offsetX = milsToMM(frameComponent.getParam('offset_x'));
             const offsetY = milsToMM(frameComponent.getParam('offset_y'));
-            sheetFrameGroup.translate(-offsetX, -offsetY);
-        }
-    }
-}
-function drawSheetFrameBorderDirect(frameGroup, frame, borderWidth, strokeColor, width, height) {
-    const commonStroke = {
-        width: milsToMM(borderWidth),
-        color: strokeColor
-    };
-    const commonFont = {
-        family: defaultFont,
-        size: 50 * fontDisplayScale,
-        'dominant-baseline': 'middle',
-        'text-anchor': 'middle',
-    };
-    let rows = 1;
-    let columns = 1;
-    let showGridReference = true;
-    if (PaperGridReferences[frame.size]) {
-        [rows, columns] = PaperGridReferences[frame.size];
-    }
-    else {
-        showGridReference = false;
-    }
-    if (!showGridReference) {
-        return;
-    }
-    const outerMargin = 2;
-    const outerWidth = width + outerMargin * 2;
-    const outerHeight = height + outerMargin * 2;
-    const outerRect = frameGroup.rect(outerWidth, outerHeight)
-        .fill('none')
-        .stroke(commonStroke);
-    outerRect.translate(frame.x - outerMargin, frame.y - outerMargin);
-    const gridWidth = outerWidth / columns;
-    const gridHeight = outerHeight / rows;
-    const pathPoints = [];
-    for (let i = 1; i < rows + 1; i++) {
-        const lineStartX = frame.x - outerMargin;
-        const lineStartX2 = frame.x - outerMargin + outerWidth - outerMargin;
-        const lineY = frame.y - outerMargin + (gridHeight * i);
-        if (i < rows) {
-            pathPoints.push(...[
-                "M", lineStartX, lineY, "L", lineStartX + outerMargin, lineY,
-                "M", lineStartX2, lineY, "L", lineStartX2 + outerMargin, lineY
-            ]);
+            sheetFrameGroup.translate(-offsetX.toNumber(), -offsetY.toNumber());
         }
-        const displayValue = String.fromCharCode(i + 64);
-        frameGroup.text(displayValue)
-            .font(commonFont)
-            .translate(lineStartX + outerMargin / 2, lineY - gridHeight / 2);
-        frameGroup.text(displayValue)
-            .font(commonFont)
-            .translate(lineStartX2 + outerMargin / 2, lineY - gridHeight / 2);
-    }
-    for (let i = 1; i < columns + 1; i++) {
-        const lineStartY = frame.y - outerMargin;
-        const lineStartY2 = frame.y - outerMargin + outerHeight - outerMargin;
-        const lineX = frame.x - outerMargin + (gridWidth * i);
-        if (i < columns) {
-            pathPoints.push(...[
-                "M", lineX, lineStartY, "L", lineX, lineStartY + outerMargin,
-                "M", lineX, lineStartY2, "L", lineX, lineStartY2 + outerMargin
-            ]);
-        }
-        frameGroup.text(i.toString())
-            .font(commonFont)
-            .translate(lineX - gridWidth / 2, lineStartY + outerMargin / 2 + milsToMM(10));
-        frameGroup.text(i.toString())
-            .font(commonFont)
-            .translate(lineX - gridWidth / 2, lineStartY2 + outerMargin / 2 + milsToMM(10));
-    }
-    frameGroup.path(pathPoints).stroke(commonStroke);
-    const titleWidth = milsToMM(3000);
-    const titleHeight = milsToMM(1000);
-    const rowHeight = milsToMM(200);
-    const points = [
-        "M", width - titleWidth, height,
-        "L", width - titleWidth, height - titleHeight,
-        "L", width, height - titleHeight,
-        "M", width - titleWidth, height - rowHeight,
-        "L", width, height - rowHeight,
-        "M", width - titleWidth, height - rowHeight * 2,
-        "L", width, height - rowHeight * 2,
-        "M", width - titleWidth, height - rowHeight * 3,
-        "L", width, height - rowHeight * 3
-    ];
-    frameGroup.path(points).stroke(commonStroke).fill('none');
-    if (frame.containsTitle) {
     }
 }

package/dist/esm/sizing.mjs

@@ -1,5 +1,5 @@
 import { SVG, registerWindow } from '@svgdotjs/svg.js';
-import { HorizontalAlign, VerticalAlign } from './geometry.mjs';
+import { HorizontalAlign, HorizontalAlignProp, VerticalAlign, VerticalAlignProp } from './geometry.mjs';
 import { defaultFont } from './globals.mjs';
 import { JSModuleType, detectJSModuleType } from './helpers.mjs';
 let MainCanvas = null;
@@ -38,27 +38,53 @@ export function measureTextSize2(text, fontFamily, fontSize, fontWeight = 'regul
     }
     const key = `${text}-${fontFamily}-${fontSize}-${fontWeight}-${anchor}-${vanchor}`;
     if (measureTextSizeCache[key] === undefined) {
-        let dominantBaseline = 'hanging';
+        let dominantBaseline = VerticalAlignProp.Hanging;
         switch (vanchor) {
             case VerticalAlign.Top:
-                dominantBaseline = 'hanging';
+                dominantBaseline = VerticalAlignProp.Hanging;
                 break;
             case VerticalAlign.Middle:
-                dominantBaseline = 'middle';
+                dominantBaseline = VerticalAlignProp.Central;
                 break;
             case VerticalAlign.Bottom:
-                dominantBaseline = 'text-top';
+                dominantBaseline = VerticalAlignProp.TextTop;
+                break;
+        }
+        let useAnchor = HorizontalAlignProp.Start;
+        switch (anchor) {
+            case HorizontalAlign.Left:
+                useAnchor = HorizontalAlignProp.Start;
+                break;
+            case HorizontalAlign.Middle:
+                useAnchor = HorizontalAlignProp.Middle;
+                break;
+            case HorizontalAlign.Right:
+                useAnchor = HorizontalAlignProp.End;
                 break;
         }
         fontFamily = defaultFont;
         const tmpTextElement = MainCanvas.text(text).font({
             family: fontFamily,
             size: fontSize,
-            anchor: anchor,
+            anchor: useAnchor,
             'dominant-baseline': dominantBaseline,
             weight: fontWeight,
-        }).fill('#333');
-        const textbox = tmpTextElement.bbox();
+        })
+            .attr("xml:space", "preserve")
+            .fill('#333');
+        let textbox = tmpTextElement.bbox();
+        const tmpTextBox = { ...textbox };
+        if (dominantBaseline === VerticalAlignProp.Hanging) {
+            tmpTextBox.y = textbox.cy - textbox.height;
+            tmpTextBox.y2 = tmpTextBox.y + textbox.height;
+            textbox = tmpTextBox;
+        }
+        else if (dominantBaseline === VerticalAlignProp.Central) {
+            tmpTextBox.y -= textbox.cy;
+            tmpTextBox.y2 -= textbox.cy;
+            tmpTextBox.cy = 0;
+            textbox = tmpTextBox;
+        }
         const { width, height } = textbox;
         tmpTextElement.remove();
         measureTextSizeCache[key] = {