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

package/dist/index.global.js

@@ -7,26 +7,26 @@ var iDrawRenderer = function() {
     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 _clone(t) {
-      const type = is$1(t);
+      var type = is$1(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);
@@ -35,85 +35,56 @@ var iDrawRenderer = function() {
     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();
+    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 = {
+    type: function(data, lowerCase) {
+      var result = parsePrototype(data);
       return lowerCase === true ? result.toLocaleLowerCase() : result;
     },
-    array(data) {
+    array: function(data) {
       return parsePrototype(data) === "Array";
     },
-    json(data) {
+    json: function(data) {
       return parsePrototype(data) === "Object";
     },
-    function(data) {
+    function: function(data) {
       return parsePrototype(data) === "Function";
     },
-    asyncFunction(data) {
+    asyncFunction: function(data) {
       return parsePrototype(data) === "AsyncFunction";
     },
-    string(data) {
+    string: function(data) {
       return parsePrototype(data) === "String";
     },
-    number(data) {
+    number: function(data) {
       return parsePrototype(data) === "Number";
     },
-    undefined(data) {
+    undefined: function(data) {
       return parsePrototype(data) === "Undefined";
     },
-    null(data) {
+    null: function(data) {
       return parsePrototype(data) === "Null";
     },
-    promise(data) {
+    promise: function(data) {
       return parsePrototype(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 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+  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);
@@ -139,12 +110,120 @@ var iDrawRenderer = function() {
       }
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-  };
-  const { Image } = window;
+  }
+  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 _a;
+        var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.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 _a;
+        var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  var Image = window.Image;
   function loadImage(src) {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.crossOrigin = "anonymous";
+    return new Promise(function(resolve, reject) {
+      var img = new Image();
       img.onload = function() {
         resolve(img);
       };
@@ -154,25 +233,41 @@ var iDrawRenderer = function() {
     });
   }
   function loadSVG(svg2) {
-    return __awaiter(this, void 0, void 0, function* () {
-      const dataURL = yield parseSVGToDataURL(svg2);
-      const image = yield loadImage(dataURL);
-      return image;
+    return __awaiter(this, void 0, void 0, function() {
+      var dataURL, image;
+      return __generator(this, function(_a) {
+        switch (_a.label) {
+          case 0:
+            return [4, parseSVGToDataURL(svg2)];
+          case 1:
+            dataURL = _a.sent();
+            return [4, loadImage(dataURL)];
+          case 2:
+            image = _a.sent();
+            return [2, image];
+        }
+      });
     });
   }
-  function filterAmpersand(str) {
-    return str.replace(/\&/ig, "&amp;");
-  }
   function loadHTML(html2, opts) {
-    return __awaiter(this, void 0, void 0, function* () {
-      html2 = filterAmpersand(html2);
-      const dataURL = yield parseHTMLToDataURL(html2, opts);
-      const image = yield loadImage(dataURL);
-      return image;
+    return __awaiter(this, void 0, void 0, function() {
+      var dataURL, image;
+      return __generator(this, function(_a) {
+        switch (_a.label) {
+          case 0:
+            return [4, parseHTMLToDataURL(html2, opts)];
+          case 1:
+            dataURL = _a.sent();
+            return [4, loadImage(dataURL)];
+          case 2:
+            image = _a.sent();
+            return [2, image];
+        }
+      });
     });
   }
-  class Context {
-    constructor(ctx, opts) {
+  var Context = function() {
+    function Context2(ctx, opts) {
       this._opts = opts;
       this._ctx = ctx;
       this._transform = {
@@ -181,19 +276,19 @@ var iDrawRenderer = 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(__assign({}, 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,
@@ -201,166 +296,174 @@ var iDrawRenderer = 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(__assign({}, 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 _a = this._transform, scale = _a.scale, scrollX = _a.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 _a = this._transform, scale = _a.scale, scrollY = _a.scrollY;
+      var _y = (y2 - scrollY) / scale;
       return this._doSize(_y);
-    }
-  }
+    };
+    return Context2;
+  }();
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -389,21 +492,21 @@ var iDrawRenderer = function() {
     return isColorStr(value);
   }
   function imageURL(value) {
-    return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`);
+    return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value));
   }
   function imageBase64(value) {
-    return typeof value === "string" && /^(data:image\/)/.test(`${value}`);
+    return typeof value === "string" && /^(data:image\/)/.test("".concat(value));
   }
   function imageSrc(value) {
     return imageBase64(value) || imageURL(value);
   }
   function svg(value) {
-    return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim());
+    return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim());
   }
   function html(value) {
-    let result = false;
+    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;
@@ -433,7 +536,7 @@ var iDrawRenderer = function() {
   function fontWeight(value) {
     return ["bold"].includes(value);
   }
-  const is = {
+  var is = {
     x,
     y,
     w,
@@ -744,7 +847,7 @@ var iDrawRenderer = function() {
     });
   }
   function drawContext(ctx, data, loader) {
-    var _a2;
+    var _a;
     clearContext(ctx);
     const size = ctx.getSize();
     ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
@@ -756,7 +859,7 @@ var iDrawRenderer = function() {
     }
     for (let i = 0; i < data.elements.length; i++) {
       const elem = data.elements[i];
-      if (((_a2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _a2.invisible) === true) {
+      if (((_a = elem == null ? void 0 : elem.operation) == null ? void 0 : _a.invisible) === true) {
         continue;
       }
       switch (elem.type) {
@@ -850,7 +953,10 @@ var iDrawRenderer = function() {
       this._waitingLoadQueue = [];
     }
     load(data, changeResourceUUIDs) {
-      const [uuidQueue, loadData] = this._resetLoadData(data, changeResourceUUIDs);
+      const [uuidQueue, loadData] = this._resetLoadData(
+        data,
+        changeResourceUUIDs
+      );
       if (this._status === "free" || this._status === "complete") {
         this._currentUUIDQueue = uuidQueue;
         this._currentLoadData = loadData;
@@ -872,14 +978,14 @@ var iDrawRenderer = function() {
       return this._status === "complete";
     }
     getContent(uuid) {
-      var _a2;
-      if (((_a2 = this._storageLoadData[uuid]) == null ? void 0 : _a2.status) === "loaded") {
+      var _a;
+      if (((_a = this._storageLoadData[uuid]) == null ? void 0 : _a.status) === "loaded") {
         return this._storageLoadData[uuid].content;
       }
       return null;
     }
     // getPattern(
-    //   elem: TypeElement<keyof TypeElemDesc>,
+    //   elem: DataElement<keyof DataElemDesc>,
     //   opts?: {
     //     forceUpdate: boolean
     //   }
@@ -990,7 +1096,7 @@ var iDrawRenderer = function() {
           }
           loadUUIDList.push(uuid);
           this._loadElementSource(this._currentLoadData[uuid]).then((image) => {
-            var _a2, _b2;
+            var _a, _b;
             loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
             const status = _loadAction();
             this._storageLoadData[uuid] = {
@@ -1008,29 +1114,29 @@ var iDrawRenderer = function() {
               this._loadTask();
             }
             this._event.trigger("load", {
-              uuid: (_a2 = this._storageLoadData[uuid]) == null ? void 0 : _a2.uuid,
+              uuid: (_a = this._storageLoadData[uuid]) == null ? void 0 : _a.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 ? void 0 : _b2.element
+              element: (_b = this._storageLoadData[uuid]) == null ? void 0 : _b.element
             });
           }).catch((err) => {
-            var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
             console.warn(err);
             loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
             const status = _loadAction();
             if (this._currentLoadData[uuid]) {
               this._storageLoadData[uuid] = {
                 uuid,
-                type: (_a2 = this._currentLoadData[uuid]) == null ? void 0 : _a2.type,
+                type: (_a = this._currentLoadData[uuid]) == null ? void 0 : _a.type,
                 status: "fail",
                 content: null,
                 error: err,
-                source: (_b2 = this._currentLoadData[uuid]) == null ? void 0 : _b2.source,
-                elemW: (_c2 = this._currentLoadData[uuid]) == null ? void 0 : _c2.elemW,
+                source: (_b = this._currentLoadData[uuid]) == null ? void 0 : _b.source,
+                elemW: (_c = this._currentLoadData[uuid]) == null ? void 0 : _c.elemW,
                 elemH: (_d = this._currentLoadData[uuid]) == null ? void 0 : _d.elemH,
                 element: (_e = this._currentLoadData[uuid]) == null ? void 0 : _e.element
               };
@@ -1062,18 +1168,13 @@ var iDrawRenderer = function() {
         const image = await loadImage(params.source);
         return image;
       } else if (params && params.type === "svg") {
-        const image = await loadSVG(
-          params.source
-        );
+        const image = await loadSVG(params.source);
         return image;
       } else if (params && params.type === "html") {
-        const image = await loadHTML(
-          params.source,
-          {
-            width: params.elemW,
-            height: params.elemH
-          }
-        );
+        const image = await loadHTML(params.source, {
+          width: params.elemW,
+          height: params.elemH
+        });
         return image;
       }
       throw Error("Element's source is not support!");
@@ -1127,40 +1228,31 @@ var iDrawRenderer = function() {
       return false;
     }
   }
-  const _queue = Symbol("_queue");
-  const _ctx = Symbol("_ctx");
-  const _status = Symbol("_status");
-  const _loader = Symbol("_loader");
-  const _opts = Symbol("_opts");
-  const _freeze = Symbol("_freeze");
-  const _drawFrame = Symbol("_drawFrame");
-  const _retainQueueOneItem = Symbol("_retainQueueOneItem");
-  var _a, _b, _c;
   const { requestAnimationFrame } = window;
   class Renderer extends RendererEvent {
     constructor(opts) {
       super();
-      this[_a] = [];
-      this[_b] = null;
-      this[_c] = "null";
-      this[_opts] = opts;
-      this[_loader] = new Loader({
+      this._queue = [];
+      this._ctx = null;
+      this._status = "null";
+      this._opts = opts;
+      this._loader = new Loader({
         maxParallelNum: 6
       });
-      this[_loader].on("load", (res) => {
-        this[_drawFrame]();
+      this._loader.on("load", (res) => {
+        this._drawFrame();
         this.trigger("load", { element: res.element });
       });
-      this[_loader].on("error", (res) => {
+      this._loader.on("error", (res) => {
         this.trigger("error", { element: res.element, error: res.error });
       });
-      this[_loader].on("complete", () => {
+      this._loader.on("complete", () => {
         this.trigger("loadComplete", { t: Date.now() });
       });
     }
     render(target, originData, opts) {
       const { changeResourceUUIDs = [] } = opts || {};
-      this[_status] = "free";
+      this._status = "free";
       const data = deepClone(originData);
       if (Array.isArray(data.elements)) {
         data.elements.forEach((elem) => {
@@ -1169,14 +1261,14 @@ var iDrawRenderer = function() {
           }
         });
       }
-      if (!this[_ctx]) {
-        if (this[_opts] && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
-          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts];
+      if (!this._ctx) {
+        if (this._opts && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
+          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
           const canvas = target;
           canvas.width = width * devicePixelRatio;
           canvas.height = height * devicePixelRatio;
           const ctx2d = canvas.getContext("2d");
-          this[_ctx] = new Context(ctx2d, {
+          this._ctx = new Context(ctx2d, {
             width,
             height,
             contextWidth: contextWidth || width,
@@ -1184,77 +1276,77 @@ var iDrawRenderer = function() {
             devicePixelRatio
           });
         } else if (target) {
-          this[_ctx] = target;
+          this._ctx = target;
         }
       }
       if ([
         "freeze"
         /* FREEZE */
-      ].includes(this[_status])) {
+      ].includes(this._status)) {
         return;
       }
       const _data = deepClone({ data });
-      this[_queue].push(_data);
-      this[_drawFrame]();
-      this[_loader].load(data, changeResourceUUIDs || []);
+      this._queue.push(_data);
+      this._drawFrame();
+      this._loader.load(data, changeResourceUUIDs || []);
     }
     getContext() {
-      return this[_ctx];
+      return this._ctx;
     }
     thaw() {
-      this[_status] = "free";
+      this._status = "free";
     }
-    [(_a = _queue, _b = _ctx, _c = _status, _freeze)]() {
-      this[_status] = "freeze";
+    _freeze() {
+      this._status = "freeze";
     }
-    [_drawFrame]() {
-      if (this[_status] === "freeze") {
+    _drawFrame() {
+      if (this._status === "freeze") {
         return;
       }
       requestAnimationFrame(() => {
-        if (this[_status] === "freeze") {
+        if (this._status === "freeze") {
           return;
         }
-        const ctx = this[_ctx];
-        let item = this[_queue][0];
+        const ctx = this._ctx;
+        let item = this._queue[0];
         let isLastFrame = false;
-        if (this[_queue].length > 1) {
-          item = this[_queue].shift();
+        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] = "free";
+            this._status = "free";
           }
         } else {
-          this[_status] = "free";
+          this._status = "free";
         }
         this.trigger("drawFrame", { t: Date.now() });
-        if (this[_loader].isComplete() === true && this[_queue].length === 1 && this[_status] === "free") {
-          if (ctx && this[_queue][0] && this[_queue][0].data) {
-            drawContext(ctx, this[_queue][0].data, this[_loader]);
+        if (this._loader.isComplete() === true && this._queue.length === 1 && this._status === "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._freeze();
         }
       });
     }
-    [_retainQueueOneItem]() {
-      if (this[_queue].length <= 1) {
+    _retainQueueOneItem() {
+      if (this._queue.length <= 1) {
         return;
       }
-      const lastOne = deepClone(this[_queue][this[_queue].length - 1]);
-      this[_queue] = [lastOne];
+      const lastOne = deepClone(this._queue[this._queue.length - 1]);
+      this._queue = [lastOne];
     }
   }
   return Renderer;