@idraw/core 0.4.0-beta.39 → 0.4.0-beta.40

package/dist/index.global.js

@@ -8,22 +8,22 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  var _eventHub, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _Cursor_instances, init_fn, loadResizeCursorBaseImage_fn, resetCursor_fn, setCursorResize_fn, appendRotateResizeImage_fn, _board, _canvas, _container2, _Core_instances, initContainer_fn;
+  var _opts, _store, _hasDestroyed, _BoardWatcher_instances, init_fn, _onWheel, _onContextMenu, _onClick, _onPointLeave, _onPointEnd, _onPointMove, _onPointStart, _onHover, isInTarget_fn, getPoint_fn, isVaildPoint_fn, _activeStore, _sharedStore, _opts2, _drawFrameSnapshotQueue, _drawFrameStatus, _Viewer_instances, init_fn2, drawAnimationFrame_fn, _opts3, _middlewareMap, _middlewares, _activeMiddlewareObjs, _watcher, _renderer, _sharer, _viewer, _calculator, _eventHub, _hasDestroyed2, _Board_instances, init_fn3, handlePointStart_fn, handlePointEnd_fn, handlePointMove_fn, handlePointLeave_fn, handleHover_fn, handleDoubleClick_fn, handleContextMenu_fn, handleWheel_fn, handleWheelScale_fn, handleScrollX_fn, handleScrollY_fn, handleResize_fn, handleClear_fn, handleBeforeDrawFrame_fn, handleAfterDrawFrame_fn, resetActiveMiddlewareObjs_fn, _eventHub2, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _Cursor_instances, init_fn4, loadResizeCursorBaseImage_fn, resetCursor_fn, setCursorResize_fn, appendRotateResizeImage_fn, _board, _canvas, _container2, _Core_instances, initContainer_fn;
   function isColorStr(color2) {
-    return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
+    return typeof color2 === "string" && (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
   function mergeHexColorAlpha(hex, alpha) {
     if (alpha === 1) {
       return hex;
     }
     let hexAlpha = 1;
-    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
-    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    const regHex1 = /^#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^#[0-9a-f]{8,8}$/i;
     let result = hex;
     if (regHex1.test(hex)) {
-      hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(5, 7).replace(/^#/, "0x"));
     } else if (regHex2.test(hex)) {
-      hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(7, 9).replace(/^#/, "0x"));
       result = hex.substring(0, 7);
     }
     hexAlpha = hexAlpha * alpha;
@@ -64,6 +64,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function isAssetId(id) {
     return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
   }
+  (function(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  });
   function deepClone(target) {
     function _clone(t) {
       const type = is$1(t);
@@ -236,6 +247,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return image;
     });
   }
+  function positiveNum(value) {
+    return typeof value === "number" && value >= 0;
+  }
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -246,19 +260,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return number(value);
   }
   function w(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function h(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function angle(value) {
     return typeof value === "number" && value >= -360 && value <= 360;
   }
   function borderWidth(value) {
-    return w(value);
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function borderRadius(value) {
-    return number(value) && value >= 0;
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function color(value) {
     return isColorStr(value);
@@ -312,6 +326,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
   }
   const is = {
+    positiveNum,
     x,
     y,
     w,
@@ -335,13 +350,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     fontWeight: fontWeight$1,
     strokeWidth
   };
-  var __classPrivateFieldSet$9 = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet$5 = function(receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
   };
-  var __classPrivateFieldGet$9 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet$5 = function(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
@@ -354,21 +369,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     constructor(ctx, opts) {
       _Context2D_ctx.set(this, void 0);
       _Context2D_opts.set(this, void 0);
-      __classPrivateFieldSet$9(this, _Context2D_ctx, ctx, "f");
-      __classPrivateFieldSet$9(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
+      __classPrivateFieldSet$5(this, _Context2D_ctx, ctx, "f");
+      __classPrivateFieldSet$5(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
       this.$resetFont();
     }
     $undoPixelRatio(num) {
-      return num / __classPrivateFieldGet$9(this, _Context2D_opts, "f").devicePixelRatio;
+      return num / __classPrivateFieldGet$5(this, _Context2D_opts, "f").devicePixelRatio;
     }
     $doPixelRatio(num) {
-      return __classPrivateFieldGet$9(this, _Context2D_opts, "f").devicePixelRatio * num;
+      return __classPrivateFieldGet$5(this, _Context2D_opts, "f").devicePixelRatio * num;
     }
     $getContext() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f");
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f");
     }
     $setContext(ctx) {
-      __classPrivateFieldSet$9(this, _Context2D_ctx, ctx, "f");
+      __classPrivateFieldSet$5(this, _Context2D_ctx, ctx, "f");
     }
     $setFont(opts) {
       const strList = [];
@@ -377,7 +392,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
       strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
       strList.push(`${opts.fontFamily || "sans-serif"}`);
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
     }
     $resetFont() {
       this.$setFont({
@@ -387,14 +402,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       });
     }
     $getOffscreenCanvas() {
-      return __classPrivateFieldGet$9(this, _Context2D_opts, "f").offscreenCanvas;
+      return __classPrivateFieldGet$5(this, _Context2D_opts, "f").offscreenCanvas;
     }
     $resize(opts) {
       const { width, height, devicePixelRatio, resetStyle } = opts;
-      const { canvas } = __classPrivateFieldGet$9(this, _Context2D_ctx, "f");
+      const { canvas } = __classPrivateFieldGet$5(this, _Context2D_ctx, "f");
       canvas.width = width * devicePixelRatio;
       canvas.height = height * devicePixelRatio;
-      __classPrivateFieldSet$9(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet$9(this, _Context2D_opts, "f")), {
+      __classPrivateFieldSet$5(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet$5(this, _Context2D_opts, "f")), {
         devicePixelRatio
       }), "f");
       if (resetStyle === true) {
@@ -403,8 +418,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     }
     $getSize() {
-      const { devicePixelRatio } = __classPrivateFieldGet$9(this, _Context2D_opts, "f");
-      const { width, height } = __classPrivateFieldGet$9(this, _Context2D_ctx, "f").canvas;
+      const { devicePixelRatio } = __classPrivateFieldGet$5(this, _Context2D_opts, "f");
+      const { width, height } = __classPrivateFieldGet$5(this, _Context2D_ctx, "f").canvas;
       return {
         width: width / devicePixelRatio,
         height: height / devicePixelRatio,
@@ -412,125 +427,131 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
     }
     get canvas() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").canvas;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").canvas;
     }
     get fillStyle() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillStyle;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").fillStyle;
     }
     set fillStyle(value) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillStyle = value;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").fillStyle = value;
     }
     get strokeStyle() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeStyle;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").strokeStyle;
     }
     set strokeStyle(color2) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeStyle = color2;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").strokeStyle = color2;
     }
     get lineWidth() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineWidth);
+      return this.$undoPixelRatio(__classPrivateFieldGet$5(this, _Context2D_ctx, "f").lineWidth);
     }
     set lineWidth(w2) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
     }
     get textAlign() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textAlign;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").textAlign;
     }
     set textAlign(align) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textAlign = align;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").textAlign = align;
     }
     get textBaseline() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textBaseline;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").textBaseline;
     }
     set textBaseline(baseline) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textBaseline = baseline;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").textBaseline = baseline;
     }
     get globalAlpha() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalAlpha;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").globalAlpha;
     }
     set globalAlpha(alpha) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalAlpha = alpha;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").globalAlpha = alpha;
     }
     get shadowColor() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowColor;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowColor;
     }
     set shadowColor(color2) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowColor = color2;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowColor = color2;
     }
     get shadowOffsetX() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetX);
+      return this.$undoPixelRatio(__classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowOffsetX);
     }
     set shadowOffsetX(offsetX) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
     }
     get shadowOffsetY() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetY);
+      return this.$undoPixelRatio(__classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowOffsetY);
     }
     set shadowOffsetY(offsetY) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
     }
     get shadowBlur() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowBlur);
+      return this.$undoPixelRatio(__classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowBlur);
     }
     set shadowBlur(blur) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
     }
     get lineCap() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineCap;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").lineCap;
     }
     set lineCap(lineCap) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineCap = lineCap;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").lineCap = lineCap;
     }
     get globalCompositeOperation() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalCompositeOperation;
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
     }
     fill(...args) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fill(...args);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").fill(...args);
     }
     arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
     }
     rect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     fillRect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     clearRect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     beginPath() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").beginPath();
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").beginPath();
     }
     closePath() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").closePath();
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").closePath();
     }
     lineTo(x2, y2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     moveTo(x2, y2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     arcTo(x1, y1, x2, y2, radius) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").bezierCurveTo(this.$doPixelRatio(cp1x), this.$doPixelRatio(cp1y), this.$doPixelRatio(cp2x), this.$doPixelRatio(cp2y), this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+    }
+    quadraticCurveTo(cpx, cpy, x2, y2) {
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").quadraticCurveTo(this.$doPixelRatio(cpx), this.$doPixelRatio(cpy), this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     getLineDash() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").getLineDash();
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").getLineDash();
     }
     setLineDash(nums) {
       const dash = nums.map((n) => this.$doPixelRatio(n));
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").setLineDash(dash);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").setLineDash(dash);
     }
     stroke(path) {
-      return path ? __classPrivateFieldGet$9(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet$9(this, _Context2D_ctx, "f").stroke();
+      return path ? __classPrivateFieldGet$5(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet$5(this, _Context2D_ctx, "f").stroke();
     }
     translate(x2, y2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     rotate(angle2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").rotate(angle2);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").rotate(angle2);
     }
     drawImage(...args) {
       const image = args[0];
@@ -543,64 +564,64 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const dw = args[args.length - 2];
       const dh = args[args.length - 1];
       if (args.length === 9) {
-        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
       } else {
-        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
       }
     }
     createPattern(image, repetition) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").createPattern(image, repetition);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").createPattern(image, repetition);
     }
     measureText(text2) {
-      const textMetrics = __classPrivateFieldGet$9(this, _Context2D_ctx, "f").measureText(text2);
+      const textMetrics = __classPrivateFieldGet$5(this, _Context2D_ctx, "f").measureText(text2);
       return textMetrics;
     }
     fillText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     strokeText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     save() {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").save();
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").save();
     }
     restore() {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").restore();
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").restore();
     }
     scale(ratioX, ratioY) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
     }
     circle(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").ellipse(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
+      __classPrivateFieldGet$5(this, _Context2D_ctx, "f").ellipse(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
     }
     isPointInPath(x2, y2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     clip(...args) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").clip(...args);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").clip(...args);
     }
     setTransform(a, b, c, d, e, f) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
     }
     getTransform() {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").getTransform();
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
     }
     createConicGradient(startAngle, x2, y2) {
-      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$5(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
   }
   _Context2D_ctx = /* @__PURE__ */ new WeakMap(), _Context2D_opts = /* @__PURE__ */ new WeakMap();
@@ -628,91 +649,45 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return context2d;
   }
   function createBoardContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen, createCustomContext2D } = opts;
+    const { width, height, devicePixelRatio } = opts;
     const ctxOpts = {
       width,
       height,
       devicePixelRatio
     };
     const ctx = canvas.getContext("2d");
-    if (createCustomContext2D) {
-      const viewContext = createCustomContext2D(ctxOpts);
-      const overlayContext = createCustomContext2D(ctxOpts);
-      const underlayContext = createCustomContext2D(ctxOpts);
-      const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
-      const drawView = () => {
-        const { width: w2, height: h2 } = viewContext.$getSize();
-        boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
-        underlayContext.clearRect(0, 0, w2, h2);
-        viewContext.clearRect(0, 0, w2, h2);
-        overlayContext.clearRect(0, 0, w2, h2);
-      };
-      const content = {
-        underlayContext,
-        viewContext,
-        overlayContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    }
-    if (offscreen === true) {
-      const viewContext = createOffscreenContext2D(ctxOpts);
-      const overlayContext = createOffscreenContext2D(ctxOpts);
-      const underlayContext = createOffscreenContext2D(ctxOpts);
-      const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
-      const drawView = () => {
-        const { width: w2, height: h2 } = viewContext.$getSize();
-        boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
-        underlayContext.clearRect(0, 0, w2, h2);
-        viewContext.clearRect(0, 0, w2, h2);
-        overlayContext.clearRect(0, 0, w2, h2);
-      };
-      const content = {
-        underlayContext,
-        viewContext,
-        overlayContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    } else {
-      const viewContext = createContext2D(ctxOpts);
-      const overlayContext = createContext2D(ctxOpts);
-      const underlayContext = createContext2D(ctxOpts);
-      const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
-      const drawView = () => {
-        boardContext.clearRect(0, 0, width, height);
-        boardContext.drawImage(underlayContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(overlayContext.canvas, 0, 0, width, height);
-        underlayContext.clearRect(0, 0, width, height);
-        viewContext.clearRect(0, 0, width, height);
-        overlayContext.clearRect(0, 0, width, height);
-      };
-      const content = {
-        underlayContext,
-        viewContext,
-        overlayContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    }
+    const viewContext = createOffscreenContext2D(ctxOpts);
+    const overlayContext = createOffscreenContext2D(ctxOpts);
+    const underlayContext = createOffscreenContext2D(ctxOpts);
+    const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
+    const tempContext = createOffscreenContext2D(ctxOpts);
+    const drawView = () => {
+      const { width: w2, height: h2 } = viewContext.$getSize();
+      boardContext.clearRect(0, 0, w2, h2);
+      boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
+      boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
+      boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
+      underlayContext.clearRect(0, 0, w2, h2);
+      viewContext.clearRect(0, 0, w2, h2);
+      overlayContext.clearRect(0, 0, w2, h2);
+    };
+    const content = {
+      underlayContext,
+      viewContext,
+      overlayContext,
+      boardContext,
+      tempContext,
+      drawView
+    };
+    return content;
   }
-  var __classPrivateFieldSet$8 = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet$4 = function(receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
   };
-  var __classPrivateFieldGet$8 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet$4 = function(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
@@ -721,20 +696,20 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   class EventEmitter {
     constructor() {
       _EventEmitter_listeners.set(this, void 0);
-      __classPrivateFieldSet$8(this, _EventEmitter_listeners, /* @__PURE__ */ new Map(), "f");
+      __classPrivateFieldSet$4(this, _EventEmitter_listeners, /* @__PURE__ */ new Map(), "f");
     }
     on(eventKey, callback) {
-      if (__classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").has(eventKey)) {
-        const callbacks = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(eventKey) || [];
+      if (__classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").get(eventKey) || [];
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
-        __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
+        __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
       } else {
-        __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
+        __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
       }
     }
     off(eventKey, callback) {
-      if (__classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").has(eventKey)) {
-        const callbacks = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(eventKey);
+      if (__classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").get(eventKey);
         if (Array.isArray(callbacks)) {
           for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
             if (callbacks[i] === callback) {
@@ -743,11 +718,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             }
           }
         }
-        __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
+        __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
       }
     }
     trigger(eventKey, e) {
-      const callbacks = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(eventKey);
+      const callbacks = __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").get(eventKey);
       if (Array.isArray(callbacks)) {
         callbacks.forEach((cb) => {
           cb(e);
@@ -758,8 +733,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     }
     has(name) {
-      if (__classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").has(name)) {
-        const list = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(name);
+      if (__classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").has(name)) {
+        const list = __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
@@ -770,7 +745,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.clear();
     }
     clear() {
-      __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").clear();
+      __classPrivateFieldGet$4(this, _EventEmitter_listeners, "f").clear();
     }
   }
   _EventEmitter_listeners = /* @__PURE__ */ new WeakMap();
@@ -784,13 +759,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       y: p1.y + (p2.y - p1.y) / 2
     };
   }
-  var __classPrivateFieldSet$7 = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet$3 = function(receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
   };
-  var __classPrivateFieldGet$7 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet$3 = function(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
@@ -802,38 +777,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       _Store_temp.set(this, void 0);
       _Store_backUpDefaultStorage.set(this, void 0);
       _Store_static.set(this, void 0);
-      __classPrivateFieldSet$7(this, _Store_backUpDefaultStorage, deepClone(opts.defaultStorage), "f");
-      __classPrivateFieldSet$7(this, _Store_temp, __classPrivateFieldGet$7(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
-      __classPrivateFieldSet$7(this, _Store_static, opts.defaultStatic || {}, "f");
+      __classPrivateFieldSet$3(this, _Store_backUpDefaultStorage, deepClone(opts.defaultStorage), "f");
+      __classPrivateFieldSet$3(this, _Store_temp, __classPrivateFieldGet$3(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
+      __classPrivateFieldSet$3(this, _Store_static, opts.defaultStatic || {}, "f");
     }
     set(name, value) {
-      __classPrivateFieldGet$7(this, _Store_temp, "f")[name] = value;
+      __classPrivateFieldGet$3(this, _Store_temp, "f")[name] = value;
     }
     get(name) {
-      return __classPrivateFieldGet$7(this, _Store_temp, "f")[name];
+      return __classPrivateFieldGet$3(this, _Store_temp, "f")[name];
     }
     setStatic(name, value) {
-      __classPrivateFieldGet$7(this, _Store_static, "f")[name] = value;
+      __classPrivateFieldGet$3(this, _Store_static, "f")[name] = value;
     }
     getStatic(name) {
-      return __classPrivateFieldGet$7(this, _Store_static, "f")[name];
+      return __classPrivateFieldGet$3(this, _Store_static, "f")[name];
     }
     getSnapshot(opts) {
       if ((opts === null || opts === void 0 ? void 0 : opts.deepClone) === true) {
-        return deepClone(__classPrivateFieldGet$7(this, _Store_temp, "f"));
+        return deepClone(__classPrivateFieldGet$3(this, _Store_temp, "f"));
       }
-      return Object.assign({}, __classPrivateFieldGet$7(this, _Store_temp, "f"));
+      return Object.assign({}, __classPrivateFieldGet$3(this, _Store_temp, "f"));
     }
     clear() {
-      __classPrivateFieldSet$7(this, _Store_temp, __classPrivateFieldGet$7(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
+      __classPrivateFieldSet$3(this, _Store_temp, __classPrivateFieldGet$3(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
     }
     destroy() {
-      __classPrivateFieldSet$7(this, _Store_temp, null, "f");
-      __classPrivateFieldSet$7(this, _Store_static, null, "f");
+      __classPrivateFieldSet$3(this, _Store_temp, null, "f");
+      __classPrivateFieldSet$3(this, _Store_static, null, "f");
     }
   }
   _Store_temp = /* @__PURE__ */ new WeakMap(), _Store_backUpDefaultStorage = /* @__PURE__ */ new WeakMap(), _Store_static = /* @__PURE__ */ new WeakMap(), _Store_instances = /* @__PURE__ */ new WeakSet(), _Store_createTempStorage = function _Store_createTempStorage2() {
-    return deepClone(__classPrivateFieldGet$7(this, _Store_backUpDefaultStorage, "f"));
+    return deepClone(__classPrivateFieldGet$3(this, _Store_backUpDefaultStorage, "f"));
   };
   function getViewScaleInfoFromSnapshot(snapshot) {
     const { activeStore } = snapshot;
@@ -992,7 +967,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       let resultY = point.y;
       groupQueue.forEach((group) => {
         const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = group;
-        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
         const temp = rotatePoint(center, { x: resultX, y: resultY }, parseAngleToRadian(angle2));
         resultX = temp.x;
         resultY = temp.y;
@@ -1289,7 +1264,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (angle2 === 0) {
       return getElementVertexes(elemSize);
     }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2 }), angle2);
   }
   function calcElementQueueVertexesQueueInGroup(groupQueue) {
     const vesList = [];
@@ -1303,7 +1278,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       totalY += y2;
       let ves;
       if (i === 0) {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
         ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
         rotateActionList.push({
           center: calcElementCenter(elemSize),
@@ -1311,7 +1286,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           radian: parseAngleToRadian(angle2)
         });
       } else {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
         ves = getElementVertexes(elemSize);
         for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
           const { center, radian } = rotateActionList[aIdx];
@@ -1498,7 +1473,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 h: child.h,
                 angle: totalAngle + (child.angle || 0)
               };
-              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo, viewSizeInfo })) {
+              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo })) {
                 result.element = child;
                 if (gIdx < groupQueue.length - 1 || child.type !== "group") {
                   result.groupQueueIndex = gIdx;
@@ -1523,7 +1498,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (((_c = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _c === void 0 ? void 0 : _c.invisible) === true) {
         continue;
       }
-      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo })) {
+      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo })) {
         result.index = i;
         result.element = elem;
         break;
@@ -1590,94 +1565,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     };
     return rangeRectInfo;
   }
-  function sortElementsViewVisiableInfoMap(elements, opts) {
-    const visibleInfoMap = {};
-    const currentPosition = [];
-    const _walk = (elem) => {
-      const baseInfo = {
-        isVisibleInView: true,
-        isGroup: elem.type === "group",
-        position: [...currentPosition]
-      };
-      let originRectInfo = null;
-      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
-      originRectInfo = calcElementOriginRectInfo(elem, {
-        groupQueue: groupQueue || []
-      });
-      visibleInfoMap[elem.uuid] = Object.assign(Object.assign({}, baseInfo), {
-        originRectInfo,
-        rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
-      });
-      if (elem.type === "group") {
-        elem.detail.children.forEach((ele, i) => {
-          currentPosition.push(i);
-          _walk(ele);
-          currentPosition.pop();
-        });
-      }
-    };
-    elements.forEach((elem, index) => {
-      currentPosition.push(index);
-      _walk(elem);
-      currentPosition.pop();
-    });
-    return updateViewVisibleInfoMapStatus(visibleInfoMap, opts);
-  }
-  function isRangeRectInfoCollide(info1, info2) {
-    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
-    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
-    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
-    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
-    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
-    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
-    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
-    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
-    if (rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY || rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY) {
-      return true;
-    }
-    return false;
-  }
-  function updateViewVisibleInfoMapStatus(viewVisibleInfoMap, opts) {
-    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
-    let visibleCount = 0;
-    let invisibleCount = 0;
-    Object.keys(viewVisibleInfoMap).forEach((uuid) => {
-      const info = viewVisibleInfoMap[uuid];
-      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
-      info.isVisibleInView ? visibleCount++ : invisibleCount++;
-    });
-    return { viewVisibleInfoMap, visibleCount, invisibleCount };
-  }
-  function calcVisibleOriginCanvasRectInfo(opts) {
-    const { viewScaleInfo, viewSizeInfo } = opts;
-    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
-    const { width, height } = viewSizeInfo;
-    const x2 = 0 - offsetLeft / scale;
-    const y2 = 0 - offsetTop / scale;
-    const w2 = width / scale;
-    const h2 = height / scale;
-    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
-    const topLeft = { x: x2, y: y2 };
-    const topRight = { x: x2 + w2, y: y2 };
-    const bottomLeft = { x: x2, y: y2 + h2 };
-    const bottomRight = { x: x2 + w2, y: y2 + h2 };
-    const left = { x: x2, y: center.y };
-    const top = { x: center.x, y: y2 };
-    const right = { x: x2 + w2, y: center.y };
-    const bottom = { x: center.x, y: y2 + h2 };
-    const rectInfo = {
-      center,
-      topLeft,
-      topRight,
-      bottomLeft,
-      bottomRight,
-      left,
-      top,
-      right,
-      bottom
-    };
-    return rectInfo;
-  }
   function createControllerElementSizeFromCenter(center, opts) {
     const { x: x2, y: y2 } = center;
     const { size, angle: angle2 } = opts;
@@ -1993,7 +1880,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2, borderDash } = viewElem.detail;
+    let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { borderDash } = viewElem.detail;
     const hasBorderDash = Array.isArray(borderDash) && borderDash.length > 0;
     const { boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
     if (Array.isArray(borderWidth2)) {
@@ -2233,14 +2121,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.globalAlpha = opacity;
       drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
       renderContent === null || renderContent === void 0 ? void 0 : renderContent();
-      drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+      drawBoxBorder(ctx, viewElem, { viewScaleInfo });
       ctx.globalAlpha = parentOpacity;
     };
     if (clipPath) {
       drawClipPath(ctx, viewElem, {
         originElem,
         calcElemSize,
-        viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
           mainRender();
@@ -2250,7 +2137,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         drawClipPathStroke(ctx, viewElem, {
           originElem,
           calcElemSize,
-          viewScaleInfo,
           viewSizeInfo,
           parentOpacity
         });
@@ -2326,8 +2212,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const transform = [];
     if (viewElem.detail.background || pattern) {
       const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
-        viewScaleInfo,
-        viewSizeInfo
+        viewScaleInfo
       });
       ctx.beginPath();
       ctx.moveTo(x2 + radiusList[0], y2);
@@ -2388,12 +2273,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (isColorStr(viewElem.detail.borderColor) === true) {
       borderColor2 = viewElem.detail.borderColor;
     }
-    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
-    let bw = 0;
-    if (typeof borderWidth2 === "number") {
-      bw = borderWidth2 || 1;
+    const { borderDash, borderWidth: borderWidth2, borderRadius: borderRadius2, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
+    let viewBorderDash = [];
+    if (Array.isArray(borderDash) && borderDash.length > 0) {
+      viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    }
+    if (viewBorderDash.length > 0) {
+      ctx.lineCap = "butt";
+    } else {
+      ctx.lineCap = "square";
     }
-    bw = bw * scale;
     let radiusList = [0, 0, 0, 0];
     if (typeof borderRadius2 === "number") {
       const br = borderRadius2 * scale;
@@ -2401,11 +2290,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     } else if (Array.isArray(borderRadius2) && (borderRadius2 === null || borderRadius2 === void 0 ? void 0 : borderRadius2.length) === 4) {
       radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
     }
-    ctx.strokeStyle = borderColor2;
-    let viewBorderDash = [];
-    if (Array.isArray(borderDash) && borderDash.length > 0) {
-      viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    let bw = 0;
+    if (typeof borderWidth2 === "number") {
+      bw = borderWidth2 || 1;
     }
+    bw = bw * scale;
+    ctx.strokeStyle = borderColor2;
     let borderTop = 0;
     let borderRight = 0;
     let borderBottom = 0;
@@ -2485,11 +2375,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         w2 = viewElem.w;
         h2 = viewElem.h;
       }
-      if (viewBorderDash.length > 0) {
-        ctx.lineCap = "butt";
-      } else {
-        ctx.lineCap = "square";
-      }
       w2 = Math.max(w2, 1);
       h2 = Math.max(h2, 1);
       radiusList = radiusList.map((r) => {
@@ -2546,7 +2431,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           let a = w2 / 2;
           let b = h2 / 2;
@@ -2555,10 +2439,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           const radiusA = a;
           const radiusB = b;
           if (bw > 0) {
-            if (boxSizing === "content-box") {
-              a = a;
-              b = b;
-            } else if (boxSizing === "center-line") {
+            if (boxSizing === "content-box") ;
+            else if (boxSizing === "center-line") {
               a = a - bw / 2;
               b = b - bw / 2;
             } else {
@@ -2607,7 +2489,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
@@ -2630,7 +2511,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
@@ -2645,8 +2525,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               if (elem.type === "image" && content) {
                 ctx.globalAlpha = getOpacity(elem) * parentOpacity;
                 const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
-                  viewScaleInfo,
-                  viewSizeInfo
+                  viewScaleInfo
                 });
                 const { detail } = elem;
                 const { scaleMode, originW = 0, originH = 0 } = detail;
@@ -2710,7 +2589,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
@@ -2725,7 +2604,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
@@ -2737,23 +2616,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     });
   }
-  const detailConfig = getDefaultElementDetailConfig();
-  function isTextWidthWithinErrorRange(w0, w1, scale) {
-    if (scale < 0.5) {
-      if (w0 < w1 && (w0 - w1) / w0 > -0.15) {
-        return true;
-      }
-    }
-    return w0 >= w1;
-  }
+  const detailConfig$1 = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity, calculator } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      var _a, _b;
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
@@ -2765,130 +2636,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
       });
       {
-        const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
-        const originFontSize = detail.fontSize || detailConfig.fontSize;
+        const detail = Object.assign(Object.assign({}, detailConfig$1), elem.detail);
+        const originFontSize = detail.fontSize || detailConfig$1.fontSize;
         const fontSize2 = originFontSize * viewScaleInfo.scale;
         if (fontSize2 < 2) {
           return;
         }
-        const originLineHeight = detail.lineHeight || originFontSize;
-        const lineHeight2 = originLineHeight * viewScaleInfo.scale;
-        ctx.fillStyle = elem.detail.color || detailConfig.color;
+        ctx.fillStyle = elem.detail.color || detailConfig$1.color;
         ctx.textBaseline = "top";
         ctx.$setFont({
           fontWeight: detail.fontWeight,
           fontSize: fontSize2,
           fontFamily: enhanceFontFamliy(detail.fontFamily)
         });
-        let detailText = detail.text.replace(/\r\n/gi, "\n");
-        if (detail.textTransform === "lowercase") {
-          detailText = detailText.toLowerCase();
-        } else if (detail.textTransform === "uppercase") {
-          detailText = detailText.toUpperCase();
-        }
-        const fontHeight = lineHeight2;
-        const detailTextList = detailText.split("\n");
-        const lines = [];
-        let lineNum = 0;
-        detailTextList.forEach((itemText, idx) => {
-          if (detail.minInlineSize === "maxContent") {
-            lines.push({
-              text: itemText,
-              width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
-            });
-          } else {
-            let lineText = "";
-            let splitStr = "";
-            let tempStrList = itemText.split(splitStr);
-            if (detail.wordBreak === "normal") {
-              const splitStr2 = " ";
-              const wordList = itemText.split(splitStr2);
-              tempStrList = [];
-              wordList.forEach((word, idx2) => {
-                tempStrList.push(word);
-                if (idx2 < wordList.length - 1) {
-                  tempStrList.push(splitStr2);
-                }
-              });
+        {
+          const virtualTextDetail = calculator.getVirtualFlatItem(elem.uuid);
+          if (Array.isArray(virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) && ((_a = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
+              ctx.shadowColor = detail.textShadowColor;
             }
-            if (tempStrList.length === 1 && detail.overflow === "visible") {
-              lines.push({
-                text: tempStrList[0],
-                width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
-              });
-            } else if (tempStrList.length > 0) {
-              for (let i = 0; i < tempStrList.length; i++) {
-                if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
-                  lineText += tempStrList[i] || "";
-                } else {
-                  lines.push({
-                    text: lineText,
-                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                  });
-                  lineText = tempStrList[i] || "";
-                  lineNum++;
-                }
-                if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
-                  break;
-                }
-                if (tempStrList.length - 1 === i) {
-                  if ((lineNum + 1) * fontHeight <= h2) {
-                    lines.push({
-                      text: lineText,
-                      width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                    });
-                    if (idx < detailTextList.length - 1) {
-                      lineNum++;
-                    }
-                    break;
-                  }
-                }
-              }
-            } else {
-              lines.push({
-                text: "",
-                width: 0
-              });
+            if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
+              ctx.shadowOffsetX = detail.textShadowOffsetX;
             }
-          }
-        });
-        let startY = 0;
-        let eachLineStartY = 0;
-        if (fontHeight > fontSize2) {
-          eachLineStartY = (fontHeight - fontSize2) / 2;
-        }
-        if (lines.length * fontHeight < h2) {
-          if (elem.detail.verticalAlign === "top") {
-            startY = 0;
-          } else if (elem.detail.verticalAlign === "bottom") {
-            startY += h2 - lines.length * fontHeight;
-          } else {
-            startY += (h2 - lines.length * fontHeight) / 2;
-          }
-        }
-        {
-          const _y = y2 + startY;
-          if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
-            ctx.shadowColor = detail.textShadowColor;
-          }
-          if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
-            ctx.shadowOffsetX = detail.textShadowOffsetX;
-          }
-          if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
-            ctx.shadowOffsetY = detail.textShadowOffsetY;
-          }
-          if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
-            ctx.shadowBlur = detail.textShadowBlur;
-          }
-          lines.forEach((line, i) => {
-            let _x = x2;
-            if (detail.textAlign === "center") {
-              _x = x2 + (w2 - line.width) / 2;
-            } else if (detail.textAlign === "right") {
-              _x = x2 + (w2 - line.width);
+            if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
+              ctx.shadowOffsetY = detail.textShadowOffsetY;
             }
-            ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
-          });
+            if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
+              ctx.shadowBlur = detail.textShadowBlur;
+            }
+            (_b = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
+              ctx.fillText(line.text, x2 + line.x * viewScaleInfo.scale, y2 + line.y * viewScaleInfo.scale);
+            });
+          }
         }
       }
     });
@@ -2916,7 +2695,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const viewOriginY = originY * scaleH;
     const internalX = x2 - viewOriginX;
     const internalY = y2 - viewOriginY;
-    const _c = elem.detail, restDetail = __rest(_c, ["clipPath", "clipPathStrokeColor", "clipPathStrokeWidth"]);
+    const _c = elem.detail, { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = _c, restDetail = __rest(_c, ["clipPath", "clipPathStrokeColor", "clipPathStrokeWidth"]);
     const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     let boxViewElem = Object.assign({}, viewElem);
@@ -2948,7 +2727,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         renderContent: () => {
           drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
-            viewSizeInfo,
             renderContent: () => {
               ctx.save();
               ctx.translate(internalX, internalY);
@@ -3045,7 +2823,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       ctx.globalAlpha = getOpacity(elem) * parentOpacity;
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
-        viewSizeInfo,
         renderContent: () => {
           drawBox(ctx, viewElem, {
             originElem: elem,
@@ -3055,8 +2832,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             parentOpacity,
             renderContent: () => {
               const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
-                viewScaleInfo,
-                viewSizeInfo
+                viewScaleInfo
               });
               if (elem.detail.overflow === "hidden") {
                 ctx.save();
@@ -3142,7 +2918,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.globalAlpha = 1;
     drawBoxShadow(ctx, viewElem, {
       viewScaleInfo,
-      viewSizeInfo,
       renderContent: () => {
         drawBoxBackground(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
       }
@@ -3153,8 +2928,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const viewElemSize = calcViewElementSize(elem2, { viewScaleInfo: viewScaleInfo2 }) || elem2;
       const viewElem2 = Object.assign(Object.assign({}, elem2), viewElemSize);
       const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem2, {
-        viewScaleInfo: viewScaleInfo2,
-        viewSizeInfo: viewSizeInfo2
+        viewScaleInfo: viewScaleInfo2
       });
       ctx.save();
       ctx.fillStyle = "transparent";
@@ -3172,7 +2946,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (layout.detail.overflow === "hidden") {
       ctx.restore();
     }
-    drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+    drawBoxBorder(ctx, viewElem, { viewScaleInfo });
     ctx.globalAlpha = parentOpacity;
   }
   function drawGlobalBackground(ctx, global, opts) {
@@ -3211,12 +2985,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
-  var __classPrivateFieldGet$6 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet$2 = function(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
-  var __classPrivateFieldSet$6 = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet$2 = function(receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
@@ -3250,7 +3024,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       _Loader_currentLoadItemMap.set(this, {});
       _Loader_storageLoadItemMap.set(this, {});
       _Loader_hasDestroyed.set(this, false);
-      __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "image", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "image", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const src = ((_a = assets[elem.detail.src]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.src;
         const content = yield loadImage(src);
@@ -3260,7 +3034,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           content
         };
       }));
-      __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "html", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "html", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const html2 = ((_a = assets[elem.detail.html]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.html;
         const content = yield loadHTML(html2, {
@@ -3273,7 +3047,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           content
         };
       }));
-      __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "svg", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "svg", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const svg2 = ((_a = assets[elem.detail.svg]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.svg;
         const content = yield loadSVG(svg2);
@@ -3285,40 +3059,40 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }));
     }
     isDestroyed() {
-      return __classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f");
+      return __classPrivateFieldGet$2(this, _Loader_hasDestroyed, "f");
     }
     destroy() {
-      __classPrivateFieldSet$6(this, _Loader_hasDestroyed, true, "f");
+      __classPrivateFieldSet$2(this, _Loader_hasDestroyed, true, "f");
       this.clear();
-      __classPrivateFieldSet$6(this, _Loader_loadFuncMap, null, "f");
-      __classPrivateFieldSet$6(this, _Loader_currentLoadItemMap, null, "f");
-      __classPrivateFieldSet$6(this, _Loader_storageLoadItemMap, null, "f");
+      __classPrivateFieldSet$2(this, _Loader_loadFuncMap, null, "f");
+      __classPrivateFieldSet$2(this, _Loader_currentLoadItemMap, null, "f");
+      __classPrivateFieldSet$2(this, _Loader_storageLoadItemMap, null, "f");
     }
     load(element, assets) {
-      if (__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f") === true) {
+      if (__classPrivateFieldGet$2(this, _Loader_hasDestroyed, "f") === true) {
         return;
       }
-      if (__classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
+      if (__classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
         return;
       }
       if (supportElementTypes.includes(element.type)) {
-        __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_loadResource).call(this, element, assets);
+        __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_loadResource).call(this, element, assets);
       }
     }
     getContent(element) {
       var _a, _b;
       const assetId = getAssetIdFromElement(element);
-      return ((_b = (_a = __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
+      return ((_b = (_a = __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
     }
     getLoadItemMap() {
-      return __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f");
+      return __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f");
     }
     setLoadItemMap(itemMap) {
-      __classPrivateFieldSet$6(this, _Loader_storageLoadItemMap, itemMap, "f");
+      __classPrivateFieldSet$2(this, _Loader_storageLoadItemMap, itemMap, "f");
     }
   }
   _Loader_loadFuncMap = /* @__PURE__ */ new WeakMap(), _Loader_currentLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_storageLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Loader_instances = /* @__PURE__ */ new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc2(type, func) {
-    __classPrivateFieldGet$6(this, _Loader_loadFuncMap, "f")[type] = func;
+    __classPrivateFieldGet$2(this, _Loader_loadFuncMap, "f")[type] = func;
   }, _Loader_getLoadElementSource = function _Loader_getLoadElementSource2(element) {
     var _a, _b, _c;
     let source = null;
@@ -3338,185 +3112,316 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       error: null,
       startTime: -1,
       endTime: -1,
-      source: __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)
+      source: __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)
     };
   }, _Loader_emitLoad = function _Loader_emitLoad2(item) {
     const assetId = getAssetIdFromElement(item.element);
-    const storageItem = __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")[assetId];
-    if (!__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+    const storageItem = __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId];
+    if (!__classPrivateFieldGet$2(this, _Loader_hasDestroyed, "f")) {
       if (storageItem) {
         if (storageItem.startTime < item.startTime) {
-          __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+          __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
           this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
       } else {
-        __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+        __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
         this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
       }
     }
   }, _Loader_emitError = function _Loader_emitError2(item) {
     var _a;
     const assetId = getAssetIdFromElement(item.element);
-    const storageItem = (_a = __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
-    if (!__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+    const storageItem = (_a = __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
+    if (!__classPrivateFieldGet$2(this, _Loader_hasDestroyed, "f")) {
       if (storageItem) {
         if (storageItem.startTime < item.startTime) {
-          __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+          __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
           this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
       } else {
-        __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+        __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
         this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
       }
     }
   }, _Loader_loadResource = function _Loader_loadResource2(element, assets) {
-    const item = __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, element);
+    const item = __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, element);
     const assetId = getAssetIdFromElement(element);
-    if (__classPrivateFieldGet$6(this, _Loader_currentLoadItemMap, "f")[assetId]) {
+    if (__classPrivateFieldGet$2(this, _Loader_currentLoadItemMap, "f")[assetId]) {
       return;
     }
-    __classPrivateFieldGet$6(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
-    const loadFunc = __classPrivateFieldGet$6(this, _Loader_loadFuncMap, "f")[element.type];
-    if (typeof loadFunc === "function" && !__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+    __classPrivateFieldGet$2(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
+    const loadFunc = __classPrivateFieldGet$2(this, _Loader_loadFuncMap, "f")[element.type];
+    if (typeof loadFunc === "function" && !__classPrivateFieldGet$2(this, _Loader_hasDestroyed, "f")) {
       item.startTime = Date.now();
       loadFunc(element, assets).then((result) => {
-        if (!__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+        if (!__classPrivateFieldGet$2(this, _Loader_hasDestroyed, "f")) {
           item.content = result.content;
           item.endTime = Date.now();
           item.status = "load";
-          __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_emitLoad).call(this, item);
+          __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_emitLoad).call(this, item);
         }
       }).catch((err) => {
         console.warn(`Load element source "${item.source}" fail`, err, element);
         item.endTime = Date.now();
         item.status = "error";
         item.error = err;
-        __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_emitError).call(this, item);
+        __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_emitError).call(this, item);
       });
     }
   }, _Loader_isExistingErrorStorage = function _Loader_isExistingErrorStorage2(element) {
     var _a;
     const assetId = getAssetIdFromElement(element);
-    const existItem = (_a = __classPrivateFieldGet$6(this, _Loader_currentLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
-    if (existItem && existItem.status === "error" && existItem.source && existItem.source === __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)) {
+    const existItem = (_a = __classPrivateFieldGet$2(this, _Loader_currentLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
+    if (existItem && existItem.status === "error" && existItem.source && existItem.source === __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)) {
       return true;
     }
     return false;
   };
-  var __classPrivateFieldSet$5 = function(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-  };
-  var __classPrivateFieldGet$5 = function(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-  };
-  var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_hasDestroyed, _Renderer_init;
-  class Renderer extends EventEmitter {
-    constructor(opts) {
-      super();
-      _Renderer_instances.add(this);
-      _Renderer_opts.set(this, void 0);
-      _Renderer_loader.set(this, new Loader());
-      _Renderer_hasDestroyed.set(this, false);
-      __classPrivateFieldSet$5(this, _Renderer_opts, opts, "f");
-      __classPrivateFieldGet$5(this, _Renderer_instances, "m", _Renderer_init).call(this);
-    }
-    isDestroyed() {
-      return __classPrivateFieldGet$5(this, _Renderer_hasDestroyed, "f");
-    }
-    destroy() {
-      this.clear();
-      __classPrivateFieldSet$5(this, _Renderer_opts, null, "f");
-      __classPrivateFieldGet$5(this, _Renderer_loader, "f").destroy();
-      __classPrivateFieldSet$5(this, _Renderer_loader, null, "f");
-      __classPrivateFieldSet$5(this, _Renderer_hasDestroyed, true, "f");
-    }
-    updateOptions(opts) {
-      __classPrivateFieldSet$5(this, _Renderer_opts, opts, "f");
-    }
-    drawData(data, opts) {
-      const loader = __classPrivateFieldGet$5(this, _Renderer_loader, "f");
-      const { calculator, sharer } = __classPrivateFieldGet$5(this, _Renderer_opts, "f");
-      const viewContext = __classPrivateFieldGet$5(this, _Renderer_opts, "f").viewContext;
-      viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
-      const parentElementSize = {
-        x: 0,
-        y: 0,
-        w: opts.viewSizeInfo.width,
-        h: opts.viewSizeInfo.height
-      };
-      const drawOpts = Object.assign({
-        loader,
-        calculator,
-        parentElementSize,
-        elementAssets: data.assets,
-        parentOpacity: 1,
-        overrideElementMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideElemenentMap()
-      }, opts);
-      drawGlobalBackground(viewContext, data.global, drawOpts);
-      if (data.layout) {
-        drawLayout(viewContext, data.layout, drawOpts, () => {
-          drawElementList(viewContext, data, drawOpts);
+  const detailConfig = getDefaultElementDetailConfig();
+  function isTextWidthWithinErrorRange(w0, w1, scale) {
+    return w0 >= w1;
+  }
+  function calcVirtualTextDetail(elem, opts) {
+    const { w: w2, h: h2 } = elem;
+    const x2 = 0;
+    const y2 = 0;
+    const ctx = opts.tempContext;
+    const lines = [];
+    const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+    const originFontSize = detail.fontSize || detailConfig.fontSize;
+    const fontSize2 = originFontSize;
+    if (fontSize2 < 2) {
+      return {};
+    }
+    const originLineHeight = detail.lineHeight || originFontSize;
+    const lineHeight2 = originLineHeight;
+    ctx.textBaseline = "top";
+    ctx.$setFont({
+      fontWeight: detail.fontWeight,
+      fontSize: fontSize2,
+      fontFamily: enhanceFontFamliy(detail.fontFamily)
+    });
+    let detailText = detail.text.replace(/\r\n/gi, "\n");
+    if (detail.textTransform === "lowercase") {
+      detailText = detailText.toLowerCase();
+    } else if (detail.textTransform === "uppercase") {
+      detailText = detailText.toUpperCase();
+    }
+    const fontHeight = lineHeight2;
+    const detailTextList = detailText.split("\n");
+    let lineNum = 0;
+    detailTextList.forEach((itemText, idx) => {
+      if (detail.minInlineSize === "maxContent") {
+        lines.push({
+          x: x2,
+          y: 0,
+          text: itemText,
+          width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
         });
       } else {
-        drawElementList(viewContext, data, drawOpts);
-      }
-    }
-    scale(num) {
-      const { sharer } = __classPrivateFieldGet$5(this, _Renderer_opts, "f");
-      if (!sharer) {
-        return;
-      }
-      const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
-      if (data) {
-        this.drawData(data, {
-          viewScaleInfo: {
-            scale: num,
-            offsetTop,
-            offsetBottom,
-            offsetLeft,
-            offsetRight
-          },
-          viewSizeInfo: {
-            width,
-            height,
-            contextHeight,
-            contextWidth,
-            devicePixelRatio
+        let lineText = "";
+        let splitStr = "";
+        let tempStrList = itemText.split(splitStr);
+        if (detail.wordBreak === "normal") {
+          splitStr = " ";
+          const wordList = itemText.split(splitStr);
+          tempStrList = [];
+          wordList.forEach((word, idx2) => {
+            tempStrList.push(word);
+            if (idx2 < wordList.length - 1) {
+              tempStrList.push(splitStr);
+            }
+          });
+        }
+        if (tempStrList.length === 1 && detail.overflow === "visible") {
+          lines.push({
+            x: x2,
+            y: 0,
+            text: tempStrList[0],
+            width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
+          });
+        } else if (tempStrList.length > 0) {
+          for (let i = 0; i < tempStrList.length; i++) {
+            if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width)) {
+              lineText += tempStrList[i] || "";
+            } else {
+              lines.push({
+                x: x2,
+                y: 0,
+                text: lineText,
+                width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+              });
+              lineText = tempStrList[i] || "";
+              lineNum++;
+            }
+            if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
+              break;
+            }
+            if (tempStrList.length - 1 === i) {
+              if ((lineNum + 1) * fontHeight <= h2) {
+                lines.push({
+                  x: x2,
+                  y: 0,
+                  text: lineText,
+                  width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                });
+                if (idx < detailTextList.length - 1) {
+                  lineNum++;
+                }
+                break;
+              }
+            }
           }
-        });
+        } else {
+          lines.push({
+            x: x2,
+            y: 0,
+            text: "",
+            width: 0
+          });
+        }
+      }
+    });
+    let startY = 0;
+    let eachLineStartY = 0;
+    if (fontHeight > fontSize2) {
+      eachLineStartY = (fontHeight - fontSize2) / 2;
+    }
+    if (lines.length * fontHeight < h2) {
+      if (elem.detail.verticalAlign === "top") {
+        startY = 0;
+      } else if (elem.detail.verticalAlign === "bottom") {
+        startY += h2 - lines.length * fontHeight;
+      } else {
+        startY += (h2 - lines.length * fontHeight) / 2;
       }
     }
-    setLoadItemMap(itemMap) {
-      __classPrivateFieldGet$5(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    {
+      const _y = y2 + startY;
+      lines.forEach((line, i) => {
+        let _x = x2;
+        if (detail.textAlign === "center") {
+          _x = x2 + (w2 - line.width) / 2;
+        } else if (detail.textAlign === "right") {
+          _x = x2 + (w2 - line.width);
+        }
+        lines[i].x = _x;
+        lines[i].y = _y + fontHeight * i + eachLineStartY;
+      });
     }
-    getLoadItemMap() {
-      return __classPrivateFieldGet$5(this, _Renderer_loader, "f").getLoadItemMap();
+    const virtualTextDetail = {
+      textLines: lines
+    };
+    return virtualTextDetail;
+  }
+  function calcVirtualFlatDetail(elem, opts) {
+    let virtualDetail = {};
+    if (elem.type === "text") {
+      virtualDetail = calcVirtualTextDetail(elem, opts);
     }
-    getLoader() {
-      return __classPrivateFieldGet$5(this, _Renderer_loader, "f");
+    return virtualDetail;
+  }
+  function elementsToVirtualFlatMap(elements, opts) {
+    const virtualFlatMap = {};
+    const currentPosition = [];
+    const _walk = (elem) => {
+      const baseInfo = {
+        type: elem.type,
+        isVisibleInView: true,
+        position: [...currentPosition]
+      };
+      let originRectInfo = null;
+      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
+      originRectInfo = calcElementOriginRectInfo(elem, {
+        groupQueue: groupQueue || []
+      });
+      const virtualItem = Object.assign(Object.assign(Object.assign({}, baseInfo), {
+        originRectInfo,
+        rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
+      }), calcVirtualFlatDetail(elem, opts));
+      virtualFlatMap[elem.uuid] = virtualItem;
+      if (elem.type === "group") {
+        elem.detail.children.forEach((ele, i) => {
+          currentPosition.push(i);
+          _walk(ele);
+          currentPosition.pop();
+        });
+      }
+    };
+    elements.forEach((elem, index) => {
+      currentPosition.push(index);
+      _walk(elem);
+      currentPosition.pop();
+    });
+    return virtualFlatMap;
+  }
+  function sortElementsViewVisiableInfoMap(elements, opts) {
+    const { viewScaleInfo, viewSizeInfo, tempContext } = opts;
+    const visibleInfoMap = elementsToVirtualFlatMap(elements, { tempContext });
+    return updateVirtualFlatItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
+  }
+  function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if (rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY || rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY) {
+      return true;
     }
+    return false;
   }
-  _Renderer_opts = /* @__PURE__ */ new WeakMap(), _Renderer_loader = /* @__PURE__ */ new WeakMap(), _Renderer_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Renderer_instances = /* @__PURE__ */ new WeakSet(), _Renderer_init = function _Renderer_init2() {
-    const loader = __classPrivateFieldGet$5(this, _Renderer_loader, "f");
-    loader.on("load", (e) => {
-      this.trigger("load", e);
-    });
-    loader.on("error", (e) => {
-      console.error(e);
+  function updateVirtualFlatItemMapStatus(virtualFlatItemMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(virtualFlatItemMap).forEach((uuid) => {
+      const info = virtualFlatItemMap[uuid];
+      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+      info.isVisibleInView ? visibleCount++ : invisibleCount++;
     });
-  };
-  var __classPrivateFieldSet$4 = function(receiver, state, value, kind, f) {
+    return { virtualFlatItemMap, visibleCount, invisibleCount };
+  }
+  function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x2 = 0 - offsetLeft / scale;
+    const y2 = 0 - offsetTop / scale;
+    const w2 = width / scale;
+    const h2 = height / scale;
+    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
+    const topLeft = { x: x2, y: y2 };
+    const topRight = { x: x2 + w2, y: y2 };
+    const bottomLeft = { x: x2, y: y2 + h2 };
+    const bottomRight = { x: x2 + w2, y: y2 + h2 };
+    const left = { x: x2, y: center.y };
+    const top = { x: center.x, y: y2 };
+    const right = { x: x2 + w2, y: center.y };
+    const bottom = { x: center.x, y: y2 + h2 };
+    const rectInfo = {
+      center,
+      topLeft,
+      topRight,
+      bottomLeft,
+      bottomRight,
+      left,
+      top,
+      right,
+      bottom
+    };
+    return rectInfo;
+  }
+  var __classPrivateFieldSet$1 = function(receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
   };
-  var __classPrivateFieldGet$4 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet$1 = function(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
@@ -3526,10 +3431,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     constructor(opts) {
       _Calculator_opts.set(this, void 0);
       _Calculator_store.set(this, void 0);
-      __classPrivateFieldSet$4(this, _Calculator_opts, opts, "f");
-      __classPrivateFieldSet$4(this, _Calculator_store, new Store({
+      __classPrivateFieldSet$1(this, _Calculator_opts, opts, "f");
+      __classPrivateFieldSet$1(this, _Calculator_store, new Store({
         defaultStorage: {
-          viewVisibleInfoMap: {},
+          virtualFlatItemMap: {},
           visibleCount: 0,
           invisibleCount: 0
         }
@@ -3542,45 +3447,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return Math.round(num);
     }
     destroy() {
-      __classPrivateFieldSet$4(this, _Calculator_opts, null, "f");
+      __classPrivateFieldSet$1(this, _Calculator_opts, null, "f");
     }
     needRender(elem) {
-      const viewVisibleInfoMap = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap");
-      const info = viewVisibleInfoMap[elem.uuid];
+      const virtualFlatItemMap = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap");
+      const info = virtualFlatItemMap[elem.uuid];
       if (!info) {
         return true;
       }
       return info.isVisibleInView;
     }
-    isPointInElement(p, elem, viewScaleInfo, viewSizeInfo) {
-      const context2d = __classPrivateFieldGet$4(this, _Calculator_opts, "f").viewContext;
-      return isViewPointInElement(p, {
-        context2d,
-        element: elem,
-        viewScaleInfo,
-        viewSizeInfo
-      });
-    }
     getPointElement(p, opts) {
-      const context2d = __classPrivateFieldGet$4(this, _Calculator_opts, "f").viewContext;
+      const context2d = __classPrivateFieldGet$1(this, _Calculator_opts, "f").tempContext;
       return getViewPointAtElement(p, Object.assign(Object.assign({}, opts), { context2d }));
     }
-    resetViewVisibleInfoMap(data, opts) {
+    resetVirtualFlatItemMap(data, opts) {
       if (data) {
-        const { viewVisibleInfoMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data.elements, opts);
-        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
-        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("invisibleCount", invisibleCount);
-        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("visibleCount", visibleCount);
+        const { virtualFlatItemMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data.elements, Object.assign(Object.assign({}, opts), {
+          tempContext: __classPrivateFieldGet$1(this, _Calculator_opts, "f").tempContext
+        }));
+        __classPrivateFieldGet$1(this, _Calculator_store, "f").set("virtualFlatItemMap", virtualFlatItemMap);
+        __classPrivateFieldGet$1(this, _Calculator_store, "f").set("invisibleCount", invisibleCount);
+        __classPrivateFieldGet$1(this, _Calculator_store, "f").set("visibleCount", visibleCount);
       }
     }
     updateVisiableStatus(opts) {
-      const { viewVisibleInfoMap, invisibleCount, visibleCount } = updateViewVisibleInfoMapStatus(__classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap"), opts);
-      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
-      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("invisibleCount", invisibleCount);
-      __classPrivateFieldGet$4(this, _Calculator_store, "f").set("visibleCount", visibleCount);
+      const { virtualFlatItemMap, invisibleCount, visibleCount } = updateVirtualFlatItemMapStatus(__classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap"), opts);
+      __classPrivateFieldGet$1(this, _Calculator_store, "f").set("virtualFlatItemMap", virtualFlatItemMap);
+      __classPrivateFieldGet$1(this, _Calculator_store, "f").set("invisibleCount", invisibleCount);
+      __classPrivateFieldGet$1(this, _Calculator_store, "f").set("visibleCount", visibleCount);
     }
     calcViewRectInfoFromOrigin(uuid, opts) {
-      const infoData = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap")[uuid];
+      const infoData = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap")[uuid];
       if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
         return null;
       }
@@ -3589,7 +3487,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (checkVisible === true && infoData.isVisibleInView === false) {
         return null;
       }
-      const calcOpts = { viewScaleInfo, viewSizeInfo };
+      const calcOpts = { viewScaleInfo };
       const viewRectInfo = {
         center: calcViewPointSize(center, calcOpts),
         left: calcViewPointSize(left, calcOpts),
@@ -3604,7 +3502,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return viewRectInfo;
     }
     calcViewRectInfoFromRange(uuid, opts) {
-      const infoData = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap")[uuid];
+      const infoData = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap")[uuid];
       if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
         return null;
       }
@@ -3613,7 +3511,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (checkVisible === true && infoData.isVisibleInView === false) {
         return null;
       }
-      const calcOpts = { viewScaleInfo, viewSizeInfo };
+      const calcOpts = { viewScaleInfo };
       const viewRectInfo = {
         center: calcViewPointSize(center, calcOpts),
         left: calcViewPointSize(left, calcOpts),
@@ -3627,11 +3525,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       return viewRectInfo;
     }
-    modifyViewVisibleInfoMap(data, opts) {
+    modifyVirtualFlatItemMap(data, opts) {
       const { modifyOptions, viewScaleInfo, viewSizeInfo } = opts;
       const { type, content } = modifyOptions;
       const list = data.elements;
-      const viewVisibleInfoMap = __classPrivateFieldGet$4(this, _Calculator_store, "f").get("viewVisibleInfoMap");
+      const virtualFlatItemMap = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap");
       if (type === "deleteElement") {
         const { element } = content;
         const uuids = [];
@@ -3645,68 +3543,171 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         };
         _walk(element);
         uuids.forEach((uuid) => {
-          delete viewVisibleInfoMap[uuid];
+          delete virtualFlatItemMap[uuid];
         });
-        __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
+        __classPrivateFieldGet$1(this, _Calculator_store, "f").set("virtualFlatItemMap", virtualFlatItemMap);
       } else if (type === "addElement" || type === "updateElement") {
         const { position } = content;
         const element = findElementFromListByPosition(position, data.elements);
         const groupQueue = getGroupQueueByElementPosition(list, position);
         if (element) {
           if (type === "updateElement" && element.type === "group") {
-            this.resetViewVisibleInfoMap(data, { viewScaleInfo, viewSizeInfo });
+            this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
           } else {
             const originRectInfo = calcElementOriginRectInfo(element, {
               groupQueue: groupQueue || []
             });
-            const newViewVisibleInfo = {
-              originRectInfo,
-              rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo,
-              isVisibleInView: true,
-              isGroup: (element === null || element === void 0 ? void 0 : element.type) === "group",
-              position: [...position]
-            };
-            viewVisibleInfoMap[element.uuid] = newViewVisibleInfo;
-            __classPrivateFieldGet$4(this, _Calculator_store, "f").set("viewVisibleInfoMap", viewVisibleInfoMap);
+            const newVirtualFlatItem = Object.assign({ type: element.type, originRectInfo, rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo, isVisibleInView: true, position: [...position] }, calcVirtualFlatDetail(element, {
+              tempContext: __classPrivateFieldGet$1(this, _Calculator_opts, "f").tempContext
+            }));
+            virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
+            __classPrivateFieldGet$1(this, _Calculator_store, "f").set("virtualFlatItemMap", virtualFlatItemMap);
             if (type === "updateElement") {
               this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
             }
           }
         }
       } else if (type === "moveElement") {
-        this.resetViewVisibleInfoMap(data, { viewScaleInfo, viewSizeInfo });
+        this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
       }
     }
+    getVirtualFlatItem(uuid) {
+      const itemMap = __classPrivateFieldGet$1(this, _Calculator_store, "f").get("virtualFlatItemMap");
+      return itemMap[uuid] || null;
+    }
   }
   _Calculator_opts = /* @__PURE__ */ new WeakMap(), _Calculator_store = /* @__PURE__ */ new WeakMap();
-  var __classPrivateFieldSet$3 = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
   };
-  var __classPrivateFieldGet$3 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet = function(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
-  var _BoardWatcher_instances, _BoardWatcher_opts, _BoardWatcher_store, _BoardWatcher_hasDestroyed, _BoardWatcher_init, _BoardWatcher_onWheel, _BoardWatcher_onContextMenu, _BoardWatcher_onClick, _BoardWatcher_onPointLeave, _BoardWatcher_onPointEnd, _BoardWatcher_onPointMove, _BoardWatcher_onPointStart, _BoardWatcher_onHover, _BoardWatcher_isInTarget, _BoardWatcher_getPoint, _BoardWatcher_isVaildPoint;
+  var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_calculator, _Renderer_hasDestroyed, _Renderer_init;
+  class Renderer extends EventEmitter {
+    constructor(opts) {
+      super();
+      _Renderer_instances.add(this);
+      _Renderer_opts.set(this, void 0);
+      _Renderer_loader.set(this, new Loader());
+      _Renderer_calculator.set(this, void 0);
+      _Renderer_hasDestroyed.set(this, false);
+      __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+      __classPrivateFieldSet(this, _Renderer_calculator, new Calculator({
+        tempContext: opts.tempContext
+      }), "f");
+      __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
+    }
+    isDestroyed() {
+      return __classPrivateFieldGet(this, _Renderer_hasDestroyed, "f");
+    }
+    destroy() {
+      this.clear();
+      __classPrivateFieldSet(this, _Renderer_opts, null, "f");
+      __classPrivateFieldGet(this, _Renderer_loader, "f").destroy();
+      __classPrivateFieldSet(this, _Renderer_loader, null, "f");
+      __classPrivateFieldSet(this, _Renderer_hasDestroyed, true, "f");
+    }
+    updateOptions(opts) {
+      __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+    }
+    drawData(data, opts) {
+      const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
+      const calculator = __classPrivateFieldGet(this, _Renderer_calculator, "f");
+      const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+      const viewContext = __classPrivateFieldGet(this, _Renderer_opts, "f").viewContext;
+      viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
+      const parentElementSize = {
+        x: 0,
+        y: 0,
+        w: opts.viewSizeInfo.width,
+        h: opts.viewSizeInfo.height
+      };
+      const drawOpts = Object.assign({
+        loader,
+        calculator,
+        parentElementSize,
+        elementAssets: data.assets,
+        parentOpacity: 1,
+        overrideElementMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideElemenentMap()
+      }, opts);
+      drawGlobalBackground(viewContext, data.global, drawOpts);
+      if (data.layout) {
+        drawLayout(viewContext, data.layout, drawOpts, () => {
+          drawElementList(viewContext, data, drawOpts);
+        });
+      } else {
+        drawElementList(viewContext, data, drawOpts);
+      }
+    }
+    scale(num) {
+      const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+      if (!sharer) {
+        return;
+      }
+      const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
+      if (data) {
+        this.drawData(data, {
+          viewScaleInfo: {
+            scale: num,
+            offsetTop,
+            offsetBottom,
+            offsetLeft,
+            offsetRight
+          },
+          viewSizeInfo: {
+            width,
+            height,
+            contextHeight,
+            contextWidth,
+            devicePixelRatio
+          }
+        });
+      }
+    }
+    setLoadItemMap(itemMap) {
+      __classPrivateFieldGet(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+      return __classPrivateFieldGet(this, _Renderer_loader, "f").getLoadItemMap();
+    }
+    getLoader() {
+      return __classPrivateFieldGet(this, _Renderer_loader, "f");
+    }
+    getCalculator() {
+      return __classPrivateFieldGet(this, _Renderer_calculator, "f");
+    }
+  }
+  _Renderer_opts = /* @__PURE__ */ new WeakMap(), _Renderer_loader = /* @__PURE__ */ new WeakMap(), _Renderer_calculator = /* @__PURE__ */ new WeakMap(), _Renderer_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Renderer_instances = /* @__PURE__ */ new WeakSet(), _Renderer_init = function _Renderer_init2() {
+    const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
+    loader.on("load", (e) => {
+      this.trigger("load", e);
+    });
+    loader.on("error", (e) => {
+      console.error(e);
+    });
+  };
   function isBoardAvailableNum(num) {
     return num > 0 || num < 0 || num === 0;
   }
   class BoardWatcher extends EventEmitter {
     constructor(opts) {
       super();
-      _BoardWatcher_instances.add(this);
-      _BoardWatcher_opts.set(this, void 0);
-      _BoardWatcher_store.set(this, void 0);
-      _BoardWatcher_hasDestroyed.set(this, false);
-      _BoardWatcher_onWheel.set(this, (e) => {
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+      __privateAdd(this, _BoardWatcher_instances);
+      __privateAdd(this, _opts);
+      __privateAdd(this, _store);
+      __privateAdd(this, _hasDestroyed, false);
+      __privateAdd(this, _onWheel, (e) => {
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
           return;
         }
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
+        if (!__privateMethod(this, _BoardWatcher_instances, isVaildPoint_fn).call(this, point)) {
           return;
         }
         e.preventDefault();
@@ -3719,144 +3720,162 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           this.trigger("wheel", { deltaX, deltaY, point });
         }
       });
-      _BoardWatcher_onContextMenu.set(this, (e) => {
+      __privateAdd(this, _onContextMenu, (e) => {
         if (e.button !== 2) {
           return;
         }
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
+        if (!__privateMethod(this, _BoardWatcher_instances, isVaildPoint_fn).call(this, point)) {
           return;
         }
         this.trigger("contextMenu", { point });
       });
-      _BoardWatcher_onClick.set(this, (e) => {
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+      __privateAdd(this, _onClick, (e) => {
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
+        if (!__privateMethod(this, _BoardWatcher_instances, isVaildPoint_fn).call(this, point)) {
           return;
         }
         const maxLimitTime = 500;
         const t = Date.now();
-        const preClickPoint = __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").get("prevClickPoint");
+        const preClickPoint = __privateGet(this, _store).get("prevClickPoint");
         if (preClickPoint && t - preClickPoint.t <= maxLimitTime && Math.abs(preClickPoint.x - point.x) <= 5 && Math.abs(preClickPoint.y - point.y) <= 5) {
           this.trigger("doubleClick", { point });
         } else {
-          __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("prevClickPoint", point);
+          __privateGet(this, _store).set("prevClickPoint", point);
         }
       });
-      _BoardWatcher_onPointLeave.set(this, (e) => {
-        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", false);
+      __privateAdd(this, _onPointLeave, (e) => {
+        __privateGet(this, _store).set("hasPointDown", false);
         e.preventDefault();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
         this.trigger("pointLeave", { point });
       });
-      _BoardWatcher_onPointEnd.set(this, (e) => {
-        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", false);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+      __privateAdd(this, _onPointEnd, (e) => {
+        __privateGet(this, _store).set("hasPointDown", false);
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
         this.trigger("pointEnd", { point });
       });
-      _BoardWatcher_onPointMove.set(this, (e) => {
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+      __privateAdd(this, _onPointMove, (e) => {
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
           return;
         }
         e.preventDefault();
         e.stopPropagation();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
-          if (__classPrivateFieldGet$3(this, _BoardWatcher_store, "f").get("hasPointDown")) {
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
+        if (!__privateMethod(this, _BoardWatcher_instances, isVaildPoint_fn).call(this, point)) {
+          if (__privateGet(this, _store).get("hasPointDown")) {
             this.trigger("pointLeave", { point });
-            __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", false);
+            __privateGet(this, _store).set("hasPointDown", false);
           }
           return;
         }
-        if (__classPrivateFieldGet$3(this, _BoardWatcher_store, "f").get("hasPointDown") !== true) {
+        if (__privateGet(this, _store).get("hasPointDown") !== true) {
           return;
         }
         this.trigger("pointMove", { point });
       });
-      _BoardWatcher_onPointStart.set(this, (e) => {
+      __privateAdd(this, _onPointStart, (e) => {
         if (e.button !== 0) {
           return;
         }
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
+        if (!__privateMethod(this, _BoardWatcher_instances, isVaildPoint_fn).call(this, point)) {
           return;
         }
-        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", true);
+        __privateGet(this, _store).set("hasPointDown", true);
         this.trigger("pointStart", { point });
       });
-      _BoardWatcher_onHover.set(this, (e) => {
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
-          if (__classPrivateFieldGet$3(this, _BoardWatcher_store, "f").get("inCanvas") === true) {
-            __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("inCanvas", false);
-            __classPrivateFieldGet$3(this, _BoardWatcher_onPointLeave, "f").call(this, e);
+      __privateAdd(this, _onHover, (e) => {
+        if (!__privateMethod(this, _BoardWatcher_instances, isInTarget_fn).call(this, e)) {
+          if (__privateGet(this, _store).get("inCanvas") === true) {
+            __privateGet(this, _store).set("inCanvas", false);
+            __privateGet(this, _onPointLeave).call(this, e);
           }
           return;
         }
-        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("inCanvas", true);
+        __privateGet(this, _store).set("inCanvas", true);
         e.preventDefault();
-        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+        const point = __privateMethod(this, _BoardWatcher_instances, getPoint_fn).call(this, e);
+        if (!__privateMethod(this, _BoardWatcher_instances, isVaildPoint_fn).call(this, point)) {
           return;
         }
         this.trigger("hover", { point });
       });
-      const store = new Store({ defaultStorage: { hasPointDown: false, prevClickPoint: null, inCanvas: true } });
-      __classPrivateFieldSet$3(this, _BoardWatcher_store, store, "f");
-      __classPrivateFieldSet$3(this, _BoardWatcher_opts, opts, "f");
-      __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_init).call(this);
+      const store = new Store({
+        defaultStorage: { hasPointDown: false, prevClickPoint: null, inCanvas: true }
+      });
+      __privateSet(this, _store, store);
+      __privateSet(this, _opts, opts);
+      __privateMethod(this, _BoardWatcher_instances, init_fn).call(this);
     }
     onEvents() {
-      if (__classPrivateFieldGet$3(this, _BoardWatcher_hasDestroyed, "f")) {
+      if (__privateGet(this, _hasDestroyed)) {
         return;
       }
+      const canvas = __privateGet(this, _opts).boardContent.boardContext.canvas;
       const container = window;
-      container.addEventListener("mousemove", __classPrivateFieldGet$3(this, _BoardWatcher_onHover, "f"));
-      container.addEventListener("mousedown", __classPrivateFieldGet$3(this, _BoardWatcher_onPointStart, "f"));
-      container.addEventListener("mousemove", __classPrivateFieldGet$3(this, _BoardWatcher_onPointMove, "f"));
-      container.addEventListener("mouseup", __classPrivateFieldGet$3(this, _BoardWatcher_onPointEnd, "f"));
-      container.addEventListener("wheel", __classPrivateFieldGet$3(this, _BoardWatcher_onWheel, "f"), { passive: false });
-      container.addEventListener("click", __classPrivateFieldGet$3(this, _BoardWatcher_onClick, "f"));
-      container.addEventListener("contextmenu", __classPrivateFieldGet$3(this, _BoardWatcher_onContextMenu, "f"));
+      container.addEventListener("mousemove", __privateGet(this, _onHover));
+      container.addEventListener("mousedown", __privateGet(this, _onPointStart));
+      container.addEventListener("mousemove", __privateGet(this, _onPointMove));
+      container.addEventListener("mouseup", __privateGet(this, _onPointEnd));
+      canvas.addEventListener("wheel", __privateGet(this, _onWheel), { passive: false });
+      container.addEventListener("click", __privateGet(this, _onClick));
+      container.addEventListener("contextmenu", __privateGet(this, _onContextMenu));
     }
     offEvents() {
       const container = window;
-      container.removeEventListener("mousemove", __classPrivateFieldGet$3(this, _BoardWatcher_onHover, "f"));
-      container.removeEventListener("mousedown", __classPrivateFieldGet$3(this, _BoardWatcher_onPointStart, "f"));
-      container.removeEventListener("mousemove", __classPrivateFieldGet$3(this, _BoardWatcher_onPointMove, "f"));
-      container.removeEventListener("mouseup", __classPrivateFieldGet$3(this, _BoardWatcher_onPointEnd, "f"));
-      container.removeEventListener("mouseleave", __classPrivateFieldGet$3(this, _BoardWatcher_onPointLeave, "f"));
-      container.removeEventListener("wheel", __classPrivateFieldGet$3(this, _BoardWatcher_onWheel, "f"));
-      container.removeEventListener("click", __classPrivateFieldGet$3(this, _BoardWatcher_onClick, "f"));
-      container.removeEventListener("contextmenu", __classPrivateFieldGet$3(this, _BoardWatcher_onContextMenu, "f"));
+      const canvas = __privateGet(this, _opts).boardContent.boardContext.canvas;
+      container.removeEventListener("mousemove", __privateGet(this, _onHover));
+      container.removeEventListener("mousedown", __privateGet(this, _onPointStart));
+      container.removeEventListener("mousemove", __privateGet(this, _onPointMove));
+      container.removeEventListener("mouseup", __privateGet(this, _onPointEnd));
+      container.removeEventListener("mouseleave", __privateGet(this, _onPointLeave));
+      canvas.removeEventListener("wheel", __privateGet(this, _onWheel));
+      container.removeEventListener("click", __privateGet(this, _onClick));
+      container.removeEventListener("contextmenu", __privateGet(this, _onContextMenu));
     }
     destroy() {
       this.offEvents();
-      __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").destroy();
-      __classPrivateFieldSet$3(this, _BoardWatcher_hasDestroyed, true, "f");
+      __privateGet(this, _store).destroy();
+      __privateSet(this, _hasDestroyed, true);
     }
   }
-  _BoardWatcher_opts = /* @__PURE__ */ new WeakMap(), _BoardWatcher_store = /* @__PURE__ */ new WeakMap(), _BoardWatcher_hasDestroyed = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onWheel = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onContextMenu = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onClick = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointLeave = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointEnd = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointMove = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointStart = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onHover = /* @__PURE__ */ new WeakMap(), _BoardWatcher_instances = /* @__PURE__ */ new WeakSet(), _BoardWatcher_init = function _BoardWatcher_init2() {
+  _opts = new WeakMap();
+  _store = new WeakMap();
+  _hasDestroyed = new WeakMap();
+  _BoardWatcher_instances = new WeakSet();
+  init_fn = function() {
     this.onEvents();
-  }, _BoardWatcher_isInTarget = function _BoardWatcher_isInTarget2(e) {
-    return e.target === __classPrivateFieldGet$3(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
-  }, _BoardWatcher_getPoint = function _BoardWatcher_getPoint2(e) {
-    const boardCanvas = __classPrivateFieldGet$3(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
+  };
+  _onWheel = new WeakMap();
+  _onContextMenu = new WeakMap();
+  _onClick = new WeakMap();
+  _onPointLeave = new WeakMap();
+  _onPointEnd = new WeakMap();
+  _onPointMove = new WeakMap();
+  _onPointStart = new WeakMap();
+  _onHover = new WeakMap();
+  isInTarget_fn = function(e) {
+    return e.target === __privateGet(this, _opts).boardContent.boardContext.canvas;
+  };
+  getPoint_fn = function(e) {
+    const boardCanvas = __privateGet(this, _opts).boardContent.boardContext.canvas;
     const rect = boardCanvas.getBoundingClientRect();
     const p = {
       x: e.clientX - rect.left,
@@ -3864,26 +3883,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       t: Date.now()
     };
     return p;
-  }, _BoardWatcher_isVaildPoint = function _BoardWatcher_isVaildPoint2(p) {
-    const viewSize = __classPrivateFieldGet$3(this, _BoardWatcher_opts, "f").sharer.getActiveViewSizeInfo();
+  };
+  isVaildPoint_fn = function(p) {
+    const viewSize = __privateGet(this, _opts).sharer.getActiveViewSizeInfo();
     const { width, height } = viewSize;
     if (isBoardAvailableNum(p.x) && isBoardAvailableNum(p.y) && p.x <= width && p.y <= height) {
       return true;
     }
     return false;
   };
-  var __classPrivateFieldSet$2 = function(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-  };
-  var __classPrivateFieldGet$2 = function(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-  };
-  var _Sharer_activeStore, _Sharer_sharedStore;
   const defaultActiveStorage = {
     width: 0,
     height: 0,
@@ -3900,119 +3908,109 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   };
   class Sharer {
     constructor() {
-      _Sharer_activeStore.set(this, void 0);
-      _Sharer_sharedStore.set(this, void 0);
+      __privateAdd(this, _activeStore);
+      __privateAdd(this, _sharedStore);
       const activeStore = new Store({
         defaultStorage: defaultActiveStorage
       });
       const sharedStore = new Store({
         defaultStorage: {}
       });
-      __classPrivateFieldSet$2(this, _Sharer_activeStore, activeStore, "f");
-      __classPrivateFieldSet$2(this, _Sharer_sharedStore, sharedStore, "f");
+      __privateSet(this, _activeStore, activeStore);
+      __privateSet(this, _sharedStore, sharedStore);
     }
     getActiveStorage(key2) {
-      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get(key2);
+      return __privateGet(this, _activeStore).get(key2);
     }
     setActiveStorage(key2, storage) {
-      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set(key2, storage);
+      return __privateGet(this, _activeStore).set(key2, storage);
     }
     getActiveStoreSnapshot(opts) {
-      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").getSnapshot(opts);
+      return __privateGet(this, _activeStore).getSnapshot(opts);
     }
     getSharedStorage(key2) {
-      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").get(key2);
+      return __privateGet(this, _sharedStore).get(key2);
     }
     setSharedStorage(key2, storage) {
-      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").set(key2, storage);
+      return __privateGet(this, _sharedStore).set(key2, storage);
     }
     getSharedStoreSnapshot(opts) {
-      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").getSnapshot(opts);
+      return __privateGet(this, _sharedStore).getSnapshot(opts);
     }
+    // get/set active info
     getActiveViewScaleInfo() {
       const viewScaleInfo = {
-        scale: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("scale"),
-        offsetTop: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("offsetTop"),
-        offsetBottom: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("offsetBottom"),
-        offsetLeft: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("offsetLeft"),
-        offsetRight: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("offsetRight")
+        scale: __privateGet(this, _activeStore).get("scale"),
+        offsetTop: __privateGet(this, _activeStore).get("offsetTop"),
+        offsetBottom: __privateGet(this, _activeStore).get("offsetBottom"),
+        offsetLeft: __privateGet(this, _activeStore).get("offsetLeft"),
+        offsetRight: __privateGet(this, _activeStore).get("offsetRight")
       };
       return viewScaleInfo;
     }
     setActiveViewScaleInfo(viewScaleInfo) {
       const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("scale", scale);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("offsetTop", offsetTop);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("offsetBottom", offsetBottom);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("offsetLeft", offsetLeft);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("offsetRight", offsetRight);
+      __privateGet(this, _activeStore).set("scale", scale);
+      __privateGet(this, _activeStore).set("offsetTop", offsetTop);
+      __privateGet(this, _activeStore).set("offsetBottom", offsetBottom);
+      __privateGet(this, _activeStore).set("offsetLeft", offsetLeft);
+      __privateGet(this, _activeStore).set("offsetRight", offsetRight);
     }
     setActiveViewSizeInfo(size) {
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("width", size.width);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("height", size.height);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("devicePixelRatio", size.devicePixelRatio);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("contextWidth", size.contextWidth);
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("contextHeight", size.contextHeight);
+      __privateGet(this, _activeStore).set("width", size.width);
+      __privateGet(this, _activeStore).set("height", size.height);
+      __privateGet(this, _activeStore).set("devicePixelRatio", size.devicePixelRatio);
+      __privateGet(this, _activeStore).set("contextWidth", size.contextWidth);
+      __privateGet(this, _activeStore).set("contextHeight", size.contextHeight);
     }
     getActiveViewSizeInfo() {
       const sizeInfo = {
-        width: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("width"),
-        height: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("height"),
-        devicePixelRatio: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("devicePixelRatio"),
-        contextWidth: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("contextWidth"),
-        contextHeight: __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("contextHeight")
+        width: __privateGet(this, _activeStore).get("width"),
+        height: __privateGet(this, _activeStore).get("height"),
+        devicePixelRatio: __privateGet(this, _activeStore).get("devicePixelRatio"),
+        contextWidth: __privateGet(this, _activeStore).get("contextWidth"),
+        contextHeight: __privateGet(this, _activeStore).get("contextHeight")
       };
       return sizeInfo;
     }
     getActiveOverrideElemenentMap() {
-      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("overrideElementMap");
+      return __privateGet(this, _activeStore).get("overrideElementMap");
     }
     setActiveOverrideElemenentMap(map) {
-      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("overrideElementMap", map);
+      __privateGet(this, _activeStore).set("overrideElementMap", map);
     }
   }
-  _Sharer_activeStore = /* @__PURE__ */ new WeakMap(), _Sharer_sharedStore = /* @__PURE__ */ new WeakMap();
-  var __classPrivateFieldSet$1 = function(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-  };
-  var __classPrivateFieldGet$1 = function(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-  };
-  var _Viewer_instances, _Viewer_opts, _Viewer_drawFrameSnapshotQueue, _Viewer_drawFrameStatus, _Viewer_init, _Viewer_drawAnimationFrame;
+  _activeStore = new WeakMap();
+  _sharedStore = new WeakMap();
   const { requestAnimationFrame } = window;
   class Viewer extends EventEmitter {
     constructor(opts) {
       super();
-      _Viewer_instances.add(this);
-      _Viewer_opts.set(this, void 0);
-      _Viewer_drawFrameSnapshotQueue.set(this, []);
-      _Viewer_drawFrameStatus.set(this, "FREE");
-      __classPrivateFieldSet$1(this, _Viewer_opts, opts, "f");
-      __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_init).call(this);
-    }
-    resetViewVisibleInfoMap(data, opts) {
+      __privateAdd(this, _Viewer_instances);
+      __privateAdd(this, _opts2);
+      __privateAdd(this, _drawFrameSnapshotQueue, []);
+      __privateAdd(this, _drawFrameStatus, "FREE");
+      __privateSet(this, _opts2, opts);
+      __privateMethod(this, _Viewer_instances, init_fn2).call(this);
+    }
+    resetVirtualFlatItemMap(data, opts) {
       if (data) {
-        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.resetViewVisibleInfoMap(data, opts);
+        __privateGet(this, _opts2).calculator.resetVirtualFlatItemMap(data, opts);
       }
     }
     drawFrame() {
-      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+      const { sharer } = __privateGet(this, _opts2);
       const activeStore = sharer.getActiveStoreSnapshot();
       const sharedStore = sharer.getSharedStoreSnapshot();
-      __classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").push({
+      __privateGet(this, _drawFrameSnapshotQueue).push({
         activeStore,
         sharedStore
       });
-      __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame).call(this);
+      __privateMethod(this, _Viewer_instances, drawAnimationFrame_fn).call(this);
     }
     scale(opts) {
       const { scale, point, ignoreUpdateVisibleStatus } = opts;
-      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+      const { sharer } = __privateGet(this, _opts2);
       const { moveX, moveY } = viewScale({
         scale,
         point,
@@ -4021,7 +4019,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       });
       sharer.setActiveStorage("scale", scale);
       if (!ignoreUpdateVisibleStatus) {
-        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+        __privateGet(this, _opts2).calculator.updateVisiableStatus({
           viewScaleInfo: sharer.getActiveViewScaleInfo(),
           viewSizeInfo: sharer.getActiveViewSizeInfo()
         });
@@ -4029,7 +4027,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return { moveX, moveY };
     }
     scroll(opts) {
-      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+      const { sharer } = __privateGet(this, _opts2);
       const prevViewScaleInfo = sharer.getActiveViewScaleInfo();
       const { moveX, moveY, ignoreUpdateVisibleStatus } = opts;
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
@@ -4041,7 +4039,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       });
       sharer.setActiveViewScaleInfo(viewScaleInfo);
       if (!ignoreUpdateVisibleStatus) {
-        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+        __privateGet(this, _opts2).calculator.updateVisiableStatus({
           viewScaleInfo: sharer.getActiveViewScaleInfo(),
           viewSizeInfo: sharer.getActiveViewSizeInfo()
         });
@@ -4049,23 +4047,23 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return viewScaleInfo;
     }
     updateViewScaleInfo(opts) {
-      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+      const { sharer } = __privateGet(this, _opts2);
       const viewScaleInfo = calcViewScaleInfo(opts, {
         viewSizeInfo: sharer.getActiveViewSizeInfo()
       });
       sharer.setActiveViewScaleInfo(viewScaleInfo);
-      __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+      __privateGet(this, _opts2).calculator.updateVisiableStatus({
         viewScaleInfo: sharer.getActiveViewScaleInfo(),
         viewSizeInfo: sharer.getActiveViewSizeInfo()
       });
       return viewScaleInfo;
     }
     resize(viewSize = {}, opts) {
-      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+      const { sharer } = __privateGet(this, _opts2);
       const originViewSize = sharer.getActiveViewSizeInfo();
-      const newViewSize = Object.assign(Object.assign({}, originViewSize), viewSize);
+      const newViewSize = { ...originViewSize, ...viewSize };
       const { width, height, devicePixelRatio } = newViewSize;
-      const { underlayContext, boardContext, overlayContext, viewContext } = __classPrivateFieldGet$1(this, _Viewer_opts, "f").boardContent;
+      const { underlayContext, boardContext, overlayContext, viewContext } = __privateGet(this, _opts2).boardContent;
       boardContext.canvas.width = width * devicePixelRatio;
       boardContext.canvas.height = height * devicePixelRatio;
       boardContext.canvas.style.width = `${width}px`;
@@ -4077,8 +4075,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       viewContext.canvas.width = width * devicePixelRatio;
       viewContext.canvas.height = height * devicePixelRatio;
       sharer.setActiveViewSizeInfo(newViewSize);
-      if (!(opts === null || opts === void 0 ? void 0 : opts.ignoreUpdateVisibleStatus)) {
-        __classPrivateFieldGet$1(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+      if (!(opts == null ? void 0 : opts.ignoreUpdateVisibleStatus)) {
+        __privateGet(this, _opts2).calculator.updateVisiableStatus({
           viewScaleInfo: sharer.getActiveViewScaleInfo(),
           viewSizeInfo: sharer.getActiveViewSizeInfo()
         });
@@ -4086,21 +4084,37 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return newViewSize;
     }
   }
-  _Viewer_opts = /* @__PURE__ */ new WeakMap(), _Viewer_drawFrameSnapshotQueue = /* @__PURE__ */ new WeakMap(), _Viewer_drawFrameStatus = /* @__PURE__ */ new WeakMap(), _Viewer_instances = /* @__PURE__ */ new WeakSet(), _Viewer_init = function _Viewer_init2() {
-    const { renderer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+  _opts2 = new WeakMap();
+  _drawFrameSnapshotQueue = new WeakMap();
+  _drawFrameStatus = new WeakMap();
+  _Viewer_instances = new WeakSet();
+  init_fn2 = function() {
+    const { renderer } = __privateGet(this, _opts2);
     renderer.on("load", () => {
       this.drawFrame();
     });
-  }, _Viewer_drawAnimationFrame = function _Viewer_drawAnimationFrame2() {
-    if (__classPrivateFieldGet$1(this, _Viewer_drawFrameStatus, "f") === "DRAWING" || __classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").length === 0) {
+  };
+  drawAnimationFrame_fn = function() {
+    if (__privateGet(this, _drawFrameStatus) === "DRAWING" || __privateGet(this, _drawFrameSnapshotQueue).length === 0) {
       return;
     } else {
-      __classPrivateFieldSet$1(this, _Viewer_drawFrameStatus, "DRAWING", "f");
+      __privateSet(this, _drawFrameStatus, "DRAWING");
     }
-    const snapshot = __classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").shift();
-    const { renderer, boardContent, beforeDrawFrame, afterDrawFrame } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+    const snapshot = __privateGet(this, _drawFrameSnapshotQueue).shift();
+    const { renderer, boardContent, beforeDrawFrame, afterDrawFrame } = __privateGet(this, _opts2);
     if (snapshot) {
-      const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
+      const {
+        scale,
+        offsetTop,
+        offsetBottom,
+        offsetLeft,
+        offsetRight,
+        width,
+        height,
+        contextHeight,
+        contextWidth,
+        devicePixelRatio
+      } = snapshot.activeStore;
       const viewScaleInfo = {
         scale,
         offsetTop,
@@ -4115,7 +4129,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         contextWidth,
         devicePixelRatio
       };
-      if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
+      if (snapshot == null ? void 0 : snapshot.activeStore.data) {
         renderer.drawData(snapshot.activeStore.data, {
           viewScaleInfo,
           viewSizeInfo
@@ -4125,97 +4139,85 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       boardContent.drawView();
       afterDrawFrame({ snapshot });
     }
-    if (__classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").length === 0) {
-      __classPrivateFieldSet$1(this, _Viewer_drawFrameStatus, "COMPLETE", "f");
+    if (__privateGet(this, _drawFrameSnapshotQueue).length === 0) {
+      __privateSet(this, _drawFrameStatus, "COMPLETE");
       return;
     }
-    if (__classPrivateFieldSet$1(this, _Viewer_drawFrameStatus, "DRAWING", "f")) {
+    if (__privateSet(this, _drawFrameStatus, "DRAWING")) {
       requestAnimationFrame(() => {
-        __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame2).call(this);
+        __privateMethod(this, _Viewer_instances, drawAnimationFrame_fn).call(this);
       });
     }
   };
-  var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-  };
-  var __classPrivateFieldGet = function(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-  };
-  var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handlePointLeave, _Board_handleHover, _Board_handleDoubleClick, _Board_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
   class Board {
     constructor(opts) {
-      _Board_instances.add(this);
-      _Board_opts.set(this, void 0);
-      _Board_middlewareMap.set(this, /* @__PURE__ */ new WeakMap());
-      _Board_middlewares.set(this, []);
-      _Board_activeMiddlewareObjs.set(this, []);
-      _Board_watcher.set(this, void 0);
-      _Board_renderer.set(this, void 0);
-      _Board_sharer.set(this, void 0);
-      _Board_viewer.set(this, void 0);
-      _Board_calculator.set(this, void 0);
-      _Board_eventHub.set(this, new EventEmitter());
-      _Board_hasDestroyed.set(this, false);
+      __privateAdd(this, _Board_instances);
+      __privateAdd(this, _opts3);
+      __privateAdd(this, _middlewareMap, /* @__PURE__ */ new WeakMap());
+      __privateAdd(this, _middlewares, []);
+      __privateAdd(this, _activeMiddlewareObjs, []);
+      __privateAdd(this, _watcher);
+      __privateAdd(this, _renderer);
+      __privateAdd(this, _sharer);
+      __privateAdd(this, _viewer);
+      __privateAdd(this, _calculator);
+      __privateAdd(this, _eventHub, new EventEmitter());
+      __privateAdd(this, _hasDestroyed2, false);
       const { boardContent } = opts;
       const sharer = new Sharer();
-      const calculator = new Calculator({ viewContext: boardContent.viewContext });
       const watcher = new BoardWatcher({
         boardContent,
         sharer
       });
       const renderer = new Renderer({
         viewContext: boardContent.viewContext,
-        sharer,
-        calculator
+        tempContext: boardContent.tempContext,
+        sharer
       });
-      __classPrivateFieldSet(this, _Board_opts, opts, "f");
-      __classPrivateFieldSet(this, _Board_sharer, sharer, "f");
-      __classPrivateFieldSet(this, _Board_watcher, watcher, "f");
-      __classPrivateFieldSet(this, _Board_renderer, renderer, "f");
-      __classPrivateFieldSet(this, _Board_calculator, calculator, "f");
-      __classPrivateFieldSet(this, _Board_viewer, new Viewer({
+      const calculator = renderer.getCalculator();
+      __privateSet(this, _opts3, opts);
+      __privateSet(this, _sharer, sharer);
+      __privateSet(this, _watcher, watcher);
+      __privateSet(this, _renderer, renderer);
+      __privateSet(this, _calculator, calculator);
+      __privateSet(this, _viewer, new Viewer({
         boardContent: opts.boardContent,
         sharer,
         renderer,
-        calculator: __classPrivateFieldGet(this, _Board_calculator, "f"),
+        calculator: __privateGet(this, _calculator),
         beforeDrawFrame: (e) => {
-          __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleBeforeDrawFrame).call(this, e);
+          __privateMethod(this, _Board_instances, handleBeforeDrawFrame_fn).call(this, e);
         },
         afterDrawFrame: (e) => {
-          __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleAfterDrawFrame).call(this, e);
+          __privateMethod(this, _Board_instances, handleAfterDrawFrame_fn).call(this, e);
         }
-      }), "f");
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_init).call(this);
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
+      }));
+      __privateMethod(this, _Board_instances, init_fn3).call(this);
+      __privateMethod(this, _Board_instances, resetActiveMiddlewareObjs_fn).call(this);
     }
     isDestroyed() {
-      return __classPrivateFieldGet(this, _Board_hasDestroyed, "f");
+      return __privateGet(this, _hasDestroyed2);
     }
     destroy() {
-      __classPrivateFieldGet(this, _Board_watcher, "f").destroy();
-      __classPrivateFieldGet(this, _Board_renderer, "f").destroy();
-      __classPrivateFieldGet(this, _Board_calculator, "f").destroy();
-      __classPrivateFieldGet(this, _Board_eventHub, "f").destroy();
-      __classPrivateFieldSet(this, _Board_hasDestroyed, true, "f");
+      __privateGet(this, _watcher).destroy();
+      __privateGet(this, _renderer).destroy();
+      __privateGet(this, _calculator).destroy();
+      __privateGet(this, _eventHub).destroy();
+      __privateSet(this, _hasDestroyed2, true);
     }
     getSharer() {
-      return __classPrivateFieldGet(this, _Board_sharer, "f");
+      return __privateGet(this, _sharer);
     }
     getViewer() {
-      return __classPrivateFieldGet(this, _Board_viewer, "f");
+      return __privateGet(this, _viewer);
     }
     getRenderer() {
-      return __classPrivateFieldGet(this, _Board_renderer, "f");
+      return __privateGet(this, _renderer);
     }
     setData(data, opts) {
       const { modifiedOptions } = opts || {};
-      const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
-      __classPrivateFieldGet(this, _Board_sharer, "f").setActiveStorage("data", data);
+      const sharer = __privateGet(this, _sharer);
+      __privateGet(this, _sharer).setActiveStorage("data", data);
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
       const viewScaleInfo = sharer.getActiveViewScaleInfo();
       const newViewContextSize = calcElementsContextSize(data.elements, {
@@ -4224,280 +4226,318 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         extend: true
       });
       if (modifiedOptions) {
-        __classPrivateFieldGet(this, _Board_viewer, "f").resetViewVisibleInfoMap(data, {
+        __privateGet(this, _viewer).resetVirtualFlatItemMap(data, {
           viewSizeInfo,
           viewScaleInfo
         });
       } else {
-        __classPrivateFieldGet(this, _Board_viewer, "f").resetViewVisibleInfoMap(data, {
+        __privateGet(this, _viewer).resetVirtualFlatItemMap(data, {
           viewSizeInfo,
           viewScaleInfo
         });
       }
-      __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
-      const newViewSizeInfo = Object.assign(Object.assign({}, viewSizeInfo), newViewContextSize);
-      __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSizeInfo);
+      __privateGet(this, _viewer).drawFrame();
+      const newViewSizeInfo = {
+        ...viewSizeInfo,
+        ...newViewContextSize
+      };
+      __privateGet(this, _sharer).setActiveViewSizeInfo(newViewSizeInfo);
       return { viewSizeInfo: newViewSizeInfo };
     }
     getData() {
-      const { data } = __classPrivateFieldGet(this, _Board_sharer, "f").getActiveStoreSnapshot();
+      const { data } = __privateGet(this, _sharer).getActiveStoreSnapshot();
       return data;
     }
     use(middleware, config) {
       var _a, _b, _c;
-      if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
-        const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+      if (__privateGet(this, _middlewareMap).has(middleware)) {
+        const item = __privateGet(this, _middlewareMap).get(middleware);
         if (item) {
-          (_b = (_a = item.middlewareObject).use) === null || _b === void 0 ? void 0 : _b.call(_a);
+          (_b = (_a = item.middlewareObject).use) == null ? void 0 : _b.call(_a);
           item.status = "enable";
-          __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, item);
-          __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
+          __privateGet(this, _middlewareMap).set(middleware, item);
+          __privateMethod(this, _Board_instances, resetActiveMiddlewareObjs_fn).call(this);
           return;
         }
       }
-      const { boardContent, container } = __classPrivateFieldGet(this, _Board_opts, "f");
-      const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
-      const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
-      const calculator = __classPrivateFieldGet(this, _Board_calculator, "f");
-      const eventHub = __classPrivateFieldGet(this, _Board_eventHub, "f");
-      const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub, container }, config);
-      (_c = obj.use) === null || _c === void 0 ? void 0 : _c.call(obj);
-      __classPrivateFieldGet(this, _Board_middlewares, "f").push(middleware);
-      __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").push(obj);
-      __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, {
+      const { boardContent, container } = __privateGet(this, _opts3);
+      const sharer = __privateGet(this, _sharer);
+      const viewer = __privateGet(this, _viewer);
+      const calculator = __privateGet(this, _calculator);
+      const eventHub = __privateGet(this, _eventHub);
+      const obj = middleware(
+        { boardContent, sharer, viewer, calculator, eventHub, container },
+        config
+      );
+      (_c = obj.use) == null ? void 0 : _c.call(obj);
+      __privateGet(this, _middlewares).push(middleware);
+      __privateGet(this, _activeMiddlewareObjs).push(obj);
+      __privateGet(this, _middlewareMap).set(middleware, {
         status: "enable",
         middlewareObject: obj,
         config
       });
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
+      __privateMethod(this, _Board_instances, resetActiveMiddlewareObjs_fn).call(this);
     }
     disuse(middleware) {
       var _a, _b;
-      const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+      const item = __privateGet(this, _middlewareMap).get(middleware);
       if (item) {
-        (_b = (_a = item.middlewareObject).disuse) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_b = (_a = item.middlewareObject).disuse) == null ? void 0 : _b.call(_a);
         item.status = "disable";
-        __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, item);
-        __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
+        __privateGet(this, _middlewareMap).set(middleware, item);
+        __privateMethod(this, _Board_instances, resetActiveMiddlewareObjs_fn).call(this);
       }
     }
     resetMiddlewareConfig(middleware, config) {
       var _a, _b;
-      if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
-        const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+      if (__privateGet(this, _middlewareMap).has(middleware)) {
+        const item = __privateGet(this, _middlewareMap).get(middleware);
         if (item) {
-          (_b = (_a = item.middlewareObject).resetConfig) === null || _b === void 0 ? void 0 : _b.call(_a, config);
+          (_b = (_a = item.middlewareObject).resetConfig) == null ? void 0 : _b.call(_a, config);
         }
       }
     }
     scale(opts) {
-      const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
+      const viewer = __privateGet(this, _viewer);
       const { ignoreUpdateVisibleStatus } = opts;
-      const { moveX, moveY } = viewer.scale(Object.assign(Object.assign({}, opts), {
-        ignoreUpdateVisibleStatus: true
-      }));
+      const { moveX, moveY } = viewer.scale({
+        ...opts,
+        ...{
+          ignoreUpdateVisibleStatus: true
+        }
+      });
       viewer.scroll({ moveX, moveY, ignoreUpdateVisibleStatus });
     }
     scroll(opts) {
-      const result = __classPrivateFieldGet(this, _Board_viewer, "f").scroll(opts);
+      const result = __privateGet(this, _viewer).scroll(opts);
       return result;
     }
     updateViewScaleInfo(opts) {
-      const result = __classPrivateFieldGet(this, _Board_viewer, "f").updateViewScaleInfo(opts);
+      const result = __privateGet(this, _viewer).updateViewScaleInfo(opts);
       return result;
     }
     resize(newViewSize, opts) {
-      const viewSize = __classPrivateFieldGet(this, _Board_viewer, "f").resize(newViewSize, opts);
+      const viewSize = __privateGet(this, _viewer).resize(newViewSize, opts);
       const { width, height, devicePixelRatio } = newViewSize;
-      const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
+      const { boardContent } = __privateGet(this, _opts3);
       boardContent.viewContext.$resize({ width, height, devicePixelRatio });
       boardContent.overlayContext.$resize({ width, height, devicePixelRatio });
       boardContent.boardContext.$resize({ width, height, devicePixelRatio });
       boardContent.underlayContext.$resize({ width, height, devicePixelRatio });
-      __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
-      __classPrivateFieldGet(this, _Board_watcher, "f").trigger("resize", viewSize);
-      __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSize);
+      __privateGet(this, _viewer).drawFrame();
+      __privateGet(this, _watcher).trigger("resize", viewSize);
+      __privateGet(this, _sharer).setActiveViewSizeInfo(newViewSize);
     }
     clear() {
-      const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
+      const { boardContent } = __privateGet(this, _opts3);
       const { underlayContext, overlayContext, viewContext, boardContext } = boardContent;
       underlayContext.clearRect(0, 0, underlayContext.canvas.width, underlayContext.canvas.height);
       overlayContext.clearRect(0, 0, overlayContext.canvas.width, overlayContext.canvas.height);
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       boardContext.clearRect(0, 0, boardContext.canvas.width, boardContext.canvas.height);
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleClear).call(this);
+      __privateMethod(this, _Board_instances, handleClear_fn).call(this);
     }
     getEventHub() {
-      return __classPrivateFieldGet(this, _Board_eventHub, "f");
+      return __privateGet(this, _eventHub);
     }
     onWatcherEvents() {
-      __classPrivateFieldGet(this, _Board_watcher, "f").onEvents();
+      __privateGet(this, _watcher).onEvents();
     }
     offWatcherEvents() {
-      __classPrivateFieldGet(this, _Board_watcher, "f").offEvents();
-    }
-  }
-  _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_renderer = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointStart", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointEnd", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointLeave", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointLeave).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("hover", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheel", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheelScale", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("scrollX", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollX).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("scrollY", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollY).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("resize", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleResize).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("doubleClick", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleDoubleClick).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("contextMenu", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleContextMenu).bind(this));
-    __classPrivateFieldGet(this, _Board_renderer, "f").on("load", () => {
-      __classPrivateFieldGet(this, _Board_eventHub, "f").trigger("loadResource");
+      __privateGet(this, _watcher).offEvents();
+    }
+  }
+  _opts3 = new WeakMap();
+  _middlewareMap = new WeakMap();
+  _middlewares = new WeakMap();
+  _activeMiddlewareObjs = new WeakMap();
+  _watcher = new WeakMap();
+  _renderer = new WeakMap();
+  _sharer = new WeakMap();
+  _viewer = new WeakMap();
+  _calculator = new WeakMap();
+  _eventHub = new WeakMap();
+  _hasDestroyed2 = new WeakMap();
+  _Board_instances = new WeakSet();
+  init_fn3 = function() {
+    __privateGet(this, _watcher).on("pointStart", __privateMethod(this, _Board_instances, handlePointStart_fn).bind(this));
+    __privateGet(this, _watcher).on("pointEnd", __privateMethod(this, _Board_instances, handlePointEnd_fn).bind(this));
+    __privateGet(this, _watcher).on("pointMove", __privateMethod(this, _Board_instances, handlePointMove_fn).bind(this));
+    __privateGet(this, _watcher).on("pointLeave", __privateMethod(this, _Board_instances, handlePointLeave_fn).bind(this));
+    __privateGet(this, _watcher).on("hover", __privateMethod(this, _Board_instances, handleHover_fn).bind(this));
+    __privateGet(this, _watcher).on("wheel", __privateMethod(this, _Board_instances, handleWheel_fn).bind(this));
+    __privateGet(this, _watcher).on("wheelScale", __privateMethod(this, _Board_instances, handleWheelScale_fn).bind(this));
+    __privateGet(this, _watcher).on("scrollX", __privateMethod(this, _Board_instances, handleScrollX_fn).bind(this));
+    __privateGet(this, _watcher).on("scrollY", __privateMethod(this, _Board_instances, handleScrollY_fn).bind(this));
+    __privateGet(this, _watcher).on("resize", __privateMethod(this, _Board_instances, handleResize_fn).bind(this));
+    __privateGet(this, _watcher).on("doubleClick", __privateMethod(this, _Board_instances, handleDoubleClick_fn).bind(this));
+    __privateGet(this, _watcher).on("contextMenu", __privateMethod(this, _Board_instances, handleContextMenu_fn).bind(this));
+    __privateGet(this, _renderer).on("load", () => {
+      __privateGet(this, _eventHub).trigger("loadResource");
     });
-  }, _Board_handlePointStart = function _Board_handlePointStart2(e) {
+  };
+  handlePointStart_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointStart) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.pointStart) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handlePointEnd = function _Board_handlePointEnd2(e) {
+  };
+  handlePointEnd_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointEnd) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.pointEnd) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handlePointMove = function _Board_handlePointMove2(e) {
+  };
+  handlePointMove_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointMove) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.pointMove) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handlePointLeave = function _Board_handlePointLeave2(e) {
+  };
+  handlePointLeave_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointLeave) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.pointLeave) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleHover = function _Board_handleHover2(e) {
+  };
+  handleHover_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.hover) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.hover) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleDoubleClick = function _Board_handleDoubleClick2(e) {
+  };
+  handleDoubleClick_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.doubleClick) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.doubleClick) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleContextMenu = function _Board_handleContextMenu2(e) {
+  };
+  handleContextMenu_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.contextMenu) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.contextMenu) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleWheel = function _Board_handleWheel2(e) {
+  };
+  handleWheel_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheel) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.wheel) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleWheelScale = function _Board_handleWheelScale2(e) {
+  };
+  handleWheelScale_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheelScale) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.wheelScale) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleScrollX = function _Board_handleScrollX2(e) {
+  };
+  handleScrollX_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.scrollX) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.scrollX) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleScrollY = function _Board_handleScrollY2(e) {
+  };
+  handleScrollY_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.scrollY) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.scrollY) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleResize = function _Board_handleResize2(e) {
+  };
+  handleResize_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.resize) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.resize) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleClear = function _Board_handleClear2(e) {
+  };
+  handleClear_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.clear) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.clear) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleBeforeDrawFrame = function _Board_handleBeforeDrawFrame2(e) {
+  };
+  // draw event
+  handleBeforeDrawFrame_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.beforeDrawFrame) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.beforeDrawFrame) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_handleAfterDrawFrame = function _Board_handleAfterDrawFrame2(e) {
+  };
+  handleAfterDrawFrame_fn = function(e) {
     var _a;
-    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
-      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
-      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.afterDrawFrame) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+    for (let i = 0; i < __privateGet(this, _activeMiddlewareObjs).length; i++) {
+      const obj = __privateGet(this, _activeMiddlewareObjs)[i];
+      const result = (_a = obj == null ? void 0 : obj.afterDrawFrame) == null ? void 0 : _a.call(obj, e);
       if (result === false) {
         return;
       }
     }
-  }, _Board_resetActiveMiddlewareObjs = function _Board_resetActiveMiddlewareObjs2() {
+  };
+  resetActiveMiddlewareObjs_fn = function() {
     const activeMiddlewareObjs = [];
-    const middlewareMap = __classPrivateFieldGet(this, _Board_middlewareMap, "f");
-    __classPrivateFieldGet(this, _Board_middlewares, "f").forEach((middleware) => {
+    const middlewareMap = __privateGet(this, _middlewareMap);
+    __privateGet(this, _middlewares).forEach((middleware) => {
       const item = middlewareMap.get(middleware);
-      if ((item === null || item === void 0 ? void 0 : item.status) === "enable" && (item === null || item === void 0 ? void 0 : item.middlewareObject)) {
+      if ((item == null ? void 0 : item.status) === "enable" && (item == null ? void 0 : item.middlewareObject)) {
         activeMiddlewareObjs.push(item.middlewareObject);
       }
     });
-    __classPrivateFieldSet(this, _Board_activeMiddlewareObjs, activeMiddlewareObjs, "f");
+    __privateSet(this, _activeMiddlewareObjs, activeMiddlewareObjs);
   };
   const CURSOR = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuMTY0NzUzLCAyMDIxLzAyLzE1LTExOjUyOjEzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDktMTdUMTY6MDc6MjYrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA5LTE3VDE2OjEyOjUwKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA5LTE3VDE2OjEyOjUwKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjliMGM0MzI2LWU4ZTQtNDlkNy04MmUzLTgxODkwYTE2ZmU1YSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjMzOGFhZDBmLWZkZjMtODE0MS1iMTZmLWNiZWIzNTQyYTJhMCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjUwODAxNzc1LWZlNGEtNDQyMy05NDQ3LThkYWRhNzZhYTllOSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTA4MDE3NzUtZmU0YS00NDIzLTk0NDctOGRhZGE3NmFhOWU5IiBzdEV2dDp3aGVuPSIyMDIzLTA5LTE3VDE2OjA3OjI2KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OWIwYzQzMjYtZThlNC00OWQ3LTgyZTMtODE4OTBhMTZmZTVhIiBzdEV2dDp3aGVuPSIyMDIzLTA5LTE3VDE2OjEyOjUwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7W6XrzAAAGLklEQVRYhb2Xf2iUdRzHX/txtfXLplZ6Wblm6fzRmG6r7Uou1AxKRjQKYUqgaLBACFogppcK1h8aLRkMSYaJIA5hYMomZpskEfPOufCaDpZ6t7rbre263U3vzn3643meu+eu3XNzvz7w4bbdc/e89nl/Pu/v50HUCAQCx1tbW0uAx4CHgSwggxkKERkziUQif2mQ0WjU53a7vwSeBB4BTEDmTICmBBwYGDivVlDjlFAo9KvT6dwIPAHkANkq6MwDXr169bCISENDg9TX14s+BgcHf2hubi5mBmRPCXj06NFPREQ6OjoEkPLycrl06VIMMhKJeFwu1xdMs+wpAYuLi9eIiIyOjkpeXp4AAsj27dvF7/fHQIPB4C9dXV0fME2ypwQEXvX7/bdFRNauXRsDBMRkMsnhw4cTZB8YGGhsamp6hSmW3Qhw1Y0bN86LiNTW1iYAallWViZtbW162ftcLtdO/i/7tAAWtba2ficicvLkyTEBtdy6dasMDg7GQIeHh9s7OzvfBx5nkrIbAS7du3fvxyIiPT09hoBa1tXVJcv+fWNj4zLgUeAhJiC7EeDLwOsiMioisnDhwnFBrlixQi5evKiX/c6tW7c+R5E9lweU3QjwReDV/v7+bhGRqqqqcQFquWnTJvH5fHrZLzocjkoSZU9bTSPA54GV165daxYROXDgwAMBannw4MFk2RsaGhqWME7ZjQDNwIrTp09/JSLS0tIyIUBACgoK5MKFCzHIcDj85+3btz8FZpFGdiPAZ4DCmpqaTSIiPp9vwoBaVlVVidfr1ct+/sqVK+9iILsR4FzgJcASDoeHRUSKioomDQnI/v37E2T3+Xz1hw4dWjSW7EaAeUA+UNbX12cXEdmyZcuUAAJiNpvlzJkzetl73G53rVrN2EmUCjATuA9EgYjL5eoGKCkpGatNHijmz5/Pxo0b2blzJ2azOfZ3k8lUYDabv45Go/Y7d+6sIY0VZQOjGqDT6bxeWlrKqlWrJgRlsVhYv349FRUVWCwWcnJyEt4PBoOuoaEhu9frvdzR0fHTtm3buolvRpLqe3OBp4EllZWV74mIRKNRyc3NTSvf7Nmzpbq6Wk6cOCFut1uSY2RkJOB0Ou3Nzc3Ha2trPwPWAGXAEuBZFFPPAbKMevBhYA6wCKgIBoP9IiKrV682hLPZbP8DEpH7vb29N1paWn602WwHFyxYsAX4EKgE3gIsQBFQgOIeT6j3z0wFqEkc60OPx9Odn58/t6SkhPb29jFLbrVa2bNnDwBer7fv5s2bPQ6Ho7upqcnZ1tbmASJq3gPC6utdYESXYfWeo6mkBaUHRQ/odrv/yM/Pt5SWlqb8kAbncDh+W7lyZYN683u6DOvAwipsOOnniA4wZf9lqhdoVYzY7fbrQMpBsdlsWK1WRkZGAtXV1d8D/wA+wKNLr5o+YEC9ZggIAEHiFbyfDhCUCcoFngIWFxYWrtMaat68eQl9V15eHmu2+vr6OuAd4A2gGFgMLERp/mdQ+noWyuadi9Jr2aQ4k42GBPXDs1Ga97WhoaFbIiIbNmxIANTWq87Ozp9VuApgGfACihPkoRjwI+p3mlSgtA9ZRkYNYwwKJBr2rl27sFqthEKhwZqamqOAX5f/AsPE5btLvM/GJWO6yFb/82eBonPnztWJiJw9e1YAWb58eUzaI0eOfAO8CbwCPIfiZZN+eEoncSaKLPOApbt3794uIuL1ehOktdvtF4C3gRKURXcOSn9lTRRsvIAZKI4+l/gjQFREZMeOHSIiEggE+tetW/cRitkuRhmERxnnxjxZQFDWnzzURwCv1+vUHxHHjh37lri0C1Am9KGpgDMC1G8SQnxxCHs8Hqf2RldX10+bN28+i+JjwyT62KSaP13oAfWTHO7t7f0dIBQK/b1v375GlEnVjPYuyoQaHlNTDahVMALca29vdwBcvnz5+KlTp26OATft1UuODBS7yEOxj0K/329HOSWWopjxlE1tchhtM7FriPfgXSDDbrfXo0gbJr4QzIi0WiRPYBbKZJrUV23b0dYn7XSYcsBkS9EiO/k6lApq1cwiPjzaAM1Y9cYC1G6uAWrPCtrvMwoHqU02Q5caIEzj1KaS+D+vIjxtLug31gAAAABJRU5ErkJggg==";
   const CURSOR_RESIZE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAApCAYAAABHomvIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuMTY0NzUzLCAyMDIxLzAyLzE1LTExOjUyOjEzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDktMTdUMTY6MzE6MjMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA5LTE3VDE2OjQ0OjIyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA5LTE3VDE2OjQ0OjIyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MTBhYjUzLWM0ZjEtNDVhNS04MjhkLTIxOTczOWFjOTk3MSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjBkMDNmNjM5LTE5MzctY2Y0MC1hMTg0LTIyMjg0NzczNWNmYSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyYjQwZGRmLWE0ZGEtNDY3MC1iYzc2LTBhYjY3ZmI5M2I0ZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ODJiNDBkZGYtYTRkYS00NjcwLWJjNzYtMGFiNjdmYjkzYjRlIiBzdEV2dDp3aGVuPSIyMDIzLTA5LTE3VDE2OjMxOjIzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjQxMGFiNTMtYzRmMS00NWE1LTgyOGQtMjE5NzM5YWM5OTcxIiBzdEV2dDp3aGVuPSIyMDIzLTA5LTE3VDE2OjQ0OjIyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz57vRudAAAEk0lEQVRYhe3ZW0jbVxzA8e8/MX+NYnG9uI4xE3bvoLt0FzradRfGBtsYo32YdAhb6WQyBqV7KOylpYjzZShDGfjmyxgbgjjwyRm16SYMhgiNKDhbL3VtNF4xJOnf3x7+59i/Wf4aTbInf3AwJMdzPjnnf/n9/jFEhGzDMIxMb3uAIsDs6ek5urS05Dtz5syE+uwekAQS6u89YD19gC0NIpJ1c8GZQHlXV9fJRCIxGo/HxxoaGj4CngWOAEGgEihXfT07MeQC3MB1dna+lkgkRkXF6urq3xcuXPgUOAE8DzwGPOiGLARwEy4ej4+JiITD4elr167NiIgsLi7eqq2trQPeBI4Bj7sh8w10xZmmeds0zdn+/v5/RERisdjUuXPnvgLeAl50Q+YTaAA+oKy7u/uE3laNAwSQ4uLiu6FQ6G4G5DG13YeAMjWWkU+gBygJhULHNe769etTTpwDGXUiz58//yXwujp5qoAHgBLAk0+gNxKJHEulUiMKN2ma5gwgPp/vjhOXjlxYWJisq6urBV5RW30IKAW8eQPGYrGjlmXdEBEZHBy8aZrmFCCmac729fVtAHt7e6MO5N2+vr47IiJLS0s3L126dBZ4Sh2LZUBRwVdwYGBgVuwOYh/zsoF0bnPBVzDTMRgOh6dFhROokSIi8/Pz0+pEeaPQx+DGWdzV1XVSX2LcgCIic3NzMzU1NV8D7wIvq9WrLNRZvOk62NHRccqJTAdGo9Hb1dXV3wAfYt9VjgAPFfI66EQWAxU9PT0fuwEvXrzYBJwF3gFeAAJAhfrfrO4k/7lxZxnr2JlJqry8POnWyePx6H4JR0vhktVkHGOXQI20SkpKLLcOhmGsA5YCaZiVLS5XoADi9XpdkznDMERhnE0fCgUHZhvOW+CO4/8A5hR7wFxjD5hr7AFzjZyBlmVlrOYdYaS1HUUuQA/gWV9fd51URDyqn1c1j6MVFGjoidfW1oq2ABrYj0V82OmVzwHNajVdB88C5wOKTdM87NaxsrKyQsFKHC2BnTDo+/TWt8Bd5INeVC44NDT0xXYZdXNz8w/AaeyS8yjwCPdzQu92ht2m/OUjIyOfS1pkAoqItLS0fA+8D7wKPA0cxs6qC1O4T0xMfKYnb21tnXEDNjc3z+nXbW1t3wFvYz9dCAL7KUThHovFPtGTNjU1jQFSX18/lg68cuXKLUAaGxs3vkB7e/u3wHHgCQpUdnpTqdQvesJgMDisUVevXh3Xry9fvnxTv66qqprQ/cfHx/vVNj/J/couv0DAv7q6+pMDeYPNSalkwkUikX7s4ukl4FHgAODPN1CXnPsWFxd/dCAjW+GGhoZCwAfYpeczwMPAPjVW3gv3IvXN98disZ8dyBGNCwQC4/r94eHhfuy6+JS6zATUCeJXY+W9cNfIUuDAwsLCr05kIBDYeBQ8Ojr6h8Lpx25BtbWlGpfv62BG5PLy8m+SFpOTk38C76mVe84NVyhgOvLgysrK7xoXjUb/Uqt2XG1rEDiYCbcd0MgwsWtk+J1EI03An0wmw5Zlefx+/2n1eRKIO5r+rWTTpFsZ/gWFrGMmeObuqwAAAABJRU5ErkJggg==";
@@ -4509,6 +4549,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const EVENT_KEY_RULER = "ruler";
   const EVENT_KEY_SCALE = "scale";
   const EVENT_KEY_SELECT = "select";
+  const EVENT_KEY_SELECT_LAYOUT = "selectLayout";
   const EVENT_KEY_CLEAR_SELECT = "clearSelect";
   const EVENT_KEY_TEXT_EDIT = "textEdit";
   const EVENT_KEY_TEXT_CHANGE = "textChange";
@@ -4519,6 +4560,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     CHANGE: EVENT_KEY_CHANGE,
     RULER: EVENT_KEY_RULER,
     SCALE: EVENT_KEY_SCALE,
+    SELECT_LAYOUT: EVENT_KEY_SELECT_LAYOUT,
     SELECT: EVENT_KEY_SELECT,
     CLEAR_SELECT: EVENT_KEY_CLEAR_SELECT,
     TEXT_EDIT: EVENT_KEY_TEXT_EDIT,
@@ -4537,7 +4579,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   class Cursor {
     constructor(container, opts) {
       __privateAdd(this, _Cursor_instances);
-      __privateAdd(this, _eventHub);
+      __privateAdd(this, _eventHub2);
       __privateAdd(this, _container);
       __privateAdd(this, _cursorType, null);
       __privateAdd(this, _resizeCursorBaseImage, null);
@@ -4549,19 +4591,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         rotate: CURSOR_RESIZE_ROTATE
       });
       __privateSet(this, _container, container);
-      __privateSet(this, _eventHub, opts.eventHub);
-      __privateMethod(this, _Cursor_instances, init_fn).call(this);
+      __privateSet(this, _eventHub2, opts.eventHub);
+      __privateMethod(this, _Cursor_instances, init_fn4).call(this);
       __privateMethod(this, _Cursor_instances, loadResizeCursorBaseImage_fn).call(this);
     }
   }
-  _eventHub = new WeakMap();
+  _eventHub2 = new WeakMap();
   _container = new WeakMap();
   _cursorType = new WeakMap();
   _resizeCursorBaseImage = new WeakMap();
   _cursorImageMap = new WeakMap();
   _Cursor_instances = new WeakSet();
-  init_fn = function() {
-    const eventHub = __privateGet(this, _eventHub);
+  init_fn4 = function() {
+    const eventHub = __privateGet(this, _eventHub2);
     __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, "default");
     eventHub.on(coreEventKeys.CURSOR, (e) => {
       var _a;
@@ -4729,22 +4771,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ctx.stroke();
   }
   function drawCircleController(ctx, circleCenter, opts) {
-    const { size, borderColor: borderColor2, borderWidth: borderWidth2, background: background2 } = opts;
+    const { size, background: background2 } = opts;
     const center = circleCenter;
     const r = size / 2;
     const a = r;
     const b = r;
     if (a >= 0 && b >= 0) {
-      if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
-        const ba = borderWidth2 / 2 + a;
-        const bb = borderWidth2 / 2 + b;
-        ctx.beginPath();
-        ctx.strokeStyle = borderColor2;
-        ctx.lineWidth = borderWidth2;
-        ctx.circle(center.x, center.y, ba, bb, 0, 0, 2 * Math.PI);
-        ctx.closePath();
-        ctx.stroke();
-      }
       ctx.beginPath();
       ctx.fillStyle = background2;
       ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
@@ -4819,7 +4851,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { controller } = opts;
     if (controller) {
       const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
-      const ctrlOpts = { ...wrapperOpts, borderWidth: 1, background: lockedColor2 };
+      const ctrlOpts = { ...wrapperOpts, borderWidth: 1 };
       drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
       drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
       drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
@@ -4855,7 +4887,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
       drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
       if (((_a = element == null ? void 0 : element.operations) == null ? void 0 : _a.rotatable) !== false) {
-        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: rotate.size, borderWidth: 0 });
+        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: rotate.size });
         const rotateCenter = calcViewPointSize(rotate.center, opts);
         ctx.drawImage(
           rotateControllerPattern.canvas,
@@ -4980,7 +5012,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (!vertexes) {
       return false;
     }
-    return isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo, viewSizeInfo });
+    return isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo });
   }
   function getPointTarget(p, opts) {
     var _a, _b, _c, _d, _e;
@@ -4991,7 +5023,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       groupQueue: [],
       groupQueueVertexesList: []
     };
-    const { ctx, data, calculator, selectedElements, viewScaleInfo, viewSizeInfo, areaSize, groupQueue, selectedElementController } = opts;
+    const {
+      ctx,
+      data,
+      calculator,
+      selectedElements,
+      viewScaleInfo,
+      viewSizeInfo,
+      areaSize,
+      groupQueue,
+      selectedElementController
+    } = opts;
     if (selectedElementController) {
       const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController;
       const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight];
@@ -5000,7 +5042,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
       for (let i = 0; i < ctrls.length; i++) {
         const ctrl = ctrls[i];
-        if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) {
+        if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewScaleInfo })) {
           target.type = `resize-${ctrl.type}`;
           if (selectedElements && (selectedElements == null ? void 0 : selectedElements.length) > 0) {
             target.groupQueue = groupQueue || [];
@@ -5016,7 +5058,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         for (let i = lastGroup.detail.children.length - 1; i >= 0; i--) {
           const child = lastGroup.detail.children[i];
           const vertexes = calcElementVertexesInGroup(child, { groupQueue });
-          if (vertexes && isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo, viewSizeInfo })) {
+          if (vertexes && isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo })) {
             if (!target.type) {
               target.type = "over-element";
             }
@@ -5052,7 +5094,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function resizeElement(elem, opts) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     let { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elem;
-    const elemCenter = calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    const elemCenter = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
     angle2 = limitAngle(angle2);
     const radian = parseAngleToRadian(angle2);
     const limitRatio = !!((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.limitRatio);
@@ -5343,7 +5385,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY - centerMoveHorizontalDist2 * Math.sin(radian);
           } else if (angle2 < 180) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalX
+            );
             const radian2 = parseRadian(angle2 - 90);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX + centerMoveVerticalDist2 * Math.cos(radian2);
@@ -5353,7 +5398,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY - centerMoveDist * Math.cos(radian2);
           } else if (angle2 < 270) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2 - 180);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX - centerMoveVerticalDist2 * Math.sin(radian2);
@@ -5363,7 +5411,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY + centerMoveHorizontalDist2 * Math.sin(radian2);
           } else if (angle2 < 360) {
             moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2 - 270);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX - centerMoveVerticalDist2 * Math.cos(radian2);
@@ -5397,7 +5448,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           let centerY = elemCenter.y;
           if (angle2 < 90) {
             moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX + centerMoveVerticalDist2 * Math.sin(radian2);
@@ -5407,7 +5461,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY + centerMoveHorizontalDist2 * Math.sin(radian2);
           } else if (angle2 < 180) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2 - 90);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX + centerMoveVerticalDist2 * Math.cos(radian2);
@@ -5418,7 +5475,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           } else if (angle2 < 270) {
             const radian2 = parseRadian(angle2 - 180);
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : 0 - moveHorizontalX);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : 0 - moveHorizontalX
+            );
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX - centerMoveVerticalDist2 * Math.sin(radian2);
             centerY = centerY + centerMoveVerticalDist2 * Math.cos(radian2);
@@ -5427,7 +5487,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY - centerMoveHorizontalDist2 * Math.sin(radian2);
           } else if (angle2 < 360) {
             moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalX
+            );
             const radian2 = parseRadian(angle2 - 270);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX - centerMoveVerticalDist2 * Math.cos(radian2);
@@ -5471,7 +5534,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY - centerMoveHorizontalDist2 * Math.sin(radian2);
           } else if (angle2 < 180) {
             moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalX
+            );
             const radian2 = parseRadian(angle2 - 90);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX - centerMoveVerticalDist2 * Math.cos(radian2);
@@ -5481,7 +5547,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY - centerMoveDist * Math.cos(radian2);
           } else if (angle2 < 270) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2 - 180);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX + centerMoveVerticalDist2 * Math.sin(radian2);
@@ -5491,7 +5560,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY + centerMoveHorizontalDist2 * Math.sin(radian2);
           } else if (angle2 < 360) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2 - 270);
             const centerMoveDist = moveVerticalDist / 2;
             centerX = centerX + centerMoveDist * Math.cos(radian2);
@@ -5524,7 +5596,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           let centerY = elemCenter.y;
           if (angle2 < 90) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalY
+            );
             const radian2 = parseRadian(angle2);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX - centerMoveVerticalDist2 * Math.sin(radian2);
@@ -5544,7 +5619,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY + centerMoveHorizontalDist2 * Math.cos(radian2);
           } else if (angle2 < 270) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : 0 - moveHorizontalY);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : 0 - moveHorizontalY
+            );
             const radian2 = parseRadian(angle2 - 180);
             const centerMoveVerticalDist2 = moveVerticalDist / 2;
             centerX = centerX + centerMoveVerticalDist2 * Math.sin(radian2);
@@ -5554,7 +5632,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             centerY = centerY - centerMoveHorizontalDist2 * Math.sin(radian2);
           } else if (angle2 < 360) {
             moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
-            moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
+            moveHorizontalDist = changeMoveDistDirect(
+              moveHorizontalDist,
+              limitRatio ? moveVerticalDist : moveHorizontalX
+            );
             const radian2 = parseRadian(angle2 - 270);
             const centerMoveDist = moveVerticalDist / 2;
             centerX = centerX + centerMoveDist * Math.cos(radian2);
@@ -5599,7 +5680,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const indexes = [];
     const uuids = [];
     const elements = [];
-    const { viewScaleInfo, viewSizeInfo, start, end } = opts;
+    const { viewScaleInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
       return { indexes, uuids, elements };
     }
@@ -5749,8 +5830,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (!targetRectInfo) {
       return null;
     }
-    const vTargetLineDotMap = {};
-    const hTargetLineDotMap = {};
     const vRefLineDotMap = {};
     const hRefLineDotMap = {};
     const vHelperLineDotMapList = [];
@@ -5758,12 +5837,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     let sortedRefXKeys = [];
     let sortedRefYKeys = [];
     const targetBox = getViewBoxInfo(targetRectInfo);
-    vTargetLineDotMap[targetBox.minX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
-    vTargetLineDotMap[targetBox.midX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
-    vTargetLineDotMap[targetBox.maxX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
-    hTargetLineDotMap[targetBox.minY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
-    hTargetLineDotMap[targetBox.midY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
-    hTargetLineDotMap[targetBox.maxY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
     siblingViewRectInfoList.forEach((info) => {
       const box = getViewBoxInfo(info);
       if (!vRefLineDotMap[box.minX]) {
@@ -6207,6 +6280,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
         if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) {
           viewer.drawFrame();
+          eventHub.trigger(coreEventKeys.SELECT_LAYOUT);
         }
         prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
         if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
@@ -6308,10 +6382,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         const data = sharer.getActiveStorage("data");
         if (data && layoutActionType === "resize" && layoutControlType) {
           eventHub.trigger(coreEventKeys.CHANGE, {
-            type: "changeLayout",
+            type: "dragLayout",
             data
           });
         }
+        sharer.setSharedStorage(keyLayoutActionType, null);
+        sharer.setSharedStorage(keyLayoutControlType, null);
         if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
           return false;
         }
@@ -6863,7 +6939,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       sharer.setSharedStorage(keySelectedElementList, list);
       if (list.length === 1) {
         updateSelectedElemenetController();
-        sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage("data")) == null ? void 0 : _a.elements) || []));
+        sharer.setSharedStorage(
+          keySelectedElementPosition,
+          getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage("data")) == null ? void 0 : _a.elements) || [])
+        );
       } else {
         sharer.setSharedStorage(keySelectedElementController, null);
         sharer.setSharedStorage(keySelectedElementPosition, []);
@@ -6872,7 +6951,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         const uuids = list.map((elem) => elem.uuid);
         const data = sharer.getActiveStorage("data");
         const positionMap = getElementPositionMapFromList(uuids, (data == null ? void 0 : data.elements) || []);
-        eventHub.trigger(coreEventKeys.SELECT, { uuids, positions: list.map((elem) => [...positionMap[elem.uuid]]) });
+        eventHub.trigger(coreEventKeys.SELECT, {
+          type: "clickCanvas",
+          uuids,
+          positions: list.map((elem) => [...positionMap[elem.uuid]])
+        });
       }
     };
     const pointTargetBaseOptions = () => {
@@ -7017,13 +7100,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
         const selectedElements = getActiveElements();
         const viewScaleInfo = sharer.getActiveViewScaleInfo();
-        const viewSizeInfo = sharer.getActiveViewSizeInfo();
+        sharer.getActiveViewSizeInfo();
         const target = getPointTarget(e.point, {
           ...pointTargetBaseOptions(),
           areaSize: calcSelectedElementsArea(selectedElements, {
-            viewScaleInfo,
-            viewSizeInfo,
-            calculator
+            viewScaleInfo
           })
         });
         triggerCursor(target);
@@ -7089,8 +7170,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
         const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
           viewScaleInfo: sharer.getActiveViewScaleInfo(),
-          viewSizeInfo: sharer.getActiveViewSizeInfo(),
-          calculator
+          viewSizeInfo: sharer.getActiveViewSizeInfo()
         });
         const target = getPointTarget(e.point, {
           ...pointTargetBaseOptions(),
@@ -7170,7 +7250,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             elems[0].x = calculator.toGridNum(moveOriginalStartElementSize.x + totalMoveX);
             elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
             updateSelectedElementList([elems[0]]);
-            calculator.modifyViewVisibleInfoMap(data, {
+            calculator.modifyVirtualFlatItemMap(data, {
               modifyOptions: {
                 type: "updateElement",
                 content: {
@@ -7194,7 +7274,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               if (elem && ((_a2 = elem == null ? void 0 : elem.operations) == null ? void 0 : _a2.locked) !== true) {
                 elem.x = calculator.toGridNum(elem.x + moveX);
                 elem.y = calculator.toGridNum(elem.y + moveY);
-                calculator.modifyViewVisibleInfoMap(data, {
+                calculator.modifyVirtualFlatItemMap(data, {
                   modifyOptions: {
                     type: "updateElement",
                     content: {
@@ -7232,7 +7312,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               resizeEnd = rotatePointInGroup(end, pointGroupQueue);
             }
             if (resizeType === "resize-rotate") {
-              const controller = sharer.getSharedStorage(keySelectedElementController);
+              const controller = sharer.getSharedStorage(
+                keySelectedElementController
+              );
               const viewVertexes = [
                 controller.topLeft.center,
                 controller.topRight.center,
@@ -7243,15 +7325,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               const resizedElemSize = rotateElement(moveOriginalStartElementSize, {
                 center: viewCenter,
                 viewScaleInfo,
-                viewSizeInfo,
                 start: originalStart,
-                end,
-                resizeType,
-                sharer
+                end
               });
               elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
             } else {
-              const resizedElemSize = resizeElement(moveOriginalStartElementSize, { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
+              const resizedElemSize = resizeElement(
+                { ...moveOriginalStartElementSize, operations: elems[0].operations },
+                { scale, start: resizeStart, end: resizeEnd, resizeType }
+              );
               const calcOpts = { ignore: !!moveOriginalStartElementSize.angle };
               elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
               elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
@@ -7266,7 +7348,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               }
             }
             updateSelectedElementList([elems[0]]);
-            calculator.modifyViewVisibleInfoMap(data, {
+            calculator.modifyVirtualFlatItemMap(data, {
               modifyOptions: {
                 type: "updateElement",
                 content: {
@@ -7314,7 +7396,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               const { elements } = getSelectedListArea(data, {
                 start,
                 end,
-                calculator,
                 viewScaleInfo: sharer.getActiveViewScaleInfo(),
                 viewSizeInfo: sharer.getActiveViewSizeInfo()
               });
@@ -7394,7 +7475,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           eventHub.trigger(coreEventKeys.TEXT_EDIT, {
             element: target.elements[0],
             groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
-            position: getElementPositionFromList((_g = target.elements[0]) == null ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage("data")) == null ? void 0 : _h.elements) || []),
+            position: getElementPositionFromList(
+              (_g = target.elements[0]) == null ? void 0 : _g.uuid,
+              ((_h = sharer.getActiveStorage("data")) == null ? void 0 : _h.elements) || []
+            ),
             viewScaleInfo: sharer.getActiveViewScaleInfo()
           });
         }
@@ -7429,8 +7513,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
         const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
           viewScaleInfo: sharer.getActiveViewScaleInfo(),
-          viewSizeInfo: sharer.getActiveViewSizeInfo(),
-          calculator
+          viewSizeInfo: sharer.getActiveViewSizeInfo()
         });
         const target = getPointTarget(e.point, {
           ...pointTargetBaseOptions(),
@@ -7451,7 +7534,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         const { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 } = innerConfig;
         const style = { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 };
         const { activeStore, sharedStore } = snapshot;
-        const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
+        const {
+          scale,
+          offsetLeft,
+          offsetTop,
+          offsetRight,
+          offsetBottom,
+          width,
+          height,
+          contextHeight,
+          contextWidth,
+          devicePixelRatio
+        } = activeStore;
         if (rotateControllerPattern.fill !== activeColor2) {
           rotateControllerPattern = createRotateControllerPattern({
             fill: innerConfig.activeColor,
@@ -7504,7 +7598,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
-              calculator,
               hideControllers: !!isMoving && actionType === "drag",
               rotateControllerPattern: rotateControllerPattern.context2d,
               style
@@ -7547,7 +7640,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
-              calculator,
               hideControllers: !!isMoving && actionType === "drag",
               rotateControllerPattern: rotateControllerPattern.context2d,
               style
@@ -7578,8 +7670,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           } else if (["drag-list", "drag-list-end"].includes(actionType)) {
             const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
               viewScaleInfo: sharer2.getActiveViewScaleInfo(),
-              viewSizeInfo: sharer2.getActiveViewSizeInfo(),
-              calculator
+              viewSizeInfo: sharer2.getActiveViewSizeInfo()
             });
             if (listAreaSize) {
               drawListArea(overlayContext, { areaSize: listAreaSize, style });
@@ -7709,7 +7800,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return scrollWrapper;
   }
   function drawScrollerThumb(ctx, opts) {
-    let { x: x2, y: y2, h: h2, w: w2, background: background2, borderColor: borderColor2 } = opts;
+    let { x: x2, y: y2, h: h2, w: w2 } = opts;
+    const { background: background2, borderColor: borderColor2 } = opts;
     ctx.save();
     ctx.shadowColor = "#FFFFFF";
     ctx.shadowOffsetX = 0;
@@ -8032,7 +8124,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { scale, offsetLeft } = viewScaleInfo;
     const { width } = viewSizeInfo;
     return calcRulerScaleList({
-      axis: "X",
       scale,
       viewLength: width,
       viewOffset: offsetLeft
@@ -8043,7 +8134,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { scale, offsetTop } = viewScaleInfo;
     const { height } = viewSizeInfo;
     return calcRulerScaleList({
-      axis: "Y",
       scale,
       viewLength: height,
       viewOffset: offsetTop
@@ -8274,7 +8364,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
           const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
           drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
-          drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, style });
+          drawRulerBackground(overlayContext, { viewSizeInfo, style });
           const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
           drawXRuler(overlayContext, { scaleList: xList, style });
           const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
@@ -8284,7 +8374,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             drawGrid(ctx, {
               xList,
               yList,
-              viewScaleInfo,
               viewSizeInfo,
               style
             });
@@ -8606,14 +8695,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       // #opts: CoreOptions;
       __privateAdd(this, _canvas);
       __privateAdd(this, _container2);
-      const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
+      const { devicePixelRatio = 1, width, height } = opts;
       __privateSet(this, _container2, container);
       const canvas = document.createElement("canvas");
       canvas.setAttribute("tabindex", "0");
       __privateSet(this, _canvas, canvas);
       __privateMethod(this, _Core_instances, initContainer_fn).call(this);
       container.appendChild(canvas);
-      const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true, createCustomContext2D });
+      const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio });
       const board = new Board({ boardContent, container });
       const sharer = board.getSharer();
       sharer.setActiveViewSizeInfo({
@@ -8716,6 +8805,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const container = __privateGet(this, _container2);
     container.style.position = "relative";
   };
+  exports.Board = Board;
+  exports.Calculator = Calculator;
   exports.Core = Core;
   exports.MiddlewareDragger = MiddlewareDragger;
   exports.MiddlewareInfo = MiddlewareInfo;
@@ -8726,6 +8817,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.MiddlewareScroller = MiddlewareScroller;
   exports.MiddlewareSelector = MiddlewareSelector;
   exports.MiddlewareTextEditor = MiddlewareTextEditor;
+  exports.Sharer = Sharer;
   exports.coreEventKeys = coreEventKeys;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;