@idraw/core 0.4.0-beta.34 → 0.4.0-beta.36

package/dist/index.global.js

@@ -1,28 +1,14 @@
 var iDrawCore = function(exports) {
-  "use strict";var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
+  "use strict";var __typeError = (msg) => {
+  throw TypeError(msg);
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  var _eventHub, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _init, init_fn, _loadResizeCursorBaseImage, loadResizeCursorBaseImage_fn, _resetCursor, resetCursor_fn, _setCursorResize, setCursorResize_fn, _appendRotateResizeImage, appendRotateResizeImage_fn, _board, _canvas, _container2, _initContainer, initContainer_fn;
+  var _eventHub, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _Cursor_instances, init_fn, loadResizeCursorBaseImage_fn, resetCursor_fn, setCursorResize_fn, appendRotateResizeImage_fn, _board, _canvas, _container2, _Core_instances, initContainer_fn;
   function isColorStr(color2) {
     return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
@@ -350,19 +336,14 @@ var __privateMethod = (obj, member, method) => {
     strokeWidth
   };
   var __classPrivateFieldSet$9 = 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");
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
   };
   var __classPrivateFieldGet$9 = function(receiver, state, kind, f) {
-    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");
+    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 _Context2D_ctx, _Context2D_opts;
@@ -726,19 +707,14 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   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");
+    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");
+    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;
@@ -809,29 +785,26 @@ var __privateMethod = (obj, member, method) => {
     };
   }
   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");
+    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");
+    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;
+  var _Store_instances, _Store_temp, _Store_backUpDefaultStorage, _Store_static, _Store_createTempStorage;
   class Store {
     constructor(opts) {
       _Store_instances.add(this);
       _Store_temp.set(this, void 0);
       _Store_backUpDefaultStorage.set(this, void 0);
+      _Store_static.set(this, void 0);
       __classPrivateFieldSet$7(this, _Store_backUpDefaultStorage, deepClone(opts.defaultStorage), "f");
       __classPrivateFieldSet$7(this, _Store_temp, __classPrivateFieldGet$7(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
+      __classPrivateFieldSet$7(this, _Store_static, opts.defaultStatic || {}, "f");
     }
     set(name, value) {
       __classPrivateFieldGet$7(this, _Store_temp, "f")[name] = value;
@@ -839,6 +812,12 @@ var __privateMethod = (obj, member, method) => {
     get(name) {
       return __classPrivateFieldGet$7(this, _Store_temp, "f")[name];
     }
+    setStatic(name, value) {
+      __classPrivateFieldGet$7(this, _Store_static, "f")[name] = value;
+    }
+    getStatic(name) {
+      return __classPrivateFieldGet$7(this, _Store_static, "f")[name];
+    }
     getSnapshot(opts) {
       if ((opts === null || opts === void 0 ? void 0 : opts.deepClone) === true) {
         return deepClone(__classPrivateFieldGet$7(this, _Store_temp, "f"));
@@ -850,9 +829,10 @@ var __privateMethod = (obj, member, method) => {
     }
     destroy() {
       __classPrivateFieldSet$7(this, _Store_temp, null, "f");
+      __classPrivateFieldSet$7(this, _Store_static, null, "f");
     }
   }
-  _Store_temp = /* @__PURE__ */ new WeakMap(), _Store_backUpDefaultStorage = /* @__PURE__ */ new WeakMap(), _Store_instances = /* @__PURE__ */ new WeakSet(), _Store_createTempStorage = function _Store_createTempStorage2() {
+  _Store_temp = /* @__PURE__ */ new WeakMap(), _Store_backUpDefaultStorage = /* @__PURE__ */ new WeakMap(), _Store_static = /* @__PURE__ */ new WeakMap(), _Store_instances = /* @__PURE__ */ new WeakSet(), _Store_createTempStorage = function _Store_createTempStorage2() {
     return deepClone(__classPrivateFieldGet$7(this, _Store_backUpDefaultStorage, "f"));
   };
   function getViewScaleInfoFromSnapshot(snapshot) {
@@ -924,16 +904,10 @@ 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;
-      }
+    const startRadian = calcLineRadian(center, start);
+    const endRadian = calcLineRadian(center, end);
+    if (endRadian !== null && startRadian !== null) {
+      return endRadian - startRadian;
     } else {
       return 0;
     }
@@ -1059,12 +1033,14 @@ var __privateMethod = (obj, member, method) => {
     ];
   }
   function limitAngle(angle2) {
-    if (!(angle2 > 0 || angle2 < 0) || angle2 === 0) {
+    if (!(angle2 > 0 || angle2 < 0) || angle2 === 0 || angle2 === 360) {
       return 0;
     }
     let num = angle2 % 360;
     if (num < 0) {
       num += 360;
+    } else if (angle2 === 360) {
+      num = 0;
     }
     return num;
   }
@@ -1266,6 +1242,36 @@ var __privateMethod = (obj, member, method) => {
     _loop(elements);
     return result;
   }
+  function getElementPositionMapFromList(uuids, elements) {
+    const currentPosition = [];
+    const positionMap = {};
+    let over = false;
+    const _loop = (list) => {
+      var _a;
+      for (let i = 0; i < list.length; i++) {
+        if (over === true) {
+          break;
+        }
+        currentPosition.push(i);
+        const elem = list[i];
+        if (uuids.includes(elem.uuid)) {
+          positionMap[elem.uuid] = [...currentPosition];
+          if (Object.keys(positionMap).length === uuids.length) {
+            over = true;
+            break;
+          }
+        } else if (elem.type === "group") {
+          _loop(((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+        }
+        if (over) {
+          break;
+        }
+        currentPosition.pop();
+      }
+    };
+    _loop(elements);
+    return positionMap;
+  }
   function getElementVertexes(elemSize) {
     const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
     return [
@@ -1681,9 +1687,11 @@ var __privateMethod = (obj, member, method) => {
     };
   }
   function calcElementSizeController(elemSize, opts) {
-    const { groupQueue, controllerSize: controllerSize2, viewScaleInfo } = opts;
+    const { groupQueue, controllerSize: controllerSize2, viewScaleInfo, rotateControllerSize: rotateControllerSize2, rotateControllerPosition: rotateControllerPosition2 } = opts;
     const ctrlSize = (controllerSize2 && controllerSize2 > 0 ? controllerSize2 : 8) / viewScaleInfo.scale;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    const rotateCtrlSize = rotateControllerSize2;
+    const rotateCtrlPos = rotateControllerPosition2;
     const ctrlGroupQueue = [
       ...[
         {
@@ -1705,10 +1713,10 @@ var __privateMethod = (obj, member, method) => {
     });
     const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
     const rotateElemVertexes = calcElementVertexesInGroup({
-      x: x2 - ctrlSize * 2,
-      y: y2 - ctrlSize * 2,
-      h: h2 + ctrlSize * 4,
-      w: w2 + ctrlSize * 4,
+      x: x2,
+      y: y2 - (rotateCtrlPos + rotateCtrlSize / 2) / viewScaleInfo.scale,
+      h: h2 + (rotateCtrlPos * 2 + rotateCtrlSize) / viewScaleInfo.scale,
+      w: w2,
       angle: angle2
     }, { groupQueue: [...groupQueue] });
     const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
@@ -1740,74 +1748,91 @@ var __privateMethod = (obj, member, method) => {
     const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
     const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
     const rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]);
-    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, { size: ctrlSize, angle: totalAngle });
+    const tempRotateSizeRepairRatio = 1.1;
+    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, {
+      size: rotateControllerSize2 * tempRotateSizeRepairRatio / viewScaleInfo.scale,
+      angle: totalAngle
+    });
     const rotateVertexes2 = calcElementVertexes(rotateSize);
     const sizeController = {
       elementWrapper: vertexes,
       left: {
         type: "left",
         vertexes: leftVertexes,
-        center: leftCenter
+        center: leftCenter,
+        size: ctrlSize
       },
       right: {
         type: "right",
         vertexes: rightVertexes,
-        center: rightCenter
+        center: rightCenter,
+        size: ctrlSize
       },
       top: {
         type: "top",
         vertexes: topVertexes,
-        center: topCenter
+        center: topCenter,
+        size: ctrlSize
       },
       bottom: {
         type: "bottom",
         vertexes: bottomVertexes,
-        center: bottomCenter
+        center: bottomCenter,
+        size: ctrlSize
       },
       topLeft: {
         type: "top-left",
         vertexes: topLeftVertexes,
-        center: topLeftCenter
+        center: topLeftCenter,
+        size: ctrlSize
       },
       topRight: {
         type: "top-right",
         vertexes: topRightVertexes,
-        center: topRightCenter
+        center: topRightCenter,
+        size: ctrlSize
       },
       bottomLeft: {
         type: "bottom-left",
         vertexes: bottomLeftVertexes,
-        center: bottomLeftCenter
+        center: bottomLeftCenter,
+        size: ctrlSize
       },
       bottomRight: {
         type: "bottom-right",
         vertexes: bottomRightVertexes,
-        center: bottomRightCenter
+        center: bottomRightCenter,
+        size: ctrlSize
       },
       leftMiddle: {
         type: "left-middle",
         vertexes: leftMiddleVertexes,
-        center: leftCenter
+        center: leftCenter,
+        size: ctrlSize
       },
       rightMiddle: {
         type: "right-middle",
         vertexes: rightMiddleVertexes,
-        center: rightCenter
+        center: rightCenter,
+        size: ctrlSize
       },
       topMiddle: {
         type: "top-middle",
         vertexes: topMiddleVertexes,
-        center: topCenter
+        center: topCenter,
+        size: ctrlSize
       },
       bottomMiddle: {
         type: "bottom-middle",
         vertexes: bottomMiddleVertexes,
-        center: bottomCenter
+        center: bottomCenter,
+        size: ctrlSize
       },
       rotate: {
         type: "rotate",
         vertexes: rotateVertexes2,
-        center: rotateCenter
+        center: rotateCenter,
+        size: rotateControllerSize2
       }
     };
     return sizeController;
@@ -1849,62 +1874,74 @@ var __privateMethod = (obj, member, method) => {
       left: {
         type: "left",
         vertexes: leftVertexes,
-        center: leftCenter
+        center: leftCenter,
+        size: ctrlSize
       },
       right: {
         type: "right",
         vertexes: rightVertexes,
-        center: rightCenter
+        center: rightCenter,
+        size: ctrlSize
       },
       top: {
         type: "top",
         vertexes: topVertexes,
-        center: topCenter
+        center: topCenter,
+        size: ctrlSize
       },
       bottom: {
         type: "bottom",
         vertexes: bottomVertexes,
-        center: bottomCenter
+        center: bottomCenter,
+        size: ctrlSize
       },
       topLeft: {
         type: "top-left",
         vertexes: topLeftVertexes,
-        center: topLeftCenter
+        center: topLeftCenter,
+        size: ctrlSize
       },
       topRight: {
         type: "top-right",
         vertexes: topRightVertexes,
-        center: topRightCenter
+        center: topRightCenter,
+        size: ctrlSize
       },
       bottomLeft: {
         type: "bottom-left",
         vertexes: bottomLeftVertexes,
-        center: bottomLeftCenter
+        center: bottomLeftCenter,
+        size: ctrlSize
       },
       bottomRight: {
         type: "bottom-right",
         vertexes: bottomRightVertexes,
-        center: bottomRightCenter
+        center: bottomRightCenter,
+        size: ctrlSize
       },
       leftMiddle: {
         type: "left-middle",
         vertexes: leftMiddleVertexes,
-        center: leftCenter
+        center: leftCenter,
+        size: ctrlSize
       },
       rightMiddle: {
         type: "right-middle",
         vertexes: rightMiddleVertexes,
-        center: rightCenter
+        center: rightCenter,
+        size: ctrlSize
       },
       topMiddle: {
         type: "top-middle",
         vertexes: topMiddleVertexes,
-        center: topCenter
+        center: topCenter,
+        size: ctrlSize
       },
       bottomMiddle: {
         type: "bottom-middle",
         vertexes: bottomMiddleVertexes,
-        center: bottomCenter
+        center: bottomCenter,
+        size: ctrlSize
       }
     };
     return sizeController;
@@ -2056,18 +2093,13 @@ var __privateMethod = (obj, member, method) => {
   function resizeElement$1(elem, opts) {
     const { type } = elem;
     resizeElementBase(elem, opts);
-    if (type === "circle")
-      ;
+    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 === "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);
@@ -2101,9 +2133,8 @@ var __privateMethod = (obj, member, method) => {
   }
   (function(s, e) {
     var t = {};
-    for (var p in s)
-      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
       for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
         if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
@@ -2834,9 +2865,8 @@ var __privateMethod = (obj, member, method) => {
   }
   var __rest = function(s, e) {
     var t = {};
-    for (var p in s)
-      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
       for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
         if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
@@ -3152,19 +3182,14 @@ var __privateMethod = (obj, member, method) => {
     });
   };
   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");
+    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");
+    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_hasDestroyed, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
@@ -3206,8 +3231,8 @@ var __privateMethod = (obj, member, method) => {
         };
       }));
       __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;
+        var _a;
+        const html2 = ((_a = assets[elem.detail.html]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.html;
         const content = yield loadHTML(html2, {
           width: elem.detail.originW || elem.w,
           height: elem.detail.originH || elem.h
@@ -3219,8 +3244,8 @@ var __privateMethod = (obj, member, method) => {
         };
       }));
       __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;
+        var _a;
+        const svg2 = ((_a = assets[elem.detail.svg]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.svg;
         const content = yield loadSVG(svg2);
         return {
           uuid: elem.uuid,
@@ -3349,19 +3374,14 @@ var __privateMethod = (obj, member, method) => {
     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");
+    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");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
   var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_hasDestroyed, _Renderer_init;
@@ -3461,19 +3481,14 @@ var __privateMethod = (obj, member, method) => {
     });
   };
   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");
+    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");
+    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, _Calculator_store;
@@ -3635,19 +3650,14 @@ var __privateMethod = (obj, member, method) => {
   }
   _Calculator_opts = /* @__PURE__ */ new WeakMap(), _Calculator_store = /* @__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");
+    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");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
   var _BoardWatcher_instances, _BoardWatcher_opts, _BoardWatcher_store, _BoardWatcher_hasDestroyed, _BoardWatcher_init, _BoardWatcher_onWheel, _BoardWatcher_onContextMenu, _BoardWatcher_onClick, _BoardWatcher_onPointLeave, _BoardWatcher_onPointEnd, _BoardWatcher_onPointMove, _BoardWatcher_onPointStart, _BoardWatcher_onHover, _BoardWatcher_isInTarget, _BoardWatcher_getPoint, _BoardWatcher_isVaildPoint;
@@ -3713,9 +3723,6 @@ var __privateMethod = (obj, member, method) => {
       });
       _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 = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
         this.trigger("pointLeave", { point });
@@ -3765,8 +3772,13 @@ var __privateMethod = (obj, member, method) => {
       });
       _BoardWatcher_onHover.set(this, (e) => {
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+          if (__classPrivateFieldGet$3(this, _BoardWatcher_store, "f").get("inCanvas") === true) {
+            __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("inCanvas", false);
+            __classPrivateFieldGet$3(this, _BoardWatcher_onPointLeave, "f").call(this, e);
+          }
           return;
         }
+        __classPrivateFieldGet$3(this, _BoardWatcher_store, "f").set("inCanvas", true);
         e.preventDefault();
         const point = __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
@@ -3774,7 +3786,7 @@ var __privateMethod = (obj, member, method) => {
         }
         this.trigger("hover", { point });
       });
-      const store = new Store({ defaultStorage: { hasPointDown: false, prevClickPoint: null } });
+      const store = new Store({ defaultStorage: { hasPointDown: false, prevClickPoint: null, inCanvas: true } });
       __classPrivateFieldSet$3(this, _BoardWatcher_store, store, "f");
       __classPrivateFieldSet$3(this, _BoardWatcher_opts, opts, "f");
       __classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_init).call(this);
@@ -3788,7 +3800,6 @@ var __privateMethod = (obj, member, method) => {
       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"));
@@ -3832,19 +3843,14 @@ var __privateMethod = (obj, member, method) => {
     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");
+    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");
+    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;
@@ -3937,19 +3943,14 @@ var __privateMethod = (obj, member, method) => {
   }
   _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");
+    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");
+    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;
@@ -4105,22 +4106,17 @@ var __privateMethod = (obj, member, method) => {
     }
   };
   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");
+    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");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
-  var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handleHover, _Board_handleDoubleClick, _Board_handleContextMenu, _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_handlePointLeave, _Board_handleHover, _Board_handleDoubleClick, _Board_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
   class Board {
     constructor(opts) {
       _Board_instances.add(this);
@@ -4306,6 +4302,7 @@ var __privateMethod = (obj, member, method) => {
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointStart", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointEnd", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).bind(this));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointLeave", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointLeave).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("hover", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("wheel", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("wheelScale", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).bind(this));
@@ -4344,6 +4341,15 @@ var __privateMethod = (obj, member, method) => {
         return;
       }
     }
+  }, _Board_handlePointLeave = function _Board_handlePointLeave2(e) {
+    var _a;
+    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
+      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
+      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.pointLeave) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+      if (result === false) {
+        return;
+      }
+    }
   }, _Board_handleHover = function _Board_handleHover2(e) {
     var _a;
     for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
@@ -4491,13 +4497,9 @@ var __privateMethod = (obj, member, method) => {
   });
   class Cursor {
     constructor(container, opts) {
-      __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, _Cursor_instances);
+      __privateAdd(this, _eventHub);
+      __privateAdd(this, _container);
       __privateAdd(this, _cursorType, null);
       __privateAdd(this, _resizeCursorBaseImage, null);
       __privateAdd(this, _cursorImageMap, {
@@ -4509,8 +4511,8 @@ var __privateMethod = (obj, member, method) => {
       });
       __privateSet(this, _container, container);
       __privateSet(this, _eventHub, opts.eventHub);
-      __privateMethod(this, _init, init_fn).call(this);
-      __privateMethod(this, _loadResizeCursorBaseImage, loadResizeCursorBaseImage_fn).call(this);
+      __privateMethod(this, _Cursor_instances, init_fn).call(this);
+      __privateMethod(this, _Cursor_instances, loadResizeCursorBaseImage_fn).call(this);
     }
   }
   _eventHub = new WeakMap();
@@ -4518,28 +4520,27 @@ var __privateMethod = (obj, member, method) => {
   _cursorType = new WeakMap();
   _resizeCursorBaseImage = new WeakMap();
   _cursorImageMap = new WeakMap();
-  _init = new WeakSet();
+  _Cursor_instances = new WeakSet();
   init_fn = function() {
     const eventHub = __privateGet(this, _eventHub);
-    __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "default");
+    __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, "default");
     eventHub.on(coreEventKeys.CURSOR, (e) => {
       var _a;
       if (e.type === "over-element" || !e.type) {
-        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "auto");
+        __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, "auto");
       } else if (e.type === "resize-rotate") {
-        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "rotate");
+        __privateMethod(this, _Cursor_instances, 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);
+        __privateMethod(this, _Cursor_instances, setCursorResize_fn).call(this, e);
       } else if (e.type === "drag-default") {
-        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "drag-default");
+        __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, "drag-default");
       } else if (e.type === "drag-active") {
-        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "drag-active");
+        __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, "drag-active");
       } else {
-        __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "auto");
+        __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, "auto");
       }
     });
   };
-  _loadResizeCursorBaseImage = new WeakSet();
   loadResizeCursorBaseImage_fn = function() {
     loadImage(CURSOR_RESIZE).then((img) => {
       __privateSet(this, _resizeCursorBaseImage, img);
@@ -4547,7 +4548,6 @@ var __privateMethod = (obj, member, method) => {
       console.error(err);
     });
   };
-  _resetCursor = new WeakSet();
   resetCursor_fn = function(cursorKey) {
     if (__privateGet(this, _cursorType) === cursorKey) {
       return;
@@ -4569,7 +4569,6 @@ var __privateMethod = (obj, member, method) => {
       __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;
@@ -4597,10 +4596,9 @@ var __privateMethod = (obj, member, method) => {
       });
     }
     totalAngle = limitAngle(totalAngle);
-    const cursorKey = __privateMethod(this, _appendRotateResizeImage, appendRotateResizeImage_fn).call(this, totalAngle);
-    __privateMethod(this, _resetCursor, resetCursor_fn).call(this, cursorKey);
+    const cursorKey = __privateMethod(this, _Cursor_instances, appendRotateResizeImage_fn).call(this, totalAngle);
+    __privateMethod(this, _Cursor_instances, resetCursor_fn).call(this, cursorKey);
   };
-  _appendRotateResizeImage = new WeakSet();
   appendRotateResizeImage_fn = function(angle2) {
     const key2 = `rotate-${angle2}`;
     if (!__privateGet(this, _cursorImageMap)[key2]) {
@@ -4650,6 +4648,8 @@ var __privateMethod = (obj, member, method) => {
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
   const controllerSize$1 = 10;
+  const rotateControllerSize = 20;
+  const rotateControllerPosition = 22;
   const activeColor = "#1973ba";
   const activeAreaColor = "#1976d21c";
   const lockedColor = "#5b5959b5";
@@ -4797,21 +4797,35 @@ var __privateMethod = (obj, member, method) => {
     }
     const {
       hideControllers,
-      style
+      style,
+      rotateControllerPattern,
+      viewSizeInfo
       // calculator, element, viewScaleInfo, viewSizeInfo
     } = opts;
+    const { devicePixelRatio = 1 } = viewSizeInfo;
     const { activeColor: activeColor2 } = style;
-    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
     const wrapperOpts = { borderColor: activeColor2, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     if (!hideControllers) {
-      drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), { ...ctrlOpts, borderWidth: 2 });
       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$1, borderWidth: 2 });
+      drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: rotate.size, borderWidth: 0 });
+      const rotateCenter = calcViewPointSize(rotate.center, opts);
+      ctx.drawImage(
+        rotateControllerPattern.canvas,
+        0,
+        0,
+        rotateControllerPattern.canvas.width / devicePixelRatio,
+        rotateControllerPattern.canvas.height / devicePixelRatio,
+        rotateCenter.x - rotate.size / 2,
+        rotateCenter.y - rotate.size / 2,
+        rotate.size,
+        rotate.size
+      );
     }
   }
   function drawArea(ctx, opts) {
@@ -5525,7 +5539,7 @@ var __privateMethod = (obj, member, method) => {
     });
     const startAngle = limitAngle(angle2);
     const changedRadian = calcRadian(elemCenter, start, end);
-    const endAngle = startAngle + parseRadianToAngle(changedRadian);
+    const endAngle = limitAngle(startAngle + parseRadianToAngle(changedRadian));
     return {
       x: x2,
       y: y2,
@@ -6305,70 +6319,523 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const MiddlewareSelector = (opts, config) => {
+  const createIconRotate = (opts) => {
+    const iconRotate = {
+      uuid: createUUID(),
+      type: "path",
+      x: 0,
+      y: 0,
+      w: 200,
+      h: 200,
+      detail: {
+        commands: [
+          {
+            type: "M",
+            params: [512, 0]
+          },
+          {
+            type: "c",
+            params: [282.8, 0, 512, 229.2, 512, 512]
+          },
+          {
+            type: "s",
+            params: [-229.2, 512, -512, 512]
+          },
+          {
+            type: "S",
+            params: [0, 794.8, 0, 512, 229.2, 0, 512, 0]
+          },
+          {
+            type: "z",
+            params: []
+          },
+          {
+            type: "m",
+            params: [309.8, 253.8]
+          },
+          {
+            type: "c",
+            params: [0, -10.5, -6.5, -19.8, -15.7, -23.8, -9.7, -4, -21, -2, -28.2, 5.6]
+          },
+          {
+            type: "l",
+            params: [-52.5, 52]
+          },
+          {
+            type: "c",
+            params: [
+              -56.9,
+              -53.7,
+              -133.9,
+              -85.5,
+              -213.4,
+              -85.5,
+              -170.7,
+              0,
+              -309.8,
+              139.2,
+              -309.8,
+              309.8,
+              0,
+              170.6,
+              139.2,
+              309.8,
+              309.8,
+              309.8,
+              92.4,
+              0,
+              179.5,
+              -40.8,
+              238.4,
+              -111.8,
+              4,
+              -5.2,
+              4,
+              -12.9,
+              -0.8,
+              -17.3
+            ]
+          },
+          {
+            type: "L",
+            params: [694.3, 637]
+          },
+          {
+            type: "c",
+            params: [
+              -2.8,
+              -2.4,
+              -6.5,
+              -3.6,
+              -10.1,
+              -3.6,
+              -3.6,
+              0.4,
+              -7.3,
+              2,
+              -9.3,
+              4.8,
+              -39.5,
+              51.2,
+              -98.8,
+              80.3,
+              -163,
+              80.3,
+              -113.8,
+              0,
+              -206.5,
+              -92.8,
+              -206.5,
+              -206.5,
+              0,
+              -113.8,
+              92.8,
+              -206.5,
+              206.5,
+              -206.5,
+              52.8,
+              0,
+              102.9,
+              20.2,
+              140.8,
+              55.3
+            ]
+          },
+          {
+            type: "L",
+            params: [597, 416.5]
+          },
+          {
+            type: "c",
+            params: [-7.7, 7.3, -9.7, 18.6, -5.6, 27.9, 4, 9.7, 13.3, 16.1, 23.8, 16.1]
+          },
+          {
+            type: "H",
+            params: [796]
+          },
+          {
+            type: "c",
+            params: [14.1, 0, 25.8, -11.7, 25.8, -25.8]
+          },
+          {
+            type: "V",
+            params: [253.8]
+          },
+          {
+            type: "z",
+            params: []
+          }
+        ],
+        fill: "#2c2c2c",
+        stroke: "transparent",
+        strokeWidth: 0,
+        originX: 0,
+        originY: 0,
+        originW: 1024,
+        originH: 1024,
+        opacity: 1,
+        ...opts
+      }
+    };
+    return iconRotate;
+  };
+  function createRotateControllerPattern(opts) {
+    const { fill, devicePixelRatio } = opts;
+    const iconRotate = createIconRotate({ fill });
+    const { w: w2, h: h2 } = iconRotate;
+    const context2d = createOffscreenContext2D({
+      width: w2,
+      height: h2,
+      devicePixelRatio
+    });
+    drawElement(context2d, iconRotate, {
+      loader: void 0,
+      viewScaleInfo: {
+        scale: 1,
+        offsetTop: 0,
+        offsetBottom: 0,
+        offsetLeft: 0,
+        offsetRight: 0
+      },
+      viewSizeInfo: {
+        width: w2,
+        height: h2,
+        devicePixelRatio,
+        contextWidth: w2,
+        contextHeight: h2
+      },
+      parentElementSize: {
+        x: 0,
+        y: 0,
+        w: w2,
+        h: h2
+      },
+      parentOpacity: 1
+    });
+    return context2d;
+  }
+  const fontFamily$1 = "monospace";
+  function drawSizeInfoText(ctx, opts) {
+    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { textColor: textColor2, textBackground } = style;
+    rotateByCenter(ctx, angle2, rotateCenter, () => {
+      ctx.$setFont({
+        fontWeight: "300",
+        fontSize: fontSize2,
+        fontFamily: fontFamily$1
+      });
+      const padding = (lineHeight2 - fontSize2) / 2;
+      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
+      const bgStart = {
+        x: point.x - textWidth / 2 - padding,
+        y: point.y
+      };
+      const bgEnd = {
+        x: bgStart.x + textWidth + padding * 2,
+        y: bgStart.y + fontSize2 + padding
+      };
+      const textStart = {
+        x: point.x - textWidth / 2,
+        y: point.y
+      };
+      ctx.setLineDash([]);
+      ctx.fillStyle = textBackground;
+      ctx.beginPath();
+      ctx.moveTo(bgStart.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgEnd.y);
+      ctx.lineTo(bgStart.x, bgEnd.y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = textColor2;
+      ctx.textBaseline = "top";
+      ctx.fillText(text2, textStart.x, textStart.y + padding);
+    });
+  }
+  function drawPositionInfoText(ctx, opts) {
+    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { textBackground, textColor: textColor2 } = style;
+    rotateByCenter(ctx, angle2, rotateCenter, () => {
+      ctx.$setFont({
+        fontWeight: "300",
+        fontSize: fontSize2,
+        fontFamily: fontFamily$1
+      });
+      const padding = (lineHeight2 - fontSize2) / 2;
+      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
+      const bgStart = {
+        x: point.x,
+        y: point.y
+      };
+      const bgEnd = {
+        x: bgStart.x + textWidth + padding * 2,
+        y: bgStart.y + fontSize2 + padding
+      };
+      const textStart = {
+        x: point.x + padding,
+        y: point.y
+      };
+      ctx.setLineDash([]);
+      ctx.fillStyle = textBackground;
+      ctx.beginPath();
+      ctx.moveTo(bgStart.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgEnd.y);
+      ctx.lineTo(bgStart.x, bgEnd.y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = textColor2;
+      ctx.textBaseline = "top";
+      ctx.fillText(text2, textStart.x, textStart.y + padding);
+    });
+  }
+  function drawAngleInfoText(ctx, opts) {
+    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { textBackground, textColor: textColor2 } = style;
+    rotateByCenter(ctx, angle2, rotateCenter, () => {
+      ctx.$setFont({
+        fontWeight: "300",
+        fontSize: fontSize2,
+        fontFamily: fontFamily$1
+      });
+      const padding = (lineHeight2 - fontSize2) / 2;
+      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
+      const bgStart = {
+        x: point.x,
+        y: point.y
+      };
+      const bgEnd = {
+        x: bgStart.x + textWidth + padding * 2,
+        y: bgStart.y + fontSize2 + padding
+      };
+      const textStart = {
+        x: point.x + padding,
+        y: point.y
+      };
+      ctx.setLineDash([]);
+      ctx.fillStyle = textBackground;
+      ctx.beginPath();
+      ctx.moveTo(bgStart.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgStart.y);
+      ctx.lineTo(bgEnd.x, bgEnd.y);
+      ctx.lineTo(bgStart.x, bgEnd.y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = textColor2;
+      ctx.textBaseline = "top";
+      ctx.fillText(text2, textStart.x, textStart.y + padding);
+    });
+  }
+  const infoBackground = "#1973bac6";
+  const infoTextColor = "#ffffff";
+  const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = "@middleware/internal-event/show-info-angle";
+  const defaltStyle = {
+    textBackground: infoBackground,
+    textColor: infoTextColor
+  };
+  const infoFontSize = 10;
+  const infoLineHeight = 16;
+  const MiddlewareInfo = (opts, config) => {
+    const { boardContent, calculator, eventHub } = opts;
+    const { overlayContext } = boardContent;
     const innerConfig = {
-      ...defaultStyle$3,
+      ...defaltStyle,
       ...config
     };
-    const { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 } = innerConfig;
-    const style = { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 };
-    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
-    const { overlayContext } = boardContent;
-    let prevPoint = null;
-    let moveOriginalStartPoint = null;
-    let moveOriginalStartElementSize = null;
-    let inBusyMode = null;
-    sharer.setSharedStorage(keyActionType, null);
-    sharer.setSharedStorage(keyEnableSnapToGrid, true);
-    const getActiveElements = () => {
-      return sharer.getSharedStorage(keySelectedElementList);
+    const { textBackground, textColor: textColor2 } = innerConfig;
+    const style = {
+      textBackground,
+      textColor: textColor2
     };
-    const pushGroupQueue = (elem) => {
-      let groupQueue = sharer.getSharedStorage(keyGroupQueue);
-      if (!Array.isArray(groupQueue)) {
-        groupQueue = [];
-      }
-      if (groupQueue.length > 0) {
-        if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
-          groupQueue.push(elem);
-        } else {
-          groupQueue = [];
-        }
-      } else if (groupQueue.length === 0) {
-        groupQueue.push(elem);
-      }
-      const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue);
-      sharer.setSharedStorage(keyGroupQueue, groupQueue);
-      sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList);
-      return groupQueue.length > 0;
+    let showAngleInfo = true;
+    const showInfoAngleCallback = ({ show }) => {
+      showAngleInfo = show;
     };
-    const updateHoverElement = (elem) => {
-      sharer.setSharedStorage(keyHoverElement, elem);
-      let vertexes = null;
-      if (elem) {
+    return {
+      name: "@middleware/info",
+      use() {
+        eventHub.on(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+      },
+      disuse() {
+        eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+      },
+      beforeDrawFrame({ snapshot }) {
+        const { sharedStore } = snapshot;
+        const selectedElementList = sharedStore[keySelectedElementList];
+        const actionType = sharedStore[keyActionType];
+        const groupQueue = sharedStore[keyGroupQueue] || [];
+        if (selectedElementList.length === 1) {
+          const elem = selectedElementList[0];
+          if (elem && ["select", "drag", "resize"].includes(actionType)) {
+            const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+            const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+            const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
+            const totalGroupQueue = [
+              ...groupQueue,
+              ...[
+                {
+                  uuid: createUUID(),
+                  x: x2,
+                  y: y2,
+                  w: w2,
+                  h: h2,
+                  angle: angle2,
+                  type: "group",
+                  detail: { children: [] }
+                }
+              ]
+            ];
+            const calcOpts = { viewScaleInfo, viewSizeInfo };
+            const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
+            let totalAngle = 0;
+            totalGroupQueue.forEach((group) => {
+              totalAngle += group.angle || 0;
+            });
+            const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
+            if (rangeRectInfo) {
+              const elemCenter = rangeRectInfo == null ? void 0 : rangeRectInfo.center;
+              const rectInfo = {
+                topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
+                topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
+                bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
+                bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
+                center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
+                top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
+                right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
+                bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
+                left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
+              };
+              const x22 = formatNumber(elem.x, { decimalPlaces: 2 });
+              const y22 = formatNumber(elem.y, { decimalPlaces: 2 });
+              const w22 = formatNumber(elem.w, { decimalPlaces: 2 });
+              const h22 = formatNumber(elem.h, { decimalPlaces: 2 });
+              const xyText = `${formatNumber(x22, { decimalPlaces: 0 })},${formatNumber(y22, { decimalPlaces: 0 })}`;
+              const whText = `${formatNumber(w22, { decimalPlaces: 0 })}x${formatNumber(h22, { decimalPlaces: 0 })}`;
+              const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
+              drawSizeInfoText(overlayContext, {
+                point: {
+                  x: rectInfo.bottom.x,
+                  y: rectInfo.bottom.y + infoFontSize
+                },
+                rotateCenter: rectInfo.center,
+                angle: totalAngle,
+                text: whText,
+                fontSize: infoFontSize,
+                lineHeight: infoLineHeight,
+                style
+              });
+              drawPositionInfoText(overlayContext, {
+                point: {
+                  x: rectInfo.topLeft.x,
+                  y: rectInfo.topLeft.y - infoFontSize * 2
+                },
+                rotateCenter: rectInfo.center,
+                angle: totalAngle,
+                text: xyText,
+                fontSize: infoFontSize,
+                lineHeight: infoLineHeight,
+                style
+              });
+              if (showAngleInfo) {
+                drawAngleInfoText(overlayContext, {
+                  point: {
+                    x: rectInfo.top.x + infoFontSize + 4,
+                    y: rectInfo.top.y - infoFontSize * 2 - 18
+                  },
+                  rotateCenter: rectInfo.center,
+                  angle: totalAngle,
+                  text: angleText,
+                  fontSize: infoFontSize,
+                  lineHeight: infoLineHeight,
+                  style
+                });
+              }
+            }
+          }
+        }
+      }
+    };
+  };
+  const MiddlewareSelector = (opts, config) => {
+    const innerConfig = {
+      ...defaultStyle$3,
+      ...config
+    };
+    const { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 } = innerConfig;
+    const style = { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 };
+    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
+    const { overlayContext } = boardContent;
+    let prevPoint = null;
+    let moveOriginalStartPoint = null;
+    let moveOriginalStartElementSize = null;
+    let inBusyMode = null;
+    let hasChangedData = null;
+    const rotateControllerPattern = createRotateControllerPattern({
+      fill: style.activeColor,
+      devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
+    });
+    sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
+    const getActiveElements = () => {
+      return sharer.getSharedStorage(keySelectedElementList);
+    };
+    const pushGroupQueue = (elem) => {
+      let groupQueue = sharer.getSharedStorage(keyGroupQueue);
+      if (!Array.isArray(groupQueue)) {
+        groupQueue = [];
+      }
+      if (groupQueue.length > 0) {
+        if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
+          groupQueue.push(elem);
+        } else {
+          groupQueue = [];
+        }
+      } else if (groupQueue.length === 0) {
+        groupQueue.push(elem);
+      }
+      const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue);
+      sharer.setSharedStorage(keyGroupQueue, groupQueue);
+      sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList);
+      return groupQueue.length > 0;
+    };
+    const updateHoverElement = (elem) => {
+      sharer.setSharedStorage(keyHoverElement, elem);
+      let vertexes = null;
+      if (elem) {
         vertexes = calcElementVertexesInGroup(elem, {
           groupQueue: sharer.getSharedStorage(keyGroupQueue)
         });
       }
       sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
     };
-    const updateSelectedElementList = (list, opts2) => {
-      var _a;
-      sharer.setSharedStorage(keySelectedElementList, list);
+    const updateSelectedElemenetController = () => {
+      const list = sharer.getSharedStorage(keySelectedElementList);
       if (list.length === 1) {
         const controller = calcElementSizeController(list[0], {
           groupQueue: sharer.getSharedStorage(keyGroupQueue),
           controllerSize: controllerSize$1,
-          viewScaleInfo: sharer.getActiveViewScaleInfo()
+          viewScaleInfo: sharer.getActiveViewScaleInfo(),
+          rotateControllerPosition,
+          rotateControllerSize
         });
         sharer.setSharedStorage(keySelectedElementController, controller);
+      }
+    };
+    const updateSelectedElementList = (list, opts2) => {
+      var _a;
+      sharer.setSharedStorage(keySelectedElementList, list);
+      if (list.length === 1) {
+        updateSelectedElemenetController();
         sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage("data")) == null ? void 0 : _a.elements) || []));
       } else {
         sharer.setSharedStorage(keySelectedElementController, null);
         sharer.setSharedStorage(keySelectedElementPosition, []);
       }
       if ((opts2 == null ? void 0 : opts2.triggerEvent) === true) {
-        eventHub.trigger(coreEventKeys.SELECT, { uuids: list.map((elem) => elem.uuid), positions: [] });
+        const uuids = list.map((elem) => elem.uuid);
+        const data = sharer.getActiveStorage("data");
+        const positionMap = getElementPositionMapFromList(uuids, (data == null ? void 0 : data.elements) || []);
+        eventHub.trigger(coreEventKeys.SELECT, { uuids, positions: list.map((elem) => [...positionMap[elem.uuid]]) });
       }
     };
     const pointTargetBaseOptions = () => {
@@ -6628,7 +7095,9 @@ var __privateMethod = (obj, member, method) => {
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
         if (actionType === "drag") {
+          hasChangedData = true;
           inBusyMode = "drag";
+          eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false });
           if (data && (elems == null ? void 0 : elems.length) === 1 && moveOriginalStartElementSize && originalStart && end && ((_b = (_a = elems[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.locked) !== true) {
             const { moveX, moveY } = calcMoveInGroup(originalStart, end, groupQueue);
             let totalMoveX = calculator.toGridNum(moveX / scale);
@@ -6671,6 +7140,7 @@ var __privateMethod = (obj, member, method) => {
           }
           viewer.drawFrame();
         } else if (actionType === "drag-list") {
+          hasChangedData = true;
           inBusyMode = "drag-list";
           if (data && originalStart && start && end && (elems == null ? void 0 : elems.length) > 1) {
             const moveX = (end.x - start.x) / scale;
@@ -6698,6 +7168,7 @@ var __privateMethod = (obj, member, method) => {
           viewer.drawFrame();
         } else if (actionType === "resize") {
           if (data && (elems == null ? void 0 : elems.length) === 1 && originalStart && moveOriginalStartElementSize && (resizeType == null ? void 0 : resizeType.startsWith("resize-"))) {
+            hasChangedData = true;
             inBusyMode = "resize";
             const pointGroupQueue = [];
             groupQueue.forEach((group) => {
@@ -6784,6 +7255,9 @@ var __privateMethod = (obj, member, method) => {
         prevPoint = null;
         moveOriginalStartPoint = null;
         moveOriginalStartElementSize = null;
+        if (actionType === "drag") {
+          eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: true });
+        }
         if (actionType === "resize" && resizeType) {
           sharer.setSharedStorage(keyResizeType, null);
           needDrawFrame = true;
@@ -6838,18 +7312,21 @@ var __privateMethod = (obj, member, method) => {
           }
           if (data && ["drag", "drag-list", "drag-list-end", "resize"].includes(actionType)) {
             let type = "dragElement";
-            eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+            if (hasChangedData) {
+              eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+              hasChangedData = false;
+            }
           }
           viewer.drawFrame();
         };
         finalDrawFrame();
       },
       pointLeave() {
-        prevPoint = null;
-        moveOriginalStartPoint = null;
-        moveOriginalStartElementSize = null;
-        clear();
-        viewer.drawFrame();
+        inBusyMode = null;
+        sharer.setSharedStorage(keyResizeType, null);
+        eventHub.trigger(coreEventKeys.CURSOR, {
+          type: "default"
+        });
       },
       doubleClick(e) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -6879,6 +7356,12 @@ var __privateMethod = (obj, member, method) => {
         }
         sharer.setSharedStorage(keyActionType, null);
       },
+      wheel() {
+        updateSelectedElemenetController();
+      },
+      wheelScale() {
+        updateSelectedElemenetController();
+      },
       contextMenu: (e) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
@@ -6938,11 +7421,7 @@ var __privateMethod = (obj, member, method) => {
         const isMoving = sharedStore[keyIsMoving];
         const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
         const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
-        const selectedElementController = elem ? calcElementSizeController(elem, {
-          groupQueue,
-          controllerSize: 10,
-          viewScaleInfo
-        }) : null;
+        const selectedElementController = sharedStore[keySelectedElementController];
         const isHoverLocked = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.locked);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
@@ -6950,11 +7429,7 @@ var __privateMethod = (obj, member, method) => {
             if (isHoverLocked) {
               drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
-                controller: calcElementSizeController(hoverElement, {
-                  groupQueue,
-                  controllerSize: 10,
-                  viewScaleInfo
-                }),
+                controller: selectedElementController,
                 style
               });
             } else {
@@ -6967,6 +7442,7 @@ var __privateMethod = (obj, member, method) => {
               element: elem,
               calculator,
               hideControllers: !!isMoving && actionType === "drag",
+              rotateControllerPattern,
               style
             });
             if (actionType === "drag") {
@@ -6996,11 +7472,7 @@ var __privateMethod = (obj, member, method) => {
             if (isHoverLocked) {
               drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
-                controller: calcElementSizeController(hoverElement, {
-                  groupQueue,
-                  controllerSize: 10,
-                  viewScaleInfo
-                }),
+                controller: selectedElementController,
                 style
               });
             } else {
@@ -7013,6 +7485,7 @@ var __privateMethod = (obj, member, method) => {
               element: elem,
               calculator,
               hideControllers: !!isMoving && actionType === "drag",
+              rotateControllerPattern,
               style
             });
             if (actionType === "drag") {
@@ -7417,7 +7890,7 @@ var __privateMethod = (obj, member, method) => {
   const fontSize = 10;
   const fontWeight = 100;
   const lineSize = 1;
-  const fontFamily$1 = "monospace";
+  const fontFamily = "monospace";
   const background = "#FFFFFFA8";
   const borderColor = "#00000080";
   const scaleColor = "#000000";
@@ -7536,7 +8009,7 @@ var __privateMethod = (obj, member, method) => {
         ctx.$setFont({
           fontWeight,
           fontSize,
-          fontFamily: fontFamily$1
+          fontFamily
         });
         ctx.fillText(`${item.num}`, item.position + fontStart, fontStart);
       }
@@ -7573,7 +8046,7 @@ var __privateMethod = (obj, member, method) => {
           ctx.$setFont({
             fontWeight,
             fontSize,
-            fontFamily: fontFamily$1
+            fontFamily
           });
           ctx.fillText(numText, fontStart + fontSize, item.position + fontStart);
         });
@@ -8014,235 +8487,6 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const fontFamily = "monospace";
-  function drawSizeInfoText(ctx, opts) {
-    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
-    const { textColor: textColor2, textBackground } = style;
-    rotateByCenter(ctx, angle2, rotateCenter, () => {
-      ctx.$setFont({
-        fontWeight: "300",
-        fontSize: fontSize2,
-        fontFamily
-      });
-      const padding = (lineHeight2 - fontSize2) / 2;
-      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
-      const bgStart = {
-        x: point.x - textWidth / 2 - padding,
-        y: point.y
-      };
-      const bgEnd = {
-        x: bgStart.x + textWidth + padding * 2,
-        y: bgStart.y + fontSize2 + padding
-      };
-      const textStart = {
-        x: point.x - textWidth / 2,
-        y: point.y
-      };
-      ctx.setLineDash([]);
-      ctx.fillStyle = textBackground;
-      ctx.beginPath();
-      ctx.moveTo(bgStart.x, bgStart.y);
-      ctx.lineTo(bgEnd.x, bgStart.y);
-      ctx.lineTo(bgEnd.x, bgEnd.y);
-      ctx.lineTo(bgStart.x, bgEnd.y);
-      ctx.closePath();
-      ctx.fill();
-      ctx.fillStyle = textColor2;
-      ctx.textBaseline = "top";
-      ctx.fillText(text2, textStart.x, textStart.y + padding);
-    });
-  }
-  function drawPositionInfoText(ctx, opts) {
-    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
-    const { textBackground, textColor: textColor2 } = style;
-    rotateByCenter(ctx, angle2, rotateCenter, () => {
-      ctx.$setFont({
-        fontWeight: "300",
-        fontSize: fontSize2,
-        fontFamily
-      });
-      const padding = (lineHeight2 - fontSize2) / 2;
-      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
-      const bgStart = {
-        x: point.x,
-        y: point.y
-      };
-      const bgEnd = {
-        x: bgStart.x + textWidth + padding * 2,
-        y: bgStart.y + fontSize2 + padding
-      };
-      const textStart = {
-        x: point.x + padding,
-        y: point.y
-      };
-      ctx.setLineDash([]);
-      ctx.fillStyle = textBackground;
-      ctx.beginPath();
-      ctx.moveTo(bgStart.x, bgStart.y);
-      ctx.lineTo(bgEnd.x, bgStart.y);
-      ctx.lineTo(bgEnd.x, bgEnd.y);
-      ctx.lineTo(bgStart.x, bgEnd.y);
-      ctx.closePath();
-      ctx.fill();
-      ctx.fillStyle = textColor2;
-      ctx.textBaseline = "top";
-      ctx.fillText(text2, textStart.x, textStart.y + padding);
-    });
-  }
-  function drawAngleInfoText(ctx, opts) {
-    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
-    const { textBackground, textColor: textColor2 } = style;
-    rotateByCenter(ctx, angle2, rotateCenter, () => {
-      ctx.$setFont({
-        fontWeight: "300",
-        fontSize: fontSize2,
-        fontFamily
-      });
-      const padding = (lineHeight2 - fontSize2) / 2;
-      const textWidth = ctx.$undoPixelRatio(ctx.measureText(text2).width);
-      const bgStart = {
-        x: point.x,
-        y: point.y
-      };
-      const bgEnd = {
-        x: bgStart.x + textWidth + padding * 2,
-        y: bgStart.y + fontSize2 + padding
-      };
-      const textStart = {
-        x: point.x + padding,
-        y: point.y
-      };
-      ctx.setLineDash([]);
-      ctx.fillStyle = textBackground;
-      ctx.beginPath();
-      ctx.moveTo(bgStart.x, bgStart.y);
-      ctx.lineTo(bgEnd.x, bgStart.y);
-      ctx.lineTo(bgEnd.x, bgEnd.y);
-      ctx.lineTo(bgStart.x, bgEnd.y);
-      ctx.closePath();
-      ctx.fill();
-      ctx.fillStyle = textColor2;
-      ctx.textBaseline = "top";
-      ctx.fillText(text2, textStart.x, textStart.y + padding);
-    });
-  }
-  const infoBackground = "#1973bac6";
-  const infoTextColor = "#ffffff";
-  const defaltStyle = {
-    textBackground: infoBackground,
-    textColor: infoTextColor
-  };
-  const infoFontSize = 10;
-  const infoLineHeight = 16;
-  const MiddlewareInfo = (opts, config) => {
-    const { boardContent, calculator } = opts;
-    const { overlayContext } = boardContent;
-    const innerConfig = {
-      ...defaltStyle,
-      ...config
-    };
-    const { textBackground, textColor: textColor2 } = innerConfig;
-    const style = {
-      textBackground,
-      textColor: textColor2
-    };
-    return {
-      name: "@middleware/info",
-      beforeDrawFrame({ snapshot }) {
-        const { sharedStore } = snapshot;
-        const selectedElementList = sharedStore[keySelectedElementList];
-        const actionType = sharedStore[keyActionType];
-        const groupQueue = sharedStore[keyGroupQueue] || [];
-        if (selectedElementList.length === 1) {
-          const elem = selectedElementList[0];
-          if (elem && ["select", "drag", "resize"].includes(actionType)) {
-            const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
-            const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-            const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
-            const totalGroupQueue = [
-              ...groupQueue,
-              ...[
-                {
-                  uuid: createUUID(),
-                  x: x2,
-                  y: y2,
-                  w: w2,
-                  h: h2,
-                  angle: angle2,
-                  type: "group",
-                  detail: { children: [] }
-                }
-              ]
-            ];
-            const calcOpts = { viewScaleInfo, viewSizeInfo };
-            const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
-            let totalAngle = 0;
-            totalGroupQueue.forEach((group) => {
-              totalAngle += group.angle || 0;
-            });
-            const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
-            if (rangeRectInfo) {
-              const elemCenter = rangeRectInfo == null ? void 0 : rangeRectInfo.center;
-              const rectInfo = {
-                topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
-                topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
-                bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
-                bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
-                center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
-                top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
-                right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
-                bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
-                left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
-              };
-              const x22 = formatNumber(elem.x, { decimalPlaces: 2 });
-              const y22 = formatNumber(elem.y, { decimalPlaces: 2 });
-              const w22 = formatNumber(elem.w, { decimalPlaces: 2 });
-              const h22 = formatNumber(elem.h, { decimalPlaces: 2 });
-              const xyText = `${formatNumber(x22, { decimalPlaces: 0 })},${formatNumber(y22, { decimalPlaces: 0 })}`;
-              const whText = `${formatNumber(w22, { decimalPlaces: 0 })}x${formatNumber(h22, { decimalPlaces: 0 })}`;
-              const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
-              drawSizeInfoText(overlayContext, {
-                point: {
-                  x: rectInfo.bottom.x,
-                  y: rectInfo.bottom.y + infoFontSize
-                },
-                rotateCenter: rectInfo.center,
-                angle: totalAngle,
-                text: whText,
-                fontSize: infoFontSize,
-                lineHeight: infoLineHeight,
-                style
-              });
-              drawPositionInfoText(overlayContext, {
-                point: {
-                  x: rectInfo.topLeft.x,
-                  y: rectInfo.topLeft.y - infoFontSize * 2
-                },
-                rotateCenter: rectInfo.center,
-                angle: totalAngle,
-                text: xyText,
-                fontSize: infoFontSize,
-                lineHeight: infoLineHeight,
-                style
-              });
-              drawAngleInfoText(overlayContext, {
-                point: {
-                  x: rectInfo.top.x + infoFontSize,
-                  y: rectInfo.top.y - infoFontSize * 2
-                },
-                rotateCenter: rectInfo.center,
-                angle: totalAngle,
-                text: angleText,
-                fontSize: infoFontSize,
-                lineHeight: infoLineHeight,
-                style
-              });
-            }
-          }
-        }
-      }
-    };
-  };
   const MiddlewarePointer = (opts) => {
     const { boardContent, eventHub, sharer } = opts;
     const canvas = boardContent.boardContext.canvas;
@@ -8286,16 +8530,16 @@ var __privateMethod = (obj, member, method) => {
   };
   class Core {
     constructor(container, opts) {
-      __privateAdd(this, _initContainer);
-      __privateAdd(this, _board, void 0);
+      __privateAdd(this, _Core_instances);
+      __privateAdd(this, _board);
       // #opts: CoreOptions;
-      __privateAdd(this, _canvas, void 0);
-      __privateAdd(this, _container2, void 0);
+      __privateAdd(this, _canvas);
+      __privateAdd(this, _container2);
       const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
       __privateSet(this, _container2, container);
       const canvas = document.createElement("canvas");
       __privateSet(this, _canvas, canvas);
-      __privateMethod(this, _initContainer, initContainer_fn).call(this);
+      __privateMethod(this, _Core_instances, initContainer_fn).call(this);
       container.appendChild(canvas);
       const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true, createCustomContext2D });
       const board = new Board({ boardContent, container });
@@ -8392,7 +8636,7 @@ var __privateMethod = (obj, member, method) => {
   _board = new WeakMap();
   _canvas = new WeakMap();
   _container2 = new WeakMap();
-  _initContainer = new WeakSet();
+  _Core_instances = new WeakSet();
   initContainer_fn = function() {
     const container = __privateGet(this, _container2);
     container.style.position = "relative";