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

package/dist/index.global.js

@@ -143,13 +143,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     downloadLink = null;
   }
   function toColorHexNum(color2) {
-    return parseInt(color2.replace(/^\#/, "0x"));
+    return parseInt(color2.replace(/^#/, "0x"));
   }
   function toColorHexStr(color2) {
     return "#" + color2.toString(16);
   }
   function isColorStr(color2) {
-    return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
+    return typeof color2 === "string" && (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
   const colorNameMap = {
     aliceblue: "#f0f8ff",
@@ -306,6 +306,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     let css = "transparent";
     if (typeof color2 === "string") {
       css = color2;
+    } else if ((color2 == null ? void 0 : color2.stops.length) === 1) {
+      css = color2.stops[0].color;
     } else if ((color2 == null ? void 0 : color2.type) === "linear-gradient") {
       const items = [];
       if (typeof color2.angle === "number") {
@@ -353,13 +355,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return hex;
     }
     let hexAlpha = 1;
-    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
-    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    const regHex1 = /^#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^#[0-9a-f]{8,8}$/i;
     let result = hex;
     if (regHex1.test(hex)) {
-      hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(5, 7).replace(/^#/, "0x"));
     } else if (regHex2.test(hex)) {
-      hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
+      hexAlpha = parseInt(hex.substring(7, 9).replace(/^#/, "0x"));
       result = hex.substring(0, 7);
     }
     hexAlpha = hexAlpha * alpha;
@@ -439,6 +441,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     _resetUUID(elem);
     return elem;
   }
+  function deepCloneData(data) {
+    const { elements, ...restData } = data;
+    return {
+      ...deepClone(restData),
+      ...{
+        elements: elements.map((elem) => deepCloneElement(elem))
+      }
+    };
+  }
   function is$1(target) {
     return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
   }
@@ -688,6 +699,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const image = await loadImage(dataURL);
     return image;
   }
+  function positiveNum(value) {
+    return typeof value === "number" && value >= 0;
+  }
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -698,19 +712,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return number(value);
   }
   function w(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function h(value) {
-    return typeof value === "number" && value >= 0;
+    return positiveNum(value);
   }
   function angle(value) {
     return typeof value === "number" && value >= -360 && value <= 360;
   }
   function borderWidth(value) {
-    return w(value);
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function borderRadius(value) {
-    return number(value) && value >= 0;
+    return positiveNum(value) || Array.isArray(value) && positiveNum(value[0]) && positiveNum(value[1]) && positiveNum(value[2]) && positiveNum(value[3]);
   }
   function color(value) {
     return isColorStr(value);
@@ -764,6 +778,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
   }
   const is = {
+    positiveNum,
     x,
     y,
     w,
@@ -1048,16 +1063,33 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return __privateGet(this, _ctx).fill(...args);
     }
     arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return __privateGet(this, _ctx).arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+      return __privateGet(this, _ctx).arc(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(radius),
+        startAngle,
+        endAngle,
+        anticlockwise
+      );
     }
     rect(x2, y2, w2, h2) {
       return __privateGet(this, _ctx).rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     fillRect(x2, y2, w2, h2) {
-      return __privateGet(this, _ctx).fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __privateGet(this, _ctx).fillRect(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(w2),
+        this.$doPixelRatio(h2)
+      );
     }
     clearRect(x2, y2, w2, h2) {
-      return __privateGet(this, _ctx).clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __privateGet(this, _ctx).clearRect(
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(w2),
+        this.$doPixelRatio(h2)
+      );
     }
     beginPath() {
       return __privateGet(this, _ctx).beginPath();
@@ -1072,7 +1104,31 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return __privateGet(this, _ctx).moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     arcTo(x1, y1, x2, y2, radius) {
-      return __privateGet(this, _ctx).arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+      return __privateGet(this, _ctx).arcTo(
+        this.$doPixelRatio(x1),
+        this.$doPixelRatio(y1),
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2),
+        this.$doPixelRatio(radius)
+      );
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
+      return __privateGet(this, _ctx).bezierCurveTo(
+        this.$doPixelRatio(cp1x),
+        this.$doPixelRatio(cp1y),
+        this.$doPixelRatio(cp2x),
+        this.$doPixelRatio(cp2y),
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2)
+      );
+    }
+    quadraticCurveTo(cpx, cpy, x2, y2) {
+      return __privateGet(this, _ctx).quadraticCurveTo(
+        this.$doPixelRatio(cpx),
+        this.$doPixelRatio(cpy),
+        this.$doPixelRatio(x2),
+        this.$doPixelRatio(y2)
+      );
     }
     getLineDash() {
       return __privateGet(this, _ctx).getLineDash();
@@ -1113,7 +1169,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           this.$doPixelRatio(dh)
         );
       } else {
-        return __privateGet(this, _ctx).drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __privateGet(this, _ctx).drawImage(
+          image,
+          this.$doPixelRatio(dx),
+          this.$doPixelRatio(dy),
+          this.$doPixelRatio(dw),
+          this.$doPixelRatio(dh)
+        );
       }
     }
     createPattern(image, repetition) {
@@ -1173,7 +1235,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return __privateGet(this, _ctx).getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return __privateGet(this, _ctx).createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+      return __privateGet(this, _ctx).createLinearGradient(
+        this.$doPixelRatio(x0),
+        this.$doPixelRatio(y0),
+        this.$doPixelRatio(x1),
+        this.$doPixelRatio(y1)
+      );
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
       return __privateGet(this, _ctx).createRadialGradient(
@@ -1215,83 +1282,37 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return context2d;
   }
   function createBoardContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen, createCustomContext2D } = opts;
+    const { width, height, devicePixelRatio } = opts;
     const ctxOpts = {
       width,
       height,
       devicePixelRatio
     };
     const ctx = canvas.getContext("2d");
-    if (createCustomContext2D) {
-      const viewContext = createCustomContext2D(ctxOpts);
-      const overlayContext = createCustomContext2D(ctxOpts);
-      const underlayContext = createCustomContext2D(ctxOpts);
-      const boardContext = createContext2D({ ctx, ...ctxOpts });
-      const drawView = () => {
-        const { width: w2, height: h2 } = viewContext.$getSize();
-        boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
-        underlayContext.clearRect(0, 0, w2, h2);
-        viewContext.clearRect(0, 0, w2, h2);
-        overlayContext.clearRect(0, 0, w2, h2);
-      };
-      const content = {
-        underlayContext,
-        viewContext,
-        overlayContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    }
-    if (offscreen === true) {
-      const viewContext = createOffscreenContext2D(ctxOpts);
-      const overlayContext = createOffscreenContext2D(ctxOpts);
-      const underlayContext = createOffscreenContext2D(ctxOpts);
-      const boardContext = createContext2D({ ctx, ...ctxOpts });
-      const drawView = () => {
-        const { width: w2, height: h2 } = viewContext.$getSize();
-        boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
-        underlayContext.clearRect(0, 0, w2, h2);
-        viewContext.clearRect(0, 0, w2, h2);
-        overlayContext.clearRect(0, 0, w2, h2);
-      };
-      const content = {
-        underlayContext,
-        viewContext,
-        overlayContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    } else {
-      const viewContext = createContext2D(ctxOpts);
-      const overlayContext = createContext2D(ctxOpts);
-      const underlayContext = createContext2D(ctxOpts);
-      const boardContext = createContext2D({ ctx, ...ctxOpts });
-      const drawView = () => {
-        boardContext.clearRect(0, 0, width, height);
-        boardContext.drawImage(underlayContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(overlayContext.canvas, 0, 0, width, height);
-        underlayContext.clearRect(0, 0, width, height);
-        viewContext.clearRect(0, 0, width, height);
-        overlayContext.clearRect(0, 0, width, height);
-      };
-      const content = {
-        underlayContext,
-        viewContext,
-        overlayContext,
-        boardContext,
-        drawView
-      };
-      return content;
-    }
+    const viewContext = createOffscreenContext2D(ctxOpts);
+    const overlayContext = createOffscreenContext2D(ctxOpts);
+    const underlayContext = createOffscreenContext2D(ctxOpts);
+    const boardContext = createContext2D({ ctx, ...ctxOpts });
+    const tempContext = createOffscreenContext2D(ctxOpts);
+    const drawView = () => {
+      const { width: w2, height: h2 } = viewContext.$getSize();
+      boardContext.clearRect(0, 0, w2, h2);
+      boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
+      boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
+      boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
+      underlayContext.clearRect(0, 0, w2, h2);
+      viewContext.clearRect(0, 0, w2, h2);
+      overlayContext.clearRect(0, 0, w2, h2);
+    };
+    const content = {
+      underlayContext,
+      viewContext,
+      overlayContext,
+      boardContext,
+      tempContext,
+      drawView
+    };
+    return content;
   }
   class EventEmitter {
     constructor() {
@@ -1579,7 +1600,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       let resultY = point.y;
       groupQueue.forEach((group) => {
         const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = group;
-        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
         const temp = rotatePoint(center, { x: resultX, y: resultY }, parseAngleToRadian(angle2));
         resultX = temp.x;
         resultY = temp.y;
@@ -2091,7 +2112,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     if (angle2 === 0) {
       return getElementVertexes(elemSize);
     }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2 }), angle2);
   }
   function calcElementQueueVertexesQueueInGroup(groupQueue) {
     const vesList = [];
@@ -2105,7 +2126,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       totalY += y2;
       let ves;
       if (i === 0) {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
         ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
         rotateActionList.push({
           center: calcElementCenter(elemSize),
@@ -2113,7 +2134,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           radian: parseAngleToRadian(angle2)
         });
       } else {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2 };
         ves = getElementVertexes(elemSize);
         for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
           const { center, radian } = rotateActionList[aIdx];
@@ -2303,7 +2324,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 h: child.h,
                 angle: totalAngle + (child.angle || 0)
               };
-              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo, viewSizeInfo })) {
+              if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo })) {
                 result.element = child;
                 if (gIdx < groupQueue.length - 1 || child.type !== "group") {
                   result.groupQueueIndex = gIdx;
@@ -2328,7 +2349,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (((_c = elem == null ? void 0 : elem.operations) == null ? void 0 : _c.invisible) === true) {
         continue;
       }
-      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo })) {
+      if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo })) {
         result.index = i;
         result.element = elem;
         break;
@@ -2383,10 +2404,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     return rectInfo;
   }
   function originRectInfoToRangeRectInfo(originRectInfo) {
-    const rangeMaxX = Math.max(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
-    const rangeMaxY = Math.max(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
-    const rangeMinX = Math.min(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
-    const rangeMinY = Math.min(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeMaxX = Math.max(
+      originRectInfo.topLeft.x,
+      originRectInfo.topRight.x,
+      originRectInfo.bottomRight.x,
+      originRectInfo.bottomLeft.x
+    );
+    const rangeMaxY = Math.max(
+      originRectInfo.topLeft.y,
+      originRectInfo.topRight.y,
+      originRectInfo.bottomRight.y,
+      originRectInfo.bottomLeft.y
+    );
+    const rangeMinX = Math.min(
+      originRectInfo.topLeft.x,
+      originRectInfo.topRight.x,
+      originRectInfo.bottomRight.x,
+      originRectInfo.bottomLeft.x
+    );
+    const rangeMinY = Math.min(
+      originRectInfo.topLeft.y,
+      originRectInfo.topRight.y,
+      originRectInfo.bottomRight.y,
+      originRectInfo.bottomLeft.y
+    );
     const rangeCenter = { x: originRectInfo.center.x, y: originRectInfo.center.y };
     const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
     const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
@@ -2425,10 +2466,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       bottom: calcViewPointSize(bottom, { viewScaleInfo })
     };
     if (range === true) {
-      const viewMaxX = Math.max(viewRectInfo.topLeft.x, viewRectInfo.topRight.x, viewRectInfo.bottomRight.x, viewRectInfo.bottomLeft.x);
-      const viewMaxY = Math.max(viewRectInfo.topLeft.y, viewRectInfo.topRight.y, viewRectInfo.bottomRight.y, viewRectInfo.bottomLeft.y);
-      const viewMinX = Math.min(viewRectInfo.topLeft.x, viewRectInfo.topRight.x, viewRectInfo.bottomRight.x, viewRectInfo.bottomLeft.x);
-      const viewMinY = Math.min(viewRectInfo.topLeft.y, viewRectInfo.topRight.y, viewRectInfo.bottomRight.y, viewRectInfo.bottomLeft.y);
+      const viewMaxX = Math.max(
+        viewRectInfo.topLeft.x,
+        viewRectInfo.topRight.x,
+        viewRectInfo.bottomRight.x,
+        viewRectInfo.bottomLeft.x
+      );
+      const viewMaxY = Math.max(
+        viewRectInfo.topLeft.y,
+        viewRectInfo.topRight.y,
+        viewRectInfo.bottomRight.y,
+        viewRectInfo.bottomLeft.y
+      );
+      const viewMinX = Math.min(
+        viewRectInfo.topLeft.x,
+        viewRectInfo.topRight.x,
+        viewRectInfo.bottomRight.x,
+        viewRectInfo.bottomLeft.x
+      );
+      const viewMinY = Math.min(
+        viewRectInfo.topLeft.y,
+        viewRectInfo.topRight.y,
+        viewRectInfo.bottomRight.y,
+        viewRectInfo.bottomLeft.y
+      );
       const rangeCenter = { x: viewRectInfo.center.x, y: viewRectInfo.center.y };
       const rangeTopLeft = { x: viewMinX, y: viewMinY };
       const rangeTopRight = { x: viewMaxX, y: viewMinY };
@@ -2453,142 +2514,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return viewRectInfo;
   }
-  function calcElementViewRectInfoMap(elemSize, opts) {
-    const { groupQueue, viewScaleInfo } = opts;
-    const originRectInfo = calcElementOriginRectInfo(elemSize, { groupQueue });
-    const { center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = originRectInfo;
-    const viewRectInfo = {
-      center: calcViewPointSize(center, { viewScaleInfo }),
-      topLeft: calcViewPointSize(topLeft, { viewScaleInfo }),
-      topRight: calcViewPointSize(topRight, { viewScaleInfo }),
-      bottomLeft: calcViewPointSize(bottomLeft, { viewScaleInfo }),
-      bottomRight: calcViewPointSize(bottomRight, { viewScaleInfo }),
-      top: calcViewPointSize(top, { viewScaleInfo }),
-      right: calcViewPointSize(right, { viewScaleInfo }),
-      left: calcViewPointSize(left, { viewScaleInfo }),
-      bottom: calcViewPointSize(bottom, { viewScaleInfo })
-    };
-    const viewMaxX = Math.max(viewRectInfo.topLeft.x, viewRectInfo.topRight.x, viewRectInfo.bottomRight.x, viewRectInfo.bottomLeft.x);
-    const viewMaxY = Math.max(viewRectInfo.topLeft.y, viewRectInfo.topRight.y, viewRectInfo.bottomRight.y, viewRectInfo.bottomLeft.y);
-    const viewMinX = Math.min(viewRectInfo.topLeft.x, viewRectInfo.topRight.x, viewRectInfo.bottomRight.x, viewRectInfo.bottomLeft.x);
-    const viewMinY = Math.min(viewRectInfo.topLeft.y, viewRectInfo.topRight.y, viewRectInfo.bottomRight.y, viewRectInfo.bottomLeft.y);
-    const rangeCenter = { x: viewRectInfo.center.x, y: viewRectInfo.center.y };
-    const rangeTopLeft = { x: viewMinX, y: viewMinY };
-    const rangeTopRight = { x: viewMaxX, y: viewMinY };
-    const rangeBottomRight = { x: viewMaxX, y: viewMaxY };
-    const rangeBottomLeft = { x: viewMinX, y: viewMaxY };
-    const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
-    const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
-    const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
-    const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
-    const rangeRectInfo = {
-      center: rangeCenter,
-      topLeft: rangeTopLeft,
-      topRight: rangeTopRight,
-      bottomLeft: rangeBottomLeft,
-      bottomRight: rangeBottomRight,
-      top: rangeTop,
-      right: rangeRight,
-      left: rangeLeft,
-      bottom: rangeBottom
-    };
-    return {
-      originRectInfo,
-      // viewRectInfo,
-      rangeRectInfo
-    };
-  }
-  function sortElementsViewVisiableInfoMap(elements, opts) {
-    const visibleInfoMap = {};
-    const currentPosition = [];
-    const _walk = (elem) => {
-      const baseInfo = {
-        isVisibleInView: true,
-        isGroup: elem.type === "group",
-        position: [...currentPosition]
-      };
-      let originRectInfo = null;
-      const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
-      originRectInfo = calcElementOriginRectInfo(elem, {
-        groupQueue: groupQueue || []
-      });
-      visibleInfoMap[elem.uuid] = {
-        ...baseInfo,
-        ...{
-          originRectInfo,
-          rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
-        }
-      };
-      if (elem.type === "group") {
-        elem.detail.children.forEach((ele, i) => {
-          currentPosition.push(i);
-          _walk(ele);
-          currentPosition.pop();
-        });
-      }
-    };
-    elements.forEach((elem, index) => {
-      currentPosition.push(index);
-      _walk(elem);
-      currentPosition.pop();
-    });
-    return updateViewVisibleInfoMapStatus(visibleInfoMap, opts);
-  }
-  function isRangeRectInfoCollide(info1, info2) {
-    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
-    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
-    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
-    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
-    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
-    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
-    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
-    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
-    if (rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY || rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY) {
-      return true;
-    }
-    return false;
-  }
-  function updateViewVisibleInfoMapStatus(viewVisibleInfoMap, opts) {
-    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
-    let visibleCount = 0;
-    let invisibleCount = 0;
-    Object.keys(viewVisibleInfoMap).forEach((uuid) => {
-      const info = viewVisibleInfoMap[uuid];
-      info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
-      info.isVisibleInView ? visibleCount++ : invisibleCount++;
-    });
-    return { viewVisibleInfoMap, visibleCount, invisibleCount };
-  }
-  function calcVisibleOriginCanvasRectInfo(opts) {
-    const { viewScaleInfo, viewSizeInfo } = opts;
-    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
-    const { width, height } = viewSizeInfo;
-    const x2 = 0 - offsetLeft / scale;
-    const y2 = 0 - offsetTop / scale;
-    const w2 = width / scale;
-    const h2 = height / scale;
-    const center = calcElementCenter({ x: x2, y: y2, w: w2, h: h2 });
-    const topLeft = { x: x2, y: y2 };
-    const topRight = { x: x2 + w2, y: y2 };
-    const bottomLeft = { x: x2, y: y2 + h2 };
-    const bottomRight = { x: x2 + w2, y: y2 + h2 };
-    const left = { x: x2, y: center.y };
-    const top = { x: center.x, y: y2 };
-    const right = { x: x2 + w2, y: center.y };
-    const bottom = { x: center.x, y: y2 + h2 };
-    const rectInfo = {
-      center,
-      topLeft,
-      topRight,
-      bottomLeft,
-      bottomRight,
-      left,
-      top,
-      right,
-      bottom
-    };
-    return rectInfo;
-  }
   function createControllerElementSizeFromCenter(center, opts) {
     const { x: x2, y: y2 } = center;
     const { size, angle: angle2 } = opts;
@@ -2947,7 +2872,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const arr = [];
     let current;
     let level = -1;
-    let inComponent = false;
     html2.replace(elemRegExp, (element, index) => {
       const isOpen = element.charAt(1) !== "/";
       const isComment = element.startsWith("<!--");
@@ -2967,7 +2891,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (isOpen) {
         level++;
         current = parseElement(element);
-        if (!current.isVoid && !inComponent && nextChar && nextChar !== "<") {
+        if (!current.isVoid && true && nextChar && nextChar !== "<") {
           const content = html2.slice(start, html2.indexOf("<", start));
           if (content.trim()) {
             current.children.push({
@@ -3175,7 +3099,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2, borderDash } = viewElem.detail;
+    let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { borderDash } = viewElem.detail;
     const hasBorderDash = Array.isArray(borderDash) && borderDash.length > 0;
     const { boxSizing = defaultElemConfig.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
     if (Array.isArray(borderWidth2)) {
@@ -3992,6 +3917,194 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       moveY
     };
   }
+  function merge(target, source) {
+    const result = target;
+    for (const key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        if (typeof source[key] === "object" && source[key] !== null && typeof result[key] === "object" && result[key] !== null) {
+          result[key] = merge(result[key], source[key]);
+        } else {
+          result[key] = source[key];
+        }
+      }
+    }
+    return target;
+  }
+  function omit(obj, keys) {
+    const result = { ...obj };
+    for (const key of keys) {
+      delete result[key];
+    }
+    return result;
+  }
+  function elementToBoxInfo(elem) {
+    const { x: x2, y: y2, w: w2, h: h2, detail } = elem;
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, boxSizing } = detail;
+    let btw = 0;
+    let brw = 0;
+    let bbw = 0;
+    let blw = 0;
+    let btlr = 0;
+    let btrr = 0;
+    let bblr = 0;
+    let bbrr = 0;
+    if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+      btw = borderWidth2;
+      brw = borderWidth2;
+      bbw = borderWidth2;
+      blw = borderWidth2;
+    } else if (Array.isArray(borderWidth2)) {
+      btw = is.positiveNum(borderWidth2[0]) ? borderWidth2[0] : 0;
+      brw = is.positiveNum(borderWidth2[1]) ? borderWidth2[0] : 0;
+      bbw = is.positiveNum(borderWidth2[2]) ? borderWidth2[0] : 0;
+      blw = is.positiveNum(borderWidth2[3]) ? borderWidth2[0] : 0;
+    }
+    if (typeof borderRadius2 === "number" && borderRadius2 > 0) {
+      btlr = borderRadius2;
+      btrr = borderRadius2;
+      bblr = borderRadius2;
+      bbrr = borderRadius2;
+    } else if (Array.isArray(borderRadius2)) {
+      btlr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+      btrr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+      bblr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+      bbrr = is.positiveNum(borderRadius2[0]) ? borderRadius2[0] : 0;
+    }
+    const p0 = { x: x2, y: y2 };
+    const p1 = { x: x2 + w2, y: y2 };
+    const p2 = { x: x2 + w2, y: y2 + h2 };
+    const p3 = { x: x2, y: y2 + h2 };
+    const p0s = { x: x2, y: y2 + btlr };
+    const p0e = { x: x2 + btlr, y: y2 };
+    const p1s = { x: x2 + w2 - btrr, y: y2 };
+    const p1e = { x: x2 + w2, y: y2 + btrr };
+    const p2s = { x: x2 + w2, y: y2 + h2 - bbrr };
+    const p2e = { x: x2 + w2 - bbrr, y: y2 + h2 };
+    const p3s = { x: x2 + bblr, y: y2 + h2 };
+    const p3e = { x: x2, y: y2 + h2 - bblr };
+    let op0 = { ...p0 };
+    let op1 = { ...p1 };
+    let op2 = { ...p2 };
+    let op3 = { ...p3 };
+    let op0s = { ...p0s };
+    let op0e = { ...p0e };
+    let op1s = { ...p1s };
+    let op1e = { ...p1e };
+    let op2s = { ...p2s };
+    let op2e = { ...p2e };
+    let op3s = { ...p3s };
+    let op3e = { ...p3e };
+    let ip0 = { ...p0 };
+    let ip1 = { ...p1 };
+    let ip2 = { ...p2 };
+    let ip3 = { ...p3 };
+    let ip0s = { ...p0s };
+    let ip0e = { ...p0e };
+    let ip1s = { ...p1s };
+    let ip1e = { ...p1e };
+    let ip2s = { ...p2s };
+    let ip2e = { ...p2e };
+    let ip3s = { ...p3s };
+    let ip3e = { ...p3e };
+    if (boxSizing === "border-box") {
+      ip0 = { x: ip0.x + blw, y: ip0.y + btw };
+      ip1 = { x: ip1.x - brw, y: ip1.y + btw };
+      ip2 = { x: ip2.x - brw, y: ip2.y - bbw };
+      ip3 = { x: ip3.x + blw, y: ip3.y - bbw };
+      ip0s = { x: ip0s.x + blw, y: ip0s.y + btw };
+      ip0e = { x: ip0e.x + blw, y: ip0e.y + btw };
+      ip1s = { x: ip1s.x - brw, y: ip1s.y + btw };
+      ip1e = { x: ip1e.x - brw, y: ip1e.y + btw };
+      ip2s = { x: ip2s.x - brw, y: ip2s.y - bbw };
+      ip2e = { x: ip2e.x - brw, y: ip2e.y - bbw };
+      ip3s = { x: ip3s.x + blw, y: ip3s.y - bbw };
+      ip3e = { x: ip3e.x + blw, y: ip3e.y - bbw };
+    } else if (boxSizing === "content-box") {
+      op0 = { x: op0.x - blw, y: op0.y - btw };
+      op1 = { x: op1.x + brw, y: op1.y - btw };
+      op2 = { x: op2.x + brw, y: op2.y + bbw };
+      op3 = { x: op3.x - blw, y: op3.y + bbw };
+      op0s = { x: op0s.x - blw, y: op0s.y - btw };
+      op0e = { x: op0e.x - blw, y: op0e.y - btw };
+      op1s = { x: op1s.x + brw, y: op1s.y - btw };
+      op1e = { x: op1e.x + brw, y: op1e.y - btw };
+      op2s = { x: op2s.x + brw, y: op2s.y + bbw };
+      op2e = { x: op2e.x + brw, y: op2e.y + bbw };
+      op3s = { x: op3s.x - blw, y: op3s.y + bbw };
+      op3e = { x: op3e.x - blw, y: op3e.y + bbw };
+    } else {
+      ip0 = { x: ip0.x + blw / 2, y: ip0.y + btw / 2 };
+      ip1 = { x: ip1.x - brw / 2, y: ip1.y + btw / 2 };
+      ip2 = { x: ip2.x - brw / 2, y: ip2.y - bbw / 2 };
+      ip3 = { x: ip3.x + blw / 2, y: ip3.y - bbw / 2 };
+      ip0s = { x: ip0s.x + blw / 2, y: ip0s.y + btw / 2 };
+      ip0e = { x: ip0e.x + blw / 2, y: ip0e.y + btw / 2 };
+      ip1s = { x: ip1s.x - brw / 2, y: ip1s.y + btw / 2 };
+      ip1e = { x: ip1e.x - brw / 2, y: ip1e.y + btw / 2 };
+      ip2s = { x: ip2s.x - brw / 2, y: ip2s.y - bbw / 2 };
+      ip2e = { x: ip2e.x - brw / 2, y: ip2e.y - bbw / 2 };
+      ip3s = { x: ip3s.x + blw / 2, y: ip3s.y - bbw / 2 };
+      ip3e = { x: ip3e.x + blw / 2, y: ip3e.y - bbw / 2 };
+      op0 = { x: op0.x - blw / 2, y: op0.y - btw / 2 };
+      op1 = { x: op1.x + brw / 2, y: op1.y - btw / 2 };
+      op2 = { x: op2.x + brw / 2, y: op2.y + bbw / 2 };
+      op3 = { x: op3.x - blw / 2, y: op3.y + bbw / 2 };
+      op0s = { x: op0s.x - blw / 2, y: op0s.y - btw / 2 };
+      op0e = { x: op0e.x - blw / 2, y: op0e.y - btw / 2 };
+      op1s = { x: op1s.x + brw / 2, y: op1s.y - btw / 2 };
+      op1e = { x: op1e.x + brw / 2, y: op1e.y - btw / 2 };
+      op2s = { x: op2s.x + brw / 2, y: op2s.y + bbw / 2 };
+      op2e = { x: op2e.x + brw / 2, y: op2e.y + bbw / 2 };
+      op3s = { x: op3s.x - blw / 2, y: op3s.y + bbw / 2 };
+      op3e = { x: op3e.x - blw / 2, y: op3e.y + bbw / 2 };
+    }
+    return {
+      btw,
+      brw,
+      bbw,
+      blw,
+      btlr,
+      btrr,
+      bblr,
+      bbrr,
+      p0,
+      p1,
+      p2,
+      p3,
+      p0s,
+      p0e,
+      p1s,
+      p1e,
+      p2s,
+      p2e,
+      p3s,
+      p3e,
+      op0,
+      op1,
+      op2,
+      op3,
+      op0s,
+      op0e,
+      op1s,
+      op1e,
+      op2s,
+      op2e,
+      op3s,
+      op3e,
+      ip0,
+      ip1,
+      ip2,
+      ip3,
+      ip0s,
+      ip0e,
+      ip1s,
+      ip1e,
+      ip2s,
+      ip2e,
+      ip3s,
+      ip3e
+    };
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
@@ -4005,7 +4118,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.calcElementVertexesInGroup = calcElementVertexesInGroup;
   exports.calcElementVertexesQueueInGroup = calcElementVertexesQueueInGroup;
   exports.calcElementViewRectInfo = calcElementViewRectInfo;
-  exports.calcElementViewRectInfoMap = calcElementViewRectInfoMap;
   exports.calcElementsContextSize = calcElementsContextSize;
   exports.calcElementsViewInfo = calcElementsViewInfo;
   exports.calcLayoutSizeController = calcLayoutSizeController;
@@ -4019,7 +4131,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.calcViewPointSize = calcViewPointSize;
   exports.calcViewScaleInfo = calcViewScaleInfo;
   exports.calcViewVertexes = calcViewVertexes;
-  exports.calcVisibleOriginCanvasRectInfo = calcVisibleOriginCanvasRectInfo;
   exports.check = check;
   exports.checkRectIntersect = checkRectIntersect;
   exports.colorNameToHex = colorNameToHex;
@@ -4035,6 +4146,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.createUUID = createUUID;
   exports.debounce = debounce;
   exports.deepClone = deepClone;
+  exports.deepCloneData = deepCloneData;
   exports.deepCloneElement = deepCloneElement;
   exports.deepResizeGroupElement = deepResizeGroupElement;
   exports.delay = delay;
@@ -4042,6 +4154,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.deleteElementInListByPosition = deleteElementInListByPosition;
   exports.downloadFileFromText = downloadFileFromText;
   exports.downloadImageFromCanvas = downloadImageFromCanvas;
+  exports.elementToBoxInfo = elementToBoxInfo;
   exports.enhanceFontFamliy = enhanceFontFamliy;
   exports.equalPoint = equalPoint;
   exports.equalTouchPoint = equalTouchPoint;
@@ -4090,10 +4203,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.loadSVG = loadSVG;
   exports.matrixToAngle = matrixToAngle;
   exports.matrixToRadian = matrixToRadian;
+  exports.merge = merge;
   exports.mergeElementAsset = mergeElementAsset;
   exports.mergeHexColorAlpha = mergeHexColorAlpha;
   exports.modifyElement = modifyElement;
   exports.moveElementPosition = moveElementPosition;
+  exports.omit = omit;
   exports.originRectInfoToRangeRectInfo = originRectInfoToRangeRectInfo;
   exports.parseAngleToRadian = parseAngleToRadian;
   exports.parseFileToBase64 = parseFileToBase64;
@@ -4109,14 +4224,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   exports.rotatePointInGroup = rotatePointInGroup;
   exports.rotateVertexes = rotateVertexes;
   exports.sortDataAsserts = sortDataAsserts;
-  exports.sortElementsViewVisiableInfoMap = sortElementsViewVisiableInfoMap;
   exports.throttle = throttle;
   exports.toColorHexNum = toColorHexNum;
   exports.toColorHexStr = toColorHexStr;
   exports.ungroupElementsByPosition = ungroupElementsByPosition;
   exports.updateElementInList = updateElementInList;
   exports.updateElementInListByPosition = updateElementInListByPosition;
-  exports.updateViewVisibleInfoMapStatus = updateViewVisibleInfoMapStatus;
   exports.vaildPoint = vaildPoint;
   exports.vaildTouchPoint = vaildTouchPoint;
   exports.validateElements = validateElements;