@idraw/renderer 0.3.1 → 0.4.0-alpha.2

package/dist/index.global.js

@@ -1,13 +1,7 @@
-var iDrawRenderer = function() {
+var iDrawRenderer = function(exports) {
   "use strict";
   function isColorStr(color2) {
-    return typeof color2 === "string" && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2);
-  }
-  function createUUID() {
-    function str4() {
-      return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
-    }
-    return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`;
+    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) {
@@ -26,17 +20,21 @@ var iDrawRenderer = function() {
         keys.forEach((key) => {
           obj[key] = _clone(t[key]);
         });
+        const symbolKeys = Object.getOwnPropertySymbols(t);
+        symbolKeys.forEach((key) => {
+          obj[key] = _clone(t[key]);
+        });
         return obj;
       }
     }
     return _clone(target);
   }
-  function is$1(data) {
-    return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
+  function is$1(target) {
+    return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
   }
   function parsePrototype(data) {
     const typeStr = Object.prototype.toString.call(data) || "";
-    const result = typeStr.replace(/(\[object|\])/ig, "").trim();
+    const result = typeStr.replace(/(\[object|\])/gi, "").trim();
     return result;
   }
   const istype = {
@@ -76,7 +74,10 @@ var iDrawRenderer = function() {
     const { width, height } = opts;
     return new Promise((resolve, reject) => {
       const _svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${width || ""}" height = "${height || ""}">
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width="${width || ""}" 
+      height = "${height || ""}">
       <foreignObject width="100%" height="100%">
         <div xmlns = "http://www.w3.org/1999/xhtml">
           ${html2}
@@ -161,7 +162,7 @@ var iDrawRenderer = function() {
     });
   }
   function filterAmpersand(str) {
-    return str.replace(/\&/ig, "&amp;");
+    return str.replace(/\&/gi, "&amp;");
   }
   function loadHTML(html2, opts) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -171,196 +172,6 @@ var iDrawRenderer = function() {
       return image;
     });
   }
-  class Context {
-    constructor(ctx, opts) {
-      this._opts = opts;
-      this._ctx = ctx;
-      this._transform = {
-        scale: 1,
-        scrollX: 0,
-        scrollY: 0
-      };
-    }
-    getContext() {
-      return this._ctx;
-    }
-    resetSize(opts) {
-      this._opts = Object.assign(Object.assign({}, this._opts), opts);
-    }
-    calcDeviceNum(num) {
-      return num * this._opts.devicePixelRatio;
-    }
-    calcScreenNum(num) {
-      return num / this._opts.devicePixelRatio;
-    }
-    getSize() {
-      return {
-        width: this._opts.width,
-        height: this._opts.height,
-        contextWidth: this._opts.contextWidth,
-        contextHeight: this._opts.contextHeight,
-        devicePixelRatio: this._opts.devicePixelRatio
-      };
-    }
-    setTransform(config) {
-      this._transform = Object.assign(Object.assign({}, this._transform), config);
-    }
-    getTransform() {
-      return {
-        scale: this._transform.scale,
-        scrollX: this._transform.scrollX,
-        scrollY: this._transform.scrollY
-      };
-    }
-    setFillStyle(color2) {
-      this._ctx.fillStyle = color2;
-    }
-    fill(fillRule) {
-      return this._ctx.fill(fillRule || "nonzero");
-    }
-    arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
-      return this._ctx.arc(this._doSize(x2), this._doSize(y2), this._doSize(radius), startAngle, endAngle, anticlockwise);
-    }
-    rect(x2, y2, w2, h2) {
-      return this._ctx.rect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
-    }
-    fillRect(x2, y2, w2, h2) {
-      return this._ctx.fillRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
-    }
-    clearRect(x2, y2, w2, h2) {
-      return this._ctx.clearRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
-    }
-    beginPath() {
-      return this._ctx.beginPath();
-    }
-    closePath() {
-      return this._ctx.closePath();
-    }
-    lineTo(x2, y2) {
-      return this._ctx.lineTo(this._doSize(x2), this._doSize(y2));
-    }
-    moveTo(x2, y2) {
-      return this._ctx.moveTo(this._doSize(x2), this._doSize(y2));
-    }
-    arcTo(x1, y1, x2, y2, radius) {
-      return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
-    }
-    setLineWidth(w2) {
-      return this._ctx.lineWidth = this._doSize(w2);
-    }
-    setLineDash(nums) {
-      return this._ctx.setLineDash(nums.map((n) => this._doSize(n)));
-    }
-    isPointInPath(x2, y2) {
-      return this._ctx.isPointInPath(this._doX(x2), this._doY(y2));
-    }
-    isPointInPathWithoutScroll(x2, y2) {
-      return this._ctx.isPointInPath(this._doSize(x2), this._doSize(y2));
-    }
-    setStrokeStyle(color2) {
-      this._ctx.strokeStyle = color2;
-    }
-    stroke() {
-      return this._ctx.stroke();
-    }
-    translate(x2, y2) {
-      return this._ctx.translate(this._doSize(x2), this._doSize(y2));
-    }
-    rotate(angle2) {
-      return this._ctx.rotate(angle2);
-    }
-    drawImage(...args) {
-      const image = args[0];
-      const sx = args[1];
-      const sy = args[2];
-      const sw = args[3];
-      const sh = args[4];
-      const dx = args[args.length - 4];
-      const dy = args[args.length - 3];
-      const dw = args[args.length - 2];
-      const dh = args[args.length - 1];
-      if (args.length === 9) {
-        return this._ctx.drawImage(image, this._doSize(sx), this._doSize(sy), this._doSize(sw), this._doSize(sh), this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
-      } else {
-        return this._ctx.drawImage(image, this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
-      }
-    }
-    createPattern(image, repetition) {
-      return this._ctx.createPattern(image, repetition);
-    }
-    measureText(text2) {
-      return this._ctx.measureText(text2);
-    }
-    setTextAlign(align) {
-      this._ctx.textAlign = align;
-    }
-    fillText(text2, x2, y2, maxWidth) {
-      if (maxWidth !== void 0) {
-        return this._ctx.fillText(text2, this._doSize(x2), this._doSize(y2), this._doSize(maxWidth));
-      } else {
-        return this._ctx.fillText(text2, this._doSize(x2), this._doSize(y2));
-      }
-    }
-    strokeText(text2, x2, y2, maxWidth) {
-      if (maxWidth !== void 0) {
-        return this._ctx.strokeText(text2, this._doSize(x2), this._doSize(y2), this._doSize(maxWidth));
-      } else {
-        return this._ctx.strokeText(text2, this._doSize(x2), this._doSize(y2));
-      }
-    }
-    setFont(opts) {
-      const strList = [];
-      if (opts.fontWeight === "bold") {
-        strList.push(`${opts.fontWeight}`);
-      }
-      strList.push(`${this._doSize(opts.fontSize || 12)}px`);
-      strList.push(`${opts.fontFamily || "sans-serif"}`);
-      this._ctx.font = `${strList.join(" ")}`;
-    }
-    setTextBaseline(baseline) {
-      this._ctx.textBaseline = baseline;
-    }
-    setGlobalAlpha(alpha) {
-      this._ctx.globalAlpha = alpha;
-    }
-    save() {
-      this._ctx.save();
-    }
-    restore() {
-      this._ctx.restore();
-    }
-    scale(ratioX, ratioY) {
-      this._ctx.scale(ratioX, ratioY);
-    }
-    setShadowColor(color2) {
-      this._ctx.shadowColor = color2;
-    }
-    setShadowOffsetX(offsetX) {
-      this._ctx.shadowOffsetX = this._doSize(offsetX);
-    }
-    setShadowOffsetY(offsetY) {
-      this._ctx.shadowOffsetY = this._doSize(offsetY);
-    }
-    setShadowBlur(blur) {
-      this._ctx.shadowBlur = this._doSize(blur);
-    }
-    ellipse(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      this._ctx.ellipse(this._doSize(x2), this._doSize(y2), this._doSize(radiusX), this._doSize(radiusY), rotation, startAngle, endAngle, counterclockwise);
-    }
-    _doSize(num) {
-      return this._opts.devicePixelRatio * num;
-    }
-    _doX(x2) {
-      const { scale, scrollX } = this._transform;
-      const _x = (x2 - scrollX) / scale;
-      return this._doSize(_x);
-    }
-    _doY(y2) {
-      const { scale, scrollY } = this._transform;
-      const _y = (y2 - scrollY) / scale;
-      return this._doSize(_y);
-    }
-  }
   function number(value) {
     return typeof value === "number" && (value > 0 || value <= 0);
   }
@@ -433,6 +244,9 @@ var iDrawRenderer = function() {
   function fontWeight(value) {
     return ["bold"].includes(value);
   }
+  function numberStr(value) {
+    return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
+  }
   const is = {
     x,
     y,
@@ -440,6 +254,7 @@ var iDrawRenderer = function() {
     h,
     angle,
     number,
+    numberStr,
     borderWidth,
     borderRadius,
     color,
@@ -456,22 +271,60 @@ var iDrawRenderer = function() {
     fontWeight,
     strokeWidth
   };
+  class EventEmitter {
+    constructor() {
+      this._listeners = /* @__PURE__ */ new Map();
+    }
+    on(eventKey, callback) {
+      if (this._listeners.has(eventKey)) {
+        const callbacks = this._listeners.get(eventKey) || [];
+        callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
+        this._listeners.set(eventKey, callbacks);
+      } else {
+        this._listeners.set(eventKey, [callback]);
+      }
+    }
+    off(eventKey, callback) {
+      if (this._listeners.has(eventKey)) {
+        const callbacks = this._listeners.get(eventKey);
+        if (Array.isArray(callbacks)) {
+          for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+            if (callbacks[i] === callback) {
+              callbacks.splice(i, 1);
+              break;
+            }
+          }
+        }
+        this._listeners.set(eventKey, callbacks || []);
+      }
+    }
+    trigger(eventKey, e) {
+      const callbacks = this._listeners.get(eventKey);
+      if (Array.isArray(callbacks)) {
+        callbacks.forEach((cb) => {
+          cb(e);
+        });
+        return true;
+      } else {
+        return false;
+      }
+    }
+    has(name) {
+      if (this._listeners.has(name)) {
+        const list = this._listeners.get(name);
+        if (Array.isArray(list) && list.length > 0) {
+          return true;
+        }
+      }
+      return false;
+    }
+  }
   function parseAngleToRadian(angle2) {
     return angle2 / 180 * Math.PI;
   }
-  function calcElementCenter(elem) {
-    const p = {
-      x: elem.x + elem.w / 2,
-      y: elem.y + elem.h / 2
-    };
-    return p;
-  }
-  function rotateElement(ctx, elem, callback) {
-    const center = calcElementCenter(elem);
-    const radian = parseAngleToRadian(elem.angle || 0);
-    return rotateContext(ctx, center, radian || 0, callback);
-  }
-  function rotateContext(ctx, center, radian, callback) {
+  function rotateElement(ctx, elemSize, callback) {
+    const center = calcElementCenter(elemSize);
+    const radian = parseAngleToRadian(elemSize.angle || 0);
     if (center && (radian > 0 || radian < 0)) {
       ctx.translate(center.x, center.y);
       ctx.rotate(radian);
@@ -484,28 +337,104 @@ var iDrawRenderer = function() {
       ctx.translate(-center.x, -center.y);
     }
   }
-  function clearContext(ctx) {
-    ctx.setFillStyle("#000000");
-    ctx.setStrokeStyle("#000000");
-    ctx.setLineDash([]);
-    ctx.setGlobalAlpha(1);
-    ctx.setShadowColor("#00000000");
-    ctx.setShadowOffsetX(0);
-    ctx.setShadowOffsetY(0);
-    ctx.setShadowBlur(0);
+  function calcElementCenter(elem) {
+    const p = {
+      x: elem.x + elem.w / 2,
+      y: elem.y + elem.h / 2
+    };
+    return p;
   }
-  function drawBgColor(ctx, color2) {
-    const size = ctx.getSize();
-    ctx.setFillStyle(color2);
-    ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
+  function generateSVGPath(commands) {
+    let path = "";
+    commands.forEach((item) => {
+      path += item.type + item.params.join(" ");
+    });
+    return path;
   }
-  function drawBox(ctx, elem, pattern) {
-    clearContext(ctx);
-    drawBoxBorder(ctx, elem);
-    clearContext(ctx);
-    rotateElement(ctx, elem, () => {
-      const { x: x2, y: y2, w: w2, h: h2 } = elem;
-      let r = elem.desc.borderRadius || 0;
+  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 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;
+    } else {
+      ctx.globalAlpha = 1;
+    }
+    const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
+    drawClipPath(ctx, viewElem, {
+      originElem,
+      calcElemSize,
+      viewScaleInfo,
+      viewSizeInfo,
+      renderContent: () => {
+        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
+        renderContent == null ? void 0 : renderContent();
+      }
+    });
+    ctx.globalAlpha = 1;
+  }
+  function drawClipPath(ctx, viewElem, opts) {
+    const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
+    const totalScale = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
+    const { clipPath } = (originElem == null ? void 0 : originElem.detail) || {};
+    if (clipPath && calcElemSize && clipPath.commands) {
+      const { x: x2, y: y2, w: w2, h: h2 } = calcElemSize;
+      const { originW, originH, originX, originY } = clipPath;
+      const scaleW = w2 / originW;
+      const scaleH = h2 / originH;
+      const viewOriginX = originX * scaleW;
+      const viewOriginY = originY * scaleH;
+      let internalX = x2 - viewOriginX;
+      let internalY = y2 - viewOriginY;
+      ctx.save();
+      ctx.translate(internalX, internalY);
+      ctx.scale(totalScale * scaleW, totalScale * scaleH);
+      const pathStr = generateSVGPath(clipPath.commands || []);
+      const path2d = new Path2D(pathStr);
+      ctx.clip(path2d);
+      ctx.translate(0 - internalX, 0 - internalY);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      rotateElement(ctx, { ...viewElem }, () => {
+        renderContent == null ? void 0 : renderContent();
+      });
+      ctx.restore();
+    } else {
+      renderContent == null ? void 0 : renderContent();
+    }
+  }
+  function drawBoxBackground(ctx, viewElem, opts) {
+    var _a, _b;
+    const { pattern, viewScaleInfo } = opts;
+    let transform = [];
+    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;
@@ -518,49 +447,145 @@ var iDrawRenderer = function() {
       ctx.arcTo(x2, y2, x2 + w2, y2, r);
       ctx.closePath();
       if (typeof pattern === "string") {
-        ctx.setFillStyle(pattern);
+        ctx.fillStyle = pattern;
       } else if (["CanvasPattern"].includes(istype.type(pattern))) {
-        ctx.setFillStyle(pattern);
+        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);
+        });
+        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 = radialGradient;
+        if (transform && transform.length > 0) {
+          for (let i = 0; i < (transform == null ? void 0 : transform.length); i++) {
+            const action = transform[i];
+            if (action.method === "translate") {
+              ctx.translate(action.args[0] + x2, action.args[1] + y2);
+            } else if (action.method === "rotate") {
+              ctx.rotate(...action.args);
+            } else if (action.method === "scale") {
+              ctx.scale(...action.args);
+            }
+          }
+        }
       }
       ctx.fill();
-    });
-  }
-  function drawBoxBorder(ctx, elem) {
-    clearContext(ctx);
-    rotateElement(ctx, elem, () => {
-      if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
-        return;
+      if (transform && transform.length > 0) {
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
       }
-      const bw = elem.desc.borderWidth;
-      let borderColor = "#000000";
-      if (isColorStr(elem.desc.borderColor) === true) {
-        borderColor = elem.desc.borderColor;
+    }
+  }
+  function drawBoxBorder(ctx, viewElem, opts) {
+    if (!isColorStr(viewElem.detail.borderColor)) {
+      return;
+    }
+    const { viewScaleInfo } = opts;
+    let borderColor = "#000000";
+    if (isColorStr(viewElem.detail.borderColor) === true) {
+      borderColor = viewElem.detail.borderColor;
+    }
+    const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash } = 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 || []);
+    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;
+    }
+    if (borderLeft || borderRight || borderTop || borderBottom) {
+      const { x: x2, y: y2, w: w2, h: h2 } = viewElem;
+      if (borderLeft) {
+        ctx.beginPath();
+        ctx.lineWidth = borderLeft * viewScaleInfo.scale;
+        ctx.moveTo(x2, y2);
+        ctx.lineTo(x2, y2 + h2);
+        ctx.closePath();
+        ctx.stroke();
       }
-      const x2 = elem.x - bw / 2;
-      const y2 = elem.y - bw / 2;
-      const w2 = elem.w + bw;
-      const h2 = elem.h + bw;
-      let r = elem.desc.borderRadius || 0;
-      r = Math.min(r, w2 / 2, h2 / 2);
-      if (r < w2 / 2 && r < h2 / 2) {
-        r = r + bw / 2;
+      if (borderRight) {
+        ctx.beginPath();
+        ctx.lineWidth = borderRight * viewScaleInfo.scale;
+        ctx.moveTo(x2 + w2, y2);
+        ctx.lineTo(x2 + w2, y2 + h2);
+        ctx.closePath();
+        ctx.stroke();
       }
-      const { desc } = elem;
-      if (desc.shadowColor !== void 0 && isColorStr(desc.shadowColor)) {
-        ctx.setShadowColor(desc.shadowColor);
+      if (borderTop) {
+        ctx.beginPath();
+        ctx.lineWidth = borderTop * viewScaleInfo.scale;
+        ctx.moveTo(x2, y2);
+        ctx.lineTo(x2 + w2, y2);
+        ctx.closePath();
+        ctx.stroke();
       }
-      if (desc.shadowOffsetX !== void 0 && is.number(desc.shadowOffsetX)) {
-        ctx.setShadowOffsetX(desc.shadowOffsetX);
+      if (borderBottom) {
+        ctx.beginPath();
+        ctx.lineWidth = borderBottom * viewScaleInfo.scale;
+        ctx.moveTo(x2, y2 + h2);
+        ctx.lineTo(x2 + w2, y2 + h2);
+        ctx.closePath();
+        ctx.stroke();
       }
-      if (desc.shadowOffsetY !== void 0 && is.number(desc.shadowOffsetY)) {
-        ctx.setShadowOffsetY(desc.shadowOffsetY);
+    } else {
+      let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
+      const { boxSizing } = viewElem.detail;
+      if (boxSizing === "border-box") {
+        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;
       }
-      if (desc.shadowBlur !== void 0 && is.number(desc.shadowBlur)) {
-        ctx.setShadowBlur(desc.shadowBlur);
+      r = Math.min(r, w2 / 2, h2 / 2);
+      if (r < w2 / 2 && r < h2 / 2) {
+        r = r + bw / 2;
       }
       ctx.beginPath();
-      ctx.setLineWidth(bw);
-      ctx.setStrokeStyle(borderColor);
+      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);
@@ -568,683 +593,569 @@ var iDrawRenderer = function() {
       ctx.arcTo(x2, y2, x2 + w2, y2, r);
       ctx.closePath();
       ctx.stroke();
-    });
+    }
   }
-  function drawRect(ctx, elem) {
-    drawBox(ctx, elem, elem.desc.bgColor);
+  function drawBoxShadow(ctx, viewElem, opts) {
+    const { detail } = viewElem;
+    const { viewScaleInfo, renderContent } = opts;
+    const { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (is.number(shadowBlur)) {
+      ctx.save();
+      ctx.shadowColor = shadowColor || "#000000";
+      ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
+      ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
+      ctx.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
+      renderContent();
+      ctx.restore();
+    } else {
+      renderContent();
+    }
   }
-  function drawImage(ctx, elem, loader) {
-    const content = loader.getContent(elem.uuid);
-    rotateElement(ctx, elem, () => {
-      if (content) {
-        ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
+  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);
+    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: () => {
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+            }
+          });
+        }
+      });
+    });
+  }
+  function drawImage(ctx, elem, opts) {
+    const content = opts.loader.getContent(elem.uuid);
+    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.elementAssets || {});
+      }
+      if (elem.type === "image" && content) {
+        ctx.drawImage(content, x2, y2, w2, h2);
       }
     });
   }
-  function drawSVG(ctx, elem, loader) {
-    const content = loader.getContent(elem.uuid);
-    rotateElement(ctx, elem, () => {
-      if (content) {
-        ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
+  function drawSVG(ctx, elem, opts) {
+    const content = opts.loader.getContent(elem.uuid);
+    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.elementAssets || {});
+      }
+      if (elem.type === "svg" && content) {
+        ctx.drawImage(content, x2, y2, w2, h2);
       }
     });
   }
-  function drawHTML(ctx, elem, loader) {
-    const content = loader.getContent(elem.uuid);
-    rotateElement(ctx, elem, () => {
-      if (content) {
-        ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
+  function drawHTML(ctx, elem, opts) {
+    const content = opts.loader.getContent(elem.uuid);
+    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);
+      }
+      if (elem.type === "html" && content) {
+        ctx.drawImage(content, x2, y2, w2, h2);
       }
     });
   }
-  function drawText(ctx, elem, loader) {
-    clearContext(ctx);
-    drawBox(ctx, elem, elem.desc.bgColor || "transparent");
-    rotateElement(ctx, elem, () => {
-      const desc = {
-        ...{
-          fontSize: 12,
-          fontFamily: "sans-serif",
-          textAlign: "center"
-        },
-        ...elem.desc
-      };
-      ctx.setFillStyle(elem.desc.color);
-      ctx.setTextBaseline("top");
-      ctx.setFont({
-        fontWeight: desc.fontWeight,
-        fontSize: desc.fontSize,
-        fontFamily: desc.fontFamily
-      });
-      const descText = desc.text.replace(/\r\n/gi, "\n");
-      const fontHeight = desc.lineHeight || desc.fontSize;
-      const descTextList = descText.split("\n");
-      const lines = [];
-      let lineNum = 0;
-      descTextList.forEach((tempText, idx) => {
-        let lineText = "";
-        if (tempText.length > 0) {
-          for (let i = 0; i < tempText.length; i++) {
-            if (ctx.measureText(lineText + (tempText[i] || "")).width < ctx.calcDeviceNum(elem.w)) {
-              lineText += tempText[i] || "";
+  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);
+    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 }, () => {
+      drawBox(ctx, viewElem, {
+        originElem: elem,
+        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          const detail = {
+            ...{
+              fontSize: 12,
+              fontFamily: "sans-serif",
+              textAlign: "center"
+            },
+            ...elem.detail
+          };
+          const fontSize2 = detail.fontSize * viewScaleInfo.scale;
+          const lineHeight2 = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize2;
+          ctx.fillStyle = elem.detail.color;
+          ctx.textBaseline = "top";
+          ctx.$setFont({
+            fontWeight: detail.fontWeight,
+            fontSize: fontSize2,
+            fontFamily: detail.fontFamily
+          });
+          const detailText = detail.text.replace(/\r\n/gi, "\n");
+          const fontHeight = lineHeight2;
+          const detailTextList = detailText.split("\n");
+          const lines = [];
+          let lineNum = 0;
+          detailTextList.forEach((tempText, idx) => {
+            let lineText = "";
+            if (tempText.length > 0) {
+              for (let i = 0; i < tempText.length; i++) {
+                if (ctx.measureText(lineText + (tempText[i] || "")).width < ctx.$doPixelRatio(w2)) {
+                  lineText += tempText[i] || "";
+                } else {
+                  lines.push({
+                    text: lineText,
+                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                  });
+                  lineText = tempText[i] || "";
+                  lineNum++;
+                }
+                if ((lineNum + 1) * fontHeight > h2) {
+                  break;
+                }
+                if (tempText.length - 1 === i) {
+                  if ((lineNum + 1) * fontHeight < h2) {
+                    lines.push({
+                      text: lineText,
+                      width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                    });
+                    if (idx < detailTextList.length - 1) {
+                      lineNum++;
+                    }
+                    break;
+                  }
+                }
+              }
             } else {
               lines.push({
-                text: lineText,
-                width: ctx.calcScreenNum(ctx.measureText(lineText).width)
+                text: "",
+                width: 0
               });
-              lineText = tempText[i] || "";
-              lineNum++;
             }
-            if ((lineNum + 1) * fontHeight > elem.h) {
-              break;
+          });
+          let startY = 0;
+          if (lines.length * fontHeight < h2) {
+            if (elem.detail.verticalAlign === "top") {
+              startY = 0;
+            } else if (elem.detail.verticalAlign === "bottom") {
+              startY += h2 - lines.length * fontHeight;
+            } else {
+              startY += (h2 - lines.length * fontHeight) / 2;
             }
-            if (tempText.length - 1 === i) {
-              if ((lineNum + 1) * fontHeight < elem.h) {
-                lines.push({
-                  text: lineText,
-                  width: ctx.calcScreenNum(ctx.measureText(lineText).width)
-                });
-                if (idx < descTextList.length - 1) {
-                  lineNum++;
-                }
-                break;
-              }
+          }
+          {
+            const _y = y2 + startY;
+            if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) {
+              ctx.shadowColor = detail.textShadowColor;
+            }
+            if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) {
+              ctx.shadowOffsetX = detail.textShadowOffsetX;
+            }
+            if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) {
+              ctx.shadowOffsetY = detail.textShadowOffsetY;
+            }
+            if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) {
+              ctx.shadowBlur = detail.textShadowBlur;
             }
+            lines.forEach((line, i) => {
+              let _x = x2;
+              if (detail.textAlign === "center") {
+                _x = x2 + (w2 - line.width) / 2;
+              } else if (detail.textAlign === "right") {
+                _x = x2 + (w2 - line.width);
+              }
+              ctx.fillText(line.text, _x, _y + fontHeight * i);
+            });
           }
-        } else {
-          lines.push({
-            text: "",
-            width: 0
-          });
         }
       });
-      let startY = 0;
-      if (lines.length * fontHeight < elem.h) {
-        if (elem.desc.verticalAlign === "top") {
-          startY = 0;
-        } else if (elem.desc.verticalAlign === "bottom") {
-          startY += elem.h - lines.length * fontHeight;
-        } else {
-          startY += (elem.h - lines.length * fontHeight) / 2;
-        }
-      }
-      {
-        const _y = elem.y + startY;
-        if (desc.textShadowColor !== void 0 && isColorStr(desc.textShadowColor)) {
-          ctx.setShadowColor(desc.textShadowColor);
-        }
-        if (desc.textShadowOffsetX !== void 0 && is.number(desc.textShadowOffsetX)) {
-          ctx.setShadowOffsetX(desc.textShadowOffsetX);
-        }
-        if (desc.textShadowOffsetY !== void 0 && is.number(desc.textShadowOffsetY)) {
-          ctx.setShadowOffsetY(desc.textShadowOffsetY);
-        }
-        if (desc.textShadowBlur !== void 0 && is.number(desc.textShadowBlur)) {
-          ctx.setShadowBlur(desc.textShadowBlur);
-        }
-        lines.forEach((line, i) => {
-          let _x = elem.x;
-          if (desc.textAlign === "center") {
-            _x = elem.x + (elem.w - line.width) / 2;
-          } else if (desc.textAlign === "right") {
-            _x = elem.x + (elem.w - line.width);
-          }
-          ctx.fillText(line.text, _x, _y + fontHeight * i);
-        });
-        clearContext(ctx);
-      }
-      if (isColorStr(desc.strokeColor) && desc.strokeWidth !== void 0 && desc.strokeWidth > 0) {
-        const _y = elem.y + startY;
-        lines.forEach((line, i) => {
-          let _x = elem.x;
-          if (desc.textAlign === "center") {
-            _x = elem.x + (elem.w - line.width) / 2;
-          } else if (desc.textAlign === "right") {
-            _x = elem.x + (elem.w - line.width);
-          }
-          if (desc.strokeColor !== void 0) {
-            ctx.setStrokeStyle(desc.strokeColor);
-          }
-          if (desc.strokeWidth !== void 0 && desc.strokeWidth > 0) {
-            ctx.setLineWidth(desc.strokeWidth);
-          }
-          ctx.strokeText(line.text, _x, _y + fontHeight * i);
-        });
-      }
     });
   }
-  function drawCircle(ctx, elem) {
-    clearContext(ctx);
-    rotateElement(ctx, elem, (ctx2) => {
-      const { x: x2, y: y2, w: w2, h: h2, desc } = elem;
-      const {
-        bgColor = "#000000",
-        borderColor = "#000000",
-        borderWidth: borderWidth2 = 0
-      } = desc;
-      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;
-        ctx2.beginPath();
-        ctx2.setStrokeStyle(borderColor);
-        ctx2.setLineWidth(borderWidth2);
-        ctx2.ellipse(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
-        ctx2.closePath();
-        ctx2.stroke();
-      }
-      ctx2.beginPath();
-      ctx2.setFillStyle(bgColor);
-      ctx2.ellipse(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-      ctx2.closePath();
-      ctx2.fill();
+  function drawPath(ctx, elem, opts) {
+    const { detail } = elem;
+    const { originX, originY, originW, originH } = detail;
+    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const scaleW = w2 / originW;
+    const scaleH = h2 / originH;
+    const viewOriginX = originX * scaleW;
+    const viewOriginY = originY * scaleH;
+    const internalX = x2 - viewOriginX;
+    const internalY = y2 - viewOriginY;
+    const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
+    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 }, () => {
+      drawBox(ctx, viewElem, {
+        originElem: elem,
+        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          drawBoxShadow(ctx, viewElem, {
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+              ctx.save();
+              ctx.translate(internalX, internalY);
+              ctx.scale(scaleNum * scaleW / viewScaleInfo.scale, scaleNum * scaleH / viewScaleInfo.scale);
+              const pathStr = generateSVGPath(detail.commands || []);
+              const path2d = new Path2D(pathStr);
+              if (detail.fill) {
+                ctx.fillStyle = detail.fill;
+                ctx.fill(path2d);
+              }
+              if (detail.stroke && detail.strokeWidth !== 0) {
+                ctx.strokeStyle = detail.stroke;
+                ctx.lineWidth = (detail.strokeWidth || 1) / viewSizeInfo.devicePixelRatio;
+                ctx.lineCap = detail.strokeLineCap || "square";
+                ctx.stroke(path2d);
+              }
+              ctx.translate(-internalX, -internalY);
+              ctx.restore();
+            }
+          });
+        }
+      });
     });
   }
-  function drawContext(ctx, data, loader) {
+  function drawElement(ctx, elem, opts) {
     var _a;
-    clearContext(ctx);
-    const size = ctx.getSize();
-    ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
-    if (typeof data.bgColor === "string" && isColorStr(data.bgColor)) {
-      drawBgColor(ctx, data.bgColor);
-    }
-    if (!(data.elements.length > 0)) {
+    if (((_a = elem == null ? void 0 : elem.operations) == null ? void 0 : _a.invisible) === true) {
       return;
     }
-    for (let i = 0; i < data.elements.length; i++) {
-      const elem = data.elements[i];
-      if (((_a = elem == null ? void 0 : elem.operation) == null ? void 0 : _a.invisible) === true) {
-        continue;
-      }
+    try {
       switch (elem.type) {
         case "rect": {
-          drawRect(ctx, elem);
+          drawRect(ctx, elem, opts);
+          break;
+        }
+        case "circle": {
+          drawCircle(ctx, elem, opts);
           break;
         }
         case "text": {
-          drawText(ctx, elem);
+          drawText(ctx, elem, opts);
           break;
         }
         case "image": {
-          drawImage(ctx, elem, loader);
+          drawImage(ctx, elem, opts);
           break;
         }
         case "svg": {
-          drawSVG(ctx, elem, loader);
+          drawSVG(ctx, elem, opts);
           break;
         }
         case "html": {
-          drawHTML(ctx, elem, loader);
+          drawHTML(ctx, elem, opts);
           break;
         }
-        case "circle": {
-          drawCircle(ctx, elem);
+        case "path": {
+          drawPath(ctx, elem, opts);
+          break;
+        }
+        case "group": {
+          drawGroup(ctx, elem, opts);
+          break;
+        }
+        default: {
           break;
         }
       }
+    } catch (err) {
+      console.error(err);
     }
   }
-  class LoaderEvent {
-    constructor() {
-      this._listeners = /* @__PURE__ */ new Map();
-    }
-    on(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
-        callbacks == null ? void 0 : callbacks.push(callback);
-        this._listeners.set(eventKey, callbacks || []);
-      } else {
-        this._listeners.set(eventKey, [callback]);
-      }
-    }
-    off(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
-        if (Array.isArray(callbacks)) {
-          for (let i = 0; i < (callbacks == null ? void 0 : callbacks.length); i++) {
-            if (callbacks[i] === callback) {
-              callbacks.splice(i, 1);
-              break;
+  function drawGroup(ctx, elem, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
+    const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
+    rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
+      drawBox(ctx, viewElem, {
+        originElem: elem,
+        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          if (Array.isArray(elem.detail.children)) {
+            const { parentElementSize: parentSize } = opts;
+            const newParentSize = {
+              x: parentSize.x + elem.x,
+              y: parentSize.y + elem.y,
+              w: elem.w || parentSize.w,
+              h: elem.h || parentSize.h,
+              angle: elem.angle
+            };
+            const { calculator: calculator2 } = opts;
+            if (elem.detail.overflow === "hidden") {
+              ctx.save();
+              ctx.beginPath();
+              ctx.moveTo(x2, y2);
+              ctx.lineTo(x2 + w2, y2);
+              ctx.lineTo(x2 + w2, y2 + h2);
+              ctx.lineTo(x2, y2 + h2);
+              ctx.closePath();
+              ctx.clip();
             }
+            for (let i = 0; i < elem.detail.children.length; i++) {
+              let child = elem.detail.children[i];
+              child = {
+                ...child,
+                ...{
+                  x: newParentSize.x + child.x,
+                  y: newParentSize.y + child.y
+                }
+              };
+              if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
+                continue;
+              }
+              try {
+                drawElement(ctx, child, { ...opts });
+              } catch (err) {
+                console.error(err);
+              }
+            }
+            ctx.restore();
           }
         }
-        this._listeners.set(eventKey, callbacks || []);
-      }
-    }
-    trigger(eventKey, arg) {
-      const callbacks = this._listeners.get(eventKey);
-      if (Array.isArray(callbacks)) {
-        callbacks.forEach((cb) => {
-          cb(arg);
-        });
-        return true;
-      } else {
-        return false;
+      });
+    });
+  }
+  function drawElementList(ctx, data, opts) {
+    const { elements = [] } = data;
+    for (let i = 0; i < elements.length; i++) {
+      const elem = elements[i];
+      if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
+        continue;
       }
-    }
-    has(name) {
-      if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
-        if (Array.isArray(list) && list.length > 0) {
-          return true;
-        }
+      try {
+        drawElement(ctx, elem, opts);
+      } catch (err) {
+        console.error(err);
       }
-      return false;
     }
   }
-  function filterScript(html2) {
-    return html2.replace(/<script[\s\S]*?<\/script>/ig, "");
-  }
-  class Loader {
-    constructor(opts) {
-      this._currentLoadData = {};
-      this._currentUUIDQueue = [];
-      this._storageLoadData = {};
-      this._status = "free";
-      this._waitingLoadQueue = [];
-      this._opts = opts;
-      this._event = new LoaderEvent();
-      this._waitingLoadQueue = [];
-    }
-    load(data, changeResourceUUIDs) {
-      const [uuidQueue, loadData] = this._resetLoadData(
-        data,
-        changeResourceUUIDs
-      );
-      if (this._status === "free" || this._status === "complete") {
-        this._currentUUIDQueue = uuidQueue;
-        this._currentLoadData = loadData;
-        this._loadTask();
-      } else if (this._status === "loading" && uuidQueue.length > 0) {
-        this._waitingLoadQueue.push({
-          uuidQueue,
-          loadData
+  const supportElementTypes = ["image", "svg", "html"];
+  class Loader extends EventEmitter {
+    constructor() {
+      super();
+      this._loadFuncMap = {};
+      this._currentLoadItemMap = {};
+      this._storageLoadItemMap = {};
+      this._registerLoadFunc("image", async (elem, assets) => {
+        var _a;
+        const src = ((_a = assets[elem.detail.src]) == null ? void 0 : _a.value) || elem.detail.src;
+        const content = await loadImage(src);
+        return {
+          uuid: elem.uuid,
+          lastModified: Date.now(),
+          content
+        };
+      });
+      this._registerLoadFunc("html", async (elem, assets) => {
+        var _a;
+        const html2 = ((_a = assets[elem.detail.html]) == null ? void 0 : _a.value) || elem.detail.html;
+        const content = await loadHTML(html2, {
+          width: elem.detail.width || elem.w,
+          height: elem.detail.height || elem.h
         });
-      }
-    }
-    on(name, callback) {
-      this._event.on(name, callback);
-    }
-    off(name, callback) {
-      this._event.off(name, callback);
-    }
-    isComplete() {
-      return this._status === "complete";
+        return {
+          uuid: elem.uuid,
+          lastModified: Date.now(),
+          content
+        };
+      });
+      this._registerLoadFunc("svg", async (elem, assets) => {
+        var _a;
+        const svg2 = ((_a = assets[elem.detail.svg]) == null ? void 0 : _a.value) || elem.detail.svg;
+        const content = await loadSVG(svg2);
+        return {
+          uuid: elem.uuid,
+          lastModified: Date.now(),
+          content
+        };
+      });
     }
-    getContent(uuid) {
-      var _a;
-      if (((_a = this._storageLoadData[uuid]) == null ? void 0 : _a.status) === "loaded") {
-        return this._storageLoadData[uuid].content;
+    _registerLoadFunc(type, func) {
+      this._loadFuncMap[type] = func;
+    }
+    _getLoadElementSource(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;
       }
-      return null;
+      return source;
     }
-    // getPattern(
-    //   elem: DataElement<keyof DataElemDesc>,
-    //   opts?: {
-    //     forceUpdate: boolean
-    //   }
-    // ): null | CanvasPattern {
-    //   if (this._patternMap[elem.uuid] ) {
-    //     if (!(opts && opts.forceUpdate === true)) {
-    //       return this._patternMap[elem.uuid];
-    //     }
-    //   }
-    //   const item = this._currentLoadData[elem.uuid];
-    //   if (item?.status === 'loaded') {
-    //     const board = this._opts.board;
-    //     const tempCanvas = board.createCanvas();
-    //     const tempCtx = board.createContext(tempCanvas);
-    //     const image = this.getContent(elem.uuid);
-    //     tempCtx.drawImage(image, elem.x, elem.y, elem.w, elem.h);
-    //     const canvas = board.createCanvas();
-    //     const ctx = board.createContext(canvas);
-    //     const pattern = ctx.createPattern(tempCanvas, 'no-repeat');
-    //     if (pattern) this._patternMap[elem.uuid] = pattern;
-    //     return pattern;
-    //   }
-    //   return null;
-    // }
-    _resetLoadData(data, changeResourceUUIDs) {
-      const loadData = {};
-      const uuidQueue = [];
-      const storageLoadData = this._storageLoadData;
-      for (let i = data.elements.length - 1; i >= 0; i--) {
-        const elem = data.elements[i];
-        if (["image", "svg", "html"].includes(elem.type)) {
-          if (!storageLoadData[elem.uuid]) {
-            loadData[elem.uuid] = this._createEmptyLoadItem(elem);
-            uuidQueue.push(elem.uuid);
-          } else {
-            if (changeResourceUUIDs.includes(elem.uuid)) {
-              loadData[elem.uuid] = this._createEmptyLoadItem(elem);
-              uuidQueue.push(elem.uuid);
-            }
-          }
-        }
-      }
-      return [uuidQueue, loadData];
-    }
-    _createEmptyLoadItem(elem) {
-      let source = "";
-      const type = elem.type;
-      let elemW = elem.w;
-      let elemH = elem.h;
-      if (elem.type === "image") {
-        const _elem = elem;
-        source = _elem.desc.src || "";
-      } else if (elem.type === "svg") {
-        const _elem = elem;
-        source = _elem.desc.svg || "";
-      } else if (elem.type === "html") {
-        const _elem = elem;
-        source = filterScript(_elem.desc.html || "");
-        elemW = _elem.desc.width || elem.w;
-        elemH = _elem.desc.height || elem.h;
-      }
+    _createLoadItem(element) {
       return {
-        uuid: elem.uuid,
-        type,
+        element,
         status: "null",
         content: null,
-        source,
-        elemW,
-        elemH,
-        element: deepClone(elem)
+        error: null,
+        startTime: -1,
+        endTime: -1,
+        source: this._getLoadElementSource(element)
       };
     }
-    _loadTask() {
-      if (this._status === "loading") {
-        return;
-      }
-      this._status = "loading";
-      if (this._currentUUIDQueue.length === 0) {
-        if (this._waitingLoadQueue.length === 0) {
-          this._status = "complete";
-          this._event.trigger("complete", void 0);
-          return;
-        } else {
-          const waitingItem = this._waitingLoadQueue.shift();
-          if (waitingItem) {
-            const { uuidQueue, loadData } = waitingItem;
-            this._currentLoadData = loadData;
-            this._currentUUIDQueue = uuidQueue;
-          }
+    _emitLoad(item) {
+      const uuid = item.element.uuid;
+      const storageItem = this._storageLoadItemMap[uuid];
+      if (storageItem) {
+        if (storageItem.startTime < item.startTime) {
+          this._storageLoadItemMap[uuid] = item;
+          this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
         }
-      }
-      const { maxParallelNum } = this._opts;
-      const uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
-      uuids.forEach((url, i) => {
-      });
-      const loadUUIDList = [];
-      const _loadAction = () => {
-        if (loadUUIDList.length >= maxParallelNum) {
-          return false;
-        }
-        if (uuids.length === 0) {
-          return true;
-        }
-        for (let i = loadUUIDList.length; i < maxParallelNum; i++) {
-          const uuid = uuids.shift();
-          if (uuid === void 0) {
-            break;
-          }
-          loadUUIDList.push(uuid);
-          this._loadElementSource(this._currentLoadData[uuid]).then((image) => {
-            var _a, _b;
-            loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-            const status = _loadAction();
-            this._storageLoadData[uuid] = {
-              uuid,
-              type: this._currentLoadData[uuid].type,
-              status: "loaded",
-              content: image,
-              source: this._currentLoadData[uuid].source,
-              elemW: this._currentLoadData[uuid].elemW,
-              elemH: this._currentLoadData[uuid].elemH,
-              element: this._currentLoadData[uuid].element
-            };
-            if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-              this._status = "free";
-              this._loadTask();
-            }
-            this._event.trigger("load", {
-              uuid: (_a = this._storageLoadData[uuid]) == null ? void 0 : _a.uuid,
-              type: this._storageLoadData[uuid].type,
-              status: this._storageLoadData[uuid].status,
-              content: this._storageLoadData[uuid].content,
-              source: this._storageLoadData[uuid].source,
-              elemW: this._storageLoadData[uuid].elemW,
-              elemH: this._storageLoadData[uuid].elemH,
-              element: (_b = this._storageLoadData[uuid]) == null ? void 0 : _b.element
-            });
-          }).catch((err) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-            console.warn(err);
-            loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-            const status = _loadAction();
-            if (this._currentLoadData[uuid]) {
-              this._storageLoadData[uuid] = {
-                uuid,
-                type: (_a = this._currentLoadData[uuid]) == null ? void 0 : _a.type,
-                status: "fail",
-                content: null,
-                error: err,
-                source: (_b = this._currentLoadData[uuid]) == null ? void 0 : _b.source,
-                elemW: (_c = this._currentLoadData[uuid]) == null ? void 0 : _c.elemW,
-                elemH: (_d = this._currentLoadData[uuid]) == null ? void 0 : _d.elemH,
-                element: (_e = this._currentLoadData[uuid]) == null ? void 0 : _e.element
-              };
-            }
-            if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-              this._status = "free";
-              this._loadTask();
-            }
-            if (this._currentLoadData[uuid]) {
-              this._event.trigger("error", {
-                uuid,
-                type: (_f = this._storageLoadData[uuid]) == null ? void 0 : _f.type,
-                status: (_g = this._storageLoadData[uuid]) == null ? void 0 : _g.status,
-                content: (_h = this._storageLoadData[uuid]) == null ? void 0 : _h.content,
-                source: (_i = this._storageLoadData[uuid]) == null ? void 0 : _i.source,
-                elemW: (_j = this._storageLoadData[uuid]) == null ? void 0 : _j.elemW,
-                elemH: (_k = this._storageLoadData[uuid]) == null ? void 0 : _k.elemH,
-                element: (_l = this._storageLoadData[uuid]) == null ? void 0 : _l.element
-              });
-            }
-          });
-        }
-        return false;
-      };
-      _loadAction();
-    }
-    async _loadElementSource(params) {
-      if (params && params.type === "image") {
-        const image = await loadImage(params.source);
-        return image;
-      } else if (params && params.type === "svg") {
-        const image = await loadSVG(params.source);
-        return image;
-      } else if (params && params.type === "html") {
-        const image = await loadHTML(params.source, {
-          width: params.elemW,
-          height: params.elemH
-        });
-        return image;
-      }
-      throw Error("Element's source is not support!");
-    }
-  }
-  class RendererEvent {
-    constructor() {
-      this._listeners = /* @__PURE__ */ new Map();
-    }
-    on(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
-        callbacks == null ? void 0 : callbacks.push(callback);
-        this._listeners.set(eventKey, callbacks || []);
       } else {
-        this._listeners.set(eventKey, [callback]);
+        this._storageLoadItemMap[uuid] = item;
+        this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
       }
     }
-    off(eventKey, callback) {
-      if (this._listeners.has(eventKey)) {
-        const callbacks = this._listeners.get(eventKey);
-        if (Array.isArray(callbacks)) {
-          for (let i = 0; i < (callbacks == null ? void 0 : callbacks.length); i++) {
-            if (callbacks[i] === callback) {
-              callbacks.splice(i, 1);
-              break;
-            }
-          }
+    _emitError(item) {
+      const uuid = item.element.uuid;
+      const storageItem = this._storageLoadItemMap[uuid];
+      if (storageItem) {
+        if (storageItem.startTime < item.startTime) {
+          this._storageLoadItemMap[uuid] = item;
+          this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
         }
-        this._listeners.set(eventKey, callbacks || []);
+      } else {
+        this._storageLoadItemMap[uuid] = item;
+        this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
       }
     }
-    trigger(eventKey, arg) {
-      const callbacks = this._listeners.get(eventKey);
-      if (Array.isArray(callbacks)) {
-        callbacks.forEach((cb) => {
-          cb(arg);
+    _loadResource(element, assets) {
+      const item = this._createLoadItem(element);
+      this._currentLoadItemMap[element.uuid] = item;
+      const loadFunc = this._loadFuncMap[element.type];
+      if (typeof loadFunc === "function") {
+        item.startTime = Date.now();
+        loadFunc(element, assets).then((result) => {
+          item.content = result.content;
+          item.endTime = Date.now();
+          item.status = "load";
+          this._emitLoad(item);
+        }).catch((err) => {
+          console.warn(`Load element source "${item.source}" fail`, err, element);
+          item.endTime = Date.now();
+          item.status = "error";
+          item.error = err;
+          this._emitError(item);
         });
-        return true;
-      } else {
-        return false;
       }
     }
-    has(name) {
-      if (this._listeners.has(name)) {
-        const list = this._listeners.get(name);
-        if (Array.isArray(list) && list.length > 0) {
-          return true;
-        }
+    _isExistingErrorStorage(element) {
+      var _a;
+      const existItem = (_a = this._currentLoadItemMap) == null ? void 0 : _a[element == null ? void 0 : element.uuid];
+      if (existItem && existItem.status === "error" && existItem.source && existItem.source === this._getLoadElementSource(element)) {
+        return true;
       }
       return false;
     }
+    load(element, assets) {
+      if (this._isExistingErrorStorage(element)) {
+        return;
+      }
+      if (supportElementTypes.includes(element.type)) {
+        const elem = deepClone(element);
+        this._loadResource(elem, assets);
+      }
+    }
+    getContent(uuid) {
+      var _a, _b;
+      return ((_b = (_a = this._storageLoadItemMap) == null ? void 0 : _a[uuid]) == null ? void 0 : _b.content) || null;
+    }
   }
-  const { requestAnimationFrame } = window;
-  class Renderer extends RendererEvent {
+  class Renderer extends EventEmitter {
+    // private _draftContextTop: CanvasRenderingContext2D;
+    // private _draftContextMiddle: CanvasRenderingContext2D;
+    // private _draftContextBottom: CanvasRenderingContext2D;
     constructor(opts) {
       super();
-      this._queue = [];
-      this._ctx = null;
-      this._status = "null";
+      this._loader = new Loader();
       this._opts = opts;
-      this._loader = new Loader({
-        maxParallelNum: 6
-      });
-      this._loader.on("load", (res) => {
-        this._drawFrame();
-        this.trigger("load", { element: res.element });
+      this._init();
+    }
+    _init() {
+      const { _loader: loader } = this;
+      loader.on("load", (e) => {
+        this.trigger("load", e);
       });
-      this._loader.on("error", (res) => {
-        this.trigger("error", { element: res.element, error: res.error });
+      loader.on("error", () => {
       });
-      this._loader.on("complete", () => {
-        this.trigger("loadComplete", { t: Date.now() });
+    }
+    updateOptions(opts) {
+      this._opts = opts;
+    }
+    drawData(data, opts) {
+      const { _loader: loader } = this;
+      const { calculator } = this._opts;
+      const { viewContext } = this._opts.viewContent;
+      viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
+      const parentElementSize = {
+        x: 0,
+        y: 0,
+        w: opts.viewSizeInfo.width,
+        h: opts.viewSizeInfo.height
+      };
+      drawElementList(viewContext, data, {
+        loader,
+        calculator,
+        parentElementSize,
+        elementAssets: data.assets,
+        ...opts
       });
     }
-    render(target, originData, opts) {
-      const { changeResourceUUIDs = [] } = opts || {};
-      this._status = "free";
-      const data = deepClone(originData);
-      if (Array.isArray(data.elements)) {
-        data.elements.forEach((elem) => {
-          if (!(typeof elem.uuid === "string" && elem.uuid)) {
-            elem.uuid = createUUID();
-          }
-        });
-      }
-      if (!this._ctx) {
-        if (this._opts && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
-          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
-          const canvas = target;
-          canvas.width = width * devicePixelRatio;
-          canvas.height = height * devicePixelRatio;
-          const ctx2d = canvas.getContext("2d");
-          this._ctx = new Context(ctx2d, {
+    scale(num) {
+      const { sharer } = this._opts;
+      const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
+      if (data) {
+        this.drawData(data, {
+          viewScaleInfo: {
+            scale: num,
+            offsetTop,
+            offsetBottom,
+            offsetLeft,
+            offsetRight
+          },
+          viewSizeInfo: {
             width,
             height,
-            contextWidth: contextWidth || width,
-            contextHeight: contextHeight || height,
+            contextHeight,
+            contextWidth,
             devicePixelRatio
-          });
-        } else if (target) {
-          this._ctx = target;
-        }
-      }
-      if ([
-        "freeze"
-        /* FREEZE */
-      ].includes(this._status)) {
-        return;
-      }
-      const _data = deepClone({ data });
-      this._queue.push(_data);
-      this._drawFrame();
-      this._loader.load(data, changeResourceUUIDs || []);
-    }
-    getContext() {
-      return this._ctx;
-    }
-    thaw() {
-      this._status = "free";
-    }
-    _freeze() {
-      this._status = "freeze";
-    }
-    _drawFrame() {
-      if (this._status === "freeze") {
-        return;
-      }
-      requestAnimationFrame(() => {
-        if (this._status === "freeze") {
-          return;
-        }
-        const ctx = this._ctx;
-        let item = this._queue[0];
-        let isLastFrame = false;
-        if (this._queue.length > 1) {
-          item = this._queue.shift();
-        } else {
-          isLastFrame = true;
-        }
-        if (this._loader.isComplete() !== true) {
-          this._drawFrame();
-          if (item && ctx) {
-            drawContext(ctx, item.data, this._loader);
-          }
-        } else if (item && ctx) {
-          drawContext(ctx, item.data, this._loader);
-          this._retainQueueOneItem();
-          if (!isLastFrame) {
-            this._drawFrame();
-          } else {
-            this._status = "free";
           }
-        } else {
-          this._status = "free";
-        }
-        this.trigger("drawFrame", { t: Date.now() });
-        if (this._loader.isComplete() === true && this._queue.length === 1 && this._status === "free") {
-          if (ctx && this._queue[0] && this._queue[0].data) {
-            drawContext(ctx, this._queue[0].data, this._loader);
-          }
-          this.trigger("drawFrameComplete", { t: Date.now() });
-          this._freeze();
-        }
-      });
-    }
-    _retainQueueOneItem() {
-      if (this._queue.length <= 1) {
-        return;
+        });
       }
-      const lastOne = deepClone(this._queue[this._queue.length - 1]);
-      this._queue = [lastOne];
     }
+    // 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);
+    // }
   }
-  return Renderer;
-}();
+  exports.Renderer = Renderer;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  return exports;
+}({});