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

package/dist/index.global.js

@@ -141,8 +141,8 @@ var iDrawCore = function() {
       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;
+        var _a;
+        const 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) {
@@ -157,8 +157,8 @@ var iDrawCore = function() {
       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;
+        var _a;
+        const 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) {
@@ -1074,14 +1074,14 @@ var iDrawCore = function() {
       return num * this._opts.devicePixelRatio;
     }
     _getOpts(opts) {
-      var _a2;
+      var _a;
       const options = Object.assign(Object.assign({}, opts), {
         scrollConfig: Object.assign(Object.assign({}, defaultScrollConfig), opts.scrollConfig || {})
       });
       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)) {
+      if (!(((_a = options === null || options === void 0 ? void 0 : options.scrollConfig) === null || _a === void 0 ? void 0 : _a.width) > 0)) {
         options.scrollConfig.width = defaultScrollConfig.width;
       }
       options.scrollConfig.width = Math.max(options.scrollConfig.width, defaultScrollConfig.width);
@@ -1128,63 +1128,63 @@ var iDrawCore = function() {
     ctx.closePath();
     ctx.stroke();
   }
-  const _opts$4 = Symbol("_opts");
-  const _ctx$2 = Symbol("_ctx");
+  const _opts$1 = Symbol("_opts");
+  const _ctx = Symbol("_ctx");
   class Screen {
     constructor(ctx, opts) {
-      this[_opts$4] = opts;
-      this[_ctx$2] = ctx;
+      this[_opts$1] = opts;
+      this[_ctx] = ctx;
     }
     resetSize(opts) {
-      this[_opts$4] = Object.assign(Object.assign({}, this[_opts$4]), opts);
+      this[_opts$1] = Object.assign(Object.assign({}, this[_opts$1]), opts);
     }
     calcScreen() {
-      const scaleRatio = this[_ctx$2].getTransform().scale;
-      const { width, height, contextWidth, contextHeight, devicePixelRatio: pxRatio } = this[_opts$4];
+      const scaleRatio = this[_ctx].getTransform().scale;
+      const { width, height, contextWidth, contextHeight, devicePixelRatio: pxRatio } = this[_opts$1];
       let canScrollXPrev = true;
       let canScrollXNext = true;
       let canScrollYPrev = true;
       let canScrollYNext = true;
       if (contextWidth * scaleRatio <= width) {
-        this[_ctx$2].setTransform({
+        this[_ctx].setTransform({
           scrollX: (width - contextWidth * scaleRatio) / 2
         });
         canScrollXPrev = false;
         canScrollXNext = false;
       }
       if (contextHeight * scaleRatio <= height) {
-        this[_ctx$2].setTransform({
+        this[_ctx].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].getTransform().scrollX > 0) {
+        this[_ctx].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].getTransform().scrollY > 0) {
+        this[_ctx].setTransform({
           scrollY: 0
         });
         canScrollYPrev = false;
       }
-      const { scrollX: _scrollX, scrollY: _scrollY } = this[_ctx$2].getTransform();
+      const { scrollX: _scrollX, scrollY: _scrollY } = this[_ctx].getTransform();
       if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) {
-        this[_ctx$2].setTransform({
+        this[_ctx].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].setTransform({
           scrollY: 0 - Math.abs(contextHeight * scaleRatio - height)
         });
         canScrollYNext = false;
       }
-      const { scrollX, scrollY } = this[_ctx$2].getTransform();
+      const { scrollX, scrollY } = this[_ctx].getTransform();
       const size = {
         x: scrollX * scaleRatio,
         y: scrollY * scaleRatio,
@@ -1207,9 +1207,9 @@ 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].width,
+        height: this[_opts$1].height,
+        devicePixelRatio: this[_opts$1].devicePixelRatio,
         canScrollYPrev,
         canScrollYNext,
         canScrollXPrev,
@@ -1230,86 +1230,67 @@ var iDrawCore = function() {
       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;
-      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[_scroller] = new Scroller(displayCtx2d, {
+      this._hasRendered = 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 = this._parsePrivateOptions(opts);
+      const originCtx2d = this._canvas.getContext("2d");
+      const displayCtx2d = this._displayCanvas.getContext("2d");
+      const helperCtx2d = this._helperCanvas.getContext("2d");
+      this._ctx = new Context(originCtx2d, this._opts);
+      this._helperCtx = new Context(helperCtx2d, this._opts);
+      this._screen = new Screen(this._ctx, this._opts);
+      this._watcher = new ScreenWatcher(this._displayCanvas, this._ctx);
+      this._scroller = new Scroller(displayCtx2d, {
         width: opts.width,
         height: opts.height,
         devicePixelRatio: opts.devicePixelRatio || 1,
         scrollConfig: opts.scrollConfig
       });
-      this[_render]();
+      this._render();
     }
     getDisplayContext2D() {
-      return this[_displayCanvas].getContext("2d");
+      return this._displayCanvas.getContext("2d");
     }
     getOriginContext2D() {
-      return this[_ctx$1].getContext();
+      return this._ctx.getContext();
     }
     getHelperContext2D() {
-      return this[_helperCtx].getContext();
+      return this._helperCtx.getContext();
     }
     getContext() {
-      return this[_ctx$1];
+      return this._ctx;
     }
     getHelperContext() {
-      return this[_helperCtx];
+      return this._helperCtx;
     }
     scale(scaleRatio) {
       if (scaleRatio > 0) {
-        this[_ctx$1].setTransform({ scale: scaleRatio });
-        this[_helperCtx].setTransform({ scale: scaleRatio });
+        this._ctx.setTransform({ scale: scaleRatio });
+        this._helperCtx.setTransform({ scale: scaleRatio });
       }
-      const { position, size } = this[_screen].calcScreen();
+      const { position, size } = this._screen.calcScreen();
       return { position, size };
     }
     scrollX(x2) {
-      this[_watcher].setStatusMap({
+      this._watcher.setStatusMap({
         canScrollYPrev: true,
         canScrollYNext: true,
         canScrollXPrev: true,
         canScrollXNext: true
       });
       if (x2 >= 0 || x2 < 0) {
-        this[_ctx$1].setTransform({ scrollX: x2 });
-        this[_helperCtx].setTransform({ scrollX: x2 });
+        this._ctx.setTransform({ scrollX: x2 });
+        this._helperCtx.setTransform({ scrollX: x2 });
       }
-      const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen();
-      this[_watcher].setStatusMap({
+      const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this._screen.calcScreen();
+      this._watcher.setStatusMap({
         canScrollYPrev,
         canScrollYNext,
         canScrollXPrev,
@@ -1318,18 +1299,18 @@ var iDrawCore = function() {
       return { position, size };
     }
     scrollY(y2) {
-      this[_watcher].setStatusMap({
+      this._watcher.setStatusMap({
         canScrollYPrev: true,
         canScrollYNext: true,
         canScrollXPrev: true,
         canScrollXNext: true
       });
       if (y2 >= 0 || y2 < 0) {
-        this[_ctx$1].setTransform({ scrollY: y2 });
-        this[_helperCtx].setTransform({ scrollY: y2 });
+        this._ctx.setTransform({ scrollY: y2 });
+        this._helperCtx.setTransform({ scrollY: y2 });
       }
-      const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen();
-      this[_watcher].setStatusMap({
+      const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this._screen.calcScreen();
+      this._watcher.setStatusMap({
         canScrollYPrev,
         canScrollYNext,
         canScrollXPrev,
@@ -1338,55 +1319,55 @@ var iDrawCore = function() {
       return { position, size };
     }
     getTransform() {
-      return this[_ctx$1].getTransform();
+      return this._ctx.getTransform();
     }
     draw() {
       this.clear();
-      const { position, deviceSize, size } = this[_screen].calcScreen();
-      const 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) {
-        this[_scroller].draw(position);
+      const { position, deviceSize, size } = this._screen.calcScreen();
+      const 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.canScroll === true) {
+        this._scroller.draw(position);
       }
       return { position, size };
     }
     clear() {
-      const displayCtx = this[_displayCanvas].getContext("2d");
-      displayCtx === null || displayCtx === void 0 ? void 0 : displayCtx.clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
+      const 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) {
-      this[_watcher].on(name, callback);
+      this._watcher.on(name, callback);
     }
     off(name, callback) {
-      this[_watcher].off(name, callback);
+      this._watcher.off(name, callback);
     }
     getScreenInfo() {
-      return this[_screen].calcScreen();
+      return this._screen.calcScreen();
     }
     setCursor(cursor) {
-      this[_displayCanvas].style.cursor = cursor;
+      this._displayCanvas.style.cursor = cursor;
     }
     resetCursor() {
-      this[_displayCanvas].style.cursor = "auto";
+      this._displayCanvas.style.cursor = "auto";
     }
     resetSize(opts) {
-      this[_opts$3] = Object.assign(Object.assign({}, this[_opts$3]), opts);
-      this[_resetContext]();
-      this[_ctx$1].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
+      this._opts = Object.assign(Object.assign({}, this._opts), opts);
+      this._resetContext();
+      this._ctx.resetSize(opts);
+      this._helperCtx.resetSize(opts);
+      this._screen.resetSize(opts);
+      this._scroller.resetSize({
+        width: this._opts.width,
+        height: this._opts.height,
+        devicePixelRatio: this._opts.devicePixelRatio
       });
       this.draw();
     }
     getScrollLineWidth() {
       let lineWidth = 0;
-      if (this[_opts$3].canScroll === true) {
-        lineWidth = this[_scroller].getLineWidth();
+      if (this._opts.canScroll === true) {
+        lineWidth = this._scroller.getLineWidth();
       }
       return lineWidth;
     }
@@ -1406,99 +1387,99 @@ var iDrawCore = function() {
       };
       return screenPoint;
     }
-    [(_a$2 = _hasRendered, _render)]() {
-      if (this[_hasRendered] === true) {
+    _render() {
+      if (this._hasRendered === true) {
         return;
       }
-      this[_resetContext]();
-      this[_initEvent]();
-      this[_hasRendered] = true;
-    }
-    [_resetContext]() {
-      const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts$3];
-      this[_canvas].width = contextWidth * devicePixelRatio;
-      this[_canvas].height = contextHeight * devicePixelRatio;
-      this[_helperCanvas].width = contextWidth * devicePixelRatio;
-      this[_helperCanvas].height = contextHeight * devicePixelRatio;
-      this[_displayCanvas].width = width * devicePixelRatio;
-      this[_displayCanvas].height = height * devicePixelRatio;
-      setStyle(this[_displayCanvas], {
+      this._resetContext();
+      this._initEvent();
+      this._hasRendered = true;
+    }
+    _resetContext() {
+      const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
+      this._canvas.width = contextWidth * devicePixelRatio;
+      this._canvas.height = contextHeight * devicePixelRatio;
+      this._helperCanvas.width = contextWidth * devicePixelRatio;
+      this._helperCanvas.height = contextHeight * devicePixelRatio;
+      this._displayCanvas.width = width * devicePixelRatio;
+      this._displayCanvas.height = height * devicePixelRatio;
+      setStyle(this._displayCanvas, {
         width: `${width}px`,
         height: `${height}px`
       });
     }
-    [_parsePrivateOptions](opts) {
+    _parsePrivateOptions(opts) {
       const defaultOpts = {
         devicePixelRatio: 1
       };
       return Object.assign(Object.assign({}, defaultOpts), opts);
     }
-    [_initEvent]() {
-      if (this[_hasRendered] === true) {
+    _initEvent() {
+      if (this._hasRendered === true) {
         return;
       }
-      if (this[_opts$3].canScroll === true) {
+      if (this._opts.canScroll === true) {
         this.on("wheelX", throttle((deltaX) => {
-          this[_doScrollX](deltaX);
+          this._doScrollX(deltaX);
         }, 16));
         this.on("wheelY", throttle((deltaY) => {
-          this[_doScrollY](deltaY);
+          this._doScrollY(deltaY);
         }, 16));
         let scrollType = null;
         this.on("moveStart", throttle((p) => {
-          if (this[_scroller].isPointAtScrollX(p)) {
+          if (this._scroller.isPointAtScrollX(p)) {
             scrollType = "x";
-          } else if (this[_scroller].isPointAtScrollY(p)) {
+          } else if (this._scroller.isPointAtScrollY(p)) {
             scrollType = "y";
           }
         }, 16));
         this.on("move", throttle((p) => {
           if (scrollType) {
-            this[_doMoveScroll](scrollType, p);
+            this._doMoveScroll(scrollType, p);
           }
         }, 16));
         this.on("moveEnd", throttle((p) => {
           if (scrollType) {
-            this[_doMoveScroll](scrollType, p);
+            this._doMoveScroll(scrollType, p);
           }
           scrollType = null;
         }, 16));
       }
     }
-    [_doScrollX](dx, prevScrollX) {
-      const { width } = this[_opts$3];
+    _doScrollX(dx, prevScrollX) {
+      const { width } = this._opts;
       let scrollX = prevScrollX;
       if (!(typeof scrollX === "number" && (scrollX > 0 || scrollX <= 0))) {
-        scrollX = this[_ctx$1].getTransform().scrollX;
+        scrollX = this._ctx.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);
+      const { position } = this._screen.calcScreen();
+      const { xSize } = this._scroller.calc(position);
+      const 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];
+    _doScrollY(dy, prevScrollY) {
+      const { height } = this._opts;
       let scrollY = prevScrollY;
       if (!(typeof scrollY === "number" && (scrollY > 0 || scrollY <= 0))) {
-        scrollY = this[_ctx$1].getTransform().scrollY;
+        scrollY = this._ctx.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);
+      const { position } = this._screen.calcScreen();
+      const { ySize } = this._scroller.calc(position);
+      const moveY = this._screen.calcScreenScroll(position.top, position.bottom, ySize, height, dy);
       this.scrollY(scrollY + moveY);
       this.draw();
     }
-    [_doMoveScroll](scrollType, point) {
+    _doMoveScroll(scrollType, point) {
       if (!scrollType) {
         return;
       }
-      const { position } = this[_screen].calcScreen();
-      const { xSize, ySize } = this[_scroller].calc(position);
+      const { position } = this._screen.calcScreen();
+      const { xSize, ySize } = this._scroller.calc(position);
       if (scrollType === "x") {
-        this[_doScrollX](point.x - xSize / 2, 0);
+        this._doScrollX(point.x - xSize / 2, 0);
       } else if (scrollType === "y") {
-        this[_doScrollY](point.y - ySize / 2, 0);
+        this._doScrollY(point.y - ySize / 2, 0);
       }
     }
   }
@@ -1783,7 +1764,7 @@ var iDrawCore = function() {
     });
   }
   function drawContext(ctx, data, loader) {
-    var _a2;
+    var _a;
     clearContext$1(ctx);
     const size = ctx.getSize();
     ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
@@ -1795,7 +1776,7 @@ var iDrawCore = function() {
     }
     for (let i = 0; i < data.elements.length; i++) {
       const elem = data.elements[i];
-      if (((_a2 = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a2 === void 0 ? void 0 : _a2.invisible) === true) {
+      if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
         continue;
       }
       switch (elem.type) {
@@ -1944,8 +1925,8 @@ var iDrawCore = function() {
       return this._status === LoaderStatus.COMPLETE;
     }
     getContent(uuid) {
-      var _a2;
-      if (((_a2 = this._storageLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.status) === "loaded") {
+      var _a;
+      if (((_a = this._storageLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.status) === "loaded") {
         return this._storageLoadData[uuid].content;
       }
       return null;
@@ -2036,7 +2017,7 @@ var iDrawCore = 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] = {
@@ -2054,29 +2035,29 @@ var iDrawCore = function() {
               this._loadTask();
             }
             this._event.trigger("load", {
-              uuid: (_a2 = this._storageLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.uuid,
+              uuid: (_a = this._storageLoadData[uuid]) === null || _a === void 0 ? 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 || _b2 === void 0 ? void 0 : _b2.element
+              element: (_b = this._storageLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.element
             });
           }).catch((err) => {
-            var _a2, _b2, _c2, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _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] = {
                 uuid,
-                type: (_a2 = this._currentLoadData[uuid]) === null || _a2 === void 0 ? void 0 : _a2.type,
+                type: (_a = this._currentLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.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,
+                source: (_b = this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
+                elemW: (_c = this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.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
               };
@@ -2170,15 +2151,6 @@ var iDrawCore = function() {
       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;
   var DrawStatus;
   (function(DrawStatus2) {
@@ -2190,27 +2162,27 @@ var iDrawCore = function() {
   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({
+      this._queue = [];
+      this._ctx = null;
+      this._status = DrawStatus.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] = DrawStatus.FREE;
+      this._status = DrawStatus.FREE;
       const data = deepClone(originData);
       if (Array.isArray(data.elements)) {
         data.elements.forEach((elem) => {
@@ -2219,14 +2191,14 @@ var iDrawCore = function() {
           }
         });
       }
-      if (!this[_ctx]) {
-        if (this[_opts$2] && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
-          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts$2];
+      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$1(ctx2d, {
+          this._ctx = new Context$1(ctx2d, {
             width,
             height,
             contextWidth: contextWidth || width,
@@ -2234,74 +2206,74 @@ var iDrawCore = function() {
             devicePixelRatio
           });
         } else if (target) {
-          this[_ctx] = target;
+          this._ctx = target;
         }
       }
-      if ([DrawStatus.FREEZE].includes(this[_status])) {
+      if ([DrawStatus.FREEZE].includes(this._status)) {
         return;
       }
-      const _data2 = deepClone({ data });
-      this[_queue].push(_data2);
-      this[_drawFrame]();
-      this[_loader].load(data, changeResourceUUIDs || []);
+      const _data = deepClone({ data });
+      this._queue.push(_data);
+      this._drawFrame();
+      this._loader.load(data, changeResourceUUIDs || []);
     }
     getContext() {
-      return this[_ctx];
+      return this._ctx;
     }
     thaw() {
-      this[_status] = DrawStatus.FREE;
+      this._status = DrawStatus.FREE;
     }
-    [(_a$1 = _queue, _b$1 = _ctx, _c = _status, _freeze)]() {
-      this[_status] = DrawStatus.FREEZE;
+    _freeze() {
+      this._status = DrawStatus.FREEZE;
     }
-    [_drawFrame]() {
-      if (this[_status] === DrawStatus.FREEZE) {
+    _drawFrame() {
+      if (this._status === DrawStatus.FREEZE) {
         return;
       }
       requestAnimationFrame(() => {
-        if (this[_status] === DrawStatus.FREEZE) {
+        if (this._status === DrawStatus.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] = 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]);
+        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._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];
     }
   }
   function number(value) {
@@ -2648,16 +2620,16 @@ var iDrawCore = function() {
     }
   }
   function isChangeImageElementResource(before, after) {
-    var _a2, _b2;
-    return ((_a2 = before == null ? void 0 : before.desc) == null ? void 0 : _a2.src) !== ((_b2 = after == null ? void 0 : after.desc) == null ? void 0 : _b2.src);
+    var _a, _b;
+    return ((_a = before == null ? void 0 : before.desc) == null ? void 0 : _a.src) !== ((_b = after == null ? void 0 : after.desc) == null ? void 0 : _b.src);
   }
   function isChangeSVGElementResource(before, after) {
-    var _a2, _b2;
-    return ((_a2 = before == null ? void 0 : before.desc) == null ? void 0 : _a2.svg) !== ((_b2 = after == null ? void 0 : after.desc) == null ? void 0 : _b2.svg);
+    var _a, _b;
+    return ((_a = before == null ? void 0 : before.desc) == null ? void 0 : _a.svg) !== ((_b = after == null ? void 0 : after.desc) == null ? void 0 : _b.svg);
   }
   function isChangeHTMLElementResource(before, after) {
-    var _a2, _b2, _c2, _d, _e, _f;
-    return ((_a2 = before == null ? void 0 : before.desc) == null ? void 0 : _a2.html) !== ((_b2 = after == null ? void 0 : after.desc) == null ? void 0 : _b2.html) || ((_c2 = before == null ? void 0 : before.desc) == null ? void 0 : _c2.width) !== ((_d = after == null ? void 0 : after.desc) == null ? void 0 : _d.width) || ((_e = before == null ? void 0 : before.desc) == null ? void 0 : _e.height) !== ((_f = after == null ? void 0 : after.desc) == null ? void 0 : _f.height);
+    var _a, _b, _c, _d, _e, _f;
+    return ((_a = before == null ? void 0 : before.desc) == null ? void 0 : _a.html) !== ((_b = after == null ? void 0 : after.desc) == null ? void 0 : _b.html) || ((_c = before == null ? void 0 : before.desc) == null ? void 0 : _c.width) !== ((_d = after == null ? void 0 : after.desc) == null ? void 0 : _d.width) || ((_e = before == null ? void 0 : before.desc) == null ? void 0 : _e.height) !== ((_f = after == null ? void 0 : after.desc) == null ? void 0 : _f.height);
   }
   function diffElementResourceChange(before, after) {
     let result = null;
@@ -2691,12 +2663,12 @@ var iDrawCore = function() {
     return result;
   }
   function diffElementResourceChangeList(before, after) {
-    var _a2;
+    var _a;
     const uuids = [];
     const beforeMap = parseDataElementMap(before);
     const afterMap = parseDataElementMap(after);
     for (const uuid in afterMap) {
-      if (["image", "svg", "html"].includes((_a2 = afterMap[uuid]) == null ? void 0 : _a2.type) !== true) {
+      if (["image", "svg", "html"].includes((_a = afterMap[uuid]) == null ? void 0 : _a.type) !== true) {
         continue;
       }
       if (beforeMap[uuid]) {
@@ -2795,16 +2767,16 @@ var iDrawCore = function() {
       return data;
     }
     isPointInElement(p, data) {
-      var _a2, _b2;
+      var _a, _b;
       const ctx = this._ctx;
       let idx = -1;
       let uuid = null;
       for (let i = data.elements.length - 1; i >= 0; i--) {
         const ele = data.elements[i];
-        if (((_a2 = ele.operation) == null ? void 0 : _a2.invisible) === true)
+        if (((_a = ele.operation) == null ? void 0 : _a.invisible) === true)
           continue;
         let bw = 0;
-        if (((_b2 = ele.desc) == null ? void 0 : _b2.borderWidth) > 0) {
+        if (((_b = ele.desc) == null ? void 0 : _b.borderWidth) > 0) {
           bw = ele.desc.borderWidth;
         }
         rotateElement(ctx, ele, () => {
@@ -2838,12 +2810,12 @@ var iDrawCore = function() {
       this.limitElementAttrs(data.elements[index]);
     }
     transformElement(data, uuid, point, prevPoint, scale, direction) {
-      var _a2, _b2;
+      var _a, _b;
       const index = this.getElementIndex(data, uuid);
       if (!data.elements[index]) {
         return null;
       }
-      if (((_b2 = (_a2 = data.elements[index]) == null ? void 0 : _a2.operation) == null ? void 0 : _b2.lock) === true) {
+      if (((_b = (_a = data.elements[index]) == null ? void 0 : _a.operation) == null ? void 0 : _b.lock) === true) {
         return null;
       }
       const moveX = (point.x - prevPoint.x) / scale;
@@ -2894,11 +2866,11 @@ var iDrawCore = function() {
       elem.angle = limitAngle(elem.angle || 0);
     }
   }
-  function calcuScaleElemPosition(elem, moveX, moveY, direction, scale) {
-    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  function calcuScaleElemPosition(elem, moveX, moveY, direction) {
+    var _a, _b, _c, _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;
-    if (((_a2 = elem.operation) == null ? void 0 : _a2.limitRatio) === true) {
+    elem.angle || 0;
+    if (((_a = elem.operation) == null ? void 0 : _a.limitRatio) === true) {
       if (["top-left", "top-right", "bottom-right", "bottom-left"].includes(
         direction
       )) {
@@ -2918,16 +2890,16 @@ 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;
-            if (((_b2 = elem.operation) == null ? void 0 : _b2.limitRatio) === true) {
+            if (((_b = elem.operation) == null ? void 0 : _b.limitRatio) === true) {
               p.x += moveY / elem.h * elem.w / 2;
               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;
@@ -2958,7 +2930,7 @@ var iDrawCore = function() {
             centerY = centerY - centerMoveDist * Math.sin(radian);
           }
           if (p.h + moveDist > 0) {
-            if (((_c2 = elem.operation) == null ? void 0 : _c2.limitRatio) === true) {
+            if (((_c = elem.operation) == null ? void 0 : _c.limitRatio) === true) {
               p.w = p.w + moveDist / elem.h * elem.w;
             }
             p.h = p.h + moveDist;
@@ -2986,7 +2958,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 +2966,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 +3024,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 +3032,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 +3090,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 +3099,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;
@@ -3217,9 +3189,9 @@ var iDrawCore = function() {
       return null;
     }
     isPointInElementWrapperController(p, data) {
-      var _a2, _b2;
+      var _a, _b;
       const ctx = this._ctx;
-      const uuid = ((_b2 = (_a2 = this._helperConfig) == null ? void 0 : _a2.selectedElementWrapper) == null ? void 0 : _b2.uuid) || null;
+      const uuid = ((_b = (_a = this._helperConfig) == null ? void 0 : _a.selectedElementWrapper) == null ? void 0 : _b.uuid) || null;
       let directIndex = null;
       let selectedControllerDirection = null;
       let hoverControllerDirection = null;
@@ -3335,21 +3307,21 @@ var iDrawCore = function() {
       };
     }
     isPointInElementList(p, data) {
-      var _a2, _b2, _c2;
+      var _a, _b, _c;
       const ctx = this._ctx;
       let idx = -1;
       let uuid = null;
-      const wrapperList = ((_a2 = this._helperConfig) == null ? void 0 : _a2.selectedElementListWrappers) || [];
+      const wrapperList = ((_a = this._helperConfig) == null ? void 0 : _a.selectedElementListWrappers) || [];
       for (let i = 0; i < wrapperList.length; i++) {
         const wrapper = wrapperList[i];
         const elemIdx = this._helperConfig.elementIndexMap[wrapper.uuid];
         const ele = data.elements[elemIdx];
         if (!ele)
           continue;
-        if (((_b2 = ele.operation) == null ? void 0 : _b2.invisible) === true)
+        if (((_b = ele.operation) == null ? void 0 : _b.invisible) === true)
           continue;
         let bw = 0;
-        if (((_c2 = ele.desc) == null ? void 0 : _c2.borderWidth) > 0) {
+        if (((_c = ele.desc) == null ? void 0 : _c.borderWidth) > 0) {
           bw = ele.desc.borderWidth;
         }
         rotateElement(ctx, ele, () => {
@@ -3407,8 +3379,8 @@ var iDrawCore = function() {
       ctx.lineTo(x2, y2);
       ctx.closePath();
       data.elements.forEach((elem) => {
-        var _a2;
-        if (((_a2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _a2.invisible) !== true) {
+        var _a;
+        if (((_a = elem == null ? void 0 : elem.operation) == null ? void 0 : _a.invisible) !== true) {
           const centerX = elem.x + elem.w / 2;
           const centerY = elem.y + elem.h / 2;
           if (ctx.isPointInPathWithoutScroll(centerX, centerY)) {
@@ -3445,7 +3417,7 @@ var iDrawCore = function() {
       });
     }
     _updateSelectedElementWrapper(data, opts) {
-      var _a2;
+      var _a;
       const { selectedUUID: uuid } = opts;
       if (!(typeof uuid === "string" && this._helperConfig.elementIndexMap[uuid] >= 0)) {
         delete this._helperConfig.selectedElementWrapper;
@@ -3453,7 +3425,7 @@ var iDrawCore = function() {
       }
       const index = this._helperConfig.elementIndexMap[uuid];
       const elem = data.elements[index];
-      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) {
         return;
       }
       const wrapper = this._createSelectedElementWrapper(elem, opts);
@@ -3471,14 +3443,14 @@ var iDrawCore = function() {
       this._helperConfig.selectedElementListWrappers = wrapperList;
     }
     _createSelectedElementWrapper(elem, opts) {
-      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;
       const { scale } = opts;
       const elemWrapper = this._coreConfig.elementWrapper;
       const controllerSize = elemWrapper.controllerSize / scale;
       const lineWidth = elemWrapper.lineWidth / scale;
       const lineDash = elemWrapper.lineDash.map((n) => n / scale);
       const rotateLimit = 12;
-      const bw = ((_a2 = elem.desc) == null ? void 0 : _a2.borderWidth) || 0;
+      const bw = ((_a = elem.desc) == null ? void 0 : _a.borderWidth) || 0;
       let hideObliqueDirection = false;
       if (typeof elem.angle === "number" && Math.abs(elem.angle) > limitQbliqueAngle) {
         hideObliqueDirection = true;
@@ -3488,12 +3460,12 @@ var iDrawCore = function() {
         uuid: elem.uuid,
         controllerSize,
         controllerOffset,
-        lock: ((_b2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _b2.lock) === true,
+        lock: ((_b = elem == null ? void 0 : elem.operation) == null ? void 0 : _b.lock) === true,
         controllers: {
           topLeft: {
             x: elem.x - controllerOffset - bw,
             y: elem.y - controllerOffset - bw,
-            invisible: hideObliqueDirection || ((_c2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _c2.disableScale) === true
+            invisible: hideObliqueDirection || ((_c = elem == null ? void 0 : elem.operation) == null ? void 0 : _c.disableScale) === true
           },
           top: {
             x: elem.x + elem.w / 2,
@@ -3547,20 +3519,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 +3589,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 +3650,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,17 +3666,16 @@ 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);
       }
@@ -3725,26 +3684,26 @@ var iDrawCore = function() {
   }
   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(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(core.$data.elements[index]);
     }
     return elem;
   }
   function updateElement(core, elem) {
-    var _a2;
+    var _a;
     const _elem = deepClone(elem);
-    const data = core[_data];
+    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)) {
+      if (_elem.uuid === ((_a = data.elements[i]) == null ? void 0 : _a.uuid)) {
         const result = diffElementResourceChange(data.elements[i], _elem);
         if (typeof result === "string") {
           resourceChangeUUIDs.push(result);
@@ -3753,82 +3712,82 @@ 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]();
+    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);
     }
@@ -3838,15 +3797,15 @@ var iDrawCore = function() {
     const _elem = deepClone(elem);
     _elem.uuid = createUUID();
     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);
     }
@@ -3856,9 +3815,9 @@ var iDrawCore = function() {
     const _elem = deepClone(elem);
     _elem.uuid = createUUID();
     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;
@@ -3908,7 +3867,7 @@ var iDrawCore = function() {
       return this.helper.getConfig();
     }
     updateHelperConfig(opts) {
-      var _a2;
+      var _a;
       const { board, getDataFeekback, config } = this._opts;
       const data = getDataFeekback();
       const transform = board.getTransform();
@@ -3916,7 +3875,7 @@ var iDrawCore = function() {
         width: opts.width,
         height: opts.height,
         devicePixelRatio: opts.devicePixelRatio,
-        canScroll: ((_a2 = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _a2.use) === true,
+        canScroll: ((_a = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _a.use) === true,
         selectedUUID: this.temp.get("selectedUUID"),
         selectedUUIDList: this.temp.get("selectedUUIDList"),
         scale: transform.scale,
@@ -3942,24 +3901,24 @@ var iDrawCore = function() {
       board.on("moveEnd", this._handleMoveEnd.bind(this));
     }
     _handleDoubleClick(point) {
-      var _a2, _b2, _c2;
+      var _a, _b, _c;
       const { element, getDataFeekback, drawFeekback, coreEvent } = this._opts;
       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]);
-        if (((_b2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _b2.invisible) !== true) {
+        const elem = deepClone((_a = data.elements) == null ? void 0 : _a[index]);
+        if (((_b = elem == null ? void 0 : elem.operation) == null ? void 0 : _b.invisible) !== true) {
           coreEvent.trigger("screenDoubleClickElement", {
             index,
             uuid,
-            element: deepClone((_c2 = data.elements) == null ? void 0 : _c2[index])
+            element: deepClone((_c = data.elements) == null ? void 0 : _c[index])
           });
         }
       }
       drawFeekback();
     }
     _handlePoint(point) {
-      var _a2, _b2, _c2;
+      var _a, _b, _c;
       if (!this._mapper.isEffectivePoint(point)) {
         return;
       }
@@ -3986,13 +3945,13 @@ var iDrawCore = function() {
           this.temp.set("selectedUUID", uuid);
         } else {
           const [index, uuid2] = element.isPointInElement(point, data);
-          if (index >= 0 && ((_b2 = (_a2 = data.elements[index]) == null ? void 0 : _a2.operation) == null ? void 0 : _b2.invisible) !== true) {
+          if (index >= 0 && ((_b = (_a = data.elements[index]) == null ? void 0 : _a.operation) == null ? void 0 : _b.invisible) !== true) {
             selectElementByIndex2(index, { useMode: true });
             if (typeof uuid2 === "string" && coreEvent.has("screenSelectElement")) {
               coreEvent.trigger("screenSelectElement", {
                 index,
                 uuid: uuid2,
-                element: deepClone((_c2 = data.elements) == null ? void 0 : _c2[index])
+                element: deepClone((_c = data.elements) == null ? void 0 : _c[index])
               });
               emitChangeScreen();
             }
@@ -4007,7 +3966,7 @@ var iDrawCore = function() {
       drawFeekback();
     }
     _handleClick(point) {
-      var _a2;
+      var _a;
       const { element, getDataFeekback, coreEvent, drawFeekback } = this._opts;
       const data = getDataFeekback();
       const [index, uuid] = element.isPointInElement(point, data);
@@ -4015,7 +3974,7 @@ var iDrawCore = function() {
         coreEvent.trigger("screenClickElement", {
           index,
           uuid,
-          element: deepClone((_a2 = data.elements) == null ? void 0 : _a2[index])
+          element: deepClone((_a = data.elements) == null ? void 0 : _a[index])
         });
       }
       drawFeekback();
@@ -4088,12 +4047,12 @@ var iDrawCore = function() {
       const data = getDataFeekback();
       const helper = this.helper;
       uuids.forEach((uuid) => {
-        var _a2, _b2;
+        var _a, _b;
         const idx = helper.getElementIndexByUUID(uuid);
         if (idx === null)
           return;
         const elem = data.elements[idx];
-        if (((_a2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _a2.lock) !== true && ((_b2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _b2.invisible) !== true) {
+        if (((_a = elem == null ? void 0 : elem.operation) == null ? void 0 : _a.lock) !== true && ((_b = elem == null ? void 0 : elem.operation) == null ? void 0 : _b.invisible) !== true) {
           element.dragElement(
             data,
             uuid,
@@ -4177,7 +4136,7 @@ var iDrawCore = function() {
       }
     }
     _handleHover(point) {
-      var _a2, _b2;
+      var _a, _b;
       let isMouseOverElement = false;
       const { board, getDataFeekback, coreEvent } = this._opts;
       const data = getDataFeekback();
@@ -4192,7 +4151,7 @@ var iDrawCore = function() {
           const index = helper.getElementIndexByUUID(elementUUID);
           if (index !== null && index >= 0) {
             const elem = data.elements[index];
-            if (((_a2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _a2.lock) === true || ((_b2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _b2.invisible) === true) {
+            if (((_a = elem == null ? void 0 : elem.operation) == null ? void 0 : _a.lock) === true || ((_b = elem == null ? void 0 : elem.operation) == null ? void 0 : _b.invisible) === true) {
               board.resetCursor();
               return;
             }
@@ -4493,30 +4452,29 @@ 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],
-        canScroll: (_a2 = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _a2.use,
+      var _a, _b, _c;
+      this._coreEvent = new CoreEvent();
+      this._tempData = new TempData$1();
+      this.$data = { elements: [] };
+      this._opts = opts;
+      this._config = mergeConfig(config || {});
+      this._board = new Board(mount, {
+        ...this._opts,
+        canScroll: (_a = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _a.use,
         scrollConfig: {
-          color: ((_b2 = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _b2.color) || "#000000",
-          width: ((_c2 = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _c2.width) || 12,
+          color: ((_b = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _b.color) || "#000000",
+          width: ((_c = config == null ? void 0 : config.scrollWrapper) == null ? void 0 : _c.width) || 12,
           ...(config == null ? void 0 : config.scrollWrapper) || {}
         }
       });
-      this[_renderer] = new Renderer();
+      this._renderer = new Renderer();
       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 +4484,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 +4546,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 +4580,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 +4611,51 @@ var iDrawCore = function() {
       };
     }
     getData() {
-      return deepClone(this[_data]);
+      return deepClone(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(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(this.$data));
       }
     }
-    [_emitChangeData]() {
-      if (this[_coreEvent].has("changeData")) {
-        this[_coreEvent].trigger("changeData", deepClone(this[_data]));
-      }
+    $getElementHandler() {
+      return this._elementHandler;
     }
   }
   Core.is = is;