@idraw/util 0.4.0-alpha.5 → 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 };
@@ -1665,6 +1704,58 @@ var iDrawUtil = function(exports) {
   function isResourceElement(elem) {
     return ["image", "svg", "html"].includes(elem == null ? void 0 : elem.type);
   }
+  function findElementsFromListByPositions(positions, list) {
+    const elements = [];
+    positions.forEach((pos) => {
+      const elem = findElementFromListByPosition(pos, list);
+      if (elem) {
+        elements.push(elem);
+      }
+    });
+    return elements;
+  }
+  function findElementFromListByPosition(position, list) {
+    let result = null;
+    let tempList = list;
+    for (let i = 0; i < position.length; i++) {
+      const pos = position[i];
+      const item = tempList[pos];
+      if (i < position.length - 1 && item.type === "group") {
+        tempList = item.detail.children;
+      } else if (i === position.length - 1) {
+        result = item;
+      } else {
+        break;
+      }
+    }
+    return result;
+  }
+  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;
+        }
+        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) {
     const react1MinX = rect1.x;
     const react1MinY = rect1.y;
@@ -1676,6 +1767,25 @@ var iDrawUtil = function(exports) {
     const react2MaxY = rect2.y + rect2.h;
     return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
   }
+  function calcViewScaleInfo(info, opts) {
+    const { scale, offsetX, offsetY } = info;
+    const { viewSizeInfo } = opts;
+    const { width, height, contextWidth, contextHeight } = viewSizeInfo;
+    const w2 = contextWidth * scale;
+    const h2 = contextHeight * scale;
+    const offsetLeft = 0 - offsetX * scale;
+    const offsetTop = 0 - offsetY * scale;
+    const offsetRight = width - (w2 + offsetLeft / scale);
+    const offsetBottom = height - (h2 + offsetTop / scale);
+    const newScaleInfo = {
+      scale,
+      offsetLeft,
+      offsetTop,
+      offsetRight,
+      offsetBottom
+    };
+    return newScaleInfo;
+  }
   function viewScale(opts) {
     const { scale, point, viewScaleInfo: prevViewScaleInfo } = opts;
     const { offsetLeft, offsetTop } = prevViewScaleInfo;
@@ -2246,7 +2356,7 @@ var iDrawUtil = function(exports) {
   }
   function getDefaultElementDetailConfig() {
     const config = {
-      boxSizing: "center-line",
+      boxSizing: "border-box",
       borderWidth: 0,
       borderColor: "#000000",
       shadowColor: "#000000",
@@ -2262,10 +2372,60 @@ var iDrawUtil = function(exports) {
       fontSize: 16,
       lineHeight: 20,
       fontFamily: "sans-serif",
-      fontWeight: 400
+      fontWeight: 400,
+      overflow: "hidden"
     };
     return config;
   }
+  function getDefaultElementRectDetail() {
+    const detail = {
+      background: "#D9D9D9"
+    };
+    return detail;
+  }
+  function getDefaultElementCircleDetail(opts) {
+    const detail = {
+      background: "#D9D9D9",
+      radius: 0
+    };
+    return detail;
+  }
+  function getDefaultElementTextDetail(opts) {
+    var _a;
+    const detailConfig = getDefaultElementDetailConfig();
+    const scale = ((_a = opts == null ? void 0 : opts.viewScaleInfo) == null ? void 0 : _a.scale) || 1;
+    const detail = {
+      text: "Text Element",
+      color: detailConfig.color,
+      fontFamily: detailConfig.fontFamily,
+      fontWeight: detailConfig.fontWeight,
+      lineHeight: detailConfig.fontSize * scale,
+      fontSize: detailConfig.fontSize * scale,
+      textAlign: "center",
+      verticalAlign: "middle"
+    };
+    return detail;
+  }
+  function getDefaultElementSVGDetail() {
+    const detail = {
+      svg: '<svg t="1701004189871" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"   width="200" height="200"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"   fill="#2c2c2c"></path></svg>'
+    };
+    return detail;
+  }
+  function getDefaultElementImageDetail() {
+    const detail = {
+      src: "data:image/svg+xml;base64,PHN2ZyAgIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik05MjggMTYwSDk2Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY2NDBjMCAxNy43IDE0LjMgMzIgMzIgMzJoODMyYzE3LjcgMCAzMi0xNC4zIDMyLTMyVjE5MmMwLTE3LjctMTQuMy0zMi0zMi0zMnogbS00MCA2MzJIMTM2di0zOS45bDEzOC41LTE2NC4zIDE1MC4xIDE3OEw2NTguMSA0ODkgODg4IDc2MS42Vjc5MnogbTAtMTI5LjhMNjY0LjIgMzk2LjhjLTMuMi0zLjgtOS0zLjgtMTIuMiAwTDQyNC42IDY2Ni40bC0xNDQtMTcwLjdjLTMuMi0zLjgtOS0zLjgtMTIuMiAwTDEzNiA2NTIuN1YyMzJoNzUydjQzMC4yeiIgIGZpbGw9IiM1MTUxNTEiPjwvcGF0aD48cGF0aCBkPSJNMzA0IDQ1NmM0OC42IDAgODgtMzkuNCA4OC04OHMtMzkuNC04OC04OC04OC04OCAzOS40LTg4IDg4IDM5LjQgODggODggODh6IG0wLTExNmMxNS41IDAgMjggMTIuNSAyOCAyOHMtMTIuNSAyOC0yOCAyOC0yOC0xMi41LTI4LTI4IDEyLjUtMjggMjgtMjh6IiAgZmlsbD0iIzUxNTE1MSI+PC9wYXRoPjwvc3ZnPg=="
+    };
+    return detail;
+  }
+  function getDefaultElementGroupDetail(opts) {
+    const detail = {
+      children: [],
+      background: "#D9D9D9",
+      overflow: "hidden"
+    };
+    return detail;
+  }
   const defaultElemConfig = getDefaultElementDetailConfig();
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
@@ -2284,7 +2444,7 @@ var iDrawUtil = function(exports) {
     }
     let bw = 0;
     if (typeof borderWidth2 === "number") {
-      bw = (borderWidth2 || 1) * scale;
+      bw = (borderWidth2 || 0) * scale;
     }
     if (boxSizing === "border-box") {
       x2 = viewElem.x + bw / 2;
@@ -2302,6 +2462,11 @@ var iDrawUtil = function(exports) {
       w2 = viewElem.w;
       h2 = viewElem.h;
     }
+    w2 = Math.max(w2, 1);
+    h2 = Math.max(h2, 1);
+    radiusList = radiusList.map((r) => {
+      return Math.min(r, w2 / 2, h2 / 2);
+    });
     return {
       x: x2,
       y: y2,
@@ -2310,6 +2475,219 @@ var iDrawUtil = function(exports) {
       radiusList
     };
   }
+  const defaultViewWidth = 200;
+  const defaultViewHeight = 200;
+  const defaultDetail = getDefaultElementDetailConfig();
+  function createElementSize(type, opts) {
+    let x2 = 0;
+    let y2 = 0;
+    let w2 = defaultViewWidth;
+    let h2 = defaultViewHeight;
+    if (opts) {
+      const { viewScaleInfo, viewSizeInfo } = opts;
+      const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+      const { width, height } = viewSizeInfo;
+      if (type === "text") {
+        const textDetail = getDefaultElementTextDetail();
+        w2 = defaultDetail.fontSize * scale * textDetail.text.length;
+        h2 = defaultDetail.fontSize * scale * 2;
+      } else {
+        const limitViewWidth = width / 4;
+        const limitViewHeight = height / 4;
+        if (defaultViewWidth >= limitViewWidth) {
+          w2 = limitViewWidth / scale;
+        } else {
+          w2 = defaultViewWidth / scale;
+        }
+        if (defaultViewHeight >= limitViewHeight) {
+          h2 = limitViewHeight / scale;
+        } else {
+          h2 = defaultViewHeight / scale;
+        }
+        if (["circle", "svg", "image"].includes(type)) {
+          w2 = h2 = Math.max(w2, h2);
+        }
+      }
+      x2 = (0 - offsetLeft + width / 2 - w2 * scale / 2) / scale;
+      y2 = (0 - offsetTop + height / 2 - h2 * scale / 2) / scale;
+    }
+    const elemSize = {
+      x: x2,
+      y: y2,
+      w: w2,
+      h: h2
+    };
+    return elemSize;
+  }
+  function createElement(type, baseElem, opts) {
+    const elemSize = createElementSize(type, opts);
+    let detail = {};
+    if (type === "rect") {
+      detail = getDefaultElementRectDetail();
+    } else if (type === "circle") {
+      detail = getDefaultElementCircleDetail({
+        radius: elemSize.w
+      });
+    } else if (type === "text") {
+      detail = getDefaultElementTextDetail(opts);
+    } else if (type === "svg") {
+      detail = getDefaultElementSVGDetail();
+    } else if (type === "image") {
+      detail = getDefaultElementImageDetail();
+    } else if (type === "group") {
+      detail = getDefaultElementGroupDetail();
+    }
+    const elem = {
+      ...elemSize,
+      ...baseElem,
+      uuid: createUUID(),
+      type,
+      detail: {
+        ...detail,
+        ...baseElem.detail || {}
+      }
+    };
+    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) {
+      return elements;
+    }
+    if (from.length <= to.length) {
+      for (let i = 0; i < from.length; i++) {
+        if (to[i] === from[i]) {
+          if (i === from.length - 1) {
+            return elements;
+          }
+          continue;
+        }
+      }
+    }
+    const target = findElementFromListByPosition(from, elements);
+    if (target) {
+      const insterResult = insertElementToListByPosition(target, to, elements);
+      if (!insterResult) {
+        return elements;
+      }
+      let trimDeletePosIndex = -1;
+      for (let i = 0; i < from.length; i++) {
+        if (!(to[i] >= 0)) {
+          break;
+        }
+        if (to[i] === from[i]) {
+          continue;
+        }
+        if (to[i] < from[i] && i == to.length - 1) {
+          trimDeletePosIndex = i;
+        }
+      }
+      if (trimDeletePosIndex >= 0) {
+        {
+          from[trimDeletePosIndex] = from[trimDeletePosIndex] + 1;
+        }
+      }
+      deleteElementInListByPosition(from, elements);
+    }
+    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;
@@ -2326,6 +2704,7 @@ var iDrawUtil = function(exports) {
   exports.calcViewBoxSize = calcViewBoxSize;
   exports.calcViewElementSize = calcViewElementSize;
   exports.calcViewPointSize = calcViewPointSize;
+  exports.calcViewScaleInfo = calcViewScaleInfo;
   exports.calcViewVertexes = calcViewVertexes;
   exports.check = check;
   exports.checkRectIntersect = checkRectIntersect;
@@ -2335,24 +2714,31 @@ 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;
   exports.filterElementAsset = filterElementAsset;
   exports.findElementFromList = findElementFromList;
+  exports.findElementFromListByPosition = findElementFromListByPosition;
   exports.findElementsFromList = findElementsFromList;
+  exports.findElementsFromListByPositions = findElementsFromListByPositions;
   exports.formatNumber = formatNumber;
   exports.generateHTML = generateHTML;
   exports.generateSVGPath = generateSVGPath;
   exports.getCenterFromTwoPoints = getCenterFromTwoPoints;
   exports.getDefaultElementDetailConfig = getDefaultElementDetailConfig;
+  exports.getDefaultElementRectDetail = getDefaultElementRectDetail;
   exports.getElemenetsAssetIds = getElemenetsAssetIds;
+  exports.getElementPositionFromList = getElementPositionFromList;
   exports.getElementRotateVertexes = getElementRotateVertexes;
   exports.getElementSize = getElementSize;
   exports.getElementVertexes = getElementVertexes;
@@ -2361,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;
@@ -2376,6 +2763,7 @@ var iDrawUtil = function(exports) {
   exports.matrixToRadian = matrixToRadian;
   exports.mergeElementAsset = mergeElementAsset;
   exports.mergeHexColorAlpha = mergeHexColorAlpha;
+  exports.moveElementPosition = moveElementPosition;
   exports.parseAngleToRadian = parseAngleToRadian;
   exports.parseFileToBase64 = parseFileToBase64;
   exports.parseFileToText = parseFileToText;