@idraw/core 0.4.0-alpha.6 → 0.4.0-beta.0

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
-    };
-    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
+      width,
+      height,
+      devicePixelRatio
     };
-    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() {
@@ -2123,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: {
@@ -2571,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) => {
@@ -2731,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: {
@@ -2751,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) {
@@ -2883,11 +2960,8 @@ var __privateMethod = (obj, member, method) => {
       this._watcher.on("hover", throttle((e) => {
         this._handleHover(e);
       }, throttleTime));
-      this._watcher.on("wheelX", throttle((e) => {
-        this._handleWheelX(e);
-      }, throttleTime));
-      this._watcher.on("wheelY", throttle((e) => {
-        this._handleWheelY(e);
+      this._watcher.on("wheel", throttle((e) => {
+        this._handleWheel(e);
       }, throttleTime));
       this._watcher.on("wheelScale", throttle((e) => {
         this._handleWheelScale(e);
@@ -2947,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;
         }
@@ -3097,9 +3161,6 @@ var __privateMethod = (obj, member, method) => {
       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();
@@ -3241,7 +3302,9 @@ var __privateMethod = (obj, member, method) => {
   const keySelectedElementController = Symbol(`${key$1}_selectedElementController`);
   const keyGroupQueue = Symbol(`${key$1}_groupQueue`);
   const keyGroupQueueVertexesList = Symbol(`${key$1}_groupQueueVertexesList`);
-  const resizeControllerBorderWidth = 2;
+  const selectWrapperBorderWidth = 2;
+  const resizeControllerBorderWidth = 4;
+  const areaBorderWidth = 1;
   const wrapperColor = "#1973ba";
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
@@ -3271,8 +3334,8 @@ var __privateMethod = (obj, member, method) => {
     if (!controller) {
       return;
     }
-    const { elementWrapper, left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = controller;
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: "transparent", lineDash: [] };
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight } = controller;
+    const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
@@ -3283,7 +3346,7 @@ var __privateMethod = (obj, member, method) => {
   function drawArea(ctx, opts) {
     const { start, end } = opts;
     ctx.setLineDash([]);
-    ctx.lineWidth = 1;
+    ctx.lineWidth = areaBorderWidth;
     ctx.strokeStyle = wrapperColor;
     ctx.fillStyle = "#1976d24f";
     ctx.beginPath();
@@ -3299,7 +3362,7 @@ var __privateMethod = (obj, member, method) => {
     const { areaSize } = opts;
     const { x: x2, y: y2, w: w2, h: h2 } = areaSize;
     ctx.setLineDash([]);
-    ctx.lineWidth = 1;
+    ctx.lineWidth = areaBorderWidth;
     ctx.strokeStyle = wrapperColor;
     ctx.fillStyle = "#1976d21c";
     ctx.beginPath();
@@ -3314,7 +3377,7 @@ var __privateMethod = (obj, member, method) => {
   function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
     for (let i = 0; i < vertexesList.length; i++) {
       const vertexes = vertexesList[i];
-      const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, background: "transparent", lineDash: [4, 4] };
+      const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [4, 4] };
       drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
   }
@@ -4143,13 +4206,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";
@@ -4885,24 +4959,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;
@@ -5210,8 +5272,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({
@@ -5280,7 +5341,7 @@ var __privateMethod = (obj, member, method) => {
     refresh() {
       __privateGet(this, _board).getViewer().drawFrame();
     }
-    updateViewScale(opts) {
+    setViewScale(opts) {
       __privateGet(this, _board).updateViewScaleInfo(opts);
     }
   }