@idraw/util 0.3.0 → 0.4.0-alpha.1

package/dist/index.global.js

@@ -54,13 +54,189 @@ var iDrawUtil = function(exports) {
     return "#" + color2.toString(16);
   }
   function isColorStr(color2) {
-    return typeof color2 === "string" && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2);
+    return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
+  }
+  const colorNameMap = {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyan: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    "indianred ": "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgrey: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370d8",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#d87093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    steelblue: "#4682b4",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    tomato: "#ff6347",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32"
+  };
+  function colorNameToHex(name) {
+    const n = name.toLowerCase();
+    const hex = colorNameMap[n];
+    if (typeof hex === "string") {
+      return hex;
+    }
+    return null;
   }
   function createUUID() {
-    function str4() {
+    function _createStr() {
       return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
     }
-    return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`;
+    return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
+  }
+  function limitHexStr(str) {
+    let count = 0;
+    for (let i = 0; i < str.length; i++) {
+      count += str.charCodeAt(i) * str.charCodeAt(i) * i * i;
+    }
+    return count.toString(16).substring(0, 4);
+  }
+  function createAssetId(assetStr) {
+    const len = assetStr.length;
+    const mid = Math.floor(len / 2);
+    const start4 = assetStr.substring(0, 4).padEnd(4, "0");
+    const end4 = assetStr.substring(0, 4).padEnd(4, "0");
+    const str1 = limitHexStr(len.toString(16).padEnd(4, start4));
+    const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padEnd(4, start4)).padEnd(4, "f");
+    const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padEnd(4, start4)).padEnd(4, "f");
+    const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padEnd(4, start4)).padEnd(4, "f");
+    const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padEnd(4, end4)).padEnd(4, "f");
+    const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padEnd(4, end4)).padEnd(4, "f");
+    const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padEnd(4, end4)).padEnd(4, "f");
+    const str8 = limitHexStr(end4.padEnd(4, start4).padEnd(4, end4));
+    return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
+  }
+  function isAssetId(id) {
+    return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
   }
   function deepClone(target) {
     function _clone(t) {
@@ -79,20 +255,78 @@ var iDrawUtil = function(exports) {
         keys.forEach((key) => {
           obj[key] = _clone(t[key]);
         });
+        const symbolKeys = Object.getOwnPropertySymbols(t);
+        symbolKeys.forEach((key) => {
+          obj[key] = _clone(t[key]);
+        });
         return obj;
       }
     }
     return _clone(target);
   }
-  function is$1(data) {
-    return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
+  function is$1(target) {
+    return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
+  }
+  function sortDataAsserts(data, opts) {
+    const assets = data.assets || {};
+    let sortedData = data;
+    if ((opts == null ? void 0 : opts.clone) === true) {
+      sortedData = deepClone(data);
+    }
+    const _scanElements = (elems) => {
+      elems.forEach((elem) => {
+        if (elem.type === "image" && elem.detail.src) {
+          const src = elem.detail.src;
+          const assetUUID = createAssetId(src);
+          if (!assets[assetUUID]) {
+            assets[assetUUID] = {
+              type: "image",
+              value: src
+            };
+          }
+          elem.detail.src = assetUUID;
+        } else if (elem.type === "svg") {
+          const svg2 = elem.detail.svg;
+          const assetUUID = createAssetId(svg2);
+          if (!assets[assetUUID]) {
+            assets[assetUUID] = {
+              type: "svg",
+              value: svg2
+            };
+          }
+          elem.detail.svg = assetUUID;
+        } else if (elem.type === "html") {
+          const html2 = elem.detail.html;
+          const assetUUID = createAssetId(html2);
+          if (!assets[assetUUID]) {
+            assets[assetUUID] = {
+              type: "svg",
+              value: html2
+            };
+          }
+          elem.detail.html = assetUUID;
+        } else if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+          const groupAssets = elem.detail.assets || {};
+          Object.keys(groupAssets).forEach((assetId) => {
+            if (!assets[assetId]) {
+              assets[assetId] = groupAssets[assetId];
+            }
+          });
+          delete elem.detail.assets;
+          _scanElements(elem.detail.children);
+        }
+      });
+    };
+    _scanElements(sortedData.elements);
+    sortedData.assets = assets;
+    return sortedData;
   }
   function parsePrototype(data) {
     const typeStr = Object.prototype.toString.call(data) || "";
-    const result = typeStr.replace(/(\[object|\])/ig, "").trim();
+    const result = typeStr.replace(/(\[object|\])/gi, "").trim();
     return result;
   }
-  const istype = {
+  const istype$1 = {
     type(data, lowerCase) {
       const result = parsePrototype(data);
       return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -135,7 +369,10 @@ var iDrawUtil = function(exports) {
     const { width, height } = opts;
     return new Promise((resolve, reject) => {
       const _svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${width || ""}" height = "${height || ""}">
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width="${width || ""}" 
+      height = "${height || ""}">
       <foreignObject width="100%" height="100%">
         <div xmlns = "http://www.w3.org/1999/xhtml">
           ${html2}
@@ -172,10 +409,10 @@ var iDrawUtil = function(exports) {
       };
     });
   }
-  const { Image } = window;
+  const { Image: Image$1 } = window;
   function loadImage(src) {
     return new Promise((resolve, reject) => {
-      const img = new Image();
+      const img = new Image$1();
       img.crossOrigin = "anonymous";
       img.onload = function() {
         resolve(img);
@@ -191,7 +428,7 @@ var iDrawUtil = function(exports) {
     return image;
   }
   function filterAmpersand(str) {
-    return str.replace(/\&/ig, "&amp;");
+    return str.replace(/\&/gi, "&amp;");
   }
   async function loadHTML(html2, opts) {
     html2 = filterAmpersand(html2);
@@ -199,262 +436,6 @@ var iDrawUtil = function(exports) {
     const image = await loadImage(dataURL);
     return image;
   }
-  class Context {
-    // private _scale: number;
-    // private _scrollX: number;
-    // private _scrollY: number;
-    constructor(ctx, opts) {
-      this._opts = opts;
-      this._ctx = ctx;
-      this._transform = {
-        scale: 1,
-        scrollX: 0,
-        scrollY: 0
-      };
-    }
-    getContext() {
-      return this._ctx;
-    }
-    resetSize(opts) {
-      this._opts = { ...this._opts, ...opts };
-    }
-    calcDeviceNum(num) {
-      return num * this._opts.devicePixelRatio;
-    }
-    calcScreenNum(num) {
-      return num / this._opts.devicePixelRatio;
-    }
-    getSize() {
-      return {
-        width: this._opts.width,
-        height: this._opts.height,
-        contextWidth: this._opts.contextWidth,
-        contextHeight: this._opts.contextHeight,
-        devicePixelRatio: this._opts.devicePixelRatio
-      };
-    }
-    setTransform(config) {
-      this._transform = { ...this._transform, ...config };
-    }
-    getTransform() {
-      return {
-        scale: this._transform.scale,
-        scrollX: this._transform.scrollX,
-        scrollY: this._transform.scrollY
-      };
-    }
-    setFillStyle(color2) {
-      this._ctx.fillStyle = color2;
-    }
-    fill(fillRule) {
-      return this._ctx.fill(fillRule || "nonzero");
-    }
-    arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return this._ctx.arc(
-        this._doSize(x2),
-        this._doSize(y2),
-        this._doSize(radius),
-        startAngle,
-        endAngle,
-        anticlockwise
-      );
-    }
-    rect(x2, y2, w2, h2) {
-      return this._ctx.rect(
-        this._doSize(x2),
-        this._doSize(y2),
-        this._doSize(w2),
-        this._doSize(h2)
-      );
-    }
-    fillRect(x2, y2, w2, h2) {
-      return this._ctx.fillRect(
-        this._doSize(x2),
-        this._doSize(y2),
-        this._doSize(w2),
-        this._doSize(h2)
-      );
-    }
-    clearRect(x2, y2, w2, h2) {
-      return this._ctx.clearRect(
-        this._doSize(x2),
-        this._doSize(y2),
-        this._doSize(w2),
-        this._doSize(h2)
-      );
-    }
-    beginPath() {
-      return this._ctx.beginPath();
-    }
-    closePath() {
-      return this._ctx.closePath();
-    }
-    lineTo(x2, y2) {
-      return this._ctx.lineTo(this._doSize(x2), this._doSize(y2));
-    }
-    moveTo(x2, y2) {
-      return this._ctx.moveTo(this._doSize(x2), this._doSize(y2));
-    }
-    arcTo(x1, y1, x2, y2, radius) {
-      return this._ctx.arcTo(
-        this._doSize(x1),
-        this._doSize(y1),
-        this._doSize(x2),
-        this._doSize(y2),
-        this._doSize(radius)
-      );
-    }
-    setLineWidth(w2) {
-      return this._ctx.lineWidth = this._doSize(w2);
-    }
-    setLineDash(nums) {
-      return this._ctx.setLineDash(nums.map((n) => this._doSize(n)));
-    }
-    isPointInPath(x2, y2) {
-      return this._ctx.isPointInPath(this._doX(x2), this._doY(y2));
-    }
-    isPointInPathWithoutScroll(x2, y2) {
-      return this._ctx.isPointInPath(this._doSize(x2), this._doSize(y2));
-    }
-    setStrokeStyle(color2) {
-      this._ctx.strokeStyle = color2;
-    }
-    stroke() {
-      return this._ctx.stroke();
-    }
-    translate(x2, y2) {
-      return this._ctx.translate(this._doSize(x2), this._doSize(y2));
-    }
-    rotate(angle2) {
-      return this._ctx.rotate(angle2);
-    }
-    drawImage(...args) {
-      const image = args[0];
-      const sx = args[1];
-      const sy = args[2];
-      const sw = args[3];
-      const sh = args[4];
-      const dx = args[args.length - 4];
-      const dy = args[args.length - 3];
-      const dw = args[args.length - 2];
-      const dh = args[args.length - 1];
-      if (args.length === 9) {
-        return this._ctx.drawImage(
-          image,
-          this._doSize(sx),
-          this._doSize(sy),
-          this._doSize(sw),
-          this._doSize(sh),
-          this._doSize(dx),
-          this._doSize(dy),
-          this._doSize(dw),
-          this._doSize(dh)
-        );
-      } else {
-        return this._ctx.drawImage(
-          image,
-          this._doSize(dx),
-          this._doSize(dy),
-          this._doSize(dw),
-          this._doSize(dh)
-        );
-      }
-    }
-    createPattern(image, repetition) {
-      return this._ctx.createPattern(image, repetition);
-    }
-    measureText(text2) {
-      return this._ctx.measureText(text2);
-    }
-    setTextAlign(align) {
-      this._ctx.textAlign = align;
-    }
-    fillText(text2, x2, y2, maxWidth) {
-      if (maxWidth !== void 0) {
-        return this._ctx.fillText(
-          text2,
-          this._doSize(x2),
-          this._doSize(y2),
-          this._doSize(maxWidth)
-        );
-      } else {
-        return this._ctx.fillText(text2, this._doSize(x2), this._doSize(y2));
-      }
-    }
-    strokeText(text2, x2, y2, maxWidth) {
-      if (maxWidth !== void 0) {
-        return this._ctx.strokeText(
-          text2,
-          this._doSize(x2),
-          this._doSize(y2),
-          this._doSize(maxWidth)
-        );
-      } else {
-        return this._ctx.strokeText(text2, this._doSize(x2), this._doSize(y2));
-      }
-    }
-    setFont(opts) {
-      const strList = [];
-      if (opts.fontWeight === "bold") {
-        strList.push(`${opts.fontWeight}`);
-      }
-      strList.push(`${this._doSize(opts.fontSize || 12)}px`);
-      strList.push(`${opts.fontFamily || "sans-serif"}`);
-      this._ctx.font = `${strList.join(" ")}`;
-    }
-    setTextBaseline(baseline) {
-      this._ctx.textBaseline = baseline;
-    }
-    setGlobalAlpha(alpha) {
-      this._ctx.globalAlpha = alpha;
-    }
-    save() {
-      this._ctx.save();
-    }
-    restore() {
-      this._ctx.restore();
-    }
-    scale(ratioX, ratioY) {
-      this._ctx.scale(ratioX, ratioY);
-    }
-    setShadowColor(color2) {
-      this._ctx.shadowColor = color2;
-    }
-    setShadowOffsetX(offsetX) {
-      this._ctx.shadowOffsetX = this._doSize(offsetX);
-    }
-    setShadowOffsetY(offsetY) {
-      this._ctx.shadowOffsetY = this._doSize(offsetY);
-    }
-    setShadowBlur(blur) {
-      this._ctx.shadowBlur = this._doSize(blur);
-    }
-    ellipse(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      this._ctx.ellipse(
-        this._doSize(x2),
-        this._doSize(y2),
-        this._doSize(radiusX),
-        this._doSize(radiusY),
-        rotation,
-        startAngle,
-        endAngle,
-        counterclockwise
-      );
-    }
-    _doSize(num) {
-      return this._opts.devicePixelRatio * num;
-    }
-    _doX(x2) {
-      const { scale, scrollX } = this._transform;
-      const _x = (x2 - scrollX) / scale;
-      return this._doSize(_x);
-    }
-    _doY(y2) {
-      const { scale, scrollY } = this._transform;
-      const _y = (y2 - scrollY) / scale;
-      return this._doSize(_y);
-    }
-  }
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -527,6 +508,9 @@ var iDrawUtil = function(exports) {
   function fontWeight(value) {
     return ["bold"].includes(value);
   }
+  function numberStr(value) {
+    return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
+  }
   const is = {
     x,
     y,
@@ -534,6 +518,7 @@ var iDrawUtil = function(exports) {
     h,
     angle,
     number,
+    numberStr,
     borderWidth,
     borderRadius,
     color,
@@ -560,76 +545,65 @@ var iDrawUtil = function(exports) {
     }
     return true;
   }
-  function box(desc = {}) {
-    const { borderColor, borderRadius: borderRadius2, borderWidth: borderWidth2 } = desc;
-    if (desc.hasOwnProperty("borderColor") && !is.color(borderColor)) {
+  function box(detail = {}) {
+    const { borderColor, borderRadius: borderRadius2, borderWidth: borderWidth2 } = detail;
+    if (detail.hasOwnProperty("borderColor") && !is.color(borderColor)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderRadius") && !is.number(borderRadius2)) {
+    if (detail.hasOwnProperty("borderRadius") && !is.number(borderRadius2)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderWidth") && !is.number(borderWidth2)) {
+    if (detail.hasOwnProperty("borderWidth") && !is.number(borderWidth2)) {
       return false;
     }
     return true;
   }
-  function rectDesc(desc) {
-    const { bgColor } = desc;
-    if (desc.hasOwnProperty("bgColor") && !is.color(bgColor)) {
+  function rectDesc(detail) {
+    const { background } = detail;
+    if (detail.hasOwnProperty("background") && !is.color(background)) {
       return false;
     }
-    if (!box(desc)) {
+    if (!box(detail)) {
       return false;
     }
     return true;
   }
-  function circleDesc(desc) {
-    const { bgColor, borderColor, borderWidth: borderWidth2 } = desc;
-    if (desc.hasOwnProperty("bgColor") && !is.color(bgColor)) {
+  function circleDesc(detail) {
+    const { background, borderColor, borderWidth: borderWidth2 } = detail;
+    if (detail.hasOwnProperty("background") && !is.color(background)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderColor") && !is.color(borderColor)) {
+    if (detail.hasOwnProperty("borderColor") && !is.color(borderColor)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderWidth") && !is.number(borderWidth2)) {
+    if (detail.hasOwnProperty("borderWidth") && !is.number(borderWidth2)) {
       return false;
     }
     return true;
   }
-  function imageDesc(desc) {
-    const { src } = desc;
+  function imageDesc(detail) {
+    const { src } = detail;
     if (!is.imageSrc(src)) {
       return false;
     }
     return true;
   }
-  function svgDesc(desc) {
-    const { svg: svg2 } = desc;
+  function svgDesc(detail) {
+    const { svg: svg2 } = detail;
     if (!is.svg(svg2)) {
       return false;
     }
     return true;
   }
-  function htmlDesc(desc) {
-    const { html: html2 } = desc;
+  function htmlDesc(detail) {
+    const { html: html2 } = detail;
     if (!is.html(html2)) {
       return false;
     }
     return true;
   }
-  function textDesc(desc) {
-    const {
-      text: text2,
-      color: color2,
-      fontSize: fontSize2,
-      lineHeight: lineHeight2,
-      fontFamily: fontFamily2,
-      textAlign: textAlign2,
-      fontWeight: fontWeight2,
-      bgColor,
-      strokeWidth: strokeWidth2,
-      strokeColor
-    } = desc;
+  function textDesc(detail) {
+    const { text: text2, color: color2, fontSize: fontSize2, lineHeight: lineHeight2, fontFamily: fontFamily2, textAlign: textAlign2, fontWeight: fontWeight2, background, strokeWidth: strokeWidth2, strokeColor } = detail;
     if (!is.text(text2)) {
       return false;
     }
@@ -639,28 +613,28 @@ var iDrawUtil = function(exports) {
     if (!is.fontSize(fontSize2)) {
       return false;
     }
-    if (desc.hasOwnProperty("bgColor") && !is.color(bgColor)) {
+    if (detail.hasOwnProperty("background") && !is.color(background)) {
       return false;
     }
-    if (desc.hasOwnProperty("fontWeight") && !is.fontWeight(fontWeight2)) {
+    if (detail.hasOwnProperty("fontWeight") && !is.fontWeight(fontWeight2)) {
       return false;
     }
-    if (desc.hasOwnProperty("lineHeight") && !is.lineHeight(lineHeight2)) {
+    if (detail.hasOwnProperty("lineHeight") && !is.lineHeight(lineHeight2)) {
       return false;
     }
-    if (desc.hasOwnProperty("fontFamily") && !is.fontFamily(fontFamily2)) {
+    if (detail.hasOwnProperty("fontFamily") && !is.fontFamily(fontFamily2)) {
       return false;
     }
-    if (desc.hasOwnProperty("textAlign") && !is.textAlign(textAlign2)) {
+    if (detail.hasOwnProperty("textAlign") && !is.textAlign(textAlign2)) {
       return false;
     }
-    if (desc.hasOwnProperty("strokeWidth") && !is.strokeWidth(strokeWidth2)) {
+    if (detail.hasOwnProperty("strokeWidth") && !is.strokeWidth(strokeWidth2)) {
       return false;
     }
-    if (desc.hasOwnProperty("strokeColor") && !is.color(strokeColor)) {
+    if (detail.hasOwnProperty("strokeColor") && !is.color(strokeColor)) {
       return false;
     }
-    if (!box(desc)) {
+    if (!box(detail)) {
       return false;
     }
     return true;
@@ -674,41 +648,1443 @@ var iDrawUtil = function(exports) {
     svgDesc,
     htmlDesc
   };
-  const index = {
-    is,
-    check,
-    delay,
-    compose,
-    throttle,
-    loadImage,
-    loadSVG,
-    loadHTML,
-    downloadImageFromCanvas,
-    toColorHexStr,
-    toColorHexNum,
-    isColorStr,
-    createUUID,
-    istype,
-    deepClone,
-    Context
-  };
-  exports.Context = Context;
+  class Context2D {
+    // private _width: number = 0;
+    // private _height: number = 0;
+    constructor(ctx, opts) {
+      this._devicePixelRatio = 1;
+      const { devicePixelRatio = 1 } = opts;
+      this._ctx = ctx;
+      this._devicePixelRatio = devicePixelRatio;
+    }
+    $undoPixelRatio(num) {
+      return num / this._devicePixelRatio;
+    }
+    $doPixelRatio(num) {
+      return this._devicePixelRatio * num;
+    }
+    $getContext() {
+      return this._ctx;
+    }
+    $setFont(opts) {
+      const strList = [];
+      if (opts.fontWeight) {
+        strList.push(`${opts.fontWeight}`);
+      }
+      strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
+      strList.push(`${opts.fontFamily || "sans-serif"}`);
+      this._ctx.font = `${strList.join(" ")}`;
+    }
+    $resize(opts) {
+      const { width, height, devicePixelRatio } = opts;
+      const { canvas } = this._ctx;
+      canvas.width = width * devicePixelRatio;
+      canvas.height = height * devicePixelRatio;
+      this._devicePixelRatio = devicePixelRatio;
+    }
+    get canvas() {
+      return this._ctx.canvas;
+    }
+    get fillStyle() {
+      return this._ctx.fillStyle;
+    }
+    set fillStyle(value) {
+      this._ctx.fillStyle = value;
+    }
+    get strokeStyle() {
+      return this._ctx.strokeStyle;
+    }
+    set strokeStyle(color2) {
+      this._ctx.strokeStyle = color2;
+    }
+    get lineWidth() {
+      return this.$undoPixelRatio(this._ctx.lineWidth);
+    }
+    set lineWidth(w2) {
+      this._ctx.lineWidth = this.$doPixelRatio(w2);
+    }
+    get textAlign() {
+      return this._ctx.textAlign;
+    }
+    set textAlign(align) {
+      this._ctx.textAlign = align;
+    }
+    get textBaseline() {
+      return this._ctx.textBaseline;
+    }
+    set textBaseline(baseline) {
+      this._ctx.textBaseline = baseline;
+    }
+    get globalAlpha() {
+      return this._ctx.globalAlpha;
+    }
+    set globalAlpha(alpha) {
+      this._ctx.globalAlpha = alpha;
+    }
+    get shadowColor() {
+      return this._ctx.shadowColor;
+    }
+    set shadowColor(color2) {
+      this._ctx.shadowColor = color2;
+    }
+    get shadowOffsetX() {
+      return this.$undoPixelRatio(this._ctx.shadowOffsetX);
+    }
+    set shadowOffsetX(offsetX) {
+      this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
+    }
+    get shadowOffsetY() {
+      return this.$undoPixelRatio(this._ctx.shadowOffsetY);
+    }
+    set shadowOffsetY(offsetY) {
+      this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
+    }
+    get shadowBlur() {
+      return this.$undoPixelRatio(this._ctx.shadowBlur);
+    }
+    set shadowBlur(blur) {
+      this._ctx.shadowBlur = this.$doPixelRatio(blur);
+    }
+    get lineCap() {
+      return this._ctx.lineCap;
+    }
+    set lineCap(lineCap) {
+      this._ctx.lineCap = lineCap;
+    }
+    get globalCompositeOperation() {
+      return this._ctx.globalCompositeOperation;
+    }
+    set globalCompositeOperation(operations) {
+      this._ctx.globalCompositeOperation = operations;
+    }
+    fill(...args) {
+      return this._ctx.fill(...args);
+    }
+    arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
+      return this._ctx.arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+    }
+    rect(x2, y2, w2, h2) {
+      return this._ctx.rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+    }
+    fillRect(x2, y2, w2, h2) {
+      return this._ctx.fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+    }
+    clearRect(x2, y2, w2, h2) {
+      return this._ctx.clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+    }
+    beginPath() {
+      return this._ctx.beginPath();
+    }
+    closePath() {
+      return this._ctx.closePath();
+    }
+    lineTo(x2, y2) {
+      return this._ctx.lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+    }
+    moveTo(x2, y2) {
+      return this._ctx.moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+    }
+    arcTo(x1, y1, x2, y2, radius) {
+      return this._ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+    }
+    getLineDash() {
+      return this._ctx.getLineDash();
+    }
+    setLineDash(nums) {
+      return this._ctx.setLineDash(nums.map((n) => this.$doPixelRatio(n)));
+    }
+    stroke(path) {
+      return path ? this._ctx.stroke(path) : this._ctx.stroke();
+    }
+    translate(x2, y2) {
+      return this._ctx.translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+    }
+    rotate(angle2) {
+      return this._ctx.rotate(angle2);
+    }
+    drawImage(...args) {
+      const image = args[0];
+      const sx = args[1];
+      const sy = args[2];
+      const sw = args[3];
+      const sh = args[4];
+      const dx = args[args.length - 4];
+      const dy = args[args.length - 3];
+      const dw = args[args.length - 2];
+      const dh = args[args.length - 1];
+      if (args.length === 9) {
+        return this._ctx.drawImage(
+          image,
+          this.$doPixelRatio(sx),
+          this.$doPixelRatio(sy),
+          this.$doPixelRatio(sw),
+          this.$doPixelRatio(sh),
+          this.$doPixelRatio(dx),
+          this.$doPixelRatio(dy),
+          this.$doPixelRatio(dw),
+          this.$doPixelRatio(dh)
+        );
+      } else {
+        return this._ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+      }
+    }
+    createPattern(image, repetition) {
+      return this._ctx.createPattern(image, repetition);
+    }
+    measureText(text2) {
+      const textMetrics = this._ctx.measureText(text2);
+      return textMetrics;
+    }
+    fillText(text2, x2, y2, maxWidth) {
+      if (maxWidth !== void 0) {
+        return this._ctx.fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+      } else {
+        return this._ctx.fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      }
+    }
+    strokeText(text2, x2, y2, maxWidth) {
+      if (maxWidth !== void 0) {
+        return this._ctx.strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+      } else {
+        return this._ctx.strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      }
+    }
+    save() {
+      this._ctx.save();
+    }
+    restore() {
+      this._ctx.restore();
+    }
+    scale(ratioX, ratioY) {
+      this._ctx.scale(ratioX, ratioY);
+    }
+    circle(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+      this._ctx.ellipse(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(radiusX),
+        this.$doPixelRatio(radiusY),
+        rotation,
+        startAngle,
+        endAngle,
+        counterclockwise
+      );
+    }
+    isPointInPath(x2, y2) {
+      return this._ctx.isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+    }
+    // clip(fillRule?: CanvasFillRule): void;
+    // clip(path: Path2D, fillRule?: CanvasFillRule): void;
+    clip(...args) {
+      return this._ctx.clip(...args);
+    }
+    setTransform(a, b, c, d, e, f) {
+      return this._ctx.setTransform(a, b, c, d, e, f);
+    }
+    getTransform() {
+      return this._ctx.getTransform();
+    }
+    createLinearGradient(x0, y0, x1, y1) {
+      return this._ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+    }
+    createRadialGradient(x0, y0, r0, x1, y1, r1) {
+      return this._ctx.createRadialGradient(
+        this.$doPixelRatio(x0),
+        this.$doPixelRatio(y0),
+        this.$doPixelRatio(r0),
+        this.$doPixelRatio(x1),
+        this.$doPixelRatio(y1),
+        this.$doPixelRatio(r1)
+      );
+    }
+    createConicGradient(startAngle, x2, y2) {
+      return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+    }
+  }
+  function createContext2D(opts) {
+    const { width, height, ctx, devicePixelRatio } = opts;
+    let context = ctx;
+    if (!context) {
+      const canvas = document.createElement("canvas");
+      canvas.width = width * devicePixelRatio;
+      canvas.height = height * devicePixelRatio;
+      context = canvas.getContext("2d");
+    }
+    const context2d = new Context2D(context, opts);
+    return context2d;
+  }
+  function createOffscreenContext2D(opts) {
+    const { width, height } = opts;
+    const offCanvas = new OffscreenCanvas(width, height);
+    const offRenderCtx = offCanvas.getContext("2d");
+    const offCtx = offRenderCtx.canvas.getContext("2d");
+    return offCtx;
+  }
+  function createBoardContexts(ctx, opts) {
+    const ctxOpts = {
+      width: ctx.canvas.width,
+      height: ctx.canvas.height,
+      devicePixelRatio: (opts == null ? void 0 : opts.devicePixelRatio) || 1
+    };
+    const viewContext = createContext2D(ctxOpts);
+    const helperContext = createContext2D(ctxOpts);
+    const boardContext = createContext2D({ ctx, ...ctxOpts });
+    const content = {
+      viewContext,
+      helperContext,
+      boardContext
+    };
+    return content;
+  }
+  class EventEmitter {
+    constructor() {
+      this._listeners = /* @__PURE__ */ new Map();
+    }
+    on(eventKey, callback) {
+      if (this._listeners.has(eventKey)) {
+        const callbacks = this._listeners.get(eventKey) || [];
+        callbacks == null ? void 0 : callbacks.push(callback);
+        this._listeners.set(eventKey, callbacks);
+      } else {
+        this._listeners.set(eventKey, [callback]);
+      }
+    }
+    off(eventKey, callback) {
+      if (this._listeners.has(eventKey)) {
+        const callbacks = this._listeners.get(eventKey);
+        if (Array.isArray(callbacks)) {
+          for (let i = 0; i < (callbacks == null ? void 0 : callbacks.length); i++) {
+            if (callbacks[i] === callback) {
+              callbacks.splice(i, 1);
+              break;
+            }
+          }
+        }
+        this._listeners.set(eventKey, callbacks || []);
+      }
+    }
+    trigger(eventKey, e) {
+      const callbacks = this._listeners.get(eventKey);
+      if (Array.isArray(callbacks)) {
+        callbacks.forEach((cb) => {
+          cb(e);
+        });
+        return true;
+      } else {
+        return false;
+      }
+    }
+    has(name) {
+      if (this._listeners.has(name)) {
+        const list = this._listeners.get(name);
+        if (Array.isArray(list) && list.length > 0) {
+          return true;
+        }
+      }
+      return false;
+    }
+  }
+  function calcDistance(start, end) {
+    const distance = (start.x - end.x) * (start.x - end.x) + (start.y - end.y) * (start.y - end.y);
+    return distance === 0 ? distance : Math.sqrt(distance);
+  }
+  function calcSpeed(start, end) {
+    const distance = calcDistance(start, end);
+    const speed = distance / Math.abs(end.t - start.t);
+    return speed;
+  }
+  function equalPoint(p1, p2) {
+    return p1.x === p2.x && p1.y === p2.y && p1.t === p2.t;
+  }
+  function equalTouchPoint(p1, p2) {
+    return equalPoint(p1, p2) === true && p1.f === p2.f;
+  }
+  function isNum(num) {
+    return num >= 0 || num < 0;
+  }
+  function vaildPoint(p) {
+    return isNum(p.x) && isNum(p.y) && p.t > 0;
+  }
+  function vaildTouchPoint(p) {
+    return vaildPoint(p) === true && p.f >= 0;
+  }
+  function getCenterFromTwoPoints(p1, p2) {
+    return {
+      x: p1.x + (p2.x - p1.x) / 2,
+      y: p1.y + (p2.y - p1.y) / 2
+    };
+  }
+  class Store {
+    constructor(opts) {
+      this._backUpDefaultStorage = deepClone(opts.defaultStorage);
+      this._temp = this._createTempStorage();
+    }
+    set(name, value) {
+      this._temp[name] = value;
+    }
+    get(name) {
+      return this._temp[name];
+    }
+    getSnapshot() {
+      return deepClone(this._temp);
+    }
+    clear() {
+      this._temp = this._createTempStorage();
+    }
+    _createTempStorage() {
+      return deepClone(this._backUpDefaultStorage);
+    }
+  }
+  function getViewScaleInfoFromSnapshot(snapshot) {
+    const { activeStore } = snapshot;
+    const sacelInfo = {
+      scale: activeStore == null ? void 0 : activeStore.scale,
+      offsetTop: activeStore == null ? void 0 : activeStore.offsetTop,
+      offsetBottom: activeStore == null ? void 0 : activeStore.offsetBottom,
+      offsetLeft: activeStore == null ? void 0 : activeStore.offsetLeft,
+      offsetRight: activeStore == null ? void 0 : activeStore.offsetRight
+    };
+    return sacelInfo;
+  }
+  function getViewSizeInfoFromSnapshot(snapshot) {
+    const { activeStore } = snapshot;
+    const sacelInfo = {
+      devicePixelRatio: activeStore.devicePixelRatio,
+      width: activeStore == null ? void 0 : activeStore.width,
+      height: activeStore == null ? void 0 : activeStore.height,
+      contextWidth: activeStore == null ? void 0 : activeStore.contextWidth,
+      contextHeight: activeStore == null ? void 0 : activeStore.contextHeight
+    };
+    return sacelInfo;
+  }
+  function parseRadianToAngle(radian) {
+    return radian / Math.PI * 180;
+  }
+  function parseAngleToRadian(angle2) {
+    return angle2 / 180 * Math.PI;
+  }
+  function rotateElement(ctx, elemSize, callback) {
+    const center = calcElementCenter(elemSize);
+    const radian = parseAngleToRadian(elemSize.angle || 0);
+    if (center && (radian > 0 || radian < 0)) {
+      ctx.translate(center.x, center.y);
+      ctx.rotate(radian);
+      ctx.translate(-center.x, -center.y);
+    }
+    callback(ctx);
+    if (center && (radian > 0 || radian < 0)) {
+      ctx.translate(center.x, center.y);
+      ctx.rotate(-radian);
+      ctx.translate(-center.x, -center.y);
+    }
+  }
+  function calcElementCenter(elem) {
+    const p = {
+      x: elem.x + elem.w / 2,
+      y: elem.y + elem.h / 2
+    };
+    return p;
+  }
+  function calcElementCenterFromVertexes(ves) {
+    const startX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const startY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const endX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const endY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemSize = {
+      x: startX,
+      y: startY,
+      w: endX - startX,
+      h: endY - startY
+    };
+    return calcElementCenter(elemSize);
+  }
+  function calcLineRadian(center, p) {
+    const x2 = p.x - center.x;
+    const y2 = p.y - center.y;
+    if (x2 === 0) {
+      if (y2 < 0) {
+        return 0;
+      } else if (y2 > 0) {
+        return Math.PI;
+      }
+    } else if (y2 === 0) {
+      if (x2 < 0) {
+        return Math.PI * 3 / 2;
+      } else if (x2 > 0) {
+        return Math.PI / 2;
+      }
+    }
+    if (x2 > 0 && y2 < 0) {
+      return Math.atan(Math.abs(x2) / Math.abs(y2));
+    } else if (x2 > 0 && y2 > 0) {
+      return Math.PI - Math.atan(Math.abs(x2) / Math.abs(y2));
+    } else if (x2 < 0 && y2 > 0) {
+      return Math.PI + Math.atan(Math.abs(x2) / Math.abs(y2));
+    } else if (x2 < 0 && y2 < 0) {
+      return 2 * Math.PI - Math.atan(Math.abs(x2) / Math.abs(y2));
+    }
+    return 0;
+  }
+  function rotatePoint(center, start, radian) {
+    const startRadian = calcLineRadian(center, start);
+    const rotateRadian = radian;
+    let endRadian = startRadian + rotateRadian;
+    if (endRadian > Math.PI * 2) {
+      endRadian = endRadian - Math.PI * 2;
+    } else if (endRadian < 0 - Math.PI * 2) {
+      endRadian = endRadian + Math.PI * 2;
+    }
+    if (endRadian < 0) {
+      endRadian = endRadian + Math.PI * 2;
+    }
+    const length = calcDistance(center, start);
+    let x2 = 0;
+    let y2 = 0;
+    if (endRadian === 0) {
+      x2 = 0;
+      y2 = 0 - length;
+    } else if (endRadian > 0 && endRadian < Math.PI / 2) {
+      x2 = Math.sin(endRadian) * length;
+      y2 = 0 - Math.cos(endRadian) * length;
+    } else if (endRadian === Math.PI / 2) {
+      x2 = length;
+      y2 = 0;
+    } else if (endRadian > Math.PI / 2 && endRadian < Math.PI) {
+      x2 = Math.sin(Math.PI - endRadian) * length;
+      y2 = Math.cos(Math.PI - endRadian) * length;
+    } else if (endRadian === Math.PI) {
+      x2 = 0;
+      y2 = length;
+    } else if (endRadian > Math.PI && endRadian < 3 / 2 * Math.PI) {
+      x2 = 0 - Math.sin(endRadian - Math.PI) * length;
+      y2 = Math.cos(endRadian - Math.PI) * length;
+    } else if (endRadian === 3 / 2 * Math.PI) {
+      x2 = 0 - length;
+      y2 = 0;
+    } else if (endRadian > 3 / 2 * Math.PI && endRadian < 2 * Math.PI) {
+      x2 = 0 - Math.sin(2 * Math.PI - endRadian) * length;
+      y2 = 0 - Math.cos(2 * Math.PI - endRadian) * length;
+    } else if (endRadian === 2 * Math.PI) {
+      x2 = 0;
+      y2 = 0 - length;
+    }
+    x2 += center.x;
+    y2 += center.y;
+    return { x: x2, y: y2 };
+  }
+  function rotatePointInGroup(point, groupQueue) {
+    if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
+      let resultX = point.x;
+      let resultY = point.y;
+      groupQueue.forEach((group) => {
+        const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = group;
+        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        const temp = rotatePoint(center, { x: resultX, y: resultY }, parseAngleToRadian(angle2));
+        resultX = temp.x;
+        resultY = temp.y;
+      });
+      return {
+        x: resultX,
+        y: resultY
+      };
+    }
+    return point;
+  }
+  function getElementRotateVertexes(elemSize, center, angle2) {
+    const { x: x2, y: y2, w: w2, h: h2 } = elemSize;
+    let p1 = { x: x2, y: y2 };
+    let p2 = { x: x2 + w2, y: y2 };
+    let p3 = { x: x2 + w2, y: y2 + h2 };
+    let p4 = { x: x2, y: y2 + h2 };
+    if (angle2 && (angle2 > 0 || angle2 < 0)) {
+      const radian = parseAngleToRadian(limitAngle(angle2));
+      p1 = rotatePoint(center, p1, radian);
+      p2 = rotatePoint(center, p2, radian);
+      p3 = rotatePoint(center, p3, radian);
+      p4 = rotatePoint(center, p4, radian);
+    }
+    return [p1, p2, p3, p4];
+  }
+  function rotateElementVertexes(elemSize) {
+    const { angle: angle2 = 0 } = elemSize;
+    const center = calcElementCenter(elemSize);
+    return getElementRotateVertexes(elemSize, center, angle2);
+  }
+  function rotateVertexes(center, ves, radian) {
+    return [
+      rotatePoint(center, { x: ves[0].x, y: ves[0].y }, radian),
+      rotatePoint(center, { x: ves[1].x, y: ves[1].y }, radian),
+      rotatePoint(center, { x: ves[2].x, y: ves[2].y }, radian),
+      rotatePoint(center, { x: ves[3].x, y: ves[3].y }, radian)
+    ];
+  }
+  function limitAngle(angle2) {
+    if (!(angle2 > 0 || angle2 < 0) || angle2 === 0) {
+      return 0;
+    }
+    let num = angle2 % 360;
+    if (num < 0) {
+      num += 360;
+    }
+    return num;
+  }
+  function getGroupUUIDs(elements, index) {
+    var _a;
+    const uuids = [];
+    if (typeof index === "string" && /^\d+(\.\d+)*$/.test(index)) {
+      const nums = index.split(".");
+      let target = elements;
+      while (nums.length > 0) {
+        const num = nums.shift();
+        if (typeof num === "string") {
+          const elem = target[parseInt(num)];
+          if (elem && nums.length === 0) {
+            uuids.push(elem.uuid);
+          } else if (elem.type === "group" && nums.length > 0) {
+            target = ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || [];
+          }
+        }
+        break;
+      }
+    }
+    return uuids;
+  }
+  function getSelectedElementUUIDs(data, indexes) {
+    var _a;
+    let uuids = [];
+    if (Array.isArray(data == null ? void 0 : data.elements) && ((_a = data == null ? void 0 : data.elements) == null ? void 0 : _a.length) > 0 && Array.isArray(indexes) && indexes.length > 0) {
+      indexes.forEach((idx) => {
+        var _a2;
+        if (typeof idx === "number") {
+          if ((_a2 = data == null ? void 0 : data.elements) == null ? void 0 : _a2[idx]) {
+            uuids.push(data.elements[idx].uuid);
+          }
+        } else if (typeof idx === "string") {
+          uuids = uuids.concat(getGroupUUIDs(data.elements, idx));
+        }
+      });
+    }
+    return uuids;
+  }
+  function validateElements(elements) {
+    let isValid = true;
+    if (Array.isArray(elements)) {
+      const uuids = [];
+      elements.forEach((elem) => {
+        var _a;
+        if (typeof elem.uuid === "string" && elem.uuid) {
+          if (uuids.includes(elem.uuid)) {
+            isValid = false;
+            console.warn(`Duplicate uuids: ${elem.uuid}`);
+          } else {
+            uuids.push(elem.uuid);
+          }
+        } else {
+          isValid = false;
+          console.warn("Element missing uuid", elem);
+        }
+        if (elem.type === "group") {
+          isValid = validateElements((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children);
+        }
+      });
+    }
+    return isValid;
+  }
+  function calcElementsContextSize(elements, opts) {
+    const area = { x: 0, y: 0, w: 0, h: 0 };
+    elements.forEach((elem) => {
+      const elemSize = {
+        x: elem.x,
+        y: elem.y,
+        w: elem.w,
+        h: elem.h,
+        angle: elem.angle
+      };
+      if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
+        const ves = rotateElementVertexes(elemSize);
+        if (ves.length === 4) {
+          const xList = [ves[0].x, ves[1].x, ves[2].x, ves[3].x];
+          const yList = [ves[0].y, ves[1].y, ves[2].y, ves[3].y];
+          elemSize.x = Math.min(...xList);
+          elemSize.y = Math.min(...yList);
+          elemSize.w = Math.abs(Math.max(...xList) - Math.min(...xList));
+          elemSize.h = Math.abs(Math.max(...yList) - Math.min(...yList));
+        }
+      }
+      const areaStartX = Math.min(elemSize.x, area.x);
+      const areaStartY = Math.min(elemSize.y, area.y);
+      const areaEndX = Math.max(elemSize.x + elemSize.w, area.x + area.w);
+      const areaEndY = Math.max(elemSize.y + elemSize.h, area.y + area.h);
+      area.x = areaStartX;
+      area.y = areaStartY;
+      area.w = Math.abs(areaEndX - areaStartX);
+      area.h = Math.abs(areaEndY - areaStartY);
+    });
+    if (opts == null ? void 0 : opts.extend) {
+      area.x = Math.min(area.x, 0);
+      area.y = Math.min(area.y, 0);
+    }
+    const ctxSize = {
+      contextWidth: area.w,
+      contextHeight: area.h
+    };
+    if ((opts == null ? void 0 : opts.viewWidth) && (opts == null ? void 0 : opts.viewHeight) && (opts == null ? void 0 : opts.viewWidth) > 0 && (opts == null ? void 0 : opts.viewHeight) > 0) {
+      if (opts.viewWidth > area.x + area.w) {
+        ctxSize.contextWidth = opts.viewWidth - area.x;
+      }
+      if (opts.viewHeight > area.y + area.h) {
+        ctxSize.contextHeight = opts.viewHeight - area.y;
+      }
+    }
+    return ctxSize;
+  }
+  function calcElementsViewInfo(elements, prevViewSize, options) {
+    const contextSize = calcElementsContextSize(elements, { viewWidth: prevViewSize.width, viewHeight: prevViewSize.height, extend: options == null ? void 0 : options.extend });
+    if ((options == null ? void 0 : options.extend) === true) {
+      contextSize.contextWidth = Math.max(contextSize.contextWidth, prevViewSize.contextWidth);
+      contextSize.contextHeight = Math.max(contextSize.contextHeight, prevViewSize.contextHeight);
+    }
+    return {
+      contextSize
+    };
+  }
+  function getElemenetsAssetIds(elements) {
+    const assetIds = [];
+    const _scanElements = (elems) => {
+      elems.forEach((elem) => {
+        if (elem.type === "image" && isAssetId(elem.detail.src)) {
+          assetIds.push(elem.detail.src);
+        } else if (elem.type === "svg" && isAssetId(elem.detail.svg)) {
+          assetIds.push(elem.detail.svg);
+        } else if (elem.type === "html" && elem.detail.html) {
+          assetIds.push(elem.detail.html);
+        } else if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+          _scanElements(elem.detail.children);
+        }
+      });
+    };
+    _scanElements(elements);
+    return assetIds;
+  }
+  function findElementFromList(uuid, list) {
+    var _a;
+    let result = null;
+    for (let i = 0; i < list.length; i++) {
+      const elem = list[i];
+      if (elem.uuid === uuid) {
+        result = elem;
+        break;
+      } else if (!result && elem.type === "group") {
+        const resultInGroup = findElementFromList(uuid, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+        if ((resultInGroup == null ? void 0 : resultInGroup.uuid) === uuid) {
+          result = resultInGroup;
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  function findElementsFromList(uuids, list) {
+    const result = [];
+    function _find(elements) {
+      var _a;
+      for (let i = 0; i < elements.length; i++) {
+        const elem = elements[i];
+        if (uuids.includes(elem.uuid)) {
+          result.push(elem);
+        } else if (elem.type === "group") {
+          _find(((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+        }
+      }
+    }
+    _find(list);
+    return result;
+  }
+  function getGroupQueueFromList(uuid, elements) {
+    const groupQueue = [];
+    function _scan(uuid2, elements2) {
+      var _a;
+      let result = null;
+      for (let i = 0; i < elements2.length; i++) {
+        const elem = elements2[i];
+        if (elem.uuid === uuid2) {
+          result = elem;
+          break;
+        } else if (!result && elem.type === "group") {
+          groupQueue.push(elem);
+          const resultInGroup = _scan(uuid2, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+          if ((resultInGroup == null ? void 0 : resultInGroup.uuid) === uuid2) {
+            result = resultInGroup;
+            break;
+          }
+          groupQueue.pop();
+        }
+      }
+      return result;
+    }
+    _scan(uuid, elements);
+    return groupQueue;
+  }
+  function mergeElement(originElem, updateContent) {
+    const commonKeys = Object.keys(updateContent);
+    for (let i = 0; i < commonKeys.length; i++) {
+      const commonKey = commonKeys[i];
+      if (["x", "y", "w", "h", "angle", "name"].includes(commonKey)) {
+        originElem[commonKey] = updateContent[commonKey];
+      } else if (["detail", "operations"].includes(commonKey)) {
+        if (istype.json(updateContent[commonKey]) && istype.json(originElem[commonKey])) {
+          originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
+        } else if (istype.array(updateContent[commonKey]) && istype.array(originElem[commonKey])) {
+          originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
+        }
+      }
+    }
+    return originElem;
+  }
+  function updateElementInList(uuid, updateContent, elements) {
+    var _a;
+    for (let i = 0; i < elements.length; i++) {
+      const elem = elements[i];
+      if (elem.uuid === uuid) {
+        mergeElement(elem, updateContent);
+        break;
+      } else if (elem.type === "group") {
+        updateElementInList(uuid, updateContent, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+      }
+    }
+    return elements;
+  }
+  function checkRectIntersect(rect1, rect2) {
+    const react1MinX = rect1.x;
+    const react1MinY = rect1.y;
+    const react1MaxX = rect1.x + rect1.w;
+    const react1MaxY = rect1.y + rect1.h;
+    const react2MinX = rect2.x;
+    const react2MinY = rect2.y;
+    const react2MaxX = rect2.x + rect2.w;
+    const react2MaxY = rect2.y + rect2.h;
+    return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
+  }
+  function viewScale(opts) {
+    const { scale, point, viewScaleInfo: prevViewScaleInfo } = opts;
+    const { offsetLeft, offsetTop } = prevViewScaleInfo;
+    const scaleDiff = scale / prevViewScaleInfo.scale;
+    const x0 = point.x;
+    const y0 = point.y;
+    const moveX = x0 - x0 * scaleDiff + (offsetLeft * scaleDiff - offsetLeft);
+    const moveY = y0 - y0 * scaleDiff + (offsetTop * scaleDiff - offsetTop);
+    return {
+      moveX,
+      moveY
+    };
+  }
+  function viewScroll(opts) {
+    const { moveX = 0, moveY = 0, viewScaleInfo, viewSizeInfo } = opts;
+    const { scale } = viewScaleInfo;
+    const { width, height, contextWidth, contextHeight } = viewSizeInfo;
+    let offsetLeft = viewScaleInfo.offsetLeft;
+    let offsetRight = viewScaleInfo.offsetRight;
+    let offsetTop = viewScaleInfo.offsetTop;
+    let offsetBottom = viewScaleInfo.offsetBottom;
+    offsetLeft += moveX;
+    offsetTop += moveY;
+    const w2 = contextWidth * scale;
+    const h2 = contextHeight * scale;
+    offsetRight = width - (w2 + offsetLeft);
+    offsetBottom = height - (h2 + offsetTop);
+    return {
+      scale,
+      offsetTop,
+      offsetLeft,
+      offsetRight,
+      offsetBottom
+    };
+  }
+  function calcViewElementSize(size, opts) {
+    const { viewScaleInfo } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = size;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+      x: x2 * scale + offsetLeft,
+      y: y2 * scale + offsetTop,
+      w: w2 * scale,
+      h: h2 * scale,
+      angle: angle2
+    };
+    return newSize;
+  }
+  function calcViewPointSize(size, opts) {
+    const { viewScaleInfo } = opts;
+    const { x: x2, y: y2 } = size;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+      x: x2 * scale + offsetLeft,
+      y: y2 * scale + offsetTop
+    };
+    return newSize;
+  }
+  function calcViewVertexes(vertexes, opts) {
+    return [
+      calcViewPointSize(vertexes[0], opts),
+      calcViewPointSize(vertexes[1], opts),
+      calcViewPointSize(vertexes[2], opts),
+      calcViewPointSize(vertexes[3], opts)
+    ];
+  }
+  function isViewPointInElement(p, opts) {
+    const { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo } = opts;
+    const { angle: angle2 = 0 } = elem;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const vertexes = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    if (vertexes.length >= 2) {
+      ctx.beginPath();
+      ctx.moveTo(vertexes[0].x, vertexes[0].y);
+      for (let i = 1; i < vertexes.length; i++) {
+        ctx.lineTo(vertexes[i].x, vertexes[i].y);
+      }
+      ctx.closePath();
+    }
+    if (ctx.isPointInPath(p.x, p.y)) {
+      return true;
+    }
+    return false;
+  }
+  function getViewPointAtElement(p, opts) {
+    var _a, _b, _c;
+    const { context2d: ctx, data, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
+    const result = {
+      index: -1,
+      element: null,
+      groupQueueIndex: -1
+    };
+    if (groupQueue && Array.isArray(groupQueue) && (groupQueue == null ? void 0 : groupQueue.length) > 0) {
+      for (let gIdx = groupQueue.length - 1; gIdx >= 0; gIdx--) {
+        let totalX = 0;
+        let totalY = 0;
+        let totalAngle = 0;
+        for (let i = 0; i <= gIdx; i++) {
+          totalX += groupQueue[i].x;
+          totalY += groupQueue[i].y;
+          totalAngle += groupQueue[i].angle || 0;
+        }
+        const lastGroup = groupQueue[gIdx];
+        if (lastGroup && lastGroup.type === "group" && Array.isArray((_a = lastGroup.detail) == null ? void 0 : _a.children)) {
+          for (let i = 0; i < lastGroup.detail.children.length; i++) {
+            const child = lastGroup.detail.children[i];
+            if (((_b = child == null ? void 0 : child.operations) == null ? void 0 : _b.invisible) === true) {
+              continue;
+            }
+            if (child) {
+              const elemSize = {
+                x: totalX + child.x,
+                y: totalY + child.y,
+                w: child.w,
+                h: child.h,
+                angle: totalAngle + (child.angle || 0)
+              };
+              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo, viewSizeInfo })) {
+                result.element = child;
+                if (gIdx < groupQueue.length - 1 || child.type !== "group") {
+                  result.groupQueueIndex = gIdx;
+                }
+                break;
+              }
+            } else {
+              break;
+            }
+          }
+        }
+        if (result.element) {
+          break;
+        }
+      }
+    }
+    if (result.element) {
+      return result;
+    }
+    for (let i = data.elements.length - 1; i >= 0; i--) {
+      const elem = data.elements[i];
+      if (((_c = elem == null ? void 0 : elem.operations) == null ? void 0 : _c.invisible) === true) {
+        continue;
+      }
+      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo })) {
+        result.index = i;
+        result.element = elem;
+        break;
+      }
+    }
+    return result;
+  }
+  function isElementInView(elem, opts) {
+    const { viewSizeInfo, viewScaleInfo } = opts;
+    const { width, height } = viewSizeInfo;
+    const { angle: angle2 } = elem;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const ves = rotateElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    const viewSize = { x: 0, y: 0, w: width, h: height };
+    const elemStartX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const elemStartY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemEndX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const elemEndY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
+    return checkRectIntersect(viewSize, elemSize);
+  }
+  function getElementVertexes(elemSize) {
+    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
+    return [
+      { x: x2, y: y2 },
+      { x: x2 + w2, y: y2 },
+      { x: x2 + w2, y: y2 + h2 },
+      { x: x2, y: y2 + h2 }
+    ];
+  }
+  function calcElementVertexes(elemSize) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    if (angle2 === 0) {
+      return getElementVertexes(elemSize);
+    }
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
+  }
+  function calcElementQueueVertexesQueueInGroup(groupQueue) {
+    const vesList = [];
+    let totalX = 0;
+    let totalY = 0;
+    const rotateActionList = [];
+    const elemQueue = [...groupQueue];
+    for (let i = 0; i < elemQueue.length; i++) {
+      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
+      totalX += x2;
+      totalY += y2;
+      let ves;
+      if (i === 0) {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        rotateActionList.push({
+          center: calcElementCenter(elemSize),
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      } else {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        ves = getElementVertexes(elemSize);
+        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
+          const { center, radian } = rotateActionList[aIdx];
+          ves = rotateVertexes(center, ves, radian);
+        }
+        const vesCenter = calcElementCenterFromVertexes(ves);
+        if (angle2 > 0 || angle2 < 0) {
+          const radian = parseAngleToRadian(angle2);
+          ves = rotateVertexes(vesCenter, ves, radian);
+        }
+        rotateActionList.push({
+          center: vesCenter,
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      }
+      vesList.push(ves);
+    }
+    return vesList;
+  }
+  function calcElementVertexesQueueInGroup(targetElem, opts) {
+    const { groupQueue } = opts;
+    if (!(groupQueue.length > 0)) {
+      return [calcElementVertexes(targetElem)];
+    }
+    const elemQueue = [...groupQueue, ...[targetElem]];
+    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    return vesList;
+  }
+  function calcElementVertexesInGroup(targetElem, opts) {
+    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+    const ves = vesList.pop();
+    return ves || null;
+  }
+  function createControllerElementSizeFromCenter(center, opts) {
+    const { x: x2, y: y2 } = center;
+    const { size, angle: angle2 } = opts;
+    return {
+      x: x2 - size / 2,
+      y: y2 - size / 2,
+      w: size,
+      h: size,
+      angle: angle2
+    };
+  }
+  function calcElementSizeController(elemSize, opts) {
+    const { groupQueue, controllerSize, viewScaleInfo } = opts;
+    const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    const ctrlGroupQueue = [
+      ...[
+        {
+          uuid: createUUID(),
+          x: x2,
+          y: y2,
+          w: w2,
+          h: h2,
+          angle: angle2,
+          type: "group",
+          detail: { children: [] }
+        }
+      ],
+      ...groupQueue
+    ];
+    let totalAngle = 0;
+    ctrlGroupQueue.forEach(({ angle: angle22 = 0 }) => {
+      totalAngle += angle22;
+    });
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
+    const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
+    const bottomCenter = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
+    const leftCenter = getCenterFromTwoPoints(vertexes[3], vertexes[0]);
+    const topLeftCenter = vertexes[0];
+    const topRightCenter = vertexes[1];
+    const bottomRightCenter = vertexes[2];
+    const bottomLeftCenter = vertexes[3];
+    const topSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
+    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
+    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: totalAngle });
+    const sizeController = {
+      elementWrapper: vertexes,
+      left: {
+        type: "left",
+        vertexes: calcElementVertexes(leftSize),
+        center: leftCenter
+      },
+      right: {
+        type: "right",
+        vertexes: calcElementVertexes(rightSize),
+        center: rightCenter
+      },
+      top: {
+        type: "top",
+        vertexes: calcElementVertexes(topSize),
+        center: topCenter
+      },
+      bottom: {
+        type: "bottom",
+        vertexes: calcElementVertexes(bottomSize),
+        center: bottomCenter
+      },
+      topLeft: {
+        type: "top-left",
+        vertexes: calcElementVertexes(topLeftSize),
+        center: topLeftCenter
+      },
+      topRight: {
+        type: "top-right",
+        vertexes: calcElementVertexes(topRightSize),
+        center: topRightCenter
+      },
+      bottomLeft: {
+        type: "bottom-left",
+        vertexes: calcElementVertexes(bottomLeftSize),
+        center: bottomLeftCenter
+      },
+      bottomRight: {
+        type: "bottom-right",
+        vertexes: calcElementVertexes(bottomRightSize),
+        center: bottomRightCenter
+      }
+    };
+    return sizeController;
+  }
+  const cmdReg = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
+  const numReg = /(-?\d+(?:\.\d+)?)/gi;
+  function parseSVGPath(path) {
+    const commands = [];
+    path.replace(cmdReg, (match, cmd, paramStr) => {
+      const matchParams = paramStr.match(numReg);
+      const params = matchParams ? matchParams.map(Number) : [];
+      const command = {
+        type: cmd,
+        params
+      };
+      commands.push(command);
+      return match;
+    });
+    return commands;
+  }
+  function generateSVGPath(commands) {
+    let path = "";
+    commands.forEach((item) => {
+      path += item.type + item.params.join(" ");
+    });
+    return path;
+  }
+  const attrRegExp = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+  const elemRegExp = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+  const whitespaceReg = /^\s*$/;
+  const singleElements = {};
+  function parseElement(element) {
+    const node = {
+      type: "element",
+      name: "",
+      isVoid: false,
+      attributes: {},
+      children: []
+    };
+    const elementMatch = element.match(/<\/?([^\s]+?)[/\s>]/);
+    if (elementMatch) {
+      node.name = elementMatch[1];
+      if (singleElements[elementMatch[1]] || element.charAt(element.length - 2) === "/") {
+        node.isVoid = true;
+      }
+      if (node.name.startsWith("!--")) {
+        const endIndex = element.indexOf("-->");
+        return {
+          type: "comment",
+          name: null,
+          attributes: {},
+          children: [],
+          isVoid: false,
+          comment: endIndex !== -1 ? element.slice(4, endIndex) : ""
+        };
+      }
+    }
+    const reg = new RegExp(attrRegExp);
+    let result = null;
+    while (true) {
+      result = reg.exec(element);
+      if (result === null) {
+        break;
+      }
+      if (!result[0].trim()) {
+        continue;
+      }
+      if (result[1]) {
+        const attr = result[1].trim();
+        let arr = [attr, ""];
+        if (attr.indexOf("=") > -1) {
+          arr = attr.split("=");
+        }
+        node.attributes[arr[0]] = arr[1];
+        reg.lastIndex--;
+      } else if (result[2]) {
+        node.attributes[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+      }
+    }
+    return node;
+  }
+  function parseHTML(html2) {
+    const result = [];
+    const arr = [];
+    let current;
+    let level = -1;
+    let inComponent = false;
+    html2.replace(elemRegExp, (element, index) => {
+      const isOpen = element.charAt(1) !== "/";
+      const isComment = element.startsWith("<!--");
+      const start = index + element.length;
+      const nextChar = html2.charAt(start);
+      let parent;
+      if (isComment) {
+        const comment = parseElement(element);
+        if (level < 0) {
+          result.push(comment);
+          return element;
+        }
+        parent = arr[level];
+        parent.children.push(comment);
+        return element;
+      }
+      if (isOpen) {
+        level++;
+        current = parseElement(element);
+        if (!current.isVoid && !inComponent && nextChar && nextChar !== "<") {
+          const content = html2.slice(start, html2.indexOf("<", start));
+          if (content.trim()) {
+            current.children.push({
+              type: "text",
+              name: null,
+              attributes: {},
+              children: [],
+              isVoid: false,
+              textContent: content.trim()
+            });
+          }
+        }
+        if (level === 0) {
+          result.push(current);
+        }
+        parent = arr[level - 1];
+        if (parent) {
+          parent.children.push(current);
+        }
+        arr[level] = current;
+      }
+      if (!isOpen || !Array.isArray(current) && current.isVoid) {
+        if (level > -1 && !Array.isArray(current) && (current.isVoid || current.name === element.slice(2, -1))) {
+          level--;
+          current = level === -1 ? result : arr[level];
+        }
+        if (nextChar !== "<" && nextChar) {
+          parent = level === -1 ? result : arr[level].children;
+          const end = html2.indexOf("<", start);
+          let content = html2.slice(start, end === -1 ? void 0 : end);
+          if (whitespaceReg.test(content)) {
+            content = " ";
+          }
+          if (end > -1 && level + parent.length >= 0 || content !== " ") {
+            if (content.trim()) {
+              parent.push({
+                type: "text",
+                name: null,
+                attributes: {},
+                children: [],
+                isVoid: false,
+                textContent: content.trim()
+              });
+            }
+          }
+        }
+      }
+      return element;
+    });
+    return result;
+  }
+  function attrString(attrs2) {
+    const buff = [];
+    for (let key in attrs2) {
+      buff.push(key + '="' + attrs2[key] + '"');
+    }
+    if (!buff.length) {
+      return "";
+    }
+    return " " + buff.join(" ");
+  }
+  function stringify(buff, htmlNode) {
+    switch (htmlNode.type) {
+      case "text":
+        return buff + htmlNode.textContent;
+      case "element":
+        buff += "<" + htmlNode.name + (htmlNode.attributes ? attrString(htmlNode.attributes) : "") + (htmlNode.isVoid ? "/>" : ">");
+        if (htmlNode.isVoid) {
+          return buff;
+        }
+        return buff + htmlNode.children.reduce(stringify, "") + "</" + htmlNode.name + ">";
+      case "comment":
+        buff += "<!--" + htmlNode.comment + "-->";
+        return buff;
+    }
+  }
+  function generateHTML(htmlNodes) {
+    return htmlNodes.reduce(function(token, rootEl) {
+      return token + stringify("", rootEl);
+    }, "");
+  }
+  function compressImage(src, opts) {
+    let radio = 0.5;
+    const type = (opts == null ? void 0 : opts.type) || "image/png";
+    if ((opts == null ? void 0 : opts.radio) && (opts == null ? void 0 : opts.radio) > 0 && (opts == null ? void 0 : opts.radio) <= 1) {
+      radio = opts == null ? void 0 : opts.radio;
+    }
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.addEventListener("load", () => {
+        const { width, height } = image;
+        const resultW = width * radio;
+        const resultH = height * radio;
+        let canvas = document.createElement("canvas");
+        canvas.width = resultW;
+        canvas.height = resultH;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(image, 0, 0, resultW, resultH);
+        const base64 = canvas.toDataURL(type);
+        canvas = null;
+        resolve(base64);
+      });
+      image.addEventListener("error", (err) => {
+        reject(err);
+      });
+      image.src = src;
+    });
+  }
+  function formatNumber(num, opts) {
+    const decimalPlaces = (opts == null ? void 0 : opts.decimalPlaces) || 2;
+    return parseFloat(num.toFixed(decimalPlaces));
+  }
+  exports.Context2D = Context2D;
+  exports.EventEmitter = EventEmitter;
+  exports.Store = Store;
+  exports.calcDistance = calcDistance;
+  exports.calcElementCenter = calcElementCenter;
+  exports.calcElementCenterFromVertexes = calcElementCenterFromVertexes;
+  exports.calcElementQueueVertexesQueueInGroup = calcElementQueueVertexesQueueInGroup;
+  exports.calcElementSizeController = calcElementSizeController;
+  exports.calcElementVertexesInGroup = calcElementVertexesInGroup;
+  exports.calcElementVertexesQueueInGroup = calcElementVertexesQueueInGroup;
+  exports.calcElementsContextSize = calcElementsContextSize;
+  exports.calcElementsViewInfo = calcElementsViewInfo;
+  exports.calcSpeed = calcSpeed;
+  exports.calcViewElementSize = calcViewElementSize;
+  exports.calcViewPointSize = calcViewPointSize;
+  exports.calcViewVertexes = calcViewVertexes;
   exports.check = check;
+  exports.checkRectIntersect = checkRectIntersect;
+  exports.colorNameToHex = colorNameToHex;
   exports.compose = compose;
+  exports.compressImage = compressImage;
+  exports.createAssetId = createAssetId;
+  exports.createBoardContexts = createBoardContexts;
+  exports.createContext2D = createContext2D;
+  exports.createOffscreenContext2D = createOffscreenContext2D;
   exports.createUUID = createUUID;
   exports.deepClone = deepClone;
-  exports.default = index;
   exports.delay = delay;
   exports.downloadImageFromCanvas = downloadImageFromCanvas;
+  exports.equalPoint = equalPoint;
+  exports.equalTouchPoint = equalTouchPoint;
+  exports.findElementFromList = findElementFromList;
+  exports.findElementsFromList = findElementsFromList;
+  exports.formatNumber = formatNumber;
+  exports.generateHTML = generateHTML;
+  exports.generateSVGPath = generateSVGPath;
+  exports.getCenterFromTwoPoints = getCenterFromTwoPoints;
+  exports.getElemenetsAssetIds = getElemenetsAssetIds;
+  exports.getElementRotateVertexes = getElementRotateVertexes;
+  exports.getElementVertexes = getElementVertexes;
+  exports.getGroupQueueFromList = getGroupQueueFromList;
+  exports.getSelectedElementUUIDs = getSelectedElementUUIDs;
+  exports.getViewPointAtElement = getViewPointAtElement;
+  exports.getViewScaleInfoFromSnapshot = getViewScaleInfoFromSnapshot;
+  exports.getViewSizeInfoFromSnapshot = getViewSizeInfoFromSnapshot;
   exports.is = is;
+  exports.isAssetId = isAssetId;
   exports.isColorStr = isColorStr;
-  exports.istype = istype;
+  exports.isElementInView = isElementInView;
+  exports.isViewPointInElement = isViewPointInElement;
+  exports.istype = istype$1;
+  exports.limitAngle = limitAngle;
   exports.loadHTML = loadHTML;
   exports.loadImage = loadImage;
   exports.loadSVG = loadSVG;
+  exports.parseAngleToRadian = parseAngleToRadian;
+  exports.parseHTML = parseHTML;
+  exports.parseRadianToAngle = parseRadianToAngle;
+  exports.parseSVGPath = parseSVGPath;
+  exports.rotateElement = rotateElement;
+  exports.rotateElementVertexes = rotateElementVertexes;
+  exports.rotatePoint = rotatePoint;
+  exports.rotatePointInGroup = rotatePointInGroup;
+  exports.rotateVertexes = rotateVertexes;
+  exports.sortDataAsserts = sortDataAsserts;
   exports.throttle = throttle;
   exports.toColorHexNum = toColorHexNum;
   exports.toColorHexStr = toColorHexStr;
-  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+  exports.updateElementInList = updateElementInList;
+  exports.vaildPoint = vaildPoint;
+  exports.vaildTouchPoint = vaildTouchPoint;
+  exports.validateElements = validateElements;
+  exports.viewScale = viewScale;
+  exports.viewScroll = viewScroll;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});