@idraw/core 0.4.0-alpha.2 → 0.4.0-alpha.4

package/dist/index.global.js

@@ -15,12 +15,58 @@ var iDrawCore = function(exports) {
   function isColorStr(color2) {
     return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
+  function mergeHexColorAlpha(hex, alpha) {
+    if (alpha === 1) {
+      return hex;
+    }
+    let hexAlpha = 1;
+    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    let result = hex;
+    if (regHex1.test(hex)) {
+      hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
+    } else if (regHex2.test(hex)) {
+      hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
+      result = hex.substring(0, 7);
+    }
+    hexAlpha = hexAlpha * alpha;
+    if (regHex1.test(result) && hexAlpha > 0 && hexAlpha < 1) {
+      const aHexNum = Math.max(0, Math.min(255, Math.ceil(hexAlpha * 256)));
+      result = `${result.toUpperCase()}${aHexNum.toString(16).toUpperCase()}`;
+    }
+    return result;
+  }
   function createUUID() {
     function _createStr() {
       return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
     }
     return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
   }
+  function limitHexStr(str) {
+    let count = 0;
+    for (let i = 0; i < str.length; i++) {
+      count += str.charCodeAt(i) * str.charCodeAt(i) * i * i;
+    }
+    return count.toString(16).substring(0, 4);
+  }
+  function createAssetId(assetStr) {
+    const len = assetStr.length;
+    const mid = Math.floor(len / 2);
+    const start4 = assetStr.substring(0, 4).padEnd(4, "0");
+    const end4 = assetStr.substring(0, 4).padEnd(4, "0");
+    const str1 = limitHexStr(len.toString(16).padEnd(4, start4));
+    const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padEnd(4, start4)).padEnd(4, "f");
+    const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padEnd(4, start4)).padEnd(4, "f");
+    const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padEnd(4, start4)).padEnd(4, "f");
+    const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padEnd(4, end4)).padEnd(4, "f");
+    const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padEnd(4, end4)).padEnd(4, "f");
+    const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padEnd(4, end4)).padEnd(4, "f");
+    const str8 = limitHexStr(end4.padEnd(4, start4).padEnd(4, end4));
+    return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
+  }
+  function isAssetId(id) {
+    return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
+  }
   function deepClone(target) {
     function _clone(t) {
       const type = is$1(t);
@@ -132,7 +178,7 @@ var iDrawCore = function(exports) {
       };
     });
   }
-  var __awaiter$1 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+  var __awaiter$1 = function(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
         resolve(value);
@@ -244,7 +290,7 @@ var iDrawCore = function(exports) {
   function text(value) {
     return typeof value === "string";
   }
-  function fontSize(value) {
+  function fontSize$1(value) {
     return number(value) && value > 0;
   }
   function lineHeight(value) {
@@ -256,10 +302,10 @@ var iDrawCore = function(exports) {
   function textAlign(value) {
     return ["center", "left", "right"].includes(value);
   }
-  function fontFamily(value) {
+  function fontFamily$1(value) {
     return typeof value === "string" && value.length > 0;
   }
-  function fontWeight(value) {
+  function fontWeight$1(value) {
     return ["bold"].includes(value);
   }
   function numberStr(value) {
@@ -282,11 +328,11 @@ var iDrawCore = function(exports) {
     svg,
     html,
     text,
-    fontSize,
+    fontSize: fontSize$1,
     lineHeight,
     textAlign,
-    fontFamily,
-    fontWeight,
+    fontFamily: fontFamily$1,
+    fontWeight: fontWeight$1,
     strokeWidth
   };
   class Context2D {
@@ -430,7 +476,8 @@ var iDrawCore = function(exports) {
       return this._ctx.getLineDash();
     }
     setLineDash(nums) {
-      return this._ctx.setLineDash(nums.map((n) => this.$doPixelRatio(n)));
+      const dash = nums.map((n) => this.$doPixelRatio(n));
+      return this._ctx.setLineDash(dash);
     }
     stroke(path) {
       return path ? this._ctx.stroke(path) : this._ctx.stroke();
@@ -532,8 +579,10 @@ var iDrawCore = function(exports) {
     };
     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
@@ -644,9 +693,8 @@ var iDrawCore = function(exports) {
   function parseAngleToRadian(angle2) {
     return angle2 / 180 * Math.PI;
   }
-  function rotateElement(ctx, elemSize, callback) {
-    const center = calcElementCenter(elemSize);
-    const radian = parseAngleToRadian(elemSize.angle || 0);
+  function rotateByCenter(ctx, angle2, center, callback) {
+    const radian = parseAngleToRadian(angle2 || 0);
     if (center && (radian > 0 || radian < 0)) {
       ctx.translate(center.x, center.y);
       ctx.rotate(radian);
@@ -659,6 +707,12 @@ var iDrawCore = function(exports) {
       ctx.translate(-center.x, -center.y);
     }
   }
+  function rotateElement(ctx, elemSize, callback) {
+    const center = calcElementCenter(elemSize);
+    rotateByCenter(ctx, elemSize.angle || 0, center, () => {
+      callback(ctx);
+    });
+  }
   function calcElementCenter(elem) {
     const p = {
       x: elem.x + elem.w / 2,
@@ -1221,54 +1275,58 @@ var iDrawCore = function(exports) {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
-    const topSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
-    const rightSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
-    const leftSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
     const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: totalAngle });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [topLeftVertexes[1], topRightVertexes[0], topRightVertexes[3], topLeftVertexes[2]];
+    const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
+    const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
+    const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
     const sizeController = {
       elementWrapper: vertexes,
       left: {
         type: "left",
-        vertexes: calcElementVertexes(leftSize),
+        vertexes: leftVertexes,
         center: leftCenter
       },
       right: {
         type: "right",
-        vertexes: calcElementVertexes(rightSize),
+        vertexes: rightVertexes,
         center: rightCenter
       },
       top: {
         type: "top",
-        vertexes: calcElementVertexes(topSize),
+        vertexes: topVertexes,
         center: topCenter
       },
       bottom: {
         type: "bottom",
-        vertexes: calcElementVertexes(bottomSize),
+        vertexes: bottomVertexes,
         center: bottomCenter
       },
       topLeft: {
         type: "top-left",
-        vertexes: calcElementVertexes(topLeftSize),
+        vertexes: topLeftVertexes,
         center: topLeftCenter
       },
       topRight: {
         type: "top-right",
-        vertexes: calcElementVertexes(topRightSize),
+        vertexes: topRightVertexes,
         center: topRightCenter
       },
       bottomLeft: {
         type: "bottom-left",
-        vertexes: calcElementVertexes(bottomLeftSize),
+        vertexes: bottomLeftVertexes,
         center: bottomLeftCenter
       },
       bottomRight: {
         type: "bottom-right",
-        vertexes: calcElementVertexes(bottomRightSize),
+        vertexes: bottomRightVertexes,
         center: bottomRightCenter
       }
     };
@@ -1281,40 +1339,124 @@ var iDrawCore = function(exports) {
     });
     return path;
   }
-  function drawCircle(ctx, elem, opts) {
-    const { detail, angle: angle2 } = elem;
-    const { background = "#000000", borderColor = "#000000", borderWidth: borderWidth2 = 0 } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x: x2, y: y2, w: w2, h: h2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
-    rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      const a = w2 / 2;
-      const b = h2 / 2;
-      const centerX = x2 + a;
-      const centerY = y2 + b;
-      if (borderWidth2 && borderWidth2 > 0) {
-        const ba = borderWidth2 / 2 + a;
-        const bb = borderWidth2 / 2 + b;
-        ctx.beginPath();
-        ctx.strokeStyle = borderColor;
-        ctx.lineWidth = borderWidth2;
-        ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
-        ctx.closePath();
-        ctx.stroke();
-      }
-      ctx.beginPath();
-      ctx.fillStyle = background;
-      ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-      ctx.closePath();
-      ctx.fill();
-    });
+  function formatNumber(num, opts) {
+    let decimalPlaces = 2;
+    if (typeof (opts === null || opts === void 0 ? void 0 : opts.decimalPlaces) !== "undefined" && (opts === null || opts === void 0 ? void 0 : opts.decimalPlaces) >= 0) {
+      decimalPlaces = opts.decimalPlaces;
+    }
+    return parseFloat(num.toFixed(decimalPlaces));
   }
-  function drawBox(ctx, viewElem, opts) {
-    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;
+  function getDefaultElementDetailConfig() {
+    const config = {
+      boxSizing: "border-box",
+      borderWidth: 0,
+      borderColor: "#000000",
+      shadowColor: "#000000",
+      borderRadius: 0,
+      borderDash: [],
+      shadowOffsetX: 0,
+      shadowOffsetY: 0,
+      shadowBlur: 0,
+      opacity: 1,
+      color: "#000000",
+      textAlign: "left",
+      verticalAlign: "top",
+      fontSize: 16,
+      lineHeight: 20,
+      fontFamily: "sans-serif",
+      fontWeight: 400
+    };
+    return config;
+  }
+  const defaultElemConfig$1 = getDefaultElementDetailConfig();
+  function calcViewBoxSize(viewElem, opts) {
+    const { viewScaleInfo } = opts;
+    const { scale } = viewScaleInfo;
+    let { borderRadius: borderRadius2, boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
+    if (typeof borderWidth2 !== "number") {
+      borderRadius2 = 0;
+    }
+    let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
+    let radiusList = [0, 0, 0, 0];
+    if (typeof borderRadius2 === "number") {
+      const br = borderRadius2 * scale;
+      radiusList = [br, br, br, br];
+    } else if (Array.isArray(borderRadius2) && (borderRadius2 === null || borderRadius2 === void 0 ? void 0 : borderRadius2.length) === 4) {
+      radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
+    }
+    let bw = 0;
+    if (typeof borderWidth2 === "number") {
+      bw = (borderWidth2 || 1) * scale;
+    }
+    if (boxSizing === "border-box") {
+      x2 = viewElem.x + bw / 2;
+      y2 = viewElem.y + bw / 2;
+      w2 = viewElem.w - bw;
+      h2 = viewElem.h - bw;
+    } else if (boxSizing === "content-box") {
+      x2 = viewElem.x - bw / 2;
+      y2 = viewElem.y - bw / 2;
+      w2 = viewElem.w + bw;
+      h2 = viewElem.h + bw;
     } else {
-      ctx.globalAlpha = 1;
+      x2 = viewElem.x;
+      y2 = viewElem.y;
+      w2 = viewElem.w;
+      h2 = viewElem.h;
     }
+    return {
+      x: x2,
+      y: y2,
+      w: w2,
+      h: h2,
+      radiusList
+    };
+  }
+  function createColorStyle(ctx, color2, opts) {
+    if (typeof color2 === "string") {
+      return color2;
+    }
+    const { viewElementSize, viewScaleInfo, opacity = 1 } = opts;
+    const { x: x2, y: y2 } = viewElementSize;
+    const { scale } = viewScaleInfo;
+    if ((color2 === null || color2 === void 0 ? void 0 : color2.type) === "linear-gradient") {
+      const { start, end, stops } = color2;
+      const viewStart = {
+        x: x2 + start.x * scale,
+        y: y2 + start.y * scale
+      };
+      const viewEnd = {
+        x: x2 + end.x * scale,
+        y: y2 + end.y * scale
+      };
+      const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
+      stops.forEach((stop) => {
+        linearGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+      });
+      return linearGradient;
+    }
+    if ((color2 === null || color2 === void 0 ? void 0 : color2.type) === "radial-gradient") {
+      const { inner, outer, stops } = color2;
+      const viewInner = {
+        x: x2 + inner.x * scale,
+        y: y2 + inner.y * scale,
+        radius: inner.radius * scale
+      };
+      const viewOuter = {
+        x: x2 + outer.x * scale,
+        y: y2 + outer.y * scale,
+        radius: outer.radius * scale
+      };
+      const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
+      stops.forEach((stop) => {
+        radialGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+      });
+      return radialGradient;
+    }
+    return "#000000";
+  }
+  const defaultElemConfig = getDefaultElementDetailConfig();
+  function drawBox(ctx, viewElem, opts) {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
     drawClipPath(ctx, viewElem, {
       originElem,
@@ -1322,12 +1464,18 @@ var iDrawCore = function(exports) {
       viewScaleInfo,
       viewSizeInfo,
       renderContent: () => {
-        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        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;
+        }
         drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        ctx.globalAlpha = 1;
       }
     });
-    ctx.globalAlpha = 1;
   }
   function drawClipPath(ctx, viewElem, opts) {
     const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
@@ -1360,21 +1508,20 @@ var iDrawCore = function(exports) {
   }
   function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
-    const { pattern, viewScaleInfo } = opts;
+    const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     let transform = [];
+    viewElem.detail;
     if (viewElem.detail.background || pattern) {
-      const { x: x2, y: y2, w: w2, h: h2 } = viewElem;
-      let r = (viewElem.detail.borderRadius || 0) * viewScaleInfo.scale;
-      r = Math.min(r, w2 / 2, h2 / 2);
-      if (w2 < r * 2 || h2 < r * 2) {
-        r = 0;
-      }
+      const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
+        viewScaleInfo,
+        viewSizeInfo
+      });
       ctx.beginPath();
-      ctx.moveTo(x2 + r, y2);
-      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
-      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
-      ctx.arcTo(x2, y2 + h2, x2, y2, r);
-      ctx.arcTo(x2, y2, x2 + w2, y2, r);
+      ctx.moveTo(x2 + radiusList[0], y2);
+      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, radiusList[1]);
+      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, radiusList[2]);
+      ctx.arcTo(x2, y2 + h2, x2, y2, radiusList[3]);
+      ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       if (typeof pattern === "string") {
         ctx.fillStyle = pattern;
@@ -1382,39 +1529,20 @@ var iDrawCore = function(exports) {
         ctx.fillStyle = pattern;
       } else if (typeof viewElem.detail.background === "string") {
         ctx.fillStyle = viewElem.detail.background;
-      } else if (((_a = viewElem.detail.background) === null || _a === void 0 ? void 0 : _a.type) === "linearGradient") {
-        const { start, end, stops } = viewElem.detail.background;
-        const viewStart = {
-          x: start.x + x2,
-          y: start.y + y2
-        };
-        const viewEnd = {
-          x: end.x + x2,
-          y: end.y + y2
-        };
-        const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
-        stops.forEach((stop) => {
-          linearGradient.addColorStop(stop.offset, stop.color);
+      } else if (((_a = viewElem.detail.background) === null || _a === void 0 ? void 0 : _a.type) === "linear-gradient") {
+        const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
+          viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
+          viewScaleInfo,
+          opacity: ctx.globalAlpha
         });
-        ctx.fillStyle = linearGradient;
-      } else if (((_b = viewElem.detail.background) === null || _b === void 0 ? void 0 : _b.type) === "radialGradient") {
-        const { inner, outer, stops } = viewElem.detail.background;
-        transform = viewElem.detail.background.transform || [];
-        const viewInner = {
-          x: inner.x,
-          y: inner.y,
-          radius: inner.radius * viewScaleInfo.scale
-        };
-        const viewOuter = {
-          x: outer.x,
-          y: outer.y,
-          radius: outer.radius * viewScaleInfo.scale
-        };
-        const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
-        stops.forEach((stop) => {
-          radialGradient.addColorStop(stop.offset, stop.color);
+        ctx.fillStyle = colorStyle;
+      } else if (((_b = viewElem.detail.background) === null || _b === void 0 ? void 0 : _b.type) === "radial-gradient") {
+        const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
+          viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
+          viewScaleInfo,
+          opacity: ctx.globalAlpha
         });
-        ctx.fillStyle = radialGradient;
+        ctx.fillStyle = colorStyle;
         if (transform && transform.length > 0) {
           for (let i = 0; i < (transform === null || transform === void 0 ? void 0 : transform.length); i++) {
             const action = transform[i];
@@ -1435,95 +1563,139 @@ var iDrawCore = function(exports) {
     }
   }
   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;
-    let borderColor = "#000000";
+    const { scale } = viewScaleInfo;
+    let borderColor2 = defaultElemConfig.borderColor;
     if (isColorStr(viewElem.detail.borderColor) === true) {
-      borderColor = viewElem.detail.borderColor;
+      borderColor2 = viewElem.detail.borderColor;
     }
-    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash } = viewElem.detail;
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
     let bw = 0;
     if (typeof borderWidth2 === "number") {
       bw = borderWidth2 || 1;
     }
-    bw = bw * viewScaleInfo.scale;
-    let r = borderRadius2 || 0;
-    ctx.strokeStyle = borderColor;
-    ctx.setLineDash(borderDash || []);
+    bw = bw * scale;
+    let radiusList = [0, 0, 0, 0];
+    if (typeof borderRadius2 === "number") {
+      const br = borderRadius2 * scale;
+      radiusList = [br, br, br, br];
+    } else if (Array.isArray(borderRadius2) && (borderRadius2 === null || borderRadius2 === void 0 ? void 0 : borderRadius2.length) === 4) {
+      radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
+    }
+    ctx.strokeStyle = borderColor2;
+    let viewBorderDash = [];
+    if (Array.isArray(borderDash) && borderDash.length > 0) {
+      viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    }
     let borderTop = 0;
     let borderRight = 0;
     let borderBottom = 0;
     let borderLeft = 0;
     if (Array.isArray(borderWidth2)) {
-      borderTop = borderWidth2[0] || 0;
-      borderRight = borderWidth2[1] || 0;
-      borderBottom = borderWidth2[2] || 0;
-      borderLeft = borderWidth2[3] || 0;
+      borderTop = (borderWidth2[0] || 0) * scale;
+      borderRight = (borderWidth2[1] || 0) * scale;
+      borderBottom = (borderWidth2[2] || 0) * scale;
+      borderLeft = (borderWidth2[3] || 0) * scale;
     }
     if (borderLeft || borderRight || borderTop || borderBottom) {
-      const { x: x2, y: y2, w: w2, h: h2 } = viewElem;
-      if (borderLeft) {
+      ctx.lineCap = "butt";
+      let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
+      if (boxSizing === "border-box") {
+        x2 = x2 + borderLeft / 2;
+        y2 = y2 + borderTop / 2;
+        w2 = w2 - borderLeft / 2 - borderRight / 2;
+        h2 = h2 - borderTop / 2 - borderBottom / 2;
+      } else if (boxSizing === "content-box") {
+        x2 = x2 - borderLeft / 2;
+        y2 = y2 - borderTop / 2;
+        w2 = w2 + borderLeft / 2 + borderRight / 2;
+        h2 = h2 + borderTop / 2 + borderBottom / 2;
+      } else {
+        x2 = viewElem.x;
+        y2 = viewElem.y;
+        w2 = viewElem.w;
+        h2 = viewElem.h;
+      }
+      if (borderTop) {
         ctx.beginPath();
-        ctx.lineWidth = borderLeft * viewScaleInfo.scale;
-        ctx.moveTo(x2, y2);
-        ctx.lineTo(x2, y2 + h2);
+        ctx.lineWidth = borderTop;
+        ctx.moveTo(x2 - borderLeft / 2, y2);
+        ctx.lineTo(x2 + w2 + borderRight / 2, y2);
         ctx.closePath();
         ctx.stroke();
       }
       if (borderRight) {
         ctx.beginPath();
-        ctx.lineWidth = borderRight * viewScaleInfo.scale;
-        ctx.moveTo(x2 + w2, y2);
-        ctx.lineTo(x2 + w2, y2 + h2);
+        ctx.lineWidth = borderRight;
+        ctx.moveTo(x2 + w2, y2 - borderTop / 2);
+        ctx.lineTo(x2 + w2, y2 + h2 + borderBottom / 2);
         ctx.closePath();
         ctx.stroke();
       }
-      if (borderTop) {
+      if (borderBottom) {
         ctx.beginPath();
-        ctx.lineWidth = borderTop * viewScaleInfo.scale;
-        ctx.moveTo(x2, y2);
-        ctx.lineTo(x2 + w2, y2);
+        ctx.lineWidth = borderBottom;
+        ctx.moveTo(x2 - borderLeft / 2, y2 + h2);
+        ctx.lineTo(x2 + w2 + borderRight / 2, y2 + h2);
         ctx.closePath();
         ctx.stroke();
       }
-      if (borderBottom) {
+      if (borderLeft) {
         ctx.beginPath();
-        ctx.lineWidth = borderBottom * viewScaleInfo.scale;
-        ctx.moveTo(x2, y2 + h2);
-        ctx.lineTo(x2 + w2, y2 + h2);
+        ctx.lineWidth = borderLeft;
+        ctx.moveTo(x2, y2 - borderTop / 2);
+        ctx.lineTo(x2, y2 + h2 + borderBottom / 2);
         ctx.closePath();
         ctx.stroke();
       }
     } else {
       let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
-      const { boxSizing } = viewElem.detail;
       if (boxSizing === "border-box") {
+        x2 = viewElem.x + bw / 2;
+        y2 = viewElem.y + bw / 2;
+        w2 = viewElem.w - bw;
+        h2 = viewElem.h - bw;
+      } else if (boxSizing === "content-box") {
+        x2 = viewElem.x - bw / 2;
+        y2 = viewElem.y - bw / 2;
+        w2 = viewElem.w + bw;
+        h2 = viewElem.h + bw;
+      } else {
         x2 = viewElem.x;
         y2 = viewElem.y;
         w2 = viewElem.w;
         h2 = viewElem.h;
-      } else {
-        x2 = viewElem.x - bw;
-        y2 = viewElem.y - bw;
-        w2 = viewElem.w + bw * 2;
-        h2 = viewElem.h + bw * 2;
       }
-      r = Math.min(r, w2 / 2, h2 / 2);
-      if (r < w2 / 2 && r < h2 / 2) {
-        r = r + bw / 2;
+      if (viewBorderDash.length > 0) {
+        ctx.lineCap = "butt";
+      } else {
+        ctx.lineCap = "square";
       }
-      ctx.beginPath();
+      ctx.setLineDash(viewBorderDash);
       ctx.lineWidth = bw;
-      ctx.moveTo(x2 + r, y2);
-      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
-      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
-      ctx.arcTo(x2, y2 + h2, x2, y2, r);
-      ctx.arcTo(x2, y2, x2 + w2, y2, r);
+      ctx.beginPath();
+      ctx.moveTo(x2 + radiusList[0], y2);
+      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, radiusList[1]);
+      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, radiusList[2]);
+      ctx.arcTo(x2, y2 + h2, x2, y2, radiusList[3]);
+      ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
       ctx.closePath();
       ctx.stroke();
+      ctx.globalAlpha = 1;
     }
+    ctx.setLineDash([]);
   }
   function drawBoxShadow(ctx, viewElem, opts) {
     const { detail } = viewElem;
@@ -1531,7 +1703,7 @@ var iDrawCore = function(exports) {
     const { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
     if (is.number(shadowBlur)) {
       ctx.save();
-      ctx.shadowColor = shadowColor || "#000000";
+      ctx.shadowColor = shadowColor || defaultElemConfig.shadowColor;
       ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
       ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
       ctx.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
@@ -1541,6 +1713,52 @@ var iDrawCore = function(exports) {
       renderContent();
     }
   }
+  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 { x: x2, y: y2, w: w2, h: h2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
+    const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      drawBoxShadow(ctx, viewElem, {
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          var _a, _b;
+          const a = w2 / 2;
+          const 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 (typeof borderWidth2 === "number" && borderWidth2 > 0) {
+            const ba = borderWidth2 / 2 + a;
+            const bb = borderWidth2 / 2 + b;
+            ctx.beginPath();
+            ctx.strokeStyle = borderColor2;
+            ctx.lineWidth = borderWidth2;
+            ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.stroke();
+          }
+          ctx.beginPath();
+          const fillStyle = createColorStyle(ctx, background2, {
+            viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
+            viewScaleInfo,
+            opacity: ctx.globalAlpha
+          });
+          ctx.fillStyle = fillStyle;
+          ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
+          ctx.closePath();
+          ctx.fill();
+          ctx.globalAlpha = 1;
+        }
+      });
+    });
+  }
   function drawRect(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     let { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
@@ -1563,20 +1781,53 @@ var iDrawCore = function(exports) {
     });
   }
   function drawImage(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem.uuid);
+    const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      if (!content) {
-        opts.loader.load(elem, opts.elementAssets || {});
-      }
-      if (elem.type === "image" && content) {
-        ctx.drawImage(content, x2, y2, w2, h2);
-      }
+      drawBoxShadow(ctx, viewElem, {
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+              if (!content) {
+                opts.loader.load(elem, opts.elementAssets || {});
+              }
+              if (elem.type === "image" && content) {
+                const { opacity } = elem.detail;
+                ctx.globalAlpha = opacity ? opacity : 1;
+                const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
+                  viewScaleInfo,
+                  viewSizeInfo
+                });
+                ctx.save();
+                ctx.beginPath();
+                ctx.moveTo(x3 + radiusList[0], y3);
+                ctx.arcTo(x3 + w3, y3, x3 + w3, y3 + h3, radiusList[1]);
+                ctx.arcTo(x3 + w3, y3 + h3, x3, y3 + h3, radiusList[2]);
+                ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
+                ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
+                ctx.closePath();
+                ctx.fill();
+                ctx.clip();
+                ctx.drawImage(content, x3, y3, w3, h3);
+                ctx.globalAlpha = 1;
+                ctx.restore();
+              }
+            }
+          });
+        }
+      });
     });
   }
   function drawSVG(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem.uuid);
+    const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
@@ -1584,23 +1835,30 @@ var iDrawCore = function(exports) {
         opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "svg" && content) {
+        const { opacity } = elem.detail;
+        ctx.globalAlpha = opacity ? opacity : 1;
         ctx.drawImage(content, x2, y2, w2, h2);
+        ctx.globalAlpha = 1;
       }
     });
   }
   function drawHTML(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem.uuid);
+    const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
-        opts.loader.load(elem);
+        opts.loader.load(elem, opts.elementAssets || {});
       }
       if (elem.type === "html" && content) {
+        const { opacity } = elem.detail;
+        ctx.globalAlpha = opacity ? opacity : 1;
         ctx.drawImage(content, x2, y2, w2, h2);
+        ctx.globalAlpha = 1;
       }
     });
   }
+  const detailConfig = getDefaultElementDetailConfig();
   function drawText(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
@@ -1612,14 +1870,10 @@ var iDrawCore = function(exports) {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          const detail = Object.assign({
-            fontSize: 12,
-            fontFamily: "sans-serif",
-            textAlign: "center"
-          }, elem.detail);
-          const fontSize2 = detail.fontSize * viewScaleInfo.scale;
+          const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+          const fontSize2 = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
           const lineHeight2 = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize2;
-          ctx.fillStyle = elem.detail.color;
+          ctx.fillStyle = elem.detail.color || detailConfig.color;
           ctx.textBaseline = "top";
           ctx.$setFont({
             fontWeight: detail.fontWeight,
@@ -1852,10 +2106,14 @@ var iDrawCore = function(exports) {
       });
     });
   }
+  const defaultDetail = getDefaultElementDetailConfig();
   function drawElementList(ctx, data, opts) {
     const { elements = [] } = data;
     for (let i = 0; i < elements.length; i++) {
-      const elem = elements[i];
+      const element = elements[i];
+      const elem = Object.assign(Object.assign({}, element), {
+        detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
+      });
       if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
         continue;
       }
@@ -1866,7 +2124,7 @@ var iDrawCore = function(exports) {
       }
     }
   }
-  var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+  var __awaiter = function(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
         resolve(value);
@@ -1894,6 +2152,24 @@ var iDrawCore = function(exports) {
     });
   };
   const supportElementTypes = ["image", "svg", "html"];
+  const getAssetIdFromElement = (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;
+    }
+    if (typeof source === "string" && source) {
+      if (isAssetId(source)) {
+        return source;
+      }
+      return createAssetId(source);
+    }
+    return createAssetId(`${createUUID()}-${element.uuid}-${createUUID()}-${createUUID()}`);
+  };
   class Loader extends EventEmitter {
     constructor() {
       super();
@@ -1961,34 +2237,35 @@ var iDrawCore = function(exports) {
       };
     }
     _emitLoad(item) {
-      const uuid = item.element.uuid;
-      const storageItem = this._storageLoadItemMap[uuid];
+      const assetId = getAssetIdFromElement(item.element);
+      const storageItem = this._storageLoadItemMap[assetId];
       if (storageItem) {
         if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[uuid] = item;
+          this._storageLoadItemMap[assetId] = item;
           this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
       } else {
-        this._storageLoadItemMap[uuid] = item;
+        this._storageLoadItemMap[assetId] = item;
         this.trigger("load", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
       }
     }
     _emitError(item) {
-      const uuid = item.element.uuid;
-      const storageItem = this._storageLoadItemMap[uuid];
+      const assetId = getAssetIdFromElement(item.element);
+      const storageItem = this._storageLoadItemMap[assetId];
       if (storageItem) {
         if (storageItem.startTime < item.startTime) {
-          this._storageLoadItemMap[uuid] = item;
+          this._storageLoadItemMap[assetId] = item;
           this.trigger("error", Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
       } else {
-        this._storageLoadItemMap[uuid] = item;
+        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);
-      this._currentLoadItemMap[element.uuid] = item;
+      const assetId = getAssetIdFromElement(element);
+      this._currentLoadItemMap[assetId] = item;
       const loadFunc = this._loadFuncMap[element.type];
       if (typeof loadFunc === "function") {
         item.startTime = Date.now();
@@ -2008,7 +2285,8 @@ var iDrawCore = function(exports) {
     }
     _isExistingErrorStorage(element) {
       var _a;
-      const existItem = (_a = this._currentLoadItemMap) === null || _a === void 0 ? void 0 : _a[element === null || element === void 0 ? void 0 : element.uuid];
+      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;
       }
@@ -2019,13 +2297,13 @@ var iDrawCore = function(exports) {
         return;
       }
       if (supportElementTypes.includes(element.type)) {
-        const elem = deepClone(element);
-        this._loadResource(elem, assets);
+        this._loadResource(element, assets);
       }
     }
-    getContent(uuid) {
+    getContent(element) {
       var _a, _b;
-      return ((_b = (_a = this._storageLoadItemMap) === null || _a === void 0 ? void 0 : _a[uuid]) === null || _b === void 0 ? void 0 : _b.content) || null;
+      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;
     }
   }
   class Renderer extends EventEmitter {
@@ -2357,7 +2635,7 @@ var iDrawCore = function(exports) {
       const { renderer, viewContent, beforeDrawFrame, afterDrawFrame } = this._opts;
       if (snapshot) {
         const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
-        const { viewContext, helperContext, boardContext } = viewContent;
+        const { underContext, viewContext, helperContext, boardContext } = viewContent;
         if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
           renderer.drawData(snapshot.activeStore.data, {
             viewScaleInfo: {
@@ -2378,8 +2656,10 @@ var iDrawCore = function(exports) {
         }
         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);
         afterDrawFrame({ snapshot });
@@ -2435,11 +2715,13 @@ var iDrawCore = function(exports) {
       const originViewSize = sharer.getActiveViewSizeInfo();
       const newViewSize = Object.assign(Object.assign({}, originViewSize), viewSize);
       const { width, height, devicePixelRatio } = newViewSize;
-      const { boardContext, helperContext, viewContext } = this._opts.viewContent;
+      const { underContext, boardContext, helperContext, viewContext } = this._opts.viewContent;
       boardContext.canvas.width = width * devicePixelRatio;
       boardContext.canvas.height = height * devicePixelRatio;
       boardContext.canvas.style.width = `${width}px`;
       boardContext.canvas.style.height = `${height}px`;
+      underContext.canvas.width = width * devicePixelRatio;
+      underContext.canvas.height = height * devicePixelRatio;
       helperContext.canvas.width = width * devicePixelRatio;
       helperContext.canvas.height = height * devicePixelRatio;
       viewContext.canvas.width = width * devicePixelRatio;
@@ -2668,6 +2950,9 @@ var iDrawCore = function(exports) {
     getSharer() {
       return this._sharer;
     }
+    getViewer() {
+      return this._viewer;
+    }
     setData(data) {
       const sharer = this._sharer;
       this._sharer.setActiveStorage("data", data);
@@ -2717,7 +3002,8 @@ var iDrawCore = function(exports) {
     }
     clear() {
       const { viewContent } = this._opts;
-      const { helperContext, viewContext, boardContext } = viewContent;
+      const { underContext, helperContext, viewContext, boardContext } = viewContent;
+      underContext.clearRect(0, 0, underContext.canvas.width, underContext.canvas.height);
       helperContext.clearRect(0, 0, helperContext.canvas.width, helperContext.canvas.height);
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       boardContext.clearRect(0, 0, boardContext.canvas.width, boardContext.canvas.height);
@@ -2852,11 +3138,11 @@ var iDrawCore = function(exports) {
   const resizeControllerBorderWidth = 2;
   const wrapperColor = "#1973ba";
   function drawVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth: borderWidth2, background, lineDash } = opts;
+    const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
     ctx.lineWidth = borderWidth2;
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = background;
+    ctx.strokeStyle = borderColor2;
+    ctx.fillStyle = background2;
     ctx.setLineDash(lineDash);
     ctx.beginPath();
     ctx.moveTo(vertexes[0].x, vertexes[0].y);
@@ -2883,10 +3169,6 @@ var iDrawCore = function(exports) {
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
-    drawVertexes(ctx, calcViewVertexes(left.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(right.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(top.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottom.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
@@ -3676,12 +3958,13 @@ var iDrawCore = function(exports) {
       moveY
     };
   }
+  const middlewareEventSelect = "@middleware/select";
   const MiddlewareSelector = (opts) => {
     const { viewer, sharer, viewContent, calculator, eventHub } = opts;
     const { helperContext } = viewContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on("select", ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids }) => {
       const actionType = sharer.getSharedStorage(keyActionType);
       const data = sharer.getActiveStorage("data");
       const elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
@@ -3746,7 +4029,7 @@ var iDrawCore = function(exports) {
         sharer.setSharedStorage(keySelectedElementController, null);
       }
       if ((opts2 == null ? void 0 : opts2.triggerEvent) === true) {
-        eventHub.trigger("select", { uuids: list.map((elem) => elem.uuid) });
+        eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
       }
     };
     const pointTargetBaseOptions = () => {
@@ -4117,9 +4400,15 @@ var iDrawCore = function(exports) {
   const keyPrevPoint = Symbol(`${key}_prevPoint`);
   const keyActivePoint = Symbol(`${key}_activePoint`);
   const keyActiveThumbType = Symbol(`${key}_activeThumbType`);
+  const minScrollerWidth = 12;
   const scrollerLineWidth = 16;
-  const scrollerAlpha = 0.12;
   const scrollerThumbAlpha = 0.36;
+  const scrollConfig = {
+    width: minScrollerWidth,
+    thumbColor: "#000000AA",
+    scrollBarColor: "#FFFFFF60",
+    showScrollBar: false
+  };
   function isPointAtRect(helperContext, p, rect) {
     const ctx = helperContext;
     const { x: x2, y: y2, w: w2, h: h2 } = rect;
@@ -4167,7 +4456,7 @@ var iDrawCore = function(exports) {
     if (ySize >= height) {
       ySize = height;
     }
-    const xStart = lineSize / 2;
+    const xStart = lineSize;
     const xEnd = width - xSize - lineSize;
     let translateX = xStart;
     if (offsetLeft > 0) {
@@ -4175,10 +4464,10 @@ var iDrawCore = function(exports) {
     } else if (offsetRight > 0) {
       translateX = xEnd;
     } else if (offsetLeft <= 0 && xSize > 0 && !(offsetLeft === 0 && offsetRight === 0)) {
-      translateX = xSize / 2 + (width - xSize) * Math.abs(offsetLeft) / (Math.abs(offsetLeft) + Math.abs(offsetRight));
-      translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
+      translateX = xStart + (width - xSize) * Math.abs(offsetLeft) / (Math.abs(offsetLeft) + Math.abs(offsetRight));
+      translateX = Math.min(Math.max(0, translateX - xStart), width - xSize);
     }
-    const yStart = lineSize / 2;
+    const yStart = lineSize;
     const yEnd = height - ySize - lineSize;
     let translateY = yStart;
     if (offsetTop > 0) {
@@ -4186,8 +4475,8 @@ var iDrawCore = function(exports) {
     } else if (offsetBottom > 0) {
       translateY = yEnd;
     } else if (offsetTop <= 0 && ySize > 0 && !(offsetTop === 0 && offsetBottom === 0)) {
-      translateY = ySize / 2 + (height - ySize) * Math.abs(offsetTop) / (Math.abs(offsetTop) + Math.abs(offsetBottom));
-      translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
+      translateY = yStart + (height - ySize) * Math.abs(offsetTop) / (Math.abs(offsetTop) + Math.abs(offsetBottom));
+      translateY = Math.min(Math.max(0, translateY - yStart), height - ySize);
     }
     const xThumbRect = {
       x: translateX,
@@ -4207,7 +4496,8 @@ var iDrawCore = function(exports) {
       ySize,
       translateY,
       translateX,
-      color: "#0000007A",
+      thumbColor: scrollConfig.thumbColor,
+      scrollBarColor: scrollConfig.scrollBarColor,
       xThumbRect,
       yThumbRect
     };
@@ -4215,47 +4505,54 @@ var iDrawCore = function(exports) {
   }
   function drawScrollerThumb(ctx, opts) {
     let { x: x2, y: y2, h: h2, w: w2 } = opts;
-    const { color: color2, axis } = opts;
-    if (axis === "X") {
-      y2 = y2 + h2 / 4 + 0;
-      h2 = h2 / 2;
-    } else if (axis === "Y") {
-      x2 = x2 + w2 / 4 + 0;
-      w2 = w2 / 2;
-    }
-    let r = opts.r;
-    r = Math.min(r, w2 / 2, h2 / 2);
-    if (w2 < r * 2 || h2 < r * 2) {
-      r = 0;
-    }
-    ctx.globalAlpha = scrollerThumbAlpha;
-    ctx.beginPath();
-    ctx.moveTo(x2 + r, y2);
-    ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
-    ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
-    ctx.arcTo(x2, y2 + h2, x2, y2, r);
-    ctx.arcTo(x2, y2, x2 + w2, y2, r);
-    ctx.closePath();
-    ctx.fillStyle = color2;
-    ctx.fill();
-    ctx.globalAlpha = 1;
-    ctx.beginPath();
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = color2;
-    ctx.setLineDash([]);
-    ctx.moveTo(x2 + r, y2);
-    ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
-    ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
-    ctx.arcTo(x2, y2 + h2, x2, y2, r);
-    ctx.arcTo(x2, y2, x2 + w2, y2, r);
-    ctx.closePath();
-    ctx.stroke();
+    ctx.save();
+    ctx.shadowColor = "#FFFFFF";
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 1;
+    {
+      const { color: color2, axis } = opts;
+      if (axis === "X") {
+        y2 = y2 + h2 / 4 + 0;
+        h2 = h2 / 2;
+      } else if (axis === "Y") {
+        x2 = x2 + w2 / 4 + 0;
+        w2 = w2 / 2;
+      }
+      let r = opts.r;
+      r = Math.min(r, w2 / 2, h2 / 2);
+      if (w2 < r * 2 || h2 < r * 2) {
+        r = 0;
+      }
+      ctx.globalAlpha = scrollerThumbAlpha;
+      ctx.beginPath();
+      ctx.moveTo(x2 + r, y2);
+      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
+      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
+      ctx.arcTo(x2, y2 + h2, x2, y2, r);
+      ctx.arcTo(x2, y2, x2 + w2, y2, r);
+      ctx.closePath();
+      ctx.fillStyle = color2;
+      ctx.fill();
+      ctx.globalAlpha = 1;
+      ctx.beginPath();
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = color2;
+      ctx.setLineDash([]);
+      ctx.moveTo(x2 + r, y2);
+      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
+      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
+      ctx.arcTo(x2, y2 + h2, x2, y2, r);
+      ctx.arcTo(x2, y2, x2 + w2, y2, r);
+      ctx.closePath();
+      ctx.stroke();
+    }
+    ctx.restore();
   }
   function drawScrollerInfo(helperContext, opts) {
     const ctx = helperContext;
     const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
     const { activeThumbType, prevPoint, activePoint } = scrollInfo;
-    const { width, height } = viewSizeInfo;
     const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
     let xThumbRect = { ...wrapper.xThumbRect };
     let yThumbRect = { ...wrapper.yThumbRect };
@@ -4268,27 +4565,17 @@ var iDrawCore = function(exports) {
         yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
       }
     }
-    {
-      ctx.globalAlpha = scrollerAlpha;
-      ctx.fillStyle = wrapper.color;
-      ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
-    }
     drawScrollerThumb(ctx, {
       axis: "X",
       ...xThumbRect,
       r: wrapper.lineSize / 2,
-      color: wrapper.color
+      color: wrapper.thumbColor
     });
-    {
-      ctx.globalAlpha = scrollerAlpha;
-      ctx.fillStyle = wrapper.color;
-      ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
-    }
     drawScrollerThumb(ctx, {
       axis: "Y",
       ...yThumbRect,
       r: wrapper.lineSize / 2,
-      color: wrapper.color
+      color: wrapper.thumbColor
     });
     ctx.globalAlpha = 1;
     return {
@@ -4405,9 +4692,10 @@ var iDrawCore = function(exports) {
       }
     };
   };
+  const middlewareEventScale = "@middleware/scale";
   const MiddlewareScaler = (opts) => {
     const key2 = "SCALE";
-    const { viewer, sharer } = opts;
+    const { viewer, sharer, eventHub } = opts;
     return {
       mode: key2,
       isDefault: true,
@@ -4423,6 +4711,218 @@ var iDrawCore = function(exports) {
         const { moveX, moveY } = viewer.scale({ scale: newScaleNum, point });
         viewer.scroll({ moveX, moveY });
         viewer.drawFrame();
+        const scaleNum = formatNumber(scale);
+        eventHub.trigger(middlewareEventScale, { scale: scaleNum });
+      }
+    };
+  };
+  const rulerSize = 16;
+  const background = "#FFFFFFA8";
+  const borderColor = "#00000080";
+  const scaleColor = "#000000";
+  const textColor = "#00000080";
+  const fontFamily = "monospace";
+  const fontSize = 10;
+  const fontWeight = 100;
+  const gridColor = "#AAAAAA30";
+  const gridKeyColor = "#AAAAAA70";
+  function calcRulerScaleList(opts) {
+    const { scale, viewLength, viewOffset } = opts;
+    const list = [];
+    let rulerUnit = 10;
+    rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
+    rulerUnit = Math.max(1, Math.min(rulerUnit, 1e3));
+    const rulerKeyUnit = rulerUnit * 10;
+    const rulerSubKeyUnit = rulerUnit * 5;
+    let index = 0;
+    const viewUnit = rulerUnit * scale;
+    const startNum = 0 - viewOffset;
+    const startPosition = 0;
+    const remainderNum = startNum % viewUnit;
+    const firstNum = (startNum - remainderNum + viewUnit) / scale;
+    const firstPosition = startPosition + (viewUnit - remainderNum);
+    while (firstPosition + index * viewUnit < viewLength) {
+      const num = formatNumber(firstNum + index * rulerUnit, { decimalPlaces: 0 });
+      const position = formatNumber(firstPosition + index * viewUnit, { decimalPlaces: 0 });
+      const rulerScale = {
+        num,
+        position,
+        showNum: num % rulerKeyUnit === 0,
+        isKeyNum: num % rulerKeyUnit === 0,
+        isSubKeyNum: num % rulerSubKeyUnit === 0
+      };
+      list.push(rulerScale);
+      index++;
+    }
+    return list;
+  }
+  function calcXRulerScaleList(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetLeft } = viewScaleInfo;
+    const { width } = viewSizeInfo;
+    return calcRulerScaleList({
+      axis: "X",
+      scale,
+      viewLength: width,
+      viewOffset: offsetLeft
+    });
+  }
+  function calcYRulerScaleList(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop } = viewScaleInfo;
+    const { height } = viewSizeInfo;
+    return calcRulerScaleList({
+      axis: "Y",
+      scale,
+      viewLength: height,
+      viewOffset: offsetTop
+    });
+  }
+  function drawXRuler(ctx, opts) {
+    const { scaleList } = opts;
+    const scaleDrawStart = rulerSize;
+    const scaleDrawEnd = rulerSize * 4 / 5;
+    const subKeyScaleDrawEnd = rulerSize * 2 / 5;
+    const keyScaleDrawEnd = rulerSize * 1 / 5;
+    const fontStart = rulerSize / 5;
+    for (let i = 0; i < scaleList.length; i++) {
+      const item = scaleList[i];
+      if (item.position < rulerSize) {
+        continue;
+      }
+      ctx.beginPath();
+      ctx.moveTo(item.position, scaleDrawStart);
+      ctx.lineTo(item.position, item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd);
+      ctx.closePath();
+      ctx.fillStyle = scaleColor;
+      ctx.stroke();
+      if (item.isKeyNum) {
+        ctx.fillStyle = textColor;
+        ctx.textBaseline = "top";
+        ctx.$setFont({
+          fontWeight,
+          fontSize,
+          fontFamily
+        });
+        ctx.fillText(`${item.num}`, item.position + fontStart, fontStart);
+      }
+    }
+  }
+  function drawYRuler(ctx, opts) {
+    const { scaleList } = opts;
+    const scaleDrawStart = rulerSize;
+    const scaleDrawEnd = rulerSize * 4 / 5;
+    const subKeyScaleDrawEnd = rulerSize * 2 / 5;
+    const keyScaleDrawEnd = rulerSize * 1 / 5;
+    const fontStart = rulerSize / 5;
+    for (let i = 0; i < scaleList.length; i++) {
+      const item = scaleList[i];
+      if (item.position < rulerSize) {
+        continue;
+      }
+      ctx.beginPath();
+      ctx.moveTo(scaleDrawStart, item.position);
+      ctx.lineTo(item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd, item.position);
+      ctx.closePath();
+      ctx.fillStyle = scaleColor;
+      ctx.stroke();
+      if (item.showNum === true) {
+        const textX = fontStart;
+        const textY = item.position + fontStart;
+        const numText = `${item.num}`;
+        rotateByCenter(ctx, -90, { x: textX, y: textY }, () => {
+          ctx.fillStyle = textColor;
+          ctx.textBaseline = "top";
+          ctx.$setFont({
+            fontWeight,
+            fontSize,
+            fontFamily
+          });
+          ctx.fillText(numText, fontStart + fontSize, item.position + fontStart);
+        });
+      }
+    }
+  }
+  function drawRulerBackground(ctx, opts) {
+    const { viewSizeInfo } = opts;
+    const { width, height } = viewSizeInfo;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(width + 1, 0);
+    ctx.lineTo(width + 1, rulerSize);
+    ctx.lineTo(rulerSize, rulerSize);
+    ctx.lineTo(rulerSize, height + 1);
+    ctx.lineTo(0, height + 1);
+    ctx.lineTo(0, 0);
+    ctx.closePath();
+    ctx.fillStyle = background;
+    ctx.fill();
+    ctx.strokeStyle = borderColor;
+    ctx.stroke();
+  }
+  function drawUnderGrid(ctx, opts) {
+    const { xList, yList, viewSizeInfo } = opts;
+    const { width, height } = viewSizeInfo;
+    for (let i = 0; i < xList.length; i++) {
+      const item = xList[i];
+      ctx.beginPath();
+      ctx.moveTo(item.position, 0);
+      ctx.lineTo(item.position, height);
+      if (item.isKeyNum === true || item.isSubKeyNum === true) {
+        ctx.strokeStyle = gridKeyColor;
+      } else {
+        ctx.strokeStyle = gridColor;
+      }
+      ctx.lineWidth = 1;
+      ctx.closePath();
+      ctx.stroke();
+    }
+    for (let i = 0; i < yList.length; i++) {
+      const item = yList[i];
+      ctx.beginPath();
+      ctx.moveTo(0, item.position);
+      ctx.lineTo(width, item.position);
+      if (item.isKeyNum === true || item.isSubKeyNum === true) {
+        ctx.strokeStyle = gridKeyColor;
+      } else {
+        ctx.strokeStyle = gridColor;
+      }
+      ctx.lineWidth = 1;
+      ctx.closePath();
+      ctx.stroke();
+    }
+  }
+  const middlewareEventRuler = "@middleware/show-ruler";
+  const MiddlewareRuler = (opts) => {
+    const key2 = "RULE";
+    const { viewContent, viewer, eventHub } = opts;
+    const { helperContext, underContext } = viewContent;
+    let showRuler = true;
+    eventHub.on(middlewareEventRuler, (e) => {
+      if (typeof (e == null ? void 0 : e.show) === "boolean") {
+        showRuler = e.show;
+        viewer.drawFrame();
+      }
+    });
+    return {
+      mode: key2,
+      isDefault: true,
+      beforeDrawFrame: ({ snapshot }) => {
+        if (showRuler === true) {
+          const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+          const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+          drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
+          const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
+          drawXRuler(helperContext, { scaleList: xList });
+          const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
+          drawYRuler(helperContext, { scaleList: yList });
+          drawUnderGrid(underContext, {
+            xList,
+            yList,
+            viewScaleInfo,
+            viewSizeInfo
+          });
+        }
       }
     };
   };
@@ -4464,6 +4964,8 @@ var iDrawCore = function(exports) {
     }
     scale(opts) {
       this._board.scale(opts);
+      const viewer = this._board.getViewer();
+      viewer.drawFrame();
     }
     resize(newViewSize) {
       const { _board: board } = this;
@@ -4491,9 +4993,13 @@ var iDrawCore = function(exports) {
     }
   }
   exports.Core = Core;
+  exports.MiddlewareRuler = MiddlewareRuler;
   exports.MiddlewareScaler = MiddlewareScaler;
   exports.MiddlewareScroller = MiddlewareScroller;
   exports.MiddlewareSelector = MiddlewareSelector;
+  exports.middlewareEventRuler = middlewareEventRuler;
+  exports.middlewareEventScale = middlewareEventScale;
+  exports.middlewareEventSelect = middlewareEventSelect;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});