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

package/dist/index.global.js

@@ -22,7 +22,7 @@ var __privateMethod = (obj, member, method) => {
   return method;
 };
 
-  var _board, _canvas, _container, _initContainer, initContainer_fn;
+  var _eventHub, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _init, init_fn, _loadResizeCursorBaseImage, loadResizeCursorBaseImage_fn, _resetCursor, resetCursor_fn, _setCursorResize, setCursorResize_fn, _appendRotateResizeImage, appendRotateResizeImage_fn, _board, _canvas, _container2, _initContainer, initContainer_fn;
   function throttle(fn, timeout) {
     let timer = -1;
     return function(...args) {
@@ -789,6 +789,9 @@ var __privateMethod = (obj, member, method) => {
       return false;
     }
     destroy() {
+      this.clear();
+    }
+    clear() {
       __classPrivateFieldGet$8(this, _EventEmitter_listeners, "f").clear();
     }
   }
@@ -869,6 +872,9 @@ var __privateMethod = (obj, member, method) => {
     };
     return sacelInfo;
   }
+  function parseRadianToAngle(radian) {
+    return radian / Math.PI * 180;
+  }
   function parseAngleToRadian(angle2) {
     return angle2 / 180 * Math.PI;
   }
@@ -886,7 +892,7 @@ var __privateMethod = (obj, member, method) => {
       ctx.translate(-center.x, -center.y);
     }
   }
-  function rotateElement(ctx, elemSize, callback) {
+  function rotateElement$1(ctx, elemSize, callback) {
     const center = calcElementCenter(elemSize);
     rotateByCenter(ctx, elemSize.angle || 0, center, () => {
       callback(ctx);
@@ -912,6 +918,21 @@ var __privateMethod = (obj, member, method) => {
     };
     return calcElementCenter(elemSize);
   }
+  function calcRadian(center, start, end) {
+    const startAngle = calcLineRadian(center, start);
+    const endAngle = calcLineRadian(center, end);
+    if (endAngle !== null && startAngle !== null) {
+      if (startAngle > Math.PI * 3 / 2 && endAngle < Math.PI / 2) {
+        return endAngle + (Math.PI * 2 - startAngle);
+      } else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
+        return startAngle + (Math.PI * 2 - endAngle);
+      } else {
+        return endAngle - startAngle;
+      }
+    } else {
+      return 0;
+    }
+  }
   function calcLineRadian(center, p) {
     const x2 = p.x - center.x;
     const y2 = p.y - center.y;
@@ -1468,8 +1489,8 @@ var __privateMethod = (obj, member, method) => {
     };
   }
   function calcElementSizeController(elemSize, opts) {
-    const { groupQueue, controllerSize, viewScaleInfo } = opts;
-    const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
+    const { groupQueue, controllerSize: controllerSize2, viewScaleInfo } = opts;
+    const ctrlSize = (controllerSize2 && controllerSize2 > 0 ? controllerSize2 : 8) / viewScaleInfo.scale;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
     const ctrlGroupQueue = [
       ...[
@@ -1491,6 +1512,13 @@ var __privateMethod = (obj, member, method) => {
       totalAngle += angle3;
     });
     const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const rotateElemVertexes = calcElementVertexesInGroup({
+      x: x2 - ctrlSize * 2,
+      y: y2 - ctrlSize * 2,
+      h: h2 + ctrlSize * 4,
+      w: w2 + ctrlSize * 4,
+      angle: angle2
+    }, { groupQueue: [...groupQueue] });
     const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
     const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
     const bottomCenter = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
@@ -1519,6 +1547,9 @@ var __privateMethod = (obj, member, method) => {
     const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
     const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
     const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]);
+    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, { size: ctrlSize, angle: totalAngle });
+    const rotateVertexes2 = calcElementVertexes(rotateSize);
     const sizeController = {
       elementWrapper: vertexes,
       left: {
@@ -1580,6 +1611,11 @@ var __privateMethod = (obj, member, method) => {
         type: "bottom-middle",
         vertexes: bottomMiddleVertexes,
         center: bottomCenter
+      },
+      rotate: {
+        type: "rotate",
+        vertexes: rotateVertexes2,
+        center: rotateCenter
       }
     };
     return sizeController;
@@ -1859,7 +1895,7 @@ var __privateMethod = (obj, member, method) => {
       ctx.clip(path2d);
       ctx.translate(0 - internalX, 0 - internalY);
       ctx.setTransform(1, 0, 0, 1, 0, 0);
-      rotateElement(ctx, Object.assign({}, viewElem), () => {
+      rotateElement$1(ctx, Object.assign({}, viewElem), () => {
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
       });
       ctx.restore();
@@ -2083,7 +2119,7 @@ var __privateMethod = (obj, member, method) => {
     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 }, () => {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
@@ -2137,7 +2173,7 @@ var __privateMethod = (obj, member, method) => {
     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 }, () => {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
@@ -2160,7 +2196,7 @@ var __privateMethod = (obj, member, method) => {
     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 }, () => {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
@@ -2172,7 +2208,7 @@ var __privateMethod = (obj, member, method) => {
             viewSizeInfo,
             parentOpacity,
             renderContent: () => {
-              if (!content) {
+              if (!content && !opts.loader.isDestroyed()) {
                 opts.loader.load(elem, opts.elementAssets || {});
               }
               if (elem.type === "image" && content) {
@@ -2206,8 +2242,8 @@ var __privateMethod = (obj, member, method) => {
     const content = opts.loader.getContent(elem);
     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) {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "svg" && content) {
@@ -2221,8 +2257,8 @@ var __privateMethod = (obj, member, method) => {
     const content = opts.loader.getContent(elem);
     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) {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      if (!content && !opts.loader.isDestroyed()) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "html" && content) {
@@ -2237,7 +2273,7 @@ var __privateMethod = (obj, member, method) => {
     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 }, () => {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBox(ctx, viewElem, {
         originElem: elem,
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
@@ -2348,7 +2384,7 @@ var __privateMethod = (obj, member, method) => {
     const internalY = y2 - viewOriginY;
     const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
     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 }, () => {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBox(ctx, viewElem, {
         originElem: elem,
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
@@ -2440,7 +2476,7 @@ var __privateMethod = (obj, member, method) => {
     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 }, () => {
+    rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       ctx.globalAlpha = getOpacity(elem) * parentOpacity;
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
@@ -2597,7 +2633,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 _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
+  var _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_hasDestroyed, _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;
@@ -2624,6 +2660,7 @@ var __privateMethod = (obj, member, method) => {
       _Loader_loadFuncMap.set(this, {});
       _Loader_currentLoadItemMap.set(this, {});
       _Loader_storageLoadItemMap.set(this, {});
+      _Loader_hasDestroyed.set(this, false);
       __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "image", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const src = ((_a = assets[elem.detail.src]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.src;
@@ -2658,12 +2695,20 @@ var __privateMethod = (obj, member, method) => {
         };
       }));
     }
+    isDestroyed() {
+      return __classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f");
+    }
     destroy() {
+      __classPrivateFieldSet$6(this, _Loader_hasDestroyed, true, "f");
+      this.clear();
       __classPrivateFieldSet$6(this, _Loader_loadFuncMap, null, "f");
       __classPrivateFieldSet$6(this, _Loader_currentLoadItemMap, null, "f");
       __classPrivateFieldSet$6(this, _Loader_storageLoadItemMap, null, "f");
     }
     load(element, assets) {
+      if (__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f") === true) {
+        return;
+      }
       if (__classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
         return;
       }
@@ -2683,7 +2728,7 @@ var __privateMethod = (obj, member, method) => {
       __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) {
+  _Loader_loadFuncMap = /* @__PURE__ */ new WeakMap(), _Loader_currentLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_storageLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Loader_instances = /* @__PURE__ */ new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc2(type, func) {
     __classPrivateFieldGet$6(this, _Loader_loadFuncMap, "f")[type] = func;
   }, _Loader_getLoadElementSource = function _Loader_getLoadElementSource2(element) {
     var _a, _b, _c;
@@ -2709,40 +2754,46 @@ var __privateMethod = (obj, member, method) => {
   }, _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) {
+    if (!__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+      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 }));
       }
-    } 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) {
+    if (!__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+      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 }));
       }
-    } 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") {
+    if (typeof loadFunc === "function" && !__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
       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);
+        if (!__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
+          item.content = result.content;
+          item.endTime = Date.now();
+          item.status = "load";
+          __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_emitLoad).call(this, item);
+        }
       }).catch((err) => {
         console.warn(`Load element source "${item.source}" fail`, err, element);
         item.endTime = Date.now();
@@ -2776,20 +2827,26 @@ var __privateMethod = (obj, member, method) => {
       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;
+  var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_hasDestroyed, _Renderer_init;
   class Renderer extends EventEmitter {
     constructor(opts) {
       super();
       _Renderer_instances.add(this);
       _Renderer_opts.set(this, void 0);
       _Renderer_loader.set(this, new Loader());
+      _Renderer_hasDestroyed.set(this, false);
       __classPrivateFieldSet$5(this, _Renderer_opts, opts, "f");
       __classPrivateFieldGet$5(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
+    isDestroyed() {
+      return __classPrivateFieldGet$5(this, _Renderer_hasDestroyed, "f");
+    }
     destroy() {
+      this.clear();
       __classPrivateFieldSet$5(this, _Renderer_opts, null, "f");
       __classPrivateFieldGet$5(this, _Renderer_loader, "f").destroy();
       __classPrivateFieldSet$5(this, _Renderer_loader, null, "f");
+      __classPrivateFieldSet$5(this, _Renderer_hasDestroyed, true, "f");
     }
     updateOptions(opts) {
       __classPrivateFieldSet$5(this, _Renderer_opts, opts, "f");
@@ -2856,7 +2913,7 @@ var __privateMethod = (obj, member, method) => {
       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() {
+  _Renderer_opts = /* @__PURE__ */ new WeakMap(), _Renderer_loader = /* @__PURE__ */ new WeakMap(), _Renderer_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Renderer_instances = /* @__PURE__ */ new WeakSet(), _Renderer_init = function _Renderer_init2() {
     const loader = __classPrivateFieldGet$5(this, _Renderer_loader, "f");
     loader.on("load", (e) => {
       this.trigger("load", e);
@@ -2926,7 +2983,7 @@ var __privateMethod = (obj, member, method) => {
       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;
+  var _BoardWatcher_instances, _BoardWatcher_opts, _BoardWatcher_store, _BoardWatcher_hasDestroyed, _BoardWatcher_init, _BoardWatcher_onWheel, _BoardWatcher_onContextMenu, _BoardWatcher_onClick, _BoardWatcher_onPointLeave, _BoardWatcher_onPointEnd, _BoardWatcher_onPointMove, _BoardWatcher_onPointStart, _BoardWatcher_onHover, _BoardWatcher_isInTarget, _BoardWatcher_getPoint, _BoardWatcher_isVaildPoint;
   function isBoardAvailableNum(num) {
     return num > 0 || num < 0 || num === 0;
   }
@@ -2936,6 +2993,7 @@ var __privateMethod = (obj, member, method) => {
       _BoardWatcher_instances.add(this);
       _BoardWatcher_opts.set(this, void 0);
       _BoardWatcher_store.set(this, void 0);
+      _BoardWatcher_hasDestroyed.set(this, false);
       _BoardWatcher_onWheel.set(this, (e) => {
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
@@ -3047,7 +3105,21 @@ var __privateMethod = (obj, member, method) => {
       __classPrivateFieldSet$3(this, _BoardWatcher_opts, opts, "f");
       __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_init).call(this);
     }
-    destroy() {
+    onEvents() {
+      if (__classPrivateFieldGet$3(this, _BoardWatcher_hasDestroyed, "f")) {
+        return;
+      }
+      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"));
+    }
+    offEvents() {
       const container = window;
       container.removeEventListener("mousemove", __classPrivateFieldGet$3(this, _BoardWatcher_onHover, "f"));
       container.removeEventListener("mousedown", __classPrivateFieldGet$3(this, _BoardWatcher_onPointStart, "f"));
@@ -3058,17 +3130,14 @@ var __privateMethod = (obj, member, method) => {
       container.removeEventListener("click", __classPrivateFieldGet$3(this, _BoardWatcher_onClick, "f"));
       container.removeEventListener("contextmenu", __classPrivateFieldGet$3(this, _BoardWatcher_onContextMenu, "f"));
     }
+    destroy() {
+      this.offEvents();
+      __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").destroy();
+      __classPrivateFieldSet$3(this, _BoardWatcher_hasDestroyed, true, "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_opts = /* @__PURE__ */ new WeakMap(), _BoardWatcher_store = /* @__PURE__ */ new WeakMap(), _BoardWatcher_hasDestroyed = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onWheel = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onContextMenu = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onClick = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointLeave = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointEnd = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointMove = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onPointStart = /* @__PURE__ */ new WeakMap(), _BoardWatcher_onHover = /* @__PURE__ */ new WeakMap(), _BoardWatcher_instances = /* @__PURE__ */ new WeakSet(), _BoardWatcher_init = function _BoardWatcher_init2() {
+    this.onEvents();
   }, _BoardWatcher_isInTarget = function _BoardWatcher_isInTarget2(e) {
     return e.target === __classPrivateFieldGet$3(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
   }, _BoardWatcher_getPoint = function _BoardWatcher_getPoint2(e) {
@@ -3343,7 +3412,7 @@ var __privateMethod = (obj, member, method) => {
       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;
+  var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_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) {
@@ -3358,6 +3427,7 @@ var __privateMethod = (obj, member, method) => {
       _Board_viewer.set(this, void 0);
       _Board_calculator.set(this, void 0);
       _Board_eventHub.set(this, new EventEmitter());
+      _Board_hasDestroyed.set(this, false);
       const { boardContent } = opts;
       const sharer = new Sharer();
       const calculator = new Calculator({ viewContext: boardContent.viewContext });
@@ -3390,11 +3460,15 @@ var __privateMethod = (obj, member, method) => {
       __classPrivateFieldGet(this, _Board_instances, "m", _Board_init).call(this);
       __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
     }
+    isDestroyed() {
+      return __classPrivateFieldGet(this, _Board_hasDestroyed, "f");
+    }
     destroy() {
       __classPrivateFieldGet(this, _Board_watcher, "f").destroy();
       __classPrivateFieldGet(this, _Board_renderer, "f").destroy();
       __classPrivateFieldGet(this, _Board_calculator, "f").destroy();
       __classPrivateFieldGet(this, _Board_eventHub, "f").destroy();
+      __classPrivateFieldSet(this, _Board_hasDestroyed, true, "f");
     }
     getSharer() {
       return __classPrivateFieldGet(this, _Board_sharer, "f");
@@ -3495,8 +3569,14 @@ var __privateMethod = (obj, member, method) => {
     getEventHub() {
       return __classPrivateFieldGet(this, _Board_eventHub, "f");
     }
+    onWatcherEvents() {
+      __classPrivateFieldGet(this, _Board_watcher, "f").onEvents();
+    }
+    offWatcherEvents() {
+      __classPrivateFieldGet(this, _Board_watcher, "f").offEvents();
+    }
   }
-  _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_renderer = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
+  _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_renderer = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointStart", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointEnd", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", throttle((e) => {
@@ -3647,120 +3727,148 @@ var __privateMethod = (obj, member, method) => {
   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`;
+  const CURSOR_RESIZE_ROTATE = `data:image/png;base64,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`;
   class Cursor {
     constructor(container, opts) {
-      this._cursorType = null;
-      this._resizeCursorBaseImage = null;
-      this._cursorImageMap = {
+      __privateAdd(this, _init);
+      __privateAdd(this, _loadResizeCursorBaseImage);
+      __privateAdd(this, _resetCursor);
+      __privateAdd(this, _setCursorResize);
+      __privateAdd(this, _appendRotateResizeImage);
+      __privateAdd(this, _eventHub, void 0);
+      __privateAdd(this, _container, void 0);
+      __privateAdd(this, _cursorType, null);
+      __privateAdd(this, _resizeCursorBaseImage, null);
+      __privateAdd(this, _cursorImageMap, {
         auto: CURSOR,
         "drag-default": CURSOR_DRAG_DEFAULT,
         "drag-active": CURSOR_DRAG_ACTIVE,
-        "rotate-0": CURSOR_RESIZE
-      };
-      this._container = container;
-      this._eventHub = opts.eventHub;
-      this._init();
-      this._loadResizeCursorBaseImage();
-    }
-    _init() {
-      const { _eventHub: eventHub } = this;
-      this._resetCursor("auto");
-      eventHub.on("cursor", (e) => {
-        var _a;
-        if (e.type === "over-element" || !e.type) {
-          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");
-        }
+        "rotate-0": CURSOR_RESIZE,
+        rotate: CURSOR_RESIZE_ROTATE
       });
+      __privateSet(this, _container, container);
+      __privateSet(this, _eventHub, opts.eventHub);
+      __privateMethod(this, _init, init_fn).call(this);
+      __privateMethod(this, _loadResizeCursorBaseImage, loadResizeCursorBaseImage_fn).call(this);
     }
-    _loadResizeCursorBaseImage() {
-      loadImage(CURSOR_RESIZE).then((img) => {
-        this._resizeCursorBaseImage = img;
-      }).catch((err) => {
-        console.error(err);
-      });
-    }
-    _resetCursor(cursorKey) {
-      if (this._cursorType === cursorKey) {
-        return;
-      }
-      this._cursorType = cursorKey;
-      const image = this._cursorImageMap[this._cursorType] || this._cursorImageMap["auto"];
-      let offsetX = 0;
-      let offsetY = 0;
-      if (cursorKey.startsWith("rotate-") && this._cursorImageMap[this._cursorType]) {
-        offsetX = 10;
-        offsetY = 10;
-      }
-      this._container.style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
-    }
-    _setCursorResize(e) {
+  }
+  _eventHub = new WeakMap();
+  _container = new WeakMap();
+  _cursorType = new WeakMap();
+  _resizeCursorBaseImage = new WeakMap();
+  _cursorImageMap = new WeakMap();
+  _init = new WeakSet();
+  init_fn = function() {
+    const eventHub = __privateGet(this, _eventHub);
+    __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "default");
+    eventHub.on("cursor", (e) => {
       var _a;
-      let totalAngle = 0;
-      if (e.type === "resize-top") {
-        totalAngle += 0;
-      } else if (e.type === "resize-top-right") {
-        totalAngle += 45;
-      } else if (e.type === "resize-right") {
-        totalAngle += 90;
-      } else if (e.type === "resize-bottom-right") {
-        totalAngle += 135;
-      } else if (e.type === "resize-bottom") {
-        totalAngle += 180;
-      } else if (e.type === "resize-bottom-left") {
-        totalAngle += 225;
-      } else if (e.type === "resize-left") {
-        totalAngle += 270;
-      } else if (e.type === "resize-top-left") {
-        totalAngle += 315;
-      }
-      totalAngle += limitAngle(((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.angle) || 0);
-      if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
-        e.groupQueue.forEach((group) => {
-          totalAngle += limitAngle(group.angle || 0);
-        });
-      }
-      totalAngle = limitAngle(totalAngle);
-      const cursorKey = this._appendRotateResizeImage(totalAngle);
-      this._resetCursor(cursorKey);
-    }
-    _appendRotateResizeImage(angle2) {
-      const key2 = `rotate-${angle2}`;
-      if (!this._cursorImageMap[key2]) {
-        const baseImage = this._resizeCursorBaseImage;
-        if (baseImage) {
-          const canvas = document.createElement("canvas");
-          const w2 = baseImage.width;
-          const h2 = baseImage.height;
-          const center = {
-            x: w2 / 2,
-            y: h2 / 2
-          };
-          canvas.width = w2;
-          canvas.height = h2;
-          const ctx = canvas.getContext("2d");
-          const radian = parseAngleToRadian(angle2);
-          ctx.translate(center.x, center.y);
-          ctx.rotate(radian);
-          ctx.translate(-center.x, -center.y);
-          ctx.drawImage(baseImage, 0, 0, w2, h2);
-          ctx.translate(center.x, center.y);
-          ctx.rotate(-radian);
-          ctx.translate(-center.x, -center.y);
-          const base = canvas.toDataURL("image/png");
-          this._cursorImageMap[key2] = base;
-        }
+      if (e.type === "over-element" || !e.type) {
+        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "auto");
+      } else if (e.type === "resize-rotate") {
+        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "rotate");
+      } else if (typeof e.type === "string" && ((_a = e.type) == null ? void 0 : _a.startsWith("resize-"))) {
+        __privateMethod(this, _setCursorResize, setCursorResize_fn).call(this, e);
+      } else if (e.type === "drag-default") {
+        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "drag-default");
+      } else if (e.type === "drag-active") {
+        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "drag-active");
+      } else {
+        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "auto");
       }
-      return key2;
+    });
+  };
+  _loadResizeCursorBaseImage = new WeakSet();
+  loadResizeCursorBaseImage_fn = function() {
+    loadImage(CURSOR_RESIZE).then((img) => {
+      __privateSet(this, _resizeCursorBaseImage, img);
+    }).catch((err) => {
+      console.error(err);
+    });
+  };
+  _resetCursor = new WeakSet();
+  resetCursor_fn = function(cursorKey) {
+    if (__privateGet(this, _cursorType) === cursorKey) {
+      return;
     }
-  }
+    __privateSet(this, _cursorType, cursorKey);
+    const image = __privateGet(this, _cursorImageMap)[__privateGet(this, _cursorType)] || __privateGet(this, _cursorImageMap)["auto"];
+    let offsetX = 0;
+    let offsetY = 0;
+    if (cursorKey.startsWith("rotate-") && __privateGet(this, _cursorImageMap)[__privateGet(this, _cursorType)]) {
+      offsetX = 10;
+      offsetY = 10;
+    } else if (cursorKey === "rotate") {
+      offsetX = 10;
+      offsetY = 10;
+    }
+    if (cursorKey === "default") {
+      __privateGet(this, _container).style.cursor = "default";
+    } else {
+      __privateGet(this, _container).style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
+    }
+  };
+  _setCursorResize = new WeakSet();
+  setCursorResize_fn = function(e) {
+    var _a;
+    let totalAngle = 0;
+    if (e.type === "resize-top") {
+      totalAngle += 0;
+    } else if (e.type === "resize-top-right") {
+      totalAngle += 45;
+    } else if (e.type === "resize-right") {
+      totalAngle += 90;
+    } else if (e.type === "resize-bottom-right") {
+      totalAngle += 135;
+    } else if (e.type === "resize-bottom") {
+      totalAngle += 180;
+    } else if (e.type === "resize-bottom-left") {
+      totalAngle += 225;
+    } else if (e.type === "resize-left") {
+      totalAngle += 270;
+    } else if (e.type === "resize-top-left") {
+      totalAngle += 315;
+    }
+    totalAngle += limitAngle(((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.angle) || 0);
+    if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
+      e.groupQueue.forEach((group) => {
+        totalAngle += limitAngle(group.angle || 0);
+      });
+    }
+    totalAngle = limitAngle(totalAngle);
+    const cursorKey = __privateMethod(this, _appendRotateResizeImage, appendRotateResizeImage_fn).call(this, totalAngle);
+    __privateMethod(this, _resetCursor, resetCursor_fn).call(this, cursorKey);
+  };
+  _appendRotateResizeImage = new WeakSet();
+  appendRotateResizeImage_fn = function(angle2) {
+    const key2 = `rotate-${angle2}`;
+    if (!__privateGet(this, _cursorImageMap)[key2]) {
+      const baseImage = __privateGet(this, _resizeCursorBaseImage);
+      if (baseImage) {
+        const canvas = document.createElement("canvas");
+        const w2 = baseImage.width;
+        const h2 = baseImage.height;
+        const center = {
+          x: w2 / 2,
+          y: h2 / 2
+        };
+        canvas.width = w2;
+        canvas.height = h2;
+        const ctx = canvas.getContext("2d");
+        const radian = parseAngleToRadian(angle2);
+        ctx.translate(center.x, center.y);
+        ctx.rotate(radian);
+        ctx.translate(-center.x, -center.y);
+        ctx.drawImage(baseImage, 0, 0, w2, h2);
+        ctx.translate(center.x, center.y);
+        ctx.rotate(-radian);
+        ctx.translate(-center.x, -center.y);
+        const base = canvas.toDataURL("image/png");
+        __privateGet(this, _cursorImageMap)[key2] = base;
+      }
+    }
+    return key2;
+  };
   const key$2 = "SELECT";
   const keyActionType = Symbol(`${key$2}_actionType`);
   const keyResizeType = Symbol(`${key$2}_resizeType`);
@@ -3778,6 +3886,7 @@ var __privateMethod = (obj, member, method) => {
   const areaBorderWidth = 1;
   const wrapperColor = "#1973ba";
   const lockColor = "#5b5959b5";
+  const controllerSize = 10;
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -3795,6 +3904,42 @@ var __privateMethod = (obj, member, method) => {
     ctx.stroke();
     ctx.fill();
   }
+  function drawLine(ctx, start, end, opts) {
+    const { borderColor: borderColor2, borderWidth: borderWidth2, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth2;
+    ctx.strokeStyle = borderColor2;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  function drawCircleController(ctx, circleCenter, opts) {
+    const { size, borderColor: borderColor2, borderWidth: borderWidth2, background: background2 } = opts;
+    const center = circleCenter;
+    const r = size / 2;
+    const a = r;
+    const b = r;
+    if (a >= 0 && b >= 0) {
+      if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+        const ba = borderWidth2 / 2 + a;
+        const bb = borderWidth2 / 2 + b;
+        ctx.beginPath();
+        ctx.strokeStyle = borderColor2;
+        ctx.lineWidth = borderWidth2;
+        ctx.circle(center.x, center.y, ba, bb, 0, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.stroke();
+      }
+      ctx.beginPath();
+      ctx.fillStyle = background2;
+      ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
   function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
       return;
@@ -3844,14 +3989,16 @@ var __privateMethod = (obj, member, method) => {
     if (!controller) {
       return;
     }
-    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight } = controller;
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
+    drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), { ...ctrlOpts, borderWidth: 2 });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: controllerSize, borderWidth: 2 });
   }
   function drawArea(ctx, opts) {
     const { start, end } = opts;
@@ -3941,8 +4088,8 @@ var __privateMethod = (obj, member, method) => {
     };
     const { ctx, data, calculator, selectedElements, viewScaleInfo, viewSizeInfo, areaSize, groupQueue, selectedElementController } = opts;
     if (selectedElementController) {
-      const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = selectedElementController;
-      const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight];
+      const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController;
+      const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate];
       for (let i = 0; i < ctrls.length; i++) {
         const ctrl = ctrls[i];
         if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) {
@@ -4522,6 +4669,24 @@ var __privateMethod = (obj, member, method) => {
     }
     return { x: x2, y: y2, w: w2, h: h2, angle: elem.angle };
   }
+  function rotateElement(elem, opts) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elem;
+    const { center, start, end, viewScaleInfo, viewSizeInfo } = opts;
+    const elemCenter = calcViewPointSize(center, {
+      viewScaleInfo,
+      viewSizeInfo
+    });
+    const startAngle = limitAngle(angle2);
+    const changedRadian = calcRadian(elemCenter, start, end);
+    const endAngle = startAngle + parseRadianToAngle(changedRadian);
+    return {
+      x: x2,
+      y: y2,
+      w: w2,
+      h: h2,
+      angle: endAngle
+    };
+  }
   function getSelectedListArea(data, opts) {
     var _a;
     const indexes = [];
@@ -4731,10 +4896,10 @@ var __privateMethod = (obj, member, method) => {
         elemH = element.h * scale;
       }
       textarea.style.position = "absolute";
-      textarea.style.left = `${elemX}px`;
-      textarea.style.top = `${elemY}px`;
-      textarea.style.width = `${elemW}px`;
-      textarea.style.height = `${elemH}px`;
+      textarea.style.left = `${elemX - 1}px`;
+      textarea.style.top = `${elemY - 1}px`;
+      textarea.style.width = `${elemW + 2}px`;
+      textarea.style.height = `${elemH + 2}px`;
       textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
       textarea.style.boxSizing = "border-box";
       textarea.style.border = "1px solid #1973ba";
@@ -4747,6 +4912,9 @@ var __privateMethod = (obj, member, method) => {
       textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
       textarea.style.fontFamily = detail.fontFamily;
       textarea.style.fontWeight = `${detail.fontWeight}`;
+      textarea.style.padding = "0";
+      textarea.style.margin = "0";
+      textarea.style.outline = "none";
       textarea.value = detail.text || "";
       parent.appendChild(textarea);
     };
@@ -4836,7 +5004,7 @@ var __privateMethod = (obj, member, method) => {
       if (list.length === 1) {
         const controller = calcElementSizeController(list[0], {
           groupQueue: sharer.getSharedStorage(keyGroupQueue),
-          controllerSize: 10,
+          controllerSize,
           viewScaleInfo: sharer.getActiveViewScaleInfo()
         });
         sharer.setSharedStorage(keySelectedElementController, controller);
@@ -5063,6 +5231,8 @@ var __privateMethod = (obj, member, method) => {
         const data = sharer.getActiveStorage("data");
         const elems = getActiveElements();
         const scale = sharer.getActiveStorage("scale") || 1;
+        const viewScaleInfo = sharer.getActiveViewScaleInfo();
+        const viewSizeInfo = sharer.getActiveViewSizeInfo();
         const start = prevPoint;
         const end = e.point;
         const resizeType = sharer.getSharedStorage(keyResizeType);
@@ -5112,17 +5282,38 @@ var __privateMethod = (obj, member, method) => {
               resizeStart = rotatePointInGroup(start, pointGroupQueue);
               resizeEnd = rotatePointInGroup(end, pointGroupQueue);
             }
-            const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-            elems[0].x = resizedElemSize.x;
-            elems[0].y = resizedElemSize.y;
-            if (elems[0].type === "group" && ((_c = elems[0].operations) == null ? void 0 : _c.deepResize) === true) {
-              deepResizeGroupElement(elems[0], {
-                w: resizedElemSize.w,
-                h: resizedElemSize.h
+            if (resizeType === "resize-rotate") {
+              const controller = sharer.getSharedStorage(keySelectedElementController);
+              const viewVertexes = [
+                controller.topLeft.center,
+                controller.topRight.center,
+                controller.bottomLeft.center,
+                controller.bottomRight.center
+              ];
+              const viewCenter = calcElementCenterFromVertexes(viewVertexes);
+              const resizedElemSize = rotateElement(elems[0], {
+                center: viewCenter,
+                viewScaleInfo,
+                viewSizeInfo,
+                start,
+                end,
+                resizeType,
+                sharer
               });
+              elems[0].angle = resizedElemSize.angle;
             } else {
-              elems[0].w = resizedElemSize.w;
-              elems[0].h = resizedElemSize.h;
+              const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
+              elems[0].x = resizedElemSize.x;
+              elems[0].y = resizedElemSize.y;
+              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();
@@ -5898,9 +6089,9 @@ var __privateMethod = (obj, member, method) => {
       __privateAdd(this, _board, void 0);
       // #opts: CoreOptions;
       __privateAdd(this, _canvas, void 0);
-      __privateAdd(this, _container, void 0);
+      __privateAdd(this, _container2, void 0);
       const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
-      __privateSet(this, _container, container);
+      __privateSet(this, _container2, container);
       const canvas = document.createElement("canvas");
       __privateSet(this, _canvas, canvas);
       __privateMethod(this, _initContainer, initContainer_fn).call(this);
@@ -5922,6 +6113,9 @@ var __privateMethod = (obj, member, method) => {
         eventHub
       });
     }
+    isDestroyed() {
+      return __privateGet(this, _board).isDestroyed();
+    }
     destroy() {
       __privateGet(this, _board).destroy();
       __privateGet(this, _canvas).remove();
@@ -5987,13 +6181,19 @@ var __privateMethod = (obj, member, method) => {
     getLoadItemMap() {
       return __privateGet(this, _board).getRenderer().getLoadItemMap();
     }
+    onBoardWatcherEvents() {
+      __privateGet(this, _board).onWatcherEvents();
+    }
+    offBoardWatcherEvents() {
+      __privateGet(this, _board).offWatcherEvents();
+    }
   }
   _board = new WeakMap();
   _canvas = new WeakMap();
-  _container = new WeakMap();
+  _container2 = new WeakMap();
   _initContainer = new WeakSet();
   initContainer_fn = function() {
-    const container = __privateGet(this, _container);
+    const container = __privateGet(this, _container2);
     container.style.position = "relative";
   };
   exports.Core = Core;