wt-huatu 1.3.4

package/huatu/HuatuStyle.js

@@ -0,0 +1,394 @@
+import { SvgCsts } from "../svg/SvgConstants.js";
+import { WtMath } from "../math/WtMath.js";
+import { isValidColor } from "../tools/webColor.js";
+import { genHex } from "../tools/gen-id.js";
+export class HuatuStyle {
+    refStyles = [];
+    name;
+    fillColor;
+    fillOpacity;
+    fillPattern;
+    fillRule;
+    fillGradient;
+    strokeColor;
+    strokeWidth;
+    strokeOpacity;
+    strokeLineCap;
+    strokeLineJoin;
+    strokeMiterLimit;
+    strokeDashArray;
+    strokeDashOffset;
+    markerStart;
+    markerMid;
+    markerEnd;
+    clipPath;
+    refCount = 0;
+    magicId;
+    constructor(name) {
+        this.name = name;
+        this.magicId = genHex(8);
+    }
+    copyRefAttrs() {
+        if (this.refStyles.length < 1)
+            return;
+        // Assign
+        ["fillColor", "fillOpacity", "fillPattern", "fillRule", "fillGradient",
+            "strokeColor", "strokeWidth", "strokeOpacity", "strokeLineCap",
+            "strokeLineJoin", "strokeMiterLimit", "strokeDashArray", "strokeDashOffset",
+            "markerStart", "markerMid", "markerEnd",
+            "clipPath"
+        ].forEach(k => {
+            const kAttr = k;
+            if (!this[kAttr]) {
+                let i = this.refStyles.length - 1;
+                while (i >= 0) {
+                    const ref = this.refStyles[i--];
+                    if (ref[kAttr]) {
+                        this[kAttr] = ref[kAttr];
+                        break;
+                    }
+                }
+            }
+        });
+    }
+    buildAttrArray() {
+        const attrs = [];
+        // Fill
+        if (this.fillPattern) {
+            attrs.push([`fill`, `url(#${this.fillPattern.buildId()})`]);
+        }
+        else if (this.fillGradient) { // TODO: for gradient, there might be some similar actions to build IDs
+            attrs.push([`fill`, `url(#${this.fillGradient})`]);
+        }
+        else if (this.fillColor) {
+            attrs.push([`fill`, `${this.fillColor}`]);
+        }
+        if (this.fillOpacity !== undefined && WtMath.isIn0and1(this.fillOpacity)) {
+            attrs.push([`fill-opacity`, `${this.fillOpacity.toFixed(2)}`]);
+        }
+        if (this.fillRule) {
+            attrs.push([`fill-rule`, this.fillRule]);
+        }
+        // Stroke
+        if (this.strokeColor) {
+            attrs.push([`stroke`, `${this.strokeColor}`]);
+        }
+        if (this.strokeWidth) {
+            attrs.push([`stroke-width`, `${this.strokeWidth.toFixed(6)}`]);
+        }
+        if (this.strokeOpacity) {
+            attrs.push([`stroke-opacity`, `${this.strokeOpacity}`]);
+        }
+        if (this.strokeLineCap && this.strokeLineCap !== "butt") {
+            attrs.push([`stroke-linecap`, `${this.strokeLineCap}`]);
+        }
+        if (this.strokeLineJoin && this.strokeLineJoin !== "miter") {
+            attrs.push([`stroke-linejoin`, `${this.strokeLineJoin}`]);
+        }
+        if (this.strokeDashArray && Array.isArray(this.strokeDashArray)) {
+            attrs.push([
+                `stroke-dasharray`,
+                this.strokeDashArray.map(d => `${d}`).join(" ")
+            ]);
+        }
+        if (this.strokeDashOffset) {
+            attrs.push([`stroke-dashoffset`, `${this.strokeDashOffset}`]);
+        }
+        if (this.markerStart) {
+            attrs.push([`marker-start`, `url(#${this.markerStart.buildId()})`]);
+        }
+        if (this.markerMid) {
+            attrs.push([`marker-mid`, `url(#${this.markerMid.buildId()})`]);
+        }
+        if (this.markerEnd) {
+            attrs.push([`marker-end`, `url(#${this.markerEnd.buildId()})`]);
+        }
+        if (this.clipPath) {
+            attrs.push([`clip-path`, `url(#${this.clipPath.buildId()})`]);
+        }
+        return attrs;
+    }
+    buildCss() {
+        if (!this.name)
+            return "";
+        const attrs = this.buildAttrArray();
+        if (attrs.length < 1)
+            return "";
+        return `.${HuatuStyle.buildStyleClassName(this)} {\n${attrs.map(a => `${a[0]}: ${a[1]};`).join("\n")}\n}`;
+    }
+    buildSvgAttr(direct) {
+        const mergeStyles = (styles, newStyles) => {
+            newStyles.forEach(ns => {
+                let idx = styles.findIndex(s => s[0] === ns[0]);
+                if (idx >= 0)
+                    styles[idx][1] = ns[1];
+                else
+                    styles.push([ns[0], ns[1]]);
+            });
+        };
+        const attrArray = []; // = this.buildAttrArray();
+        if (globalThis.wtHuatuConfig?.noRefStyle) {
+            this.refStyles.forEach(s => mergeStyles(attrArray, s.buildAttrArray()));
+            mergeStyles(attrArray, this.buildAttrArray());
+            return attrArray.map(a => `${a[0]}="${a[1]}"`).join(" ");
+        }
+        const classes = this.refStyles.map(s => HuatuStyle.buildStyleClassName(s)).filter(x => !!x);
+        if (!direct && this.name) {
+            classes.push(HuatuStyle.buildStyleClassName(this));
+            return `class="${classes.join(' ')}"`;
+        }
+        if (classes.length > 0) {
+            attrArray.push(["class", `${classes.join(' ')}`]);
+        }
+        attrArray.push(...this.buildAttrArray());
+        return attrArray.map(a => `${a[0]}="${a[1]}"`).join(" ");
+    }
+    toPathConfigs() {
+        return HuatuStyle.convertStyleToPathConfigs(this);
+    }
+    static buildStyleClassName(style) {
+        if (!style.name)
+            return "";
+        return `sty-${style.magicId}`;
+    }
+    static judgeStrokeWidth(style) {
+        if (!style)
+            return 0;
+        let i = 0;
+        let strokeWidth;
+        let strokeColor;
+        while (i < style.refStyles.length) {
+            let sty = style.refStyles[i++];
+            if (sty.strokeWidth && strokeWidth === undefined)
+                strokeWidth = sty.strokeWidth;
+            if (sty.strokeColor && !strokeColor)
+                strokeColor = sty.strokeColor;
+            if (strokeWidth && strokeColor)
+                break;
+        }
+        strokeColor = style.strokeColor ? style.strokeColor : strokeColor;
+        return style.strokeWidth ? style.strokeWidth
+            : strokeWidth ? strokeWidth
+                : strokeColor && strokeColor.toLowerCase() !== "none" ? 1
+                    : 0;
+    }
+    static buildForSvg(style, direct) {
+        if (!style)
+            return ``;
+        return style.buildSvgAttr(direct);
+    }
+    static convertStyleToPathConfigs(style) {
+        const configs = {};
+        if (style.fillPattern) {
+            configs.fill = { color: `url(#${style.fillPattern.buildId()})` };
+        }
+        else if (style.fillGradient) {
+            configs.fill = { color: `url(#${style.fillGradient})` };
+        }
+        else if (style.fillColor) {
+            configs.fill = { color: `${style.fillColor}` };
+        }
+        if (style.fillOpacity !== undefined && WtMath.isIn0and1(style.fillOpacity)) {
+            if (configs.fill)
+                configs.fill.opacity = style.fillOpacity;
+            else
+                configs.fill = { opacity: style.fillOpacity };
+        }
+        if (style.fillRule) {
+            if (configs.fill)
+                configs.fill.rule = style.fillRule;
+            else
+                configs.fill = { rule: style.fillRule };
+        }
+        configs.stroke = { color: style.strokeColor };
+        if (style.strokeWidth) {
+            configs.stroke.width = style.strokeWidth;
+        }
+        if (style.strokeOpacity) {
+            configs.stroke.opacity = style.strokeOpacity;
+        }
+        if (style.strokeLineCap && style.strokeLineCap !== "butt") {
+            configs.stroke.lineCap = style.strokeLineCap;
+        }
+        if (style.strokeLineJoin && style.strokeLineJoin !== "miter") {
+            configs.stroke.lineJoin = style.strokeLineJoin;
+        }
+        if (style.strokeDashArray) {
+            configs.stroke.dashArray = style.strokeDashArray;
+        }
+        if (style.strokeDashOffset) {
+            configs.stroke.dashOffset = style.strokeDashOffset;
+        }
+        if (style.markerStart) {
+            if (configs.marker)
+                configs.marker.start = style.markerStart.buildId();
+            else
+                configs.marker = { start: style.markerStart.buildId() };
+        }
+        if (style.markerMid) {
+            if (configs.marker)
+                configs.marker.mid = style.markerMid.buildId();
+            else
+                configs.marker = { mid: style.markerMid.buildId() };
+        }
+        if (style.markerEnd) {
+            if (configs.marker)
+                configs.marker.end = style.markerEnd.buildId();
+            else
+                configs.marker = { end: style.markerEnd.buildId() };
+        }
+        if (style.clipPath) {
+            configs.clip = style.clipPath.buildId();
+        }
+        return configs;
+    }
+    static optsFill = {
+        keys: [
+            ["color"],
+            ["opacity"],
+            ["pattern"],
+            ["gradient"],
+            ["rule"],
+        ],
+        allowAppend: [],
+        numbers: ["opacity"],
+        ints: [],
+        booleans: [],
+        qualifiers: {
+            "color": isValidColor,
+            "rule": SvgCsts.FILL_RULES,
+        },
+        blindGuess: {
+            "color": isValidColor,
+            "rule": SvgCsts.FILL_RULES,
+            "opacity": (op) => {
+                let x = parseFloat(op);
+                return Number.isNaN(x) ? undefined : x;
+            },
+        }
+    };
+    static optsFillColorAndOpacity = {
+        keys: [
+            ["color"],
+            ["opacity"],
+        ],
+        allowAppend: [],
+        numbers: ["opacity"],
+        ints: [],
+        booleans: [],
+        qualifiers: {
+            "color": isValidColor,
+        },
+        blindGuess: {
+            "color": isValidColor,
+            "opacity": (op) => {
+                let x = parseFloat(op);
+                return Number.isNaN(x) ? undefined : x;
+            },
+        }
+    };
+    static optsStroke = {
+        keys: [
+            ["color"],
+            ["width"],
+            ["opacity"],
+            ["lineCap"],
+            ["lineJoin"],
+            ["miterLimit"],
+            ["dashArray", "array", "dash"],
+            ["dashOffset", "offset"],
+        ],
+        allowAppend: ["dashArray", "array", "dash"],
+        numbers: ["width", "opacity", "miterLimit", "dashOffset", "offset"],
+        ints: [],
+        booleans: [],
+        qualifiers: {
+            "color": isValidColor,
+            "dashArray": "number[]",
+            "array": "number[]",
+            "dash": "number[]",
+            "lineCap": SvgCsts.LINE_CAPS,
+            "lineJoin": SvgCsts.LINE_JOINS,
+        },
+        blindGuess: {
+            "color": isValidColor,
+            "lineCap": SvgCsts.LINE_CAPS,
+            "lineJoin": SvgCsts.LINE_JOINS,
+            "width": (w) => {
+                let x = parseFloat(w);
+                return Number.isNaN(x) ? undefined : x;
+            },
+        }
+    };
+    static optsMarker = {
+        keys: [
+            ["start"],
+            ["mid", "middle"],
+            ["end"],
+        ],
+        allowAppend: [],
+        ints: [],
+        numbers: [],
+        booleans: [],
+        qualifiers: {},
+        blindGuess: {},
+    };
+    static optsStyle = {
+        keys: [
+            ["styles", "style", "refs", "ref"],
+            // Style keys
+            ["fill"],
+            ["fillOpacity"],
+            ["opaque"],
+            ["fillRule"],
+            ["fillColor"],
+            ["stroke"],
+            ["lineJoin", "strokeLineJoin"],
+            ["lineCap", "strokeLineCap"],
+            ["strokeOpacity"],
+            ["strokeColor"],
+            ["strokeWidth"],
+            ["dashArray", "array", "dash", "strokeDashArray"],
+            ["dashOffset", "arrayOffset", "offset"],
+            ["gradient"],
+            ["pattern"],
+            ["marker"],
+            ["clip"],
+            ["markerStart"],
+            ["markerMid", "markerMiddle"],
+            ["markerEnd"],
+        ],
+        allowAppend: ["fill", "stroke", "marker", "smooth"],
+        booleans: [],
+        ints: [],
+        numbers: [
+            "fillOpacity", "opaque",
+            "strokeWidth",
+            "strokeOpacity",
+            "dashOffset", "arrayOffset", "offset",
+        ],
+        qualifiers: {
+            "dashArray": "number[]",
+            "array": "number[]",
+            "dash": "number[]",
+            "strokeDashArray": "number[]",
+            "fillColor": isValidColor,
+            "strokeColor": isValidColor,
+            "lineCap": SvgCsts.LINE_CAPS,
+            "strokeLineCap": SvgCsts.LINE_CAPS,
+            "lineJoin": SvgCsts.LINE_JOINS,
+            "strokeLineJoin": SvgCsts.LINE_JOINS,
+            "fillRule": SvgCsts.FILL_RULES,
+        },
+        blindGuess: {
+            "fillRule": SvgCsts.FILL_RULES,
+            "lineCap": SvgCsts.LINE_CAPS,
+            "lineJoin": SvgCsts.LINE_JOINS,
+        },
+        subKeys: {
+            "fill": HuatuStyle.optsFill,
+            "stroke": HuatuStyle.optsStroke,
+            "marker": HuatuStyle.optsMarker,
+        }
+    };
+}

package/huatu/HuatuSymbol.js

@@ -0,0 +1,81 @@
+import { HuatuTransform } from "./HuatuTransform.js";
+import { SvgBBox } from "../svg/SvgBBox.js";
+import { HuatuDrawingGroup } from "./HuatuDrawingGroup.js";
+import { HuatuStyle } from "./HuatuStyle.js";
+import { genHex } from "../tools/gen-id.js";
+export class HuatuSymbol extends HuatuDrawingGroup {
+    refCount = 0;
+    alwaysInDef = true;
+    magicId;
+    viewBox;
+    constructor(name, desc) {
+        super(name, desc);
+        this.magicId = genHex(8);
+    }
+    getWidth() {
+        return this.viewBox ? this.viewBox.w : this.bbox.w;
+    }
+    getHeight() {
+        return this.viewBox ? this.viewBox.h : this.bbox.h;
+    }
+    setViewBox(viewBox) {
+        this.viewBox = viewBox;
+    }
+    // For a Symbol, the real size is determined by viewBox, so here we have to override the definition in parent class
+    // i.e. Huatu Drawing Group
+    getBBox(style) {
+        let width, height;
+        if (this.viewBox) {
+            width = this.viewBox.w;
+            height = this.viewBox.h;
+        }
+        else {
+            const bbox = this.bbox.extendByStroke(HuatuStyle.judgeStrokeWidth(style));
+            width = bbox.w;
+            height = bbox.h;
+        }
+        // The X and Y is not determined by symbol it self, so return 0 here
+        return new SvgBBox(0, 0, width, height);
+    }
+    buildId() {
+        return `sym-${this.magicId}`;
+    }
+    buildHtmlForDef() {
+        return `<symbol id="${this.buildId()}" viewBox="${(this.viewBox ?? this.bbox).buildString()}">\n`
+            + (this.desc ? `<desc>${this.desc}</desc>\n` : ``)
+            + this.elements.map(e => e.buildHtml("direct")).join("\n") // For def building, always use direct output
+            + `</symbol>`;
+    }
+    buildTransformStr(transform, alignCenter) {
+        const attrs = [];
+        let width = this.getWidth(), height = this.getHeight();
+        if (transform) {
+            const scale = HuatuTransform.judgeScale(transform);
+            width *= scale;
+            height *= scale;
+            const rotAttrs = HuatuTransform.buildTransformAttrsForSymbol(transform);
+            if (rotAttrs.length > 0)
+                attrs.push(...rotAttrs);
+        }
+        // This Align-To-Center action is to make sure that the symbol will be re-positioned
+        // to make sure its geometry center is at the point given. And the parameter input
+        // alignCenter will switch it on/off
+        if (alignCenter)
+            attrs.push(`translate(${-width / 2},${-height / 2})`);
+        if (attrs.length < 1)
+            return "";
+        return `transform="${attrs.join(" ")}"`;
+    }
+    buildSvgOfLink(style, transform, alignCenter) {
+        const scale = HuatuTransform.judgeScale(transform);
+        let width = scale * this.getWidth(), height = scale * this.getHeight();
+        const attrs = [];
+        attrs.push(`xlink:href="#${this.buildId()}"`);
+        attrs.push(`href="#${this.buildId()}"`);
+        attrs.push(`width="${width}"`);
+        attrs.push(`height="${height}"`);
+        attrs.push(this.buildTransformStr(transform, alignCenter));
+        attrs.push(HuatuStyle.buildForSvg(style));
+        return `<use ${attrs.join(" ")} />`;
+    }
+}