@idraw/core 0.4.0-beta.3 → 0.4.0-beta.5

package/dist/index.global.js

@@ -358,7 +358,7 @@ var __privateMethod = (obj, member, method) => {
     fontWeight: fontWeight$1,
     strokeWidth
   };
-  var __classPrivateFieldSet$2 = function(receiver, state, value, kind, f) {
+  var __classPrivateFieldSet$3 = function(receiver, state, value, kind, f) {
     if (kind === "m")
       throw new TypeError("Private method is not writable");
     if (kind === "a" && !f)
@@ -367,7 +367,7 @@ var __privateMethod = (obj, member, method) => {
       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$2 = function(receiver, state, kind, f) {
+  var __classPrivateFieldGet$3 = 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))
@@ -379,17 +379,17 @@ var __privateMethod = (obj, member, method) => {
     constructor(ctx, opts) {
       _Context2D_ctx.set(this, void 0);
       _Context2D_opts.set(this, void 0);
-      __classPrivateFieldSet$2(this, _Context2D_ctx, ctx, "f");
-      __classPrivateFieldSet$2(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
+      __classPrivateFieldSet$3(this, _Context2D_ctx, ctx, "f");
+      __classPrivateFieldSet$3(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
     }
     $undoPixelRatio(num) {
-      return num / __classPrivateFieldGet$2(this, _Context2D_opts, "f").devicePixelRatio;
+      return num / __classPrivateFieldGet$3(this, _Context2D_opts, "f").devicePixelRatio;
     }
     $doPixelRatio(num) {
-      return __classPrivateFieldGet$2(this, _Context2D_opts, "f").devicePixelRatio * num;
+      return __classPrivateFieldGet$3(this, _Context2D_opts, "f").devicePixelRatio * num;
     }
     $getContext() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f");
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f");
     }
     $setFont(opts) {
       const strList = [];
@@ -398,17 +398,17 @@ var __privateMethod = (obj, member, method) => {
       }
       strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
       strList.push(`${opts.fontFamily || "sans-serif"}`);
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
     }
     $getOffscreenCanvas() {
-      return __classPrivateFieldGet$2(this, _Context2D_opts, "f").offscreenCanvas;
+      return __classPrivateFieldGet$3(this, _Context2D_opts, "f").offscreenCanvas;
     }
     $resize(opts) {
       const { width, height, devicePixelRatio, resetStyle } = opts;
-      const { canvas } = __classPrivateFieldGet$2(this, _Context2D_ctx, "f");
+      const { canvas } = __classPrivateFieldGet$3(this, _Context2D_ctx, "f");
       canvas.width = width * devicePixelRatio;
       canvas.height = height * devicePixelRatio;
-      __classPrivateFieldSet$2(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet$2(this, _Context2D_opts, "f")), {
+      __classPrivateFieldSet$3(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet$3(this, _Context2D_opts, "f")), {
         devicePixelRatio
       }), "f");
       if (resetStyle === true) {
@@ -417,8 +417,8 @@ var __privateMethod = (obj, member, method) => {
       }
     }
     $getSize() {
-      const { devicePixelRatio } = __classPrivateFieldGet$2(this, _Context2D_opts, "f");
-      const { width, height } = __classPrivateFieldGet$2(this, _Context2D_ctx, "f").canvas;
+      const { devicePixelRatio } = __classPrivateFieldGet$3(this, _Context2D_opts, "f");
+      const { width, height } = __classPrivateFieldGet$3(this, _Context2D_ctx, "f").canvas;
       return {
         width: width / devicePixelRatio,
         height: height / devicePixelRatio,
@@ -426,125 +426,125 @@ var __privateMethod = (obj, member, method) => {
       };
     }
     get canvas() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").canvas;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").canvas;
     }
     get fillStyle() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").fillStyle;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").fillStyle;
     }
     set fillStyle(value) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").fillStyle = value;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").fillStyle = value;
     }
     get strokeStyle() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").strokeStyle;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").strokeStyle;
     }
     set strokeStyle(color2) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").strokeStyle = color2;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").strokeStyle = color2;
     }
     get lineWidth() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$2(this, _Context2D_ctx, "f").lineWidth);
+      return this.$undoPixelRatio(__classPrivateFieldGet$3(this, _Context2D_ctx, "f").lineWidth);
     }
     set lineWidth(w2) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w2);
     }
     get textAlign() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").textAlign;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").textAlign;
     }
     set textAlign(align) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").textAlign = align;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").textAlign = align;
     }
     get textBaseline() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").textBaseline;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").textBaseline;
     }
     set textBaseline(baseline) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").textBaseline = baseline;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").textBaseline = baseline;
     }
     get globalAlpha() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").globalAlpha;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").globalAlpha;
     }
     set globalAlpha(alpha) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").globalAlpha = alpha;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").globalAlpha = alpha;
     }
     get shadowColor() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowColor;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowColor;
     }
     set shadowColor(color2) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowColor = color2;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowColor = color2;
     }
     get shadowOffsetX() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowOffsetX);
+      return this.$undoPixelRatio(__classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowOffsetX);
     }
     set shadowOffsetX(offsetX) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
     }
     get shadowOffsetY() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowOffsetY);
+      return this.$undoPixelRatio(__classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowOffsetY);
     }
     set shadowOffsetY(offsetY) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
     }
     get shadowBlur() {
-      return this.$undoPixelRatio(__classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowBlur);
+      return this.$undoPixelRatio(__classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowBlur);
     }
     set shadowBlur(blur) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
     }
     get lineCap() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").lineCap;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").lineCap;
     }
     set lineCap(lineCap) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").lineCap = lineCap;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").lineCap = lineCap;
     }
     get globalCompositeOperation() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").globalCompositeOperation;
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
     }
     fill(...args) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").fill(...args);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").fill(...args);
     }
     arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
     }
     rect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     fillRect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     clearRect(x2, y2, w2, h2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(w2), this.$doPixelRatio(h2));
     }
     beginPath() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").beginPath();
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").beginPath();
     }
     closePath() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").closePath();
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").closePath();
     }
     lineTo(x2, y2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     moveTo(x2, y2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     arcTo(x1, y1, x2, y2, radius) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
     }
     getLineDash() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").getLineDash();
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").getLineDash();
     }
     setLineDash(nums) {
       const dash = nums.map((n) => this.$doPixelRatio(n));
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").setLineDash(dash);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").setLineDash(dash);
     }
     stroke(path) {
-      return path ? __classPrivateFieldGet$2(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet$2(this, _Context2D_ctx, "f").stroke();
+      return path ? __classPrivateFieldGet$3(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet$3(this, _Context2D_ctx, "f").stroke();
     }
     translate(x2, y2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     rotate(angle2) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").rotate(angle2);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").rotate(angle2);
     }
     drawImage(...args) {
       const image = args[0];
@@ -557,64 +557,64 @@ var __privateMethod = (obj, member, method) => {
       const dw = args[args.length - 2];
       const dh = args[args.length - 1];
       if (args.length === 9) {
-        return __classPrivateFieldGet$2(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));
+        return __classPrivateFieldGet$3(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 __classPrivateFieldGet$2(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
       }
     }
     createPattern(image, repetition) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").createPattern(image, repetition);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").createPattern(image, repetition);
     }
     measureText(text2) {
-      const textMetrics = __classPrivateFieldGet$2(this, _Context2D_ctx, "f").measureText(text2);
+      const textMetrics = __classPrivateFieldGet$3(this, _Context2D_ctx, "f").measureText(text2);
       return textMetrics;
     }
     fillText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").fillText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     strokeText(text2, x2, y2, maxWidth) {
       if (maxWidth !== void 0) {
-        return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
+        return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(maxWidth));
       } else {
-        return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+        return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").strokeText(text2, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
       }
     }
     save() {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").save();
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").save();
     }
     restore() {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").restore();
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").restore();
     }
     scale(ratioX, ratioY) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
+      __classPrivateFieldGet$3(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
     }
     circle(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      __classPrivateFieldGet$2(this, _Context2D_ctx, "f").ellipse(this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
+      __classPrivateFieldGet$3(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 __classPrivateFieldGet$2(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
     clip(...args) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").clip(...args);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").clip(...args);
     }
     setTransform(a, b, c, d, e, f) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
     }
     getTransform() {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").getTransform();
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-      return __classPrivateFieldGet$2(this, _Context2D_ctx, "f").createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+      return __classPrivateFieldGet$3(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 __classPrivateFieldGet$2(this, _Context2D_ctx, "f").createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
+      return __classPrivateFieldGet$3(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 __classPrivateFieldGet$2(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
+      return __classPrivateFieldGet$3(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x2), this.$doPixelRatio(y2));
     }
   }
   _Context2D_ctx = /* @__PURE__ */ new WeakMap(), _Context2D_opts = /* @__PURE__ */ new WeakMap();
@@ -1528,7 +1528,7 @@ var __privateMethod = (obj, member, method) => {
     const { scale } = viewScaleInfo;
     let { borderRadius: borderRadius2 } = viewElem.detail;
     const { boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
-    if (typeof borderWidth2 !== "number") {
+    if (Array.isArray(borderWidth2)) {
       borderRadius2 = 0;
     }
     let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
@@ -1572,6 +1572,103 @@ var __privateMethod = (obj, member, method) => {
       radiusList
     };
   }
+  const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+  };
+  function resizeElementBaseDetail(elem, opts) {
+    const { detail } = elem;
+    const { xRatio, yRatio, maxRatio } = opts;
+    const middleRatio = (xRatio + yRatio) / 2;
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (typeof borderWidth2 === "number") {
+      detail.borderWidth = doNum(borderWidth2 * middleRatio);
+    } else if (Array.isArray(detail.borderWidth)) {
+      const bw = borderWidth2;
+      detail.borderWidth = [doNum(bw[0] * yRatio), doNum(bw[1] * xRatio), doNum(bw[2] * yRatio), doNum(bw[3] * xRatio)];
+    }
+    if (typeof borderRadius2 === "number") {
+      detail.borderRadius = doNum(borderRadius2 * middleRatio);
+    } else if (Array.isArray(detail.borderRadius)) {
+      const br = borderRadius2;
+      detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+    }
+    if (Array.isArray(borderDash)) {
+      borderDash.forEach((dash, i) => {
+        detail.borderDash[i] = doNum(dash * maxRatio);
+      });
+    }
+    if (typeof shadowOffsetX === "number") {
+      detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+    }
+    if (typeof shadowOffsetY === "number") {
+      detail.shadowOffsetX = doNum(shadowOffsetY * maxRatio);
+    }
+    if (typeof shadowBlur === "number") {
+      detail.shadowOffsetX = doNum(shadowBlur * maxRatio);
+    }
+  }
+  function resizeElementBase(elem, opts) {
+    const { xRatio, yRatio } = opts;
+    const { x: x2, y: y2, w: w2, h: h2 } = elem;
+    elem.x = doNum(x2 * xRatio);
+    elem.y = doNum(y2 * yRatio);
+    elem.w = doNum(w2 * xRatio);
+    elem.h = doNum(h2 * yRatio);
+    resizeElementBaseDetail(elem, opts);
+  }
+  function resizeTextElementDetail(elem, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize: fontSize2, lineHeight: lineHeight2 } = elem.detail;
+    const ratio = (minRatio + maxRatio) / 2;
+    if (fontSize2 && fontSize2 > 0) {
+      elem.detail.fontSize = doNum(fontSize2 * ratio);
+    }
+    if (lineHeight2 && lineHeight2 > 0) {
+      elem.detail.lineHeight = doNum(lineHeight2 * ratio);
+    }
+  }
+  function resizeElement$1(elem, opts) {
+    const { type } = elem;
+    resizeElementBase(elem, opts);
+    if (type === "circle")
+      ;
+    else if (type === "text") {
+      resizeTextElementDetail(elem, opts);
+    } else if (type === "image")
+      ;
+    else if (type === "svg")
+      ;
+    else if (type === "html")
+      ;
+    else if (type === "path")
+      ;
+    else if (type === "group" && Array.isArray(elem.detail.children)) {
+      elem.detail.children.forEach((child) => {
+        resizeElement$1(child, opts);
+      });
+    }
+  }
+  function deepResizeGroupElement(elem, size) {
+    const resizeW = size.w && size.w > 0 ? size.w : elem.w;
+    const resizeH = size.h && size.h > 0 ? size.h : elem.h;
+    const xRatio = resizeW / elem.w;
+    const yRatio = resizeH / elem.h;
+    if (xRatio === yRatio && xRatio === 1) {
+      return elem;
+    }
+    const minRatio = Math.min(xRatio, yRatio);
+    const maxRatio = Math.max(xRatio, yRatio);
+    elem.w = resizeW;
+    elem.h = resizeH;
+    const opts = { xRatio, yRatio, minRatio, maxRatio };
+    if (elem.type === "group" && Array.isArray(elem.detail.children)) {
+      elem.detail.children.forEach((child) => {
+        resizeElement$1(child, opts);
+      });
+    }
+    resizeElementBaseDetail(elem, opts);
+    return elem;
+  }
   function createColorStyle(ctx, color2, opts) {
     if (typeof color2 === "string") {
       return color2;
@@ -1616,24 +1713,29 @@ var __privateMethod = (obj, member, method) => {
     return "#000000";
   }
   const defaultElemConfig = getDefaultElementDetailConfig();
+  function getOpacity(elem) {
+    var _a, _b, _c, _d;
+    let opacity = 1;
+    if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0 && ((_c = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _c === void 0 ? void 0 : _c.opacity) <= 1) {
+      opacity = (_d = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _d === void 0 ? void 0 : _d.opacity;
+    }
+    return opacity;
+  }
   function drawBox(ctx, viewElem, opts) {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
+    const { parentOpacity } = opts;
+    const opacity = getOpacity(originElem) * parentOpacity;
     drawClipPath(ctx, viewElem, {
       originElem,
       calcElemSize,
       viewScaleInfo,
       viewSizeInfo,
       renderContent: () => {
-        var _a, _b;
-        if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-          ctx.globalAlpha = viewElem.detail.opacity;
-        } else {
-          ctx.globalAlpha = 1;
-        }
+        ctx.globalAlpha = opacity;
         drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
         drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
@@ -1670,8 +1772,6 @@ var __privateMethod = (obj, member, method) => {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     const transform = [];
-    viewElem.detail;
-    viewElem.detail;
     if (viewElem.detail.background || pattern) {
       const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
         viewScaleInfo,
@@ -1724,18 +1824,12 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawBoxBorder(ctx, viewElem, opts) {
-    var _a, _b;
     if (viewElem.detail.borderWidth === 0) {
       return;
     }
     if (!isColorStr(viewElem.detail.borderColor)) {
       return;
     }
-    if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-      ctx.globalAlpha = viewElem.detail.opacity;
-    } else {
-      ctx.globalAlpha = 1;
-    }
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
     let borderColor2 = defaultElemConfig.borderColor;
@@ -1859,7 +1953,6 @@ var __privateMethod = (obj, member, method) => {
       ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       ctx.stroke();
-      ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
   }
@@ -1881,8 +1974,14 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawCircle(ctx, elem, opts) {
     const { detail, angle: angle2 } = elem;
-    const { background: background2 = "#000000", borderColor: borderColor2 = "#000000", borderWidth: borderWidth2 = 0 } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { background: background2 = "#000000", borderColor: borderColor2 = "#000000", boxSizing, borderWidth: borderWidth2 = 0 } = detail;
+    let bw = 0;
+    if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+      bw = borderWidth2;
+    } else if (Array.isArray(borderWidth2) && typeof borderWidth2[0] === "number" && borderWidth2[0] > 0) {
+      bw = borderWidth2[0];
+    }
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
     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 }, () => {
@@ -1890,16 +1989,24 @@ var __privateMethod = (obj, member, method) => {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          var _a, _b;
-          const a = w2 / 2;
-          const b = h2 / 2;
+          let a = w2 / 2;
+          let b = h2 / 2;
           const centerX = x2 + a;
           const centerY = y2 + b;
-          if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== void 0 && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
-            ctx.globalAlpha = elem.detail.opacity;
-          } else {
-            ctx.globalAlpha = 1;
+          if (bw > 0) {
+            if (boxSizing === "border-box") {
+              a = a - bw;
+              b = b - bw;
+            } else if (boxSizing === "center-line") {
+              a = a - bw / 2;
+              b = b - bw / 2;
+            } else {
+              a = a - bw;
+              b = b - bw;
+            }
           }
+          const opacity = getOpacity(viewElem) * parentOpacity;
+          ctx.globalAlpha = opacity;
           if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
             const ba = borderWidth2 / 2 + a;
             const bb = borderWidth2 / 2 + b;
@@ -1920,13 +2027,13 @@ var __privateMethod = (obj, member, method) => {
           ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
           ctx.closePath();
           ctx.fill();
-          ctx.globalAlpha = 1;
+          ctx.globalAlpha = parentOpacity;
         }
       });
     });
   }
   function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     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 }, () => {
@@ -1939,6 +2046,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
             }
           });
@@ -1948,7 +2056,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     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 }, () => {
@@ -1961,13 +2069,13 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
               if (!content) {
                 opts.loader.load(elem, opts.elementAssets || {});
               }
               if (elem.type === "image" && content) {
-                const { opacity } = elem.detail;
-                ctx.globalAlpha = opacity ? opacity : 1;
+                ctx.globalAlpha = getOpacity(elem) * parentOpacity;
                 const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
                   viewScaleInfo,
                   viewSizeInfo
@@ -1984,7 +2092,7 @@ var __privateMethod = (obj, member, method) => {
                 ctx.fill();
                 ctx.clip();
                 ctx.drawImage(content, x3, y3, w3, h3);
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = parentOpacity;
                 ctx.restore();
               }
             }
@@ -1995,39 +2103,37 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "svg" && content) {
-        const { opacity } = elem.detail;
-        ctx.globalAlpha = opacity ? opacity : 1;
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         ctx.drawImage(content, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "html" && content) {
-        const { opacity } = elem.detail;
-        ctx.globalAlpha = opacity ? opacity : 1;
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         ctx.drawImage(content, x2, y2, w2, h2);
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = parentOpacity;
       }
     });
   }
   const detailConfig = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     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 }, () => {
@@ -2036,6 +2142,7 @@ var __privateMethod = (obj, member, method) => {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
           const fontSize2 = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
@@ -2130,7 +2237,7 @@ var __privateMethod = (obj, member, method) => {
   function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const scaleW = w2 / originW;
     const scaleH = h2 / originH;
@@ -2146,6 +2253,7 @@ var __privateMethod = (obj, member, method) => {
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
+        parentOpacity,
         renderContent: () => {
           drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
@@ -2223,10 +2331,11 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
     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 }, () => {
+      ctx.globalAlpha = getOpacity(elem) * parentOpacity;
       drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
@@ -2236,6 +2345,7 @@ var __privateMethod = (obj, member, method) => {
             calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
               const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
                 viewScaleInfo,
@@ -2276,26 +2386,27 @@ var __privateMethod = (obj, member, method) => {
                     }
                   }
                   try {
-                    drawElement(ctx, child, Object.assign({}, opts));
+                    drawElement(ctx, child, Object.assign(Object.assign({}, opts), { parentOpacity: parentOpacity * getOpacity(elem) }));
                   } catch (err) {
                     console.error(err);
                   }
                 }
               }
               if (elem.detail.overflow === "hidden") {
-                ctx.globalAlpha = 1;
                 ctx.restore();
               }
             }
           });
         }
       });
+      ctx.globalAlpha = parentOpacity;
     });
   }
   const defaultDetail = getDefaultElementDetailConfig();
   function drawElementList(ctx, data, opts) {
     var _a;
     const { elements = [] } = data;
+    const { parentOpacity } = opts;
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       const elem = Object.assign(Object.assign({}, element), {
@@ -2307,7 +2418,9 @@ var __privateMethod = (obj, member, method) => {
         }
       }
       try {
-        drawElement(ctx, elem, opts);
+        drawElement(ctx, elem, Object.assign(Object.assign({}, opts), {
+          parentOpacity
+        }));
       } catch (err) {
         console.error(err);
       }
@@ -2340,6 +2453,23 @@ var __privateMethod = (obj, member, method) => {
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
+  var __classPrivateFieldGet$2 = 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 __classPrivateFieldSet$2 = 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 _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
   const supportElementTypes = ["image", "svg", "html"];
   const getAssetIdFromElement = (element) => {
     var _a, _b, _c;
@@ -2362,10 +2492,11 @@ var __privateMethod = (obj, member, method) => {
   class Loader extends EventEmitter {
     constructor() {
       super();
-      this._loadFuncMap = {};
-      this._currentLoadItemMap = {};
-      this._storageLoadItemMap = {};
-      this._registerLoadFunc("image", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      _Loader_instances.add(this);
+      _Loader_loadFuncMap.set(this, {});
+      _Loader_currentLoadItemMap.set(this, {});
+      _Loader_storageLoadItemMap.set(this, {});
+      __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "image", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const src = ((_a = assets[elem.detail.src]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.src;
         const content = yield loadImage(src);
@@ -2375,12 +2506,12 @@ var __privateMethod = (obj, member, method) => {
           content
         };
       }));
-      this._registerLoadFunc("html", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "html", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _b;
         const html2 = ((_b = assets[elem.detail.html]) === null || _b === void 0 ? void 0 : _b.value) || elem.detail.html;
         const content = yield loadHTML(html2, {
-          width: elem.detail.width || elem.w,
-          height: elem.detail.height || elem.h
+          width: elem.detail.originW || elem.w,
+          height: elem.detail.originH || elem.h
         });
         return {
           uuid: elem.uuid,
@@ -2388,7 +2519,7 @@ var __privateMethod = (obj, member, method) => {
           content
         };
       }));
-      this._registerLoadFunc("svg", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+      __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, "svg", (elem, assets) => __awaiter(this, void 0, void 0, function* () {
         var _c;
         const svg2 = ((_c = assets[elem.detail.svg]) === null || _c === void 0 ? void 0 : _c.value) || elem.detail.svg;
         const content = yield loadSVG(svg2);
@@ -2399,102 +2530,102 @@ var __privateMethod = (obj, member, method) => {
         };
       }));
     }
-    _registerLoadFunc(type, func) {
-      this._loadFuncMap[type] = func;
-    }
-    _getLoadElementSource(element) {
-      var _a, _b, _c;
-      let source = null;
-      if (element.type === "image") {
-        source = ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) || null;
-      } else if (element.type === "svg") {
-        source = ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) || null;
-      } else if (element.type === "html") {
-        source = ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) || null;
-      }
-      return source;
-    }
-    _createLoadItem(element) {
-      return {
-        element,
-        status: "null",
-        content: null,
-        error: null,
-        startTime: -1,
-        endTime: -1,
-        source: this._getLoadElementSource(element)
-      };
-    }
-    _emitLoad(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
-          this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-        }
-      } else {
-        this._storageLoadItemMap[assetId] = item;
-        this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-      }
-    }
-    _emitError(item) {
-      const assetId = getAssetIdFromElement(item.element);
-      const storageItem = this._storageLoadItemMap[assetId];
-      if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[assetId] = item;
-          this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-        }
-      } else {
-        this._storageLoadItemMap[assetId] = item;
-        this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-      }
-    }
-    _loadResource(element, assets) {
-      const item = this._createLoadItem(element);
-      const assetId = getAssetIdFromElement(element);
-      this._currentLoadItemMap[assetId] = item;
-      const loadFunc = this._loadFuncMap[element.type];
-      if (typeof loadFunc === "function") {
-        item.startTime = Date.now();
-        loadFunc(element, assets).then((result) => {
-          item.content = result.content;
-          item.endTime = Date.now();
-          item.status = "load";
-          this._emitLoad(item);
-        }).catch((err) => {
-          console.warn(`Load element source "${item.source}" fail`, err, element);
-          item.endTime = Date.now();
-          item.status = "error";
-          item.error = err;
-          this._emitError(item);
-        });
-      }
-    }
-    _isExistingErrorStorage(element) {
-      var _a;
-      const assetId = getAssetIdFromElement(element);
-      const existItem = (_a = this._currentLoadItemMap) === null || _a === void 0 ? void 0 : _a[assetId];
-      if (existItem && existItem.status === "error" && existItem.source && existItem.source === this._getLoadElementSource(element)) {
-        return true;
-      }
-      return false;
-    }
     load(element, assets) {
-      if (this._isExistingErrorStorage(element)) {
+      if (__classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
         return;
       }
       if (supportElementTypes.includes(element.type)) {
-        this._loadResource(element, assets);
+        __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_loadResource).call(this, element, assets);
       }
     }
     getContent(element) {
       var _a, _b;
       const assetId = getAssetIdFromElement(element);
-      return ((_b = (_a = this._storageLoadItemMap) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
+      return ((_b = (_a = __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
+    }
+    getLoadItemMap() {
+      return __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f");
+    }
+    setLoadItemMap(itemMap) {
+      __classPrivateFieldSet$2(this, _Loader_storageLoadItemMap, itemMap, "f");
     }
   }
+  _Loader_loadFuncMap = /* @__PURE__ */ new WeakMap(), _Loader_currentLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_storageLoadItemMap = /* @__PURE__ */ new WeakMap(), _Loader_instances = /* @__PURE__ */ new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc2(type, func) {
+    __classPrivateFieldGet$2(this, _Loader_loadFuncMap, "f")[type] = func;
+  }, _Loader_getLoadElementSource = function _Loader_getLoadElementSource2(element) {
+    var _a, _b, _c;
+    let source = null;
+    if (element.type === "image") {
+      source = ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) || null;
+    } else if (element.type === "svg") {
+      source = ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) || null;
+    } else if (element.type === "html") {
+      source = ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) || null;
+    }
+    return source;
+  }, _Loader_createLoadItem = function _Loader_createLoadItem2(element) {
+    return {
+      element,
+      status: "null",
+      content: null,
+      error: null,
+      startTime: -1,
+      endTime: -1,
+      source: __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)
+    };
+  }, _Loader_emitLoad = function _Loader_emitLoad2(item) {
+    const assetId = getAssetIdFromElement(item.element);
+    const storageItem = __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId];
+    if (storageItem) {
+      if (storageItem.startTime < item.startTime) {
+        __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+        this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+      }
+    } else {
+      __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+      this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+    }
+  }, _Loader_emitError = function _Loader_emitError2(item) {
+    const assetId = getAssetIdFromElement(item.element);
+    const storageItem = __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId];
+    if (storageItem) {
+      if (storageItem.startTime < item.startTime) {
+        __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+        this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+      }
+    } else {
+      __classPrivateFieldGet$2(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+      this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+    }
+  }, _Loader_loadResource = function _Loader_loadResource2(element, assets) {
+    const item = __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, element);
+    const assetId = getAssetIdFromElement(element);
+    __classPrivateFieldGet$2(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
+    const loadFunc = __classPrivateFieldGet$2(this, _Loader_loadFuncMap, "f")[element.type];
+    if (typeof loadFunc === "function") {
+      item.startTime = Date.now();
+      loadFunc(element, assets).then((result) => {
+        item.content = result.content;
+        item.endTime = Date.now();
+        item.status = "load";
+        __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_emitLoad).call(this, item);
+      }).catch((err) => {
+        console.warn(`Load element source "${item.source}" fail`, err, element);
+        item.endTime = Date.now();
+        item.status = "error";
+        item.error = err;
+        __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_emitError).call(this, item);
+      });
+    }
+  }, _Loader_isExistingErrorStorage = function _Loader_isExistingErrorStorage2(element) {
+    var _a;
+    const assetId = getAssetIdFromElement(element);
+    const existItem = (_a = __classPrivateFieldGet$2(this, _Loader_currentLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
+    if (existItem && existItem.status === "error" && existItem.source && existItem.source === __classPrivateFieldGet$2(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)) {
+      return true;
+    }
+    return false;
+  };
   var __classPrivateFieldSet$1 = function(receiver, state, value, kind, f) {
     if (kind === "m")
       throw new TypeError("Private method is not writable");
@@ -2539,7 +2670,8 @@ var __privateMethod = (obj, member, method) => {
         loader,
         calculator,
         parentElementSize,
-        elementAssets: data.assets
+        elementAssets: data.assets,
+        parentOpacity: 1
       }, opts));
     }
     scale(num) {
@@ -2567,6 +2699,12 @@ var __privateMethod = (obj, member, method) => {
         });
       }
     }
+    setLoadItemMap(itemMap) {
+      __classPrivateFieldGet$1(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+      return __classPrivateFieldGet$1(this, _Renderer_loader, "f").getLoadItemMap();
+    }
   }
   _Renderer_opts = /* @__PURE__ */ new WeakMap(), _Renderer_loader = /* @__PURE__ */ new WeakMap(), _Renderer_instances = /* @__PURE__ */ new WeakSet(), _Renderer_init = function _Renderer_init2() {
     const loader = __classPrivateFieldGet$1(this, _Renderer_loader, "f");
@@ -2682,6 +2820,7 @@ var __privateMethod = (obj, member, method) => {
           return;
         }
         e.preventDefault();
+        e.stopPropagation();
         const deltaX = e.deltaX > 0 || e.deltaX < 0 ? e.deltaX : 0;
         const deltaY = e.deltaY > 0 || e.deltaY < 0 ? e.deltaY : 0;
         if (e.ctrlKey === true && this.has("wheelScale")) {
@@ -2956,7 +3095,7 @@ var __privateMethod = (obj, member, method) => {
       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 _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handleHover, _Board_handleDoubleClick, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
+  var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handleHover, _Board_handleDoubleClick, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
   const throttleTime = 10;
   class Board {
     constructor(opts) {
@@ -2966,6 +3105,7 @@ var __privateMethod = (obj, member, method) => {
       _Board_middlewares.set(this, []);
       _Board_activeMiddlewareObjs.set(this, []);
       _Board_watcher.set(this, void 0);
+      _Board_renderer.set(this, void 0);
       _Board_sharer.set(this, void 0);
       _Board_viewer.set(this, void 0);
       _Board_calculator.set(this, void 0);
@@ -2985,6 +3125,7 @@ var __privateMethod = (obj, member, method) => {
       __classPrivateFieldSet(this, _Board_opts, opts, "f");
       __classPrivateFieldSet(this, _Board_sharer, sharer, "f");
       __classPrivateFieldSet(this, _Board_watcher, watcher, "f");
+      __classPrivateFieldSet(this, _Board_renderer, renderer, "f");
       __classPrivateFieldSet(this, _Board_calculator, calculator, "f");
       __classPrivateFieldSet(this, _Board_viewer, new Viewer({
         boardContent: opts.boardContent,
@@ -3007,6 +3148,9 @@ var __privateMethod = (obj, member, method) => {
     getViewer() {
       return __classPrivateFieldGet(this, _Board_viewer, "f");
     }
+    getRenderer() {
+      return __classPrivateFieldGet(this, _Board_renderer, "f");
+    }
     setData(data) {
       const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
       __classPrivateFieldGet(this, _Board_sharer, "f").setActiveStorage("data", data);
@@ -3080,6 +3224,7 @@ var __privateMethod = (obj, member, method) => {
       boardContent.viewContext.$resize({ width, height, devicePixelRatio });
       boardContent.helperContext.$resize({ width, height, devicePixelRatio });
       boardContent.boardContext.$resize({ width, height, devicePixelRatio });
+      boardContent.underContext.$resize({ width, height, devicePixelRatio });
       __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
       __classPrivateFieldGet(this, _Board_watcher, "f").trigger("resize", viewSize);
       __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSize);
@@ -3097,7 +3242,7 @@ var __privateMethod = (obj, member, method) => {
       return __classPrivateFieldGet(this, _Board_eventHub, "f");
     }
   }
-  _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
+  _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_renderer = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointStart", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointEnd", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", throttle((e) => {
@@ -4591,6 +4736,7 @@ var __privateMethod = (obj, member, method) => {
         viewer.drawFrame();
       },
       pointMove: (e) => {
+        var _a;
         const data = sharer.getActiveStorage("data");
         const elems = getActiveElements();
         const scale = sharer.getActiveStorage("scale") || 1;
@@ -4645,8 +4791,15 @@ var __privateMethod = (obj, member, method) => {
             const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
             elems[0].x = resizedElemSize.x;
             elems[0].y = resizedElemSize.y;
-            elems[0].w = resizedElemSize.w;
-            elems[0].h = resizedElemSize.h;
+            if (elems[0].type === "group" && ((_a = elems[0].operations) == null ? void 0 : _a.deepResize) === true) {
+              deepResizeGroupElement(elems[0], {
+                w: resizedElemSize.w,
+                h: resizedElemSize.h
+              });
+            } else {
+              elems[0].w = resizedElemSize.w;
+              elems[0].h = resizedElemSize.h;
+            }
             updateSelectedElementList([elems[0]]);
             viewer.drawFrame();
           }
@@ -4718,7 +4871,8 @@ var __privateMethod = (obj, member, method) => {
             sharer.setActiveStorage("contextWidth", viewInfo.contextSize.contextWidth);
           }
           if (data && ["drag", "drag-list", "drag-list-end", "resize"].includes(actionType)) {
-            eventHub.trigger("change", { data });
+            let type = "drag-element";
+            eventHub.trigger("change", { data, type });
           }
           viewer.drawFrame();
         };
@@ -5468,6 +5622,9 @@ var __privateMethod = (obj, member, method) => {
     setViewScale(opts) {
       __privateGet(this, _board).updateViewScaleInfo(opts);
     }
+    getLoadItemMap() {
+      return __privateGet(this, _board).getRenderer().getLoadItemMap();
+    }
   }
   _board = new WeakMap();
   _container = new WeakMap();