wt-huatu 1.3.4

package/path/PathLine.js

@@ -0,0 +1,75 @@
+/**
+ * The class implementation of SVG Line.
+ */
+import { PathGeneric } from "./PathGeneric.js";
+import { SvgPoint } from "../svg/SvgPoint.js";
+import { SvgBBox } from "../svg/SvgBBox.js";
+import { SvgCsts } from "../svg/SvgConstants.js";
+import LineSeg from "../geometry/LineSeg.js";
+export class PathLine extends PathGeneric {
+    pStart;
+    pEnd;
+    auxModel;
+    isStartSeg = false;
+    closePath = false;
+    constructor(x1, y1, x2, y2) {
+        super();
+        this.pathTag = "line";
+        this.pStart = new SvgPoint(x1, y1);
+        this.pEnd = new SvgPoint(x2, y2);
+        this.realPoints.push(this.pStart, this.pEnd);
+        this.bbox = SvgBBox.fromMaxMins(x1, x2, y1, y2);
+        this.auxModel = new LineSeg(this.pStart, this.pEnd);
+        this.models = [this.auxModel];
+    }
+    getPathAttr() {
+        return [
+            `x1="${this.pStart.x.toFixed(SvgCsts.COORS_DIGITS)}"`,
+            `y1="${this.pStart.y.toFixed(SvgCsts.COORS_DIGITS)}"`,
+            `x2="${this.pEnd.x.toFixed(SvgCsts.COORS_DIGITS)}"`,
+            `y2="${this.pEnd.y.toFixed(SvgCsts.COORS_DIGITS)}"`
+        ];
+    }
+    buildPathData() {
+        return `M${this.pStart.toCoors()} L${this.pEnd.toCoors()}`;
+    }
+    getLength() {
+        return Math.sqrt(this.bbox.w ** 2 + this.bbox.h ** 2);
+    }
+    /* Functions for the role as Path Segment */
+    buildSegPathData() {
+        return (this.isStartSeg ? `M${this.pStart.toCoors()}` : "")
+            + ` L${this.pEnd.toCoors()}`
+            + (this.closePath ? " z" : "");
+    }
+    moveBy(dx, dy) {
+        const ls = new LineSeg(this.pStart, this.pEnd).moveBy(dx, dy);
+        return PathLine.fromLineSeg(ls);
+    }
+    rotateBy(rotDeg, at) {
+        const ls = new LineSeg(this.pStart, this.pEnd).rotateBy(rotDeg, at);
+        return PathLine.fromLineSeg(ls);
+    }
+    reverse() {
+        return PathLine.fromEnds(this.pEnd, this.pStart);
+    }
+    duplicateTo(distance, dir) {
+        dir = dir === "in" ? "right"
+            : dir === "out" ? "left"
+                : dir;
+        return PathLine.fromLineSeg(this.auxModel.duplicateTo(distance, dir));
+    }
+    makeSubPath(pStart, pEnd) {
+        let ls = this.auxModel.makeSubSeg(pStart, pEnd);
+        if (!ls)
+            return undefined;
+        return PathLine.fromLineSeg(ls);
+    }
+    /** Static methods  */
+    static fromEnds(pStart, pEnd) {
+        return new PathLine(pStart.x, pStart.y, pEnd.x, pEnd.y);
+    }
+    static fromLineSeg(seg) {
+        return new PathLine(seg.pStart.x, seg.pStart.y, seg.pEnd.x, seg.pEnd.y);
+    }
+}

package/path/PathLines.js

@@ -0,0 +1,46 @@
+/**
+ * The class implementation of SVG Line.
+ */
+import { PathGeneric } from "./PathGeneric.js";
+import { SvgPoint } from "../svg/SvgPoint.js";
+import LineSeg from "../geometry/LineSeg.js";
+export class PathLines extends PathGeneric {
+    lines = [];
+    constructor() {
+        super();
+    }
+    addLine(pStart, pEnd) {
+        const ls = new LineSeg(pStart, pEnd);
+        this.lines.push(ls);
+        this.models.push(ls);
+    }
+    addLineSegs(...segs) {
+        this.lines.push(...segs);
+        this.models.push(...segs);
+    }
+    getPathAttr() {
+        return [`d="${this.buildPathData()}"`];
+    }
+    buildPathData() {
+        if (this.lines.length < 1)
+            return "";
+        return this.lines
+            .map(l => `M${SvgPoint.toCoors(l.pStart)} L${SvgPoint.toCoors(l.pEnd)}`)
+            .join(" ");
+        ;
+    }
+    getLength() {
+        return this.lines.map(l => l.len)
+            .reduce((sum, len) => sum + len, 0);
+    }
+    /** Static methods  */
+    static fromLineSegments(...lines) {
+        const path = new PathLines();
+        if (lines.length < 1)
+            return path;
+        lines.forEach(l => {
+            path.addLine(l.pStart, l.pEnd);
+        });
+        return path;
+    }
+}

package/path/PathPolygon.js

@@ -0,0 +1,142 @@
+/**
+ * The class implementation of SVG Line.
+ */
+import Polygon from "../geometry/Polygon.js";
+import { PathGeneric } from "./PathGeneric.js";
+import { SvgPoint } from "../svg/SvgPoint.js";
+import { PathEllipticalArc } from "./PathEllipticalArc.js";
+import { SvgBBox } from "../svg/SvgBBox.js";
+import { WtMath } from "../math/WtMath.js";
+import { PathLine } from "./PathLine.js";
+export class PathPolygon extends PathGeneric {
+    points;
+    polygon;
+    angArcRadius = 0;
+    constructor(...points) {
+        super();
+        this.points = points.map(p => new SvgPoint(p.x, p.y));
+        this.polygon = new Polygon(...this.points);
+        this.realPoints.push(...this.points);
+        const xs = points.map(p => p.x);
+        const ys = points.map(p => p.y);
+        this.bbox = SvgBBox.fromMaxMins(Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys));
+        this.models = [this.polygon];
+    }
+    setAngArcRadius(radius) {
+        this.angArcRadius = radius;
+        this.pathTag = "path";
+    }
+    removeAngArcRadius() {
+        this.angArcRadius = 0;
+        this.pathTag = "polygon";
+    }
+    getPathAttr() {
+        const attr = (this.pathTag === "polygon")
+            ? `points="${this.points.map(p => p.toCoors()).join(" ")}"`
+            : `d="${this.buildPathData()}"`;
+        return [attr];
+    }
+    buildPathData(angArcRadius) {
+        if (!this.polygon.isValid)
+            return "";
+        const radius = angArcRadius || this.angArcRadius;
+        // No radius
+        if (typeof radius === "number" && WtMath.isZero(radius)) {
+            return this.points.map((p, idx) => `${idx === 0 ? 'M' : 'L'}${p.toCoors()}`).join(" ") + ' z';
+        }
+        const angRadius = WtMath.expandRadius(this.points.length, radius);
+        return this.polygon.getAngles(true)
+            .map((a, idx) => {
+            const aps = a.getArcPoints(angRadius[idx]);
+            const mOrL = idx === 0 ? "M" : "L";
+            const ellArc = PathEllipticalArc.fromStartEndPoints(aps.pArcStart, aps.pArcEnd, aps.r, aps.r, false, aps.cw);
+            return aps.hasArc
+                ? `${mOrL}${SvgPoint.toCoors(aps.pArcStart)} ${ellArc.buildPureArc()}`
+                : `${mOrL}${SvgPoint.toCoors(aps.pStart)}`;
+        }).join(" ") + " z";
+    }
+    getLength() {
+        return this.polygon.angles.map(a => a.lineOA.len).reduce((sum, l) => sum + l, 0);
+    }
+    toAngleArced(radius) {
+        if (!radius)
+            return this;
+        // Copy the polygon to make a new Path
+        const path = PathPolygon.fromPolygon(this.polygon);
+        path.setAngArcRadius(radius);
+        return path;
+    }
+    toPathSegs(radius) {
+        if (!this.polygon.isValid)
+            return [];
+        const segments = [];
+        // No radius
+        if (!radius ||
+            (typeof radius === "number" && WtMath.isZero(radius)) ||
+            (Array.isArray(radius) && radius.length < 1)) {
+            this.points.forEach((p, idx) => {
+                if (idx < this.points.length - 1) {
+                    segments.push(PathLine.fromEnds(this.points[idx], this.points[idx + 1]));
+                }
+                else {
+                    const seg = PathLine.fromEnds(this.points[idx], this.points[0]);
+                    seg.closePath = true;
+                    segments.push(seg);
+                }
+            });
+            return segments;
+        }
+        // Has radius
+        const angRadius = WtMath.expandRadius(this.points.length, radius);
+        const angles = this.polygon.getAngles(true);
+        let lastPoint = angles[0].pA;
+        angles.forEach((a, idx) => {
+            const aps = a.getArcPoints(angRadius[idx]);
+            const ellArc = PathEllipticalArc.fromStartEndPoints(aps.pArcStart, aps.pArcEnd, aps.r, aps.r, false, aps.cw);
+            if (aps.hasArc) {
+                segments.push(PathLine.fromEnds(lastPoint, aps.pArcStart), ellArc);
+                lastPoint = aps.pArcEnd;
+            }
+            else {
+                segments.push(PathLine.fromEnds(lastPoint, aps.pStart));
+                lastPoint = aps.pStart;
+            }
+        });
+        const lastSeg = PathLine.fromEnds(lastPoint, angles[0].pA);
+        lastSeg.closePath = true;
+        segments.push(lastSeg);
+        return segments;
+    }
+    toCwOrCcw(cw) {
+        // If it is invalid, then return itself, because it will not make anything since it is invalid
+        // And if cw/ccw not specified, it will use the default case
+        if (!this.polygon.isValid || !cw)
+            return this;
+        // Judge if the original polygon is cw or ccw, and reverse points order accordingly
+        let isCw = this.polygon.isCw(), pts = (cw === "cw" && isCw) || (cw === "ccw" && !isCw)
+            ? this.points
+            : this.points.map((p, i) => this.points[i === 0 ? 0 : this.points.length - i]);
+        return new PathPolygon(...pts);
+    }
+    toPathSegments(radius, cw) {
+        if (!this.polygon.isValid)
+            return [];
+        return this.toCwOrCcw(cw).toPathSegs(radius);
+    }
+    duplicateTo(distance, dir) {
+        if (!this.polygon.isValid)
+            return undefined;
+        let isCw = this.polygon.isCw();
+        dir = dir === "in" ? (isCw ? "right" : "left")
+            : dir === "out" ? (isCw ? "left" : "right")
+                : dir;
+        const plg = this.polygon.duplicateTo(distance, dir);
+        return plg ? PathPolygon.fromPolygon(plg) : undefined;
+    }
+    // Static methods
+    static fromPolygon(plg) {
+        if (plg.isValid)
+            return new PathPolygon(...plg.points);
+        return undefined;
+    }
+}

package/path/PathPolyline.js

@@ -0,0 +1,266 @@
+/**
+ * The class implementation of SVG Polyline.
+ */
+import { PathGeneric } from "./PathGeneric.js";
+import { SvgPoint } from "../svg/SvgPoint.js";
+import { PathEllipticalArc } from "./PathEllipticalArc.js";
+import { SvgBBox } from "../svg/SvgBBox.js";
+import Line from "../geometry/Line.js";
+import LineSeg from "../geometry/LineSeg.js";
+import { WtMath } from "../math/WtMath.js";
+import { PathLine } from "./PathLine.js";
+import { AngDeg } from "../geometry/AngDeg.js";
+import { fitNumInRange } from "../tools/utils.js";
+import { PathBezier3 } from "./PathBezier3.js";
+import { PathSegmentedPath } from "./PathSegmentedPath.js";
+import Angle from "../geometry/Angle.js";
+import { PathPolygon } from "./PathPolygon.js";
+import PolyLine from "../geometry/PolyLine.js";
+import Point from "../geometry/Point.js";
+import { SegmentModel } from "../geometry/SegmentModel.js";
+export class PathPolyline extends PathGeneric {
+    static SMOOTH_FACTOR_DEFAULT = 0.44;
+    static SMOOTH_FACTOR_MIN = 0.02;
+    static SMOOTH_FACTOR_MAX = 0.88;
+    points;
+    close = false;
+    angArcRadius = 0;
+    constructor(...points) {
+        super();
+        this.pathTag = "polyline";
+        this.points = points.map(p => new SvgPoint(p.x, p.y));
+        this.realPoints.push(...this.points);
+        const xs = points.map(p => p.x);
+        const ys = points.map(p => p.y);
+        this.bbox = SvgBBox.fromMaxMins(Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys));
+        this.models = this.toPathSegments().map(s => s.auxModel);
+    }
+    makeClose() {
+        this.close = true;
+        this.pathTag = "path";
+    }
+    getPathAttr() {
+        if (this.pathTag === "polyline" && !this.close) {
+            return [`points="${this.points.map(p => p.toCoors()).join(" ")}"`];
+        }
+        else {
+            return [`d="${this.buildPathData()}"`];
+        }
+    }
+    buildPathData(angArcRadius) {
+        const radius = angArcRadius || this.angArcRadius;
+        // No radius
+        if (typeof radius === "number" && WtMath.isZero(radius)) {
+            return this.points.map((p, idx) => `${idx === 0 ? "M" : "L"}${p.toCoors()}`).join(" ")
+                + (this.close ? " z" : "");
+        }
+        if (this.close) {
+            return new PathPolygon(...this.points).toAngleArced().buildPathData(radius);
+        }
+        const dedupPoints = Point.deDupRepeated(this.points, SegmentModel.DE_DUP_THRESHOLD);
+        const angRadius = WtMath.expandRadius(dedupPoints.length - 2, radius);
+        const middleArcs = dedupPoints.reduce((a, p, i) => {
+            if (i < dedupPoints.length - 2) {
+                const pStart = new LineSeg(dedupPoints[i], dedupPoints[i + 1]).middle;
+                const pEnd = new LineSeg(dedupPoints[i + 1], dedupPoints[i + 2]).middle;
+                return [...a, new Angle(pStart, dedupPoints[i + 1], pEnd)];
+            }
+            else {
+                return a;
+            }
+        }, [])
+            .map((a, idx) => {
+            const aps = a.getArcPoints(angRadius[idx]);
+            const ellArc = PathEllipticalArc.fromStartEndPoints(aps.pArcStart, aps.pArcEnd, aps.r, aps.r, false, aps.cw);
+            return aps.hasArc
+                ? `L${SvgPoint.toCoors(aps.pArcStart)} ${ellArc.buildPureArc()}`
+                : `L${SvgPoint.toCoors(aps.pStart)}`;
+        })
+            .join(" ");
+        return `M${SvgPoint.toCoors(dedupPoints[0])} ${middleArcs} L${SvgPoint.toCoors(dedupPoints[dedupPoints.length - 1])}`;
+    }
+    getLength() {
+        return this.points
+            .map((p, idx) => idx === 0 ? 0 : new LineSeg(this.points[idx - 1], p).len)
+            .reduce((sum, l) => sum + l, 0);
+    }
+    toAngleArced(radius) {
+        if (!radius)
+            return this;
+        // Re-build the polyline and add radius
+        const path = new PathPolyline(...this.points);
+        path.angArcRadius = radius;
+        path.pathTag = "path";
+        return path;
+    }
+    toSmoothed(factor = 3, mode = "normal") {
+        const path = new PathSegmentedPath();
+        if (this.points.length < 2)
+            return path;
+        if (this.points.length < 3) {
+            path.addSeg(PathLine.fromEnds(this.points[0], this.points[1]));
+            return path;
+        }
+        ;
+        // Judge Factor
+        factor = PathPolyline.calcSmoothFactor(factor);
+        // Translate the polyline points into line segments
+        const segs = [];
+        let i = 0;
+        let pStart = undefined;
+        while (i < this.points.length - 1) {
+            pStart = pStart ?? this.points[i];
+            const seg = new LineSeg(pStart, this.points[i + 1]);
+            if (!WtMath.isZero(seg.len)) {
+                segs.push(seg);
+                pStart = undefined;
+            }
+            i++;
+        }
+        if (segs.length < 2) {
+            path.addSeg(PathLine.fromLineSeg(segs[0]));
+            return path;
+        }
+        const pathSegs = [];
+        i = 0;
+        let angAvg = 0;
+        while (i < segs.length) {
+            const seg = segs[i];
+            let angStart = seg.ang, angEnd = AngDeg.fitAng(seg.ang - AngDeg.DEG180);
+            if (i === 0) {
+                angAvg = AngDeg.fitAng(seg.ang + segs[i + 1].ang) / 2;
+                if (AngDeg.absAng(angEnd, angAvg) > AngDeg.DEG90) { // Make acute angle
+                    angEnd = AngDeg.fitAng(angAvg - AngDeg.DEG180);
+                }
+                else {
+                    angEnd = angAvg;
+                }
+            }
+            else if (i === segs.length - 1) {
+                if (AngDeg.absAng(angStart, angAvg) > AngDeg.DEG90) {
+                    angStart = AngDeg.fitAng(angAvg - AngDeg.DEG180);
+                }
+                else {
+                    angStart = angAvg;
+                }
+            }
+            else {
+                if (AngDeg.absAng(angStart, angAvg) > AngDeg.DEG90) {
+                    angStart = AngDeg.fitAng(angAvg - AngDeg.DEG180);
+                }
+                else {
+                    angStart = angAvg;
+                }
+                // Update Average Angle
+                angAvg = AngDeg.fitAng(seg.ang + segs[i + 1].ang) / 2;
+                if (AngDeg.absAng(angEnd, angAvg) > AngDeg.DEG90) { // Make acute angle
+                    angEnd = AngDeg.fitAng(angAvg - AngDeg.DEG180);
+                }
+                else {
+                    angEnd = angAvg;
+                }
+            }
+            pathSegs.push({
+                pStart: seg.pStart,
+                pEnd: seg.pEnd,
+                angStart,
+                angEnd,
+                angLine: seg.ang,
+                isVert: WtMath.isZero(seg.pStart.x - seg.pEnd.x),
+                isHori: WtMath.isZero(seg.pStart.y - seg.pEnd.y),
+                segLen: seg.len
+            });
+            i++;
+        }
+        if (mode === "normal") {
+            path.addSeg(...pathSegs.map(seg => new PathBezier3(seg.pStart, new Line(seg.pStart, seg.angStart).getPointByLen(factor * seg.segLen / 2), new Line(seg.pEnd, seg.angEnd).getPointByLen(factor * seg.segLen / 2), seg.pEnd)));
+        }
+        else { // "xy mode"
+            i = 0;
+            while (i < pathSegs.length) {
+                let seg = pathSegs[i];
+                if (seg.isHori || seg.isVert) {
+                    path.addSeg(PathLine.fromEnds(seg.pStart, seg.pEnd));
+                }
+                else {
+                    let angStartUsed = i > 0 && (pathSegs[i - 1].isVert || pathSegs[i - 1].isHori)
+                        ? pathSegs[i - 1].angLine
+                        : seg.angStart;
+                    let angEndUsed = i < pathSegs.length - 1 && (pathSegs[i + 1].isVert || pathSegs[i + 1].isHori)
+                        ? AngDeg.fitAng(pathSegs[i + 1].angLine - AngDeg.DEG180)
+                        : seg.angEnd;
+                    let smoothLen = Math.min(Math.abs(seg.pStart.x - seg.pEnd.x), Math.abs(seg.pStart.y - seg.pEnd.y));
+                    path.addSeg(new PathBezier3(seg.pStart, new Line(seg.pStart, angStartUsed).getPointByLen(factor * smoothLen), new Line(seg.pEnd, angEndUsed).getPointByLen(factor * smoothLen), seg.pEnd));
+                }
+                i++;
+            }
+        }
+        return path;
+    }
+    toPathSegments(radius) {
+        const segments = [];
+        // No radius
+        if (!radius ||
+            (typeof radius === "number" && WtMath.isZero(radius)) ||
+            (Array.isArray(radius) && radius.length < 1)) {
+            this.points.forEach((p, idx) => {
+                if (idx < this.points.length - 1) {
+                    segments.push(PathLine.fromEnds(this.points[idx], this.points[idx + 1]));
+                }
+            });
+            if (this.close) {
+                segments.push(PathLine.fromEnds(this.points[this.points.length - 1], this.points[0]));
+            }
+            return segments;
+        }
+        const dedupPoints = Point.deDupRepeated(this.points, SegmentModel.DE_DUP_THRESHOLD);
+        const angRadius = WtMath.expandRadius(dedupPoints.length - 2, radius);
+        let lastPoint = dedupPoints[0];
+        dedupPoints.reduce((a, p, i) => {
+            if (i < dedupPoints.length - 2) {
+                const pStart = new LineSeg(dedupPoints[i], dedupPoints[i + 1]).middle;
+                const pEnd = new LineSeg(dedupPoints[i + 1], dedupPoints[i + 2]).middle;
+                return [...a, new Angle(pStart, dedupPoints[i + 1], pEnd)];
+            }
+            else {
+                return a;
+            }
+        }, [])
+            .forEach((a, idx) => {
+            const aps = a.getArcPoints(angRadius[idx]);
+            const ellArc = PathEllipticalArc.fromStartEndPoints(aps.pArcStart, aps.pArcEnd, aps.r, aps.r, false, aps.cw);
+            if (aps.hasArc) {
+                segments.push(PathLine.fromEnds(lastPoint, aps.pArcStart), ellArc);
+                lastPoint = aps.pArcEnd;
+            }
+            else {
+                segments.push(PathLine.fromEnds(lastPoint, aps.pStart));
+                lastPoint = aps.pStart;
+            }
+        });
+        segments.push(PathLine.fromEnds(lastPoint, dedupPoints[dedupPoints.length - 1]));
+        return segments;
+    }
+    duplicateTo(distance, dir) {
+        const pln = new PolyLine(...this.points);
+        dir = this.points.length < 3
+            ? (dir === "in" ? "right"
+                : dir === "out" ? "left"
+                    : dir)
+            : (dir === "in" ? (pln.isCw() ? "right" : "left")
+                : dir === "out" ? (pln.isCw() ? "left" : "right")
+                    : dir);
+        const pln2 = pln.duplicateTo(distance, dir);
+        return pln2 ? PathPolyline.fromPolyLine(pln2) : undefined;
+    }
+    // Static Methods
+    static fromPolyLine(line) {
+        if (!line.isValid)
+            return undefined;
+        return new PathPolyline(...line.points);
+    }
+    static calcSmoothFactor(val) {
+        const input = fitNumInRange(val, 1, 10);
+        return (input - 1) * (PathPolyline.SMOOTH_FACTOR_MAX - PathPolyline.SMOOTH_FACTOR_MIN) / (10 - 1) + PathPolyline.SMOOTH_FACTOR_MIN;
+    }
+}

package/path/PathRect.js

@@ -0,0 +1,125 @@
+/**
+ * The class implementation of SVG Line.
+ */
+import { WtMath } from "../math/WtMath.js";
+import { SvgCsts } from "../svg/SvgConstants.js";
+import { SvgPoint } from "../svg/SvgPoint.js";
+import { SvgBBox } from "../svg/SvgBBox.js";
+import Rect from "../geometry/Rect.js";
+import { Bezier3 } from "../geometry/Bezier.js";
+import { PathGeneric } from "./PathGeneric.js";
+import { PathSegmentedPath } from "./PathSegmentedPath.js";
+import { PathBezier3 } from "./PathBezier3.js";
+import { PathLine } from "./PathLine.js";
+import { PathPolygon } from "./PathPolygon.js";
+export class PathRect extends PathGeneric {
+    width = 0;
+    height = 0;
+    anchor = new SvgPoint(0, 0);
+    radius = 0;
+    auxRect;
+    constructor() {
+        // Please Note that the constructor will not be used directly, please use the static fromXXXX methods
+        super();
+        this.pathTag = "rect";
+    }
+    getPathAttr() {
+        const attrs = [
+            `x="${this.anchor.x.toFixed(SvgCsts.COORS_DIGITS)}"`,
+            `y="${this.anchor.y.toFixed(SvgCsts.COORS_DIGITS)}"`,
+            `width="${this.width.toFixed(SvgCsts.COORS_DIGITS)}"`,
+            `height="${this.height.toFixed(SvgCsts.COORS_DIGITS)}"`
+        ];
+        const r = this.fitRadius();
+        if (!WtMath.isZero(r))
+            attrs.push(`rx="${r.toFixed(SvgCsts.COORS_DIGITS)}" ry="${r.toFixed(SvgCsts.COORS_DIGITS)}"`);
+        return attrs;
+    }
+    fitRadius() {
+        if (this.radius > 0) {
+            const rMax = Math.min(this.width / 2, this.height / 2);
+            return this.radius >= rMax ? rMax : this.radius;
+        }
+        return 0;
+    }
+    buildPathData() {
+        if (!this.auxRect)
+            return "";
+        if (!this.radius)
+            return `M${SvgPoint.toCoors(this.auxRect.pNW)}`
+                + ` L${SvgPoint.toCoors(this.auxRect.pNE)}`
+                + ` L${SvgPoint.toCoors(this.auxRect.pSE)}`
+                + ` L${SvgPoint.toCoors(this.auxRect.pSW)} z`;
+        const r = this.fitRadius();
+        const pathWithR = new PathSegmentedPath();
+        let pNW = this.auxRect.pNW, pSW = this.auxRect.pSW, pSE = this.auxRect.pSE, pNE = this.auxRect.pNE;
+        let e = r * (1 - Bezier3.K);
+        const pArcNW = new PathBezier3(new SvgPoint(pNW.x + r, pNW.y), new SvgPoint(pNW.x + e, pNW.y), new SvgPoint(pNW.x, pNW.y + e), new SvgPoint(pNW.x, pNW.y + r));
+        const lW = new PathLine(pNW.x, pNW.y + r, pSW.x, pSW.y - r);
+        const pArcSW = new PathBezier3(new SvgPoint(pSW.x, pSW.y - r), new SvgPoint(pSW.x, pSW.y - e), new SvgPoint(pSW.x + e, pSW.y), new SvgPoint(pSW.x + r, pSW.y));
+        const lS = new PathLine(pSW.x + r, pSW.y, pSE.x - r, pSE.y);
+        const pArcSE = new PathBezier3(new SvgPoint(pSE.x - r, pSE.y), new SvgPoint(pSE.x - e, pSE.y), new SvgPoint(pSE.x, pSE.y - e), new SvgPoint(pSE.x, pSE.y - r));
+        const lE = new PathLine(pSE.x, pSE.y - r, pNE.x, pNE.y + r);
+        const pArcNE = new PathBezier3(new SvgPoint(pNE.x, pNE.y + r), new SvgPoint(pNE.x, pNE.y + e), new SvgPoint(pNE.x - e, pNE.y), new SvgPoint(pNE.x - r, pNE.y));
+        const lN = new PathLine(pNE.x - r, pNE.y, pNW.x + r, pNW.y);
+        pathWithR.addSeg(pArcNW, lW, pArcSW, lS, pArcSE, lE, pArcNE, lN);
+        pathWithR.closePath();
+        return pathWithR.buildPathData();
+    }
+    getLength() {
+        return 2 * (this.width + this.height);
+    }
+    toAngleArced(radius) {
+        if (!radius)
+            return this;
+        // Copy the polygon to make a new Path
+        const path = PathPolygon.fromPolygon(this.auxRect.toPolygon());
+        path.setAngArcRadius(radius);
+        return path;
+    }
+    toPathSegments(radius, cw) {
+        if (!this.auxRect)
+            return [];
+        return PathPolygon.fromPolygon(this.auxRect.toPolygon(cw)).toPathSegs(radius);
+    }
+    duplicateTo(distance, dir) {
+        if (!this.auxRect)
+            return undefined;
+        dir = dir === "right" ? "in"
+            : dir === "left" ? "out"
+                : dir;
+        let rect = this.auxRect.duplicateTo(distance, dir);
+        return rect ? PathRect.fromRect(rect) : undefined;
+    }
+    // Static Methods
+    static fromXYWH(x, y, width, height, radius) {
+        const path = new PathRect();
+        const rect = new Rect(x, y, width, height);
+        path.auxRect = rect;
+        path.models = [rect];
+        path.width = rect.width;
+        path.height = rect.height;
+        path.anchor = SvgPoint.from(rect.pNW);
+        // Here, the order is important, it will be used to build the path data, please note
+        path.realPoints.push(SvgPoint.from(rect.pNW), SvgPoint.from(rect.pNE), SvgPoint.from(rect.pSE), SvgPoint.from(rect.pSW));
+        path.centers.push(SvgPoint.from(rect.center));
+        path.bbox = SvgBBox.fromMaxMins(rect.xMin, rect.xMax, rect.yMin, rect.yMax);
+        path.radius = radius ?? 0;
+        return path;
+    }
+    static fromRect(rect, radius) {
+        const path = new PathRect();
+        path.auxRect = rect;
+        path.models = [rect];
+        path.width = rect.width;
+        path.height = rect.height;
+        // path.center = SvgPoint.from(rect.center);
+        path.anchor = SvgPoint.from(rect.pNW);
+        // Here, the order is important, it will be used to build the path data, please note
+        path.realPoints.push(SvgPoint.from(rect.pNW), SvgPoint.from(rect.pNE), SvgPoint.from(rect.pSE), SvgPoint.from(rect.pSW));
+        path.centers.push(SvgPoint.from(rect.center));
+        path.bbox = SvgBBox.fromMaxMins(rect.xMin, rect.xMax, rect.yMin, rect.yMax);
+        path.radius = radius ?? 0;
+        return path;
+    }
+}