@idraw/core 0.4.0-alpha.5 → 0.4.0-alpha.7

package/dist/index.global.js

@@ -358,21 +358,38 @@ var __privateMethod = (obj, member, method) => {
     fontWeight: fontWeight$1,
     strokeWidth
   };
+  var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
+    if (kind === "m")
+      throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+      throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+      throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+  };
+  var __classPrivateFieldGet = function(receiver, state, kind, f) {
+    if (kind === "a" && !f)
+      throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+      throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+  };
+  var _Context2D_ctx, _Context2D_opts;
   class Context2D {
     constructor(ctx, opts) {
-      this._devicePixelRatio = 1;
-      const { devicePixelRatio = 1 } = opts;
-      this._ctx = ctx;
-      this._devicePixelRatio = devicePixelRatio;
+      _Context2D_ctx.set(this, void 0);
+      _Context2D_opts.set(this, void 0);
+      __classPrivateFieldSet(this, _Context2D_ctx, ctx, "f");
+      __classPrivateFieldSet(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
     }
     $undoPixelRatio(num) {
-      return num / this._devicePixelRatio;
+      return num / __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio;
     }
     $doPixelRatio(num) {
-      return this._devicePixelRatio * num;
+      return __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio * num;
     }
     $getContext() {
-      return this._ctx;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f");
     }
     $setFont(opts) {
       const strList = [];
@@ -381,135 +398,153 @@ var __privateMethod = (obj, member, method) => {
       }
       strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
       strList.push(`${opts.fontFamily || "sans-serif"}`);
-      this._ctx.font = `${strList.join(" ")}`;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
+    }
+    $getOffscreenCanvas() {
+      return __classPrivateFieldGet(this, _Context2D_opts, "f").offscreenCanvas;
     }
     $resize(opts) {
-      const { width, height, devicePixelRatio } = opts;
-      const { canvas } = this._ctx;
+      const { width, height, devicePixelRatio, resetStyle } = opts;
+      const { canvas } = __classPrivateFieldGet(this, _Context2D_ctx, "f");
       canvas.width = width * devicePixelRatio;
       canvas.height = height * devicePixelRatio;
-      this._devicePixelRatio = devicePixelRatio;
+      __classPrivateFieldSet(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _Context2D_opts, "f")), {
+        devicePixelRatio
+      }), "f");
+      if (resetStyle === true) {
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+      }
+    }
+    $getSize() {
+      const { devicePixelRatio } = __classPrivateFieldGet(this, _Context2D_opts, "f");
+      const { width, height } = __classPrivateFieldGet(this, _Context2D_ctx, "f").canvas;
+      return {
+        width: width / devicePixelRatio,
+        height: height / devicePixelRatio,
+        devicePixelRatio
+      };
     }
     get canvas() {
-      return this._ctx.canvas;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").canvas;
     }
     get fillStyle() {
-      return this._ctx.fillStyle;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillStyle;
     }
     set fillStyle(value) {
-      this._ctx.fillStyle = value;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").fillStyle = value;
     }
     get strokeStyle() {
-      return this._ctx.strokeStyle;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeStyle;
     }
     set strokeStyle(color2) {
-      this._ctx.strokeStyle = color2;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeStyle = color2;
     }
     get lineWidth() {
-      return this.$undoPixelRatio(this._ctx.lineWidth);
+      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").lineWidth);
     }
     set lineWidth(w2) {
-      this._ctx.lineWidth = this.$doPixelRatio(w2);
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
     }
     get textAlign() {
-      return this._ctx.textAlign;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").textAlign;
     }
     set textAlign(align) {
-      this._ctx.textAlign = align;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").textAlign = align;
     }
     get textBaseline() {
-      return this._ctx.textBaseline;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").textBaseline;
     }
     set textBaseline(baseline) {
-      this._ctx.textBaseline = baseline;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").textBaseline = baseline;
     }
     get globalAlpha() {
-      return this._ctx.globalAlpha;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalAlpha;
     }
     set globalAlpha(alpha) {
-      this._ctx.globalAlpha = alpha;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").globalAlpha = alpha;
     }
     get shadowColor() {
-      return this._ctx.shadowColor;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowColor;
     }
     set shadowColor(color2) {
-      this._ctx.shadowColor = color2;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowColor = color2;
     }
     get shadowOffsetX() {
-      return this.$undoPixelRatio(this._ctx.shadowOffsetX);
+      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetX);
     }
     set shadowOffsetX(offsetX) {
-      this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
     }
     get shadowOffsetY() {
-      return this.$undoPixelRatio(this._ctx.shadowOffsetY);
+      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetY);
     }
     set shadowOffsetY(offsetY) {
-      this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
     }
     get shadowBlur() {
-      return this.$undoPixelRatio(this._ctx.shadowBlur);
+      return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowBlur);
     }
     set shadowBlur(blur) {
-      this._ctx.shadowBlur = this.$doPixelRatio(blur);
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
     }
     get lineCap() {
-      return this._ctx.lineCap;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap;
     }
     set lineCap(lineCap) {
-      this._ctx.lineCap = lineCap;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap = lineCap;
     }
     get globalCompositeOperation() {
-      return this._ctx.globalCompositeOperation;
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
-      this._ctx.globalCompositeOperation = operations;
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
     }
     fill(...args) {
-      return this._ctx.fill(...args);
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     beginPath() {
-      return this._ctx.beginPath();
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").beginPath();
     }
     closePath() {
-      return this._ctx.closePath();
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").closePath();
     }
     lineTo(x2, y2) {
-      return this._ctx.lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     moveTo(x2, y2) {
-      return this._ctx.moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
     }
     getLineDash() {
-      return this._ctx.getLineDash();
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").getLineDash();
     }
     setLineDash(nums) {
       const dash = nums.map((n) => this.$doPixelRatio(n));
-      return this._ctx.setLineDash(dash);
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").setLineDash(dash);
     }
     stroke(path) {
-      return path ? this._ctx.stroke(path) : this._ctx.stroke();
+      return path ? __classPrivateFieldGet(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet(this, _Context2D_ctx, "f").stroke();
     }
     translate(x2, y2) {
-      return this._ctx.translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     rotate(angle2) {
-      return this._ctx.rotate(angle2);
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").rotate(angle2);
     }
     drawImage(...args) {
       const image = args[0];
@@ -522,66 +557,67 @@ var __privateMethod = (obj, member, method) => {
       const dw = args[args.length - 2];
       const dh = args[args.length - 1];
       if (args.length === 9) {
-        return this._ctx.drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
       } else {
-        return this._ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
       }
     }
     createPattern(image, repetition) {
-      return this._ctx.createPattern(image, repetition);
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").createPattern(image, repetition);
     }
     measureText(text2) {
-      const textMetrics = this._ctx.measureText(text2);
+      const textMetrics = __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return this._ctx.fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").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 __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return this._ctx.strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     save() {
-      this._ctx.save();
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").save();
     }
     restore() {
-      this._ctx.restore();
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").restore();
     }
     scale(ratioX, ratioY) {
-      this._ctx.scale(ratioX, ratioY);
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
     }
     circle(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      this._ctx.ellipse(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
+      __classPrivateFieldGet(this, _Context2D_ctx, "f").ellipse(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
     }
     isPointInPath(x2, y2) {
-      return this._ctx.isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     clip(...args) {
-      return this._ctx.clip(...args);
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").clip(...args);
     }
     setTransform(a, b, c, d, e, f) {
-      return this._ctx.setTransform(a, b, c, d, e, f);
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
     }
     getTransform() {
-      return this._ctx.getTransform();
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return this._ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
-      return this._ctx.createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
     }
     createConicGradient(startAngle, x2, y2) {
-      return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
   }
+  _Context2D_ctx = /* @__PURE__ */ new WeakMap(), _Context2D_opts = /* @__PURE__ */ new WeakMap();
   function createContext2D(opts) {
     const { width, height, ctx, devicePixelRatio } = opts;
     let context = ctx;
@@ -594,23 +630,72 @@ var __privateMethod = (obj, member, method) => {
     const context2d = new Context2D(context, opts);
     return context2d;
   }
-  function createBoardContexts(ctx, opts) {
+  function createOffscreenContext2D(opts) {
+    const { width, height, devicePixelRatio } = opts;
+    const offCanvas = new OffscreenCanvas(width * devicePixelRatio, height * devicePixelRatio);
+    const offRenderCtx = offCanvas.getContext("2d");
+    const offCtx = offRenderCtx.canvas.getContext("2d");
+    const context2d = new Context2D(offCtx, {
+      devicePixelRatio,
+      offscreenCanvas: offCanvas
+    });
+    return context2d;
+  }
+  function createViewContent(canvas, opts) {
+    const { width, height, devicePixelRatio, offscreen } = opts;
     const ctxOpts = {
-      width: ctx.canvas.width,
-      height: ctx.canvas.height,
-      devicePixelRatio: (opts === null || opts === void 0 ? void 0 : opts.devicePixelRatio) || 1
+      width,
+      height,
+      devicePixelRatio
     };
-    const viewContext = createContext2D(ctxOpts);
-    const helperContext = createContext2D(ctxOpts);
-    const underContext = createContext2D(ctxOpts);
-    const boardContext = createContext2D(Object.assign({ 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(Object.assign({ 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(Object.assign({ 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() {
@@ -1009,6 +1094,32 @@ var __privateMethod = (obj, member, method) => {
     _scan(uuid, elements);
     return groupQueue;
   }
+  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 checkRectIntersect(rect1, rect2) {
     const react1MinX = rect1.x;
     const react1MinY = rect1.y;
@@ -1020,6 +1131,25 @@ var __privateMethod = (obj, member, method) => {
     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;
@@ -1371,7 +1501,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function getDefaultElementDetailConfig() {
     const config = {
-      boxSizing: "center-line",
+      boxSizing: "border-box",
       borderWidth: 0,
       borderColor: "#000000",
       shadowColor: "#000000",
@@ -1387,7 +1517,8 @@ var __privateMethod = (obj, member, method) => {
       fontSize: 16,
       lineHeight: 20,
       fontFamily: "sans-serif",
-      fontWeight: 400
+      fontWeight: 400,
+      overflow: "hidden"
     };
     return config;
   }
@@ -1409,7 +1540,7 @@ var __privateMethod = (obj, member, method) => {
     }
     let bw = 0;
     if (typeof borderWidth2 === "number") {
-      bw = (borderWidth2 || 1) * scale;
+      bw = (borderWidth2 || 0) * scale;
     }
     if (boxSizing === "border-box") {
       x2 = viewElem.x + bw / 2;
@@ -1427,6 +1558,11 @@ var __privateMethod = (obj, member, method) => {
       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,
@@ -1706,6 +1842,11 @@ var __privateMethod = (obj, member, method) => {
       } else {
         ctx.lineCap = "square";
       }
+      w2 = Math.max(w2, 1);
+      h2 = Math.max(h2, 1);
+      radiusList = radiusList.map((r) => {
+        return Math.min(r, w2 / 2, h2 / 2);
+      });
       ctx.setLineDash(viewBorderDash);
       ctx.lineWidth = bw;
       ctx.beginPath();
@@ -1830,6 +1971,7 @@ var __privateMethod = (obj, member, method) => {
                   viewSizeInfo
                 });
                 ctx.save();
+                ctx.fillStyle = "transparent";
                 ctx.beginPath();
                 ctx.moveTo(x3 + radiusList[0], y3);
                 ctx.arcTo(x3 + w3, y3, x3 + w3, y3 + h3, radiusList[1]);
@@ -2066,7 +2208,8 @@ var __privateMethod = (obj, member, method) => {
           break;
         }
         case "group": {
-          drawGroup(ctx, elem, opts);
+          const assets = Object.assign(Object.assign({}, opts.elementAssets || {}), elem.detail.assets || {});
+          drawGroup(ctx, elem, Object.assign(Object.assign({}, opts), { elementAssets: assets }));
           break;
         }
         default: {
@@ -2082,49 +2225,65 @@ var __privateMethod = (obj, member, method) => {
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      drawBox(ctx, viewElem, {
-        originElem: elem,
-        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+      drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          if (Array.isArray(elem.detail.children)) {
-            const { parentElementSize: parentSize } = opts;
-            const newParentSize = {
-              x: parentSize.x + elem.x,
-              y: parentSize.y + elem.y,
-              w: elem.w || parentSize.w,
-              h: elem.h || parentSize.h,
-              angle: elem.angle
-            };
-            const { calculator: calculator2 } = opts;
-            if (elem.detail.overflow === "hidden") {
-              ctx.save();
-              ctx.beginPath();
-              ctx.moveTo(x2, y2);
-              ctx.lineTo(x2 + w2, y2);
-              ctx.lineTo(x2 + w2, y2 + h2);
-              ctx.lineTo(x2, y2 + h2);
-              ctx.closePath();
-              ctx.clip();
-            }
-            for (let i = 0; i < elem.detail.children.length; i++) {
-              let child = elem.detail.children[i];
-              child = Object.assign(Object.assign({}, child), {
-                x: newParentSize.x + child.x,
-                y: newParentSize.y + child.y
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+              const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
+                viewScaleInfo,
+                viewSizeInfo
               });
-              if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                continue;
+              if (elem.detail.overflow === "hidden") {
+                ctx.save();
+                ctx.fillStyle = "transparent";
+                ctx.beginPath();
+                ctx.moveTo(x3 + radiusList[0], y3);
+                ctx.arcTo(x3 + w3, y3, x3 + w3, y3 + h3, radiusList[1]);
+                ctx.arcTo(x3 + w3, y3 + h3, x3, y3 + h3, radiusList[2]);
+                ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
+                ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
+                ctx.closePath();
+                ctx.fill();
+                ctx.clip();
               }
-              try {
-                drawElement(ctx, child, Object.assign({}, opts));
-              } catch (err) {
-                console.error(err);
+              if (Array.isArray(elem.detail.children)) {
+                const { parentElementSize: parentSize } = opts;
+                const newParentSize = {
+                  x: parentSize.x + elem.x,
+                  y: parentSize.y + elem.y,
+                  w: elem.w || parentSize.w,
+                  h: elem.h || parentSize.h,
+                  angle: elem.angle
+                };
+                const { calculator: calculator2 } = opts;
+                for (let i = 0; i < elem.detail.children.length; i++) {
+                  let child = elem.detail.children[i];
+                  child = Object.assign(Object.assign({}, child), {
+                    x: newParentSize.x + child.x,
+                    y: newParentSize.y + child.y
+                  });
+                  if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
+                    continue;
+                  }
+                  try {
+                    drawElement(ctx, child, Object.assign({}, opts));
+                  } catch (err) {
+                    console.error(err);
+                  }
+                }
+              }
+              if (elem.detail.overflow === "hidden") {
+                ctx.globalAlpha = 1;
+                ctx.restore();
               }
             }
-            ctx.restore();
-          }
+          });
         }
       });
     });
@@ -2498,10 +2657,8 @@ var __privateMethod = (obj, member, method) => {
         const deltaY = e.deltaY > 0 || e.deltaY < 0 ? e.deltaY : 0;
         if (e.ctrlKey === true && this.has("wheelScale")) {
           this.trigger("wheelScale", { deltaX, deltaY, point });
-        } else if (this.has("wheelX") && deltaX !== 0) {
-          this.trigger("wheelX", { deltaX, point });
-        } else if (this.has("wheelY") && deltaY !== 0) {
-          this.trigger("wheelY", { deltaY, point });
+        } else if (this.has("wheel")) {
+          this.trigger("wheel", { deltaX, deltaY, point });
         }
       }, { passive: false });
       container.addEventListener("click", (e) => {
@@ -2658,7 +2815,6 @@ var __privateMethod = (obj, member, method) => {
       const { renderer, viewContent, beforeDrawFrame, afterDrawFrame } = this._opts;
       if (snapshot) {
         const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
-        const { underContext, viewContext, helperContext, boardContext } = viewContent;
         if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
           renderer.drawData(snapshot.activeStore.data, {
             viewScaleInfo: {
@@ -2678,13 +2834,7 @@ var __privateMethod = (obj, member, method) => {
           });
         }
         beforeDrawFrame({ snapshot });
-        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);
+        viewContent.drawView();
         afterDrawFrame({ snapshot });
       }
       if (this._drawFrameSnapshotQueue.length === 0) {
@@ -2733,6 +2883,14 @@ var __privateMethod = (obj, member, method) => {
       sharer.setActiveViewScaleInfo(viewScaleInfo);
       return viewScaleInfo;
     }
+    updateViewScaleInfo(opts) {
+      const { sharer } = this._opts;
+      const viewScaleInfo = calcViewScaleInfo(opts, {
+        viewSizeInfo: sharer.getActiveViewSizeInfo()
+      });
+      sharer.setActiveViewScaleInfo(viewScaleInfo);
+      return viewScaleInfo;
+    }
     resize(viewSize = {}) {
       const { sharer } = this._opts;
       const originViewSize = sharer.getActiveViewSizeInfo();
@@ -2753,7 +2911,7 @@ var __privateMethod = (obj, member, method) => {
       return newViewSize;
     }
   }
-  const frameTime = 16;
+  const throttleTime = 10;
   const LOCK_MODES = ["RULER"];
   class Board {
     constructor(opts) {
@@ -2776,7 +2934,6 @@ var __privateMethod = (obj, member, method) => {
       });
       this._opts = opts;
       this._sharer = sharer;
-      this._renderer = renderer;
       this._watcher = watcher;
       this._calculator = calculator;
       this._viewer = new Viewer({
@@ -2799,19 +2956,16 @@ var __privateMethod = (obj, member, method) => {
       this._watcher.on("pointEnd", this._handlePointEnd.bind(this));
       this._watcher.on("pointMove", throttle((e) => {
         this._handlePointMove(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("hover", throttle((e) => {
         this._handleHover(e);
-      }, frameTime));
-      this._watcher.on("wheelX", throttle((e) => {
-        this._handleWheelX(e);
-      }, frameTime));
-      this._watcher.on("wheelY", throttle((e) => {
-        this._handleWheelY(e);
-      }, frameTime));
+      }, throttleTime));
+      this._watcher.on("wheel", throttle((e) => {
+        this._handleWheel(e);
+      }, throttleTime));
       this._watcher.on("wheelScale", throttle((e) => {
         this._handleWheelScale(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("scrollX", this._handleScrollX.bind(this));
       this._watcher.on("scrollY", this._handleScrollY.bind(this));
       this._watcher.on("resize", this._handleResize.bind(this));
@@ -2867,21 +3021,11 @@ var __privateMethod = (obj, member, method) => {
         }
       }
     }
-    _handleWheelX(e) {
-      var _a;
-      for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-        const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheelX) === null || _a === void 0 ? void 0 : _a.call(obj, e);
-        if (result === false) {
-          return;
-        }
-      }
-    }
-    _handleWheelY(e) {
+    _handleWheel(e) {
       var _a;
       for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
         const obj = this._activeMiddlewareObjs[i];
-        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheelY) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.wheel) === null || _a === void 0 ? void 0 : _a.call(obj, e);
         if (result === false) {
           return;
         }
@@ -3009,14 +3153,14 @@ var __privateMethod = (obj, member, method) => {
     scroll(opts) {
       return this._viewer.scroll(opts);
     }
+    updateViewScaleInfo(opts) {
+      return this._viewer.updateViewScaleInfo(opts);
+    }
     resize(newViewSize) {
       const viewSize = this._viewer.resize(newViewSize);
       const { width, height, devicePixelRatio } = newViewSize;
       const { viewContent } = this._opts;
       viewContent.viewContext.$resize({ width, height, devicePixelRatio });
-      const canvas = viewContent.viewContext.canvas;
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
       viewContent.helperContext.$resize({ width, height, devicePixelRatio });
       viewContent.boardContext.$resize({ width, height, devicePixelRatio });
       this._viewer.drawFrame();
@@ -4060,13 +4204,24 @@ var __privateMethod = (obj, member, method) => {
         ...defaultElementDetail,
         ...element.detail
       };
+      let elemX = element.x * scale + offsetLeft;
+      let elemY = element.y * scale + offsetTop;
+      let elemW = element.w * scale;
+      let elemH = element.h * scale;
+      if (groupQueue.length > 0) {
+        elemX = element.x * scale;
+        elemY = element.y * scale;
+        elemW = element.w * scale;
+        elemH = element.h * scale;
+      }
       textarea.style.position = "absolute";
-      textarea.style.left = `${element.x * scale}px`;
-      textarea.style.top = `${element.y * scale}px`;
-      textarea.style.width = `${element.w * scale}px`;
-      textarea.style.height = `${element.h * scale}px`;
+      textarea.style.left = `${elemX}px`;
+      textarea.style.top = `${elemY}px`;
+      textarea.style.width = `${elemW}px`;
+      textarea.style.height = `${elemH}px`;
       textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
-      textarea.style.border = "none";
+      textarea.style.boxSizing = "border-box";
+      textarea.style.border = "1px solid #1973ba";
       textarea.style.resize = "none";
       textarea.style.overflow = "hidden";
       textarea.style.wordBreak = "break-all";
@@ -4121,10 +4276,15 @@ var __privateMethod = (obj, member, method) => {
     const { helperContext } = viewContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on(middlewareEventSelect, ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids, positions }) => {
+      let elements = [];
       const actionType = sharer.getSharedStorage(keyActionType);
       const data = sharer.getActiveStorage("data");
-      const elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
+      if (positions && Array.isArray(positions)) {
+        elements = findElementsFromListByPositions(positions, (data == null ? void 0 : data.elements) || []);
+      } else {
+        elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
+      }
       let needRefresh = false;
       if (!actionType && elements.length === 1) {
         sharer.setSharedStorage(keyActionType, "select");
@@ -4797,24 +4957,12 @@ var __privateMethod = (obj, member, method) => {
     };
     return {
       mode: key,
-      // hover: (e: PointWatcherEvent) => {
-      //   const { point } = e;
-      //   const thumbType = getThumbType(point);
-      //   if (thumbType === 'X' || thumbType === 'Y') {
-      //     return false;
-      //   }
-      // },
-      wheelX: (e) => {
-        if (e.deltaX >= 0 || e.deltaX < 0) {
-          viewer.scroll({ moveX: 0 - e.deltaX });
-          viewer.drawFrame();
-        }
-      },
-      wheelY: (e) => {
-        if (e.deltaY >= 0 || e.deltaY < 0) {
-          viewer.scroll({ moveY: 0 - e.deltaY });
-          viewer.drawFrame();
-        }
+      wheel: (e) => {
+        viewer.scroll({
+          moveX: 0 - e.deltaX,
+          moveY: 0 - e.deltaY
+        });
+        viewer.drawFrame();
       },
       pointStart: (e) => {
         const { point } = e;
@@ -4892,8 +5040,8 @@ var __privateMethod = (obj, member, method) => {
   const fontFamily = "monospace";
   const fontSize = 10;
   const fontWeight = 100;
-  const gridColor = "#AAAAAA30";
-  const gridKeyColor = "#AAAAAA70";
+  const gridColor = "#AAAAAA20";
+  const gridKeyColor = "#AAAAAA40";
   const lineSize = 1;
   function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
@@ -5122,8 +5270,7 @@ var __privateMethod = (obj, member, method) => {
       const canvas = document.createElement("canvas");
       __privateMethod(this, _initContainer, initContainer_fn).call(this);
       container.appendChild(canvas);
-      const ctx = canvas.getContext("2d");
-      const viewContent = createBoardContexts(ctx, { devicePixelRatio });
+      const viewContent = createViewContent(canvas, { width, height, devicePixelRatio, offscreen: true });
       const board = new Board({ viewContent, container });
       const sharer = board.getSharer();
       sharer.setActiveViewSizeInfo({
@@ -5179,6 +5326,22 @@ var __privateMethod = (obj, member, method) => {
       const eventHub = __privateGet(this, _board).getEventHub();
       eventHub.trigger(name, e);
     }
+    getViewInfo() {
+      const board = __privateGet(this, _board);
+      const sharer = board.getSharer();
+      const viewSizeInfo = sharer.getActiveViewSizeInfo();
+      const viewScaleInfo = sharer.getActiveViewScaleInfo();
+      return {
+        viewSizeInfo,
+        viewScaleInfo
+      };
+    }
+    refresh() {
+      __privateGet(this, _board).getViewer().drawFrame();
+    }
+    setViewScale(opts) {
+      __privateGet(this, _board).updateViewScaleInfo(opts);
+    }
   }
   _board = new WeakMap();
   _container = new WeakMap();