wt-huatu 1.3.4 → 1.4.0

package/Readme.md

@@ -1,12 +1,11 @@
-<div style="text-align:center;">
-  <svg data-v-ab95988f="" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-5.45 -5.6 10.9 11.2" width="141.70000000000002" height="145.6"><polyline points="-2.250,5.0 -4.850,5.0 -4.850,-5.0 -2.250,-5.0 -2.250,-1.180 2.250,-1.180 2.250,-5.0 4.850,-5.0 4.850,5.0 2.250,5.0 2.250,1.180 -2.250,1.180 -2.250,3.180" fill="#0b4d4233" stroke="currentColor" stroke-width="0.4"></polyline><circle cx="-2.250" cy="5.0" r="0.40" fill="black"></circle><circle cx="-2.250" cy="1.180" r="0.40" fill="black"></circle><circle cx="-2.250" cy="3.180" r="0.40" fill="red"></circle></svg>
-</div>
+
+![wt-huatu logo](https://raw.githubusercontent.com/littlefattie/wt-huatu/main/imgs/wt-huatu-logo.svg)
 
 `wt-huatu`, is a Drawing Library to draw something mathematically, logically, hierarchically and programmatically.
 
-For quick and fruitful info, please go to the official site: [https://wt-huatu.org](https://wt-huatu.org).
+For quick and fruitful info, please go to the official site: [https://github.com/littlefattie/wt-huatu](https://github.com/littlefattie/wt-huatu).
 
-It is written in `Typescript`, can be used as a library, to be integrated into your project. For example, you can embed it into a customized markdown renderer to use it as some text-to-image renderer. Or it can be used as some drawing tool when using the online editor at [https://wt-huatu.org/editor](https://wt-huatu.org/editor).
+It is written in `Typescript`, can be used as a library, to be integrated into your project. For example, you can embed it into a customized markdown renderer to use it as some text-to-image renderer. Or it can be used as some drawing tool when using the online editor at [https://littlefattie.github.io/wt-huatu-editor/](https://littlefattie.github.io/wt-huatu-editor/).
 
 Quick and intuitive explanation. It will convert some text description like this:
 
@@ -43,11 +42,11 @@ draw:
   - cA; fill, none; stroke; 1, cc
   - cB; fill, none; stroke; 1, cc
   - triABC; fill, yellow; stroke; 1, cc
-  - circle; pA; 3 ||| fill; grey
-  - circle; pB; 3 ||| fill; grey
-  - circle; pC; 3 ||| fill; grey
-  - circle; pD; 3 ||| fill; grey
-  - circle; pE; 3 ||| fill; grey
+  - circle; pA; 2 ||| fill; grey
+  - circle; pB; 2 ||| fill; grey
+  - circle; pC; 2 ||| fill; grey
+  - circle; pD; 2 ||| fill; grey
+  - circle; pE; 2 ||| fill; grey
   - label; at; pA; w; 20; h; 22; anchor; mr ||| $A$
   - label; at; pB; w; 20; h; 22; anchor; ml ||| $B$
   - label; at; pC; w; 20; h; 22; anchor; bm ||| $C$
@@ -57,71 +56,7 @@ draw:
 
 to some SVG image like this:
 
-<div  style="text-align:center;">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-118.05806756909202 -120.4116135138184 334.17420270727604 221.2116135138184" width="334.174" height="221.212">
-<defs>
-  <style type="text/css">
-    foreignObject &gt; body { margin: 0; width: 100%; height: 100%; }
-    .wthuatu-label-box-2b25127a { fill: none; }
-    .huatu-label-container-2b25127a { width: 100%; height: 100%; padding: 0; display: flex; }
-    .huatu-label-text-2b25127a { margin: auto 0; text-align: center; max-height: 100%; width: 100%; line-height: 1.0; }
-  </style>
-</defs>
-<circle cx="0.000000" cy="0.000000" r="100.000000" fill="none" stroke="currentColor" stroke-width="1.000000"></circle>
-<circle cx="98.058068" cy="-19.611614" r="100.000000" fill="none" stroke="currentColor" stroke-width="1.000000"></circle>
-<path d="M0.000000,0.000000 L98.058068,-19.611614 L32.044878,-94.726584 z" fill="yellow" stroke="currentColor" stroke-width="1.000000"></path>
-<circle cx="0.000000" cy="0.000000" r="3.000000" fill="grey"></circle>
-<circle cx="98.058068" cy="-19.611614" r="3.000000" fill="grey"></circle>
-<circle cx="32.044878" cy="-94.726584" r="3.000000" fill="grey"></circle>
-<circle cx="-98.058068" cy="19.611614" r="3.000000" fill="grey"></circle>
-<circle cx="196.116135" cy="-39.223227" r="3.000000" fill="grey"></circle>
-<g transform="translate(-20.000000,-11.000000)">
-<foreignObject x="0" y="0" width="20" height="22">
-<div class="huatu-label-container-2b25127a">
-<div class="huatu-label-text-2b25127a">
-<span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6833em;"></span><span class="mord mathnormal">A</span></span></span></span>
-</div>
-</div>
-</foreignObject>
-</g>
-<g transform="translate(0.000000,-11.000000)">
-<foreignObject x="98.05806756909202" y="-19.611613513818398" width="20" height="22">
-<div class="huatu-label-container-2b25127a">
-<div class="huatu-label-text-2b25127a">
-<span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6833em;"></span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span></span></span></span>
-</div>
-</div>
-</foreignObject>
-</g>
-<g transform="translate(-10.000000,-22.000000)">
-<foreignObject x="32.044878272377076" y="-94.72658431775389" width="20" height="22">
-<div class="huatu-label-container-2b25127a">
-<div class="huatu-label-text-2b25127a">
-<span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6833em;"></span><span class="mord mathnormal" style="margin-right:0.07153em;">C</span></span></span></span>
-</div>
-</div>
-</foreignObject>
-</g>
-<g transform="translate(-20.000000,0.000000)">
-<foreignObject x="-98.05806756909202" y="19.611613513818384" width="20" height="22">
-<div class="huatu-label-container-2b25127a">
-<div class="huatu-label-text-2b25127a">
-<span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6833em;"></span><span class="mord mathnormal" style="margin-right:0.02778em;">D</span></span></span></span>
-</div>
-</div>
-</foreignObject>
-</g>
-<g transform="translate(0.000000,-22.000000)">
-<foreignObject x="196.11613513818403" y="-39.223227027636796" width="20" height="22">
-<div class="huatu-label-container-2b25127a">
-<div class="huatu-label-text-2b25127a">
-<span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6833em;"></span><span class="mord mathnormal" style="margin-right:0.05764em;">E</span></span></span></span>
-</div>
-</div>
-</foreignObject>
-</g>
-</svg>
-</div>
+![wt-huatu example of introduction](https://raw.githubusercontent.com/littlefattie/wt-huatu/main/imgs/wt-huatu-ex-intro.svg)
 
 There are some examples in the folder `examples`, which are used as the library is developed. They are simply `.yml` files, except some special syntax.
 
@@ -146,7 +81,7 @@ import {
   renderYmlInput
 } from "wt-huatu";
 
-import * as fs from "fs";
+import fs from "fs";
 
 // 设计输入
 // The design input file
@@ -198,26 +133,26 @@ draw:
 
 // 用例1：直接生成嵌入svg文件的Html文件(字符串),可直接在浏览器中查看及打印。
 // Usage 1: Generate the svg-image-embedded html directly, you can browse it in a browser.
-const svgHtml1 = renderWtHuatuYml(htDesignInput);
+const svgHtml1 = await renderWtHuatuYml(htDesignInput);
 fs.writeFileSync("./test-wt-huatu.html", svgHtml1);
 
 // 用例2：编译解析后获取完全体结果
 // Usage 2: Render the input to get a full-functional Object `WtHuatu`
-const parsedRes = renderYmlInput(htDesignInput, {});
+const parsedRes = await renderYmlInput(htDesignInput, {});
 // WtHuatu对象, 可以查看其所有成员变量，以便于进行二次开发
 // 或者选择性生成全部或部分所设计/定义的图形元素
-// The parsed WtHuatu object, you can inspect all the members and call the methods, make secondary developments or intergrate into your own applications
+// The parsed WtHuatu object, you can inspect all the members and call the methods,
+// make secondary developments or intergrate into your own applications,
 // Or you can use this object to generate part or all the designed drawing elements ever designed
-const htObj = parsedRes.huatu!;
+const htObj = parsedRes.huatu;
 // 从唯一的输出任务(draw)生成svg文件(字符串)，可以将此SVG文件保存为单独的文件或者嵌入到
 // 其他支持SVG格式的图形处理软件中
 // Output the svg file of the only job `draw`, you can save this to seperate file
 // Or embed itinto other systems that can handle SVGs.
-const svg1 = parsedRes.rendered.find(x => x.jobName === 'draw')!.html;
+const svg1 = parsedRes.rendered.find(x => x.jobName === 'draw').html;
 // 保存svg到文件
 // Save to local SVG format image file
 fs.writeFileSync("./test-wt-huatu.svg", svg1);
-
 ```
 
 If you are interested, let's draw!

package/component/HuatuComponentPort.js

@@ -1,3 +1,4 @@
+import Point from "../geometry/Point.js";
 import { WtMath } from "../math/WtMath.js";
 import { AngDeg } from "../geometry/AngDeg.js";
 import Line from "../geometry/Line.js";
@@ -52,7 +53,11 @@ export class HuatuComponentPort {
     };
     // Some indicator to know whether the two ports (two arrows of the two holding lines) are facing to each other
     static isTwoPortsFacing = (p1, p2) => {
+        const p1f = new Line(p1.anchor, p1.lineAng).getPointByLen(2), d1 = Point.getDistance(p1.anchor, p2.anchor), d2 = Point.getDistance(p1f, p2.anchor);
         const angDiff = AngDeg.fitAng(p1.lineAng - p2.lineAng);
-        return (angDiff >= AngDeg.DEG90 && angDiff <= AngDeg.DEG270);
+        return (d1 > d2) && (angDiff >= AngDeg.DEG90 && angDiff <= AngDeg.DEG270);
+    };
+    static isTowPortsParallelBacking = (p1, p2) => {
+        return WtMath.isEqual(AngDeg.DEG180, AngDeg.fitAng(p1.lineAng - p2.lineAng));
     };
 }

package/geometry/AngDeg.js

@@ -27,15 +27,19 @@ export class AngDeg {
     static deg2Ang(deg) {
         return deg * Math.PI / 180;
     }
-    // Move The ang to range of [0, 360), and convert to Angle form
-    static fitDeg(deg) {
+    // Round the Deg into the range of [0, 360)
+    static roundDeg(deg) {
         while (deg >= 360) {
             deg -= 360;
         }
         while (deg < 0) {
             deg += 360;
         }
-        return AngDeg.deg2Ang(deg);
+        return deg;
+    }
+    // Move The deg to range of [0, 360), and convert to Angle form
+    static fitDeg(deg) {
+        return AngDeg.deg2Ang(AngDeg.roundDeg(deg));
     }
     static fitAng(ang) {
         while (ang >= AngDeg.DEG360) {

package/huatu/Huatu.js

@@ -54,6 +54,7 @@ import { HuatuComponentPort } from "../component/HuatuComponentPort.js";
 import { HuatuCompDrawing } from "./HuatuCompDrawing.js";
 import { HuatuWire } from "../wire/HuatuWire.js";
 import { HuatuWireDrawing } from "../wire/HuatuWireDrawing.js";
+import { HuatuNet } from "../wire/HuatuNet.js";
 import { HuatuAngleMark } from "./HuatuAngleMark.js";
 import { HuatuDimMark } from "./HuatuDimMark.js";
 import { genHex } from "../tools/gen-id.js";
@@ -1940,7 +1941,7 @@ export class WtHuatu {
      * Check if the user has given a valid string to specify the marker, if it is a name for "predefined"
      * marker, then the marker will be copied into the in-use collection with the same name. Or it
      * needs to be some marker defined by user manually.
-     * @param ptn The defined name or pre-defined name for the Marker user wants to use
+     * @param mkr The defined name or pre-defined name for the Marker user wants to use
      * @returns The Marker or undefined if not found
      */
     checkMarker(mkr) {
@@ -2253,8 +2254,10 @@ export class WtHuatu {
                     realOrphans.push(orphan);
                 }
             });
-            const orphans = realOrphans.map(x => `'${x}'`).join(", ");
-            this.warnings.push(`[Resolving Label Style '${name}']: ${orphans} could not be resolved!`);
+            if (realOrphans.length > 0) {
+                const orphans = realOrphans.map(x => `'${x}'`).join(", ");
+                this.warnings.push(`[Resolving Label Style '${name}']: ${orphans} could not be resolved!`);
+            }
         }
         else {
             res = parseStrIntoKeyValuePair(value, optsLabelStyle);
@@ -2289,14 +2292,16 @@ export class WtHuatu {
             lblStyle.color = lsParams.color;
         if (lsParams.fontName)
             lblStyle.font = lsParams.fontName;
-        if (lsParams.bold)
+        if (lsParams.bold !== undefined)
             lblStyle.bold = lsParams.bold;
-        if (lsParams.italic)
+        if (lsParams.italic !== undefined)
             lblStyle.italic = lsParams.italic;
         if (lsParams.addLine)
             lblStyle.addLine = lsParams.addLine;
         if (lsParams.fontSize)
             lblStyle.fontSize = lsParams.fontSize;
+        if (lsParams.lineHeight)
+            lblStyle.lineHeight = lsParams.lineHeight;
         this.labelStyles.push(lblStyle);
         return [];
     }
@@ -3266,11 +3271,11 @@ export class WtHuatu {
                 }
             }
         }
+        // 2. Check if it is a point referencing some shape/path, etc, or purely some point definition
         const tryPointExpr = this.resolvePointFromExpr(def);
         if (tryPointExpr)
             return tryPointExpr;
-        // TODO: implement it
-        // 2. Check if it is a point referencing some shape/path, etc, or purely some point definition
+        // Return none if no hit
         return undefined;
     }
     parseWireDef(def) {
@@ -3279,15 +3284,8 @@ export class WtHuatu {
         if (!params.from) {
             return `You must provide 'From' terminal to define a wire. '${def}' lacks some!`;
         }
-        let net;
         if (!params.to) {
-            if (params.net) {
-                net = this.nets.find(x => x.name === params.net);
-                if (!net) {
-                    return `No 'To' terminal and the net you refer (${params.net}) doesn't exist`;
-                }
-            }
-            else {
+            if (!params.net) {
                 return `No 'To' terminal and no net defined for the wire '${def}'`;
             }
         }
@@ -3300,12 +3298,23 @@ export class WtHuatu {
         if (params.to) {
             termTo = this.resolveWireTerminal(params.to);
             if (!termTo) {
-                errMsg.push(`Wire terminal 'To' (${params.to}) cannot resolve to a valid point!`);
+                if (HuatuWire.TO_HV_TYPES.includes((params.type || "auto").toLowerCase())) {
+                    const tryXorY = this.resolvePointCoorsExpr(params.to);
+                    if (tryXorY === undefined) {
+                        errMsg.push(`Please specify X/Y values when you draw a toX or toY wire!`);
+                    }
+                    else {
+                        termTo = tryXorY;
+                    }
+                }
+                else {
+                    errMsg.push(`Wire terminal 'To' (${params.to}) cannot resolve to a valid point!`);
+                }
             }
         }
         if (errMsg.length > 0)
             return errMsg.join("\n");
-        const wire = new HuatuWire(termFrom, termTo, params.type);
+        const wire = new HuatuWire(def, termFrom, termTo, params.type);
         // Check other parameters of that wire
         if (params.color)
             wire.strokeColor = params.color;
@@ -3350,8 +3359,34 @@ export class WtHuatu {
                 wire.turnAt = turnAt;
             }
         }
+        if (params.turnLen) {
+            const turnLen = this.resolveVarExpr(params.turnLen);
+            if (turnLen === undefined) {
+                this.warnings.push(`turnLen parameter '${params.turnLen}' of wire def is invalid, it cannot resolve to a number!`);
+            }
+            else {
+                wire.turnLen = turnLen;
+            }
+        }
         if (params.net) {
-            // TODO: handle Net
+            let tryNet = this.nets.find(x => x.name === params.net);
+            if (!tryNet) {
+                tryNet = new HuatuNet(this, params.net);
+                this.nets.push(tryNet);
+            }
+            wire.net = tryNet;
+            if (params.netColor && isValidColor(params.netColor)) {
+                wire.net.color = params.netColor;
+            }
+            if (params.netLineWidth) {
+                const netlw = this.resolveVarExpr(params.netLineWidth);
+                if (netlw === undefined || netlw < 0) {
+                    this.warnings.push(`net linewidth parameter '${params.netLineWidth}' of wire def is invalid, it cannot resolve to a positive number!`);
+                }
+                else {
+                    wire.net.lineWidth = netlw;
+                }
+            }
         }
         if (params.lineWidth) {
             const lw = this.resolveVarExpr(params.lineWidth);
@@ -3377,6 +3412,16 @@ export class WtHuatu {
         if (params.squareJoint) {
             wire.isSquareJoint = true;
         }
+        if (params.endArrow) {
+            let mkr = this.checkMarker(params.endArrow);
+            if (mkr)
+                wire.markerEnd = mkr;
+        }
+        if (params.startArrow) {
+            let mkr = this.checkMarker(params.startArrow);
+            if (mkr)
+                wire.markerStart = mkr;
+        }
         // Resolve Points
         wire.tryResolvePoints();
         return new HuatuWireDrawing(wire, this);
@@ -3518,6 +3563,8 @@ export class WtHuatu {
             conf.noStartArrow = true;
         if (!!params.noEndArrow)
             conf.noEndArrow = true;
+        if (!!params.barLenEqual)
+            conf.barLenEqual = true;
         if (params.barColor)
             conf.barColor = params.barColor;
         if (params.lineColor)
@@ -3702,6 +3749,13 @@ export class WtHuatu {
         // Return the errors when resolving
         return errs;
     }
+    settleNetWires() {
+        // Settle Wires of all the nets
+        this.nets.forEach(n => n.settleWires());
+    }
+    resetNetTrunkDrawStatus() {
+        this.nets.forEach(n => n.resetTrunkDrawnStatus());
+    }
     /**
      * Resolve Layer definition, the input might be a string, or a string list
      * @param name Name of the Layer
@@ -3905,6 +3959,7 @@ export class WtHuatu {
             "block", "layer",
             "component", "wire",
         ];
+        // Resolve drawings
         drawItems.forEach(d => {
             const draw = this.resolveJobDrawingItem(d, allowedTypes);
             if (typeof draw === "string") {
@@ -3926,6 +3981,8 @@ export class WtHuatu {
                 job.drawings.push(draw);
             }
         });
+        // Settle Net wires
+        this.settleNetWires();
         // Re-Check ViewBox
         if (!job.viewBox) {
             if (job.huatu.viewBox) {
@@ -3997,14 +4054,12 @@ export class WtHuatu {
             let i = 0;
             while (i < src.length) {
                 if (isIvKey(src[i])) {
-                    if ((i + 1) < src.length) {
-                        if (!isIvKey(src[i + 1])) {
-                            ivObj[src[i]] = src[i + 1];
-                            i += 2;
-                        }
-                        else {
-                            i += 1;
-                        }
+                    if ((i + 1) < src.length && !isIvKey(src[i + 1])) {
+                        ivObj[src[i]] = src[i + 1];
+                        i += 2;
+                    }
+                    else {
+                        i += 1;
                     }
                 }
                 else {
@@ -4146,7 +4201,7 @@ export class WtHuatu {
                             errors.push(`[comp port] Ray Deg expression '${parseRes.body.rayDeg}' cannot be resolved!`);
                         }
                         else {
-                            newPort.rayDeg = deg;
+                            newPort.rayDeg = AngDeg.roundDeg(deg);
                         }
                     }
                     if (parseRes.body.minHoldLen) {

package/huatu/HuatuDimMark.js

@@ -45,6 +45,7 @@ export class HuatuDimMark {
     hasEndBar = true;
     hasStartArrow = true;
     hasEndArrow = true;
+    barLenEqual = false;
     cfgBar = {
         color: "currentColor",
         width: this.barWidth,
@@ -125,6 +126,8 @@ export class HuatuDimMark {
             this.hasStartArrow = false;
         if (!!config.noEndArrow)
             this.hasEndArrow = false;
+        if (!!config.barLenEqual)
+            this.barLenEqual = true;
         // If it is already Hori/Vert, then re-assign type accordingly
         if (this.isHori)
             this.type = "hori";
@@ -167,10 +170,12 @@ export class HuatuDimMark {
             yBarEnd = yFar + k * (this.gap + this.barLength);
             yMarkPos = yFar + k * (this.gap + this.barLength * this.linePos);
             if (this.hasStartBar) {
-                this.barStart = PathLine.fromLineSeg(LineSeg.fromXYs(this.pStart.x, this.pStart.y + k * this.gap, this.pStart.x, yBarEnd));
+                let yBarStart = (this.barLenEqual ? yFar : this.pStart.y) + k * this.gap;
+                this.barStart = PathLine.fromLineSeg(LineSeg.fromXYs(this.pStart.x, yBarStart, this.pStart.x, yBarEnd));
             }
             if (this.hasEndBar) {
-                this.barEnd = PathLine.fromLineSeg(LineSeg.fromXYs(this.pEnd.x, this.pEnd.y + k * this.gap, this.pEnd.x, yBarEnd));
+                let yBarStart = (this.barLenEqual ? yFar : this.pEnd.y) + k * this.gap;
+                this.barEnd = PathLine.fromLineSeg(LineSeg.fromXYs(this.pEnd.x, yBarStart, this.pEnd.x, yBarEnd));
             }
             lsMark = LineSeg.fromXYs(this.pStart.x, yMarkPos, this.pEnd.x, yMarkPos);
             pMidMarkLine = lsMark.middle;
@@ -194,10 +199,12 @@ export class HuatuDimMark {
             xBarEnd = xFar + k * (this.gap + this.barLength);
             xMarkPos = xFar + k * (this.gap + this.barLength * this.linePos);
             if (this.hasStartBar) {
-                this.barStart = PathLine.fromLineSeg(LineSeg.fromXYs(this.pStart.x + k * this.gap, this.pStart.y, xBarEnd, this.pStart.y));
+                let xBarStart = (this.barLenEqual ? xFar : this.pStart.x) + k * this.gap;
+                this.barStart = PathLine.fromLineSeg(LineSeg.fromXYs(xBarStart, this.pStart.y, xBarEnd, this.pStart.y));
             }
             if (this.hasEndBar) {
-                this.barEnd = PathLine.fromLineSeg(LineSeg.fromXYs(this.pEnd.x + k * this.gap, this.pEnd.y, xBarEnd, this.pEnd.y));
+                let xBarStart = (this.barLenEqual ? xFar : this.pEnd.x) + k * this.gap;
+                this.barEnd = PathLine.fromLineSeg(LineSeg.fromXYs(xBarStart, this.pEnd.y, xBarEnd, this.pEnd.y));
             }
             lsMark = LineSeg.fromXYs(xMarkPos, this.pStart.y, xMarkPos, this.pEnd.y);
             pMidMarkLine = lsMark.middle;
@@ -214,7 +221,7 @@ export class HuatuDimMark {
                 if (this.hasEndArrow)
                     this.arrowEnd = new PathPolyline(pEndLeft, lsMark.pEnd, pEndRight);
             }
-            else if (this.arrowType === "solid") {
+            else if (this.arrowType === "solid" || this.arrowType === "empty") {
                 if (this.hasStartArrow)
                     this.arrowStart = new PathPolygon(pStartLeft, lsMark.pStart, pStartRight);
                 if (this.hasEndArrow)
@@ -443,18 +450,22 @@ export class HuatuDimMark {
                 };
             }
         }
-        else if (this.arrowType === "solid") {
+        else if (this.arrowType === "solid" || this.arrowType === "empty") {
             this.cfgArrowFill.color = color || this.cfgLine.color;
             this.cfgArrowStroke.color = color || this.cfgLine.color;
             this.cfgArrowStroke.width = this.lineWidth;
             this.cfgArrowStroke.lineJoin = "round";
             if (this.arrowStart) {
                 this.arrowStart.stroke = this.cfgArrowStroke;
-                this.arrowStart.fill = this.cfgArrowFill;
+                this.arrowStart.fill = this.arrowType === "empty"
+                    ? { color: "none" }
+                    : this.cfgArrowFill;
             }
             if (this.arrowEnd) {
                 this.arrowEnd.stroke = this.cfgArrowStroke;
-                this.arrowEnd.fill = this.cfgArrowFill;
+                this.arrowEnd.fill = this.arrowType === "empty"
+                    ? { color: "none" }
+                    : this.cfgArrowFill;
             }
         }
     }
@@ -528,6 +539,7 @@ export class HuatuDimMark {
             ["noEndBar"],
             ["noStartArrow"],
             ["noEndArrow"],
+            ["barLenEqual"],
             ["barColor"],
             ["lineColor"],
             ["arrow"],
@@ -550,6 +562,7 @@ export class HuatuDimMark {
         booleans: [
             "noStartBar", "noEndBar",
             "noStartArrow", "noEndArrow",
+            "barLenEqual",
             "labelOnLine", "rotateLabel",
             "showLength"
         ],

package/huatu/HuatuJob.js

@@ -13,6 +13,8 @@ import { WtHuatu } from "./Huatu.js";
 import { HuatuClipPath } from "./HuatuClipPath.js";
 import { buildCssHtmlTag } from "../tools/html.js";
 import { genHex } from "../tools/gen-id.js";
+import { HuatuCompDrawing } from "./HuatuCompDrawing.js";
+import { HuatuWireDrawing } from "../wire/HuatuWireDrawing.js";
 export class HuatuJob {
     huatu;
     name;
@@ -73,6 +75,11 @@ export class HuatuJob {
             });
             this.defines.push(element);
         }
+        if (element instanceof HuatuCompDrawing && element.placement.huatu && element.placement.huatu.draw) {
+            element.placement.huatu.draw.drawings.forEach(d => {
+                this.resolveDefineOfFinalDraw(d);
+            });
+        }
     }
     resolveDefineOfStyle(style) {
         if (style.fillPattern) {
@@ -160,6 +167,9 @@ export class HuatuJob {
         else if (draw instanceof HuatuLabel) {
             this.resolveDefineOfLabel(draw);
         }
+        else if (draw instanceof HuatuWireDrawing) {
+            draw.wire.getDrawings().forEach(d => this.resolveDefineOfFinalDraw(d));
+        }
     }
     // This function will resolve all the "defines" (including path(series) block, symbol, etc.) that this job used
     resolveDefines() {
@@ -172,8 +182,12 @@ export class HuatuJob {
         // Assign config
         globalThis.wtHuatuConfig = config;
         const printUnused = globalThis.wtHuatuConfig && globalThis.wtHuatuConfig.printUnusedModule;
+        // Clean Wire's Nets drawn status
+        this.huatu.resetNetTrunkDrawStatus();
         // Resolve Defines
         this.resolveDefines();
+        // Re-do the reset
+        this.huatu.resetNetTrunkDrawStatus();
         let svg = "";
         // Title
         if (this.huatu.title)

package/huatu/HuatuLabel.js

@@ -282,7 +282,7 @@ export class HuatuLabel {
                     // It is like point rotating
                     this.anchorX = Math.cos(rd) * ax - Math.sin(rd) * ay;
                     this.anchorY = Math.sin(rd) * ax + Math.cos(rd) * ay;
-                    if (this.textAlign === "center" && ax === 0) {
+                    if ((this.textAlign === "center" || !this.textAlign) && ax === 0) {
                         // Note: this adjustment is to make sure that the originally centered text would align to
                         //       anchoring side
                         if (WtMath.isEqual(this.anchorX, 1)) {