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

package/dist/index.global.js

@@ -3,34 +3,57 @@ var iDrawRenderer = 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 deepClone(target) {
-    function _clone(t) {
-      const type = is$1(t);
-      if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
-        return t;
-      } else if (type === "Array") {
-        const arr = [];
-        t.forEach((item) => {
-          arr.push(_clone(item));
-        });
-        return arr;
-      } else if (type === "Object") {
-        const obj = {};
-        const keys = Object.keys(t);
-        keys.forEach((key) => {
-          obj[key] = _clone(t[key]);
-        });
-        const symbolKeys = Object.getOwnPropertySymbols(t);
-        symbolKeys.forEach((key) => {
-          obj[key] = _clone(t[key]);
-        });
-        return obj;
-      }
+  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 _clone(target);
+    return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
   }
-  function is$1(target) {
-    return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
+  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 parsePrototype(data) {
     const typeStr = Object.prototype.toString.call(data) || "";
@@ -114,7 +137,7 @@ var iDrawRenderer = 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);
@@ -322,9 +345,8 @@ var iDrawRenderer = 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);
@@ -337,6 +359,12 @@ var iDrawRenderer = 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,
@@ -351,40 +379,117 @@ var iDrawRenderer = 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 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;
   }
-  function drawBox(ctx, viewElem, opts) {
-    var _a, _b;
-    if (((_a = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) > 0) {
-      ctx.globalAlpha = viewElem.detail.opacity;
+  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 ? 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 ? 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,
@@ -392,12 +497,18 @@ var iDrawRenderer = function(exports) {
       viewScaleInfo,
       viewSizeInfo,
       renderContent: () => {
-        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        var _a, _b;
+        if (((_a = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) >= 0) {
+          ctx.globalAlpha = viewElem.detail.opacity;
+        } else {
+          ctx.globalAlpha = 1;
+        }
         drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
         renderContent == null ? 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;
@@ -430,21 +541,20 @@ var iDrawRenderer = 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;
@@ -452,39 +562,20 @@ var iDrawRenderer = function(exports) {
         ctx.fillStyle = pattern;
       } else if (typeof viewElem.detail.background === "string") {
         ctx.fillStyle = viewElem.detail.background;
-      } else if (((_a = viewElem.detail.background) == null ? 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 ? 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 ? 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 ? 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 ? void 0 : transform.length); i++) {
             const action = transform[i];
@@ -505,95 +596,139 @@ var iDrawRenderer = 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 ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) >= 0) {
+      ctx.globalAlpha = viewElem.detail.opacity;
+    } else {
+      ctx.globalAlpha = 1;
+    }
     const { viewScaleInfo } = opts;
-    let borderColor = "#000000";
+    const { scale } = viewScaleInfo;
+    let borderColor = defaultElemConfig.borderColor;
     if (isColorStr(viewElem.detail.borderColor) === true) {
       borderColor = 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;
+    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 ? void 0 : borderRadius2.length) === 4) {
+      radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
+    }
     ctx.strokeStyle = borderColor;
-    ctx.setLineDash(borderDash || []);
+    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;
@@ -601,7 +736,7 @@ var iDrawRenderer = 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;
@@ -611,6 +746,52 @@ var iDrawRenderer = function(exports) {
       renderContent();
     }
   }
+  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);
+    const viewElem = { ...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 ? void 0 : elem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = elem == null ? void 0 : elem.detail) == null ? 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 = borderColor;
+            ctx.lineWidth = borderWidth2;
+            ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.stroke();
+          }
+          ctx.beginPath();
+          const fillStyle = createColorStyle(ctx, background, {
+            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);
@@ -633,20 +814,53 @@ var iDrawRenderer = 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 = { ...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: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem, {
+                  viewScaleInfo,
+                  viewSizeInfo
+                });
+                ctx.save();
+                ctx.beginPath();
+                ctx.moveTo(x22 + radiusList[0], y22);
+                ctx.arcTo(x22 + w22, y22, x22 + w22, y22 + h22, radiusList[1]);
+                ctx.arcTo(x22 + w22, y22 + h22, x22, y22 + h22, radiusList[2]);
+                ctx.arcTo(x22, y22 + h22, x22, y22, radiusList[3]);
+                ctx.arcTo(x22, y22, x22 + w22, y22, radiusList[0]);
+                ctx.closePath();
+                ctx.fill();
+                ctx.clip();
+                ctx.drawImage(content, x22, y22, w22, h22);
+                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 }, () => {
@@ -654,23 +868,30 @@ var iDrawRenderer = 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);
@@ -683,16 +904,12 @@ var iDrawRenderer = function(exports) {
         viewSizeInfo,
         renderContent: () => {
           const detail = {
-            ...{
-              fontSize: 12,
-              fontFamily: "sans-serif",
-              textAlign: "center"
-            },
+            ...detailConfig,
             ...elem.detail
           };
-          const fontSize2 = detail.fontSize * viewScaleInfo.scale;
+          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,
@@ -928,10 +1145,20 @@ var iDrawRenderer = 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 = {
+        ...element,
+        ...{
+          detail: {
+            ...defaultDetail,
+            ...element == null ? void 0 : element.detail
+          }
+        }
+      };
       if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
         continue;
       }
@@ -943,6 +1170,24 @@ var iDrawRenderer = 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 ? void 0 : element.detail) == null ? void 0 : _a.src) || null;
+    } else if (element.type === "svg") {
+      source = ((_b = element == null ? void 0 : element.detail) == null ? void 0 : _b.svg) || null;
+    } else if (element.type === "html") {
+      source = ((_c = element == null ? void 0 : element.detail) == null ? 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();
@@ -1010,34 +1255,35 @@ var iDrawRenderer = 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", { ...item, countTime: item.endTime - item.startTime });
         }
       } else {
-        this._storageLoadItemMap[uuid] = item;
+        this._storageLoadItemMap[assetId] = item;
         this.trigger("load", { ...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", { ...item, countTime: item.endTime - item.startTime });
         }
       } else {
-        this._storageLoadItemMap[uuid] = item;
+        this._storageLoadItemMap[assetId] = item;
         this.trigger("error", { ...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();
@@ -1057,7 +1303,8 @@ var iDrawRenderer = function(exports) {
     }
     _isExistingErrorStorage(element) {
       var _a;
-      const existItem = (_a = this._currentLoadItemMap) == null ? void 0 : _a[element == null ? void 0 : element.uuid];
+      const assetId = getAssetIdFromElement(element);
+      const existItem = (_a = this._currentLoadItemMap) == null ? void 0 : _a[assetId];
       if (existItem && existItem.status === "error" && existItem.source && existItem.source === this._getLoadElementSource(element)) {
         return true;
       }
@@ -1068,13 +1315,13 @@ var iDrawRenderer = 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 ? void 0 : _a[uuid]) == null ? void 0 : _b.content) || null;
+      const assetId = getAssetIdFromElement(element);
+      return ((_b = (_a = this._storageLoadItemMap) == null ? void 0 : _a[assetId]) == null ? void 0 : _b.content) || null;
     }
   }
   class Renderer extends EventEmitter {
@@ -1139,21 +1386,6 @@ var iDrawRenderer = function(exports) {
         });
       }
     }
-    // scroll(opts: { offsetTop?: number; offsetLeft?: number }) {
-    //   const { sharer } = this._opts;
-    //   const { data, scale, offsetTop, offsetBottom, offsetLeft, offsetRight } = sharer.getActiveStoreSnapshot();
-    //   // TODO calc offset data
-    //   if (data) {
-    //     this.drawData(data, {
-    //       scale,
-    //       offsetTop,
-    //       offsetBottom,
-    //       offsetLeft,
-    //       offsetRight
-    //     });
-    //   }
-    //   // sharer.setActiveStorage('scale', num);
-    // }
   }
   exports.Renderer = Renderer;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });