@idraw/util 0.4.0-alpha.6 → 0.4.0-alpha.7

package/dist/index.global.js

@@ -1,5 +1,24 @@
 var iDrawUtil = function(exports) {
-  "use strict";
+  "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 _ctx, _opts;
   function compose(middleware) {
     return function(context, next) {
       return dispatch(0);
@@ -775,19 +794,19 @@ var iDrawUtil = function(exports) {
     // private _width: number = 0;
     // private _height: number = 0;
     constructor(ctx, opts) {
-      this._devicePixelRatio = 1;
-      const { devicePixelRatio = 1 } = opts;
-      this._ctx = ctx;
-      this._devicePixelRatio = devicePixelRatio;
+      __privateAdd(this, _ctx, void 0);
+      __privateAdd(this, _opts, void 0);
+      __privateSet(this, _ctx, ctx);
+      __privateSet(this, _opts, { ...{ devicePixelRatio: 1, offscreenCanvas: null }, ...opts });
     }
     $undoPixelRatio(num) {
-      return num / this._devicePixelRatio;
+      return num / __privateGet(this, _opts).devicePixelRatio;
     }
     $doPixelRatio(num) {
-      return this._devicePixelRatio * num;
+      return __privateGet(this, _opts).devicePixelRatio * num;
     }
     $getContext() {
-      return this._ctx;
+      return __privateGet(this, _ctx);
     }
     $setFont(opts) {
       const strList = [];
@@ -796,135 +815,156 @@ var iDrawUtil = function(exports) {
       }
       strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
       strList.push(`${opts.fontFamily || "sans-serif"}`);
-      this._ctx.font = `${strList.join(" ")}`;
+      __privateGet(this, _ctx).font = `${strList.join(" ")}`;
+    }
+    $getOffscreenCanvas() {
+      return __privateGet(this, _opts).offscreenCanvas;
     }
     $resize(opts) {
-      const { width, height, devicePixelRatio } = opts;
-      const { canvas } = this._ctx;
+      const { width, height, devicePixelRatio, resetStyle } = opts;
+      const { canvas } = __privateGet(this, _ctx);
       canvas.width = width * devicePixelRatio;
       canvas.height = height * devicePixelRatio;
-      this._devicePixelRatio = devicePixelRatio;
+      __privateSet(this, _opts, {
+        ...__privateGet(this, _opts),
+        ...{
+          devicePixelRatio
+        }
+      });
+      if (resetStyle === true) {
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+      }
+    }
+    $getSize() {
+      const { devicePixelRatio } = __privateGet(this, _opts);
+      const { width, height } = __privateGet(this, _ctx).canvas;
+      return {
+        width: width / devicePixelRatio,
+        height: height / devicePixelRatio,
+        devicePixelRatio
+      };
     }
     get canvas() {
-      return this._ctx.canvas;
+      return __privateGet(this, _ctx).canvas;
     }
     get fillStyle() {
-      return this._ctx.fillStyle;
+      return __privateGet(this, _ctx).fillStyle;
     }
     set fillStyle(value) {
-      this._ctx.fillStyle = value;
+      __privateGet(this, _ctx).fillStyle = value;
     }
     get strokeStyle() {
-      return this._ctx.strokeStyle;
+      return __privateGet(this, _ctx).strokeStyle;
     }
     set strokeStyle(color2) {
-      this._ctx.strokeStyle = color2;
+      __privateGet(this, _ctx).strokeStyle = color2;
     }
     get lineWidth() {
-      return this.$undoPixelRatio(this._ctx.lineWidth);
+      return this.$undoPixelRatio(__privateGet(this, _ctx).lineWidth);
     }
     set lineWidth(w2) {
-      this._ctx.lineWidth = this.$doPixelRatio(w2);
+      __privateGet(this, _ctx).lineWidth = this.$doPixelRatio(w2);
     }
     get textAlign() {
-      return this._ctx.textAlign;
+      return __privateGet(this, _ctx).textAlign;
     }
     set textAlign(align) {
-      this._ctx.textAlign = align;
+      __privateGet(this, _ctx).textAlign = align;
     }
     get textBaseline() {
-      return this._ctx.textBaseline;
+      return __privateGet(this, _ctx).textBaseline;
     }
     set textBaseline(baseline) {
-      this._ctx.textBaseline = baseline;
+      __privateGet(this, _ctx).textBaseline = baseline;
     }
     get globalAlpha() {
-      return this._ctx.globalAlpha;
+      return __privateGet(this, _ctx).globalAlpha;
     }
     set globalAlpha(alpha) {
-      this._ctx.globalAlpha = alpha;
+      __privateGet(this, _ctx).globalAlpha = alpha;
     }
     get shadowColor() {
-      return this._ctx.shadowColor;
+      return __privateGet(this, _ctx).shadowColor;
     }
     set shadowColor(color2) {
-      this._ctx.shadowColor = color2;
+      __privateGet(this, _ctx).shadowColor = color2;
     }
     get shadowOffsetX() {
-      return this.$undoPixelRatio(this._ctx.shadowOffsetX);
+      return this.$undoPixelRatio(__privateGet(this, _ctx).shadowOffsetX);
     }
     set shadowOffsetX(offsetX) {
-      this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
+      __privateGet(this, _ctx).shadowOffsetX = this.$doPixelRatio(offsetX);
     }
     get shadowOffsetY() {
-      return this.$undoPixelRatio(this._ctx.shadowOffsetY);
+      return this.$undoPixelRatio(__privateGet(this, _ctx).shadowOffsetY);
     }
     set shadowOffsetY(offsetY) {
-      this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
+      __privateGet(this, _ctx).shadowOffsetY = this.$doPixelRatio(offsetY);
     }
     get shadowBlur() {
-      return this.$undoPixelRatio(this._ctx.shadowBlur);
+      return this.$undoPixelRatio(__privateGet(this, _ctx).shadowBlur);
     }
     set shadowBlur(blur) {
-      this._ctx.shadowBlur = this.$doPixelRatio(blur);
+      __privateGet(this, _ctx).shadowBlur = this.$doPixelRatio(blur);
     }
     get lineCap() {
-      return this._ctx.lineCap;
+      return __privateGet(this, _ctx).lineCap;
     }
     set lineCap(lineCap) {
-      this._ctx.lineCap = lineCap;
+      __privateGet(this, _ctx).lineCap = lineCap;
     }
     get globalCompositeOperation() {
-      return this._ctx.globalCompositeOperation;
+      return __privateGet(this, _ctx).globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
-      this._ctx.globalCompositeOperation = operations;
+      __privateGet(this, _ctx).globalCompositeOperation = operations;
     }
     fill(...args) {
-      return this._ctx.fill(...args);
+      return __privateGet(this, _ctx).fill(...args);
     }
     arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return 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 this._ctx.rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __privateGet(this, _ctx).rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     fillRect(x2, y2, w2, h2) {
-      return 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 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 this._ctx.beginPath();
+      return __privateGet(this, _ctx).beginPath();
     }
     closePath() {
-      return this._ctx.closePath();
+      return __privateGet(this, _ctx).closePath();
     }
     lineTo(x2, y2) {
-      return this._ctx.lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __privateGet(this, _ctx).lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     moveTo(x2, y2) {
-      return this._ctx.moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __privateGet(this, _ctx).moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     arcTo(x1, y1, x2, y2, radius) {
-      return 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));
     }
     getLineDash() {
-      return this._ctx.getLineDash();
+      return __privateGet(this, _ctx).getLineDash();
     }
     setLineDash(nums) {
       const dash = nums.map((n) => this.$doPixelRatio(n));
-      return this._ctx.setLineDash(dash);
+      return __privateGet(this, _ctx).setLineDash(dash);
     }
     stroke(path) {
-      return path ? this._ctx.stroke(path) : this._ctx.stroke();
+      return path ? __privateGet(this, _ctx).stroke(path) : __privateGet(this, _ctx).stroke();
     }
     translate(x2, y2) {
-      return this._ctx.translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __privateGet(this, _ctx).translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     rotate(angle2) {
-      return this._ctx.rotate(angle2);
+      return __privateGet(this, _ctx).rotate(angle2);
     }
     drawImage(...args) {
       const image = args[0];
@@ -937,7 +977,7 @@ var iDrawUtil = function(exports) {
       const dw = args[args.length - 2];
       const dh = args[args.length - 1];
       if (args.length === 9) {
-        return this._ctx.drawImage(
+        return __privateGet(this, _ctx).drawImage(
           image,
           this.$doPixelRatio(sx),
           this.$doPixelRatio(sy),
@@ -949,41 +989,41 @@ var iDrawUtil = function(exports) {
           this.$doPixelRatio(dh)
         );
       } else {
-        return 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) {
-      return this._ctx.createPattern(image, repetition);
+      return __privateGet(this, _ctx).createPattern(image, repetition);
     }
     measureText(text2) {
-      const textMetrics = this._ctx.measureText(text2);
+      const textMetrics = __privateGet(this, _ctx).measureText(text2);
       return textMetrics;
     }
     fillText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return this._ctx.fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __privateGet(this, _ctx).fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return this._ctx.fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __privateGet(this, _ctx).fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     strokeText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return this._ctx.strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __privateGet(this, _ctx).strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return this._ctx.strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __privateGet(this, _ctx).strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     save() {
-      this._ctx.save();
+      __privateGet(this, _ctx).save();
     }
     restore() {
-      this._ctx.restore();
+      __privateGet(this, _ctx).restore();
     }
     scale(ratioX, ratioY) {
-      this._ctx.scale(ratioX, ratioY);
+      __privateGet(this, _ctx).scale(ratioX, ratioY);
     }
     circle(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      this._ctx.ellipse(
+      __privateGet(this, _ctx).ellipse(
         this.$doPixelRatio(x2),
         this.$doPixelRatio(y2),
         this.$doPixelRatio(radiusX),
@@ -995,24 +1035,24 @@ var iDrawUtil = function(exports) {
       );
     }
     isPointInPath(x2, y2) {
-      return this._ctx.isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __privateGet(this, _ctx).isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     // clip(fillRule?: CanvasFillRule): void;
     // clip(path: Path2D, fillRule?: CanvasFillRule): void;
     clip(...args) {
-      return this._ctx.clip(...args);
+      return __privateGet(this, _ctx).clip(...args);
     }
     setTransform(a, b, c, d, e, f) {
-      return this._ctx.setTransform(a, b, c, d, e, f);
+      return __privateGet(this, _ctx).setTransform(a, b, c, d, e, f);
     }
     getTransform() {
-      return this._ctx.getTransform();
+      return __privateGet(this, _ctx).getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return 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 this._ctx.createRadialGradient(
+      return __privateGet(this, _ctx).createRadialGradient(
         this.$doPixelRatio(x0),
         this.$doPixelRatio(y0),
         this.$doPixelRatio(r0),
@@ -1022,9 +1062,11 @@ var iDrawUtil = function(exports) {
       );
     }
     createConicGradient(startAngle, x2, y2) {
-      return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __privateGet(this, _ctx).createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
   }
+  _ctx = new WeakMap();
+  _opts = new WeakMap();
   function createContext2D(opts) {
     const { width, height, ctx, devicePixelRatio } = opts;
     let context = ctx;
@@ -1038,29 +1080,71 @@ var iDrawUtil = function(exports) {
     return context2d;
   }
   function createOffscreenContext2D(opts) {
-    const { width, height } = opts;
-    const offCanvas = new OffscreenCanvas(width, height);
+    const { width, height, devicePixelRatio } = opts;
+    const offCanvas = new OffscreenCanvas(width * devicePixelRatio, height * devicePixelRatio);
     const offRenderCtx = offCanvas.getContext("2d");
     const offCtx = offRenderCtx.canvas.getContext("2d");
-    return offCtx;
+    const context2d = new Context2D(offCtx, {
+      devicePixelRatio,
+      offscreenCanvas: offCanvas
+    });
+    return context2d;
   }
-  function createBoardContexts(ctx, opts) {
+  function createViewContent(canvas, opts) {
+    const { width, height, devicePixelRatio, offscreen } = opts;
     const ctxOpts = {
-      width: ctx.canvas.width,
-      height: ctx.canvas.height,
-      devicePixelRatio: (opts == null ? void 0 : opts.devicePixelRatio) || 1
+      width,
+      height,
+      devicePixelRatio
     };
-    const viewContext = createContext2D(ctxOpts);
-    const helperContext = createContext2D(ctxOpts);
-    const underContext = createContext2D(ctxOpts);
-    const boardContext = createContext2D({ ctx, ...ctxOpts });
-    const content = {
-      underContext,
-      viewContext,
-      helperContext,
-      boardContext
-    };
-    return content;
+    if (offscreen === true) {
+      const ctx = canvas.getContext("2d");
+      const viewContext = createOffscreenContext2D(ctxOpts);
+      const helperContext = createOffscreenContext2D(ctxOpts);
+      const underContext = createOffscreenContext2D(ctxOpts);
+      const boardContext = createContext2D({ ctx, ...ctxOpts });
+      const drawView = () => {
+        const { width: w2, height: h2 } = viewContext.$getSize();
+        boardContext.clearRect(0, 0, w2, h2);
+        boardContext.drawImage(underContext.canvas, 0, 0, w2, h2);
+        boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
+        boardContext.drawImage(helperContext.canvas, 0, 0, w2, h2);
+        underContext.clearRect(0, 0, w2, h2);
+        viewContext.clearRect(0, 0, w2, h2);
+        helperContext.clearRect(0, 0, w2, h2);
+      };
+      const content = {
+        underContext,
+        viewContext,
+        helperContext,
+        boardContext,
+        drawView
+      };
+      return content;
+    } else {
+      const ctx = canvas.getContext("2d");
+      const viewContext = createContext2D(ctxOpts);
+      const helperContext = createContext2D(ctxOpts);
+      const underContext = createContext2D(ctxOpts);
+      const boardContext = createContext2D({ ctx, ...ctxOpts });
+      const drawView = () => {
+        boardContext.clearRect(0, 0, width, height);
+        boardContext.drawImage(underContext.canvas, 0, 0, width, height);
+        boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
+        boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
+        underContext.clearRect(0, 0, width, height);
+        viewContext.clearRect(0, 0, width, height);
+        helperContext.clearRect(0, 0, width, height);
+      };
+      const content = {
+        underContext,
+        viewContext,
+        helperContext,
+        boardContext,
+        drawView
+      };
+      return content;
+    }
   }
   class EventEmitter {
     constructor() {
@@ -1556,51 +1640,6 @@ var iDrawUtil = function(exports) {
     _scan(uuid, elements);
     return groupQueue;
   }
-  function mergeElement(originElem, updateContent) {
-    var _a;
-    const commonKeys = Object.keys(updateContent);
-    for (let i = 0; i < commonKeys.length; i++) {
-      const commonKey = commonKeys[i];
-      if (["x", "y", "w", "h", "angle", "name"].includes(commonKey)) {
-        originElem[commonKey] = updateContent[commonKey];
-      } else if (["detail", "operations"].includes(commonKey)) {
-        if (istype.json(updateContent[commonKey])) {
-          if (!(originElem == null ? void 0 : originElem.hasOwnProperty(commonKey))) {
-            originElem[commonKey] = {};
-          }
-          if (istype.json(originElem[commonKey])) {
-            originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
-          }
-        } else if (istype.array(updateContent[commonKey])) {
-          if (!(originElem == null ? void 0 : originElem.hasOwnProperty(commonKey))) {
-            originElem[commonKey] = [];
-          }
-          if (istype.array(originElem[commonKey])) {
-            (_a = updateContent == null ? void 0 : updateContent[commonKey]) == null ? void 0 : _a.forEach((item, i2) => {
-              originElem[commonKey][i2] = item;
-            });
-            originElem[commonKey] = [...originElem[commonKey], ...updateContent[commonKey]];
-          }
-        }
-      }
-    }
-    return originElem;
-  }
-  function updateElementInList(uuid, updateContent, elements) {
-    var _a;
-    let targetElement = null;
-    for (let i = 0; i < elements.length; i++) {
-      const elem = elements[i];
-      if (elem.uuid === uuid) {
-        mergeElement(elem, updateContent);
-        targetElement = elem;
-        break;
-      } else if (elem.type === "group") {
-        targetElement = updateElementInList(uuid, updateContent, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
-      }
-    }
-    return targetElement;
-  }
   function getElementSize(elem) {
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
     const size = { x: x2, y: y2, w: w2, h: h2, angle: angle2 };
@@ -1691,52 +1730,30 @@ var iDrawUtil = function(exports) {
     }
     return result;
   }
-  function insertElementToListByPosition(element, position, list) {
-    let result = false;
-    if (position.length === 1) {
-      const pos = position[0];
-      list.splice(pos, 0, element);
-      result = true;
-    } else if (position.length > 1) {
-      let tempList = list;
-      for (let i = 0; i < position.length; i++) {
-        const pos = position[i];
-        const item = tempList[pos];
-        if (i === position.length - 1) {
-          const pos2 = position[i];
-          tempList.splice(pos2, 0, element);
-          result = true;
-        } else if (i < position.length - 1 && item.type === "group") {
-          tempList = item.detail.children;
-        } else {
+  function getElementPositionFromList(uuid, elements) {
+    let result = [];
+    let over = false;
+    const _loop = (list) => {
+      var _a;
+      for (let i = 0; i < list.length; i++) {
+        if (over === true) {
           break;
         }
-      }
-    }
-    return result;
-  }
-  function deleteElementInListByPosition(position, list) {
-    let result = false;
-    if (position.length === 1) {
-      const pos = position[0];
-      list.splice(pos, 1);
-      result = true;
-    } else if (position.length > 1) {
-      let tempList = list;
-      for (let i = 0; i < position.length; i++) {
-        const pos = position[i];
-        const item = tempList[pos];
-        if (i === position.length - 1) {
-          const pos2 = position[i];
-          tempList.splice(pos2, 1);
-          result = true;
-        } else if (i < position.length - 1 && item.type === "group") {
-          tempList = item.detail.children;
-        } else {
+        result.push(i);
+        const elem = list[i];
+        if (elem.uuid === uuid) {
+          over = true;
           break;
+        } else if (elem.type === "group") {
+          _loop(((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
         }
+        if (over) {
+          break;
+        }
+        result.pop();
       }
-    }
+    };
+    _loop(elements);
     return result;
   }
   function checkRectIntersect(rect1, rect2) {
@@ -2532,6 +2549,58 @@ var iDrawUtil = function(exports) {
     };
     return elem;
   }
+  function insertElementToListByPosition(element, position, list) {
+    let result = false;
+    if (position.length === 1) {
+      const pos = position[0];
+      list.splice(pos, 0, element);
+      result = true;
+    } else if (position.length > 1) {
+      let tempList = list;
+      for (let i = 0; i < position.length; i++) {
+        const pos = position[i];
+        const item = tempList[pos];
+        if (i === position.length - 1) {
+          const pos2 = position[i];
+          tempList.splice(pos2, 0, element);
+          result = true;
+        } else if (i < position.length - 1 && item.type === "group") {
+          tempList = item.detail.children;
+        } else {
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  function deleteElementInListByPosition(position, list) {
+    let result = false;
+    if (position.length === 1) {
+      const pos = position[0];
+      list.splice(pos, 1);
+      result = true;
+    } else if (position.length > 1) {
+      let tempList = list;
+      for (let i = 0; i < position.length; i++) {
+        const pos = position[i];
+        const item = tempList[pos];
+        if (i === position.length - 1) {
+          const pos2 = position[i];
+          tempList.splice(pos2, 1);
+          result = true;
+        } else if (i < position.length - 1 && item.type === "group") {
+          tempList = item.detail.children;
+        } else {
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  function deleteElementInList(uuid, list) {
+    const position = getElementPositionFromList(uuid, list);
+    return deleteElementInListByPosition(position, list);
+  }
   function moveElementPosition(elements, opts) {
     const { from, to } = opts;
     if (from.length === 0 || to.length === 0) {
@@ -2574,6 +2643,51 @@ var iDrawUtil = function(exports) {
     }
     return elements;
   }
+  function mergeElement(originElem, updateContent) {
+    var _a;
+    const commonKeys = Object.keys(updateContent);
+    for (let i = 0; i < commonKeys.length; i++) {
+      const commonKey = commonKeys[i];
+      if (["x", "y", "w", "h", "angle", "name"].includes(commonKey)) {
+        originElem[commonKey] = updateContent[commonKey];
+      } else if (["detail", "operations"].includes(commonKey)) {
+        if (istype.json(updateContent[commonKey])) {
+          if (!(originElem == null ? void 0 : originElem.hasOwnProperty(commonKey))) {
+            originElem[commonKey] = {};
+          }
+          if (istype.json(originElem[commonKey])) {
+            originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
+          }
+        } else if (istype.array(updateContent[commonKey])) {
+          if (!(originElem == null ? void 0 : originElem.hasOwnProperty(commonKey))) {
+            originElem[commonKey] = [];
+          }
+          if (istype.array(originElem[commonKey])) {
+            (_a = updateContent == null ? void 0 : updateContent[commonKey]) == null ? void 0 : _a.forEach((item, i2) => {
+              originElem[commonKey][i2] = item;
+            });
+            originElem[commonKey] = [...originElem[commonKey], ...updateContent[commonKey]];
+          }
+        }
+      }
+    }
+    return originElem;
+  }
+  function updateElementInList(uuid, updateContent, elements) {
+    var _a;
+    let targetElement = null;
+    for (let i = 0; i < elements.length; i++) {
+      const elem = elements[i];
+      if (elem.uuid === uuid) {
+        mergeElement(elem, updateContent);
+        targetElement = elem;
+        break;
+      } else if (elem.type === "group") {
+        targetElement = updateElementInList(uuid, updateContent, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+      }
+    }
+    return targetElement;
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
@@ -2600,13 +2714,15 @@ var iDrawUtil = function(exports) {
   exports.compose = compose;
   exports.compressImage = compressImage;
   exports.createAssetId = createAssetId;
-  exports.createBoardContexts = createBoardContexts;
   exports.createContext2D = createContext2D;
   exports.createElement = createElement;
   exports.createOffscreenContext2D = createOffscreenContext2D;
   exports.createUUID = createUUID;
+  exports.createViewContent = createViewContent;
   exports.deepClone = deepClone;
   exports.delay = delay;
+  exports.deleteElementInList = deleteElementInList;
+  exports.deleteElementInListByPosition = deleteElementInListByPosition;
   exports.downloadImageFromCanvas = downloadImageFromCanvas;
   exports.equalPoint = equalPoint;
   exports.equalTouchPoint = equalTouchPoint;
@@ -2622,6 +2738,7 @@ var iDrawUtil = function(exports) {
   exports.getDefaultElementDetailConfig = getDefaultElementDetailConfig;
   exports.getDefaultElementRectDetail = getDefaultElementRectDetail;
   exports.getElemenetsAssetIds = getElemenetsAssetIds;
+  exports.getElementPositionFromList = getElementPositionFromList;
   exports.getElementRotateVertexes = getElementRotateVertexes;
   exports.getElementSize = getElementSize;
   exports.getElementVertexes = getElementVertexes;
@@ -2630,6 +2747,7 @@ var iDrawUtil = function(exports) {
   exports.getViewPointAtElement = getViewPointAtElement;
   exports.getViewScaleInfoFromSnapshot = getViewScaleInfoFromSnapshot;
   exports.getViewSizeInfoFromSnapshot = getViewSizeInfoFromSnapshot;
+  exports.insertElementToListByPosition = insertElementToListByPosition;
   exports.is = is;
   exports.isAssetId = isAssetId;
   exports.isColorStr = isColorStr;