wt-huatu 1.3.4

package/huatu/HuatuMarker.js

@@ -0,0 +1,209 @@
+import { SvgMarker } from "../svg/SvgMarker.js";
+import { SvgShapeArrowHeadSimpleAngle, SvgShapeArrowHeadSolidTriangle, SvgShapeArrowHeadSolidTwoTriangle } from "../shape/SvgShapeArrowHead.js";
+import { fitNumInRange } from "../tools/utils.js";
+import { WtMath } from "../math/WtMath.js";
+import { SvgShapeCircle } from "../shape/SvgShapeCircle.js";
+import { SvgShapeEllipse } from "../shape/SvgShapeEllipse.js";
+import { SvgShapeRect } from "../shape/SvgShapeRect.js";
+import { SvgShapeCross, SvgShapePlus } from "../shape/SvgShapeCross.js";
+import { SvgShapeRhombus } from "../shape/SvgShapeRhombus.js";
+import { SvgShapeIsoscelesTriangle } from "../shape/SvgShapeIsoscelesTriangle.js";
+import { SvgShapeStar5, SvgShapeStarUnified } from "../shape/SvgShapeStar.js";
+import { SvgShapePolygon } from "../shape/SvgShapePolygon.js";
+import { genHex } from "../tools/gen-id.js";
+export class HuatuMarker {
+    // The possible marker types that user could use when designing the marker
+    static TYPES = {
+        arrowSolid: ["arrow-solid", "arrowsolid", "solidarrow", "arrow"],
+        arrowDouble: ["arrow-double", "arrowdouble", "doublearrow"],
+        arrowSimple: ["arrow-simple", "arrowsimple", "simple-arrow", "simplearrow"],
+        circle: ["circle", "circ", "dot"],
+        triangle: ["triangle", "tri"],
+        ellipse: ["ellipse", "ell"],
+        rhombus: ["rhombus", "rhom"],
+        square: ["square", "sqr"],
+        rectangle: ["rectangle", "rect"],
+        star5: ["star", "star5", "5-star", "5star", "wujiaoxing"],
+        starU: ["staru", "star-u", "star-unified", "unifiedstar", "unified-star"],
+        plus: ["plus", "jiahao"],
+        cross: ["cross", "chacha", "cha"],
+        polygon: ["polygon", "plg", "duobianxing", "dbx"]
+    };
+    name;
+    marker;
+    primaryColor;
+    secondaryColor;
+    refCount = 0;
+    alwaysInDef = true;
+    magicId;
+    constructor(name, marker) {
+        this.name = name;
+        this.marker = marker;
+        this.magicId = genHex(8);
+    }
+    buildHtmlForDef() {
+        return this.marker.buildMarkerSvg(this.buildId(), this.primaryColor, this.secondaryColor);
+    }
+    buildId() {
+        return `mkr-${this.magicId}`;
+    }
+    static getAllMarkerTypeWords() {
+        const res = [];
+        for (const key in HuatuMarker.TYPES) {
+            res.push(...HuatuMarker.TYPES[key]);
+        }
+        return res;
+    }
+    static buildMarkerFromParams(name, params) {
+        if (!params.type)
+            return `Marker Type not specified!`;
+        const type = params.type.toLowerCase();
+        let shape;
+        let orient = 0;
+        let refX = 0, refY = 0;
+        let hasStroke = false, hasFill = false;
+        let fill = {};
+        let stroke = {};
+        let openDeg = params.degOpen ?? 46;
+        let len = params.len ? params.len
+            : params.size ? params.size
+                : params.width ? params.width
+                    : 5;
+        let radius = params.r ? params.r
+            : params.size ? params.size / 2
+                : params.width ? params.width / 2
+                    : params.height ? params.height / 2
+                        : 6;
+        let w = params.width ? params.width
+            : params.size ? params.size
+                : params.len ? params.len
+                    : 6;
+        let h = params.height ? params.height
+            : params.size ? params.size
+                : params.len ? params.len
+                    : 6;
+        let rx = params.rx ? params.rx
+            : params.r ? params.r
+                : params.width ? params.width / 2
+                    : params.height ? params.height / 2
+                        : 6;
+        let ry = params.ry ? params.ry
+            : params.r ? params.r
+                : params.height ? params.height / 2
+                    : params.width ? params.width / 2
+                        : 6;
+        let size = params.size ? params.size
+            : params.width ? params.width
+                : params.height ? params.height
+                    : 6;
+        if (HuatuMarker.TYPES.arrowSolid.includes(type)) {
+            orient = "auto-start-reverse";
+            shape = new SvgShapeArrowHeadSolidTriangle(fitNumInRange(len, 1, 200), fitNumInRange(openDeg, 10, 160), params.makeSmooth ? 0.1 : undefined);
+            refX = -0.5 / Math.tan(shape.angHalf);
+            hasFill = true;
+        }
+        else if (HuatuMarker.TYPES.arrowDouble.includes(type)) {
+            orient = "auto-start-reverse";
+            let len2Ratio;
+            if (params.k && WtMath.isIn0and1(params.k))
+                len2Ratio = fitNumInRange(params.k, 0, 1);
+            shape = new SvgShapeArrowHeadSolidTwoTriangle(fitNumInRange(len, 1, 200), fitNumInRange(openDeg, 10, 160), len2Ratio, params.makeSmooth ? 0.1 : undefined);
+            refX = -0.5 / Math.tan(shape.angHalf);
+            hasFill = true;
+        }
+        else if (HuatuMarker.TYPES.arrowSimple.includes(type)) {
+            orient = "auto-start-reverse";
+            shape = new SvgShapeArrowHeadSimpleAngle(fitNumInRange(len, 1, 200), fitNumInRange(openDeg, 10, 160), params.closeArrow, params.makeSmooth);
+            refX = -0.5 / Math.tan(shape.angHalf) + 0.5 / Math.sin(shape.angHalf);
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.circle.includes(type)) {
+            shape = new SvgShapeCircle(fitNumInRange(radius, 0.2, 100));
+            hasStroke = true;
+            hasFill = true;
+        }
+        else if (HuatuMarker.TYPES.triangle.includes(type)) {
+            const dir = params.direction && ["up", "down", "left", "right"].includes(params.direction) ? params.direction : "up";
+            shape = new SvgShapeIsoscelesTriangle(fitNumInRange(w, 2, 100), fitNumInRange(h, 2, 100), dir);
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.ellipse.includes(type)) {
+            orient = "auto";
+            shape = new SvgShapeEllipse(fitNumInRange(rx, 0.2, 100), fitNumInRange(ry, 0.2, 100));
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.rhombus.includes(type)) {
+            shape = new SvgShapeRhombus(fitNumInRange(w, 0.2, 100), fitNumInRange(h, 0.2, 100));
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.square.includes(type)) {
+            w = fitNumInRange(w, 0.2, 100);
+            shape = new SvgShapeRect(w, w);
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.rectangle.includes(type)) {
+            shape = new SvgShapeRect(fitNumInRange(w, 0.2, 100), fitNumInRange(h, 0.2, 100));
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.star5.includes(type)) {
+            shape = new SvgShapeStar5(fitNumInRange(size, 0.4, 100) / 2, params.centerEmpty);
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.starU.includes(type)) {
+            if (!params.n)
+                return `Star angle count N must be presented!`;
+            let rIn = params.rIn ? params.rIn : params.r ? params.r : 10;
+            let rOut = params.rOut ? params.rOut : rIn * 1.2;
+            if (rOut < rIn) {
+                let x = rIn;
+                rIn = rOut;
+                rOut = x;
+            }
+            else if (rOut === rIn) {
+                rOut = rIn * 1.2;
+            }
+            let degOffset = params.degOffset ?? 0;
+            let rCorner = params.rx ? params.rx : params.ry ? params.ry : undefined;
+            shape = new SvgShapeStarUnified(fitNumInRange(params.n, 3, 30), rIn, rOut, degOffset, rCorner);
+            hasFill = true;
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.plus.includes(type)) {
+            shape = new SvgShapePlus(fitNumInRange(w, 0.2, 100));
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.cross.includes(type)) {
+            shape = new SvgShapeCross(fitNumInRange(w, 0.2, 100));
+            hasStroke = true;
+        }
+        else if (HuatuMarker.TYPES.polygon.includes(type)) {
+            if (!params.n)
+                return `Polygon side count N must be presented!`;
+            shape = new SvgShapePolygon(size, fitNumInRange(params.n, 3, 30));
+            hasFill = true;
+            hasStroke = true;
+        }
+        else {
+            return `Marker type '${type}' is not defined!`;
+        }
+        if (hasStroke) {
+            if (params.strokeColor)
+                stroke.color = params.strokeColor;
+            if (params.strokeWidth)
+                stroke.width = params.strokeWidth;
+        }
+        if (hasFill) {
+            if (params.fillColor)
+                fill.color = params.fillColor;
+            if (params.fillOpacity)
+                fill.opacity = params.fillOpacity;
+        }
+        return new SvgMarker(`mkr-${name}`, shape, orient, refX, refY, stroke, fill);
+    }
+}

package/huatu/HuatuParser.js

@@ -0,0 +1,435 @@
+import { WT_REGEX } from "../tools/regex.js";
+import { WtHuatu } from "./Huatu.js";
+import { resolvePointLike } from "../tools/utils.js";
+import { HuatuYml } from "./HuatuYml.js";
+import { HuatuComponentCache } from "../component/HuatuComponentCache.js";
+export function resolveHuatuSize(size) {
+    const wh = resolvePointLike(size);
+    if (wh &&
+        WT_REGEX.FLOAT_NUMBER.test(wh.x) &&
+        WT_REGEX.FLOAT_NUMBER.test(wh.y)) {
+        return {
+            width: parseFloat(wh.x),
+            height: parseFloat(wh.y)
+        };
+    }
+    return null;
+}
+export const FORBIDDEN_NAMES = [
+    "config",
+    "size", "title", "desc",
+    "viewbox", "viewarea", "viewbetween",
+    "vars",
+    "points", "shapes", "cpoints", "xpoints", "pointseries", "shapeseries",
+    "points2", "shapes2", "cpoints2", "xpoints2", "pointseries2", "shapeseries2",
+    "points3", "shapes3", "cpoints3", "xpoints3", "pointseries3", "shapeseries3",
+    "points4", "shapes4", "cpoints4", "xpoints4", "pointseries4", "shapeseries4",
+    "components", "placements",
+    "paths", "markers", "patterns", "clips",
+    "styles", "labelstyles",
+    "symbols", "blocks", "arrays", "layers",
+    "draw", "jobs",
+    "inputvars", "ports",
+];
+export function resolveYmlModelSync(ymlObj) {
+    const huatu = new WtHuatu();
+    if (!ymlObj)
+        return huatu;
+    // Copy the original object
+    const yml = HuatuYml.copyObj(ymlObj);
+    // Resolve meta data
+    if (yml.title)
+        huatu.title = yml.title;
+    if (yml.desc)
+        huatu.desc = yml.desc;
+    if (yml.size) {
+        const size = resolveHuatuSize(yml.size);
+        if (size) {
+            if (size.width > 0)
+                huatu.width = size.width;
+            if (size.height > 0)
+                huatu.height = size.height;
+        }
+        else {
+            huatu.resolvingErrors.push({
+                title: `Size input of [${yml.size}] cannot be resolved!`
+            });
+        }
+    }
+    // Resolve Global Config
+    if (yml.config) {
+        const cfg = WtHuatu.resolveConfig(yml.config);
+        // Inject the configuration into Global This
+        if (Object.keys(cfg).length > 0) {
+            huatu.config = cfg;
+        }
+    }
+    // The unified named fields resolving function
+    const resolveNamedFields = (field, moduleName, resolveCall, acceptedTypes, ignoreNames) => {
+        const fieldVal = yml[field];
+        if (typeof fieldVal === "string") {
+            huatu.resolvingErrors.push({
+                title: `${moduleName} definition "${field}" is incorrect, please check!`,
+            });
+            return;
+        }
+        if (fieldVal) {
+            for (const name in fieldVal) {
+                // Check Name
+                if (!WT_REGEX.VAR_NAME.test(name)) {
+                    huatu.resolvingErrors.push({
+                        title: `${moduleName} name '${name}' has incorrect format, please use only alphanumeric and underscore(_)!`
+                    });
+                    continue;
+                }
+                const lcName = name.toLowerCase();
+                if (FORBIDDEN_NAMES.includes(lcName) && (!ignoreNames || !ignoreNames.includes(lcName))) {
+                    huatu.resolvingErrors.push({
+                        title: `${moduleName} name '${name}' is forbidden, please pick another one!`
+                    });
+                    continue;
+                }
+                // Check if definition empty
+                let isEmpty = false;
+                let notAccepted = false;
+                let val = fieldVal[name];
+                let valType = "string";
+                if (!val) {
+                    isEmpty = true;
+                }
+                else if (typeof val === "string") {
+                    valType = "string";
+                    // Trim spaces
+                    val = val.trim();
+                    if (!val)
+                        isEmpty = true;
+                    else if (acceptedTypes && !acceptedTypes.includes("string"))
+                        notAccepted = true;
+                }
+                else if (Array.isArray(val)) {
+                    valType = "list";
+                    // Make sure list items are strings
+                    val = val.filter((x, idx) => {
+                        if (typeof x !== "string") {
+                            huatu.resolvingErrors.push({ title: `${moduleName} '${name}' has some invalid definition in the list (${idx + 1}-th item), please check!` });
+                            return false;
+                        }
+                        else {
+                            return x.trim();
+                        }
+                    });
+                    if (val.length < 1)
+                        isEmpty = true;
+                    else if (acceptedTypes && !acceptedTypes.includes("list"))
+                        notAccepted = true;
+                }
+                else {
+                    valType = "object";
+                    if (Object.keys(val).length < 1) {
+                        isEmpty = true;
+                    }
+                    else if (acceptedTypes && !acceptedTypes.includes("object"))
+                        notAccepted = true;
+                }
+                if (isEmpty) {
+                    huatu.resolvingErrors.push({
+                        title: `${moduleName} '${name}' has no definition (it is empty)!`
+                    });
+                    continue;
+                }
+                if (notAccepted) {
+                    huatu.resolvingErrors.push({
+                        title: `${moduleName} [${name}] cannot be defined as "${valType}"!`,
+                    });
+                    continue;
+                }
+                // Call the function and evaluate results
+                const errMsg = resolveCall.call(huatu, name, val);
+                if (errMsg.length > 1) {
+                    huatu.resolvingErrors.push({
+                        title: `${moduleName} [${name}] resolving failed`,
+                        msgs: [...errMsg]
+                    });
+                }
+                else if (errMsg.length === 1) {
+                    huatu.resolvingErrors.push({
+                        title: `${moduleName} [${name}] resolving failed: ${errMsg[0]}`,
+                    });
+                }
+            }
+        }
+    };
+    // Resolve Var, this is the first step;
+    resolveNamedFields("vars", "Var", huatu.resolveVar, ["string"]);
+    /** The first round to resolve points, shapes, cpoints, xpoints and series */
+    resolveNamedFields("points", "Point", huatu.resolvePoint, ["string"]);
+    resolveNamedFields("shapes", "Shape", huatu.resolveShape, ["string"]);
+    resolveNamedFields("cpoints", "Calculated Point", huatu.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints", "Intersection Point", huatu.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries", "Point Series", huatu.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries", "Shape Series", huatu.resolveShapeSeries, ["string"]);
+    /**
+     * Here add extra 3 round of resolving Shapes/CPoints/Xpoints, This is to make it possible
+     * that new shapes created based on the points calculated by intersection or from model.
+     */
+    // Resolve Shapes, the second Round
+    resolveNamedFields("points2", "Point", huatu.resolvePoint, ["string"]);
+    resolveNamedFields("shapes2", "Shape", huatu.resolveShape, ["string"]);
+    resolveNamedFields("cpoints2", "Calculated Point", huatu.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints2", "Intersection Point", huatu.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries2", "Point Series", huatu.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries2", "Shape Series", huatu.resolveShapeSeries, ["string"]);
+    // Resolve Shapes, the third Round
+    resolveNamedFields("points3", "Point", huatu.resolvePoint, ["string"]);
+    resolveNamedFields("shapes3", "Shape", huatu.resolveShape, ["string"]);
+    resolveNamedFields("cpoints3", "Calculated Point", huatu.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints3", "Intersection Point", huatu.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries3", "Point Series", huatu.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries3", "Shape Series", huatu.resolveShapeSeries, ["string"]);
+    // Resolve Shapes, the fourth Round
+    resolveNamedFields("points4", "Point", huatu.resolvePoint, ["string"]);
+    resolveNamedFields("shapes4", "Shape", huatu.resolveShape, ["string"]);
+    resolveNamedFields("cpoints4", "Calculated Point", huatu.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints4", "Intersection Point", huatu.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries4", "Point Series", huatu.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries4", "Shape Series", huatu.resolveShapeSeries, ["string"]);
+    /** =========   Repeating Rounds ended =========  */
+    // Resolve Components
+    resolveNamedFields("components", "Component Definitions", huatu.resolveComponentDef, ["string", "object"]);
+    // Resolve Component Placement
+    resolveNamedFields("placements", "Component Placements", huatu.resolveComponentPlacement, ["string", "object"]);
+    // Resolve paths
+    resolveNamedFields("paths", "Path", huatu.resolvePath, ["string", 'list']);
+    // Resolve marker
+    resolveNamedFields("markers", "Marker", huatu.resolveMarker, ["string", "object"]);
+    // Resolve Pattern
+    resolveNamedFields("patterns", "Pattern", huatu.resolvePattern, ["string", "object"]);
+    // Resolve Clips
+    resolveNamedFields("clips", "Clip-Path", huatu.resolveClip, ["string", "list"]);
+    // Resolve styles
+    resolveNamedFields("styles", "Style", huatu.resolveStyle, ["string", "object"]);
+    // Resolve Label Styles
+    resolveNamedFields("labelStyles", "Label Style", huatu.resolveLabelStyle, ["string", "object"]);
+    // Resolve symbols
+    resolveNamedFields("symbols", "Symbol", huatu.resolveSymbol, ["string", "list"]);
+    // Resolve blocks
+    resolveNamedFields("blocks", "Block", huatu.resolveBlock, ["string", "list"]);
+    // Resolve arrays
+    resolveNamedFields("arrays", "Array", huatu.resolveArray, ["string", "object"]);
+    // Resolve Layers
+    resolveNamedFields("layers", "Layer", huatu.resolveLayer, ["string", "list"]);
+    // Resolve ViewBox
+    let vbDef = yml.viewBox || yml.viewArea || yml.viewBetween;
+    if (vbDef) {
+        let vb = huatu.resolveViewBoxFromDef(vbDef);
+        if (typeof vb === "string")
+            huatu.resolvingErrors.push({
+                title: `ViewBox Resolving Failed: ${vb}`
+            });
+        else if (vb)
+            huatu.viewBox = vb;
+        else {
+            huatu.warnings.push(`'${vbDef}' cannot resolve to a valid View Box!`);
+        }
+    }
+    // Resolve Jobs, Including the global draw
+    if (yml.jobs && yml.jobs["draw"]) {
+        huatu.resolvingErrors.push({
+            title: `You cannot define a job named as 'draw', please place the 'draw' job at root!`
+        });
+        delete yml.jobs["draw"]; // Delete it
+    }
+    if (yml.draw) {
+        if (yml.jobs)
+            yml.jobs["draw"] = yml.draw;
+        else
+            yml.jobs = { draw: yml.draw };
+    }
+    resolveNamedFields("jobs", "Job", huatu.resolveJob, ["string", "list", "object"], ["draw"]);
+    huatu.draw = huatu.jobs.find(j => j.name === "draw");
+    // Return after resolving
+    return huatu;
+}
+export async function resolveYmlModel(ymlObj) {
+    if (!ymlObj)
+        return new WtHuatu();
+    // Prepare Components if any
+    await HuatuComponentCache.prepareComponents(ymlObj);
+    return resolveYmlModelSync(ymlObj);
+}
+export function resolveYmlModelOfComponent(ymlObj) {
+    const comp = new WtHuatu();
+    if (!ymlObj)
+        return comp;
+    // Copy the original object
+    const yml = HuatuYml.copyObj(ymlObj);
+    // Resolve meta data
+    if (yml.title)
+        comp.title = yml.title;
+    if (yml.desc)
+        comp.desc = yml.desc;
+    // The unified named fields resolving function
+    const resolveNamedFields = (field, moduleName, resolveCall, acceptedTypes, ignoreNames) => {
+        const fieldVal = yml[field];
+        if (typeof fieldVal === "string") {
+            comp.resolvingErrors.push({
+                title: `${moduleName} definition "${field}" is incorrect, please check!`,
+            });
+            return;
+        }
+        if (fieldVal) {
+            for (const name in fieldVal) {
+                // Check Name
+                if (!WT_REGEX.VAR_NAME.test(name)) {
+                    comp.resolvingErrors.push({
+                        title: `${moduleName} name '${name}' has incorrect format, please use only alphanumeric and underscore(_)!`
+                    });
+                    continue;
+                }
+                const lcName = name.toLowerCase();
+                if (FORBIDDEN_NAMES.includes(lcName) && (!ignoreNames || !ignoreNames.includes(lcName))) {
+                    comp.resolvingErrors.push({
+                        title: `${moduleName} name '${name}' is forbidden, please pick another one!`
+                    });
+                    continue;
+                }
+                // Check if definition empty
+                let isEmpty = false;
+                let notAccepted = false;
+                let val = fieldVal[name];
+                let valType = "string";
+                if (!val) {
+                    isEmpty = true;
+                }
+                else if (typeof val === "string") {
+                    valType = "string";
+                    // Trim spaces
+                    val = val.trim();
+                    if (!val)
+                        isEmpty = true;
+                    else if (acceptedTypes && !acceptedTypes.includes("string"))
+                        notAccepted = true;
+                }
+                else if (Array.isArray(val)) {
+                    valType = "list";
+                    // Make sure list items are strings
+                    val = val.filter((x, idx) => {
+                        if (typeof x !== "string") {
+                            comp.resolvingErrors.push({ title: `${moduleName} '${name}' has some invalid definition in the list (${idx + 1}-th item), please check!` });
+                            return false;
+                        }
+                        else {
+                            return x.trim();
+                        }
+                    });
+                    if (val.length < 1)
+                        isEmpty = true;
+                    else if (acceptedTypes && !acceptedTypes.includes("list"))
+                        notAccepted = true;
+                }
+                else {
+                    valType = "object";
+                    if (Object.keys(val).length < 1) {
+                        isEmpty = true;
+                    }
+                    else if (acceptedTypes && !acceptedTypes.includes("object"))
+                        notAccepted = true;
+                }
+                if (isEmpty) {
+                    comp.resolvingErrors.push({
+                        title: `${moduleName} '${name}' has no definition (it is empty)!`
+                    });
+                    continue;
+                }
+                if (notAccepted) {
+                    comp.resolvingErrors.push({
+                        title: `${moduleName} [${name}] cannot be defined as "${valType}"!`,
+                    });
+                    continue;
+                }
+                // Call the function and evaluate results
+                const errMsg = resolveCall.call(comp, name, val);
+                if (errMsg.length > 1) {
+                    comp.resolvingErrors.push({
+                        title: `${moduleName} [${name}] resolving failed`,
+                        msgs: [...errMsg]
+                    });
+                }
+                else if (errMsg.length === 1) {
+                    comp.resolvingErrors.push({
+                        title: `${moduleName} [${name}] resolving failed: ${errMsg[0]}`,
+                    });
+                }
+            }
+        }
+    };
+    // Resolve Var, this is the first step;
+    resolveNamedFields("vars", "Var", comp.resolveVar, ["string"]);
+    /** The first round to resolve points, shapes, cpoints, xpoints and series */
+    resolveNamedFields("points", "Point", comp.resolvePoint, ["string"]);
+    resolveNamedFields("shapes", "Shape", comp.resolveShape, ["string"]);
+    resolveNamedFields("cpoints", "Calculated Point", comp.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints", "Intersection Point", comp.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries", "Point Series", comp.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries", "Shape Series", comp.resolveShapeSeries, ["string"]);
+    /**
+     * Here add extra 3 round of resolving Shapes/CPoints/Xpoints, This is to make it possible
+     * that new shapes created based on the points calculated by intersection or from model.
+     */
+    // Resolve Shapes, the second Round
+    resolveNamedFields("points2", "Point", comp.resolvePoint, ["string"]);
+    resolveNamedFields("shapes2", "Shape", comp.resolveShape, ["string"]);
+    resolveNamedFields("cpoints2", "Calculated Point", comp.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints2", "Intersection Point", comp.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries2", "Point Series", comp.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries2", "Shape Series", comp.resolveShapeSeries, ["string"]);
+    // Resolve Shapes, the third Round
+    resolveNamedFields("points3", "Point", comp.resolvePoint, ["string"]);
+    resolveNamedFields("shapes3", "Shape", comp.resolveShape, ["string"]);
+    resolveNamedFields("cpoints3", "Calculated Point", comp.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints3", "Intersection Point", comp.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries3", "Point Series", comp.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries3", "Shape Series", comp.resolveShapeSeries, ["string"]);
+    // Resolve Shapes, the fourth Round
+    resolveNamedFields("points4", "Point", comp.resolvePoint, ["string"]);
+    resolveNamedFields("shapes4", "Shape", comp.resolveShape, ["string"]);
+    resolveNamedFields("cpoints4", "Calculated Point", comp.resolveCPoint, ["string"]);
+    resolveNamedFields("xpoints4", "Intersection Point", comp.resolveXPoint, ["string"]);
+    resolveNamedFields("pointSeries4", "Point Series", comp.resolvePointSeries, ["string"]);
+    resolveNamedFields("shapeSeries4", "Shape Series", comp.resolveShapeSeries, ["string"]);
+    /** =========   Repeating Rounds ended =========  */
+    // Resolve paths
+    resolveNamedFields("paths", "Path", comp.resolvePath, ["string", 'list']);
+    // Resolve marker
+    resolveNamedFields("markers", "Marker", comp.resolveMarker, ["string", "object"]);
+    // Resolve Pattern
+    resolveNamedFields("patterns", "Pattern", comp.resolvePattern, ["string", "object"]);
+    // Resolve styles
+    resolveNamedFields("styles", "Style", comp.resolveStyle, ["string", "object"]);
+    // Resolve Label Styles
+    resolveNamedFields("labelStyles", "Label Style", comp.resolveLabelStyle, ["string", "object"]);
+    // Resolve ViewBox
+    let vbDef = yml.viewBox || yml.viewArea || yml.viewBetween;
+    if (vbDef) {
+        let vb = comp.resolveViewBoxFromDef(vbDef);
+        if (typeof vb === "string")
+            comp.resolvingErrors.push({
+                title: `ViewBox Resolving Failed: ${vb}`
+            });
+        else if (vb)
+            comp.viewBox = vb;
+        else {
+            comp.warnings.push(`'${vbDef}' cannot resolve to a valid View Box!`);
+        }
+    }
+    if (yml.draw) {
+        if (yml.jobs)
+            yml.jobs["draw"] = yml.draw;
+        else
+            yml.jobs = { draw: yml.draw };
+    }
+    resolveNamedFields("jobs", "Job", comp.resolveJob, ["string", "list", "object"], ["draw"]);
+    comp.draw = comp.jobs.find(j => j.name === "draw");
+    // Return after resolving
+    return comp;
+}