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

package/dist/index.global.js

@@ -1,28 +1,14 @@
 var iDrawUtil = 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 _ctx, _opts, _listeners, _temp, _backUpDefaultStorage, _createTempStorage, createTempStorage_fn;
+  var _ctx, _opts, _listeners, _temp, _backUpDefaultStorage, _static, _Store_instances, createTempStorage_fn;
   function compose(middleware) {
     return function(context, next) {
       return dispatch(0);
@@ -31,8 +17,7 @@ var __privateMethod = (obj, member, method) => {
         if (i === middleware.length && next) {
           fn = next;
         }
-        if (!fn)
-          return Promise.resolve();
+        if (!fn) return Promise.resolve();
         try {
           return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
         } catch (err) {
@@ -922,8 +907,8 @@ var __privateMethod = (obj, member, method) => {
     // private _width: number = 0;
     // private _height: number = 0;
     constructor(ctx, opts) {
-      __privateAdd(this, _ctx, void 0);
-      __privateAdd(this, _opts, void 0);
+      __privateAdd(this, _ctx);
+      __privateAdd(this, _opts);
       __privateSet(this, _ctx, ctx);
       __privateSet(this, _opts, { ...{ devicePixelRatio: 1, offscreenCanvas: null }, ...opts });
       this.$resetFont();
@@ -1310,7 +1295,7 @@ var __privateMethod = (obj, member, method) => {
   }
   class EventEmitter {
     constructor() {
-      __privateAdd(this, _listeners, void 0);
+      __privateAdd(this, _listeners);
       __privateSet(this, _listeners, /* @__PURE__ */ new Map());
     }
     on(eventKey, callback) {
@@ -1396,11 +1381,13 @@ var __privateMethod = (obj, member, method) => {
   }
   class Store {
     constructor(opts) {
-      __privateAdd(this, _createTempStorage);
-      __privateAdd(this, _temp, void 0);
-      __privateAdd(this, _backUpDefaultStorage, void 0);
+      __privateAdd(this, _Store_instances);
+      __privateAdd(this, _temp);
+      __privateAdd(this, _backUpDefaultStorage);
+      __privateAdd(this, _static);
       __privateSet(this, _backUpDefaultStorage, deepClone(opts.defaultStorage));
-      __privateSet(this, _temp, __privateMethod(this, _createTempStorage, createTempStorage_fn).call(this));
+      __privateSet(this, _temp, __privateMethod(this, _Store_instances, createTempStorage_fn).call(this));
+      __privateSet(this, _static, opts.defaultStatic || {});
     }
     set(name, value) {
       __privateGet(this, _temp)[name] = value;
@@ -1408,6 +1395,12 @@ var __privateMethod = (obj, member, method) => {
     get(name) {
       return __privateGet(this, _temp)[name];
     }
+    setStatic(name, value) {
+      __privateGet(this, _static)[name] = value;
+    }
+    getStatic(name) {
+      return __privateGet(this, _static)[name];
+    }
     getSnapshot(opts) {
       if ((opts == null ? void 0 : opts.deepClone) === true) {
         return deepClone(__privateGet(this, _temp));
@@ -1415,15 +1408,17 @@ var __privateMethod = (obj, member, method) => {
       return { ...__privateGet(this, _temp) };
     }
     clear() {
-      __privateSet(this, _temp, __privateMethod(this, _createTempStorage, createTempStorage_fn).call(this));
+      __privateSet(this, _temp, __privateMethod(this, _Store_instances, createTempStorage_fn).call(this));
     }
     destroy() {
       __privateSet(this, _temp, null);
+      __privateSet(this, _static, null);
     }
   }
   _temp = new WeakMap();
   _backUpDefaultStorage = new WeakMap();
-  _createTempStorage = new WeakSet();
+  _static = new WeakMap();
+  _Store_instances = new WeakSet();
   createTempStorage_fn = function() {
     return deepClone(__privateGet(this, _backUpDefaultStorage));
   };
@@ -1496,16 +1491,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;
     }
@@ -1631,12 +1620,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;
   }
@@ -2042,6 +2033,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 ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+        }
+        if (over) {
+          break;
+        }
+        currentPosition.pop();
+      }
+    };
+    _loop(elements);
+    return positionMap;
+  }
   function checkRectIntersect(rect1, rect2) {
     const rect1MinX = rect1.x;
     const rect1MinY = rect1.y;
@@ -2577,9 +2598,11 @@ var __privateMethod = (obj, member, method) => {
     };
   }
   function calcElementSizeController(elemSize, opts) {
-    const { groupQueue, controllerSize, viewScaleInfo } = opts;
+    const { groupQueue, controllerSize, viewScaleInfo, rotateControllerSize, rotateControllerPosition } = opts;
     const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    const rotateCtrlSize = rotateControllerSize;
+    const rotateCtrlPos = rotateControllerPosition;
     const ctrlGroupQueue = [
       ...[
         {
@@ -2602,10 +2625,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] }
@@ -2639,74 +2662,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: rotateControllerSize * 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: rotateControllerSize
       }
     };
     return sizeController;
@@ -2748,62 +2788,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;
@@ -3223,18 +3275,13 @@ var __privateMethod = (obj, member, method) => {
   function resizeElement(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(child, opts);
@@ -3657,8 +3704,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function _set(obj, path, value) {
     const keys = path.split(".");
-    if (typeof obj !== "object")
-      return obj;
+    if (typeof obj !== "object") return obj;
     keys.reduce((o, k, i, _) => {
       if (i === _.length - 1) {
         o[k] = value;
@@ -3832,6 +3878,90 @@ var __privateMethod = (obj, member, method) => {
     }
     return elemeList;
   }
+  function groupElementsByPosition(list, positions) {
+    if (positions.length > 1) {
+      let isValidPositions = true;
+      let lastIndexs = [];
+      for (let i = 1; i < positions.length; i++) {
+        const prevPosition = positions[i - 1];
+        const position = positions[i];
+        if (!(prevPosition.length > 0 && position.length > 0)) {
+          isValidPositions = false;
+          break;
+        }
+        if (prevPosition.length !== position.length) {
+          isValidPositions = false;
+          break;
+        }
+        const temp1 = [...prevPosition];
+        const temp2 = [...position];
+        const lastIndex1 = temp1.pop();
+        const lastIndex2 = temp2.pop();
+        if (i === 1 && typeof lastIndex1 === "number" && lastIndex1 >= 0) {
+          lastIndexs.push(lastIndex1);
+        }
+        if (typeof lastIndex2 === "number" && lastIndex2 >= 0) {
+          lastIndexs.push(lastIndex2);
+        }
+      }
+      if (isValidPositions !== true) {
+        console.error("[idraw]: The grouped elements are not siblings!");
+        return list;
+      }
+      lastIndexs.sort((a, b) => a - b);
+      const groupParentPosition = [...positions[0]].splice(0, positions[0].length - 1);
+      const groupChildren = [];
+      const groupPosition = [...groupParentPosition, lastIndexs[0]];
+      for (let i = 0; i < lastIndexs.length; i++) {
+        const position = [...groupParentPosition, lastIndexs[i]];
+        const elem = findElementFromListByPosition(position, list);
+        if (elem) {
+          groupChildren.push(elem);
+        }
+      }
+      const groupSize = calcElementListSize(groupChildren);
+      for (let i = 0; i < groupChildren.length; i++) {
+        const elem = groupChildren[i];
+        if (elem) {
+          elem.x -= groupSize.x;
+          elem.y -= groupSize.y;
+        }
+      }
+      for (let i = lastIndexs.length - 1; i >= 0; i--) {
+        const position = [...groupParentPosition, lastIndexs[i]];
+        deleteElementInListByPosition(position, list);
+      }
+      const group = {
+        name: "Group",
+        uuid: createUUID(),
+        type: "group",
+        ...groupSize,
+        detail: {
+          children: groupChildren
+        }
+      };
+      insertElementToListByPosition(group, groupPosition, list);
+    }
+    return list;
+  }
+  function ungroupElementsByPosition(list, position) {
+    var _a;
+    const elem = findElementFromListByPosition(position, list);
+    if (!(elem && (elem == null ? void 0 : elem.type) === "group" && Array.isArray((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children))) {
+      console.error("[idraw]: The ungrouped element is not a group element!");
+    }
+    const groupParentPosition = [...position].splice(0, position.length - 1);
+    const groupLastIndex = position[position.length - 1];
+    const { x: x2, y: y2 } = elem;
+    deleteElementInListByPosition(position, list);
+    elem.detail.children.forEach((child, i) => {
+      child.x += x2;
+      child.y += y2;
+      const elemPosition = [...groupParentPosition, groupLastIndex + i];
+      insertElementToListByPosition(child, elemPosition, list);
+    });
+    return list;
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
@@ -3900,6 +4030,7 @@ var __privateMethod = (obj, member, method) => {
   exports.getDefaultElementRectDetail = getDefaultElementRectDetail;
   exports.getElemenetsAssetIds = getElemenetsAssetIds;
   exports.getElementPositionFromList = getElementPositionFromList;
+  exports.getElementPositionMapFromList = getElementPositionMapFromList;
   exports.getElementRotateVertexes = getElementRotateVertexes;
   exports.getElementSize = getElementSize;
   exports.getElementVertexes = getElementVertexes;
@@ -3910,6 +4041,7 @@ var __privateMethod = (obj, member, method) => {
   exports.getViewPointAtElement = getViewPointAtElement;
   exports.getViewScaleInfoFromSnapshot = getViewScaleInfoFromSnapshot;
   exports.getViewSizeInfoFromSnapshot = getViewSizeInfoFromSnapshot;
+  exports.groupElementsByPosition = groupElementsByPosition;
   exports.insertElementToListByPosition = insertElementToListByPosition;
   exports.is = is;
   exports.isAssetId = isAssetId;
@@ -3949,6 +4081,7 @@ var __privateMethod = (obj, member, method) => {
   exports.throttle = throttle;
   exports.toColorHexNum = toColorHexNum;
   exports.toColorHexStr = toColorHexStr;
+  exports.ungroupElementsByPosition = ungroupElementsByPosition;
   exports.updateElementInList = updateElementInList;
   exports.updateElementInListByPosition = updateElementInListByPosition;
   exports.updateViewVisibleInfoMapStatus = updateViewVisibleInfoMapStatus;