wt-huatu 1.3.4

package/svg/SvgMarker.js

@@ -0,0 +1,221 @@
+/**
+ * The class implementation of SVG Line.
+ */
+import { SvgShapeArrowHeadSimpleAngle, SvgShapeArrowHeadSolidTriangle, SvgShapeArrowHeadSolidTwoTriangle } from "../shape/SvgShapeArrowHead.js";
+import { SvgShapeCross, SvgShapePlus } from "../shape/SvgShapeCross.js";
+import { SvgShapeStar, SvgShapeStar5, SvgShapeStarUnified } from "../shape/SvgShapeStar.js";
+import { SvgShapeCircle } from "../shape/SvgShapeCircle.js";
+import { SvgShapeEllipse } from "../shape/SvgShapeEllipse.js";
+import { SvgShapeHeart } from "../shape/SvgShapeHeart.js";
+import { SvgShapeIsoscelesTriangle } from "../shape/SvgShapeIsoscelesTriangle.js";
+import { SvgShapePolygon } from "../shape/SvgShapePolygon.js";
+import { SvgShapeRect } from "../shape/SvgShapeRect.js";
+import { SvgShapeRhombus } from "../shape/SvgShapeRhombus.js";
+export class SvgMarker {
+    id;
+    units = "strokeWidth";
+    refX;
+    refY;
+    orient; // If use number, it means degrees
+    viewBox;
+    preserveAspectRatio;
+    stroke;
+    fill;
+    shape;
+    constructor(id, shape, orient, refX, refY, stroke, fill) {
+        this.id = `svg-mkr-${id}`;
+        this.orient = orient;
+        this.shape = shape;
+        this.refX = refX ?? 0;
+        this.refY = refY ?? 0;
+        if (stroke && this.shape.hasStroke) {
+            this.shape.setStroke(stroke);
+            this.stroke = { ...this.shape.stroke };
+        }
+        if (fill && this.shape.hasFill) {
+            this.shape.setFill(fill);
+            this.fill = { ...this.shape.fill };
+        }
+        this.viewBox = this.shape.getBBox(this.stroke?.width);
+    }
+    buildMarkerSvg(id, primaryColor, secondaryColor) {
+        id = id ?? this.id;
+        const fillColor = (this.shape.primaryColor === "fill" ? primaryColor : secondaryColor) ?? this.fill?.color;
+        const strokeColor = (this.shape.primaryColor === "stroke" ? primaryColor : secondaryColor) ?? this.stroke?.color;
+        const attrs = [
+            `id="${id}"`,
+            `viewBox="${this.viewBox.buildString()}"`,
+            `refX="${this.refX}"`,
+            `refY="${this.refY}"`,
+            `markerWidth="${this.viewBox.w}"`,
+            `markerHeight="${this.viewBox.h}"`,
+            `orient="${this.orient}"`,
+        ];
+        return `<marker ${attrs.join(" ")} >\n`
+            /** Here, the fill opacity and stoke width are not able to be set while building SVG  */
+            + this.shape.buildHtml(fillColor, undefined, strokeColor, undefined)
+            + `\n</marker>`;
+    }
+    /** Static methods, and shortcut methods of build different markers, the only variant is the
+     * shape which is determined by different input parameters such as size, etc.
+     */
+    /** --- Circle --- */
+    static buildMarkerCircle(radius, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeCircle(radius);
+        return new SvgMarker("circ", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Ellipse --- */
+    static buildMarkerEllipse(rx, ry, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeEllipse(rx, ry);
+        return new SvgMarker("ell", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Rectangle --- */
+    static buildMarkerRect(w, h, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeRect(w, h);
+        return new SvgMarker("rect", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Square --- */
+    static buildMarkerSquare(w, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeRect(w, w);
+        return new SvgMarker("square", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Cross --- */
+    static buildMarkerCross(w, strokeColor, strokeWidth) {
+        const shape = new SvgShapeCross(w);
+        return new SvgMarker("cross", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        });
+    }
+    /** --- Plus --- */
+    static buildMarkerPlus(w, strokeColor, strokeWidth) {
+        const shape = new SvgShapePlus(w);
+        return new SvgMarker("plus", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        });
+    }
+    /** --- Polygon --- */
+    static buildMarkerPolygon(radius, edgeCount, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapePolygon(radius, edgeCount);
+        return new SvgMarker("plg", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Rhombus --- */
+    static buildMarkerRhombus(width, height, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeRhombus(width, height);
+        return new SvgMarker("rhombus", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Isosceles Triangle --- */
+    static buildMarkerIsoscelesTriangle(width, height, direction, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeIsoscelesTriangle(width, height, direction);
+        return new SvgMarker("isotriang", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Star made by simple axises --- */
+    static buildMarkerStar(size, axisCount, strokeColor, strokeWidth) {
+        const shape = new SvgShapeStar(size / 2, axisCount);
+        return new SvgMarker("star", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        });
+    }
+    /** --- Standard 5-angle star --- */
+    static buildMarkerStar5(size, centerEmpty, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeStar5(size / 2, centerEmpty);
+        return new SvgMarker("star5", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Unified Star-Like Markers --- */
+    static buildMarkerStarUnified(axisCount, rIn, rOut, degOffset, fillColor, fillOpacity, strokeColor, strokeWidth, roundRadius) {
+        const shape = new SvgShapeStarUnified(axisCount, rIn, rOut, degOffset, roundRadius);
+        return new SvgMarker("staru", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Heart --- */
+    static buildMarkerHeart(h1, ctrlLen1, deg1, farPointX, farPointY, deg2, ctrlLen2, ctrlLen3, h2, deg3, ctrlLen4, fillColor, fillOpacity, strokeColor, strokeWidth) {
+        const shape = new SvgShapeHeart(h1, ctrlLen1, deg1, farPointX, farPointY, deg2, ctrlLen2, ctrlLen3, h2, deg3, ctrlLen4);
+        return new SvgMarker("heart", shape, 0, 0, 0, {
+            color: strokeColor,
+            width: strokeWidth,
+        }, {
+            color: fillColor,
+            opacity: fillOpacity
+        });
+    }
+    /** --- Arrow Head --- */
+    static buildArrowHead(type, length, openDeg, len2Ratio, makeSmooth, makeTriangle, color) {
+        if (type === "solid-angle") {
+            const shape = new SvgShapeArrowHeadSolidTriangle(length, openDeg, makeSmooth ? 0.4 : undefined);
+            return new SvgMarker("arrow-solid", shape, "auto-start-reverse", -0.5 / Math.tan(shape.angHalf), 0, undefined, color ? { color } : undefined /** Fill Color */);
+        }
+        else if (type === "solid-two-angle") {
+            const shape = new SvgShapeArrowHeadSolidTwoTriangle(length, openDeg, len2Ratio, makeSmooth ? 0.4 : undefined);
+            return new SvgMarker("arrow-solid-2", shape, "auto-start-reverse", -0.5 / Math.tan(shape.angHalf), 0, undefined, color ? { color } : undefined /** Fill Color */);
+        }
+        else {
+            const shape = new SvgShapeArrowHeadSimpleAngle(length, openDeg, makeTriangle, makeSmooth);
+            /** Here, the second 0.5 (half of 1) is derived from the fact that the default (and should always be)
+             *  stroke width is 1 (same as line stroke) */
+            const refX = -0.5 / Math.tan(shape.angHalf) + 0.5 / Math.sin(shape.angHalf);
+            return new SvgMarker("arrow-simple", shape, "auto-start-reverse", refX, 0, color ? { color } : undefined);
+        }
+    }
+    /** The predefined markers */
+    static preDefines = {
+        "arrow-std": SvgMarker.buildArrowHead("solid-angle", 5.2, 42),
+        "arrow1": SvgMarker.buildArrowHead("solid-angle", 7, 38),
+        "arrow2": SvgMarker.buildArrowHead("solid-angle", 5, 30),
+        // TODO: add more as required
+    };
+}

package/svg/SvgPattern.js

@@ -0,0 +1,228 @@
+/**
+ * The class implementation of SVG Point.
+ */
+import { fitNumInRange } from "../tools/utils.js";
+import { AngDeg } from "../geometry/AngDeg.js";
+import Line from "../geometry/Line.js";
+import LineSeg from "../geometry/LineSeg.js";
+import Point from "../geometry/Point.js";
+import { SvgBBox } from "./SvgBBox.js";
+import { PathRect } from "../path/PathRect.js";
+import { PathLines } from "../path/PathLines.js";
+import { PathCircle } from "../path/PathCircle.js";
+export class SvgPattern {
+    id;
+    units = "userSpaceOnUse";
+    contentUnits;
+    x = 0;
+    y = 0;
+    width = 0;
+    height = 0;
+    paths = [];
+    viewBox;
+    constructor(id, x, y, width, height) {
+        this.id = id;
+        if (x)
+            this.x = x;
+        if (y)
+            this.y = y;
+        if (width)
+            this.width = width;
+        if (height)
+            this.height = height;
+    }
+    setUnits(units) {
+        this.units = units;
+    }
+    setContentUnits(units) {
+        // If there is a View Box defined, then the content unit should not be defined
+        if (this.viewBox)
+            return;
+        this.units = units;
+    }
+    setViewBox(box) {
+        this.viewBox = box;
+    }
+    addPaths(...paths) {
+        this.paths.push(...paths);
+    }
+    buildHtml(id) {
+        const attrs = [
+            `id="${id ?? this.id}"`,
+            `x="${this.x}"`,
+            `y="${this.y}"`,
+            `width="${this.width}"`,
+            `height="${this.height}"`
+        ];
+        if (this.units === "userSpaceOnUse")
+            attrs.push(`patternUnits="${this.units}"`);
+        if (this.contentUnits && this.viewBox)
+            attrs.push(`patternContentUnits="${this.contentUnits}"`);
+        if (this.viewBox)
+            attrs.push(`viewBox="${this.viewBox.buildString()}"`);
+        return `<pattern ${attrs.join(" ")} >\n`
+            + this.paths.map(p => p.buildHtml()).join("\n")
+            + `\n</pattern>`;
+    }
+}
+const buildRectFromViewBox = (vb, bg, bgOpacity) => {
+    const rect = PathRect.fromXYWH(vb.x, vb.y, vb.w, vb.h);
+    rect.fill = { color: bg };
+    if (bgOpacity) {
+        rect.fill.opacity = fitNumInRange(bgOpacity, 0, 1);
+    }
+    return rect;
+};
+export const buildLinePattern = (name, lineDensity, rotDeg, lineWeight, lineStyle, dashDensity, color, background, bgOpacity, opacity) => {
+    const buildLineSegAndViewBox = (lineDistance, rotDeg) => {
+        let wBox, hBox;
+        let path = new PathLines();
+        let deg = AngDeg.fitDeg(rotDeg);
+        deg = AngDeg.ang2Deg(deg);
+        if (deg > 180)
+            deg -= 180;
+        const degUsed = deg < 5
+            ? 0
+            : deg > 85 && deg < 95
+                ? 90
+                : deg > 175
+                    ? 0
+                    : deg;
+        let w, h;
+        let N = 8; // Here N should be odd integer
+        const idx = [...Array(N).keys()];
+        if (degUsed === 0) { // Horizontal Line
+            wBox = N * lineDistance;
+            hBox = N * lineDistance;
+            h = lineDistance / 2;
+            path.addLineSegs(...idx.map(i => LineSeg.fromXYs(-wBox / 2, (2 * i - N + 1) * h, wBox / 2, (2 * i - N + 1) * h)));
+        }
+        else if (degUsed === 90) { // Vertical Line
+            wBox = N * lineDistance;
+            hBox = N * lineDistance;
+            w = lineDistance / 2;
+            path.addLineSegs(...idx.map(i => LineSeg.fromXYs((2 * i - N + 1) * w, -hBox / 2, (2 * i - N + 1) * w, hBox / 2)));
+        }
+        else {
+            let angUsed = AngDeg.deg2Ang(degUsed);
+            w = lineDistance / Math.abs(Math.sin(angUsed)) / 2;
+            h = lineDistance / Math.abs(Math.cos(angUsed)) / 2;
+            let d = Math.sqrt(w ** 2 + h ** 2);
+            wBox = N * 2 * w;
+            hBox = N * 2 * h;
+            let lines = [...Array(2 * N).keys()]
+                .map(i => degUsed < 90
+                ? new Point(-wBox / 2, (N - 1 - 2 * i) * h)
+                : new Point(wBox / 2, (N - 1 - 2 * i) * h))
+                .map((p, i) => {
+                let len = (i >= N ? (2 * N) : (2 * i + 1)) * d;
+                return new Line(p, angUsed).buildSeg(-strokeWidth, len + strokeWidth);
+            });
+            path.addLineSegs(...lines);
+        }
+        return {
+            path,
+            viewBox: new SvgBBox(-wBox / 2, -hBox / 2, wBox, hBox)
+        };
+    };
+    // Fit Line Weight, it should be in 1 and 100
+    lineWeight = fitNumInRange(lineWeight, 1, 100);
+    let strokeWidth = lineWeight ** 1.4 * 0.02;
+    // Fit Density, it should be in 1 and 100
+    lineDensity = fitNumInRange(lineDensity, 1, 100);
+    let lineDistance = 40 / lineDensity + strokeWidth * 2;
+    // Fit DashDensity, it should be in 1 and 100
+    dashDensity = fitNumInRange(dashDensity, 1, 100);
+    let dashArray = [];
+    let lineCap;
+    if (lineStyle === "dotted") {
+        lineCap = "round";
+        let k = 100 / dashDensity;
+        dashArray.push(0, k * strokeWidth);
+    }
+    else if (lineStyle === "dashed") {
+        let k = 100 / dashDensity;
+        dashArray.push(k * 1.6 * strokeWidth, k ** 1.5 * 1.6 * strokeWidth);
+    }
+    const lines = buildLineSegAndViewBox(lineDistance, rotDeg);
+    const pattern = new SvgPattern(name, 0, 0, lines.viewBox.w, lines.viewBox.h);
+    if (background) {
+        pattern.addPaths(buildRectFromViewBox(lines.viewBox, background, bgOpacity));
+    }
+    lines.path.stroke = {
+        color: color ? color : "currentColor",
+        width: strokeWidth,
+    };
+    if (lineCap) {
+        lines.path.stroke.lineCap = lineCap;
+    }
+    if (dashArray.length > 0) {
+        lines.path.stroke.dashArray = dashArray;
+    }
+    if (opacity) {
+        lines.path.stroke.opacity = fitNumInRange(opacity, 0, 1);
+    }
+    pattern.viewBox = lines.viewBox;
+    pattern.addPaths(lines.path);
+    return pattern;
+};
+export const buildDotPattern = (name, dotDensity, dotSize, color, opacity, background, bgOpacity) => {
+    dotDensity = fitNumInRange(dotDensity, 1, 100);
+    dotSize = fitNumInRange(dotSize, 1, 100);
+    let r = dotSize * 0.2, d = r * (40 / dotDensity ** 0.56247); // Max density: 3r, min Density: 40r, this is half of the viewBox square side length
+    const vb = new SvgBBox(-d, -d, 2 * d, 2 * d);
+    const pattern = new SvgPattern(name, 0, 0, vb.w, vb.h);
+    const circ = new PathCircle(0, 0, r);
+    circ.fill = { color: color };
+    if (opacity) {
+        circ.fill.opacity = fitNumInRange(opacity, 0, 1);
+    }
+    pattern.viewBox = vb;
+    if (background) {
+        pattern.addPaths(buildRectFromViewBox(vb, background, bgOpacity));
+    }
+    pattern.addPaths(circ);
+    return pattern;
+};
+export const buildSquarePattern = (name, sqDensity, sqSize, color, opacity, background, bgOpacity) => {
+    sqDensity = fitNumInRange(sqDensity, 1, 100);
+    sqSize = fitNumInRange(sqSize, 1, 100);
+    let l = sqSize * 0.2, d = l * (40 / sqDensity ** 0.56247); // Max density: 3r, min Density: 40r, this is half of the viewBox square side length
+    const vb = new SvgBBox(-d, -d, 2 * d, 2 * d);
+    const pattern = new SvgPattern(name, 0, 0, vb.w, vb.h);
+    const sq = PathRect.fromXYWH(-l, -l, 2 * l, 2 * l);
+    sq.fill = { color: color };
+    if (opacity) {
+        sq.fill.opacity = fitNumInRange(opacity, 0, 1);
+    }
+    pattern.viewBox = vb;
+    if (background) {
+        pattern.addPaths(buildRectFromViewBox(vb, background, bgOpacity));
+    }
+    pattern.addPaths(sq);
+    return pattern;
+};
+export const buildGridPattern = (name, gridSize, lineWidth, color, bgColor, bgOpacity, opacity, sparseK) => {
+    gridSize = fitNumInRange(gridSize, 1, 100);
+    let d = Math.ceil(gridSize);
+    sparseK = fitNumInRange(sparseK ?? 1, 0.3, 30);
+    let len = d * (1 + sparseK);
+    const vb = new SvgBBox(-len / 2, -len / 2, len, len);
+    const lines = new PathLines();
+    lines.addLineSegs(LineSeg.fromXYs(-len / 2, -d / 2, len / 2, -d / 2), LineSeg.fromXYs(-len / 2, d / 2, len / 2, d / 2), LineSeg.fromXYs(-d / 2, -len / 2, -d / 2, len / 2), LineSeg.fromXYs(d / 2, -len / 2, d / 2, len / 2));
+    lineWidth = fitNumInRange(lineWidth, 1, 100);
+    lines.stroke = {
+        color: color,
+        width: lineWidth ** 1.4 * 0.02
+    };
+    if (opacity) {
+        lines.stroke.opacity = fitNumInRange(opacity, 0, 1);
+    }
+    const pattern = new SvgPattern(name, 0, 0, vb.w, vb.h);
+    pattern.viewBox = vb;
+    if (bgColor) {
+        pattern.addPaths(buildRectFromViewBox(vb, bgColor, bgOpacity));
+    }
+    pattern.addPaths(lines);
+    return pattern;
+};

package/svg/SvgPoint.js

@@ -0,0 +1,33 @@
+/**
+ * The class implementation of SVG Point.
+ */
+import { SvgCsts } from "./SvgConstants.js";
+export class SvgPoint {
+    x;
+    y;
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    toCoors(digits) {
+        const digitPlace = digits
+            ? (digits < SvgCsts.COORS_DIGITS_MIN ? SvgCsts.COORS_DIGITS_MIN : Math.round(digits))
+            : SvgCsts.COORS_DIGITS;
+        return `${this.x.toFixed(digitPlace)},${this.y.toFixed(digitPlace)}`;
+    }
+    moveBy(dx, dy) {
+        return new SvgPoint(this.x + dx, this.y + dy);
+    }
+    //=======     Static Methods     =====================================================
+    static from(p) {
+        return new SvgPoint(p.x, p.y);
+    }
+    static toCoors(p, digits) {
+        const digitPlace = digits
+            ? (digits < SvgCsts.COORS_DIGITS_MIN ? SvgCsts.COORS_DIGITS_MIN : Math.round(digits))
+            : SvgCsts.COORS_DIGITS;
+        return `${p.x.toFixed(digitPlace)},${p.y.toFixed(digitPlace)}`;
+    }
+    static ORIGIN = new SvgPoint(0, 0);
+    static ZERO = new SvgPoint(0, 0);
+}

package/svg/SvgPointSet.js

@@ -0,0 +1,41 @@
+/**
+ * The class implementation of SVG Point.
+ */
+import { SvgPoint } from "./SvgPoint.js";
+export class SvgPointSet {
+    points = [];
+    constructor() {
+    }
+    add(...points) {
+        this.points.push(...points.map(p => SvgPoint.from(p)));
+    }
+    concat(set) {
+        this.add(...set.points);
+        return this;
+    }
+    //=======     Static Methods     =====================================================
+    static from(points) {
+        const set = new SvgPointSet();
+        set.points = points.map(p => SvgPoint.from(p));
+        return set;
+    }
+    static zipTwo(set1, set2) {
+        const set = new SvgPointSet();
+        const lenLonger = Math.max(set1.points.length, set2.points.length);
+        for (let i = 0; i < lenLonger; i++) {
+            if (i < set1.points.length) {
+                set.add(set1.points[i]);
+            }
+            if (i < set2.points.length) {
+                set.add(set2.points[i]);
+            }
+        }
+        return set;
+    }
+    static concatTwo(set1, set2) {
+        const set = new SvgPointSet();
+        set.add(...set1.points);
+        set.add(...set2.points);
+        return set;
+    }
+}

package/templates/lines.js

@@ -0,0 +1,35 @@
+import Point from "../geometry/Point.js";
+import { SvgBBox } from "../svg/SvgBBox.js";
+export class HuatuTemplateLines {
+    name = "lines";
+    chartHeight = 600;
+    chartWidth = 1000;
+    data = [];
+    constructor() {
+    }
+    buildHuatuYml() {
+        return "";
+    }
+}
+export const data2Points = (data, vbChart, xRange, yRange) => {
+    const xs = data.map(x => x.x);
+    const ys = data.map(x => x.y);
+    const xr = xRange ?? { min: Math.min(...xs), max: Math.max(...xs) };
+    const yr = yRange ?? { min: Math.min(...ys), max: Math.max(...ys) };
+    return data.map((d, i) => {
+        let dx = d.x >= xr.max ? xr.max : d.x <= xr.min ? xr.min : d.x, dy = d.y >= yr.max ? yr.max : d.y <= yr.min ? yr.min : d.y, x = vbChart.x + vbChart.w * (dx - xr.min) / (xr.max - xr.min), y = vbChart.y + vbChart.h - vbChart.h * (dy - yr.min) / (yr.max - yr.min);
+        return new Point(x, y);
+    });
+};
+const dat = [...Array(30).keys()].map(i => {
+    const theta = i * Math.PI / 12;
+    const r = 6 * theta;
+    return {
+        x: r * Math.cos(theta),
+        y: r * Math.sin(theta),
+    };
+});
+const points = data2Points(dat, new SvgBBox(0, -800, 1000, 800), undefined, undefined)
+    .map(p => `${p.x.toFixed(6)},${p.y.toFixed(6)}`)
+    .join(";");
+console.log(points);

package/tools/gen-id.js

@@ -0,0 +1,2 @@
+import { genRandStrOf } from "./rand-str.js";
+export const genHex = (digits) => genRandStrOf("h", 8);

package/tools/html.js

@@ -0,0 +1,2 @@
+// Build the CSS including tag
+export const buildCssHtmlTag = (cssLoc) => `<link rel="stylesheet" href="${cssLoc}" />`;

package/tools/katex.js

@@ -0,0 +1,75 @@
+import katex from "katex";
+import "katex/contrib/mhchem";
+export const renderKatexInline = (math) => {
+    try {
+        return katex.renderToString(math, {
+            displayMode: false,
+            output: "html",
+        });
+    }
+    catch (error) {
+        return `<span class='txt-error'>公式书写错误: ${math}</span>`;
+    }
+};
+export const renderKatexBlock = (math) => {
+    try {
+        const katexHtml = katex.renderToString(math, {
+            displayMode: true,
+            output: "html",
+        });
+        return `<div class="katex-block">${katexHtml}</div>`;
+    }
+    catch (error) {
+        return `<span class='txt-error'>公式书写错误: ${math}</span>`;
+    }
+};
+export const renderKatexInlineWithBlockForm = (math) => {
+    try {
+        const renderedHtml = katex.renderToString(math, {
+            displayMode: true,
+            output: "html",
+        });
+        const matched = /<span class="katex-display">([\s\S]+)<\/span>/i.exec(renderedHtml);
+        return matched ? matched[1] : renderedHtml;
+    }
+    catch (error) {
+        return `<span class='txt-error'>公式书写错误: ${math}</span>`;
+    }
+};
+export const renderKatexMixedText = (text) => {
+    const rawSegments = text.split(/(?<!\\)\$/); // Split label text with just the $ sign, but not escaped one \$
+    const rendered = [];
+    if (rawSegments[0].trim()) {
+        rendered.push(`<span>${rawSegments[0]}</span>`);
+    }
+    let dsStarted = false;
+    let textPending = '';
+    if (rawSegments.length >= 2) {
+        for (let i = 1; i < rawSegments.length; i++) {
+            if (!dsStarted) {
+                dsStarted = true;
+                if (textPending.trim()) {
+                    rendered.push(`<span>${textPending}</span>`);
+                }
+                textPending = rawSegments[i];
+            }
+            else {
+                rendered.push(renderKatexInlineWithBlockForm(textPending));
+                dsStarted = false;
+                textPending = rawSegments[i];
+            }
+        }
+        if (dsStarted) {
+            textPending = '$' + textPending;
+        }
+        if (textPending) {
+            rendered.push(`<span>${textPending}</span>`);
+        }
+    }
+    return rendered.join("");
+};
+export const renderKatexMixedTextConditional = (text, renderKatex) => {
+    return renderKatex
+        ? renderKatexMixedText(text)
+        : `<span>${text}</span>`;
+};