@idraw/core 0.3.0-beta.3 → 0.3.0-beta.6

package/dist/index.global.js

@@ -1,10 +1,22 @@
 var iDrawCore = function() {
   "use strict";
+  var __assign$1$1 = function() {
+    __assign$1$1 = Object.assign || function __assign2(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign$1$1.apply(this, arguments);
+  };
   function compose(middleware) {
     return function(context, next) {
       return dispatch(0);
       function dispatch(i) {
-        let fn = middleware[i];
+        var fn = middleware[i];
         if (i === middleware.length && next) {
           fn = next;
         }
@@ -19,31 +31,35 @@ var iDrawCore = function() {
     };
   }
   function delay(time) {
-    return new Promise((resolve) => {
-      setTimeout(() => {
+    return new Promise(function(resolve) {
+      setTimeout(function() {
         resolve();
       }, time);
     });
   }
   function throttle$1(fn, timeout) {
-    let timer = -1;
-    return function(...args) {
+    var timer = -1;
+    return function() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
       if (timer > 0) {
         return;
       }
-      timer = setTimeout(() => {
-        fn(...args);
+      timer = setTimeout(function() {
+        fn.apply(void 0, args);
         timer = -1;
       }, timeout);
     };
   }
   function downloadImageFromCanvas(canvas, opts) {
-    const { filename, type = "image/jpeg" } = opts;
-    const stream = canvas.toDataURL(type);
-    const downloadLink = document.createElement("a");
+    var filename = opts.filename, _a2 = opts.type, type = _a2 === void 0 ? "image/jpeg" : _a2;
+    var stream = canvas.toDataURL(type);
+    var downloadLink = document.createElement("a");
     downloadLink.href = stream;
     downloadLink.download = filename;
-    const downloadClickEvent = document.createEvent("MouseEvents");
+    var downloadClickEvent = document.createEvent("MouseEvents");
     downloadClickEvent.initEvent("click", true, false);
     downloadLink.dispatchEvent(downloadClickEvent);
   }
@@ -53,120 +69,91 @@ var iDrawCore = function() {
   function toColorHexStr(color2) {
     return "#" + color2.toString(16);
   }
-  function isColorStr(color2) {
+  function isColorStr$2(color2) {
     return typeof color2 === "string" && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2);
   }
-  function createUUID() {
+  function createUUID$2() {
     function str4() {
       return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
     }
-    return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`;
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
   }
-  function deepClone(target) {
+  function deepClone$2(target) {
     function _clone(t) {
-      const type = is$2(t);
+      var type = is$1$2(t);
       if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
         return t;
       } else if (type === "Array") {
-        const arr = [];
-        t.forEach((item) => {
-          arr.push(_clone(item));
+        var arr_1 = [];
+        t.forEach(function(item) {
+          arr_1.push(_clone(item));
         });
-        return arr;
+        return arr_1;
       } else if (type === "Object") {
-        const obj = {};
-        const keys = Object.keys(t);
-        keys.forEach((key) => {
-          obj[key] = _clone(t[key]);
+        var obj_1 = {};
+        var keys = Object.keys(t);
+        keys.forEach(function(key) {
+          obj_1[key] = _clone(t[key]);
         });
-        return obj;
+        return obj_1;
       }
     }
     return _clone(target);
   }
-  function is$2(data) {
+  function is$1$2(data) {
     return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
   }
-  function parsePrototype(data) {
-    const typeStr = Object.prototype.toString.call(data) || "";
-    const result = typeStr.replace(/(\[object|\])/ig, "").trim();
+  function parsePrototype$1(data) {
+    var typeStr = Object.prototype.toString.call(data) || "";
+    var result = typeStr.replace(/(\[object|\])/ig, "").trim();
     return result;
   }
-  const istype = {
-    type(data, lowerCase) {
-      const result = parsePrototype(data);
+  var istype$1 = {
+    type: function(data, lowerCase) {
+      var result = parsePrototype$1(data);
       return lowerCase === true ? result.toLocaleLowerCase() : result;
     },
-    array(data) {
-      return parsePrototype(data) === "Array";
+    array: function(data) {
+      return parsePrototype$1(data) === "Array";
     },
-    json(data) {
-      return parsePrototype(data) === "Object";
+    json: function(data) {
+      return parsePrototype$1(data) === "Object";
     },
-    function(data) {
-      return parsePrototype(data) === "Function";
+    function: function(data) {
+      return parsePrototype$1(data) === "Function";
     },
-    asyncFunction(data) {
-      return parsePrototype(data) === "AsyncFunction";
+    asyncFunction: function(data) {
+      return parsePrototype$1(data) === "AsyncFunction";
     },
-    string(data) {
-      return parsePrototype(data) === "String";
+    string: function(data) {
+      return parsePrototype$1(data) === "String";
     },
-    number(data) {
-      return parsePrototype(data) === "Number";
+    number: function(data) {
+      return parsePrototype$1(data) === "Number";
     },
-    undefined(data) {
-      return parsePrototype(data) === "Undefined";
+    undefined: function(data) {
+      return parsePrototype$1(data) === "Undefined";
     },
-    null(data) {
-      return parsePrototype(data) === "Null";
+    null: function(data) {
+      return parsePrototype$1(data) === "Null";
     },
-    promise(data) {
-      return parsePrototype(data) === "Promise";
+    promise: function(data) {
+      return parsePrototype$1(data) === "Promise";
     }
   };
-  function parseHTMLToDataURL(html2, opts) {
-    const { width, height } = opts;
-    return new Promise((resolve, reject) => {
-      const _svg = `
-    <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}
-        </div>
-      </foreignObject>
-    </svg>
-    `;
-      const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
-      const reader = new FileReader();
-      reader.readAsDataURL(blob);
-      reader.onload = function(event) {
-        var _a2;
-        const base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
-        resolve(base64);
-      };
-      reader.onerror = function(err) {
-        reject(err);
-      };
-    });
-  }
-  function parseSVGToDataURL(svg2) {
-    return new Promise((resolve, reject) => {
-      const _svg = svg2;
-      const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
-      const reader = new FileReader();
-      reader.readAsDataURL(blob);
-      reader.onload = function(event) {
-        var _a2;
-        const base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
-        resolve(base64);
-      };
-      reader.onerror = function(err) {
-        reject(err);
-      };
-    });
-  }
-  var __awaiter$1 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+  var __assign$3 = function() {
+    __assign$3 = Object.assign || function __assign2(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign$3.apply(this, arguments);
+  };
+  function __awaiter$2(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
         resolve(value);
@@ -192,12 +179,120 @@ var iDrawCore = function() {
       }
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-  };
-  const { Image } = window;
-  function loadImage(src) {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.crossOrigin = "anonymous";
+  }
+  function __generator$2(thisArg, body) {
+    var _ = { label: 0, sent: function() {
+      if (t[0] & 1)
+        throw t[1];
+      return t[1];
+    }, trys: [], ops: [] }, f, y2, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+      return this;
+    }), g;
+    function verb(n) {
+      return function(v) {
+        return step([n, v]);
+      };
+    }
+    function step(op) {
+      if (f)
+        throw new TypeError("Generator is already executing.");
+      while (_)
+        try {
+          if (f = 1, y2 && (t = op[0] & 2 ? y2["return"] : op[0] ? y2["throw"] || ((t = y2["return"]) && t.call(y2), 0) : y2.next) && !(t = t.call(y2, op[1])).done)
+            return t;
+          if (y2 = 0, t)
+            op = [op[0] & 2, t.value];
+          switch (op[0]) {
+            case 0:
+            case 1:
+              t = op;
+              break;
+            case 4:
+              _.label++;
+              return { value: op[1], done: false };
+            case 5:
+              _.label++;
+              y2 = op[1];
+              op = [0];
+              continue;
+            case 7:
+              op = _.ops.pop();
+              _.trys.pop();
+              continue;
+            default:
+              if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t[1]) {
+                _.label = t[1];
+                t = op;
+                break;
+              }
+              if (t && _.label < t[2]) {
+                _.label = t[2];
+                _.ops.push(op);
+                break;
+              }
+              if (t[2])
+                _.ops.pop();
+              _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e) {
+          op = [6, e];
+          y2 = 0;
+        } finally {
+          f = t = 0;
+        }
+      if (op[0] & 5)
+        throw op[1];
+      return { value: op[0] ? op[1] : void 0, done: true };
+    }
+  }
+  function parseHTMLToDataURL$1(html2, opts) {
+    var width = opts.width, height = opts.height;
+    return new Promise(function(resolve, reject) {
+      var _svg = '\n    <svg xmlns="http://www.w3.org/2000/svg" width="'.concat(width || "", '" height = "').concat(height || "", '">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ').concat(html2, "\n        </div>\n      </foreignObject>\n    </svg>\n    ");
+      var blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
+      var reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = function(event) {
+        var _a2;
+        var base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  function parseSVGToDataURL$1(svg2) {
+    return new Promise(function(resolve, reject) {
+      var _svg = svg2;
+      var blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
+      var reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = function(event) {
+        var _a2;
+        var base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  var Image$1 = window.Image;
+  function loadImage$1(src) {
+    return new Promise(function(resolve, reject) {
+      var img = new Image$1();
       img.onload = function() {
         resolve(img);
       };
@@ -206,26 +301,42 @@ var iDrawCore = function() {
       img.src = src;
     });
   }
-  function loadSVG(svg2) {
-    return __awaiter$1(this, void 0, void 0, function* () {
-      const dataURL = yield parseSVGToDataURL(svg2);
-      const image = yield loadImage(dataURL);
-      return image;
+  function loadSVG$1(svg2) {
+    return __awaiter$2(this, void 0, void 0, function() {
+      var dataURL, image;
+      return __generator$2(this, function(_a2) {
+        switch (_a2.label) {
+          case 0:
+            return [4, parseSVGToDataURL$1(svg2)];
+          case 1:
+            dataURL = _a2.sent();
+            return [4, loadImage$1(dataURL)];
+          case 2:
+            image = _a2.sent();
+            return [2, image];
+        }
+      });
     });
   }
-  function filterAmpersand(str) {
-    return str.replace(/\&/ig, "&amp;");
-  }
-  function loadHTML(html2, opts) {
-    return __awaiter$1(this, void 0, void 0, function* () {
-      html2 = filterAmpersand(html2);
-      const dataURL = yield parseHTMLToDataURL(html2, opts);
-      const image = yield loadImage(dataURL);
-      return image;
+  function loadHTML$1(html2, opts) {
+    return __awaiter$2(this, void 0, void 0, function() {
+      var dataURL, image;
+      return __generator$2(this, function(_a2) {
+        switch (_a2.label) {
+          case 0:
+            return [4, parseHTMLToDataURL$1(html2, opts)];
+          case 1:
+            dataURL = _a2.sent();
+            return [4, loadImage$1(dataURL)];
+          case 2:
+            image = _a2.sent();
+            return [2, image];
+        }
+      });
     });
   }
-  let Context$1 = class Context {
-    constructor(ctx, opts) {
+  var Context$1 = function() {
+    function Context2(ctx, opts) {
       this._opts = opts;
       this._ctx = ctx;
       this._transform = {
@@ -234,19 +345,19 @@ var iDrawCore = function() {
         scrollY: 0
       };
     }
-    getContext() {
+    Context2.prototype.getContext = function() {
       return this._ctx;
-    }
-    resetSize(opts) {
-      this._opts = Object.assign(Object.assign({}, this._opts), opts);
-    }
-    calcDeviceNum(num) {
+    };
+    Context2.prototype.resetSize = function(opts) {
+      this._opts = __assign$3(__assign$3({}, this._opts), opts);
+    };
+    Context2.prototype.calcDeviceNum = function(num) {
       return num * this._opts.devicePixelRatio;
-    }
-    calcScreenNum(num) {
+    };
+    Context2.prototype.calcScreenNum = function(num) {
       return num / this._opts.devicePixelRatio;
-    }
-    getSize() {
+    };
+    Context2.prototype.getSize = function() {
       return {
         width: this._opts.width,
         height: this._opts.height,
@@ -254,209 +365,217 @@ var iDrawCore = function() {
         contextHeight: this._opts.contextHeight,
         devicePixelRatio: this._opts.devicePixelRatio
       };
-    }
-    setTransform(config) {
-      this._transform = Object.assign(Object.assign({}, this._transform), config);
-    }
-    getTransform() {
+    };
+    Context2.prototype.setTransform = function(config) {
+      this._transform = __assign$3(__assign$3({}, this._transform), config);
+    };
+    Context2.prototype.getTransform = function() {
       return {
         scale: this._transform.scale,
         scrollX: this._transform.scrollX,
         scrollY: this._transform.scrollY
       };
-    }
-    setFillStyle(color2) {
+    };
+    Context2.prototype.setFillStyle = function(color2) {
       this._ctx.fillStyle = color2;
-    }
-    fill(fillRule) {
+    };
+    Context2.prototype.fill = function(fillRule) {
       return this._ctx.fill(fillRule || "nonzero");
-    }
-    arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
+    };
+    Context2.prototype.arc = function(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) {
+    };
+    Context2.prototype.rect = function(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) {
+    };
+    Context2.prototype.fillRect = function(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) {
+    };
+    Context2.prototype.clearRect = function(x2, y2, w2, h2) {
       return this._ctx.clearRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
-    }
-    beginPath() {
+    };
+    Context2.prototype.beginPath = function() {
       return this._ctx.beginPath();
-    }
-    closePath() {
+    };
+    Context2.prototype.closePath = function() {
       return this._ctx.closePath();
-    }
-    lineTo(x2, y2) {
+    };
+    Context2.prototype.lineTo = function(x2, y2) {
       return this._ctx.lineTo(this._doSize(x2), this._doSize(y2));
-    }
-    moveTo(x2, y2) {
+    };
+    Context2.prototype.moveTo = function(x2, y2) {
       return this._ctx.moveTo(this._doSize(x2), this._doSize(y2));
-    }
-    arcTo(x1, y1, x2, y2, radius) {
+    };
+    Context2.prototype.arcTo = function(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) {
+    };
+    Context2.prototype.setLineWidth = function(w2) {
       return this._ctx.lineWidth = this._doSize(w2);
-    }
-    setLineDash(nums) {
-      return this._ctx.setLineDash(nums.map((n) => this._doSize(n)));
-    }
-    isPointInPath(x2, y2) {
+    };
+    Context2.prototype.setLineDash = function(nums) {
+      var _this = this;
+      return this._ctx.setLineDash(nums.map(function(n) {
+        return _this._doSize(n);
+      }));
+    };
+    Context2.prototype.isPointInPath = function(x2, y2) {
       return this._ctx.isPointInPath(this._doX(x2), this._doY(y2));
-    }
-    isPointInPathWithoutScroll(x2, y2) {
+    };
+    Context2.prototype.isPointInPathWithoutScroll = function(x2, y2) {
       return this._ctx.isPointInPath(this._doSize(x2), this._doSize(y2));
-    }
-    setStrokeStyle(color2) {
+    };
+    Context2.prototype.setStrokeStyle = function(color2) {
       this._ctx.strokeStyle = color2;
-    }
-    stroke() {
+    };
+    Context2.prototype.stroke = function() {
       return this._ctx.stroke();
-    }
-    translate(x2, y2) {
+    };
+    Context2.prototype.translate = function(x2, y2) {
       return this._ctx.translate(this._doSize(x2), this._doSize(y2));
-    }
-    rotate(angle2) {
+    };
+    Context2.prototype.rotate = function(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];
+    };
+    Context2.prototype.drawImage = function() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+      var image = args[0];
+      var sx = args[1];
+      var sy = args[2];
+      var sw = args[3];
+      var sh = args[4];
+      var dx = args[args.length - 4];
+      var dy = args[args.length - 3];
+      var dw = args[args.length - 2];
+      var 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) {
+    };
+    Context2.prototype.createPattern = function(image, repetition) {
       return this._ctx.createPattern(image, repetition);
-    }
-    measureText(text2) {
+    };
+    Context2.prototype.measureText = function(text2) {
       return this._ctx.measureText(text2);
-    }
-    setTextAlign(align) {
+    };
+    Context2.prototype.setTextAlign = function(align) {
       this._ctx.textAlign = align;
-    }
-    fillText(text2, x2, y2, maxWidth) {
+    };
+    Context2.prototype.fillText = function(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) {
+    };
+    Context2.prototype.strokeText = function(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 = [];
+    };
+    Context2.prototype.setFont = function(opts) {
+      var strList = [];
       if (opts.fontWeight === "bold") {
-        strList.push(`${opts.fontWeight}`);
+        strList.push("".concat(opts.fontWeight));
       }
-      strList.push(`${this._doSize(opts.fontSize || 12)}px`);
-      strList.push(`${opts.fontFamily || "sans-serif"}`);
-      this._ctx.font = `${strList.join(" ")}`;
-    }
-    setTextBaseline(baseline) {
+      strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
+      strList.push("".concat(opts.fontFamily || "sans-serif"));
+      this._ctx.font = "".concat(strList.join(" "));
+    };
+    Context2.prototype.setTextBaseline = function(baseline) {
       this._ctx.textBaseline = baseline;
-    }
-    setGlobalAlpha(alpha) {
+    };
+    Context2.prototype.setGlobalAlpha = function(alpha) {
       this._ctx.globalAlpha = alpha;
-    }
-    save() {
+    };
+    Context2.prototype.save = function() {
       this._ctx.save();
-    }
-    restore() {
+    };
+    Context2.prototype.restore = function() {
       this._ctx.restore();
-    }
-    scale(ratioX, ratioY) {
+    };
+    Context2.prototype.scale = function(ratioX, ratioY) {
       this._ctx.scale(ratioX, ratioY);
-    }
-    setShadowColor(color2) {
+    };
+    Context2.prototype.setShadowColor = function(color2) {
       this._ctx.shadowColor = color2;
-    }
-    setShadowOffsetX(offsetX) {
+    };
+    Context2.prototype.setShadowOffsetX = function(offsetX) {
       this._ctx.shadowOffsetX = this._doSize(offsetX);
-    }
-    setShadowOffsetY(offsetY) {
+    };
+    Context2.prototype.setShadowOffsetY = function(offsetY) {
       this._ctx.shadowOffsetY = this._doSize(offsetY);
-    }
-    setShadowBlur(blur) {
+    };
+    Context2.prototype.setShadowBlur = function(blur) {
       this._ctx.shadowBlur = this._doSize(blur);
-    }
-    ellipse(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    };
+    Context2.prototype.ellipse = function(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) {
+    };
+    Context2.prototype._doSize = function(num) {
       return this._opts.devicePixelRatio * num;
-    }
-    _doX(x2) {
-      const { scale, scrollX } = this._transform;
-      const _x = (x2 - scrollX) / scale;
+    };
+    Context2.prototype._doX = function(x2) {
+      var _a2 = this._transform, scale = _a2.scale, scrollX = _a2.scrollX;
+      var _x = (x2 - scrollX) / scale;
       return this._doSize(_x);
-    }
-    _doY(y2) {
-      const { scale, scrollY } = this._transform;
-      const _y = (y2 - scrollY) / scale;
+    };
+    Context2.prototype._doY = function(y2) {
+      var _a2 = this._transform, scale = _a2.scale, scrollY = _a2.scrollY;
+      var _y = (y2 - scrollY) / scale;
       return this._doSize(_y);
-    }
-  };
-  function number$1(value) {
+    };
+    return Context2;
+  }();
+  function number$2(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
-  function x$1(value) {
-    return number$1(value);
+  function x$2(value) {
+    return number$2(value);
   }
-  function y$1(value) {
-    return number$1(value);
+  function y$2(value) {
+    return number$2(value);
   }
-  function w$1(value) {
+  function w$2(value) {
     return typeof value === "number" && value >= 0;
   }
-  function h$1(value) {
+  function h$2(value) {
     return typeof value === "number" && value >= 0;
   }
-  function angle$1(value) {
+  function angle$2(value) {
     return typeof value === "number" && value >= -360 && value <= 360;
   }
-  function borderWidth$1(value) {
-    return w$1(value);
+  function borderWidth$2(value) {
+    return w$2(value);
   }
-  function borderRadius$1(value) {
-    return number$1(value) && value >= 0;
+  function borderRadius$2(value) {
+    return number$2(value) && value >= 0;
   }
-  function color$1(value) {
-    return isColorStr(value);
+  function color$2(value) {
+    return isColorStr$2(value);
   }
-  function imageURL$1(value) {
-    return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`);
+  function imageURL$2(value) {
+    return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value));
   }
-  function imageBase64$1(value) {
-    return typeof value === "string" && /^(data:image\/)/.test(`${value}`);
+  function imageBase64$2(value) {
+    return typeof value === "string" && /^(data:image\/)/.test("".concat(value));
   }
-  function imageSrc$1(value) {
-    return imageBase64$1(value) || imageURL$1(value);
+  function imageSrc$2(value) {
+    return imageBase64$2(value) || imageURL$2(value);
   }
-  function svg$1(value) {
-    return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim());
+  function svg$2(value) {
+    return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim());
   }
-  function html$1(value) {
-    let result = false;
+  function html$2(value) {
+    var result = false;
     if (typeof value === "string") {
-      let div = document.createElement("div");
+      var div = document.createElement("div");
       div.innerHTML = value;
       if (div.children.length > 0) {
         result = true;
@@ -465,53 +584,53 @@ var iDrawCore = function() {
     }
     return result;
   }
-  function text$1(value) {
+  function text$2(value) {
     return typeof value === "string";
   }
-  function fontSize$1(value) {
-    return number$1(value) && value > 0;
+  function fontSize$2(value) {
+    return number$2(value) && value > 0;
   }
-  function lineHeight$1(value) {
-    return number$1(value) && value > 0;
+  function lineHeight$2(value) {
+    return number$2(value) && value > 0;
   }
-  function strokeWidth$1(value) {
-    return number$1(value) && value > 0;
+  function strokeWidth$2(value) {
+    return number$2(value) && value > 0;
   }
-  function textAlign$1(value) {
+  function textAlign$2(value) {
     return ["center", "left", "right"].includes(value);
   }
-  function fontFamily$1(value) {
+  function fontFamily$2(value) {
     return typeof value === "string" && value.length > 0;
   }
-  function fontWeight$1(value) {
+  function fontWeight$2(value) {
     return ["bold"].includes(value);
   }
-  const is$1 = {
-    x: x$1,
-    y: y$1,
-    w: w$1,
-    h: h$1,
-    angle: angle$1,
-    number: number$1,
-    borderWidth: borderWidth$1,
-    borderRadius: borderRadius$1,
-    color: color$1,
-    imageSrc: imageSrc$1,
-    imageURL: imageURL$1,
-    imageBase64: imageBase64$1,
-    svg: svg$1,
-    html: html$1,
-    text: text$1,
-    fontSize: fontSize$1,
-    lineHeight: lineHeight$1,
-    textAlign: textAlign$1,
-    fontFamily: fontFamily$1,
-    fontWeight: fontWeight$1,
-    strokeWidth: strokeWidth$1
+  var is$3 = {
+    x: x$2,
+    y: y$2,
+    w: w$2,
+    h: h$2,
+    angle: angle$2,
+    number: number$2,
+    borderWidth: borderWidth$2,
+    borderRadius: borderRadius$2,
+    color: color$2,
+    imageSrc: imageSrc$2,
+    imageURL: imageURL$2,
+    imageBase64: imageBase64$2,
+    svg: svg$2,
+    html: html$2,
+    text: text$2,
+    fontSize: fontSize$2,
+    lineHeight: lineHeight$2,
+    textAlign: textAlign$2,
+    fontFamily: fontFamily$2,
+    fontWeight: fontWeight$2,
+    strokeWidth: strokeWidth$2
   };
   function attrs$1(attrs2) {
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = attrs2;
-    if (!(is$1.x(x2) && is$1.y(y2) && is$1.w(w2) && is$1.h(h2) && is$1.angle(angle2))) {
+    var x2 = attrs2.x, y2 = attrs2.y, w2 = attrs2.w, h2 = attrs2.h, angle2 = attrs2.angle;
+    if (!(is$3.x(x2) && is$3.y(y2) && is$3.w(w2) && is$3.h(h2) && is$3.angle(angle2))) {
       return false;
     }
     if (!(angle2 >= -360 && angle2 <= 360)) {
@@ -519,22 +638,25 @@ var iDrawCore = function() {
     }
     return true;
   }
-  function box$1(desc = {}) {
-    const { borderColor, borderRadius: borderRadius2, borderWidth: borderWidth2 } = desc;
-    if (desc.hasOwnProperty("borderColor") && !is$1.color(borderColor)) {
+  function box$1(desc) {
+    if (desc === void 0) {
+      desc = {};
+    }
+    var borderColor = desc.borderColor, borderRadius2 = desc.borderRadius, borderWidth2 = desc.borderWidth;
+    if (desc.hasOwnProperty("borderColor") && !is$3.color(borderColor)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderRadius") && !is$1.number(borderRadius2)) {
+    if (desc.hasOwnProperty("borderRadius") && !is$3.number(borderRadius2)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderWidth") && !is$1.number(borderWidth2)) {
+    if (desc.hasOwnProperty("borderWidth") && !is$3.number(borderWidth2)) {
       return false;
     }
     return true;
   }
   function rectDesc$1(desc) {
-    const { bgColor } = desc;
-    if (desc.hasOwnProperty("bgColor") && !is$1.color(bgColor)) {
+    var bgColor = desc.bgColor;
+    if (desc.hasOwnProperty("bgColor") && !is$3.color(bgColor)) {
       return false;
     }
     if (!box$1(desc)) {
@@ -543,69 +665,69 @@ var iDrawCore = function() {
     return true;
   }
   function circleDesc$1(desc) {
-    const { bgColor, borderColor, borderWidth: borderWidth2 } = desc;
-    if (desc.hasOwnProperty("bgColor") && !is$1.color(bgColor)) {
+    var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth2 = desc.borderWidth;
+    if (desc.hasOwnProperty("bgColor") && !is$3.color(bgColor)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderColor") && !is$1.color(borderColor)) {
+    if (desc.hasOwnProperty("borderColor") && !is$3.color(borderColor)) {
       return false;
     }
-    if (desc.hasOwnProperty("borderWidth") && !is$1.number(borderWidth2)) {
+    if (desc.hasOwnProperty("borderWidth") && !is$3.number(borderWidth2)) {
       return false;
     }
     return true;
   }
   function imageDesc$1(desc) {
-    const { src } = desc;
-    if (!is$1.imageSrc(src)) {
+    var src = desc.src;
+    if (!is$3.imageSrc(src)) {
       return false;
     }
     return true;
   }
   function svgDesc$1(desc) {
-    const { svg: svg2 } = desc;
-    if (!is$1.svg(svg2)) {
+    var svg2 = desc.svg;
+    if (!is$3.svg(svg2)) {
       return false;
     }
     return true;
   }
   function htmlDesc$1(desc) {
-    const { html: html2 } = desc;
-    if (!is$1.html(html2)) {
+    var html2 = desc.html;
+    if (!is$3.html(html2)) {
       return false;
     }
     return true;
   }
   function textDesc$1(desc) {
-    const { text: text2, color: color2, fontSize: fontSize2, lineHeight: lineHeight2, fontFamily: fontFamily2, textAlign: textAlign2, fontWeight: fontWeight2, bgColor, strokeWidth: strokeWidth2, strokeColor } = desc;
-    if (!is$1.text(text2)) {
+    var text2 = desc.text, color2 = desc.color, fontSize2 = desc.fontSize, lineHeight2 = desc.lineHeight, fontFamily2 = desc.fontFamily, textAlign2 = desc.textAlign, fontWeight2 = desc.fontWeight, bgColor = desc.bgColor, strokeWidth2 = desc.strokeWidth, strokeColor = desc.strokeColor;
+    if (!is$3.text(text2)) {
       return false;
     }
-    if (!is$1.color(color2)) {
+    if (!is$3.color(color2)) {
       return false;
     }
-    if (!is$1.fontSize(fontSize2)) {
+    if (!is$3.fontSize(fontSize2)) {
       return false;
     }
-    if (desc.hasOwnProperty("bgColor") && !is$1.color(bgColor)) {
+    if (desc.hasOwnProperty("bgColor") && !is$3.color(bgColor)) {
       return false;
     }
-    if (desc.hasOwnProperty("fontWeight") && !is$1.fontWeight(fontWeight2)) {
+    if (desc.hasOwnProperty("fontWeight") && !is$3.fontWeight(fontWeight2)) {
       return false;
     }
-    if (desc.hasOwnProperty("lineHeight") && !is$1.lineHeight(lineHeight2)) {
+    if (desc.hasOwnProperty("lineHeight") && !is$3.lineHeight(lineHeight2)) {
       return false;
     }
-    if (desc.hasOwnProperty("fontFamily") && !is$1.fontFamily(fontFamily2)) {
+    if (desc.hasOwnProperty("fontFamily") && !is$3.fontFamily(fontFamily2)) {
       return false;
     }
-    if (desc.hasOwnProperty("textAlign") && !is$1.textAlign(textAlign2)) {
+    if (desc.hasOwnProperty("textAlign") && !is$3.textAlign(textAlign2)) {
       return false;
     }
-    if (desc.hasOwnProperty("strokeWidth") && !is$1.strokeWidth(strokeWidth2)) {
+    if (desc.hasOwnProperty("strokeWidth") && !is$3.strokeWidth(strokeWidth2)) {
       return false;
     }
-    if (desc.hasOwnProperty("strokeColor") && !is$1.color(strokeColor)) {
+    if (desc.hasOwnProperty("strokeColor") && !is$3.color(strokeColor)) {
       return false;
     }
     if (!box$1(desc)) {
@@ -613,7 +735,7 @@ var iDrawCore = function() {
     }
     return true;
   }
-  const check$1 = {
+  var check$1 = {
     attrs: attrs$1,
     textDesc: textDesc$1,
     rectDesc: rectDesc$1,
@@ -622,42 +744,43 @@ var iDrawCore = function() {
     svgDesc: svgDesc$1,
     htmlDesc: htmlDesc$1
   };
-  const util = {
-    is: is$1,
+  var default_1$1 = Object.freeze({
+    __proto__: null,
+    is: is$3,
     check: check$1,
     delay,
     compose,
     throttle: throttle$1,
-    loadImage,
-    loadSVG,
-    loadHTML,
+    loadImage: loadImage$1,
+    loadSVG: loadSVG$1,
+    loadHTML: loadHTML$1,
     downloadImageFromCanvas,
     toColorHexStr,
     toColorHexNum,
-    isColorStr,
-    createUUID,
-    istype,
-    deepClone,
+    isColorStr: isColorStr$2,
+    createUUID: createUUID$2,
+    istype: istype$1,
+    deepClone: deepClone$2,
     Context: Context$1
-  };
-  class BoardEvent {
-    constructor() {
+  });
+  var BoardEvent = function() {
+    function BoardEvent2() {
       this._listeners = /* @__PURE__ */ new Map();
     }
-    on(eventKey, callback) {
+    BoardEvent2.prototype.on = function(eventKey, callback) {
       if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+        var callbacks = this._listeners.get(eventKey);
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
         this._listeners.set(eventKey, callbacks || []);
       } else {
         this._listeners.set(eventKey, [callback]);
       }
-    }
-    off(eventKey, callback) {
+    };
+    BoardEvent2.prototype.off = function(eventKey, callback) {
       if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+        var callbacks = this._listeners.get(eventKey);
         if (Array.isArray(callbacks)) {
-          for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+          for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
             if (callbacks[i] === callback) {
               callbacks.splice(i, 1);
               break;
@@ -666,28 +789,29 @@ var iDrawCore = function() {
         }
         this._listeners.set(eventKey, callbacks || []);
       }
-    }
-    trigger(eventKey, arg) {
-      const callbacks = this._listeners.get(eventKey);
+    };
+    BoardEvent2.prototype.trigger = function(eventKey, arg) {
+      var callbacks = this._listeners.get(eventKey);
       if (Array.isArray(callbacks)) {
-        callbacks.forEach((cb) => {
+        callbacks.forEach(function(cb) {
           cb(arg);
         });
         return true;
       } else {
         return false;
       }
-    }
-    has(name) {
+    };
+    BoardEvent2.prototype.has = function(name) {
       if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+        var list = this._listeners.get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
-    }
-  }
+    };
+    return BoardEvent2;
+  }();
   function createTempData() {
     return {
       prevClickPoint: null,
@@ -701,22 +825,23 @@ var iDrawCore = function() {
       }
     };
   }
-  let TempData$2 = class TempData {
-    constructor() {
+  var TempData$2 = function() {
+    function TempData2() {
       this._temp = createTempData();
     }
-    set(name, value) {
+    TempData2.prototype.set = function(name, value) {
       this._temp[name] = value;
-    }
-    get(name) {
+    };
+    TempData2.prototype.get = function(name) {
       return this._temp[name];
-    }
-    clear() {
+    };
+    TempData2.prototype.clear = function() {
       this._temp = createTempData();
-    }
-  };
-  class ScreenWatcher {
-    constructor(canvas, ctx) {
+    };
+    return TempData2;
+  }();
+  var ScreenWatcher = function() {
+    function ScreenWatcher2(canvas, ctx) {
       this._isMoving = false;
       this._temp = new TempData$2();
       this._container = window;
@@ -725,18 +850,18 @@ var iDrawCore = function() {
       this._initEvent();
       this._event = new BoardEvent();
     }
-    setStatusMap(statusMap) {
+    ScreenWatcher2.prototype.setStatusMap = function(statusMap) {
       this._temp.set("statusMap", statusMap);
-    }
-    on(name, callback) {
+    };
+    ScreenWatcher2.prototype.on = function(name, callback) {
       this._event.on(name, callback);
-    }
-    off(name, callback) {
+    };
+    ScreenWatcher2.prototype.off = function(name, callback) {
       this._event.off(name, callback);
-    }
-    _initEvent() {
-      const canvas = this._canvas;
-      const container = this._container;
+    };
+    ScreenWatcher2.prototype._initEvent = function() {
+      var canvas = this._canvas;
+      var container = this._container;
       container.addEventListener("mousemove", this._listenWindowMove.bind(this), false);
       container.addEventListener("mouseup", this._listenWindowMoveEnd.bind(this), false);
       canvas.addEventListener("mousemove", this._listenHover.bind(this), false);
@@ -750,11 +875,11 @@ var iDrawCore = function() {
       canvas.addEventListener("mouseover", this._listenCanvasMoveOver.bind(this), true);
       canvas.addEventListener("mouseleave", this._listenCanvasMoveLeave.bind(this), true);
       this._initParentEvent();
-    }
-    _initParentEvent() {
+    };
+    ScreenWatcher2.prototype._initParentEvent = function() {
       try {
-        let target = window;
-        const targetOrigin = target.origin;
+        var target = window;
+        var targetOrigin = target.origin;
         while (target.self !== target.top) {
           if (target.self !== target.parent) {
             if (target.origin === targetOrigin) {
@@ -769,20 +894,20 @@ var iDrawCore = function() {
       } catch (err) {
         console.warn(err);
       }
-    }
-    _listenHover(e) {
+    };
+    ScreenWatcher2.prototype._listenHover = function(e) {
       e.preventDefault();
-      const p = this._getPosition(e);
+      var p = this._getPosition(e);
       if (this._isVaildPoint(p)) {
         if (this._event.has("hover")) {
           this._event.trigger("hover", p);
         }
       }
       this._isMoving = true;
-    }
-    _listenMoveStart(e) {
+    };
+    ScreenWatcher2.prototype._listenMoveStart = function(e) {
       e.preventDefault();
-      const p = this._getPosition(e);
+      var p = this._getPosition(e);
       if (this._isVaildPoint(p)) {
         if (this._event.has("point")) {
           this._event.trigger("point", p);
@@ -792,28 +917,28 @@ var iDrawCore = function() {
         }
       }
       this._isMoving = true;
-    }
-    _listenMove(e) {
+    };
+    ScreenWatcher2.prototype._listenMove = function(e) {
       e.preventDefault();
       e.stopPropagation();
       if (this._event.has("move") && this._isMoving === true) {
-        const p = this._getPosition(e);
+        var p = this._getPosition(e);
         if (this._isVaildPoint(p)) {
           this._event.trigger("move", p);
         }
       }
-    }
-    _listenMoveEnd(e) {
+    };
+    ScreenWatcher2.prototype._listenMoveEnd = function(e) {
       e.preventDefault();
       if (this._event.has("moveEnd")) {
-        const p = this._getPosition(e);
+        var p = this._getPosition(e);
         if (this._isVaildPoint(p)) {
           this._event.trigger("moveEnd", p);
         }
       }
       this._isMoving = false;
-    }
-    _listSameOriginParentWindow() {
+    };
+    ScreenWatcher2.prototype._listSameOriginParentWindow = function() {
       if (this._temp.get("isHoverCanvas")) {
         if (this._event.has("leave")) {
           this._event.trigger("leave", void 0);
@@ -827,59 +952,59 @@ var iDrawCore = function() {
       this._isMoving = false;
       this._temp.set("isDragCanvas", false);
       this._temp.set("isHoverCanvas", false);
-    }
-    _listenCanvasMoveStart() {
+    };
+    ScreenWatcher2.prototype._listenCanvasMoveStart = function() {
       if (this._temp.get("isHoverCanvas")) {
         this._temp.set("isDragCanvas", true);
       }
-    }
-    _listenCanvasMoveEnd() {
+    };
+    ScreenWatcher2.prototype._listenCanvasMoveEnd = function() {
       this._temp.set("isDragCanvas", false);
-    }
-    _listenCanvasMoveOver() {
+    };
+    ScreenWatcher2.prototype._listenCanvasMoveOver = function() {
       this._temp.set("isHoverCanvas", true);
-    }
-    _listenCanvasMoveLeave() {
+    };
+    ScreenWatcher2.prototype._listenCanvasMoveLeave = function() {
       this._temp.set("isHoverCanvas", false);
       if (this._event.has("leave")) {
         this._event.trigger("leave", void 0);
       }
-    }
-    _listenWindowMove(e) {
+    };
+    ScreenWatcher2.prototype._listenWindowMove = function(e) {
       if (this._temp.get("isDragCanvas") !== true) {
         return;
       }
       e.preventDefault();
       e.stopPropagation();
       if (this._event.has("move") && this._isMoving === true) {
-        const p = this._getPosition(e);
+        var p = this._getPosition(e);
         if (this._isVaildPoint(p)) {
           this._event.trigger("move", p);
         }
       }
-    }
-    _listenWindowMoveEnd(e) {
+    };
+    ScreenWatcher2.prototype._listenWindowMoveEnd = function(e) {
       if (!this._temp.get("isDragCanvas") === true) {
         return;
       }
       e.preventDefault();
       if (this._event.has("moveEnd")) {
-        const p = this._getPosition(e);
+        var p = this._getPosition(e);
         if (this._isVaildPoint(p)) {
           this._event.trigger("moveEnd", p);
         }
       }
       this._temp.set("isDragCanvas", false);
       this._isMoving = false;
-    }
-    _listenCanvasWheel(e) {
+    };
+    ScreenWatcher2.prototype._listenCanvasWheel = function(e) {
       if (this._event.has("wheelX") && (e.deltaX > 0 || e.deltaX < 0)) {
         this._event.trigger("wheelX", e.deltaX);
       }
       if (this._event.has("wheelY") && (e.deltaY > 0 || e.deltaY < 0)) {
         this._event.trigger("wheelY", e.deltaY);
       }
-      const { canScrollYNext, canScrollYPrev } = this._temp.get("statusMap");
+      var _a2 = this._temp.get("statusMap"), canScrollYNext = _a2.canScrollYNext, canScrollYPrev = _a2.canScrollYPrev;
       if (e.deltaX > 0 && e.deltaX < 0) {
         e.preventDefault();
       } else if (e.deltaY > 0 && canScrollYNext === true) {
@@ -887,14 +1012,14 @@ var iDrawCore = function() {
       } else if (e.deltaY < 0 && canScrollYPrev === true) {
         e.preventDefault();
       }
-    }
-    _listenCanvasClick(e) {
+    };
+    ScreenWatcher2.prototype._listenCanvasClick = function(e) {
       e.preventDefault();
-      const maxLimitTime = 500;
-      const p = this._getPosition(e);
-      const t = Date.now();
+      var maxLimitTime = 500;
+      var p = this._getPosition(e);
+      var t = Date.now();
       if (this._isVaildPoint(p)) {
-        const preClickPoint = this._temp.get("prevClickPoint");
+        var preClickPoint = this._temp.get("prevClickPoint");
         if (preClickPoint && t - preClickPoint.t <= maxLimitTime && Math.abs(preClickPoint.x - p.x) <= 5 && Math.abs(preClickPoint.y - p.y) <= 5) {
           if (this._event.has("doubleClick")) {
             this._event.trigger("doubleClick", { x: p.x, y: p.y });
@@ -903,13 +1028,13 @@ var iDrawCore = function() {
           this._temp.set("prevClickPoint", { x: p.x, y: p.y, t });
         }
       }
-    }
-    _getPosition(e) {
-      const canvas = this._canvas;
-      let x2 = 0;
-      let y2 = 0;
+    };
+    ScreenWatcher2.prototype._getPosition = function(e) {
+      var canvas = this._canvas;
+      var x2 = 0;
+      var y2 = 0;
       if (e && e.touches && e.touches.length > 0) {
-        const touch = e.touches[0];
+        var touch = e.touches[0];
         if (touch) {
           x2 = touch.clientX;
           y2 = touch.clientY;
@@ -918,67 +1043,62 @@ var iDrawCore = function() {
         x2 = e.clientX;
         y2 = e.clientY;
       }
-      const p = {
+      var p = {
         x: x2 - canvas.getBoundingClientRect().left,
         y: y2 - canvas.getBoundingClientRect().top,
         t: Date.now()
       };
       return p;
-    }
-    _isVaildPoint(p) {
+    };
+    ScreenWatcher2.prototype._isVaildPoint = function(p) {
       return isAvailableNum(p.x) && isAvailableNum(p.y);
-    }
-  }
+    };
+    return ScreenWatcher2;
+  }();
   function isAvailableNum(num) {
     return num > 0 || num < 0 || num === 0;
   }
   function setStyle(dom, style) {
-    const originStyle = getStyle(dom);
-    const _style = Object.assign(Object.assign({}, originStyle), style);
-    const keys = Object.keys(_style);
-    let styleStr = "";
-    keys.forEach((key) => {
-      styleStr += `${key}:${_style[key] || ""};`;
+    var originStyle = getStyle(dom);
+    var _style = __assign$1$1(__assign$1$1({}, originStyle), style);
+    var keys = Object.keys(_style);
+    var styleStr = "";
+    keys.forEach(function(key) {
+      styleStr += "".concat(key, ":").concat(_style[key] || "", ";");
     });
     dom.setAttribute("style", styleStr);
   }
   function getStyle(dom) {
-    const styleObj = {};
-    const style = dom.getAttribute("style") || "";
-    const styleList = style.split(";");
-    styleList.forEach((item) => {
-      const dataList = item.split(":");
+    var styleObj = {};
+    var style = dom.getAttribute("style") || "";
+    var styleList = style.split(";");
+    styleList.forEach(function(item) {
+      var dataList = item.split(":");
       if (dataList[0] && typeof dataList[0] === "string") {
         styleObj[dataList[0]] = dataList[1] || "";
       }
     });
     return styleObj;
   }
-  const minScrollerWidth = 12;
-  const scrollerAlpha = 0.12;
-  const scrollerThumbAlpha = 0.36;
-  const defaultScrollConfig = {
-    width: minScrollerWidth,
-    color: "#000000",
-    showBackground: true
+  var defaultScrollConfig = {
+    lineWidth: 12,
+    color: "#a0a0a0"
   };
-  class Scroller {
-    constructor(ctx, opts) {
+  var Scroller = function() {
+    function Scroller2(ctx, opts) {
       this._displayCtx = ctx;
       this._opts = this._getOpts(opts);
     }
-    draw(position) {
-      const { width, height, scrollConfig } = this._opts;
-      const wrapper = this.calc(position);
-      const ctx = this._displayCtx;
+    Scroller2.prototype.draw = function(position) {
+      var _a2 = this._opts, width = _a2.width, height = _a2.height;
+      var wrapper = this.calc(position);
+      var ctx = this._displayCtx;
       if (wrapper.xSize > 0) {
-        if (scrollConfig.showBackground === true) {
-          ctx.globalAlpha = scrollerAlpha;
-          ctx.fillStyle = wrapper.color;
-          ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize));
-        }
-        drawBoxScrollerThumb(ctx, {
-          axis: "X",
+        ctx.globalAlpha = 0.2;
+        ctx.fillStyle = wrapper.color;
+        ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize));
+        ctx.globalAlpha = 1;
+        drawBox$1(ctx, {
           x: this._doSize(wrapper.translateX),
           y: this._doSize(height - wrapper.lineSize),
           w: this._doSize(wrapper.xSize),
@@ -988,13 +1108,11 @@ var iDrawCore = function() {
         });
       }
       if (wrapper.ySize > 0) {
-        if (scrollConfig.showBackground === true) {
-          ctx.globalAlpha = scrollerAlpha;
-          ctx.fillStyle = wrapper.color;
-          ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height));
-        }
-        drawBoxScrollerThumb(ctx, {
-          axis: "Y",
+        ctx.globalAlpha = 0.2;
+        ctx.fillStyle = wrapper.color;
+        ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height));
+        ctx.globalAlpha = 1;
+        drawBox$1(ctx, {
           x: this._doSize(width - wrapper.lineSize),
           y: this._doSize(wrapper.translateY),
           w: this._doSize(wrapper.lineSize),
@@ -1004,42 +1122,42 @@ var iDrawCore = function() {
         });
       }
       ctx.globalAlpha = 1;
-    }
-    resetSize(opts) {
-      this._opts = Object.assign(Object.assign({}, this._opts), opts);
-    }
-    isPointAtScrollY(p) {
-      const { width, height, scrollConfig } = this._opts;
-      const ctx = this._displayCtx;
+    };
+    Scroller2.prototype.resetSize = function(opts) {
+      this._opts = __assign$1$1(__assign$1$1({}, this._opts), opts);
+    };
+    Scroller2.prototype.isPointAtScrollY = function(p) {
+      var _a2 = this._opts, width = _a2.width, height = _a2.height, scrollConfig = _a2.scrollConfig;
+      var ctx = this._displayCtx;
       ctx.beginPath();
-      ctx.rect(this._doSize(width - scrollConfig.width), 0, this._doSize(scrollConfig.width), this._doSize(height));
+      ctx.rect(this._doSize(width - scrollConfig.lineWidth), 0, this._doSize(scrollConfig.lineWidth), this._doSize(height));
       ctx.closePath();
       if (ctx.isPointInPath(this._doSize(p.x), this._doSize(p.y))) {
         return true;
       }
       return false;
-    }
-    isPointAtScrollX(p) {
-      const { width, height, scrollConfig } = this._opts;
-      const ctx = this._displayCtx;
+    };
+    Scroller2.prototype.isPointAtScrollX = function(p) {
+      var _a2 = this._opts, width = _a2.width, height = _a2.height, scrollConfig = _a2.scrollConfig;
+      var ctx = this._displayCtx;
       ctx.beginPath();
-      ctx.rect(0, this._doSize(height - scrollConfig.width), this._doSize(width - scrollConfig.width), this._doSize(scrollConfig.width));
+      ctx.rect(0, this._doSize(height - scrollConfig.lineWidth), this._doSize(width - scrollConfig.lineWidth), this._doSize(scrollConfig.lineWidth));
       ctx.closePath();
       if (ctx.isPointInPath(this._doSize(p.x), this._doSize(p.y))) {
         return true;
       }
       return false;
-    }
-    getLineWidth() {
-      const lineWidth = this._opts.scrollConfig.width;
+    };
+    Scroller2.prototype.getLineWidth = function() {
+      var lineWidth = this._opts.scrollConfig.lineWidth;
       return lineWidth;
-    }
-    calc(position) {
-      const { width, height, scrollConfig } = this._opts;
-      const sliderMinSize = scrollConfig.width * 2.5;
-      const lineSize = scrollConfig.width;
-      let xSize = 0;
-      let ySize = 0;
+    };
+    Scroller2.prototype.calc = function(position) {
+      var _a2 = this._opts, width = _a2.width, height = _a2.height, scrollConfig = _a2.scrollConfig;
+      var sliderMinSize = scrollConfig.lineWidth * 2.5;
+      var lineSize = scrollConfig.lineWidth;
+      var xSize = 0;
+      var ySize = 0;
       if (position.left <= 0 && position.right <= 0) {
         xSize = Math.max(sliderMinSize, width - (Math.abs(position.left) + Math.abs(position.right)));
         if (xSize >= width)
@@ -1050,17 +1168,17 @@ var iDrawCore = function() {
         if (ySize >= height)
           ySize = 0;
       }
-      let translateX = 0;
+      var translateX = 0;
       if (xSize > 0) {
         translateX = xSize / 2 + (width - xSize) * Math.abs(position.left) / (Math.abs(position.left) + Math.abs(position.right));
         translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
       }
-      let translateY = 0;
+      var translateY = 0;
       if (ySize > 0) {
         translateY = ySize / 2 + (height - ySize) * Math.abs(position.top) / (Math.abs(position.top) + Math.abs(position.bottom));
         translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
       }
-      const scrollWrapper = {
+      var scrollWrapper = {
         lineSize,
         xSize,
         ySize,
@@ -1069,44 +1187,33 @@ var iDrawCore = function() {
         color: this._opts.scrollConfig.color
       };
       return scrollWrapper;
-    }
-    _doSize(num) {
+    };
+    Scroller2.prototype._doSize = function(num) {
       return num * this._opts.devicePixelRatio;
-    }
-    _getOpts(opts) {
-      var _a2;
-      const options = Object.assign(Object.assign({}, opts), {
-        scrollConfig: Object.assign(Object.assign({}, defaultScrollConfig), opts.scrollConfig || {})
-      });
+    };
+    Scroller2.prototype._getOpts = function(opts) {
+      var options = __assign$1$1({ scrollConfig: defaultScrollConfig }, opts);
       if (!options.scrollConfig) {
         options.scrollConfig = defaultScrollConfig;
       }
-      if (!(((_a2 = options === null || options === void 0 ? void 0 : options.scrollConfig) === null || _a2 === void 0 ? void 0 : _a2.width) > 0)) {
-        options.scrollConfig.width = defaultScrollConfig.width;
+      if (!(options.scrollConfig.lineWidth > 0)) {
+        options.scrollConfig.lineWidth = defaultScrollConfig.lineWidth;
       }
-      options.scrollConfig.width = Math.max(options.scrollConfig.width, defaultScrollConfig.width);
-      if (isColorStr(options.scrollConfig.color) !== true) {
+      options.scrollConfig.lineWidth = Math.max(options.scrollConfig.lineWidth, defaultScrollConfig.lineWidth);
+      if (isColorStr$2(options.scrollConfig.color) !== true) {
         options.scrollConfig.color = options.scrollConfig.color;
       }
       return options;
-    }
-  }
-  function drawBoxScrollerThumb(ctx, opts) {
-    let { x: x2, y: y2, h: h2, w: w2 } = opts;
-    const { color: color2, axis } = opts;
-    if (axis === "X") {
-      y2 = y2 + h2 / 4 + 1;
-      h2 = h2 / 2;
-    } else if (axis === "Y") {
-      x2 = x2 + w2 / 4 + 1;
-      w2 = w2 / 2;
-    }
-    let r = opts.r;
+    };
+    return Scroller2;
+  }();
+  function drawBox$1(ctx, opts) {
+    var x2 = opts.x, y2 = opts.y, w2 = opts.w, h2 = opts.h, color2 = opts.color;
+    var r = opts.r;
     r = Math.min(r, w2 / 2, h2 / 2);
     if (w2 < r * 2 || h2 < r * 2) {
       r = 0;
     }
-    ctx.globalAlpha = scrollerThumbAlpha;
     ctx.beginPath();
     ctx.moveTo(x2 + r, y2);
     ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
@@ -1116,88 +1223,77 @@ var iDrawCore = function() {
     ctx.closePath();
     ctx.fillStyle = color2;
     ctx.fill();
-    ctx.globalAlpha = 1;
-    ctx.beginPath();
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = color2;
-    ctx.moveTo(x2 + r, y2);
-    ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
-    ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
-    ctx.arcTo(x2, y2 + h2, x2, y2, r);
-    ctx.arcTo(x2, y2, x2 + w2, y2, r);
-    ctx.closePath();
-    ctx.stroke();
   }
-  const _opts$4 = Symbol("_opts");
-  const _ctx$2 = Symbol("_ctx");
-  class Screen {
-    constructor(ctx, opts) {
-      this[_opts$4] = opts;
-      this[_ctx$2] = ctx;
+  var _opts$1$1 = Symbol("_opts");
+  var _ctx$1 = Symbol("_ctx");
+  var Screen = function() {
+    function Screen2(ctx, opts) {
+      this[_opts$1$1] = opts;
+      this[_ctx$1] = ctx;
     }
-    resetSize(opts) {
-      this[_opts$4] = Object.assign(Object.assign({}, this[_opts$4]), opts);
-    }
-    calcScreen() {
-      const scaleRatio = this[_ctx$2].getTransform().scale;
-      const { width, height, contextWidth, contextHeight, devicePixelRatio: pxRatio } = this[_opts$4];
-      let canScrollXPrev = true;
-      let canScrollXNext = true;
-      let canScrollYPrev = true;
-      let canScrollYNext = true;
+    Screen2.prototype.resetSize = function(opts) {
+      this[_opts$1$1] = __assign$1$1(__assign$1$1({}, this[_opts$1$1]), opts);
+    };
+    Screen2.prototype.calcScreen = function() {
+      var scaleRatio = this[_ctx$1].getTransform().scale;
+      var _a2 = this[_opts$1$1], width = _a2.width, height = _a2.height, contextWidth = _a2.contextWidth, contextHeight = _a2.contextHeight, pxRatio = _a2.devicePixelRatio;
+      var canScrollXPrev = true;
+      var canScrollXNext = true;
+      var canScrollYPrev = true;
+      var canScrollYNext = true;
       if (contextWidth * scaleRatio <= width) {
-        this[_ctx$2].setTransform({
+        this[_ctx$1].setTransform({
           scrollX: (width - contextWidth * scaleRatio) / 2
         });
         canScrollXPrev = false;
         canScrollXNext = false;
       }
       if (contextHeight * scaleRatio <= height) {
-        this[_ctx$2].setTransform({
+        this[_ctx$1].setTransform({
           scrollY: (height - contextHeight * scaleRatio) / 2
         });
         canScrollYPrev = false;
         canScrollYNext = false;
       }
-      if (contextWidth * scaleRatio >= width && this[_ctx$2].getTransform().scrollX > 0) {
-        this[_ctx$2].setTransform({
+      if (contextWidth * scaleRatio >= width && this[_ctx$1].getTransform().scrollX > 0) {
+        this[_ctx$1].setTransform({
           scrollX: 0
         });
         canScrollXPrev = false;
       }
-      if (contextHeight * scaleRatio >= height && this[_ctx$2].getTransform().scrollY > 0) {
-        this[_ctx$2].setTransform({
+      if (contextHeight * scaleRatio >= height && this[_ctx$1].getTransform().scrollY > 0) {
+        this[_ctx$1].setTransform({
           scrollY: 0
         });
         canScrollYPrev = false;
       }
-      const { scrollX: _scrollX, scrollY: _scrollY } = this[_ctx$2].getTransform();
+      var _b2 = this[_ctx$1].getTransform(), _scrollX = _b2.scrollX, _scrollY = _b2.scrollY;
       if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) {
-        this[_ctx$2].setTransform({
+        this[_ctx$1].setTransform({
           scrollX: 0 - Math.abs(contextWidth * scaleRatio - width)
         });
         canScrollXNext = false;
       }
       if (_scrollY < 0 && Math.abs(_scrollY) > Math.abs(contextHeight * scaleRatio - height)) {
-        this[_ctx$2].setTransform({
+        this[_ctx$1].setTransform({
           scrollY: 0 - Math.abs(contextHeight * scaleRatio - height)
         });
         canScrollYNext = false;
       }
-      const { scrollX, scrollY } = this[_ctx$2].getTransform();
-      const size = {
+      var _c2 = this[_ctx$1].getTransform(), scrollX = _c2.scrollX, scrollY = _c2.scrollY;
+      var size = {
         x: scrollX * scaleRatio,
         y: scrollY * scaleRatio,
         w: contextWidth * scaleRatio,
         h: contextHeight * scaleRatio
       };
-      const deviceSize = {
+      var deviceSize = {
         x: scrollX * pxRatio,
         y: scrollY * pxRatio,
         w: contextWidth * pxRatio * scaleRatio,
         h: contextHeight * pxRatio * scaleRatio
       };
-      const position = {
+      var position = {
         top: scrollY,
         bottom: height - (contextHeight * scaleRatio + scrollY),
         left: scrollX,
@@ -1207,65 +1303,66 @@ var iDrawCore = function() {
         size,
         position,
         deviceSize,
-        width: this[_opts$4].width,
-        height: this[_opts$4].height,
-        devicePixelRatio: this[_opts$4].devicePixelRatio,
+        width: this[_opts$1$1].width,
+        height: this[_opts$1$1].height,
+        devicePixelRatio: this[_opts$1$1].devicePixelRatio,
         canScrollYPrev,
         canScrollYNext,
         canScrollXPrev,
         canScrollXNext
       };
-    }
-    calcScreenScroll(start, end, sliderSize, limitLen, moveDistance) {
-      let scrollDistance = start;
-      let scrollLen = limitLen - sliderSize;
+    };
+    Screen2.prototype.calcScreenScroll = function(start, end, sliderSize, limitLen, moveDistance) {
+      var scrollDistance = start;
+      var scrollLen = limitLen - sliderSize;
       if (start <= 0 && end <= 0) {
         scrollLen = Math.abs(start) + Math.abs(end);
       }
-      let unit = 1;
+      var unit = 1;
       if (scrollLen > 0) {
         unit = scrollLen / (limitLen - sliderSize);
       }
       scrollDistance = 0 - unit * moveDistance;
       return scrollDistance;
-    }
-  }
-  const _canvas = Symbol("_canvas");
-  const _displayCanvas = Symbol("_displayCanvas");
-  const _helperCanvas = Symbol("_helperCanvas");
-  const _mount = Symbol("_mount");
-  const _opts$3 = Symbol("_opts");
-  const _hasRendered = Symbol("_hasRendered");
-  const _ctx$1 = Symbol("_ctx");
-  const _helperCtx = Symbol("_helperCtx");
-  const _watcher = Symbol("_watcher");
-  const _render = Symbol("_render");
-  const _parsePrivateOptions = Symbol("_parsePrivateOptions");
-  const _scroller = Symbol("_scroller");
-  const _initEvent = Symbol("_initEvent");
-  const _doScrollX = Symbol("_doScrollX");
-  const _doScrollY = Symbol("_doScrollY");
-  const _doMoveScroll = Symbol("_doMoveScroll");
-  const _resetContext = Symbol("_resetContext");
-  const _screen = Symbol("_screen");
-  var _a$2;
-  const { throttle, Context } = util;
-  class Board {
-    constructor(mount, opts) {
-      this[_a$2] = false;
+    };
+    return Screen2;
+  }();
+  var _canvas = Symbol("_canvas");
+  var _displayCanvas = Symbol("_displayCanvas");
+  var _helperCanvas = Symbol("_helperCanvas");
+  var _mount = Symbol("_mount");
+  var _opts$2 = Symbol("_opts");
+  var _hasRendered = Symbol("_hasRendered");
+  var _ctx$2 = Symbol("_ctx");
+  var _helperCtx = Symbol("_helperCtx");
+  var _watcher = Symbol("_watcher");
+  var _render = Symbol("_render");
+  var _parsePrivateOptions = Symbol("_parsePrivateOptions");
+  var _scroller = Symbol("_scroller");
+  var _initEvent = Symbol("_initEvent");
+  var _doScrollX = Symbol("_doScrollX");
+  var _doScrollY = Symbol("_doScrollY");
+  var _doMoveScroll = Symbol("_doMoveScroll");
+  var _resetContext = Symbol("_resetContext");
+  var _screen = Symbol("_screen");
+  var _a$1;
+  var throttle$2 = default_1$1.throttle, Context$2 = default_1$1.Context;
+  var Board = function() {
+    function Board2(mount, opts) {
+      this[_a$1] = false;
       this[_mount] = mount;
       this[_canvas] = document.createElement("canvas");
       this[_helperCanvas] = document.createElement("canvas");
       this[_displayCanvas] = document.createElement("canvas");
       this[_mount].appendChild(this[_displayCanvas]);
-      this[_opts$3] = this[_parsePrivateOptions](opts);
-      const originCtx2d = this[_canvas].getContext("2d");
-      const displayCtx2d = this[_displayCanvas].getContext("2d");
-      const helperCtx2d = this[_helperCanvas].getContext("2d");
-      this[_ctx$1] = new Context(originCtx2d, this[_opts$3]);
-      this[_helperCtx] = new Context(helperCtx2d, this[_opts$3]);
-      this[_screen] = new Screen(this[_ctx$1], this[_opts$3]);
-      this[_watcher] = new ScreenWatcher(this[_displayCanvas], this[_ctx$1]);
+      this[_opts$2] = this[_parsePrivateOptions](opts);
+      var originCtx2d = this[_canvas].getContext("2d");
+      var displayCtx2d = this[_displayCanvas].getContext("2d");
+      var helperCtx2d = this[_helperCanvas].getContext("2d");
+      this[_ctx$2] = new Context$2(originCtx2d, this[_opts$2]);
+      this[_helperCtx] = new Context$2(helperCtx2d, this[_opts$2]);
+      this[_screen] = new Screen(this[_ctx$2], this[_opts$2]);
+      this[_watcher] = new ScreenWatcher(this[_displayCanvas], this[_ctx$2]);
       this[_scroller] = new Scroller(displayCtx2d, {
         width: opts.width,
         height: opts.height,
@@ -1274,30 +1371,30 @@ var iDrawCore = function() {
       });
       this[_render]();
     }
-    getDisplayContext2D() {
+    Board2.prototype.getDisplayContext2D = function() {
       return this[_displayCanvas].getContext("2d");
-    }
-    getOriginContext2D() {
-      return this[_ctx$1].getContext();
-    }
-    getHelperContext2D() {
+    };
+    Board2.prototype.getOriginContext2D = function() {
+      return this[_ctx$2].getContext();
+    };
+    Board2.prototype.getHelperContext2D = function() {
       return this[_helperCtx].getContext();
-    }
-    getContext() {
-      return this[_ctx$1];
-    }
-    getHelperContext() {
+    };
+    Board2.prototype.getContext = function() {
+      return this[_ctx$2];
+    };
+    Board2.prototype.getHelperContext = function() {
       return this[_helperCtx];
-    }
-    scale(scaleRatio) {
+    };
+    Board2.prototype.scale = function(scaleRatio) {
       if (scaleRatio > 0) {
-        this[_ctx$1].setTransform({ scale: scaleRatio });
+        this[_ctx$2].setTransform({ scale: scaleRatio });
         this[_helperCtx].setTransform({ scale: scaleRatio });
       }
-      const { position, size } = this[_screen].calcScreen();
+      var _b2 = this[_screen].calcScreen(), position = _b2.position, size = _b2.size;
       return { position, size };
-    }
-    scrollX(x2) {
+    };
+    Board2.prototype.scrollX = function(x2) {
       this[_watcher].setStatusMap({
         canScrollYPrev: true,
         canScrollYNext: true,
@@ -1305,10 +1402,10 @@ var iDrawCore = function() {
         canScrollXNext: true
       });
       if (x2 >= 0 || x2 < 0) {
-        this[_ctx$1].setTransform({ scrollX: x2 });
+        this[_ctx$2].setTransform({ scrollX: x2 });
         this[_helperCtx].setTransform({ scrollX: x2 });
       }
-      const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen();
+      var _b2 = this[_screen].calcScreen(), position = _b2.position, size = _b2.size, canScrollXNext = _b2.canScrollXNext, canScrollYNext = _b2.canScrollYNext, canScrollXPrev = _b2.canScrollXPrev, canScrollYPrev = _b2.canScrollYPrev;
       this[_watcher].setStatusMap({
         canScrollYPrev,
         canScrollYNext,
@@ -1316,8 +1413,8 @@ var iDrawCore = function() {
         canScrollXNext
       });
       return { position, size };
-    }
-    scrollY(y2) {
+    };
+    Board2.prototype.scrollY = function(y2) {
       this[_watcher].setStatusMap({
         canScrollYPrev: true,
         canScrollYNext: true,
@@ -1325,10 +1422,10 @@ var iDrawCore = function() {
         canScrollXNext: true
       });
       if (y2 >= 0 || y2 < 0) {
-        this[_ctx$1].setTransform({ scrollY: y2 });
+        this[_ctx$2].setTransform({ scrollY: y2 });
         this[_helperCtx].setTransform({ scrollY: y2 });
       }
-      const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen();
+      var _b2 = this[_screen].calcScreen(), position = _b2.position, size = _b2.size, canScrollXNext = _b2.canScrollXNext, canScrollYNext = _b2.canScrollYNext, canScrollXPrev = _b2.canScrollXPrev, canScrollYPrev = _b2.canScrollYPrev;
       this[_watcher].setStatusMap({
         canScrollYPrev,
         canScrollYNext,
@@ -1336,86 +1433,86 @@ var iDrawCore = function() {
         canScrollXNext
       });
       return { position, size };
-    }
-    getTransform() {
-      return this[_ctx$1].getTransform();
-    }
-    draw() {
+    };
+    Board2.prototype.getTransform = function() {
+      return this[_ctx$2].getTransform();
+    };
+    Board2.prototype.draw = function() {
       this.clear();
-      const { position, deviceSize, size } = this[_screen].calcScreen();
-      const displayCtx = this[_displayCanvas].getContext("2d");
+      var _b2 = this[_screen].calcScreen(), position = _b2.position, deviceSize = _b2.deviceSize, size = _b2.size;
+      var displayCtx = this[_displayCanvas].getContext("2d");
       displayCtx === null || displayCtx === void 0 ? void 0 : displayCtx.drawImage(this[_canvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h);
       displayCtx === null || displayCtx === void 0 ? void 0 : displayCtx.drawImage(this[_helperCanvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h);
-      if (this[_opts$3].canScroll === true) {
+      if (this[_opts$2].canScroll === true) {
         this[_scroller].draw(position);
       }
       return { position, size };
-    }
-    clear() {
-      const displayCtx = this[_displayCanvas].getContext("2d");
+    };
+    Board2.prototype.clear = function() {
+      var displayCtx = this[_displayCanvas].getContext("2d");
       displayCtx === null || displayCtx === void 0 ? void 0 : displayCtx.clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
-    }
-    on(name, callback) {
+    };
+    Board2.prototype.on = function(name, callback) {
       this[_watcher].on(name, callback);
-    }
-    off(name, callback) {
+    };
+    Board2.prototype.off = function(name, callback) {
       this[_watcher].off(name, callback);
-    }
-    getScreenInfo() {
+    };
+    Board2.prototype.getScreenInfo = function() {
       return this[_screen].calcScreen();
-    }
-    setCursor(cursor) {
+    };
+    Board2.prototype.setCursor = function(cursor) {
       this[_displayCanvas].style.cursor = cursor;
-    }
-    resetCursor() {
+    };
+    Board2.prototype.resetCursor = function() {
       this[_displayCanvas].style.cursor = "auto";
-    }
-    resetSize(opts) {
-      this[_opts$3] = Object.assign(Object.assign({}, this[_opts$3]), opts);
+    };
+    Board2.prototype.resetSize = function(opts) {
+      this[_opts$2] = __assign$1$1(__assign$1$1({}, this[_opts$2]), opts);
       this[_resetContext]();
-      this[_ctx$1].resetSize(opts);
+      this[_ctx$2].resetSize(opts);
       this[_helperCtx].resetSize(opts);
       this[_screen].resetSize(opts);
       this[_scroller].resetSize({
-        width: this[_opts$3].width,
-        height: this[_opts$3].height,
-        devicePixelRatio: this[_opts$3].devicePixelRatio
+        width: this[_opts$2].width,
+        height: this[_opts$2].height,
+        devicePixelRatio: this[_opts$2].devicePixelRatio
       });
       this.draw();
-    }
-    getScrollLineWidth() {
-      let lineWidth = 0;
-      if (this[_opts$3].canScroll === true) {
+    };
+    Board2.prototype.getScrollLineWidth = function() {
+      var lineWidth = 0;
+      if (this[_opts$2].canScroll === true) {
         lineWidth = this[_scroller].getLineWidth();
       }
       return lineWidth;
-    }
-    pointScreenToContext(screenPoint) {
-      const { scrollX, scrollY, scale } = this.getTransform();
-      const ctxPoint = {
+    };
+    Board2.prototype.pointScreenToContext = function(screenPoint) {
+      var _b2 = this.getTransform(), scrollX = _b2.scrollX, scrollY = _b2.scrollY, scale = _b2.scale;
+      var ctxPoint = {
         x: (screenPoint.x - scrollX) / scale,
         y: (screenPoint.y - scrollY) / scale
       };
       return ctxPoint;
-    }
-    pointContextToScreen(ctxPoint) {
-      const { scrollX, scrollY, scale } = this.getTransform();
-      const screenPoint = {
+    };
+    Board2.prototype.pointContextToScreen = function(ctxPoint) {
+      var _b2 = this.getTransform(), scrollX = _b2.scrollX, scrollY = _b2.scrollY, scale = _b2.scale;
+      var screenPoint = {
         x: ctxPoint.x * scale + scrollX,
         y: ctxPoint.y * scale + scrollY
       };
       return screenPoint;
-    }
-    [(_a$2 = _hasRendered, _render)]() {
+    };
+    Board2.prototype[_a$1 = _hasRendered, _render] = function() {
       if (this[_hasRendered] === true) {
         return;
       }
       this[_resetContext]();
       this[_initEvent]();
       this[_hasRendered] = true;
-    }
-    [_resetContext]() {
-      const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts$3];
+    };
+    Board2.prototype[_resetContext] = function() {
+      var _b2 = this[_opts$2], width = _b2.width, height = _b2.height, contextWidth = _b2.contextWidth, contextHeight = _b2.contextHeight, devicePixelRatio = _b2.devicePixelRatio;
       this[_canvas].width = contextWidth * devicePixelRatio;
       this[_canvas].height = contextHeight * devicePixelRatio;
       this[_helperCanvas].width = contextWidth * devicePixelRatio;
@@ -1423,98 +1520,1057 @@ var iDrawCore = function() {
       this[_displayCanvas].width = width * devicePixelRatio;
       this[_displayCanvas].height = height * devicePixelRatio;
       setStyle(this[_displayCanvas], {
-        width: `${width}px`,
-        height: `${height}px`
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px")
       });
-    }
-    [_parsePrivateOptions](opts) {
-      const defaultOpts = {
+    };
+    Board2.prototype[_parsePrivateOptions] = function(opts) {
+      var defaultOpts = {
         devicePixelRatio: 1
       };
-      return Object.assign(Object.assign({}, defaultOpts), opts);
-    }
-    [_initEvent]() {
+      return __assign$1$1(__assign$1$1({}, defaultOpts), opts);
+    };
+    Board2.prototype[_initEvent] = function() {
+      var _this = this;
       if (this[_hasRendered] === true) {
         return;
       }
-      if (this[_opts$3].canScroll === true) {
-        this.on("wheelX", throttle((deltaX) => {
-          this[_doScrollX](deltaX);
+      if (this[_opts$2].canScroll === true) {
+        this.on("wheelX", throttle$2(function(deltaX) {
+          _this[_doScrollX](deltaX);
         }, 16));
-        this.on("wheelY", throttle((deltaY) => {
-          this[_doScrollY](deltaY);
+        this.on("wheelY", throttle$2(function(deltaY) {
+          _this[_doScrollY](deltaY);
         }, 16));
-        let scrollType = null;
-        this.on("moveStart", throttle((p) => {
-          if (this[_scroller].isPointAtScrollX(p)) {
-            scrollType = "x";
-          } else if (this[_scroller].isPointAtScrollY(p)) {
-            scrollType = "y";
+        var scrollType_1 = null;
+        this.on("moveStart", throttle$2(function(p) {
+          if (_this[_scroller].isPointAtScrollX(p)) {
+            scrollType_1 = "x";
+          } else if (_this[_scroller].isPointAtScrollY(p)) {
+            scrollType_1 = "y";
           }
         }, 16));
-        this.on("move", throttle((p) => {
-          if (scrollType) {
-            this[_doMoveScroll](scrollType, p);
+        this.on("move", throttle$2(function(p) {
+          if (scrollType_1) {
+            _this[_doMoveScroll](scrollType_1, p);
           }
         }, 16));
-        this.on("moveEnd", throttle((p) => {
-          if (scrollType) {
-            this[_doMoveScroll](scrollType, p);
+        this.on("moveEnd", throttle$2(function(p) {
+          if (scrollType_1) {
+            _this[_doMoveScroll](scrollType_1, p);
           }
-          scrollType = null;
+          scrollType_1 = null;
         }, 16));
       }
-    }
-    [_doScrollX](dx, prevScrollX) {
-      const { width } = this[_opts$3];
-      let scrollX = prevScrollX;
+    };
+    Board2.prototype[_doScrollX] = function(dx, prevScrollX) {
+      var width = this[_opts$2].width;
+      var scrollX = prevScrollX;
       if (!(typeof scrollX === "number" && (scrollX > 0 || scrollX <= 0))) {
-        scrollX = this[_ctx$1].getTransform().scrollX;
+        scrollX = this[_ctx$2].getTransform().scrollX;
       }
-      const { position } = this[_screen].calcScreen();
-      const { xSize } = this[_scroller].calc(position);
-      const moveX = this[_screen].calcScreenScroll(position.left, position.right, xSize, width, dx);
+      var position = this[_screen].calcScreen().position;
+      var xSize = this[_scroller].calc(position).xSize;
+      var moveX = this[_screen].calcScreenScroll(position.left, position.right, xSize, width, dx);
       this.scrollX(scrollX + moveX);
       this.draw();
-    }
-    [_doScrollY](dy, prevScrollY) {
-      const { height } = this[_opts$3];
-      let scrollY = prevScrollY;
+    };
+    Board2.prototype[_doScrollY] = function(dy, prevScrollY) {
+      var height = this[_opts$2].height;
+      var scrollY = prevScrollY;
       if (!(typeof scrollY === "number" && (scrollY > 0 || scrollY <= 0))) {
-        scrollY = this[_ctx$1].getTransform().scrollY;
+        scrollY = this[_ctx$2].getTransform().scrollY;
       }
-      const { position } = this[_screen].calcScreen();
-      const { ySize } = this[_scroller].calc(position);
-      const moveY = this[_screen].calcScreenScroll(position.top, position.bottom, ySize, height, dy);
+      var position = this[_screen].calcScreen().position;
+      var ySize = this[_scroller].calc(position).ySize;
+      var moveY = this[_screen].calcScreenScroll(position.top, position.bottom, ySize, height, dy);
       this.scrollY(scrollY + moveY);
       this.draw();
-    }
-    [_doMoveScroll](scrollType, point) {
+    };
+    Board2.prototype[_doMoveScroll] = function(scrollType, point) {
       if (!scrollType) {
         return;
       }
-      const { position } = this[_screen].calcScreen();
-      const { xSize, ySize } = this[_scroller].calc(position);
-      if (scrollType === "x") {
-        this[_doScrollX](point.x - xSize / 2, 0);
-      } else if (scrollType === "y") {
-        this[_doScrollY](point.y - ySize / 2, 0);
+      var position = this[_screen].calcScreen().position;
+      var _b2 = this[_scroller].calc(position), xSize = _b2.xSize, ySize = _b2.ySize;
+      if (scrollType === "x") {
+        this[_doScrollX](point.x - xSize / 2, 0);
+      } else if (scrollType === "y") {
+        this[_doScrollY](point.y - ySize / 2, 0);
+      }
+    };
+    return Board2;
+  }();
+  var default_1$2 = /* @__PURE__ */ Object.freeze({
+    __proto__: null,
+    Board
+  });
+  function throttle(fn, timeout) {
+    var timer = -1;
+    return function() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+      if (timer > 0) {
+        return;
+      }
+      timer = setTimeout(function() {
+        fn.apply(void 0, args);
+        timer = -1;
+      }, timeout);
+    };
+  }
+  function isColorStr$1(color2) {
+    return typeof color2 === "string" && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2);
+  }
+  function createUUID$1() {
+    function str4() {
+      return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+    }
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
+  }
+  function deepClone$1(target) {
+    function _clone(t) {
+      var type = is$1$1(t);
+      if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
+        return t;
+      } else if (type === "Array") {
+        var arr_1 = [];
+        t.forEach(function(item) {
+          arr_1.push(_clone(item));
+        });
+        return arr_1;
+      } else if (type === "Object") {
+        var obj_1 = {};
+        var keys = Object.keys(t);
+        keys.forEach(function(key) {
+          obj_1[key] = _clone(t[key]);
+        });
+        return obj_1;
+      }
+    }
+    return _clone(target);
+  }
+  function is$1$1(data) {
+    return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
+  }
+  var __assign$2 = function() {
+    __assign$2 = Object.assign || function __assign2(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign$2.apply(this, arguments);
+  };
+  (function() {
+    function Context2(ctx, opts) {
+      this._opts = opts;
+      this._ctx = ctx;
+      this._transform = {
+        scale: 1,
+        scrollX: 0,
+        scrollY: 0
+      };
+    }
+    Context2.prototype.getContext = function() {
+      return this._ctx;
+    };
+    Context2.prototype.resetSize = function(opts) {
+      this._opts = __assign$2(__assign$2({}, this._opts), opts);
+    };
+    Context2.prototype.calcDeviceNum = function(num) {
+      return num * this._opts.devicePixelRatio;
+    };
+    Context2.prototype.calcScreenNum = function(num) {
+      return num / this._opts.devicePixelRatio;
+    };
+    Context2.prototype.getSize = function() {
+      return {
+        width: this._opts.width,
+        height: this._opts.height,
+        contextWidth: this._opts.contextWidth,
+        contextHeight: this._opts.contextHeight,
+        devicePixelRatio: this._opts.devicePixelRatio
+      };
+    };
+    Context2.prototype.setTransform = function(config) {
+      this._transform = __assign$2(__assign$2({}, this._transform), config);
+    };
+    Context2.prototype.getTransform = function() {
+      return {
+        scale: this._transform.scale,
+        scrollX: this._transform.scrollX,
+        scrollY: this._transform.scrollY
+      };
+    };
+    Context2.prototype.setFillStyle = function(color2) {
+      this._ctx.fillStyle = color2;
+    };
+    Context2.prototype.fill = function(fillRule) {
+      return this._ctx.fill(fillRule || "nonzero");
+    };
+    Context2.prototype.arc = function(x2, y2, radius, startAngle, endAngle, anticlockwise) {
+      return this._ctx.arc(this._doSize(x2), this._doSize(y2), this._doSize(radius), startAngle, endAngle, anticlockwise);
+    };
+    Context2.prototype.rect = function(x2, y2, w2, h2) {
+      return this._ctx.rect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
+    };
+    Context2.prototype.fillRect = function(x2, y2, w2, h2) {
+      return this._ctx.fillRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
+    };
+    Context2.prototype.clearRect = function(x2, y2, w2, h2) {
+      return this._ctx.clearRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
+    };
+    Context2.prototype.beginPath = function() {
+      return this._ctx.beginPath();
+    };
+    Context2.prototype.closePath = function() {
+      return this._ctx.closePath();
+    };
+    Context2.prototype.lineTo = function(x2, y2) {
+      return this._ctx.lineTo(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.moveTo = function(x2, y2) {
+      return this._ctx.moveTo(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.arcTo = function(x1, y1, x2, y2, radius) {
+      return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
+    };
+    Context2.prototype.setLineWidth = function(w2) {
+      return this._ctx.lineWidth = this._doSize(w2);
+    };
+    Context2.prototype.setLineDash = function(nums) {
+      var _this = this;
+      return this._ctx.setLineDash(nums.map(function(n) {
+        return _this._doSize(n);
+      }));
+    };
+    Context2.prototype.isPointInPath = function(x2, y2) {
+      return this._ctx.isPointInPath(this._doX(x2), this._doY(y2));
+    };
+    Context2.prototype.isPointInPathWithoutScroll = function(x2, y2) {
+      return this._ctx.isPointInPath(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.setStrokeStyle = function(color2) {
+      this._ctx.strokeStyle = color2;
+    };
+    Context2.prototype.stroke = function() {
+      return this._ctx.stroke();
+    };
+    Context2.prototype.translate = function(x2, y2) {
+      return this._ctx.translate(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.rotate = function(angle2) {
+      return this._ctx.rotate(angle2);
+    };
+    Context2.prototype.drawImage = function() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+      var image = args[0];
+      var sx = args[1];
+      var sy = args[2];
+      var sw = args[3];
+      var sh = args[4];
+      var dx = args[args.length - 4];
+      var dy = args[args.length - 3];
+      var dw = args[args.length - 2];
+      var 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));
+      }
+    };
+    Context2.prototype.createPattern = function(image, repetition) {
+      return this._ctx.createPattern(image, repetition);
+    };
+    Context2.prototype.measureText = function(text2) {
+      return this._ctx.measureText(text2);
+    };
+    Context2.prototype.setTextAlign = function(align) {
+      this._ctx.textAlign = align;
+    };
+    Context2.prototype.fillText = function(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));
+      }
+    };
+    Context2.prototype.strokeText = function(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));
+      }
+    };
+    Context2.prototype.setFont = function(opts) {
+      var strList = [];
+      if (opts.fontWeight === "bold") {
+        strList.push("".concat(opts.fontWeight));
+      }
+      strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
+      strList.push("".concat(opts.fontFamily || "sans-serif"));
+      this._ctx.font = "".concat(strList.join(" "));
+    };
+    Context2.prototype.setTextBaseline = function(baseline) {
+      this._ctx.textBaseline = baseline;
+    };
+    Context2.prototype.setGlobalAlpha = function(alpha) {
+      this._ctx.globalAlpha = alpha;
+    };
+    Context2.prototype.save = function() {
+      this._ctx.save();
+    };
+    Context2.prototype.restore = function() {
+      this._ctx.restore();
+    };
+    Context2.prototype.scale = function(ratioX, ratioY) {
+      this._ctx.scale(ratioX, ratioY);
+    };
+    Context2.prototype.setShadowColor = function(color2) {
+      this._ctx.shadowColor = color2;
+    };
+    Context2.prototype.setShadowOffsetX = function(offsetX) {
+      this._ctx.shadowOffsetX = this._doSize(offsetX);
+    };
+    Context2.prototype.setShadowOffsetY = function(offsetY) {
+      this._ctx.shadowOffsetY = this._doSize(offsetY);
+    };
+    Context2.prototype.setShadowBlur = function(blur) {
+      this._ctx.shadowBlur = this._doSize(blur);
+    };
+    Context2.prototype.ellipse = function(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);
+    };
+    Context2.prototype._doSize = function(num) {
+      return this._opts.devicePixelRatio * num;
+    };
+    Context2.prototype._doX = function(x2) {
+      var _a2 = this._transform, scale = _a2.scale, scrollX = _a2.scrollX;
+      var _x = (x2 - scrollX) / scale;
+      return this._doSize(_x);
+    };
+    Context2.prototype._doY = function(y2) {
+      var _a2 = this._transform, scale = _a2.scale, scrollY = _a2.scrollY;
+      var _y = (y2 - scrollY) / scale;
+      return this._doSize(_y);
+    };
+    return Context2;
+  })();
+  var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
+      d2.__proto__ = b2;
+    } || function(d2, b2) {
+      for (var p in b2)
+        if (Object.prototype.hasOwnProperty.call(b2, p))
+          d2[p] = b2[p];
+    };
+    return extendStatics(d, b);
+  };
+  function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  }
+  var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign2(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign$1.apply(this, arguments);
+  };
+  function __awaiter$1(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function(resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  }
+  function __generator$1(thisArg, body) {
+    var _ = { label: 0, sent: function() {
+      if (t[0] & 1)
+        throw t[1];
+      return t[1];
+    }, trys: [], ops: [] }, f, y2, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+      return this;
+    }), g;
+    function verb(n) {
+      return function(v) {
+        return step([n, v]);
+      };
+    }
+    function step(op) {
+      if (f)
+        throw new TypeError("Generator is already executing.");
+      while (_)
+        try {
+          if (f = 1, y2 && (t = op[0] & 2 ? y2["return"] : op[0] ? y2["throw"] || ((t = y2["return"]) && t.call(y2), 0) : y2.next) && !(t = t.call(y2, op[1])).done)
+            return t;
+          if (y2 = 0, t)
+            op = [op[0] & 2, t.value];
+          switch (op[0]) {
+            case 0:
+            case 1:
+              t = op;
+              break;
+            case 4:
+              _.label++;
+              return { value: op[1], done: false };
+            case 5:
+              _.label++;
+              y2 = op[1];
+              op = [0];
+              continue;
+            case 7:
+              op = _.ops.pop();
+              _.trys.pop();
+              continue;
+            default:
+              if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t[1]) {
+                _.label = t[1];
+                t = op;
+                break;
+              }
+              if (t && _.label < t[2]) {
+                _.label = t[2];
+                _.ops.push(op);
+                break;
+              }
+              if (t[2])
+                _.ops.pop();
+              _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e) {
+          op = [6, e];
+          y2 = 0;
+        } finally {
+          f = t = 0;
+        }
+      if (op[0] & 5)
+        throw op[1];
+      return { value: op[0] ? op[1] : void 0, done: true };
+    }
+  }
+  function isColorStr(color2) {
+    return typeof color2 === "string" && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2);
+  }
+  function createUUID() {
+    function str4() {
+      return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+    }
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
+  }
+  function deepClone(target) {
+    function _clone(t) {
+      var type = is$1(t);
+      if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
+        return t;
+      } else if (type === "Array") {
+        var arr_1 = [];
+        t.forEach(function(item) {
+          arr_1.push(_clone(item));
+        });
+        return arr_1;
+      } else if (type === "Object") {
+        var obj_1 = {};
+        var keys = Object.keys(t);
+        keys.forEach(function(key) {
+          obj_1[key] = _clone(t[key]);
+        });
+        return obj_1;
+      }
+    }
+    return _clone(target);
+  }
+  function is$1(data) {
+    return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
+  }
+  function parsePrototype(data) {
+    var typeStr = Object.prototype.toString.call(data) || "";
+    var result = typeStr.replace(/(\[object|\])/ig, "").trim();
+    return result;
+  }
+  var istype = {
+    type: function(data, lowerCase) {
+      var result = parsePrototype(data);
+      return lowerCase === true ? result.toLocaleLowerCase() : result;
+    },
+    array: function(data) {
+      return parsePrototype(data) === "Array";
+    },
+    json: function(data) {
+      return parsePrototype(data) === "Object";
+    },
+    function: function(data) {
+      return parsePrototype(data) === "Function";
+    },
+    asyncFunction: function(data) {
+      return parsePrototype(data) === "AsyncFunction";
+    },
+    string: function(data) {
+      return parsePrototype(data) === "String";
+    },
+    number: function(data) {
+      return parsePrototype(data) === "Number";
+    },
+    undefined: function(data) {
+      return parsePrototype(data) === "Undefined";
+    },
+    null: function(data) {
+      return parsePrototype(data) === "Null";
+    },
+    promise: function(data) {
+      return parsePrototype(data) === "Promise";
+    }
+  };
+  var __assign = function() {
+    __assign = Object.assign || function __assign2(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign.apply(this, arguments);
+  };
+  function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function(resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  }
+  function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() {
+      if (t[0] & 1)
+        throw t[1];
+      return t[1];
+    }, trys: [], ops: [] }, f, y2, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+      return this;
+    }), g;
+    function verb(n) {
+      return function(v) {
+        return step([n, v]);
+      };
+    }
+    function step(op) {
+      if (f)
+        throw new TypeError("Generator is already executing.");
+      while (_)
+        try {
+          if (f = 1, y2 && (t = op[0] & 2 ? y2["return"] : op[0] ? y2["throw"] || ((t = y2["return"]) && t.call(y2), 0) : y2.next) && !(t = t.call(y2, op[1])).done)
+            return t;
+          if (y2 = 0, t)
+            op = [op[0] & 2, t.value];
+          switch (op[0]) {
+            case 0:
+            case 1:
+              t = op;
+              break;
+            case 4:
+              _.label++;
+              return { value: op[1], done: false };
+            case 5:
+              _.label++;
+              y2 = op[1];
+              op = [0];
+              continue;
+            case 7:
+              op = _.ops.pop();
+              _.trys.pop();
+              continue;
+            default:
+              if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t[1]) {
+                _.label = t[1];
+                t = op;
+                break;
+              }
+              if (t && _.label < t[2]) {
+                _.label = t[2];
+                _.ops.push(op);
+                break;
+              }
+              if (t[2])
+                _.ops.pop();
+              _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e) {
+          op = [6, e];
+          y2 = 0;
+        } finally {
+          f = t = 0;
+        }
+      if (op[0] & 5)
+        throw op[1];
+      return { value: op[0] ? op[1] : void 0, done: true };
+    }
+  }
+  function parseHTMLToDataURL(html2, opts) {
+    var width = opts.width, height = opts.height;
+    return new Promise(function(resolve, reject) {
+      var _svg = '\n    <svg xmlns="http://www.w3.org/2000/svg" width="'.concat(width || "", '" height = "').concat(height || "", '">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ').concat(html2, "\n        </div>\n      </foreignObject>\n    </svg>\n    ");
+      var blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
+      var reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = function(event) {
+        var _a2;
+        var base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  function parseSVGToDataURL(svg2) {
+    return new Promise(function(resolve, reject) {
+      var _svg = svg2;
+      var blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
+      var reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = function(event) {
+        var _a2;
+        var base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  var Image = window.Image;
+  function loadImage(src) {
+    return new Promise(function(resolve, reject) {
+      var img = new Image();
+      img.onload = function() {
+        resolve(img);
+      };
+      img.onabort = reject;
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+  function loadSVG(svg2) {
+    return __awaiter(this, void 0, void 0, function() {
+      var dataURL, image;
+      return __generator(this, function(_a2) {
+        switch (_a2.label) {
+          case 0:
+            return [4, parseSVGToDataURL(svg2)];
+          case 1:
+            dataURL = _a2.sent();
+            return [4, loadImage(dataURL)];
+          case 2:
+            image = _a2.sent();
+            return [2, image];
+        }
+      });
+    });
+  }
+  function loadHTML(html2, opts) {
+    return __awaiter(this, void 0, void 0, function() {
+      var dataURL, image;
+      return __generator(this, function(_a2) {
+        switch (_a2.label) {
+          case 0:
+            return [4, parseHTMLToDataURL(html2, opts)];
+          case 1:
+            dataURL = _a2.sent();
+            return [4, loadImage(dataURL)];
+          case 2:
+            image = _a2.sent();
+            return [2, image];
+        }
+      });
+    });
+  }
+  var Context = function() {
+    function Context2(ctx, opts) {
+      this._opts = opts;
+      this._ctx = ctx;
+      this._transform = {
+        scale: 1,
+        scrollX: 0,
+        scrollY: 0
+      };
+    }
+    Context2.prototype.getContext = function() {
+      return this._ctx;
+    };
+    Context2.prototype.resetSize = function(opts) {
+      this._opts = __assign(__assign({}, this._opts), opts);
+    };
+    Context2.prototype.calcDeviceNum = function(num) {
+      return num * this._opts.devicePixelRatio;
+    };
+    Context2.prototype.calcScreenNum = function(num) {
+      return num / this._opts.devicePixelRatio;
+    };
+    Context2.prototype.getSize = function() {
+      return {
+        width: this._opts.width,
+        height: this._opts.height,
+        contextWidth: this._opts.contextWidth,
+        contextHeight: this._opts.contextHeight,
+        devicePixelRatio: this._opts.devicePixelRatio
+      };
+    };
+    Context2.prototype.setTransform = function(config) {
+      this._transform = __assign(__assign({}, this._transform), config);
+    };
+    Context2.prototype.getTransform = function() {
+      return {
+        scale: this._transform.scale,
+        scrollX: this._transform.scrollX,
+        scrollY: this._transform.scrollY
+      };
+    };
+    Context2.prototype.setFillStyle = function(color2) {
+      this._ctx.fillStyle = color2;
+    };
+    Context2.prototype.fill = function(fillRule) {
+      return this._ctx.fill(fillRule || "nonzero");
+    };
+    Context2.prototype.arc = function(x2, y2, radius, startAngle, endAngle, anticlockwise) {
+      return this._ctx.arc(this._doSize(x2), this._doSize(y2), this._doSize(radius), startAngle, endAngle, anticlockwise);
+    };
+    Context2.prototype.rect = function(x2, y2, w2, h2) {
+      return this._ctx.rect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
+    };
+    Context2.prototype.fillRect = function(x2, y2, w2, h2) {
+      return this._ctx.fillRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
+    };
+    Context2.prototype.clearRect = function(x2, y2, w2, h2) {
+      return this._ctx.clearRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
+    };
+    Context2.prototype.beginPath = function() {
+      return this._ctx.beginPath();
+    };
+    Context2.prototype.closePath = function() {
+      return this._ctx.closePath();
+    };
+    Context2.prototype.lineTo = function(x2, y2) {
+      return this._ctx.lineTo(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.moveTo = function(x2, y2) {
+      return this._ctx.moveTo(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.arcTo = function(x1, y1, x2, y2, radius) {
+      return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
+    };
+    Context2.prototype.setLineWidth = function(w2) {
+      return this._ctx.lineWidth = this._doSize(w2);
+    };
+    Context2.prototype.setLineDash = function(nums) {
+      var _this = this;
+      return this._ctx.setLineDash(nums.map(function(n) {
+        return _this._doSize(n);
+      }));
+    };
+    Context2.prototype.isPointInPath = function(x2, y2) {
+      return this._ctx.isPointInPath(this._doX(x2), this._doY(y2));
+    };
+    Context2.prototype.isPointInPathWithoutScroll = function(x2, y2) {
+      return this._ctx.isPointInPath(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.setStrokeStyle = function(color2) {
+      this._ctx.strokeStyle = color2;
+    };
+    Context2.prototype.stroke = function() {
+      return this._ctx.stroke();
+    };
+    Context2.prototype.translate = function(x2, y2) {
+      return this._ctx.translate(this._doSize(x2), this._doSize(y2));
+    };
+    Context2.prototype.rotate = function(angle2) {
+      return this._ctx.rotate(angle2);
+    };
+    Context2.prototype.drawImage = function() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+      var image = args[0];
+      var sx = args[1];
+      var sy = args[2];
+      var sw = args[3];
+      var sh = args[4];
+      var dx = args[args.length - 4];
+      var dy = args[args.length - 3];
+      var dw = args[args.length - 2];
+      var 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));
+      }
+    };
+    Context2.prototype.createPattern = function(image, repetition) {
+      return this._ctx.createPattern(image, repetition);
+    };
+    Context2.prototype.measureText = function(text2) {
+      return this._ctx.measureText(text2);
+    };
+    Context2.prototype.setTextAlign = function(align) {
+      this._ctx.textAlign = align;
+    };
+    Context2.prototype.fillText = function(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));
+      }
+    };
+    Context2.prototype.strokeText = function(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));
+      }
+    };
+    Context2.prototype.setFont = function(opts) {
+      var strList = [];
+      if (opts.fontWeight === "bold") {
+        strList.push("".concat(opts.fontWeight));
+      }
+      strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
+      strList.push("".concat(opts.fontFamily || "sans-serif"));
+      this._ctx.font = "".concat(strList.join(" "));
+    };
+    Context2.prototype.setTextBaseline = function(baseline) {
+      this._ctx.textBaseline = baseline;
+    };
+    Context2.prototype.setGlobalAlpha = function(alpha) {
+      this._ctx.globalAlpha = alpha;
+    };
+    Context2.prototype.save = function() {
+      this._ctx.save();
+    };
+    Context2.prototype.restore = function() {
+      this._ctx.restore();
+    };
+    Context2.prototype.scale = function(ratioX, ratioY) {
+      this._ctx.scale(ratioX, ratioY);
+    };
+    Context2.prototype.setShadowColor = function(color2) {
+      this._ctx.shadowColor = color2;
+    };
+    Context2.prototype.setShadowOffsetX = function(offsetX) {
+      this._ctx.shadowOffsetX = this._doSize(offsetX);
+    };
+    Context2.prototype.setShadowOffsetY = function(offsetY) {
+      this._ctx.shadowOffsetY = this._doSize(offsetY);
+    };
+    Context2.prototype.setShadowBlur = function(blur) {
+      this._ctx.shadowBlur = this._doSize(blur);
+    };
+    Context2.prototype.ellipse = function(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);
+    };
+    Context2.prototype._doSize = function(num) {
+      return this._opts.devicePixelRatio * num;
+    };
+    Context2.prototype._doX = function(x2) {
+      var _a2 = this._transform, scale = _a2.scale, scrollX = _a2.scrollX;
+      var _x = (x2 - scrollX) / scale;
+      return this._doSize(_x);
+    };
+    Context2.prototype._doY = function(y2) {
+      var _a2 = this._transform, scale = _a2.scale, scrollY = _a2.scrollY;
+      var _y = (y2 - scrollY) / scale;
+      return this._doSize(_y);
+    };
+    return Context2;
+  }();
+  function number$1(value) {
+    return typeof value === "number" && (value > 0 || value <= 0);
+  }
+  function x$1(value) {
+    return number$1(value);
+  }
+  function y$1(value) {
+    return number$1(value);
+  }
+  function w$1(value) {
+    return typeof value === "number" && value >= 0;
+  }
+  function h$1(value) {
+    return typeof value === "number" && value >= 0;
+  }
+  function angle$1(value) {
+    return typeof value === "number" && value >= -360 && value <= 360;
+  }
+  function borderWidth$1(value) {
+    return w$1(value);
+  }
+  function borderRadius$1(value) {
+    return number$1(value) && value >= 0;
+  }
+  function color$1(value) {
+    return isColorStr(value);
+  }
+  function imageURL$1(value) {
+    return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value));
+  }
+  function imageBase64$1(value) {
+    return typeof value === "string" && /^(data:image\/)/.test("".concat(value));
+  }
+  function imageSrc$1(value) {
+    return imageBase64$1(value) || imageURL$1(value);
+  }
+  function svg$1(value) {
+    return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim());
+  }
+  function html$1(value) {
+    var result = false;
+    if (typeof value === "string") {
+      var div = document.createElement("div");
+      div.innerHTML = value;
+      if (div.children.length > 0) {
+        result = true;
       }
+      div = null;
     }
+    return result;
+  }
+  function text$1(value) {
+    return typeof value === "string";
+  }
+  function fontSize$1(value) {
+    return number$1(value) && value > 0;
+  }
+  function lineHeight$1(value) {
+    return number$1(value) && value > 0;
+  }
+  function strokeWidth$1(value) {
+    return number$1(value) && value > 0;
+  }
+  function textAlign$1(value) {
+    return ["center", "left", "right"].includes(value);
+  }
+  function fontFamily$1(value) {
+    return typeof value === "string" && value.length > 0;
+  }
+  function fontWeight$1(value) {
+    return ["bold"].includes(value);
   }
+  var is$2 = {
+    x: x$1,
+    y: y$1,
+    w: w$1,
+    h: h$1,
+    angle: angle$1,
+    number: number$1,
+    borderWidth: borderWidth$1,
+    borderRadius: borderRadius$1,
+    color: color$1,
+    imageSrc: imageSrc$1,
+    imageURL: imageURL$1,
+    imageBase64: imageBase64$1,
+    svg: svg$1,
+    html: html$1,
+    text: text$1,
+    fontSize: fontSize$1,
+    lineHeight: lineHeight$1,
+    textAlign: textAlign$1,
+    fontFamily: fontFamily$1,
+    fontWeight: fontWeight$1,
+    strokeWidth: strokeWidth$1
+  };
   function parseAngleToRadian$1(angle2) {
     return angle2 / 180 * Math.PI;
   }
   function calcElementCenter$1(elem) {
-    const p = {
+    var p = {
       x: elem.x + elem.w / 2,
       y: elem.y + elem.h / 2
     };
     return p;
   }
   function rotateElement$1(ctx, elem, callback) {
-    const center = calcElementCenter$1(elem);
-    const radian = parseAngleToRadian$1(elem.angle || 0);
+    var center = calcElementCenter$1(elem);
+    var radian = parseAngleToRadian$1(elem.angle || 0);
     return rotateContext$1(ctx, center, radian || 0, callback);
   }
   function rotateContext$1(ctx, center, radian, callback) {
@@ -1541,7 +2597,7 @@ var iDrawCore = function() {
     ctx.setShadowBlur(0);
   }
   function drawBgColor(ctx, color2) {
-    const size = ctx.getSize();
+    var size = ctx.getSize();
     ctx.setFillStyle(color2);
     ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
   }
@@ -1549,9 +2605,9 @@ var iDrawCore = function() {
     clearContext$1(ctx);
     drawBoxBorder(ctx, elem);
     clearContext$1(ctx);
-    rotateElement$1(ctx, elem, () => {
-      const { x: x2, y: y2, w: w2, h: h2 } = elem;
-      let r = elem.desc.borderRadius || 0;
+    rotateElement$1(ctx, elem, function() {
+      var x2 = elem.x, y2 = elem.y, w2 = elem.w, h2 = elem.h;
+      var r = elem.desc.borderRadius || 0;
       r = Math.min(r, w2 / 2, h2 / 2);
       if (w2 < r * 2 || h2 < r * 2) {
         r = 0;
@@ -1573,35 +2629,35 @@ var iDrawCore = function() {
   }
   function drawBoxBorder(ctx, elem) {
     clearContext$1(ctx);
-    rotateElement$1(ctx, elem, () => {
+    rotateElement$1(ctx, elem, function() {
       if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
         return;
       }
-      const bw = elem.desc.borderWidth;
-      let borderColor = "#000000";
+      var bw = elem.desc.borderWidth;
+      var borderColor = "#000000";
       if (isColorStr(elem.desc.borderColor) === true) {
         borderColor = elem.desc.borderColor;
       }
-      const x2 = elem.x - bw / 2;
-      const y2 = elem.y - bw / 2;
-      const w2 = elem.w + bw;
-      const h2 = elem.h + bw;
-      let r = elem.desc.borderRadius || 0;
+      var x2 = elem.x - bw / 2;
+      var y2 = elem.y - bw / 2;
+      var w2 = elem.w + bw;
+      var h2 = elem.h + bw;
+      var r = elem.desc.borderRadius || 0;
       r = Math.min(r, w2 / 2, h2 / 2);
       if (r < w2 / 2 && r < h2 / 2) {
         r = r + bw / 2;
       }
-      const { desc } = elem;
+      var desc = elem.desc;
       if (desc.shadowColor !== void 0 && isColorStr(desc.shadowColor)) {
         ctx.setShadowColor(desc.shadowColor);
       }
-      if (desc.shadowOffsetX !== void 0 && is$1.number(desc.shadowOffsetX)) {
+      if (desc.shadowOffsetX !== void 0 && is$2.number(desc.shadowOffsetX)) {
         ctx.setShadowOffsetX(desc.shadowOffsetX);
       }
-      if (desc.shadowOffsetY !== void 0 && is$1.number(desc.shadowOffsetY)) {
+      if (desc.shadowOffsetY !== void 0 && is$2.number(desc.shadowOffsetY)) {
         ctx.setShadowOffsetY(desc.shadowOffsetY);
       }
-      if (desc.shadowBlur !== void 0 && is$1.number(desc.shadowBlur)) {
+      if (desc.shadowBlur !== void 0 && is$2.number(desc.shadowBlur)) {
         ctx.setShadowBlur(desc.shadowBlur);
       }
       ctx.beginPath();
@@ -1620,24 +2676,24 @@ var iDrawCore = function() {
     drawBox(ctx, elem, elem.desc.bgColor);
   }
   function drawImage(ctx, elem, loader) {
-    const content = loader.getContent(elem.uuid);
-    rotateElement$1(ctx, elem, () => {
+    var content = loader.getContent(elem.uuid);
+    rotateElement$1(ctx, elem, function() {
       if (content) {
         ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
       }
     });
   }
   function drawSVG(ctx, elem, loader) {
-    const content = loader.getContent(elem.uuid);
-    rotateElement$1(ctx, elem, () => {
+    var content = loader.getContent(elem.uuid);
+    rotateElement$1(ctx, elem, function() {
       if (content) {
         ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
       }
     });
   }
   function drawHTML(ctx, elem, loader) {
-    const content = loader.getContent(elem.uuid);
-    rotateElement$1(ctx, elem, () => {
+    var content = loader.getContent(elem.uuid);
+    rotateElement$1(ctx, elem, function() {
       if (content) {
         ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
       }
@@ -1646,8 +2702,8 @@ var iDrawCore = function() {
   function drawText(ctx, elem, loader) {
     clearContext$1(ctx);
     drawBox(ctx, elem, elem.desc.bgColor || "transparent");
-    rotateElement$1(ctx, elem, () => {
-      const desc = Object.assign({
+    rotateElement$1(ctx, elem, function() {
+      var desc = __assign$1({
         fontSize: 12,
         fontFamily: "sans-serif",
         textAlign: "center"
@@ -1659,15 +2715,15 @@ var iDrawCore = function() {
         fontSize: desc.fontSize,
         fontFamily: desc.fontFamily
       });
-      const descText = desc.text.replace(/\r\n/gi, "\n");
-      const fontHeight = desc.lineHeight || desc.fontSize;
-      const descTextList = descText.split("\n");
-      const lines = [];
-      let lineNum = 0;
-      descTextList.forEach((tempText, idx) => {
-        let lineText = "";
+      var descText = desc.text.replace(/\r\n/ig, "\n");
+      var fontHeight = desc.lineHeight || desc.fontSize;
+      var descTextList = descText.split("\n");
+      var lines = [];
+      var lineNum = 0;
+      descTextList.forEach(function(tempText, idx) {
+        var lineText = "";
         if (tempText.length > 0) {
-          for (let i = 0; i < tempText.length; i++) {
+          for (var i = 0; i < tempText.length; i++) {
             if (ctx.measureText(lineText + (tempText[i] || "")).width < ctx.calcDeviceNum(elem.w)) {
               lineText += tempText[i] || "";
             } else {
@@ -1701,45 +2757,41 @@ var iDrawCore = function() {
           });
         }
       });
-      let startY = 0;
-      if (lines.length * fontHeight < elem.h) {
-        if (elem.desc.verticalAlign === "top") {
-          startY = 0;
-        } else if (elem.desc.verticalAlign === "bottom") {
-          startY += elem.h - lines.length * fontHeight;
-        } else {
-          startY += (elem.h - lines.length * fontHeight) / 2;
-        }
-      }
       {
-        const _y = elem.y + startY;
+        var _y_1 = elem.y;
+        if (lines.length * fontHeight < elem.h) {
+          _y_1 += (elem.h - lines.length * fontHeight) / 2;
+        }
         if (desc.textShadowColor !== void 0 && isColorStr(desc.textShadowColor)) {
           ctx.setShadowColor(desc.textShadowColor);
         }
-        if (desc.textShadowOffsetX !== void 0 && is$1.number(desc.textShadowOffsetX)) {
+        if (desc.textShadowOffsetX !== void 0 && is$2.number(desc.textShadowOffsetX)) {
           ctx.setShadowOffsetX(desc.textShadowOffsetX);
         }
-        if (desc.textShadowOffsetY !== void 0 && is$1.number(desc.textShadowOffsetY)) {
+        if (desc.textShadowOffsetY !== void 0 && is$2.number(desc.textShadowOffsetY)) {
           ctx.setShadowOffsetY(desc.textShadowOffsetY);
         }
-        if (desc.textShadowBlur !== void 0 && is$1.number(desc.textShadowBlur)) {
+        if (desc.textShadowBlur !== void 0 && is$2.number(desc.textShadowBlur)) {
           ctx.setShadowBlur(desc.textShadowBlur);
         }
-        lines.forEach((line, i) => {
-          let _x = elem.x;
+        lines.forEach(function(line, i) {
+          var _x = elem.x;
           if (desc.textAlign === "center") {
             _x = elem.x + (elem.w - line.width) / 2;
           } else if (desc.textAlign === "right") {
             _x = elem.x + (elem.w - line.width);
           }
-          ctx.fillText(line.text, _x, _y + fontHeight * i);
+          ctx.fillText(line.text, _x, _y_1 + fontHeight * i);
         });
         clearContext$1(ctx);
       }
       if (isColorStr(desc.strokeColor) && desc.strokeWidth !== void 0 && desc.strokeWidth > 0) {
-        const _y = elem.y + startY;
-        lines.forEach((line, i) => {
-          let _x = elem.x;
+        var _y_2 = elem.y;
+        if (lines.length * fontHeight < elem.h) {
+          _y_2 += (elem.h - lines.length * fontHeight) / 2;
+        }
+        lines.forEach(function(line, i) {
+          var _x = elem.x;
           if (desc.textAlign === "center") {
             _x = elem.x + (elem.w - line.width) / 2;
           } else if (desc.textAlign === "right") {
@@ -1751,23 +2803,23 @@ var iDrawCore = function() {
           if (desc.strokeWidth !== void 0 && desc.strokeWidth > 0) {
             ctx.setLineWidth(desc.strokeWidth);
           }
-          ctx.strokeText(line.text, _x, _y + fontHeight * i);
+          ctx.strokeText(line.text, _x, _y_2 + fontHeight * i);
         });
       }
     });
   }
   function drawCircle(ctx, elem) {
     clearContext$1(ctx);
-    rotateElement$1(ctx, elem, (ctx2) => {
-      const { x: x2, y: y2, w: w2, h: h2, desc } = elem;
-      const { bgColor = "#000000", borderColor = "#000000", borderWidth: borderWidth2 = 0 } = desc;
-      const a = w2 / 2;
-      const b = h2 / 2;
-      const centerX = x2 + a;
-      const centerY = y2 + b;
+    rotateElement$1(ctx, elem, function(ctx2) {
+      var x2 = elem.x, y2 = elem.y, w2 = elem.w, h2 = elem.h, desc = elem.desc;
+      var _a2 = desc.bgColor, bgColor = _a2 === void 0 ? "#000000" : _a2, _b2 = desc.borderColor, borderColor = _b2 === void 0 ? "#000000" : _b2, _c2 = desc.borderWidth, borderWidth2 = _c2 === void 0 ? 0 : _c2;
+      var a = w2 / 2;
+      var b = h2 / 2;
+      var centerX = x2 + a;
+      var centerY = y2 + b;
       if (borderWidth2 && borderWidth2 > 0) {
-        const ba = borderWidth2 / 2 + a;
-        const bb = borderWidth2 / 2 + b;
+        var ba = borderWidth2 / 2 + a;
+        var bb = borderWidth2 / 2 + b;
         ctx2.beginPath();
         ctx2.setStrokeStyle(borderColor);
         ctx2.setLineWidth(borderWidth2);
@@ -1785,7 +2837,7 @@ var iDrawCore = function() {
   function drawContext(ctx, data, loader) {
     var _a2;
     clearContext$1(ctx);
-    const size = ctx.getSize();
+    var size = ctx.getSize();
     ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
     if (typeof data.bgColor === "string" && isColorStr(data.bgColor)) {
       drawBgColor(ctx, data.bgColor);
@@ -1793,8 +2845,8 @@ var iDrawCore = function() {
     if (!(data.elements.length > 0)) {
       return;
     }
-    for (let i = 0; i < data.elements.length; i++) {
-      const elem = data.elements[i];
+    for (var i = 0; i < data.elements.length; i++) {
+      var elem = data.elements[i];
       if (((_a2 = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a2 === void 0 ? void 0 : _a2.invisible) === true) {
         continue;
       }
@@ -1826,24 +2878,24 @@ var iDrawCore = function() {
       }
     }
   }
-  class LoaderEvent {
-    constructor() {
+  var LoaderEvent = function() {
+    function LoaderEvent2() {
       this._listeners = /* @__PURE__ */ new Map();
     }
-    on(eventKey, callback) {
+    LoaderEvent2.prototype.on = function(eventKey, callback) {
       if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+        var callbacks = this._listeners.get(eventKey);
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
         this._listeners.set(eventKey, callbacks || []);
       } else {
         this._listeners.set(eventKey, [callback]);
       }
-    }
-    off(eventKey, callback) {
+    };
+    LoaderEvent2.prototype.off = function(eventKey, callback) {
       if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+        var callbacks = this._listeners.get(eventKey);
         if (Array.isArray(callbacks)) {
-          for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+          for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
             if (callbacks[i] === callback) {
               callbacks.splice(i, 1);
               break;
@@ -1852,66 +2904,40 @@ var iDrawCore = function() {
         }
         this._listeners.set(eventKey, callbacks || []);
       }
-    }
-    trigger(eventKey, arg) {
-      const callbacks = this._listeners.get(eventKey);
+    };
+    LoaderEvent2.prototype.trigger = function(eventKey, arg) {
+      var callbacks = this._listeners.get(eventKey);
       if (Array.isArray(callbacks)) {
-        callbacks.forEach((cb) => {
+        callbacks.forEach(function(cb) {
           cb(arg);
         });
         return true;
       } else {
         return false;
       }
-    }
-    has(name) {
+    };
+    LoaderEvent2.prototype.has = function(name) {
       if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+        var list = this._listeners.get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
-    }
-  }
+    };
+    return LoaderEvent2;
+  }();
   function filterScript(html2) {
     return html2.replace(/<script[\s\S]*?<\/script>/ig, "");
   }
-  var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-      return value instanceof P ? value : new P(function(resolve) {
-        resolve(value);
-      });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator["throw"](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
   var LoaderStatus;
   (function(LoaderStatus2) {
     LoaderStatus2["FREE"] = "free";
     LoaderStatus2["LOADING"] = "loading";
     LoaderStatus2["COMPLETE"] = "complete";
   })(LoaderStatus || (LoaderStatus = {}));
-  class Loader {
-    constructor(opts) {
+  var Loader = function() {
+    function Loader2(opts) {
       this._currentLoadData = {};
       this._currentUUIDQueue = [];
       this._storageLoadData = {};
@@ -1921,8 +2947,8 @@ var iDrawCore = function() {
       this._event = new LoaderEvent();
       this._waitingLoadQueue = [];
     }
-    load(data, changeResourceUUIDs) {
-      const [uuidQueue, loadData] = this._resetLoadData(data, changeResourceUUIDs);
+    Loader2.prototype.load = function(data, changeResourceUUIDs) {
+      var _a2 = this._resetLoadData(data, changeResourceUUIDs), uuidQueue = _a2[0], loadData = _a2[1];
       if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
         this._currentUUIDQueue = uuidQueue;
         this._currentLoadData = loadData;
@@ -1933,29 +2959,29 @@ var iDrawCore = function() {
           loadData
         });
       }
-    }
-    on(name, callback) {
+    };
+    Loader2.prototype.on = function(name, callback) {
       this._event.on(name, callback);
-    }
-    off(name, callback) {
+    };
+    Loader2.prototype.off = function(name, callback) {
       this._event.off(name, callback);
-    }
-    isComplete() {
+    };
+    Loader2.prototype.isComplete = function() {
       return this._status === LoaderStatus.COMPLETE;
-    }
-    getContent(uuid) {
+    };
+    Loader2.prototype.getContent = function(uuid) {
       var _a2;
       if (((_a2 = this._storageLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.status) === "loaded") {
         return this._storageLoadData[uuid].content;
       }
       return null;
-    }
-    _resetLoadData(data, changeResourceUUIDs) {
-      const loadData = {};
-      const uuidQueue = [];
-      const storageLoadData = this._storageLoadData;
-      for (let i = data.elements.length - 1; i >= 0; i--) {
-        const elem = data.elements[i];
+    };
+    Loader2.prototype._resetLoadData = function(data, changeResourceUUIDs) {
+      var loadData = {};
+      var uuidQueue = [];
+      var storageLoadData = this._storageLoadData;
+      for (var i = data.elements.length - 1; i >= 0; i--) {
+        var elem = data.elements[i];
         if (["image", "svg", "html"].includes(elem.type)) {
           if (!storageLoadData[elem.uuid]) {
             loadData[elem.uuid] = this._createEmptyLoadItem(elem);
@@ -1969,20 +2995,20 @@ var iDrawCore = function() {
         }
       }
       return [uuidQueue, loadData];
-    }
-    _createEmptyLoadItem(elem) {
-      let source = "";
-      const type = elem.type;
-      let elemW = elem.w;
-      let elemH = elem.h;
+    };
+    Loader2.prototype._createEmptyLoadItem = function(elem) {
+      var source = "";
+      var type = elem.type;
+      var elemW = elem.w;
+      var elemH = elem.h;
       if (elem.type === "image") {
-        const _elem = elem;
+        var _elem = elem;
         source = _elem.desc.src || "";
       } else if (elem.type === "svg") {
-        const _elem = elem;
+        var _elem = elem;
         source = _elem.desc.svg || "";
       } else if (elem.type === "html") {
-        const _elem = elem;
+        var _elem = elem;
         source = filterScript(_elem.desc.html || "");
         elemW = _elem.desc.width || elem.w;
         elemH = _elem.desc.height || elem.h;
@@ -1997,8 +3023,9 @@ var iDrawCore = function() {
         elemH,
         element: deepClone(elem)
       };
-    }
-    _loadTask() {
+    };
+    Loader2.prototype._loadTask = function() {
+      var _this = this;
       if (this._status === LoaderStatus.LOADING) {
         return;
       }
@@ -2009,137 +3036,160 @@ var iDrawCore = function() {
           this._event.trigger("complete", void 0);
           return;
         } else {
-          const waitingItem = this._waitingLoadQueue.shift();
+          var waitingItem = this._waitingLoadQueue.shift();
           if (waitingItem) {
-            const { uuidQueue, loadData } = waitingItem;
+            var uuidQueue = waitingItem.uuidQueue, loadData = waitingItem.loadData;
             this._currentLoadData = loadData;
             this._currentUUIDQueue = uuidQueue;
           }
         }
       }
-      const { maxParallelNum } = this._opts;
-      const uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
-      uuids.forEach((url, i) => {
+      var maxParallelNum = this._opts.maxParallelNum;
+      var uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
+      uuids.forEach(function(url, i) {
       });
-      const loadUUIDList = [];
-      const _loadAction = () => {
+      var loadUUIDList = [];
+      var _loadAction = function() {
         if (loadUUIDList.length >= maxParallelNum) {
           return false;
         }
         if (uuids.length === 0) {
           return true;
         }
-        for (let i = loadUUIDList.length; i < maxParallelNum; i++) {
-          const uuid = uuids.shift();
+        var _loop_1 = function(i2) {
+          var uuid = uuids.shift();
           if (uuid === void 0) {
-            break;
+            return "break";
           }
           loadUUIDList.push(uuid);
-          this._loadElementSource(this._currentLoadData[uuid]).then((image) => {
+          _this._loadElementSource(_this._currentLoadData[uuid]).then(function(image) {
             var _a2, _b2;
             loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-            const status = _loadAction();
-            this._storageLoadData[uuid] = {
+            var status = _loadAction();
+            _this._storageLoadData[uuid] = {
               uuid,
-              type: this._currentLoadData[uuid].type,
+              type: _this._currentLoadData[uuid].type,
               status: "loaded",
               content: image,
-              source: this._currentLoadData[uuid].source,
-              elemW: this._currentLoadData[uuid].elemW,
-              elemH: this._currentLoadData[uuid].elemH,
-              element: this._currentLoadData[uuid].element
+              source: _this._currentLoadData[uuid].source,
+              elemW: _this._currentLoadData[uuid].elemW,
+              elemH: _this._currentLoadData[uuid].elemH,
+              element: _this._currentLoadData[uuid].element
             };
             if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-              this._status = LoaderStatus.FREE;
-              this._loadTask();
+              _this._status = LoaderStatus.FREE;
+              _this._loadTask();
             }
-            this._event.trigger("load", {
-              uuid: (_a2 = this._storageLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.uuid,
-              type: this._storageLoadData[uuid].type,
-              status: this._storageLoadData[uuid].status,
-              content: this._storageLoadData[uuid].content,
-              source: this._storageLoadData[uuid].source,
-              elemW: this._storageLoadData[uuid].elemW,
-              elemH: this._storageLoadData[uuid].elemH,
-              element: (_b2 = this._storageLoadData[uuid]) === null || _b2 === void 0 ? void 0 : _b2.element
+            _this._event.trigger("load", {
+              uuid: (_a2 = _this._storageLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.uuid,
+              type: _this._storageLoadData[uuid].type,
+              status: _this._storageLoadData[uuid].status,
+              content: _this._storageLoadData[uuid].content,
+              source: _this._storageLoadData[uuid].source,
+              elemW: _this._storageLoadData[uuid].elemW,
+              elemH: _this._storageLoadData[uuid].elemH,
+              element: (_b2 = _this._storageLoadData[uuid]) === null || _b2 === void 0 ? void 0 : _b2.element
             });
-          }).catch((err) => {
+          }).catch(function(err) {
             var _a2, _b2, _c2, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             console.warn(err);
             loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-            const status = _loadAction();
-            if (this._currentLoadData[uuid]) {
-              this._storageLoadData[uuid] = {
+            var status = _loadAction();
+            if (_this._currentLoadData[uuid]) {
+              _this._storageLoadData[uuid] = {
                 uuid,
-                type: (_a2 = this._currentLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.type,
+                type: (_a2 = _this._currentLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.type,
                 status: "fail",
                 content: null,
                 error: err,
-                source: (_b2 = this._currentLoadData[uuid]) === null || _b2 === void 0 ? void 0 : _b2.source,
-                elemW: (_c2 = this._currentLoadData[uuid]) === null || _c2 === void 0 ? void 0 : _c2.elemW,
-                elemH: (_d = this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
-                element: (_e = this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element
+                source: (_b2 = _this._currentLoadData[uuid]) === null || _b2 === void 0 ? void 0 : _b2.source,
+                elemW: (_c2 = _this._currentLoadData[uuid]) === null || _c2 === void 0 ? void 0 : _c2.elemW,
+                elemH: (_d = _this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
+                element: (_e = _this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element
               };
             }
             if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-              this._status = LoaderStatus.FREE;
-              this._loadTask();
+              _this._status = LoaderStatus.FREE;
+              _this._loadTask();
             }
-            if (this._currentLoadData[uuid]) {
-              this._event.trigger("error", {
+            if (_this._currentLoadData[uuid]) {
+              _this._event.trigger("error", {
                 uuid,
-                type: (_f = this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.type,
-                status: (_g = this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.status,
-                content: (_h = this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.content,
-                source: (_j = this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.source,
-                elemW: (_k = this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemW,
-                elemH: (_l = this._storageLoadData[uuid]) === null || _l === void 0 ? void 0 : _l.elemH,
-                element: (_m = this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element
+                type: (_f = _this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.type,
+                status: (_g = _this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.status,
+                content: (_h = _this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.content,
+                source: (_j = _this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.source,
+                elemW: (_k = _this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemW,
+                elemH: (_l = _this._storageLoadData[uuid]) === null || _l === void 0 ? void 0 : _l.elemH,
+                element: (_m = _this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element
               });
             }
           });
+        };
+        for (var i = loadUUIDList.length; i < maxParallelNum; i++) {
+          var state_1 = _loop_1();
+          if (state_1 === "break")
+            break;
         }
         return false;
       };
       _loadAction();
-    }
-    _loadElementSource(params) {
-      return __awaiter(this, void 0, void 0, function* () {
-        if (params && params.type === "image") {
-          const image = yield loadImage(params.source);
-          return image;
-        } else if (params && params.type === "svg") {
-          const image = yield loadSVG(params.source);
-          return image;
-        } else if (params && params.type === "html") {
-          const image = yield loadHTML(params.source, {
-            width: params.elemW,
-            height: params.elemH
-          });
-          return image;
-        }
-        throw Error("Element's source is not support!");
+    };
+    Loader2.prototype._loadElementSource = function(params) {
+      return __awaiter$1(this, void 0, void 0, function() {
+        var image, image, image;
+        return __generator$1(this, function(_a2) {
+          switch (_a2.label) {
+            case 0:
+              if (!(params && params.type === "image"))
+                return [3, 2];
+              return [4, loadImage(params.source)];
+            case 1:
+              image = _a2.sent();
+              return [2, image];
+            case 2:
+              if (!(params && params.type === "svg"))
+                return [3, 4];
+              return [4, loadSVG(params.source)];
+            case 3:
+              image = _a2.sent();
+              return [2, image];
+            case 4:
+              if (!(params && params.type === "html"))
+                return [3, 6];
+              return [4, loadHTML(params.source, {
+                width: params.elemW,
+                height: params.elemH
+              })];
+            case 5:
+              image = _a2.sent();
+              return [2, image];
+            case 6:
+              throw Error("Element's source is not support!");
+          }
+        });
       });
-    }
-  }
-  class RendererEvent {
-    constructor() {
+    };
+    return Loader2;
+  }();
+  var RendererEvent = function() {
+    function RendererEvent2() {
       this._listeners = /* @__PURE__ */ new Map();
     }
-    on(eventKey, callback) {
+    RendererEvent2.prototype.on = function(eventKey, callback) {
       if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+        var callbacks = this._listeners.get(eventKey);
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
         this._listeners.set(eventKey, callbacks || []);
       } else {
         this._listeners.set(eventKey, [callback]);
       }
-    }
-    off(eventKey, callback) {
+    };
+    RendererEvent2.prototype.off = function(eventKey, callback) {
       if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+        var callbacks = this._listeners.get(eventKey);
         if (Array.isArray(callbacks)) {
-          for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+          for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
             if (callbacks[i] === callback) {
               callbacks.splice(i, 1);
               break;
@@ -2148,38 +3198,39 @@ var iDrawCore = function() {
         }
         this._listeners.set(eventKey, callbacks || []);
       }
-    }
-    trigger(eventKey, arg) {
-      const callbacks = this._listeners.get(eventKey);
+    };
+    RendererEvent2.prototype.trigger = function(eventKey, arg) {
+      var callbacks = this._listeners.get(eventKey);
       if (Array.isArray(callbacks)) {
-        callbacks.forEach((cb) => {
+        callbacks.forEach(function(cb) {
           cb(arg);
         });
         return true;
       } else {
         return false;
       }
-    }
-    has(name) {
+    };
+    RendererEvent2.prototype.has = function(name) {
       if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+        var list = this._listeners.get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
-    }
-  }
-  const _queue = Symbol("_queue");
-  const _ctx = Symbol("_ctx");
-  const _status = Symbol("_status");
-  const _loader = Symbol("_loader");
-  const _opts$2 = Symbol("_opts");
-  const _freeze = Symbol("_freeze");
-  const _drawFrame = Symbol("_drawFrame");
-  const _retainQueueOneItem = Symbol("_retainQueueOneItem");
-  var _a$1, _b$1, _c;
-  const { requestAnimationFrame } = window;
+    };
+    return RendererEvent2;
+  }();
+  var _queue = Symbol("_queue");
+  var _ctx = Symbol("_ctx");
+  var _status = Symbol("_status");
+  var _loader = Symbol("_loader");
+  var _opts$1 = Symbol("_opts");
+  var _freeze = Symbol("_freeze");
+  var _drawFrame = Symbol("_drawFrame");
+  var _retainQueueOneItem = Symbol("_retainQueueOneItem");
+  var _a, _b, _c;
+  var requestAnimationFrame = window.requestAnimationFrame;
   var DrawStatus;
   (function(DrawStatus2) {
     DrawStatus2["NULL"] = "null";
@@ -2187,51 +3238,53 @@ var iDrawCore = function() {
     DrawStatus2["DRAWING"] = "drawing";
     DrawStatus2["FREEZE"] = "freeze";
   })(DrawStatus || (DrawStatus = {}));
-  class Renderer extends RendererEvent {
-    constructor(opts) {
-      super();
-      this[_a$1] = [];
-      this[_b$1] = null;
-      this[_c] = DrawStatus.NULL;
-      this[_opts$2] = opts;
-      this[_loader] = new Loader({
+  var Renderer = function(_super) {
+    __extends(Renderer2, _super);
+    function Renderer2(opts) {
+      var _this = _super.call(this) || this;
+      _this[_a] = [];
+      _this[_b] = null;
+      _this[_c] = DrawStatus.NULL;
+      _this[_opts$1] = opts;
+      _this[_loader] = new Loader({
         maxParallelNum: 6
       });
-      this[_loader].on("load", (res) => {
-        this[_drawFrame]();
-        this.trigger("load", { element: res.element });
+      _this[_loader].on("load", function(res) {
+        _this[_drawFrame]();
+        _this.trigger("load", { element: res.element });
       });
-      this[_loader].on("error", (res) => {
-        this.trigger("error", { element: res.element, error: res.error });
+      _this[_loader].on("error", function(res) {
+        _this.trigger("error", { element: res.element, error: res.error });
       });
-      this[_loader].on("complete", () => {
-        this.trigger("loadComplete", { t: Date.now() });
+      _this[_loader].on("complete", function() {
+        _this.trigger("loadComplete", { t: Date.now() });
       });
+      return _this;
     }
-    render(target, originData, opts) {
-      const { changeResourceUUIDs = [] } = opts || {};
+    Renderer2.prototype.render = function(target, originData, opts) {
+      var _d = (opts || {}).changeResourceUUIDs, changeResourceUUIDs = _d === void 0 ? [] : _d;
       this[_status] = DrawStatus.FREE;
-      const data = deepClone(originData);
+      var data = deepClone(originData);
       if (Array.isArray(data.elements)) {
-        data.elements.forEach((elem) => {
+        data.elements.forEach(function(elem) {
           if (!(typeof elem.uuid === "string" && elem.uuid)) {
             elem.uuid = createUUID();
           }
         });
       }
       if (!this[_ctx]) {
-        if (this[_opts$2] && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
-          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts$2];
-          const canvas = target;
-          canvas.width = width * devicePixelRatio;
-          canvas.height = height * devicePixelRatio;
-          const ctx2d = canvas.getContext("2d");
-          this[_ctx] = new Context$1(ctx2d, {
+        if (this[_opts$1] && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
+          var _e = this[_opts$1], width = _e.width, height = _e.height, contextWidth = _e.contextWidth, contextHeight = _e.contextHeight, devicePixelRatio_1 = _e.devicePixelRatio;
+          var canvas = target;
+          canvas.width = width * devicePixelRatio_1;
+          canvas.height = height * devicePixelRatio_1;
+          var ctx2d = canvas.getContext("2d");
+          this[_ctx] = new Context(ctx2d, {
             width,
             height,
             contextWidth: contextWidth || width,
             contextHeight: contextHeight || height,
-            devicePixelRatio
+            devicePixelRatio: devicePixelRatio_1
           });
         } else if (target) {
           this[_ctx] = target;
@@ -2240,70 +3293,76 @@ var iDrawCore = function() {
       if ([DrawStatus.FREEZE].includes(this[_status])) {
         return;
       }
-      const _data2 = deepClone({ data });
-      this[_queue].push(_data2);
+      var _data = deepClone({ data });
+      this[_queue].push(_data);
       this[_drawFrame]();
       this[_loader].load(data, changeResourceUUIDs || []);
-    }
-    getContext() {
+    };
+    Renderer2.prototype.getContext = function() {
       return this[_ctx];
-    }
-    thaw() {
+    };
+    Renderer2.prototype.thaw = function() {
       this[_status] = DrawStatus.FREE;
-    }
-    [(_a$1 = _queue, _b$1 = _ctx, _c = _status, _freeze)]() {
+    };
+    Renderer2.prototype[_a = _queue, _b = _ctx, _c = _status, _freeze] = function() {
       this[_status] = DrawStatus.FREEZE;
-    }
-    [_drawFrame]() {
+    };
+    Renderer2.prototype[_drawFrame] = function() {
+      var _this = this;
       if (this[_status] === DrawStatus.FREEZE) {
         return;
       }
-      requestAnimationFrame(() => {
-        if (this[_status] === DrawStatus.FREEZE) {
+      requestAnimationFrame(function() {
+        if (_this[_status] === DrawStatus.FREEZE) {
           return;
         }
-        const ctx = this[_ctx];
-        let item = this[_queue][0];
-        let isLastFrame = false;
-        if (this[_queue].length > 1) {
-          item = this[_queue].shift();
+        var ctx = _this[_ctx];
+        var item = _this[_queue][0];
+        var isLastFrame = false;
+        if (_this[_queue].length > 1) {
+          item = _this[_queue].shift();
         } else {
           isLastFrame = true;
         }
-        if (this[_loader].isComplete() !== true) {
-          this[_drawFrame]();
+        if (_this[_loader].isComplete() !== true) {
+          _this[_drawFrame]();
           if (item && ctx) {
-            drawContext(ctx, item.data, this[_loader]);
+            drawContext(ctx, item.data, _this[_loader]);
           }
         } else if (item && ctx) {
-          drawContext(ctx, item.data, this[_loader]);
-          this[_retainQueueOneItem]();
+          drawContext(ctx, item.data, _this[_loader]);
+          _this[_retainQueueOneItem]();
           if (!isLastFrame) {
-            this[_drawFrame]();
+            _this[_drawFrame]();
           } else {
-            this[_status] = DrawStatus.FREE;
+            _this[_status] = DrawStatus.FREE;
           }
         } else {
-          this[_status] = DrawStatus.FREE;
+          _this[_status] = DrawStatus.FREE;
         }
-        this.trigger("drawFrame", { t: Date.now() });
-        if (this[_loader].isComplete() === true && this[_queue].length === 1 && this[_status] === DrawStatus.FREE) {
-          if (ctx && this[_queue][0] && this[_queue][0].data) {
-            drawContext(ctx, this[_queue][0].data, this[_loader]);
+        _this.trigger("drawFrame", { t: Date.now() });
+        if (_this[_loader].isComplete() === true && _this[_queue].length === 1 && _this[_status] === DrawStatus.FREE) {
+          if (ctx && _this[_queue][0] && _this[_queue][0].data) {
+            drawContext(ctx, _this[_queue][0].data, _this[_loader]);
           }
-          this.trigger("drawFrameComplete", { t: Date.now() });
-          this[_freeze]();
+          _this.trigger("drawFrameComplete", { t: Date.now() });
+          _this[_freeze]();
         }
       });
-    }
-    [_retainQueueOneItem]() {
+    };
+    Renderer2.prototype[_retainQueueOneItem] = function() {
       if (this[_queue].length <= 1) {
         return;
       }
-      const lastOne = deepClone(this[_queue][this[_queue].length - 1]);
+      var lastOne = deepClone(this[_queue][this[_queue].length - 1]);
       this[_queue] = [lastOne];
-    }
-  }
+    };
+    return Renderer2;
+  }(RendererEvent);
+  var default_1 = /* @__PURE__ */ Object.freeze({
+    __proto__: null,
+    Renderer
+  });
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -2329,7 +3388,7 @@ var iDrawCore = function() {
     return number(value) && value >= 0;
   }
   function color(value) {
-    return isColorStr(value);
+    return isColorStr$1(value);
   }
   function imageURL(value) {
     return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`);
@@ -2588,7 +3647,7 @@ var iDrawCore = function() {
     }
   };
   function mergeConfig(config) {
-    const result = deepClone(defaultConfig);
+    const result = deepClone$1(defaultConfig);
     if (config) {
       if (config.elementWrapper) {
         result.elementWrapper = {
@@ -2789,7 +3848,7 @@ var iDrawCore = function() {
     initData(data) {
       data.elements.forEach((elem) => {
         if (!(elem.uuid && typeof elem.uuid === "string")) {
-          elem.uuid = createUUID();
+          elem.uuid = createUUID$1();
         }
       });
       return data;
@@ -2894,10 +3953,10 @@ var iDrawCore = function() {
       elem.angle = limitAngle(elem.angle || 0);
     }
   }
-  function calcuScaleElemPosition(elem, moveX, moveY, direction, scale) {
+  function calcuScaleElemPosition(elem, moveX, moveY, direction) {
     var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
     const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h };
-    elem.angle;
+    elem.angle || 0;
     if (((_a2 = elem.operation) == null ? void 0 : _a2.limitRatio) === true) {
       if (["top-left", "top-right", "bottom-right", "bottom-left"].includes(
         direction
@@ -2918,7 +3977,7 @@ var iDrawCore = function() {
         break;
       }
       case "top": {
-        if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
+        if (elem.angle === 0 || Math.abs(elem.angle || 0) < limitQbliqueAngle$1) {
           if (p.h - moveY > 0) {
             p.y += moveY;
             p.h -= moveY;
@@ -2927,7 +3986,7 @@ var iDrawCore = function() {
               p.w -= moveY / elem.h * elem.w;
             }
           }
-        } else if (elem.angle > 0 || elem.angle < 0) {
+        } else if (elem.angle !== void 0 && (elem.angle > 0 || elem.angle < 0)) {
           const angle2 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
           let moveDist = calcMoveDist(moveX, moveY);
           let centerX = p.x + elem.w / 2;
@@ -2986,7 +4045,7 @@ var iDrawCore = function() {
         break;
       }
       case "right": {
-        if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
+        if (elem.angle === 0 || Math.abs(elem.angle || 0) < limitQbliqueAngle$1) {
           if (elem.w + moveX > 0) {
             p.w += moveX;
             if (((_e = elem.operation) == null ? void 0 : _e.limitRatio) === true) {
@@ -2994,7 +4053,7 @@ var iDrawCore = function() {
               p.h += moveX * elem.h / elem.w;
             }
           }
-        } else if (elem.angle > 0 || elem.angle < 0) {
+        } else if (elem.angle !== void 0 && (elem.angle > 0 || elem.angle < 0)) {
           const angle2 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
           let moveDist = calcMoveDist(moveX, moveY);
           let centerX = p.x + elem.w / 2;
@@ -3052,7 +4111,7 @@ var iDrawCore = function() {
         break;
       }
       case "bottom": {
-        if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
+        if (elem.angle === 0 || Math.abs(elem.angle || 0) < limitQbliqueAngle$1) {
           if (elem.h + moveY > 0) {
             p.h += moveY;
             if (((_h = elem.operation) == null ? void 0 : _h.limitRatio) === true) {
@@ -3060,7 +4119,7 @@ var iDrawCore = function() {
               p.w += moveY / elem.h * elem.w;
             }
           }
-        } else if (elem.angle > 0 || elem.angle < 0) {
+        } else if (elem.angle !== void 0 && (elem.angle > 0 || elem.angle < 0)) {
           const angle2 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
           let moveDist = calcMoveDist(moveX, moveY);
           let centerX = p.x + elem.w / 2;
@@ -3118,7 +4177,7 @@ var iDrawCore = function() {
         break;
       }
       case "left": {
-        if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
+        if (elem.angle === 0 || Math.abs(elem.angle || 0) < limitQbliqueAngle$1) {
           if (elem.w - moveX > 0) {
             p.x += moveX;
             p.w -= moveX;
@@ -3127,7 +4186,7 @@ var iDrawCore = function() {
               p.y += moveX / elem.w * elem.h / 2;
             }
           }
-        } else if (elem.angle > 0 || elem.angle < 0) {
+        } else if (elem.angle !== void 0 && (elem.angle > 0 || elem.angle < 0)) {
           const angle2 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
           let moveDist = calcMoveDist(moveX, moveY);
           let centerX = p.x + elem.w / 2;
@@ -3207,7 +4266,7 @@ var iDrawCore = function() {
       this._updateSelectedElementListWrapper(data, opts);
     }
     getConfig() {
-      return deepClone(this._helperConfig);
+      return deepClone$1(this._helperConfig);
     }
     getElementIndexByUUID(uuid) {
       const index = this._helperConfig.elementIndexMap[uuid];
@@ -3252,7 +4311,7 @@ var iDrawCore = function() {
         "bottom",
         "bottom-right"
       ];
-      let hoverDirectionNames = deepClone(directionNames);
+      let hoverDirectionNames = deepClone$1(directionNames);
       let angleMoveNum = 0;
       if (data && uuid) {
         const elemIdx = this.getElementIndexByUUID(uuid);
@@ -3547,20 +4606,20 @@ var iDrawCore = function() {
       return wrapper;
     }
   }
-  const _board$1 = Symbol("_displayCtx");
+  const _board = Symbol("_displayCtx");
   const _helper = Symbol("_helper");
-  const _element$1 = Symbol("_element");
-  const _opts$1 = Symbol("_opts");
+  const _element = Symbol("_element");
+  const _opts = Symbol("_opts");
   class Mapper {
     constructor(opts) {
-      this[_opts$1] = opts;
-      this[_board$1] = this[_opts$1].board;
-      this[_element$1] = this[_opts$1].element;
-      this[_helper] = this[_opts$1].helper;
+      this[_opts] = opts;
+      this[_board] = this[_opts].board;
+      this[_element] = this[_opts].element;
+      this[_helper] = this[_opts].helper;
     }
     isEffectivePoint(p) {
-      const scrollLineWidth = this[_board$1].getScrollLineWidth();
-      const screenInfo = this[_board$1].getScreenInfo();
+      const scrollLineWidth = this[_board].getScrollLineWidth();
+      const screenInfo = this[_board].getScreenInfo();
       if (p.x <= screenInfo.width - scrollLineWidth && p.y <= screenInfo.height - scrollLineWidth) {
         return true;
       }
@@ -3617,7 +4676,7 @@ var iDrawCore = function() {
           elementUUID = uuid;
         }
       } else {
-        const [index, uuid2] = this[_element$1].isPointInElement(p, data);
+        const [index, uuid2] = this[_element].isPointInElement(p, data);
         if (index >= 0) {
           cursor = "move";
         }
@@ -3678,18 +4737,6 @@ var iDrawCore = function() {
       this._temp = createData$1();
     }
   };
-  const _board = Symbol("_board");
-  const _data = Symbol("_data");
-  const _opts = Symbol("_opts");
-  const _config = Symbol("_config");
-  const _renderer = Symbol("_renderer");
-  const _element = Symbol("_element");
-  const _tempData = Symbol("_tempData");
-  const _draw = Symbol("_draw");
-  const _coreEvent = Symbol("_coreEvent");
-  const _emitChangeScreen = Symbol("_emitChangeScreen");
-  const _emitChangeData = Symbol("_emitChangeData");
-  const _engine = Symbol("_engine");
   var Mode = /* @__PURE__ */ ((Mode2) => {
     Mode2["NULL"] = "null";
     Mode2["SELECT_ELEMENT"] = "select-element";
@@ -3706,42 +4753,41 @@ var iDrawCore = function() {
   function getSelectedElements(core) {
     const elems = [];
     let list = [];
-    const uuid = core[_engine].temp.get("selectedUUID");
+    const uuid = core.getEngine().temp.get("selectedUUID");
     if (typeof uuid === "string" && uuid) {
       list.push(uuid);
     } else {
-      list = core[_engine].temp.get("selectedUUIDList");
+      list = core.getEngine().temp.get("selectedUUIDList");
     }
     list.forEach((uuid2) => {
-      var _a2;
-      const index = core[_engine].helper.getElementIndexByUUID(uuid2);
+      const index = core.getEngine().helper.getElementIndexByUUID(uuid2);
       if (index !== null && index >= 0) {
-        const elem = (_a2 = core[_data]) == null ? void 0 : _a2.elements[index];
+        const elem = core.$data.elements[index];
         if (elem)
           elems.push(elem);
       }
     });
-    return deepClone(elems);
+    return deepClone$1(elems);
   }
   function getElement(core, uuid) {
     let elem = null;
-    const index = core[_engine].helper.getElementIndexByUUID(uuid);
-    if (index !== null && core[_data].elements[index]) {
-      elem = deepClone(core[_data].elements[index]);
+    const index = core.getEngine().helper.getElementIndexByUUID(uuid);
+    if (index !== null && core.$data.elements[index]) {
+      elem = deepClone$1(core.$data.elements[index]);
     }
     return elem;
   }
   function getElementByIndex(core, index) {
     let elem = null;
-    if (index >= 0 && core[_data].elements[index]) {
-      elem = deepClone(core[_data].elements[index]);
+    if (index >= 0 && core.$data.elements[index]) {
+      elem = deepClone$1(core.$data.elements[index]);
     }
     return elem;
   }
   function updateElement(core, elem) {
     var _a2;
-    const _elem = deepClone(elem);
-    const data = core[_data];
+    const _elem = deepClone$1(elem);
+    const data = core.getData();
     const resourceChangeUUIDs = [];
     for (let i = 0; i < data.elements.length; i++) {
       if (_elem.uuid === ((_a2 = data.elements[i]) == null ? void 0 : _a2.uuid)) {
@@ -3753,112 +4799,112 @@ var iDrawCore = function() {
         break;
       }
     }
-    core[_emitChangeData]();
-    core[_draw]({ resourceChangeUUIDs });
+    core.$emitChangeData();
+    core.$draw({ resourceChangeUUIDs });
   }
   function selectElementByIndex(core, index) {
-    if (core[_data].elements[index]) {
-      const uuid = core[_data].elements[index].uuid;
-      core[_engine].temp.set("mode", Mode.NULL);
+    if (core.$data.elements[index]) {
+      const uuid = core.$data.elements[index].uuid;
+      core.getEngine().temp.set("mode", Mode.NULL);
       if (typeof uuid === "string") {
-        core[_engine].temp.set("selectedUUID", uuid);
-        core[_engine].temp.set("selectedUUIDList", []);
+        core.getEngine().temp.set("selectedUUID", uuid);
+        core.getEngine().temp.set("selectedUUIDList", []);
       }
-      core[_draw]();
+      core.$draw();
     }
   }
   function selectElement(core, uuid) {
-    const index = core[_engine].helper.getElementIndexByUUID(uuid);
+    const index = core.getEngine().helper.getElementIndexByUUID(uuid);
     if (typeof index === "number" && index >= 0) {
       core.selectElementByIndex(index);
     }
   }
   function cancelElementByIndex(core, index) {
-    if (core[_data].elements[index]) {
-      const uuid = core[_data].elements[index].uuid;
-      const selectedUUID = core[_engine].temp.get("selectedUUID");
+    if (core.$data.elements[index]) {
+      const uuid = core.$data.elements[index].uuid;
+      const selectedUUID = core.getEngine().temp.get("selectedUUID");
       if (typeof uuid === "string" && uuid === selectedUUID) {
-        core[_engine].temp.set("mode", Mode.NULL);
-        core[_engine].temp.set("selectedUUID", null);
-        core[_engine].temp.set("selectedUUIDList", []);
+        core.getEngine().temp.set("mode", Mode.NULL);
+        core.getEngine().temp.set("selectedUUID", null);
+        core.getEngine().temp.set("selectedUUIDList", []);
       }
-      core[_draw]();
+      core.$draw();
     }
   }
-  function cancelElement(core, uuid, opts) {
-    const index = core[_engine].helper.getElementIndexByUUID(uuid);
+  function cancelElement(core, uuid) {
+    const index = core.getEngine().helper.getElementIndexByUUID(uuid);
     if (typeof index === "number" && index >= 0) {
-      core.cancelElementByIndex(index, opts);
+      core.cancelElementByIndex(index);
     }
   }
   function moveUpElement(core, uuid) {
-    const index = core[_engine].helper.getElementIndexByUUID(uuid);
-    if (typeof index === "number" && index >= 0 && index < core[_data].elements.length - 1) {
-      const temp = core[_data].elements[index];
-      core[_data].elements[index] = core[_data].elements[index + 1];
-      core[_data].elements[index + 1] = temp;
+    const index = core.getEngine().helper.getElementIndexByUUID(uuid);
+    if (typeof index === "number" && index >= 0 && index < core.$data.elements.length - 1) {
+      const temp = core.$data.elements[index];
+      core.$data.elements[index] = core.$data.elements[index + 1];
+      core.$data.elements[index + 1] = temp;
     }
-    core[_emitChangeData]();
-    core[_draw]();
+    core.$emitChangeData();
+    core.$draw();
   }
   function moveDownElement(core, uuid) {
-    const index = core[_engine].helper.getElementIndexByUUID(uuid);
-    if (typeof index === "number" && index > 0 && index < core[_data].elements.length) {
-      const temp = core[_data].elements[index];
-      core[_data].elements[index] = core[_data].elements[index - 1];
-      core[_data].elements[index - 1] = temp;
+    const index = core.getEngine().helper.getElementIndexByUUID(uuid);
+    if (typeof index === "number" && index > 0 && index < core.$data.elements.length) {
+      const temp = core.$data.elements[index];
+      core.$data.elements[index] = core.$data.elements[index - 1];
+      core.$data.elements[index - 1] = temp;
     }
-    core[_emitChangeData]();
-    core[_draw]();
+    core.$emitChangeData();
+    core.$draw();
   }
   function addElement(core, elem) {
-    const _elem = deepClone(elem);
-    _elem.uuid = createUUID();
-    core[_data].elements.push(_elem);
-    core[_emitChangeData]();
-    core[_draw]();
+    const _elem = deepClone$1(elem);
+    _elem.uuid = createUUID$1();
+    core.$data.elements.push(_elem);
+    core.$emitChangeData();
+    core.$draw();
     return _elem.uuid;
   }
   function deleteElement(core, uuid) {
-    const index = core[_element].getElementIndex(core[_data], uuid);
+    const index = core.$getElementHandler().getElementIndex(core.getData(), uuid);
     if (index >= 0) {
-      core[_data].elements.splice(index, 1);
-      core[_emitChangeData]();
-      core[_draw]();
+      core.$data.elements.splice(index, 1);
+      core.$emitChangeData();
+      core.$draw();
     }
   }
   function insertElementBefore(core, elem, beforeUUID) {
-    const index = core[_engine].helper.getElementIndexByUUID(beforeUUID);
+    const index = core.getEngine().helper.getElementIndexByUUID(beforeUUID);
     if (index !== null) {
       return core.insertElementBeforeIndex(elem, index);
     }
     return null;
   }
   function insertElementBeforeIndex(core, elem, index) {
-    const _elem = deepClone(elem);
-    _elem.uuid = createUUID();
+    const _elem = deepClone$1(elem);
+    _elem.uuid = createUUID$1();
     if (index >= 0) {
-      core[_data].elements.splice(index, 0, _elem);
-      core[_emitChangeData]();
-      core[_draw]();
+      core.$data.elements.splice(index, 0, _elem);
+      core.$emitChangeData();
+      core.$draw();
       return _elem.uuid;
     }
     return null;
   }
   function insertElementAfter(core, elem, beforeUUID) {
-    const index = core[_engine].helper.getElementIndexByUUID(beforeUUID);
+    const index = core.getEngine().helper.getElementIndexByUUID(beforeUUID);
     if (index !== null) {
       return core.insertElementAfterIndex(elem, index);
     }
     return null;
   }
   function insertElementAfterIndex(core, elem, index) {
-    const _elem = deepClone(elem);
-    _elem.uuid = createUUID();
+    const _elem = deepClone$1(elem);
+    _elem.uuid = createUUID$1();
     if (index >= 0) {
-      core[_data].elements.splice(index + 1, 0, _elem);
-      core[_emitChangeData]();
-      core[_draw]();
+      core.$data.elements.splice(index + 1, 0, _elem);
+      core.$emitChangeData();
+      core.$draw();
       return _elem.uuid;
     }
     return null;
@@ -3932,13 +4978,13 @@ var iDrawCore = function() {
         return;
       }
       const { board } = this._opts;
-      board.on("hover", throttle$1(this._handleHover.bind(this), 32));
-      board.on("leave", throttle$1(this._handleLeave.bind(this), 32));
-      board.on("point", throttle$1(this._handleClick.bind(this), 16));
+      board.on("hover", throttle(this._handleHover.bind(this), 32));
+      board.on("leave", throttle(this._handleLeave.bind(this), 32));
+      board.on("point", throttle(this._handleClick.bind(this), 16));
       board.on("doubleClick", this._handleDoubleClick.bind(this));
       board.on("point", this._handlePoint.bind(this));
       board.on("moveStart", this._handleMoveStart.bind(this));
-      board.on("move", throttle$1(this._handleMove.bind(this), 16));
+      board.on("move", throttle(this._handleMove.bind(this), 16));
       board.on("moveEnd", this._handleMoveEnd.bind(this));
     }
     _handleDoubleClick(point) {
@@ -3947,12 +4993,12 @@ var iDrawCore = function() {
       const data = getDataFeekback();
       const [index, uuid] = element.isPointInElement(point, data);
       if (index >= 0 && uuid) {
-        const elem = deepClone((_a2 = data.elements) == null ? void 0 : _a2[index]);
+        const elem = deepClone$1((_a2 = data.elements) == null ? void 0 : _a2[index]);
         if (((_b2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _b2.invisible) !== true) {
           coreEvent.trigger("screenDoubleClickElement", {
             index,
             uuid,
-            element: deepClone((_c2 = data.elements) == null ? void 0 : _c2[index])
+            element: deepClone$1((_c2 = data.elements) == null ? void 0 : _c2[index])
           });
         }
       }
@@ -3992,7 +5038,7 @@ var iDrawCore = function() {
               coreEvent.trigger("screenSelectElement", {
                 index,
                 uuid: uuid2,
-                element: deepClone((_c2 = data.elements) == null ? void 0 : _c2[index])
+                element: deepClone$1((_c2 = data.elements) == null ? void 0 : _c2[index])
               });
               emitChangeScreen();
             }
@@ -4015,7 +5061,7 @@ var iDrawCore = function() {
         coreEvent.trigger("screenClickElement", {
           index,
           uuid,
-          element: deepClone((_a2 = data.elements) == null ? void 0 : _a2[index])
+          element: deepClone$1((_a2 = data.elements) == null ? void 0 : _a2[index])
         });
       }
       drawFeekback();
@@ -4493,17 +5539,16 @@ var iDrawCore = function() {
       });
     });
   }
-  var _a, _b;
   class Core {
     constructor(mount, opts, config) {
       var _a2, _b2, _c2;
-      this[_a] = new CoreEvent();
-      this[_b] = new TempData$1();
-      this[_data] = { elements: [] };
-      this[_opts] = opts;
-      this[_config] = mergeConfig(config || {});
-      this[_board] = new Board(mount, {
-        ...this[_opts],
+      this._coreEvent = new CoreEvent();
+      this._tempData = new TempData$1();
+      this.$data = { elements: [] };
+      this._opts = opts;
+      this._config = mergeConfig(config || {});
+      this._board = new default_1$2(mount, {
+        ...this._opts,
         canScroll: (_a2 = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _a2.use,
         scrollConfig: {
           color: ((_b2 = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _b2.color) || "#000000",
@@ -4511,12 +5556,12 @@ var iDrawCore = function() {
           ...(config == null ? void 0 : config.scrollWrapper) || {}
         }
       });
-      this[_renderer] = new Renderer();
+      this._renderer = new default_1();
       const drawFrame = () => {
-        const helperCtx = this[_board].getHelperContext();
-        const helperConfig = this[_engine].getHelperConfig();
-        this[_board].clear();
-        const { contextWidth, contextHeight, devicePixelRatio } = this[_opts];
+        const helperCtx = this._board.getHelperContext();
+        const helperConfig = this._engine.getHelperConfig();
+        this._board.clear();
+        const { contextWidth, contextHeight, devicePixelRatio } = this._opts;
         helperCtx.clearRect(
           0,
           0,
@@ -4526,43 +5571,50 @@ var iDrawCore = function() {
         drawElementWrapper(helperCtx, helperConfig);
         drawAreaWrapper(helperCtx, helperConfig);
         drawElementListWrappers(helperCtx, helperConfig);
-        this[_board].draw();
+        this._board.draw();
       };
-      this[_renderer].on("drawFrame", () => {
+      this._renderer.on("drawFrame", () => {
         drawFrame();
       });
-      this[_renderer].on("drawFrameComplete", () => {
+      this._renderer.on("drawFrameComplete", () => {
         drawFrame();
       });
-      this[_element] = new Element(this[_board].getContext());
-      this[_engine] = new Engine({
-        coreEvent: this[_coreEvent],
-        board: this[_board],
-        element: this[_element],
-        config: this[_config],
-        drawFeekback: this[_draw].bind(this),
-        getDataFeekback: () => this[_data],
+      this._elementHandler = new Element(this._board.getContext());
+      this._engine = new Engine({
+        coreEvent: this._coreEvent,
+        board: this._board,
+        element: this._elementHandler,
+        config: this._config,
+        drawFeekback: this.$draw.bind(this),
+        getDataFeekback: () => this.$data,
         selectElementByIndex: this.selectElementByIndex.bind(this),
-        emitChangeScreen: this[_emitChangeScreen].bind(this),
-        emitChangeData: this[_emitChangeData].bind(this)
+        emitChangeScreen: this._emitChangeScreen.bind(this),
+        emitChangeData: this.$emitChangeData.bind(this)
       });
-      this[_engine].init();
-      this[_renderer].on("drawFrame", () => {
-        this[_coreEvent].trigger("drawFrame", void 0);
+      this._engine.init();
+      this._renderer.on("drawFrame", () => {
+        this._coreEvent.trigger("drawFrame", void 0);
       });
-      this[_renderer].on("drawFrameComplete", () => {
-        this[_coreEvent].trigger("drawFrameComplete", void 0);
+      this._renderer.on("drawFrameComplete", () => {
+        this._coreEvent.trigger("drawFrameComplete", void 0);
       });
-      this[_tempData].set("hasInited", true);
+      this._tempData.set("hasInited", true);
+    }
+    _emitChangeScreen() {
+      if (this._coreEvent.has("changeScreen")) {
+        this._coreEvent.trigger("changeScreen", {
+          ...this.getScreenTransform()
+        });
+      }
     }
-    [(_a = _coreEvent, _b = _tempData, _draw)](opts) {
-      this[_engine].updateHelperConfig({
-        width: this[_opts].width,
-        height: this[_opts].height,
-        devicePixelRatio: this[_opts].devicePixelRatio
+    $draw(opts) {
+      this._engine.updateHelperConfig({
+        width: this._opts.width,
+        height: this._opts.height,
+        devicePixelRatio: this._opts.devicePixelRatio
       });
-      this[_renderer].thaw();
-      this[_renderer].render(this[_board].getContext(), this[_data], {
+      this._renderer.thaw();
+      this._renderer.render(this._board.getContext(), this.$data, {
         changeResourceUUIDs: (opts == null ? void 0 : opts.resourceChangeUUIDs) || []
       });
     }
@@ -4581,8 +5633,8 @@ var iDrawCore = function() {
     cancelElementByIndex(index) {
       return cancelElementByIndex(this, index);
     }
-    cancelElement(uuid, opts) {
-      return cancelElement(this, uuid, opts);
+    cancelElement(uuid) {
+      return cancelElement(this, uuid);
     }
     moveUpElement(uuid) {
       return moveUpElement(this, uuid);
@@ -4615,30 +5667,30 @@ var iDrawCore = function() {
       return insertElementAfterIndex(this, elem, index);
     }
     resetSize(opts) {
-      this[_opts] = { ...this[_opts], ...opts };
-      this[_board].resetSize(opts);
-      this[_draw]();
+      this._opts = { ...this._opts, ...opts };
+      this._board.resetSize(opts);
+      this.$draw();
     }
     scale(ratio) {
-      const screen = this[_board].scale(ratio);
-      this[_draw]();
-      this[_emitChangeScreen]();
+      const screen = this._board.scale(ratio);
+      this.$draw();
+      this._emitChangeScreen();
       return screen;
     }
     scrollLeft(left) {
-      const screen = this[_board].scrollX(0 - left);
-      this[_draw]();
-      this[_emitChangeScreen]();
+      const screen = this._board.scrollX(0 - left);
+      this.$draw();
+      this._emitChangeScreen();
       return screen;
     }
     scrollTop(top) {
-      const screen = this[_board].scrollY(0 - top);
-      this[_draw]();
-      this[_emitChangeScreen]();
+      const screen = this._board.scrollY(0 - top);
+      this.$draw();
+      this._emitChangeScreen();
       return screen;
     }
     getScreenTransform() {
-      const transform = this[_board].getTransform();
+      const transform = this._board.getTransform();
       return {
         scale: transform.scale,
         scrollTop: Math.max(0, 0 - transform.scrollY),
@@ -4646,55 +5698,51 @@ var iDrawCore = function() {
       };
     }
     getData() {
-      return deepClone(this[_data]);
+      return deepClone$1(this.$data);
     }
     setData(data, opts) {
-      const resourceChangeUUIDs = diffElementResourceChangeList(
-        this[_data],
-        data
-      );
-      this[_data] = this[_element].initData(deepClone(parseData(data)));
+      const resourceChangeUUIDs = diffElementResourceChangeList(this.$data, data);
+      this.$data = this._elementHandler.initData(deepClone$1(parseData(data)));
       if (opts && opts.triggerChangeEvent === true) {
-        this[_emitChangeData]();
+        this.$emitChangeData();
       }
-      this[_draw]({ resourceChangeUUIDs });
+      this.$draw({ resourceChangeUUIDs });
     }
     clearOperation() {
-      this[_tempData].clear();
-      this[_draw]();
+      this._tempData.clear();
+      this.$draw();
     }
     on(key, callback) {
-      this[_coreEvent].on(key, callback);
+      this._coreEvent.on(key, callback);
     }
     off(key, callback) {
-      this[_coreEvent].off(key, callback);
+      this._coreEvent.off(key, callback);
+    }
+    getEngine() {
+      return this._engine;
     }
     pointScreenToContext(p) {
-      return this[_board].pointScreenToContext(p);
+      return this._board.pointScreenToContext(p);
     }
     pointContextToScreen(p) {
-      return this[_board].pointContextToScreen(p);
+      return this._board.pointContextToScreen(p);
     }
-    __getBoardContext() {
-      return this[_board].getContext();
+    $getBoardContext() {
+      return this._board.getContext();
     }
-    __getDisplayContext2D() {
-      return this[_board].getDisplayContext2D();
+    $getDisplayContext2D() {
+      return this._board.getDisplayContext2D();
     }
-    __getOriginContext2D() {
-      return this[_board].getOriginContext2D();
+    $getOriginContext2D() {
+      return this._board.getOriginContext2D();
     }
-    [_emitChangeScreen]() {
-      if (this[_coreEvent].has("changeScreen")) {
-        this[_coreEvent].trigger("changeScreen", {
-          ...this.getScreenTransform()
-        });
+    $emitChangeData() {
+      if (this._coreEvent.has("changeData")) {
+        this._coreEvent.trigger("changeData", deepClone$1(this.$data));
       }
     }
-    [_emitChangeData]() {
-      if (this[_coreEvent].has("changeData")) {
-        this[_coreEvent].trigger("changeData", deepClone(this[_data]));
-      }
+    $getElementHandler() {
+      return this._elementHandler;
     }
   }
   Core.is = is;