@idraw/core 0.4.0-beta.0 → 0.4.0-beta.10

package/dist/index.global.js

@@ -22,11 +22,11 @@ var __privateMethod = (obj, member, method) => {
   return method;
 };
 
-  var _board, _container, _initContainer, initContainer_fn;
+  var _board, _canvas, _container, _initContainer, initContainer_fn;
   function throttle(fn, timeout) {
     let timer = -1;
     return function(...args) {
-      if (timer > 0) {
+      if (timer >= 0) {
         return;
       }
       timer = setTimeout(() => {
@@ -358,7 +358,7 @@ var __privateMethod = (obj, member, method) => {
     fontWeight: fontWeight$1,
     strokeWidth
   };
-  var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet$9 = function(receiver, state, value, kind, f) {
     if (kind === "m")
       throw new TypeError("Private method is not writable");
     if (kind === "a" && !f)
@@ -367,7 +367,7 @@ var __privateMethod = (obj, member, method) => {
       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) {
+  var __classPrivateFieldGet$9 = 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))
@@ -379,17 +379,20 @@ var __privateMethod = (obj, member, method) => {
     constructor(ctx, opts) {
       _Context2D_ctx.set(this, void 0);
       _Context2D_opts.set(this, void 0);
-      __classPrivateFieldSet(this, _Context2D_ctx, ctx, "f");
-      __classPrivateFieldSet(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
+      __classPrivateFieldSet$9(this, _Context2D_ctx, ctx, "f");
+      __classPrivateFieldSet$9(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
     }
     $undoPixelRatio(num) {
-      return num / __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio;
+      return num / __classPrivateFieldGet$9(this, _Context2D_opts, "f").devicePixelRatio;
     }
     $doPixelRatio(num) {
-      return __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio * num;
+      return __classPrivateFieldGet$9(this, _Context2D_opts, "f").devicePixelRatio * num;
     }
     $getContext() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f");
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f");
+    }
+    $setContext(ctx) {
+      __classPrivateFieldSet$9(this, _Context2D_ctx, ctx, "f");
     }
     $setFont(opts) {
       const strList = [];
@@ -398,17 +401,17 @@ var __privateMethod = (obj, member, method) => {
       }
       strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
       strList.push(`${opts.fontFamily || "sans-serif"}`);
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
     }
     $getOffscreenCanvas() {
-      return __classPrivateFieldGet(this, _Context2D_opts, "f").offscreenCanvas;
+      return __classPrivateFieldGet$9(this, _Context2D_opts, "f").offscreenCanvas;
     }
     $resize(opts) {
       const { width, height, devicePixelRatio, resetStyle } = opts;
-      const { canvas } = __classPrivateFieldGet(this, _Context2D_ctx, "f");
+      const { canvas } = __classPrivateFieldGet$9(this, _Context2D_ctx, "f");
       canvas.width = width * devicePixelRatio;
       canvas.height = height * devicePixelRatio;
-      __classPrivateFieldSet(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _Context2D_opts, "f")), {
+      __classPrivateFieldSet$9(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet$9(this, _Context2D_opts, "f")), {
         devicePixelRatio
       }), "f");
       if (resetStyle === true) {
@@ -417,8 +420,8 @@ var __privateMethod = (obj, member, method) => {
       }
     }
     $getSize() {
-      const { devicePixelRatio } = __classPrivateFieldGet(this, _Context2D_opts, "f");
-      const { width, height } = __classPrivateFieldGet(this, _Context2D_ctx, "f").canvas;
+      const { devicePixelRatio } = __classPrivateFieldGet$9(this, _Context2D_opts, "f");
+      const { width, height } = __classPrivateFieldGet$9(this, _Context2D_ctx, "f").canvas;
       return {
         width: width / devicePixelRatio,
         height: height / devicePixelRatio,
@@ -426,125 +429,125 @@ var __privateMethod = (obj, member, method) => {
       };
     }
     get canvas() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").canvas;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").canvas;
     }
     get fillStyle() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillStyle;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillStyle;
     }
     set fillStyle(value) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").fillStyle = value;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillStyle = value;
     }
     get strokeStyle() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeStyle;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeStyle;
     }
     set strokeStyle(color2) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeStyle = color2;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeStyle = color2;
     }
     get lineWidth() {
-      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").lineWidth);
+      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineWidth);
     }
     set lineWidth(w2) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
     }
     get textAlign() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").textAlign;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textAlign;
     }
     set textAlign(align) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").textAlign = align;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textAlign = align;
     }
     get textBaseline() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").textBaseline;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textBaseline;
     }
     set textBaseline(baseline) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").textBaseline = baseline;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").textBaseline = baseline;
     }
     get globalAlpha() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalAlpha;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalAlpha;
     }
     set globalAlpha(alpha) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").globalAlpha = alpha;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalAlpha = alpha;
     }
     get shadowColor() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowColor;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowColor;
     }
     set shadowColor(color2) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowColor = color2;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowColor = color2;
     }
     get shadowOffsetX() {
-      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetX);
+      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetX);
     }
     set shadowOffsetX(offsetX) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
     }
     get shadowOffsetY() {
-      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetY);
+      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetY);
     }
     set shadowOffsetY(offsetY) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
     }
     get shadowBlur() {
-      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowBlur);
+      return this.$undoPixelRatio(__classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowBlur);
     }
     set shadowBlur(blur) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
     }
     get lineCap() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineCap;
     }
     set lineCap(lineCap) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap = lineCap;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineCap = lineCap;
     }
     get globalCompositeOperation() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation;
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
     }
     fill(...args) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").fill(...args);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fill(...args);
     }
     arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
     }
     rect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     fillRect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     clearRect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     beginPath() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").beginPath();
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").beginPath();
     }
     closePath() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").closePath();
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").closePath();
     }
     lineTo(x2, y2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     moveTo(x2, y2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     arcTo(x1, y1, x2, y2, radius) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
     }
     getLineDash() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").getLineDash();
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").getLineDash();
     }
     setLineDash(nums) {
       const dash = nums.map((n) => this.$doPixelRatio(n));
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").setLineDash(dash);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").setLineDash(dash);
     }
     stroke(path) {
-      return path ? __classPrivateFieldGet(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet(this, _Context2D_ctx, "f").stroke();
+      return path ? __classPrivateFieldGet$9(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet$9(this, _Context2D_ctx, "f").stroke();
     }
     translate(x2, y2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     rotate(angle2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").rotate(angle2);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").rotate(angle2);
     }
     drawImage(...args) {
       const image = args[0];
@@ -557,64 +560,64 @@ var __privateMethod = (obj, member, method) => {
       const dw = args[args.length - 2];
       const dh = args[args.length - 1];
       if (args.length === 9) {
-        return __classPrivateFieldGet(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$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));
       } else {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
       }
     }
     createPattern(image, repetition) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").createPattern(image, repetition);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").createPattern(image, repetition);
     }
     measureText(text2) {
-      const textMetrics = __classPrivateFieldGet(this, _Context2D_ctx, "f").measureText(text2);
+      const textMetrics = __classPrivateFieldGet$9(this, _Context2D_ctx, "f").measureText(text2);
       return textMetrics;
     }
     fillText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     strokeText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     save() {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").save();
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").save();
     }
     restore() {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").restore();
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").restore();
     }
     scale(ratioX, ratioY) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
+      __classPrivateFieldGet$9(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
     }
     circle(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      __classPrivateFieldGet(this, _Context2D_ctx, "f").ellipse(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radiusX), this.$doPixelRatio(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);
     }
     isPointInPath(x2, y2) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     clip(...args) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").clip(...args);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").clip(...args);
     }
     setTransform(a, b, c, d, e, f) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
     }
     getTransform() {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").getTransform();
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return __classPrivateFieldGet(this, _Context2D_ctx, "f").createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+      return __classPrivateFieldGet$9(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(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$9(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(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$9(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
   }
   _Context2D_ctx = /* @__PURE__ */ new WeakMap(), _Context2D_opts = /* @__PURE__ */ new WeakMap();
@@ -641,15 +644,39 @@ var __privateMethod = (obj, member, method) => {
     });
     return context2d;
   }
-  function createViewContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+  function createBoardContent(canvas, opts) {
+    const { width, height, devicePixelRatio, offscreen, createCustomContext2D } = opts;
     const ctxOpts = {
       width,
       height,
       devicePixelRatio
     };
+    const ctx = canvas.getContext("2d");
+    if (createCustomContext2D) {
+      const viewContext = createCustomContext2D(ctxOpts);
+      const helperContext = createCustomContext2D(ctxOpts);
+      const underContext = 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(underContext.canvas, 0, 0, w2, h2);
+        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
+        boardContext.drawImage(helperContext.canvas, 0, 0, w2, h2);
+        underContext.clearRect(0, 0, w2, h2);
+        viewContext.clearRect(0, 0, w2, h2);
+        helperContext.clearRect(0, 0, w2, h2);
+      };
+      const content = {
+        underContext,
+        viewContext,
+        helperContext,
+        boardContext,
+        drawView
+      };
+      return content;
+    }
     if (offscreen === true) {
-      const ctx = canvas.getContext("2d");
       const viewContext = createOffscreenContext2D(ctxOpts);
       const helperContext = createOffscreenContext2D(ctxOpts);
       const underContext = createOffscreenContext2D(ctxOpts);
@@ -673,7 +700,6 @@ var __privateMethod = (obj, member, method) => {
       };
       return content;
     } else {
-      const ctx = canvas.getContext("2d");
       const viewContext = createContext2D(ctxOpts);
       const helperContext = createContext2D(ctxOpts);
       const underContext = createContext2D(ctxOpts);
@@ -697,22 +723,40 @@ var __privateMethod = (obj, member, method) => {
       return content;
     }
   }
+  var __classPrivateFieldSet$8 = 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) {
+    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 _EventEmitter_listeners;
   class EventEmitter {
     constructor() {
-      this._listeners = /* @__PURE__ */ new Map();
+      _EventEmitter_listeners.set(this, void 0);
+      __classPrivateFieldSet$8(this, _EventEmitter_listeners, /* @__PURE__ */ new Map(), "f");
     }
     on(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey) || [];
+      if (__classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(eventKey) || [];
         callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
-        this._listeners.set(eventKey, callbacks);
+        __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
       } else {
-        this._listeners.set(eventKey, [callback]);
+        __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
       }
     }
     off(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
+      if (__classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").has(eventKey)) {
+        const callbacks = __classPrivateFieldGet$8(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) {
@@ -721,11 +765,11 @@ var __privateMethod = (obj, member, method) => {
             }
           }
         }
-        this._listeners.set(eventKey, callbacks || []);
+        __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
       }
     }
     trigger(eventKey, e) {
-      const callbacks = this._listeners.get(eventKey);
+      const callbacks = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(eventKey);
       if (Array.isArray(callbacks)) {
         callbacks.forEach((cb) => {
           cb(e);
@@ -736,15 +780,19 @@ var __privateMethod = (obj, member, method) => {
       }
     }
     has(name) {
-      if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
+      if (__classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").has(name)) {
+        const list = __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").get(name);
         if (Array.isArray(list) && list.length > 0) {
           return true;
         }
       }
       return false;
     }
+    destroy() {
+      __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").clear();
+    }
   }
+  _EventEmitter_listeners = /* @__PURE__ */ new WeakMap();
   function calcDistance(start, end) {
     const distance = (start.x - end.x) * (start.x - end.x) + (start.y - end.y) * (start.y - end.y);
     return distance === 0 ? distance : Math.sqrt(distance);
@@ -755,27 +803,50 @@ var __privateMethod = (obj, member, method) => {
       y: p1.y + (p2.y - p1.y) / 2
     };
   }
+  var __classPrivateFieldSet$7 = 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) {
+    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 _Store_instances, _Store_temp, _Store_backUpDefaultStorage, _Store_createTempStorage;
   class Store {
     constructor(opts) {
-      this._backUpDefaultStorage = deepClone(opts.defaultStorage);
-      this._temp = this._createTempStorage();
+      _Store_instances.add(this);
+      _Store_temp.set(this, void 0);
+      _Store_backUpDefaultStorage.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");
     }
     set(name, value) {
-      this._temp[name] = value;
+      __classPrivateFieldGet$7(this, _Store_temp, "f")[name] = value;
     }
     get(name) {
-      return this._temp[name];
+      return __classPrivateFieldGet$7(this, _Store_temp, "f")[name];
     }
     getSnapshot() {
-      return deepClone(this._temp);
+      return deepClone(__classPrivateFieldGet$7(this, _Store_temp, "f"));
     }
     clear() {
-      this._temp = this._createTempStorage();
+      __classPrivateFieldSet$7(this, _Store_temp, __classPrivateFieldGet$7(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
     }
-    _createTempStorage() {
-      return deepClone(this._backUpDefaultStorage);
+    destroy() {
+      __classPrivateFieldSet$7(this, _Store_temp, null, "f");
     }
   }
+  _Store_temp = /* @__PURE__ */ new WeakMap(), _Store_backUpDefaultStorage = /* @__PURE__ */ new WeakMap(), _Store_instances = /* @__PURE__ */ new WeakSet(), _Store_createTempStorage = function _Store_createTempStorage2() {
+    return deepClone(__classPrivateFieldGet$7(this, _Store_backUpDefaultStorage, "f"));
+  };
   function getViewScaleInfoFromSnapshot(snapshot) {
     const { activeStore } = snapshot;
     const sacelInfo = {
@@ -1428,6 +1499,10 @@ var __privateMethod = (obj, member, method) => {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
@@ -1440,6 +1515,10 @@ var __privateMethod = (obj, member, method) => {
     const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
     const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
     const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
     const sizeController = {
       elementWrapper: vertexes,
       left: {
@@ -1481,6 +1560,26 @@ var __privateMethod = (obj, member, method) => {
         type: "bottom-right",
         vertexes: bottomRightVertexes,
         center: bottomRightCenter
+      },
+      leftMiddle: {
+        type: "left-middle",
+        vertexes: leftMiddleVertexes,
+        center: leftCenter
+      },
+      rightMiddle: {
+        type: "right-middle",
+        vertexes: rightMiddleVertexes,
+        center: rightCenter
+      },
+      topMiddle: {
+        type: "top-middle",
+        vertexes: topMiddleVertexes,
+        center: topCenter
+      },
+      bottomMiddle: {
+        type: "bottom-middle",
+        vertexes: bottomMiddleVertexes,
+        center: bottomCenter
       }
     };
     return sizeController;
@@ -1526,8 +1625,9 @@ var __privateMethod = (obj, member, method) => {
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2, boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
-    if (typeof borderWidth2 !== "number") {
+    let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
+    if (Array.isArray(borderWidth2)) {
       borderRadius2 = 0;
     }
     let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
@@ -1571,6 +1671,103 @@ var __privateMethod = (obj, member, method) => {
       radiusList
     };
   }
+  const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+  };
+  function resizeElementBaseDetail(elem, opts) {
+    const { detail } = elem;
+    const { xRatio, yRatio, maxRatio } = opts;
+    const middleRatio = (xRatio + yRatio) / 2;
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (typeof borderWidth2 === "number") {
+      detail.borderWidth = doNum(borderWidth2 * middleRatio);
+    } else if (Array.isArray(detail.borderWidth)) {
+      const bw = borderWidth2;
+      detail.borderWidth = [doNum(bw[0] * yRatio), doNum(bw[1] * xRatio), doNum(bw[2] * yRatio), doNum(bw[3] * xRatio)];
+    }
+    if (typeof borderRadius2 === "number") {
+      detail.borderRadius = doNum(borderRadius2 * middleRatio);
+    } else if (Array.isArray(detail.borderRadius)) {
+      const br = borderRadius2;
+      detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+    }
+    if (Array.isArray(borderDash)) {
+      borderDash.forEach((dash, i) => {
+        detail.borderDash[i] = doNum(dash * maxRatio);
+      });
+    }
+    if (typeof shadowOffsetX === "number") {
+      detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+    }
+    if (typeof shadowOffsetY === "number") {
+      detail.shadowOffsetX = doNum(shadowOffsetY * maxRatio);
+    }
+    if (typeof shadowBlur === "number") {
+      detail.shadowOffsetX = doNum(shadowBlur * maxRatio);
+    }
+  }
+  function resizeElementBase(elem, opts) {
+    const { xRatio, yRatio } = opts;
+    const { x: x2, y: y2, w: w2, h: h2 } = elem;
+    elem.x = doNum(x2 * xRatio);
+    elem.y = doNum(y2 * yRatio);
+    elem.w = doNum(w2 * xRatio);
+    elem.h = doNum(h2 * yRatio);
+    resizeElementBaseDetail(elem, opts);
+  }
+  function resizeTextElementDetail(elem, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize: fontSize2, lineHeight: lineHeight2 } = elem.detail;
+    const ratio = (minRatio + maxRatio) / 2;
+    if (fontSize2 && fontSize2 > 0) {
+      elem.detail.fontSize = doNum(fontSize2 * ratio);
+    }
+    if (lineHeight2 && lineHeight2 > 0) {
+      elem.detail.lineHeight = doNum(lineHeight2 * ratio);
+    }
+  }
+  function resizeElement$1(elem, opts) {
+    const { type } = elem;
+    resizeElementBase(elem, opts);
+    if (type === "circle")
+      ;
+    else if (type === "text") {
+      resizeTextElementDetail(elem, opts);
+    } else if (type === "image")
+      ;
+    else if (type === "svg")
+      ;
+    else if (type === "html")
+      ;
+    else if (type === "path")
+      ;
+    else if (type === "group" && Array.isArray(elem.detail.children)) {
+      elem.detail.children.forEach((child) => {
+        resizeElement$1(child, opts);
+      });
+    }
+  }
+  function deepResizeGroupElement(elem, size) {
+    const resizeW = size.w && size.w > 0 ? size.w : elem.w;
+    const resizeH = size.h && size.h > 0 ? size.h : elem.h;
+    const xRatio = resizeW / elem.w;
+    const yRatio = resizeH / elem.h;
+    if (xRatio === yRatio && xRatio === 1) {
+      return elem;
+    }
+    const minRatio = Math.min(xRatio, yRatio);
+    const maxRatio = Math.max(xRatio, yRatio);
+    elem.w = resizeW;
+    elem.h = resizeH;
+    const opts = { xRatio, yRatio, minRatio, maxRatio };
+    if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+      elem.detail.children.forEach((child) => {
+        resizeElement$1(child, opts);
+      });
+    }
+    resizeElementBaseDetail(elem, opts);
+    return elem;
+  }
   function createColorStyle(ctx, color2, opts) {
     if (typeof color2 === "string") {
       return color2;
@@ -1615,30 +1812,35 @@ var __privateMethod = (obj, member, method) => {
     return "#000000";
   }
   const defaultElemConfig = getDefaultElementDetailConfig();
+  function getOpacity(elem) {
+    var _a, _b, _c, _d;
+    let opacity = 1;
+    if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0 && ((_c = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _c === void 0 ? void 0 : _c.opacity) <= 1) {
+      opacity = (_d = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _d === void 0 ? void 0 : _d.opacity;
+    }
+    return opacity;
+  }
   function drawBox(ctx, viewElem, opts) {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
+    const { parentOpacity } = opts;
+    const opacity = getOpacity(originElem) * parentOpacity;
     drawClipPath(ctx, viewElem, {
       originElem,
       calcElemSize,
       viewScaleInfo,
       viewSizeInfo,
       renderContent: () => {
-        var _a, _b;
-        if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-          ctx.globalAlpha = viewElem.detail.opacity;
-        } else {
-          ctx.globalAlpha = 1;
-        }
+        ctx.globalAlpha = opacity;
         drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
         drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   function drawClipPath(ctx, viewElem, opts) {
-    const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
-    const totalScale = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
+    const { renderContent, originElem, calcElemSize, viewSizeInfo } = opts;
+    const totalScale = viewSizeInfo.devicePixelRatio;
     const { clipPath } = (originElem === null || originElem === void 0 ? void 0 : originElem.detail) || {};
     if (clipPath && calcElemSize && clipPath.commands) {
       const { x: x2, y: y2, w: w2, h: h2 } = calcElemSize;
@@ -1647,8 +1849,8 @@ var __privateMethod = (obj, member, method) => {
       const scaleH = h2 / originH;
       const viewOriginX = originX * scaleW;
       const viewOriginY = originY * scaleH;
-      let internalX = x2 - viewOriginX;
-      let internalY = y2 - viewOriginY;
+      const internalX = x2 - viewOriginX;
+      const internalY = y2 - viewOriginY;
       ctx.save();
       ctx.translate(internalX, internalY);
       ctx.scale(totalScale * scaleW, totalScale * scaleH);
@@ -1668,8 +1870,7 @@ var __privateMethod = (obj, member, method) => {
   function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
-    let transform = [];
-    viewElem.detail;
+    const transform = [];
     if (viewElem.detail.background || pattern) {
       const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
         viewScaleInfo,
@@ -1722,18 +1923,12 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawBoxBorder(ctx, viewElem, opts) {
-    var _a, _b;
     if (viewElem.detail.borderWidth === 0) {
       return;
     }
     if (!isColorStr(viewElem.detail.borderColor)) {
       return;
     }
-    if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-      ctx.globalAlpha = viewElem.detail.opacity;
-    } else {
-      ctx.globalAlpha = 1;
-    }
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
     let borderColor2 = defaultElemConfig.borderColor;
@@ -1857,7 +2052,6 @@ var __privateMethod = (obj, member, method) => {
       ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       ctx.stroke();
-      ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
   }
@@ -1879,53 +2073,69 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawCircle(ctx, elem, opts) {
     const { detail, angle: angle2 } = elem;
-    const { background: background2 = "#000000", borderColor: borderColor2 = "#000000", borderWidth: borderWidth2 = 0 } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
+    const { background: background2 = "#000000", borderColor: borderColor2 = "#000000", boxSizing, borderWidth: borderWidth2 = 0 } = detail;
+    let bw = 0;
+    if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+      bw = borderWidth2;
+    } else if (Array.isArray(borderWidth2) && typeof borderWidth2[0] === "number" && borderWidth2[0] > 0) {
+      bw = borderWidth2[0];
+    }
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          var _a, _b;
-          const a = w2 / 2;
-          const b = h2 / 2;
+          let a = w2 / 2;
+          let b = h2 / 2;
           const centerX = x2 + a;
           const centerY = y2 + b;
-          if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-            ctx.globalAlpha = elem.detail.opacity;
-          } else {
-            ctx.globalAlpha = 1;
+          if (bw > 0) {
+            if (boxSizing === "border-box") {
+              a = a - bw;
+              b = b - bw;
+            } else if (boxSizing === "center-line") {
+              a = a - bw / 2;
+              b = b - bw / 2;
+            } else {
+              a = a - bw;
+              b = b - bw;
+            }
           }
-          if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
-            const ba = borderWidth2 / 2 + a;
-            const bb = borderWidth2 / 2 + b;
+          if (a >= 0 && b >= 0) {
+            const opacity = getOpacity(viewElem) * parentOpacity;
+            ctx.globalAlpha = opacity;
+            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(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+              ctx.closePath();
+              ctx.stroke();
+            }
             ctx.beginPath();
-            ctx.strokeStyle = borderColor2;
-            ctx.lineWidth = borderWidth2;
-            ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+            const fillStyle = createColorStyle(ctx, background2, {
+              viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
+              viewScaleInfo,
+              opacity: ctx.globalAlpha
+            });
+            ctx.fillStyle = fillStyle;
+            ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
             ctx.closePath();
-            ctx.stroke();
+            ctx.fill();
+            ctx.globalAlpha = parentOpacity;
           }
-          ctx.beginPath();
-          const fillStyle = createColorStyle(ctx, background2, {
-            viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
-            viewScaleInfo,
-            opacity: ctx.globalAlpha
-          });
-          ctx.fillStyle = fillStyle;
-          ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-          ctx.closePath();
-          ctx.fill();
-          ctx.globalAlpha = 1;
         }
       });
     });
   }
   function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    let { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -1937,6 +2147,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
             }
           });
@@ -1946,8 +2157,8 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -1959,13 +2170,13 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
               if (!content) {
                 opts.loader.load(elem, opts.elementAssets || {});
               }
               if (elem.type === "image" && content) {
-                const { opacity } = elem.detail;
-                ctx.globalAlpha = opacity ? opacity : 1;
+                ctx.globalAlpha = getOpacity(elem) * parentOpacity;
                 const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
                   viewScaleInfo,
                   viewSizeInfo
@@ -1982,7 +2193,7 @@ var __privateMethod = (obj, member, method) => {
                 ctx.fill();
                 ctx.clip();
                 ctx.drawImage(content, x3, y3, w3, h3);
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = parentOpacity;
                 ctx.restore();
               }
             }
@@ -1993,40 +2204,38 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "svg" && content) {
-        const { opacity } = elem.detail;
-        ctx.globalAlpha = opacity ? opacity : 1;
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         ctx.drawImage(content, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "html" && content) {
-        const { opacity } = elem.detail;
-        ctx.globalAlpha = opacity ? opacity : 1;
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         ctx.drawImage(content, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   const detailConfig = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBox(ctx, viewElem, {
@@ -2034,6 +2243,7 @@ var __privateMethod = (obj, member, method) => {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
           const fontSize2 = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
@@ -2128,8 +2338,8 @@ var __privateMethod = (obj, member, method) => {
   function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const scaleW = w2 / originW;
     const scaleH = h2 / originH;
     const viewOriginX = originX * scaleW;
@@ -2144,6 +2354,7 @@ var __privateMethod = (obj, member, method) => {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
@@ -2177,6 +2388,11 @@ var __privateMethod = (obj, member, method) => {
     if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
       return;
     }
+    const { w: w2, h: h2 } = elem;
+    const { scale } = opts.viewScaleInfo;
+    if (scale < 1 && (w2 * scale < 1 || h2 * scale < 1) || opts.parentOpacity === 0) {
+      return;
+    }
     try {
       switch (elem.type) {
         case "rect": {
@@ -2221,10 +2437,11 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      ctx.globalAlpha = getOpacity(elem) * parentOpacity;
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
@@ -2234,6 +2451,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
               const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
                 viewScaleInfo,
@@ -2268,44 +2486,74 @@ var __privateMethod = (obj, member, method) => {
                     x: newParentSize.x + child.x,
                     y: newParentSize.y + child.y
                   });
-                  if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                    continue;
+                  if (opts.forceDrawAll !== true) {
+                    if (!(calculator2 === null || calculator2 === void 0 ? void 0 : calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                      continue;
+                    }
                   }
                   try {
-                    drawElement(ctx, child, Object.assign({}, opts));
+                    drawElement(ctx, child, Object.assign(Object.assign({}, opts), { parentOpacity: parentOpacity * getOpacity(elem) }));
                   } catch (err) {
                     console.error(err);
                   }
                 }
               }
               if (elem.detail.overflow === "hidden") {
-                ctx.globalAlpha = 1;
                 ctx.restore();
               }
             }
           });
         }
       });
+      ctx.globalAlpha = parentOpacity;
     });
   }
   const defaultDetail = getDefaultElementDetailConfig();
   function drawElementList(ctx, data, opts) {
+    var _a;
     const { elements = [] } = data;
+    const { parentOpacity } = opts;
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       const elem = Object.assign(Object.assign({}, element), {
         detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
       });
-      if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
-        continue;
+      if (opts.forceDrawAll !== true) {
+        if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+          continue;
+        }
       }
       try {
-        drawElement(ctx, elem, opts);
+        drawElement(ctx, elem, Object.assign(Object.assign({}, opts), {
+          parentOpacity
+        }));
       } catch (err) {
         console.error(err);
       }
     }
   }
+  function drawUnderlay(ctx, underlay, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const elem = Object.assign({ uuid: "underlay" }, underlay);
+    const { x: x2, y: y2, w: w2, h: h2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const angle2 = 0;
+    const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    drawBoxShadow(ctx, viewElem, {
+      viewScaleInfo,
+      viewSizeInfo,
+      renderContent: () => {
+        drawBox(ctx, viewElem, {
+          originElem: elem,
+          calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+          viewScaleInfo,
+          viewSizeInfo,
+          parentOpacity,
+          renderContent: () => {
+          }
+        });
+      }
+    });
+  }
   var __awaiter = function(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
@@ -2333,6 +2581,23 @@ var __privateMethod = (obj, member, method) => {
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
+  var __classPrivateFieldGet$6 = 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) {
+    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 _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
   const supportElementTypes = ["image", "svg", "html"];
   const getAssetIdFromElement = (element) => {
     var _a, _b, _c;
@@ -2355,10 +2620,11 @@ var __privateMethod = (obj, member, method) => {
   class Loader extends EventEmitter {
     constructor() {
       super();
-      this._loadFuncMap = {};
-      this._currentLoadItemMap = {};
-      this._storageLoadItemMap = {};
-      this._registerLoadFunc("image", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      _Loader_instances.add(this);
+      _Loader_loadFuncMap.set(this, {});
+      _Loader_currentLoadItemMap.set(this, {});
+      _Loader_storageLoadItemMap.set(this, {});
+      __classPrivateFieldGet$6(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);
@@ -2368,12 +2634,12 @@ var __privateMethod = (obj, member, method) => {
           content
         };
       }));
-      this._registerLoadFunc("html", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "html", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _b;
         const html2 = ((_b = assets[elem.detail.html]) === null || _b === void 0 ? void 0 : _b.value) || elem.detail.html;
         const content = yield loadHTML(html2, {
-          width: elem.detail.width || elem.w,
-          height: elem.detail.height || elem.h
+          width: elem.detail.originW || elem.w,
+          height: elem.detail.originH || elem.h
         });
         return {
           uuid: elem.uuid,
@@ -2381,7 +2647,7 @@ var __privateMethod = (obj, member, method) => {
           content
         };
       }));
-      this._registerLoadFunc("svg", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "svg", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _c;
         const svg2 = ((_c = assets[elem.detail.svg]) === null || _c === void 0 ? void 0 : _c.value) || elem.detail.svg;
         const content = yield loadSVG(svg2);
@@ -2392,124 +2658,146 @@ var __privateMethod = (obj, member, method) => {
         };
       }));
     }
-    _registerLoadFunc(type, func) {
-      this._loadFuncMap[type] = func;
-    }
-    _getLoadElementSource(element) {
-      var _a, _b, _c;
-      let source = null;
-      if (element.type === "image") {
-        source = ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) || null;
-      } else if (element.type === "svg") {
-        source = ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) || null;
-      } else if (element.type === "html") {
-        source = ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) || null;
-      }
-      return source;
-    }
-    _createLoadItem(element) {
-      return {
-        element,
-        status: "null",
-        content: null,
-        error: null,
-        startTime: -1,
-        endTime: -1,
-        source: this._getLoadElementSource(element)
-      };
-    }
-    _emitLoad(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
-          this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-        }
-      } else {
-        this._storageLoadItemMap[assetId] = item;
-        this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-      }
-    }
-    _emitError(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
-          this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-        }
-      } else {
-        this._storageLoadItemMap[assetId] = item;
-        this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-      }
-    }
-    _loadResource(element, assets) {
-      const item = this._createLoadItem(element);
-      const assetId = getAssetIdFromElement(element);
-      this._currentLoadItemMap[assetId] = item;
-      const loadFunc = this._loadFuncMap[element.type];
-      if (typeof loadFunc === "function") {
-        item.startTime = Date.now();
-        loadFunc(element, assets).then((result) => {
-          item.content = result.content;
-          item.endTime = Date.now();
-          item.status = "load";
-          this._emitLoad(item);
-        }).catch((err) => {
-          console.warn(`Load element source "${item.source}" fail`, err, element);
-          item.endTime = Date.now();
-          item.status = "error";
-          item.error = err;
-          this._emitError(item);
-        });
-      }
-    }
-    _isExistingErrorStorage(element) {
-      var _a;
-      const assetId = getAssetIdFromElement(element);
-      const existItem = (_a = this._currentLoadItemMap) === null || _a === void 0 ? void 0 : _a[assetId];
-      if (existItem && existItem.status === "error" && existItem.source && existItem.source === this._getLoadElementSource(element)) {
-        return true;
-      }
-      return false;
+    destroy() {
+      __classPrivateFieldSet$6(this, _Loader_loadFuncMap, null, "f");
+      __classPrivateFieldSet$6(this, _Loader_currentLoadItemMap, null, "f");
+      __classPrivateFieldSet$6(this, _Loader_storageLoadItemMap, null, "f");
     }
     load(element, assets) {
-      if (this._isExistingErrorStorage(element)) {
+      if (__classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
         return;
       }
       if (supportElementTypes.includes(element.type)) {
-        this._loadResource(element, assets);
+        __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_loadResource).call(this, element, assets);
       }
     }
     getContent(element) {
       var _a, _b;
       const assetId = getAssetIdFromElement(element);
-      return ((_b = (_a = this._storageLoadItemMap) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
+      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;
+    }
+    getLoadItemMap() {
+      return __classPrivateFieldGet$6(this, _Loader_storageLoadItemMap, "f");
+    }
+    setLoadItemMap(itemMap) {
+      __classPrivateFieldSet$6(this, _Loader_storageLoadItemMap, itemMap, "f");
     }
   }
+  _Loader_loadFuncMap = /* @__PURE__ */ new WeakMap(), _Loader_currentLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_storageLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_instances = /* @__PURE__ */ new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc2(type, func) {
+    __classPrivateFieldGet$6(this, _Loader_loadFuncMap, "f")[type] = func;
+  }, _Loader_getLoadElementSource = function _Loader_getLoadElementSource2(element) {
+    var _a, _b, _c;
+    let source = null;
+    if (element.type === "image") {
+      source = ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) || null;
+    } else if (element.type === "svg") {
+      source = ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) || null;
+    } else if (element.type === "html") {
+      source = ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) || null;
+    }
+    return source;
+  }, _Loader_createLoadItem = function _Loader_createLoadItem2(element) {
+    return {
+      element,
+      status: "null",
+      content: null,
+      error: null,
+      startTime: -1,
+      endTime: -1,
+      source: __classPrivateFieldGet$6(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 (storageItem) {
+      if (storageItem.startTime < item.startTime) {
+        __classPrivateFieldGet$6(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;
+      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 (storageItem) {
+      if (storageItem.startTime < item.startTime) {
+        __classPrivateFieldGet$6(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;
+      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 assetId = getAssetIdFromElement(element);
+    __classPrivateFieldGet$6(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
+    const loadFunc = __classPrivateFieldGet$6(this, _Loader_loadFuncMap, "f")[element.type];
+    if (typeof loadFunc === "function") {
+      item.startTime = Date.now();
+      loadFunc(element, assets).then((result) => {
+        item.content = result.content;
+        item.endTime = Date.now();
+        item.status = "load";
+        __classPrivateFieldGet$6(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);
+      });
+    }
+  }, _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)) {
+      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_init;
   class Renderer extends EventEmitter {
     constructor(opts) {
       super();
-      this._loader = new Loader();
-      this._opts = opts;
-      this._init();
+      _Renderer_instances.add(this);
+      _Renderer_opts.set(this, void 0);
+      _Renderer_loader.set(this, new Loader());
+      __classPrivateFieldSet$5(this, _Renderer_opts, opts, "f");
+      __classPrivateFieldGet$5(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
-    _init() {
-      const { _loader: loader } = this;
-      loader.on("load", (e) => {
-        this.trigger("load", e);
-      });
-      loader.on("error", () => {
-      });
+    destroy() {
+      __classPrivateFieldSet$5(this, _Renderer_opts, null, "f");
+      __classPrivateFieldGet$5(this, _Renderer_loader, "f").destroy();
+      __classPrivateFieldSet$5(this, _Renderer_loader, null, "f");
     }
     updateOptions(opts) {
-      this._opts = opts;
+      __classPrivateFieldSet$5(this, _Renderer_opts, opts, "f");
     }
     drawData(data, opts) {
-      const { _loader: loader } = this;
-      const { calculator } = this._opts;
-      const { viewContext } = this._opts.viewContent;
+      const loader = __classPrivateFieldGet$5(this, _Renderer_loader, "f");
+      const { calculator } = __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,
@@ -2517,15 +2805,27 @@ var __privateMethod = (obj, member, method) => {
         w: opts.viewSizeInfo.width,
         h: opts.viewSizeInfo.height
       };
+      if (data.underlay) {
+        drawUnderlay(viewContext, data.underlay, Object.assign({
+          loader,
+          calculator,
+          parentElementSize,
+          parentOpacity: 1
+        }, opts));
+      }
       drawElementList(viewContext, data, Object.assign({
         loader,
         calculator,
         parentElementSize,
-        elementAssets: data.assets
+        elementAssets: data.assets,
+        parentOpacity: 1
       }, opts));
     }
     scale(num) {
-      const { sharer } = this._opts;
+      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, {
@@ -2546,10 +2846,48 @@ var __privateMethod = (obj, member, method) => {
         });
       }
     }
+    setLoadItemMap(itemMap) {
+      __classPrivateFieldGet$5(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+      return __classPrivateFieldGet$5(this, _Renderer_loader, "f").getLoadItemMap();
+    }
+    getLoader() {
+      return __classPrivateFieldGet$5(this, _Renderer_loader, "f");
+    }
   }
+  _Renderer_opts = /* @__PURE__ */ new WeakMap(), _Renderer_loader = /* @__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", () => {
+    });
+  };
+  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$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);
+  };
+  var _Calculator_opts;
   class Calculator {
     constructor(opts) {
-      this._opts = opts;
+      _Calculator_opts.set(this, void 0);
+      __classPrivateFieldSet$4(this, _Calculator_opts, opts, "f");
+    }
+    destroy() {
+      __classPrivateFieldSet$4(this, _Calculator_opts, null, "f");
     }
     elementSize(size, viewScaleInfo, viewSizeInfo) {
       return calcViewElementSize(size, { viewScaleInfo, viewSizeInfo });
@@ -2558,7 +2896,7 @@ var __privateMethod = (obj, member, method) => {
       return isElementInView(elem, { viewScaleInfo, viewSizeInfo });
     }
     isPointInElement(p, elem, viewScaleInfo, viewSizeInfo) {
-      const context2d = this._opts.viewContent.boardContext;
+      const context2d = __classPrivateFieldGet$4(this, _Calculator_opts, "f").viewContext;
       return isViewPointInElement(p, {
         context2d,
         element: elem,
@@ -2567,151 +2905,206 @@ var __privateMethod = (obj, member, method) => {
       });
     }
     getPointElement(p, opts) {
-      const context2d = this._opts.viewContent.boardContext;
+      const context2d = __classPrivateFieldGet$4(this, _Calculator_opts, "f").viewContext;
       return getViewPointAtElement(p, Object.assign(Object.assign({}, opts), { context2d }));
     }
   }
+  _Calculator_opts = /* @__PURE__ */ new WeakMap();
+  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$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);
+  };
+  var _BoardWatcher_instances, _BoardWatcher_opts, _BoardWatcher_store, _BoardWatcher_init, _BoardWatcher_onWheel, _BoardWatcher_onContextMenu, _BoardWatcher_onClick, _BoardWatcher_onPointLeave, _BoardWatcher_onPointEnd, _BoardWatcher_onPointMove, _BoardWatcher_onPointStart, _BoardWatcher_onHover, _BoardWatcher_isInTarget, _BoardWatcher_getPoint, _BoardWatcher_isVaildPoint;
   function isBoardAvailableNum(num) {
     return num > 0 || num < 0 || num === 0;
   }
   class BoardWatcher extends EventEmitter {
     constructor(opts) {
       super();
-      const store = new Store({ defaultStorage: { hasPointDown: false, prevClickPoint: null } });
-      this._store = store;
-      this._opts = opts;
-      this._init();
-    }
-    _init() {
-      const container = window;
-      container.addEventListener("mousemove", (e) => {
-        if (!this._isInTarget(e)) {
+      _BoardWatcher_instances.add(this);
+      _BoardWatcher_opts.set(this, void 0);
+      _BoardWatcher_store.set(this, void 0);
+      _BoardWatcher_onWheel.set(this, (e) => {
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
-        e.preventDefault();
-        const point = this._getPoint(e);
-        if (!this._isVaildPoint(point)) {
+        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)) {
           return;
         }
-        this.trigger("hover", { point });
+        e.preventDefault();
+        e.stopPropagation();
+        const deltaX = e.deltaX > 0 || e.deltaX < 0 ? e.deltaX : 0;
+        const deltaY = e.deltaY > 0 || e.deltaY < 0 ? e.deltaY : 0;
+        if (e.ctrlKey === true && this.has("wheelScale")) {
+          this.trigger("wheelScale", { deltaX, deltaY, point });
+        } else if (this.has("wheel")) {
+          this.trigger("wheel", { deltaX, deltaY, point });
+        }
       });
-      container.addEventListener("mousedown", (e) => {
-        if (!this._isInTarget(e)) {
+      _BoardWatcher_onContextMenu.set(this, (e) => {
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = this._getPoint(e);
-        if (!this._isVaildPoint(point)) {
+        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)) {
           return;
         }
-        this._store.set("hasPointDown", true);
-        this.trigger("pointStart", { point });
       });
-      container.addEventListener("mousemove", (e) => {
-        if (!this._isInTarget(e)) {
+      _BoardWatcher_onClick.set(this, (e) => {
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
         e.preventDefault();
-        e.stopPropagation();
-        const point = this._getPoint(e);
-        if (!this._isVaildPoint(point)) {
-          if (this._store.get("hasPointDown")) {
-            this.trigger("pointLeave", { point });
-            this._store.set("hasPointDown", false);
-          }
+        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)) {
           return;
         }
-        if (this._store.get("hasPointDown") !== true) {
-          return;
+        const maxLimitTime = 500;
+        const t = Date.now();
+        const preClickPoint = __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").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);
         }
-        this.trigger("pointMove", { point });
       });
-      container.addEventListener("mouseup", (e) => {
-        this._store.set("hasPointDown", false);
-        if (!this._isInTarget(e)) {
+      _BoardWatcher_onPointLeave.set(this, (e) => {
+        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", false);
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = this._getPoint(e);
-        this.trigger("pointEnd", { point });
+        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
+        this.trigger("pointLeave", { point });
       });
-      container.addEventListener("mouseleave", (e) => {
-        this._store.set("hasPointDown", false);
-        if (!this._isInTarget(e)) {
+      _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)) {
           return;
         }
         e.preventDefault();
-        const point = this._getPoint(e);
-        this.trigger("pointLeave", { point });
+        const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
+        this.trigger("pointEnd", { point });
       });
-      container.addEventListener("wheel", (e) => {
-        if (!this._isInTarget(e)) {
+      _BoardWatcher_onPointMove.set(this, (e) => {
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
-        const point = this._getPoint(e);
-        if (!this._isVaildPoint(point)) {
+        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")) {
+            this.trigger("pointLeave", { point });
+            __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", false);
+          }
           return;
         }
-        e.preventDefault();
-        const deltaX = e.deltaX > 0 || e.deltaX < 0 ? e.deltaX : 0;
-        const deltaY = e.deltaY > 0 || e.deltaY < 0 ? e.deltaY : 0;
-        if (e.ctrlKey === true && this.has("wheelScale")) {
-          this.trigger("wheelScale", { deltaX, deltaY, point });
-        } else if (this.has("wheel")) {
-          this.trigger("wheel", { deltaX, deltaY, point });
+        if (__classPrivateFieldGet$3(this, _BoardWatcher_store, "f").get("hasPointDown") !== true) {
+          return;
         }
-      }, { passive: false });
-      container.addEventListener("click", (e) => {
-        if (!this._isInTarget(e)) {
+        this.trigger("pointMove", { point });
+      });
+      _BoardWatcher_onPointStart.set(this, (e) => {
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = this._getPoint(e);
-        if (!this._isVaildPoint(point)) {
+        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)) {
           return;
         }
-        const maxLimitTime = 500;
-        const t = Date.now();
-        const preClickPoint = 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 {
-          this._store.set("prevClickPoint", point);
-        }
+        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("hasPointDown", true);
+        this.trigger("pointStart", { point });
       });
-      container.addEventListener("contextmenu", (e) => {
-        if (!this._isInTarget(e)) {
+      _BoardWatcher_onHover.set(this, (e) => {
+        if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
         e.preventDefault();
-        const point = this._getPoint(e);
-        if (!this._isVaildPoint(point)) {
+        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)) {
           return;
         }
+        this.trigger("hover", { point });
       });
+      const store = new Store({ defaultStorage: { hasPointDown: false, prevClickPoint: null } });
+      __classPrivateFieldSet$3(this, _BoardWatcher_store, store, "f");
+      __classPrivateFieldSet$3(this, _BoardWatcher_opts, opts, "f");
+      __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_init).call(this);
     }
-    _isInTarget(e) {
-      return e.target === this._opts.viewContent.boardContext.canvas;
-    }
-    _getPoint(e) {
-      const boardCanvas = this._opts.viewContent.boardContext.canvas;
-      const rect = boardCanvas.getBoundingClientRect();
-      const p = {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top,
-        t: Date.now()
-      };
-      return p;
-    }
-    _isVaildPoint(p) {
-      const viewSize = 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;
+    destroy() {
+      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"));
+    }
+  }
+  _BoardWatcher_opts = /* @__PURE__ */ new WeakMap(), _BoardWatcher_store = /* @__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() {
+    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("mouseleave", __classPrivateFieldGet$3(this, _BoardWatcher_onPointLeave, "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"));
+  }, _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;
+    const rect = boardCanvas.getBoundingClientRect();
+    const p = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+      t: Date.now()
+    };
+    return p;
+  }, _BoardWatcher_isVaildPoint = function _BoardWatcher_isVaildPoint2(p) {
+    const viewSize = __classPrivateFieldGet$3(this, _BoardWatcher_opts, "f").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,
@@ -2727,139 +3120,113 @@ var __privateMethod = (obj, member, method) => {
   };
   class Sharer {
     constructor() {
+      _Sharer_activeStore.set(this, void 0);
+      _Sharer_sharedStore.set(this, void 0);
       const activeStore = new Store({
         defaultStorage: defaultActiveStorage
       });
       const sharedStore = new Store({
         defaultStorage: {}
       });
-      this._activeStore = activeStore;
-      this._sharedStore = sharedStore;
+      __classPrivateFieldSet$2(this, _Sharer_activeStore, activeStore, "f");
+      __classPrivateFieldSet$2(this, _Sharer_sharedStore, sharedStore, "f");
     }
     getActiveStorage(key2) {
-      return this._activeStore.get(key2);
+      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get(key2);
     }
     setActiveStorage(key2, storage) {
-      return this._activeStore.set(key2, storage);
+      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set(key2, storage);
     }
     getActiveStoreSnapshot() {
-      return this._activeStore.getSnapshot();
+      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").getSnapshot();
     }
     getSharedStorage(key2) {
-      return this._sharedStore.get(key2);
+      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").get(key2);
     }
     setSharedStorage(key2, storage) {
-      return this._sharedStore.set(key2, storage);
+      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").set(key2, storage);
     }
     getSharedStoreSnapshot() {
-      return this._sharedStore.getSnapshot();
+      return __classPrivateFieldGet$2(this, _Sharer_sharedStore, "f").getSnapshot();
     }
     getActiveViewScaleInfo() {
       const viewScaleInfo = {
-        scale: this._activeStore.get("scale"),
-        offsetTop: this._activeStore.get("offsetTop"),
-        offsetBottom: this._activeStore.get("offsetBottom"),
-        offsetLeft: this._activeStore.get("offsetLeft"),
-        offsetRight: this._activeStore.get("offsetRight")
+        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")
       };
       return viewScaleInfo;
     }
     setActiveViewScaleInfo(viewScaleInfo) {
       const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
-      this._activeStore.set("scale", scale);
-      this._activeStore.set("offsetTop", offsetTop);
-      this._activeStore.set("offsetBottom", offsetBottom);
-      this._activeStore.set("offsetLeft", offsetLeft);
-      this._activeStore.set("offsetRight", offsetRight);
+      __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);
     }
     setActiveViewSizeInfo(size) {
-      this._activeStore.set("width", size.width);
-      this._activeStore.set("height", size.height);
-      this._activeStore.set("devicePixelRatio", size.devicePixelRatio);
-      this._activeStore.set("contextWidth", size.contextWidth);
-      this._activeStore.set("contextHeight", size.contextHeight);
+      __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);
     }
     getActiveViewSizeInfo() {
       const sizeInfo = {
-        width: this._activeStore.get("width"),
-        height: this._activeStore.get("height"),
-        devicePixelRatio: this._activeStore.get("devicePixelRatio"),
-        contextWidth: this._activeStore.get("contextWidth"),
-        contextHeight: this._activeStore.get("contextHeight")
+        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")
       };
       return sizeInfo;
     }
   }
+  _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;
   const { requestAnimationFrame } = window;
   class Viewer extends EventEmitter {
     constructor(opts) {
       super();
-      this._drawFrameSnapshotQueue = [];
-      this._drawFrameStatus = "FREE";
-      this._opts = opts;
-      this._init();
-    }
-    _init() {
-      const { renderer } = this._opts;
-      renderer.on("load", () => {
-        this.drawFrame();
-      });
-    }
-    _drawAnimationFrame() {
-      if (this._drawFrameStatus === "DRAWING" || this._drawFrameSnapshotQueue.length === 0) {
-        return;
-      } else {
-        this._drawFrameStatus = "DRAWING";
-      }
-      const snapshot = this._drawFrameSnapshotQueue.shift();
-      const { renderer, viewContent, beforeDrawFrame, afterDrawFrame } = this._opts;
-      if (snapshot) {
-        const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
-        if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
-          renderer.drawData(snapshot.activeStore.data, {
-            viewScaleInfo: {
-              scale,
-              offsetTop,
-              offsetBottom,
-              offsetLeft,
-              offsetRight
-            },
-            viewSizeInfo: {
-              width,
-              height,
-              contextHeight,
-              contextWidth,
-              devicePixelRatio
-            }
-          });
-        }
-        beforeDrawFrame({ snapshot });
-        viewContent.drawView();
-        afterDrawFrame({ snapshot });
-      }
-      if (this._drawFrameSnapshotQueue.length === 0) {
-        this._drawFrameStatus = "COMPLETE";
-        return;
-      }
-      if (this._drawFrameStatus = "DRAWING") {
-        requestAnimationFrame(() => {
-          this._drawAnimationFrame();
-        });
-      }
+      _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);
     }
     drawFrame() {
-      const { sharer } = this._opts;
+      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const activeStore = sharer.getActiveStoreSnapshot();
       const sharedStore = sharer.getSharedStoreSnapshot();
-      this._drawFrameSnapshotQueue.push({
+      __classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").push({
         activeStore,
         sharedStore
       });
-      this._drawAnimationFrame();
+      __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame).call(this);
     }
     scale(opts) {
       const { scale, point } = opts;
-      const { sharer } = this._opts;
+      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const { moveX, moveY } = viewScale({
         scale,
         point,
@@ -2870,7 +3237,7 @@ var __privateMethod = (obj, member, method) => {
       return { moveX, moveY };
     }
     scroll(opts) {
-      const { sharer } = this._opts;
+      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const prevViewScaleInfo = sharer.getActiveViewScaleInfo();
       const { moveX, moveY } = opts;
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
@@ -2884,7 +3251,7 @@ var __privateMethod = (obj, member, method) => {
       return viewScaleInfo;
     }
     updateViewScaleInfo(opts) {
-      const { sharer } = this._opts;
+      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const viewScaleInfo = calcViewScaleInfo(opts, {
         viewSizeInfo: sharer.getActiveViewSizeInfo()
       });
@@ -2892,11 +3259,11 @@ var __privateMethod = (obj, member, method) => {
       return viewScaleInfo;
     }
     resize(viewSize = {}) {
-      const { sharer } = this._opts;
+      const { sharer } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
       const originViewSize = sharer.getActiveViewSizeInfo();
       const newViewSize = Object.assign(Object.assign({}, originViewSize), viewSize);
       const { width, height, devicePixelRatio } = newViewSize;
-      const { underContext, boardContext, helperContext, viewContext } = this._opts.viewContent;
+      const { underContext, boardContext, helperContext, viewContext } = __classPrivateFieldGet$1(this, _Viewer_opts, "f").boardContent;
       boardContext.canvas.width = width * devicePixelRatio;
       boardContext.canvas.height = height * devicePixelRatio;
       boardContext.canvas.style.width = `${width}px`;
@@ -2911,283 +3278,383 @@ var __privateMethod = (obj, member, method) => {
       return newViewSize;
     }
   }
-  const throttleTime = 10;
-  const LOCK_MODES = ["RULER"];
-  class Board {
-    constructor(opts) {
-      this._middlewares = [];
-      this._middlewareObjs = [];
-      this._activeMiddlewareObjs = [];
-      this._eventHub = new EventEmitter();
-      this._activeMode = "SELECT";
-      const { viewContent } = opts;
-      const sharer = new Sharer();
-      const calculator = new Calculator({ viewContent });
-      const watcher = new BoardWatcher({
-        viewContent,
-        sharer
-      });
-      const renderer = new Renderer({
-        viewContent,
-        sharer,
-        calculator
-      });
-      this._opts = opts;
-      this._sharer = sharer;
-      this._watcher = watcher;
-      this._calculator = calculator;
-      this._viewer = new Viewer({
-        viewContent: opts.viewContent,
-        sharer,
-        renderer,
-        calculator,
-        beforeDrawFrame: (e) => {
-          this._handleBeforeDrawFrame(e);
-        },
-        afterDrawFrame: (e) => {
-          this._handleAfterDrawFrame(e);
-        }
-      });
-      this._init();
-      this._resetActiveMiddlewareObjs();
-    }
-    _init() {
-      this._watcher.on("pointStart", this._handlePointStart.bind(this));
-      this._watcher.on("pointEnd", this._handlePointEnd.bind(this));
-      this._watcher.on("pointMove", throttle((e) => {
-        this._handlePointMove(e);
-      }, throttleTime));
-      this._watcher.on("hover", throttle((e) => {
-        this._handleHover(e);
-      }, throttleTime));
-      this._watcher.on("wheel", throttle((e) => {
-        this._handleWheel(e);
-      }, throttleTime));
-      this._watcher.on("wheelScale", throttle((e) => {
-        this._handleWheelScale(e);
-      }, throttleTime));
-      this._watcher.on("scrollX", this._handleScrollX.bind(this));
-      this._watcher.on("scrollY", this._handleScrollY.bind(this));
-      this._watcher.on("resize", this._handleResize.bind(this));
-      this._watcher.on("doubleClick", this._handleDoubleClick.bind(this));
-    }
-    _handlePointStart(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointStart) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handlePointEnd(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointEnd) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handlePointMove(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointMove) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleHover(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.hover) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleDoubleClick(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.doubleClick) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleWheel(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheel) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleWheelScale(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheelScale) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleScrollX(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.scrollX) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleScrollY(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.scrollY) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleResize(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.resize) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
+  _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");
+    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) {
+      return;
+    } else {
+      __classPrivateFieldSet$1(this, _Viewer_drawFrameStatus, "DRAWING", "f");
     }
-    _handleClear(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.clear) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
+    const snapshot = __classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").shift();
+    const { renderer, boardContent, beforeDrawFrame, afterDrawFrame } = __classPrivateFieldGet$1(this, _Viewer_opts, "f");
+    if (snapshot) {
+      const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
+      const viewScaleInfo = {
+        scale,
+        offsetTop,
+        offsetBottom,
+        offsetLeft,
+        offsetRight
+      };
+      const viewSizeInfo = {
+        width,
+        height,
+        contextHeight,
+        contextWidth,
+        devicePixelRatio
+      };
+      if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
+        renderer.drawData(snapshot.activeStore.data, {
+          viewScaleInfo,
+          viewSizeInfo
+        });
       }
+      beforeDrawFrame({ snapshot });
+      boardContent.drawView();
+      afterDrawFrame({ snapshot });
     }
-    _handleBeforeDrawFrame(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.beforeDrawFrame) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
+    if (__classPrivateFieldGet$1(this, _Viewer_drawFrameSnapshotQueue, "f").length === 0) {
+      __classPrivateFieldSet$1(this, _Viewer_drawFrameStatus, "COMPLETE", "f");
+      return;
     }
-    _handleAfterDrawFrame(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.afterDrawFrame) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
+    if (__classPrivateFieldSet$1(this, _Viewer_drawFrameStatus, "DRAWING", "f")) {
+      requestAnimationFrame(() => {
+        __classPrivateFieldGet$1(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame2).call(this);
+      });
     }
-    _resetActiveMiddlewareObjs() {
-      const { _activeMode: activeMode } = this;
-      const modes = [...LOCK_MODES, activeMode];
-      const activeMiddlewareObjs = [];
-      this._middlewareObjs.forEach((m) => {
-        if (m.isDefault === true) {
-          activeMiddlewareObjs.push(m);
-        } else if (modes.includes(m.mode)) {
-          activeMiddlewareObjs.push(m);
-        }
+  };
+  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_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handleHover, _Board_handleDoubleClick, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
+  const throttleTime = 10;
+  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());
+      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
       });
-      this._activeMiddlewareObjs = activeMiddlewareObjs;
+      __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({
+        boardContent: opts.boardContent,
+        sharer,
+        renderer,
+        calculator: __classPrivateFieldGet(this, _Board_calculator, "f"),
+        beforeDrawFrame: (e) => {
+          __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleBeforeDrawFrame).call(this, e);
+        },
+        afterDrawFrame: (e) => {
+          __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleAfterDrawFrame).call(this, e);
+        }
+      }), "f");
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_init).call(this);
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
+    }
+    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();
     }
     getSharer() {
-      return this._sharer;
+      return __classPrivateFieldGet(this, _Board_sharer, "f");
     }
     getViewer() {
-      return this._viewer;
+      return __classPrivateFieldGet(this, _Board_viewer, "f");
+    }
+    getRenderer() {
+      return __classPrivateFieldGet(this, _Board_renderer, "f");
     }
     setData(data) {
-      const sharer = this._sharer;
-      this._sharer.setActiveStorage("data", data);
+      const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
+      __classPrivateFieldGet(this, _Board_sharer, "f").setActiveStorage("data", data);
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
       const newViewContextSize = calcElementsContextSize(data.elements, {
         viewWidth: viewSizeInfo.width,
         viewHeight: viewSizeInfo.height,
         extend: true
       });
-      this._viewer.drawFrame();
+      __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
       const newViewSizeInfo = Object.assign(Object.assign({}, viewSizeInfo), newViewContextSize);
-      this._sharer.setActiveViewSizeInfo(newViewSizeInfo);
+      __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSizeInfo);
       return { viewSizeInfo: newViewSizeInfo };
     }
     getData() {
-      const { data } = this._sharer.getActiveStoreSnapshot();
+      const { data } = __classPrivateFieldGet(this, _Board_sharer, "f").getActiveStoreSnapshot();
       return data;
     }
     use(middleware) {
-      const { viewContent, container } = this._opts;
-      const { _sharer: sharer, _viewer: viewer, _calculator: calculator, _eventHub: eventHub } = this;
-      const obj = middleware({ viewContent, sharer, viewer, calculator, eventHub, container });
-      this._middlewares.push(middleware);
-      this._activeMiddlewareObjs.push(obj);
+      var _a, _b, _c;
+      if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
+        const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+        if (item) {
+          (_b = (_a = item.middlewareObject).use) === null || _b === void 0 ? 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);
+          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 });
+      (_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, {
+        status: "enable",
+        middlewareObject: obj
+      });
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
+    }
+    disuse(middleware) {
+      var _a, _b;
+      const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+      if (item) {
+        (_b = (_a = item.middlewareObject).disuse) === null || _b === void 0 ? 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);
+      }
     }
     scale(opts) {
-      const { _viewer: viewer } = this;
+      const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
       const { moveX, moveY } = viewer.scale(opts);
       viewer.scroll({ moveX, moveY });
     }
     scroll(opts) {
-      return this._viewer.scroll(opts);
+      return __classPrivateFieldGet(this, _Board_viewer, "f").scroll(opts);
     }
     updateViewScaleInfo(opts) {
-      return this._viewer.updateViewScaleInfo(opts);
+      return __classPrivateFieldGet(this, _Board_viewer, "f").updateViewScaleInfo(opts);
     }
     resize(newViewSize) {
-      const viewSize = this._viewer.resize(newViewSize);
+      const viewSize = __classPrivateFieldGet(this, _Board_viewer, "f").resize(newViewSize);
       const { width, height, devicePixelRatio } = newViewSize;
-      const { viewContent } = this._opts;
-      viewContent.viewContext.$resize({ width, height, devicePixelRatio });
-      viewContent.helperContext.$resize({ width, height, devicePixelRatio });
-      viewContent.boardContext.$resize({ width, height, devicePixelRatio });
-      this._viewer.drawFrame();
-      this._watcher.trigger("resize", viewSize);
-      this._sharer.setActiveViewSizeInfo(newViewSize);
+      const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
+      boardContent.viewContext.$resize({ width, height, devicePixelRatio });
+      boardContent.helperContext.$resize({ width, height, devicePixelRatio });
+      boardContent.boardContext.$resize({ width, height, devicePixelRatio });
+      boardContent.underContext.$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);
     }
     clear() {
-      const { viewContent } = this._opts;
-      const { underContext, helperContext, viewContext, boardContext } = viewContent;
+      const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
+      const { underContext, helperContext, viewContext, boardContext } = boardContent;
       underContext.clearRect(0, 0, underContext.canvas.width, underContext.canvas.height);
       helperContext.clearRect(0, 0, helperContext.canvas.width, helperContext.canvas.height);
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       boardContext.clearRect(0, 0, boardContext.canvas.width, boardContext.canvas.height);
-      this._handleClear();
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleClear).call(this);
     }
     getEventHub() {
-      return this._eventHub;
+      return __classPrivateFieldGet(this, _Board_eventHub, "f");
+    }
+  }
+  _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_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", throttle((e) => {
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).call(this, e);
+    }, throttleTime));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("hover", throttle((e) => {
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).call(this, e);
+    }, throttleTime));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheel", throttle((e) => {
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).call(this, e);
+    }, throttleTime));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheelScale", throttle((e) => {
+      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).call(this, e);
+    }, throttleTime));
+    __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));
+  }, _Board_handlePointStart = function _Board_handlePointStart2(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);
+      if (result === false) {
+        return;
+      }
     }
-  }
+  }, _Board_handlePointEnd = function _Board_handlePointEnd2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handlePointMove = function _Board_handlePointMove2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleHover = function _Board_handleHover2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleDoubleClick = function _Board_handleDoubleClick2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleWheel = function _Board_handleWheel2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleWheelScale = function _Board_handleWheelScale2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleScrollX = function _Board_handleScrollX2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleScrollY = function _Board_handleScrollY2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleResize = function _Board_handleResize2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleClear = function _Board_handleClear2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleBeforeDrawFrame = function _Board_handleBeforeDrawFrame2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_handleAfterDrawFrame = function _Board_handleAfterDrawFrame2(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);
+      if (result === false) {
+        return;
+      }
+    }
+  }, _Board_resetActiveMiddlewareObjs = function _Board_resetActiveMiddlewareObjs2() {
+    const activeMiddlewareObjs = [];
+    const middlewareMap = __classPrivateFieldGet(this, _Board_middlewareMap, "f");
+    __classPrivateFieldGet(this, _Board_middlewares, "f").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)) {
+        activeMiddlewareObjs.push(item.middlewareObject);
+      }
+    });
+    __classPrivateFieldSet(this, _Board_activeMiddlewareObjs, activeMiddlewareObjs, "f");
+  };
   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==";
+  const CURSOR_DRAG_DEFAULT = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAApCAYAAABHomvIAAAEvUlEQVRYhc2Y20/cVRDHP8v+uKzAWkpDCtZq8BYhJkq8PBoJxgj7I2m0ryaSyFN9IT74pI8+8WJiggRj/APApFkSTGRJ+qKGUiyxbGPEWsUSuVhYC12Wy8+HmeMeYPe3d3WSye/k/M7le+bMzJkZ+J9ToEJreGVYN+vihcytstjQocUlAw0WCSoIVCv3Ae8CXwIt+u8XHVeOG8qLqgAHqAFCQCNwGugCthBJGd7S/tM6LqTzHI5KuqzgaoAHgEvAtwrkG2AG8FzXvep5nue67lX9N6P/PR1/SefXlBtkFXKNDUA/RyX1D9uUbYzOb9D1ygbSQU7eDMxhSSsSiVz3AxiJRK57nuf19/fPad8coqONFCBJPyUOIKc1OvcbgiY9ICDT8+0DHge2gR0gBeyTtviM5HeKAGlrrfMZVwhdAVaAr4F3KNF4gkA9cBbowOc68+3LwDn1Mhdy4/OcYk54nPr6+m54nofruvPa9SFQ6wfQTweNgTwInAGuQWk6mEUvHwb+Au4Dexx7ffK9+0q+CHWIBIOZ9skHYKWfK9tQ8gZoLDjIyWCg3ORY+2T8aYOyg4EaRIFrkCs4QU1NTSvabC20zyIDzuyfkYzEahHX8jHwE/LwXwHeJ4P7KIVIu5ouxFDC+HgLAy4MfEF2v1UpgOezATSiNVf6EvAWsD01NXVtdnb2bk9Pz81sp/q3KIi8t83Ae4DX0tJy0z7t8PDwD4FAYIX/WILVwKMAzc3Nu/agoaGhzmg0ugcsV0hIvlSNoH8IuIiebHJycrls4sotwaxGYvueAPAjEg3jum79yMjIr5WUjFLOxMpBIopWoBN4GfhOJ+4NDg4ulVt6i4uLm7r+BvAscA4fCXrAAfJQJ5Fg8gPgMuCMjo62d3V1LW1sbKRKlpXSxMTEmjZ/5qQrOwHwUAGmkIjiHhJdfKrM/Pz8Y+3t7RvT09Ob5QAYi8X2tbmke2cEZwAaCdoAt5QvIzEbiUSitbe3tyoej++UCnBhYSGkzdu6d1aQxkgOkfwgieQMCeCu8iwSnpNKpcIdHR3BZDJ5UCy4SCSyvL6+/giiSou67wE+eYmhAKKkIaAJUdynkdflNcQF3dFTpooxjmg0aozDAz4DXkB8bxPy1OYM7QzIOuAU0AY8pQu9CrwJ3AK8UCj0RyHgZmZmli1w3wOvAM/oHo1kiZiygbSDh7PAE8DzQA/wBqKnnuM4a2NjY7dygbtw4cICRy31deBFJA09o7eWsU7kJ1KTLJmyRyOSn5zS70fAkwBtbW2/DwwMHHR3d9d3dnY2rK6u7o2Pj2/GYrH9eDzurK2tndM1vwI+QXT7T2BTD5skQz6SCyAcLRoZkGEFGQbeRqpbubK+BPA5MI14h00L3I6Cy2h4+eQbJsKuRa6iQcGFFfB5oBt4DpFsI+Ky7iDBxW3gBhBH/GtC+R7i1lKk3UxRAG2QpvxWr0AbtB3SA5jkx36djH/dVlDbyibN3M8GDvJPyI2PSulixm/u6kZ1OQCaJ/S+tndJX6tvsFBIxcCUdA3vW5ubxMrObc0hDMhd/Rqp5QQHxeW8dubnHGM7tzVv/IECMlxQ/bpcRfRMqaNRheNcUGG9XFWDACfzWs/6Fl3t/xtO//8gpbCORQAAAABJRU5ErkJggg==`;
+  const CURSOR_DRAG_ACTIVE = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAER0lEQVRYhe2YT2hjRRjAf8lL22xsNsm6EWKrSKvuIkIh+O9QRFxEW18KUsoe7FHoRaWCN1FPetOrIHgVKS0q9P5OxaJbodkalgVrtVZjS7Ntd02z6abPw3yzmaT585q+elj2g2HmvZn35jffN/PNNwP35R6XgM/fuif4n+dO2klQvgsaZRc4NJJvoJbHdhrIAkJAN2ADHwFfAw9J3ZoB/b9I0AA6A0SBc0Aa2EVpSqddeZ+QdmfkO+u0gIPSQQR4HfhRQH4AHMDNZDJXXNd1M5nMFalzdB3wJTAOPAD0yEB9066G6wXepVZTd5MpTdporZ6jVqsatmMJoTR3HvgJQ1u2bS+3ArRte9l1XXdsbGyJo1pdBN6Wf3d3ChlAmSQO9LeC8fquQRpDWaerHWSjSr1iu4BkJyOsF9u2s67rkslkluTVxygltAVsJBZqdCngEj5osIlW+4EYytRNF04jeu3vulCT+7QkLH20dEOhumft97pQI4s3+iiRSPwtxVSbd39J8eEGvzFXc1NAs8KSFAZeBt4AHgNeBFDWObkEAne7HAK2gT2gCFQatdca1GbtBj4E3veFprVYVLXXcg4GqM6588BbAMlkcm1qamqzr6/v6ikBet5RgiizJoDPAXdgYGDZXHkzMzPrrk9CdRWngUeAsxxdCzVwpgZ/BigWiz1mo4mJif7jqMajeJrU5hywgGvAej6fvzA0NLThN1Eul9uT4g5VTbYFNKUIfAbsZ7PZvuHh4Wt+As7Ozu5IcY2j219TQB0NV4A7qODgO4CFhYWLg4ODOb8AHccpG4A68m6pRQ1YAQ6A28A+8BXwBcDq6upTqVTquh+AuVyuW4q/opRRaQdZD1gCbgE3ge+BT4HdfD7/ZDwe/z2bzRY6hRsfH1/e3Nx8FDX/sgbgoZfvg6jo4ixqW7oIPA+8CrwHrAJuJBLJd+JaHMf5k6qmPgGeQe1SCenXk0/U21xcIC8AzwGvAJPAEuAmEon1xcXFba9w8/Pz5oqdB14CnpY+oij35km0qwmjwqAU8ISM9hIwBeQA17KsG9PT07+1gxsZGdmgdqW+BjwLDAAPoo4ALU+W9arVwWoIpXp9kouKZpPAO8AwQCwW+2d0dLQ0OTkZSafT0UKhUJ6bm9t2HKeysrIS3tra0g7+KvABUJC0g5rrJdRcbLpImtleRzYashc1P2OSXwbebDVykX3gW+Ab1AHqhuQ3pe6AJlFMO0CoPROHDcio5I8DL1A9C8dQbmod+APYAK4DvwjQnsDdErgyVTfTEaCG1GFYGHXG7TVSo2OkdvhlAflXoHSuNdfStFqaRhEi2kfdprrj6M5LAt0I8EDaaMdflPal48CB95hMr3Bt8h4jD0kyL5E0pN6dysZzW7N2AqjbmhdIZjJvufTOpE19x3g+9s1XJ/ck5tVbfdhu+rxDfLiSO+lFToCjZwrXyH2/0Lwv95z8B1jAqXmDnj4YAAAAAElFTkSuQmCC`;
   class Cursor {
     constructor(container, opts) {
       this._cursorType = null;
       this._resizeCursorBaseImage = null;
       this._cursorImageMap = {
         auto: CURSOR,
+        "drag-default": CURSOR_DRAG_DEFAULT,
+        "drag-active": CURSOR_DRAG_ACTIVE,
         "rotate-0": CURSOR_RESIZE
       };
       this._container = container;
@@ -3204,6 +3671,10 @@ var __privateMethod = (obj, member, method) => {
           this._resetCursor("auto");
         } else if (typeof e.type === "string" && ((_a = e.type) == null ? void 0 : _a.startsWith("resize-"))) {
           this._setCursorResize(e);
+        } else if (e.type === "drag-default") {
+          this._resetCursor("drag-default");
+        } else if (e.type === "drag-active") {
+          this._resetCursor("drag-active");
         } else {
           this._resetCursor("auto");
         }
@@ -3290,22 +3761,23 @@ var __privateMethod = (obj, member, method) => {
       return key2;
     }
   }
-  const key$1 = "SELECT";
-  const keyActionType = Symbol(`${key$1}_actionType`);
-  const keyResizeType = Symbol(`${key$1}_resizeType`);
-  const keyAreaStart = Symbol(`${key$1}_areaStart`);
-  const keyAreaEnd = Symbol(`${key$1}_areaEnd`);
-  const keyHoverElement = Symbol(`${key$1}_hoverElement`);
-  const keyHoverElementVertexes = Symbol(`${key$1}_hoverElementVertexes`);
-  const keySelectedElementList = Symbol(`${key$1}_selectedElementList`);
-  const keySelectedElementListVertexes = Symbol(`${key$1}_selectedElementListVertexes`);
-  const keySelectedElementController = Symbol(`${key$1}_selectedElementController`);
-  const keyGroupQueue = Symbol(`${key$1}_groupQueue`);
-  const keyGroupQueueVertexesList = Symbol(`${key$1}_groupQueueVertexesList`);
+  const key$2 = "SELECT";
+  const keyActionType = Symbol(`${key$2}_actionType`);
+  const keyResizeType = Symbol(`${key$2}_resizeType`);
+  const keyAreaStart = Symbol(`${key$2}_areaStart`);
+  const keyAreaEnd = Symbol(`${key$2}_areaEnd`);
+  const keyHoverElement = Symbol(`${key$2}_hoverElement`);
+  const keyHoverElementVertexes = Symbol(`${key$2}_hoverElementVertexes`);
+  const keySelectedElementList = Symbol(`${key$2}_selectedElementList`);
+  const keySelectedElementListVertexes = Symbol(`${key$2}_selectedElementListVertexes`);
+  const keySelectedElementController = Symbol(`${key$2}_selectedElementController`);
+  const keyGroupQueue = Symbol(`${key$2}_groupQueue`);
+  const keyGroupQueueVertexesList = Symbol(`${key$2}_groupQueueVertexesList`);
   const selectWrapperBorderWidth = 2;
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
   const wrapperColor = "#1973ba";
+  const lockColor = "#5b5959b5";
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -3330,6 +3802,44 @@ var __privateMethod = (obj, member, method) => {
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: "transparent", lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
   }
+  function drawCrossVertexes(ctx, vertexes, opts) {
+    const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth2;
+    ctx.strokeStyle = borderColor2;
+    ctx.fillStyle = background2;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  function drawLockVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+      return;
+    }
+    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: "transparent", lineDash: [] };
+    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+    const { controller } = opts;
+    if (controller) {
+      const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
+      const ctrlOpts = { ...wrapperOpts, borderWidth: 1, background: lockColor };
+      drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(rightMiddle.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+      drawCrossVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    }
+  }
   function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
       return;
@@ -4013,6 +4523,7 @@ var __privateMethod = (obj, member, method) => {
     return { x: x2, y: y2, w: w2, h: h2, angle: elem.angle };
   }
   function getSelectedListArea(data, opts) {
+    var _a;
     const indexes = [];
     const uuids = [];
     const elements = [];
@@ -4024,7 +4535,11 @@ var __privateMethod = (obj, member, method) => {
     const endX = Math.max(start.x, end.x);
     const startY = Math.min(start.y, end.y);
     const endY = Math.max(start.y, end.y);
-    data.elements.forEach((elem, idx) => {
+    for (let idx = 0; idx < data.elements.length; idx++) {
+      const elem = data.elements[idx];
+      if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.lock) === true) {
+        continue;
+      }
       const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
       const center = calcElementCenter(elemSize);
       if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
@@ -4043,7 +4558,7 @@ var __privateMethod = (obj, member, method) => {
           }
         }
       }
-    });
+    }
     return { indexes, uuids, elements };
   }
   function calcSelectedElementsArea(elements, opts) {
@@ -4130,9 +4645,8 @@ var __privateMethod = (obj, member, method) => {
   const middlewareEventTextEdit = "@middleware/text-edit";
   const defaultElementDetail = getDefaultElementDetailConfig();
   const MiddlewareTextEditor = (opts) => {
-    const key2 = "SELECT";
-    const { eventHub, viewContent, viewer } = opts;
-    const canvas = viewContent.boardContext.canvas;
+    const { eventHub, boardContent, viewer } = opts;
+    const canvas = boardContent.boardContext.canvas;
     const textarea = document.createElement("textarea");
     const canvasWrapper = document.createElement("div");
     const container = opts.container || document.body;
@@ -4260,48 +4774,30 @@ var __privateMethod = (obj, member, method) => {
     textarea.addEventListener("blur", () => {
       hideTextArea();
     });
-    eventHub.on(middlewareEventTextEdit, (e) => {
+    const textEditCallback = (e) => {
       var _a;
       if ((e == null ? void 0 : e.element) && ((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.type) === "text") {
         activeElem = e.element;
       }
       showTextArea(e);
-    });
+    };
     return {
-      mode: key2,
-      isDefault: true
+      name: "@middleware/text-editor",
+      use() {
+        eventHub.on(middlewareEventTextEdit, textEditCallback);
+      },
+      disuse() {
+        eventHub.off(middlewareEventTextEdit, textEditCallback);
+      }
     };
   };
   const middlewareEventSelect = "@middleware/select";
+  const middlewareEventSelectClear = "@middleware/select-clear";
   const MiddlewareSelector = (opts) => {
-    const { viewer, sharer, viewContent, calculator, eventHub } = opts;
-    const { helperContext } = viewContent;
+    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
+    const { helperContext } = boardContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on(middlewareEventSelect, ({ uuids, positions }) => {
-      let elements = [];
-      const actionType = sharer.getSharedStorage(keyActionType);
-      const data = sharer.getActiveStorage("data");
-      if (positions && Array.isArray(positions)) {
-        elements = findElementsFromListByPositions(positions, (data == null ? void 0 : data.elements) || []);
-      } else {
-        elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
-      }
-      let needRefresh = false;
-      if (!actionType && elements.length === 1) {
-        sharer.setSharedStorage(keyActionType, "select");
-        needRefresh = true;
-      } else if (actionType === "select" && elements.length === 1) {
-        needRefresh = true;
-      }
-      if (needRefresh) {
-        const elem = elements[0];
-        const groupQueue = getGroupQueueFromList(elem.uuid, (data == null ? void 0 : data.elements) || []);
-        sharer.setSharedStorage(keyGroupQueue, groupQueue);
-        updateSelectedElementList(elements);
-        viewer.drawFrame();
-      }
-    });
     sharer.setSharedStorage(keyActionType, null);
     const getActiveElements = () => {
       return sharer.getSharedStorage(keySelectedElementList);
@@ -4378,15 +4874,51 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keySelectedElementController, null);
     };
     clear();
+    const selectCallback = ({ uuids, positions }) => {
+      let elements = [];
+      const actionType = sharer.getSharedStorage(keyActionType);
+      const data = sharer.getActiveStorage("data");
+      if (positions && Array.isArray(positions)) {
+        elements = findElementsFromListByPositions(positions, (data == null ? void 0 : data.elements) || []);
+      } else {
+        elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
+      }
+      let needRefresh = false;
+      if (!actionType && elements.length === 1) {
+        sharer.setSharedStorage(keyActionType, "select");
+        needRefresh = true;
+      } else if (actionType === "select" && elements.length === 1) {
+        needRefresh = true;
+      }
+      if (needRefresh) {
+        const elem = elements[0];
+        const groupQueue = getGroupQueueFromList(elem.uuid, (data == null ? void 0 : data.elements) || []);
+        sharer.setSharedStorage(keyGroupQueue, groupQueue);
+        updateSelectedElementList(elements);
+        viewer.drawFrame();
+      }
+    };
+    const selectClearCallback = () => {
+      clear();
+      viewer.drawFrame();
+    };
     return {
-      mode: key$1,
+      name: "@middleware/selector",
+      use() {
+        eventHub.on(middlewareEventSelect, selectCallback);
+        eventHub.on(middlewareEventSelectClear, selectClearCallback);
+      },
+      disuse() {
+        eventHub.off(middlewareEventSelect, selectCallback);
+        eventHub.off(middlewareEventSelectClear, selectClearCallback);
+      },
       hover: (e) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const resizeType = sharer.getSharedStorage(keyResizeType);
         const actionType = sharer.getSharedStorage(keyActionType);
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         const triggerCursor = (target2) => {
-          let cursor = target2.type;
+          const cursor = target2.type;
           if (inBusyMode === null) {
             eventHub.trigger("cursor", {
               type: cursor,
@@ -4443,8 +4975,16 @@ var __privateMethod = (obj, member, method) => {
           })
         });
         triggerCursor(target);
-        if (target.type === "over-element" && ((_b = target == null ? void 0 : target.elements) == null ? void 0 : _b.length) === 1) {
-          sharer.setSharedStorage(keyHoverElement, target.elements[0]);
+        if (target.type === null) {
+          return;
+        }
+        if (target.type === "over-element" && sharer.getSharedStorage(keyActionType) === "select" && target.elements.length === 1 && target.elements[0].uuid === ((_c = (_b = getActiveElements()) == null ? void 0 : _b[0]) == null ? void 0 : _c.uuid)) {
+          return;
+        }
+        if (target.type === "over-element" && sharer.getSharedStorage(keyActionType) === null && target.elements.length === 1 && target.elements[0].uuid === ((_d = sharer.getSharedStorage(keyHoverElement)) == null ? void 0 : _d.uuid)) {
+          return;
+        }
+        if (target.type === "over-element" && ((_e = target == null ? void 0 : target.elements) == null ? void 0 : _e.length) === 1) {
           updateHoverElement(target.elements[0]);
           viewer.drawFrame();
           return;
@@ -4456,9 +4996,8 @@ var __privateMethod = (obj, member, method) => {
         }
       },
       pointStart: (e) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
         prevPoint = e.point;
-        updateHoverElement(null);
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           if (isPointInViewActiveGroup(e.point, {
@@ -4468,11 +5007,15 @@ var __privateMethod = (obj, member, method) => {
             groupQueue
           })) {
             const target2 = getPointTarget(e.point, pointTargetBaseOptions());
-            updateHoverElement(null);
-            if (target2.type === "over-element" && ((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1) {
+            if (((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1 && ((_c = (_b = target2.elements[0]) == null ? void 0 : _b.operations) == null ? void 0 : _c.lock) === true) {
+              return;
+            } else {
+              updateHoverElement(null);
+            }
+            if (target2.type === "over-element" && ((_d = target2 == null ? void 0 : target2.elements) == null ? void 0 : _d.length) === 1) {
               updateSelectedElementList([target2.elements[0]], { triggerEvent: true });
               sharer.setSharedStorage(keyActionType, "drag");
-            } else if ((_b = target2.type) == null ? void 0 : _b.startsWith("resize-")) {
+            } else if ((_e = target2.type) == null ? void 0 : _e.startsWith("resize-")) {
               sharer.setSharedStorage(keyResizeType, target2.type);
               sharer.setSharedStorage(keyActionType, "resize");
             } else {
@@ -4494,12 +5037,17 @@ var __privateMethod = (obj, member, method) => {
           areaSize: listAreaSize,
           groupQueue: []
         });
+        if (((_f = target == null ? void 0 : target.elements) == null ? void 0 : _f.length) === 1 && ((_h = (_g = target.elements[0]) == null ? void 0 : _g.operations) == null ? void 0 : _h.lock) === true) {
+          return;
+        } else {
+          updateHoverElement(null);
+        }
         if (target.type === "list-area") {
           sharer.setSharedStorage(keyActionType, "drag-list");
-        } else if (target.type === "over-element" && ((_c = target == null ? void 0 : target.elements) == null ? void 0 : _c.length) === 1) {
+        } else if (target.type === "over-element" && ((_i = target == null ? void 0 : target.elements) == null ? void 0 : _i.length) === 1) {
           updateSelectedElementList([target.elements[0]], { triggerEvent: true });
           sharer.setSharedStorage(keyActionType, "drag");
-        } else if ((_d = target.type) == null ? void 0 : _d.startsWith("resize-")) {
+        } else if ((_j = target.type) == null ? void 0 : _j.startsWith("resize-")) {
           sharer.setSharedStorage(keyResizeType, target.type);
           sharer.setSharedStorage(keyActionType, "resize");
         } else {
@@ -4511,6 +5059,7 @@ var __privateMethod = (obj, member, method) => {
         viewer.drawFrame();
       },
       pointMove: (e) => {
+        var _a, _b, _c;
         const data = sharer.getActiveStorage("data");
         const elems = getActiveElements();
         const scale = sharer.getActiveStorage("scale") || 1;
@@ -4521,7 +5070,7 @@ var __privateMethod = (obj, member, method) => {
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         if (actionType === "drag") {
           inBusyMode = "drag";
-          if (data && (elems == null ? void 0 : elems.length) === 1 && start && end) {
+          if (data && (elems == null ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.lock) !== true) {
             const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
             elems[0].x += moveX / scale;
             elems[0].y += moveY / scale;
@@ -4534,7 +5083,8 @@ var __privateMethod = (obj, member, method) => {
             const moveX = (end.x - start.x) / scale;
             const moveY = (end.y - start.y) / scale;
             elems.forEach((elem) => {
-              if (elem) {
+              var _a2;
+              if (elem && ((_a2 = elem == null ? void 0 : elem.operations) == null ? void 0 : _a2.lock) !== true) {
                 elem.x += moveX;
                 elem.y += moveY;
               }
@@ -4565,8 +5115,15 @@ var __privateMethod = (obj, member, method) => {
             const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
             elems[0].x = resizedElemSize.x;
             elems[0].y = resizedElemSize.y;
-            elems[0].w = resizedElemSize.w;
-            elems[0].h = resizedElemSize.h;
+            if (elems[0].type === "group" && ((_c = elems[0].operations) == null ? void 0 : _c.deepResize) === true) {
+              deepResizeGroupElement(elems[0], {
+                w: resizedElemSize.w,
+                h: resizedElemSize.h
+              });
+            } else {
+              elems[0].w = resizedElemSize.w;
+              elems[0].h = resizedElemSize.h;
+            }
             updateSelectedElementList([elems[0]]);
             viewer.drawFrame();
           }
@@ -4638,7 +5195,8 @@ var __privateMethod = (obj, member, method) => {
             sharer.setActiveStorage("contextWidth", viewInfo.contextSize.contextWidth);
           }
           if (data && ["drag", "drag-list", "drag-list-end", "resize"].includes(actionType)) {
-            eventHub.trigger("change", { data });
+            let type = "drag-element";
+            eventHub.trigger("change", { data, type });
           }
           viewer.drawFrame();
         };
@@ -4650,16 +5208,21 @@ var __privateMethod = (obj, member, method) => {
         viewer.drawFrame();
       },
       doubleClick(e) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const target = getPointTarget(e.point, pointTargetBaseOptions());
-        if (target.elements.length === 1 && ((_a = target.elements[0]) == null ? void 0 : _a.type) === "group") {
+        sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keySelectedElementList, []);
+        if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.lock) === true) {
+          return;
+        }
+        if (target.elements.length === 1 && ((_c = target.elements[0]) == null ? void 0 : _c.type) === "group") {
           const pushResult = pushGroupQueue(target.elements[0]);
           if (pushResult === true) {
             sharer.setSharedStorage(keyActionType, null);
             viewer.drawFrame();
             return;
           }
-        } else if (target.elements.length === 1 && ((_b = target.elements[0]) == null ? void 0 : _b.type) === "text") {
+        } else if (target.elements.length === 1 && ((_d = target.elements[0]) == null ? void 0 : _d.type) === "text") {
           eventHub.trigger(middlewareEventTextEdit, {
             element: target.elements[0],
             groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
@@ -4669,6 +5232,7 @@ var __privateMethod = (obj, member, method) => {
         sharer.setSharedStorage(keyActionType, null);
       },
       beforeDrawFrame({ snapshot }) {
+        var _a;
         const { activeStore, sharedStore } = snapshot;
         const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
         const sharer2 = opts.sharer;
@@ -4689,19 +5253,42 @@ var __privateMethod = (obj, member, method) => {
           controllerSize: 10,
           viewScaleInfo
         }) : null;
+        const isLock = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.lock);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
           if (hoverElement && actionType !== "drag") {
-            drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+            if (isLock) {
+              drawLockVertexesWrapper(helperContext, hoverElementVertexes, {
+                ...drawBaseOpts,
+                controller: calcElementSizeController(hoverElement, {
+                  groupQueue,
+                  controllerSize: 10,
+                  viewScaleInfo
+                })
+              });
+            } else {
+              drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+            }
           }
-          if (elem && ["select", "drag", "resize"].includes(actionType)) {
+          if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
             drawSelectedElementControllersVertexes(helperContext, selectedElementController, { ...drawBaseOpts });
           }
         } else {
           if (hoverElement && actionType !== "drag") {
-            drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+            if (isLock) {
+              drawLockVertexesWrapper(helperContext, hoverElementVertexes, {
+                ...drawBaseOpts,
+                controller: calcElementSizeController(hoverElement, {
+                  groupQueue,
+                  controllerSize: 10,
+                  viewScaleInfo
+                })
+              });
+            } else {
+              drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+            }
           }
-          if (elem && ["select", "drag", "resize"].includes(actionType)) {
+          if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
             drawSelectedElementControllersVertexes(helperContext, selectedElementController, { ...drawBaseOpts });
           } else if (actionType === "area" && areaStart && areaEnd) {
             drawArea(helperContext, { start: areaStart, end: areaEnd });
@@ -4719,12 +5306,12 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const key = "SCROLL";
-  const keyXThumbRect = Symbol(`${key}_xThumbRect`);
-  const keyYThumbRect = Symbol(`${key}_yThumbRect`);
-  const keyPrevPoint = Symbol(`${key}_prevPoint`);
-  const keyActivePoint = Symbol(`${key}_activePoint`);
-  const keyActiveThumbType = Symbol(`${key}_activeThumbType`);
+  const key$1 = "SCROLL";
+  const keyXThumbRect = Symbol(`${key$1}_xThumbRect`);
+  const keyYThumbRect = Symbol(`${key$1}_yThumbRect`);
+  const keyPrevPoint$1 = Symbol(`${key$1}_prevPoint`);
+  const keyActivePoint = Symbol(`${key$1}_activePoint`);
+  const keyActiveThumbType = Symbol(`${key$1}_activeThumbType`);
   const minScrollerWidth = 12;
   const scrollerLineWidth = 16;
   const scrollerThumbAlpha = 0.36;
@@ -4759,7 +5346,7 @@ var __privateMethod = (obj, member, method) => {
     const { sharedStore } = snapshot;
     const info = {
       activePoint: sharedStore[keyActivePoint] || null,
-      prevPoint: sharedStore[keyPrevPoint] || null,
+      prevPoint: sharedStore[keyPrevPoint$1] || null,
       activeThumbType: sharedStore[keyActiveThumbType] || null,
       xThumbRect: sharedStore[keyXThumbRect] || null,
       yThumbRect: sharedStore[keyYThumbRect] || null
@@ -4917,18 +5504,18 @@ var __privateMethod = (obj, member, method) => {
     return { xThumbRect, yThumbRect };
   }
   const MiddlewareScroller = (opts) => {
-    const { viewer, viewContent, sharer } = opts;
-    const { helperContext } = viewContent;
+    const { viewer, boardContent, sharer } = opts;
+    const { helperContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
     const clear = () => {
-      sharer.setSharedStorage(keyPrevPoint, null);
+      sharer.setSharedStorage(keyPrevPoint$1, null);
       sharer.setSharedStorage(keyActivePoint, null);
       sharer.setSharedStorage(keyActiveThumbType, null);
     };
     clear();
     const scrollX = (p) => {
-      const prevPoint = sharer.getSharedStorage(keyPrevPoint);
+      const prevPoint = sharer.getSharedStorage(keyPrevPoint$1);
       if (prevPoint) {
         const { offsetLeft, offsetRight } = sharer.getActiveViewScaleInfo();
         const { width } = sharer.getActiveViewSizeInfo();
@@ -4940,7 +5527,7 @@ var __privateMethod = (obj, member, method) => {
       }
     };
     const scrollY = (p) => {
-      const prevPoint = sharer.getSharedStorage(keyPrevPoint);
+      const prevPoint = sharer.getSharedStorage(keyPrevPoint$1);
       if (prevPoint) {
         const { offsetTop, offsetBottom } = sharer.getActiveViewScaleInfo();
         const { height } = sharer.getActiveViewSizeInfo();
@@ -4958,7 +5545,7 @@ var __privateMethod = (obj, member, method) => {
       });
     };
     return {
-      mode: key,
+      name: "@middleware/scroller",
       wheel: (e) => {
         viewer.scroll({
           moveX: 0 - e.deltaX,
@@ -4971,7 +5558,7 @@ var __privateMethod = (obj, member, method) => {
         const thumbType = getThumbType(point);
         if (thumbType === "X" || thumbType === "Y") {
           sharer.setSharedStorage(keyActiveThumbType, thumbType);
-          sharer.setSharedStorage(keyPrevPoint, point);
+          sharer.setSharedStorage(keyPrevPoint$1, point);
           return false;
         }
       },
@@ -4985,11 +5572,11 @@ var __privateMethod = (obj, member, method) => {
           } else if (activeThumbType === "Y") {
             scrollY(point);
           }
-          sharer.setSharedStorage(keyPrevPoint, point);
+          sharer.setSharedStorage(keyPrevPoint$1, point);
           return false;
         }
       },
-      pointEnd: (e) => {
+      pointEnd: () => {
         const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
         clear();
         if (activeThumbType === "X" || activeThumbType === "Y") {
@@ -5007,13 +5594,11 @@ var __privateMethod = (obj, member, method) => {
   };
   const middlewareEventScale = "@middleware/scale";
   const MiddlewareScaler = (opts) => {
-    const key2 = "SCALE";
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
     const minScale = 0.05;
     return {
-      mode: key2,
-      isDefault: true,
+      name: "@middleware/scaler",
       wheelScale(e) {
         const { deltaY, point } = e;
         const { scale } = sharer.getActiveViewScaleInfo();
@@ -5220,12 +5805,11 @@ var __privateMethod = (obj, member, method) => {
   }
   const middlewareEventRuler = "@middleware/show-ruler";
   const MiddlewareRuler = (opts) => {
-    const key2 = "RULE";
-    const { viewContent, viewer, eventHub } = opts;
-    const { helperContext, underContext } = viewContent;
+    const { boardContent, viewer, eventHub } = opts;
+    const { helperContext, underContext } = boardContent;
     let show = true;
     let showGrid = true;
-    eventHub.on(middlewareEventRuler, (e) => {
+    const rulerCallback = (e) => {
       if (typeof (e == null ? void 0 : e.show) === "boolean") {
         show = e.show;
       }
@@ -5235,10 +5819,15 @@ var __privateMethod = (obj, member, method) => {
       if (typeof (e == null ? void 0 : e.show) === "boolean" || typeof (e == null ? void 0 : e.showGrid) === "boolean") {
         viewer.drawFrame();
       }
-    });
+    };
     return {
-      mode: key2,
-      isDefault: true,
+      name: "@middleware/ruler",
+      use() {
+        eventHub.on(middlewareEventRuler, rulerCallback);
+      },
+      disuse() {
+        eventHub.off(middlewareEventRuler, rulerCallback);
+      },
       beforeDrawFrame: ({ snapshot }) => {
         if (show === true) {
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
@@ -5260,20 +5849,64 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
+  const key = "DRAG";
+  const keyPrevPoint = Symbol(`${key}_prevPoint`);
+  const MiddlewareDragger = (opts) => {
+    const { eventHub, sharer, viewer } = opts;
+    let isDragging = false;
+    return {
+      name: "@middleware/dragger",
+      hover() {
+        if (isDragging === true) {
+          return;
+        }
+        eventHub.trigger("cursor", {
+          type: "drag-default"
+        });
+      },
+      pointStart(e) {
+        const { point } = e;
+        sharer.setSharedStorage(keyPrevPoint, point);
+        isDragging = true;
+        eventHub.trigger("cursor", {
+          type: "drag-active"
+        });
+      },
+      pointMove(e) {
+        const { point } = e;
+        const prevPoint = sharer.getSharedStorage(keyPrevPoint);
+        if (point && prevPoint) {
+          const moveX = point.x - prevPoint.x;
+          const moveY = point.y - prevPoint.y;
+          viewer.scroll({ moveX, moveY });
+          viewer.drawFrame();
+        }
+        sharer.setSharedStorage(keyPrevPoint, point);
+      },
+      pointEnd() {
+        isDragging = false;
+        sharer.setSharedStorage(keyPrevPoint, null);
+        eventHub.trigger("cursor", {
+          type: "drag-default"
+        });
+      }
+    };
+  };
   class Core {
     constructor(container, opts) {
       __privateAdd(this, _initContainer);
       __privateAdd(this, _board, void 0);
       // #opts: CoreOptions;
-      // #canvas: HTMLCanvasElement;
+      __privateAdd(this, _canvas, void 0);
       __privateAdd(this, _container, void 0);
-      const { devicePixelRatio = 1, width, height } = opts;
+      const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
       __privateSet(this, _container, container);
       const canvas = document.createElement("canvas");
+      __privateSet(this, _canvas, canvas);
       __privateMethod(this, _initContainer, initContainer_fn).call(this);
       container.appendChild(canvas);
-      const viewContent = createViewContent(canvas, { width, height, devicePixelRatio, offscreen: true });
-      const board = new Board({ viewContent, container });
+      const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true, createCustomContext2D });
+      const board = new Board({ boardContent, container });
       const sharer = board.getSharer();
       sharer.setActiveViewSizeInfo({
         width,
@@ -5289,9 +5922,16 @@ var __privateMethod = (obj, member, method) => {
         eventHub
       });
     }
+    destroy() {
+      __privateGet(this, _board).destroy();
+      __privateGet(this, _canvas).remove();
+    }
     use(middleware) {
       __privateGet(this, _board).use(middleware);
     }
+    disuse(middleware) {
+      __privateGet(this, _board).disuse(middleware);
+    }
     setData(data) {
       validateElements((data == null ? void 0 : data.elements) || []);
       __privateGet(this, _board).setData(data);
@@ -5344,8 +5984,12 @@ var __privateMethod = (obj, member, method) => {
     setViewScale(opts) {
       __privateGet(this, _board).updateViewScaleInfo(opts);
     }
+    getLoadItemMap() {
+      return __privateGet(this, _board).getRenderer().getLoadItemMap();
+    }
   }
   _board = new WeakMap();
+  _canvas = new WeakMap();
   _container = new WeakMap();
   _initContainer = new WeakSet();
   initContainer_fn = function() {
@@ -5353,6 +5997,7 @@ var __privateMethod = (obj, member, method) => {
     container.style.position = "relative";
   };
   exports.Core = Core;
+  exports.MiddlewareDragger = MiddlewareDragger;
   exports.MiddlewareRuler = MiddlewareRuler;
   exports.MiddlewareScaler = MiddlewareScaler;
   exports.MiddlewareScroller = MiddlewareScroller;
@@ -5361,6 +6006,7 @@ var __privateMethod = (obj, member, method) => {
   exports.middlewareEventRuler = middlewareEventRuler;
   exports.middlewareEventScale = middlewareEventScale;
   exports.middlewareEventSelect = middlewareEventSelect;
+  exports.middlewareEventSelectClear = middlewareEventSelectClear;
   exports.middlewareEventTextEdit = middlewareEventTextEdit;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;