@idraw/renderer 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/esm/draw/box.d.ts

@@ -3,12 +3,12 @@ export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementTyp
     originElem: Element<ElementType>;
     calcElemSize: ElementSize;
     pattern?: string | CanvasPattern | null;
-    renderContent: Function;
+    renderContent: () => void;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;
 export declare function drawBoxShadow(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-    renderContent: Function;
+    renderContent: () => void;
 }): void;

package/dist/esm/draw/box.js

@@ -34,8 +34,8 @@ function drawClipPath(ctx, viewElem, opts) {
         const scaleH = h / originH;
         const viewOriginX = originX * scaleW;
         const viewOriginY = originY * scaleH;
-        let internalX = x - viewOriginX;
-        let internalY = y - viewOriginY;
+        const internalX = x - viewOriginX;
+        const internalY = y - viewOriginY;
         ctx.save();
         ctx.translate(internalX, internalY);
         ctx.scale(totalScale * scaleW, totalScale * scaleH);
@@ -56,8 +56,9 @@ function drawClipPath(ctx, viewElem, opts) {
 function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
-    let transform = [];
-    let { borderRadius, borderWidth } = viewElem.detail;
+    const transform = [];
+    let { borderRadius } = viewElem.detail;
+    const { borderWidth } = viewElem.detail;
     if (typeof borderWidth !== 'number') {
         borderRadius = 0;
     }

package/dist/esm/draw/circle.js

@@ -5,7 +5,7 @@ export function drawCircle(ctx, elem, opts) {
     const { detail, angle } = elem;
     const { background = '#000000', borderColor = '#000000', borderWidth = 0 } = detail;
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {

package/dist/esm/draw/elements.js

@@ -2,14 +2,17 @@ import { getDefaultElementDetailConfig } from '@idraw/util';
 import { drawElement } from './group';
 const defaultDetail = getDefaultElementDetailConfig();
 export function drawElementList(ctx, data, opts) {
+    var _a;
     const { elements = [] } = data;
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         const elem = Object.assign(Object.assign({}, element), {
             detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
         });
-        if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
-            continue;
+        if (opts.forceDrawAll !== true) {
+            if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                continue;
+            }
         }
         try {
             drawElement(ctx, elem, opts);

package/dist/esm/draw/group.js

@@ -58,7 +58,7 @@ export function drawElement(ctx, elem, opts) {
 }
 export function drawGroup(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {
@@ -104,8 +104,10 @@ export function drawGroup(ctx, elem, opts) {
                                     x: newParentSize.x + child.x,
                                     y: newParentSize.y + child.y
                                 });
-                                if (!calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                                    continue;
+                                if (opts.forceDrawAll !== true) {
+                                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                                        continue;
+                                    }
                                 }
                                 try {
                                     drawElement(ctx, child, Object.assign({}, opts));

package/dist/esm/draw/html.js

@@ -2,7 +2,7 @@ import { rotateElement } from '@idraw/util';
 export function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         if (!content) {
             opts.loader.load(elem, opts.elementAssets || {});

package/dist/esm/draw/image.js

@@ -3,7 +3,7 @@ import { drawBox, drawBoxShadow } from './box';
 export function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {

package/dist/esm/draw/path.js

@@ -4,7 +4,7 @@ export function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const scaleW = w / originW;
     const scaleH = h / originH;
     const viewOriginX = originX * scaleW;

package/dist/esm/draw/rect.js

@@ -2,7 +2,7 @@ import { rotateElement } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 export function drawRect(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    let { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {

package/dist/esm/draw/svg.js

@@ -2,7 +2,7 @@ import { rotateElement } from '@idraw/util';
 export function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         if (!content) {
             opts.loader.load(elem, opts.elementAssets || {});

package/dist/esm/draw/text.js

@@ -4,7 +4,7 @@ import { drawBox } from './box';
 const detailConfig = getDefaultElementDetailConfig();
 export function drawText(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
-    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBox(ctx, viewElem, {

package/dist/esm/index.d.ts

@@ -1,10 +1,8 @@
 import { EventEmitter } from '@idraw/util';
 import type { Data, BoardRenderer, RendererOptions, RendererEventMap, RendererDrawOptions } from '@idraw/types';
 export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
-    private _opts;
-    private _loader;
+    #private;
     constructor(opts: RendererOptions);
-    private _init;
     updateOptions(opts: RendererOptions): void;
     drawData(data: Data, opts: RendererDrawOptions): void;
     scale(num: number): void;

package/dist/esm/index.js

@@ -1,28 +1,34 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_init;
 import { EventEmitter } from '@idraw/util';
 import { drawElementList } from './draw/index';
 import { Loader } from './loader';
 export class Renderer extends EventEmitter {
     constructor(opts) {
         super();
-        this._loader = new Loader();
-        this._opts = opts;
-        this._init();
-    }
-    _init() {
-        const { _loader: loader } = this;
-        loader.on('load', (e) => {
-            this.trigger('load', e);
-        });
-        loader.on('error', () => {
-        });
+        _Renderer_instances.add(this);
+        _Renderer_opts.set(this, void 0);
+        _Renderer_loader.set(this, new Loader());
+        __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+        __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
     updateOptions(opts) {
-        this._opts = opts;
+        __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
     }
     drawData(data, opts) {
-        const { _loader: loader } = this;
-        const { calculator } = this._opts;
-        const { viewContext } = this._opts.viewContent;
+        const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
+        const { calculator } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+        const viewContext = __classPrivateFieldGet(this, _Renderer_opts, "f").viewContext;
         viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
         const parentElementSize = {
             x: 0,
@@ -35,7 +41,10 @@ export class Renderer extends EventEmitter {
             parentElementSize, elementAssets: data.assets }, opts));
     }
     scale(num) {
-        const { sharer } = this._opts;
+        const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+        if (!sharer) {
+            return;
+        }
         const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
         if (data) {
             this.drawData(data, {
@@ -57,3 +66,11 @@ export class Renderer extends EventEmitter {
         }
     }
 }
+_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
+    const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
+    loader.on('load', (e) => {
+        this.trigger('load', e);
+    });
+    loader.on('error', () => {
+    });
+};

package/dist/index.global.js

@@ -1,5 +1,28 @@
 var iDrawRenderer = function(exports) {
-  "use strict";
+  "use strict";var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+
+  var _opts, _loader, _init, init_fn;
   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));
   }
@@ -422,7 +445,8 @@ var iDrawRenderer = function(exports) {
   function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius: borderRadius2, boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
+    let { borderRadius: borderRadius2 } = viewElem.detail;
+    const { boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
     if (typeof borderWidth2 !== "number") {
       borderRadius2 = 0;
     }
@@ -543,8 +567,8 @@ var iDrawRenderer = function(exports) {
       const scaleH = h2 / originH;
       const viewOriginX = originX * scaleW;
       const viewOriginY = originY * scaleH;
-      let internalX = x2 - viewOriginX;
-      let internalY = y2 - viewOriginY;
+      const internalX = x2 - viewOriginX;
+      const internalY = y2 - viewOriginY;
       ctx.save();
       ctx.translate(internalX, internalY);
       ctx.scale(totalScale * scaleW, totalScale * scaleH);
@@ -564,7 +588,8 @@ var iDrawRenderer = function(exports) {
   function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
-    let transform = [];
+    const transform = [];
+    viewElem.detail;
     viewElem.detail;
     if (viewElem.detail.background || pattern) {
       const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
@@ -777,7 +802,7 @@ var iDrawRenderer = function(exports) {
     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 { x: x2, y: y2, w: w2, h: h2 } = (calculator == null ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
     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, {
@@ -821,7 +846,7 @@ var iDrawRenderer = function(exports) {
   }
   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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     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, {
@@ -843,7 +868,7 @@ var iDrawRenderer = function(exports) {
   function drawImage(ctx, elem, opts) {
     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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     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, {
@@ -890,7 +915,7 @@ var iDrawRenderer = function(exports) {
   function drawSVG(ctx, elem, opts) {
     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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
         opts.loader.load(elem, opts.elementAssets || {});
@@ -906,7 +931,7 @@ var iDrawRenderer = function(exports) {
   function drawHTML(ctx, elem, opts) {
     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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       if (!content) {
         opts.loader.load(elem, opts.elementAssets || {});
@@ -922,7 +947,7 @@ var iDrawRenderer = function(exports) {
   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);
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     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, {
@@ -1028,7 +1053,7 @@ var iDrawRenderer = function(exports) {
     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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
     const scaleW = w2 / originW;
     const scaleH = h2 / originH;
     const viewOriginX = originX * scaleW;
@@ -1127,7 +1152,7 @@ var iDrawRenderer = function(exports) {
   }
   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 { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = (calculator == null ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
     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, {
@@ -1176,8 +1201,10 @@ var iDrawRenderer = function(exports) {
                       y: newParentSize.y + child.y
                     }
                   };
-                  if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                    continue;
+                  if (opts.forceDrawAll !== true) {
+                    if (!(calculator2 == null ? void 0 : calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                      continue;
+                    }
                   }
                   try {
                     drawElement(ctx, child, { ...opts });
@@ -1198,6 +1225,7 @@ var iDrawRenderer = function(exports) {
   }
   const defaultDetail = getDefaultElementDetailConfig();
   function drawElementList(ctx, data, opts) {
+    var _a;
     const { elements = [] } = data;
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
@@ -1210,8 +1238,10 @@ var iDrawRenderer = function(exports) {
           }
         }
       };
-      if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
-        continue;
+      if (opts.forceDrawAll !== true) {
+        if (!((_a = opts.calculator) == null ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+          continue;
+        }
       }
       try {
         drawElement(ctx, elem, opts);
@@ -1381,25 +1411,19 @@ var iDrawRenderer = function(exports) {
     // private _draftContextBottom: CanvasRenderingContext2D;
     constructor(opts) {
       super();
-      this._loader = new Loader();
-      this._opts = opts;
-      this._init();
-    }
-    _init() {
-      const { _loader: loader } = this;
-      loader.on("load", (e) => {
-        this.trigger("load", e);
-      });
-      loader.on("error", () => {
-      });
+      __privateAdd(this, _init);
+      __privateAdd(this, _opts, void 0);
+      __privateAdd(this, _loader, new Loader());
+      __privateSet(this, _opts, opts);
+      __privateMethod(this, _init, init_fn).call(this);
     }
     updateOptions(opts) {
-      this._opts = opts;
+      __privateSet(this, _opts, opts);
     }
     drawData(data, opts) {
-      const { _loader: loader } = this;
-      const { calculator } = this._opts;
-      const { viewContext } = this._opts.viewContent;
+      const loader = __privateGet(this, _loader);
+      const { calculator } = __privateGet(this, _opts);
+      const viewContext = __privateGet(this, _opts).viewContext;
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       const parentElementSize = {
         x: 0,
@@ -1416,7 +1440,10 @@ var iDrawRenderer = function(exports) {
       });
     }
     scale(num) {
-      const { sharer } = this._opts;
+      const { sharer } = __privateGet(this, _opts);
+      if (!sharer) {
+        return;
+      }
       const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
       if (data) {
         this.drawData(data, {
@@ -1438,6 +1465,17 @@ var iDrawRenderer = function(exports) {
       }
     }
   }
+  _opts = new WeakMap();
+  _loader = new WeakMap();
+  _init = new WeakSet();
+  init_fn = function() {
+    const loader = __privateGet(this, _loader);
+    loader.on("load", (e) => {
+      this.trigger("load", e);
+    });
+    loader.on("error", () => {
+    });
+  };
   exports.Renderer = Renderer;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;

package/dist/index.global.min.js

@@ -1 +1 @@
-var iDrawRenderer=function(e){"use strict";function t(e){return"string"==typeof e&&(/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||/^[a-z]{1,}$/i.test(e))}function n(e,t){if(1===t)return e;let n=1;const o=/^\#[0-9a-f]{6,6}$/i;let i=e;if(o.test(e)?n=parseInt(e.substring(5,7).replace(/^\#/,"0x")):/^\#[0-9a-f]{8,8}$/i.test(e)&&(n=parseInt(e.substring(7,9).replace(/^\#/,"0x")),i=e.substring(0,7)),n*=t,o.test(i)&&n>0&&n<1){const e=Math.max(0,Math.min(255,Math.ceil(256*n)));i=`${i.toUpperCase()}${e.toString(16).toUpperCase()}`}return i}function o(){function e(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${e()}${e()}-${e()}-${e()}-${e()}-${e()}${e()}${e()}`}function i(e){let t=0;for(let n=0;n<e.length;n++)t+=e.charCodeAt(n)*e.charCodeAt(n)*n*n;return t.toString(16).substring(0,4)}function a(e){const t=e.length,n=Math.floor(t/2),o=e.substring(0,4).padEnd(4,"0"),a=e.substring(0,4).padEnd(4,"0");return`@assets/${i(t.toString(16).padEnd(4,o))}${i(e.substring(n-4,n).padEnd(4,o)).padEnd(4,"f")}-${i(e.substring(n-8,n-4).padEnd(4,o)).padEnd(4,"f")}-${i(e.substring(n-12,n-8).padEnd(4,o)).padEnd(4,"f")}-${i(e.substring(n-16,n-12).padEnd(4,a)).padEnd(4,"f")}-${i(e.substring(n,n+4).padEnd(4,a)).padEnd(4,"f")}${i(e.substring(n+4,n+8).padEnd(4,a)).padEnd(4,"f")}${i(a.padEnd(4,o).padEnd(4,a))}`}function r(e){return(Object.prototype.toString.call(e)||"").replace(/(\[object|\])/gi,"").trim()}const l={type(e,t){const n=r(e);return!0===t?n.toLocaleLowerCase():n},array:e=>"Array"===r(e),json:e=>"Object"===r(e),function:e=>"Function"===r(e),asyncFunction:e=>"AsyncFunction"===r(e),string:e=>"String"===r(e),number:e=>"Number"===r(e),undefined:e=>"Undefined"===r(e),null:e=>"Null"===r(e),promise:e=>"Promise"===r(e)};var s=function(e,t,n,o){return new(n||(n=Promise))((function(i,a){function r(e){try{s(o.next(e))}catch(e){a(e)}}function l(e){try{s(o.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(r,l)}s((o=o.apply(e,t||[])).next())}))};const{Image:c}=window;function d(e){return new Promise(((t,n)=>{const o=new c;o.crossOrigin="anonymous",o.onload=function(){t(o)},o.onabort=n,o.onerror=n,o.src=e}))}function h(e){return s(this,void 0,void 0,(function*(){const t=yield function(e){return new Promise(((t,n)=>{const o=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),i=new FileReader;i.readAsDataURL(o),i.onload=function(e){var n;const o=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(o)},i.onerror=function(e){n(e)}}))}(e);return yield d(t)}))}function u(e,t){return s(this,void 0,void 0,(function*(){e=e.replace(/\&/gi,"&amp;");const n=yield function(e,t){const{width:n,height:o}=t;return new Promise(((t,i)=>{const a=new Blob([`\n    <svg \n      xmlns="http://www.w3.org/2000/svg" \n      width="${n||""}" \n      height = "${o||""}">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ${e}\n        </div>\n      </foreignObject>\n    </svg>\n    `],{type:"image/svg+xml;charset=utf-8"}),r=new FileReader;r.readAsDataURL(a),r.onload=function(e){var n;const o=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(o)},r.onerror=function(e){i(e)}}))}(e,t);return yield d(n)}))}function f(e){return"number"==typeof e&&(e>0||e<=0)}function g(e){return"number"==typeof e&&e>=0}function w(e){return"string"==typeof e&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${e}`)}function v(e){return"string"==typeof e&&/^(data:image\/)/.test(`${e}`)}const y={x:function(e){return f(e)},y:function(e){return f(e)},w:g,h:function(e){return"number"==typeof e&&e>=0},angle:function(e){return"number"==typeof e&&e>=-360&&e<=360},number:f,numberStr:function(e){return/^(-?\d+(?:\.\d+)?)$/.test(`${e}`)},borderWidth:function(e){return g(e)},borderRadius:function(e){return f(e)&&e>=0},color:function(e){return t(e)},imageSrc:function(e){return v(e)||w(e)},imageURL:w,imageBase64:v,svg:function(e){return"string"==typeof e&&/^(<svg[\s]{1,}|<svg>)/i.test(`${e}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${e}`.trim())},html:function(e){let t=!1;if("string"==typeof e){let n=document.createElement("div");n.innerHTML=e,n.children.length>0&&(t=!0),n=null}return t},text:function(e){return"string"==typeof e},fontSize:function(e){return f(e)&&e>0},lineHeight:function(e){return f(e)&&e>0},textAlign:function(e){return["center","left","right"].includes(e)},fontFamily:function(e){return"string"==typeof e&&e.length>0},fontWeight:function(e){return["bold"].includes(e)},strokeWidth:function(e){return f(e)&&e>0}};class m{constructor(){this._listeners=new Map}on(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e)||[];null==n||n.push(t),this._listeners.set(e,n)}else this._listeners.set(e,[t])}off(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e);if(Array.isArray(n))for(let e=0;e<(null==n?void 0:n.length);e++)if(n[e]===t){n.splice(e,1);break}this._listeners.set(e,n||[])}}trigger(e,t){const n=this._listeners.get(e);return!!Array.isArray(n)&&(n.forEach((e=>{e(t)})),!0)}has(e){if(this._listeners.has(e)){const t=this._listeners.get(e);if(Array.isArray(t)&&t.length>0)return!0}return!1}}function p(e,t,n,o){const i=function(e){return e/180*Math.PI}(t||0);n&&(i>0||i<0)&&(e.translate(n.x,n.y),e.rotate(i),e.translate(-n.x,-n.y)),o(e),n&&(i>0||i<0)&&(e.translate(n.x,n.y),e.rotate(-i),e.translate(-n.x,-n.y))}function x(e,t,n){const o={x:(i=t).x+i.w/2,y:i.y+i.h/2};var i;p(e,t.angle||0,o,(()=>{n(e)}))}function S(e){let t="";return e.forEach((e=>{t+=e.type+e.params.join(" ")})),t}const b={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,overflow:"hidden"};function I(e,t){const{viewScaleInfo:n}=t,{scale:o}=n;let{borderRadius:i,boxSizing:a=b.boxSizing,borderWidth:r}=e.detail;"number"!=typeof r&&(i=0);let{x:l,y:s,w:c,h:d}=e,h=[0,0,0,0];if("number"==typeof i){const e=i*o;h=[e,e,e,e]}else Array.isArray(i)&&4===(null==i?void 0:i.length)&&(h=[i[0]*o,i[1]*o,i[2]*o,i[3]*o]);let u=0;return"number"==typeof r&&(u=(r||0)*o),"border-box"===a?(l=e.x+u/2,s=e.y+u/2,c=e.w-u,d=e.h-u):"content-box"===a?(l=e.x-u/2,s=e.y-u/2,c=e.w+u,d=e.h+u):(l=e.x,s=e.y,c=e.w,d=e.h),c=Math.max(c,1),d=Math.max(d,1),h=h.map((e=>Math.min(e,c/2,d/2))),{x:l,y:s,w:c,h:d,radiusList:h}}function z(e,t,o){if("string"==typeof t)return t;const{viewElementSize:i,viewScaleInfo:a,opacity:r=1}=o,{x:l,y:s}=i,{scale:c}=a;if("linear-gradient"===(null==t?void 0:t.type)){const{start:o,end:i,stops:a}=t,d={x:l+o.x*c,y:s+o.y*c},h={x:l+i.x*c,y:s+i.y*c},u=e.createLinearGradient(d.x,d.y,h.x,h.y);return a.forEach((e=>{u.addColorStop(e.offset,n(e.color,r))})),u}if("radial-gradient"===(null==t?void 0:t.type)){const{inner:o,outer:i,stops:a}=t,d={x:l+o.x*c,y:s+o.y*c,radius:o.radius*c},h={x:l+i.x*c,y:s+i.y*c,radius:i.radius*c},u=e.createRadialGradient(d.x,d.y,d.radius,h.x,h.y,h.radius);return a.forEach((e=>{u.addColorStop(e.offset,n(e.color,r))})),u}return"#000000"}const A={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,overflow:"hidden"};function T(e,n,o){const{pattern:i,renderContent:a,originElem:r,calcElemSize:s,viewScaleInfo:c,viewSizeInfo:d}=o||{};!function(e,t,n){const{renderContent:o,originElem:i,calcElemSize:a,viewScaleInfo:r,viewSizeInfo:l}=n,s=r.scale*l.devicePixelRatio,{clipPath:c}=(null==i?void 0:i.detail)||{};if(c&&a&&c.commands){const{x:n,y:i,w:r,h:l}=a,{originW:d,originH:h,originX:u,originY:f}=c,g=r/d,w=l/h;let v=n-u*g,y=i-f*w;e.save(),e.translate(v,y),e.scale(s*g,s*w);const m=S(c.commands||[]),p=new Path2D(m);e.clip(p),e.translate(0-v,0-y),e.setTransform(1,0,0,1,0,0),x(e,{...t},(()=>{null==o||o()})),e.restore()}else null==o||o()}(e,n,{originElem:r,calcElemSize:s,viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{var o,r;void 0!==(null==(o=null==n?void 0:n.detail)?void 0:o.opacity)&&(null==(r=null==n?void 0:n.detail)?void 0:r.opacity)>=0?e.globalAlpha=n.detail.opacity:e.globalAlpha=1,function(e,t,n){var o,i;const{pattern:a,viewScaleInfo:r,viewSizeInfo:s}=n;let c=[];if(t.detail,t.detail.background||a){const{x:n,y:d,w:h,h:u,radiusList:f}=I(t,{viewScaleInfo:r,viewSizeInfo:s});if(e.beginPath(),e.moveTo(n+f[0],d),e.arcTo(n+h,d,n+h,d+u,f[1]),e.arcTo(n+h,d+u,n,d+u,f[2]),e.arcTo(n,d+u,n,d,f[3]),e.arcTo(n,d,n+h,d,f[0]),e.closePath(),"string"==typeof a)e.fillStyle=a;else if(["CanvasPattern"].includes(l.type(a)))e.fillStyle=a;else if("string"==typeof t.detail.background)e.fillStyle=t.detail.background;else if("linear-gradient"===(null==(o=t.detail.background)?void 0:o.type)){const o=z(e,t.detail.background,{viewElementSize:{x:n,y:d,w:h,h:u},viewScaleInfo:r,opacity:e.globalAlpha});e.fillStyle=o}else if("radial-gradient"===(null==(i=t.detail.background)?void 0:i.type)){const o=z(e,t.detail.background,{viewElementSize:{x:n,y:d,w:h,h:u},viewScaleInfo:r,opacity:e.globalAlpha});if(e.fillStyle=o,c&&c.length>0)for(let t=0;t<(null==c?void 0:c.length);t++){const o=c[t];"translate"===o.method?e.translate(o.args[0]+n,o.args[1]+d):"rotate"===o.method?e.rotate(...o.args):"scale"===o.method&&e.scale(...o.args)}}e.fill(),c&&c.length>0&&e.setTransform(1,0,0,1,0,0)}}(e,n,{pattern:i,viewScaleInfo:c,viewSizeInfo:d}),null==a||a(),function(e,n,o){var i,a;if(0===n.detail.borderWidth)return;if(!t(n.detail.borderColor))return;void 0!==(null==(i=null==n?void 0:n.detail)?void 0:i.opacity)&&(null==(a=null==n?void 0:n.detail)?void 0:a.opacity)>=0?e.globalAlpha=n.detail.opacity:e.globalAlpha=1;const{viewScaleInfo:r}=o,{scale:l}=r;let s=A.borderColor;!0===t(n.detail.borderColor)&&(s=n.detail.borderColor);const{borderWidth:c,borderRadius:d,borderDash:h,boxSizing:u=A.boxSizing}=n.detail;let f=0;"number"==typeof c&&(f=c||1);f*=l;let g=[0,0,0,0];if("number"==typeof d){const e=d*l;g=[e,e,e,e]}else Array.isArray(d)&&4===(null==d?void 0:d.length)&&(g=[d[0]*l,d[1]*l,d[2]*l,d[3]*l]);e.strokeStyle=s;let w=[];Array.isArray(h)&&h.length>0&&(w=h.map((e=>Math.ceil(e*l))));let v=0,y=0,m=0,p=0;Array.isArray(c)&&(v=(c[0]||0)*l,y=(c[1]||0)*l,m=(c[2]||0)*l,p=(c[3]||0)*l);if(p||y||v||m){e.lineCap="butt";let{x:t,y:o,w:i,h:a}=n;"border-box"===u?(t+=p/2,o+=v/2,i=i-p/2-y/2,a=a-v/2-m/2):"content-box"===u?(t-=p/2,o-=v/2,i=i+p/2+y/2,a=a+v/2+m/2):(t=n.x,o=n.y,i=n.w,a=n.h),v&&(e.beginPath(),e.lineWidth=v,e.moveTo(t-p/2,o),e.lineTo(t+i+y/2,o),e.closePath(),e.stroke()),y&&(e.beginPath(),e.lineWidth=y,e.moveTo(t+i,o-v/2),e.lineTo(t+i,o+a+m/2),e.closePath(),e.stroke()),m&&(e.beginPath(),e.lineWidth=m,e.moveTo(t-p/2,o+a),e.lineTo(t+i+y/2,o+a),e.closePath(),e.stroke()),p&&(e.beginPath(),e.lineWidth=p,e.moveTo(t,o-v/2),e.lineTo(t,o+a+m/2),e.closePath(),e.stroke())}else{let{x:t,y:o,w:i,h:a}=n;"border-box"===u?(t=n.x+f/2,o=n.y+f/2,i=n.w-f,a=n.h-f):"content-box"===u?(t=n.x-f/2,o=n.y-f/2,i=n.w+f,a=n.h+f):(t=n.x,o=n.y,i=n.w,a=n.h),w.length>0?e.lineCap="butt":e.lineCap="square",i=Math.max(i,1),a=Math.max(a,1),g=g.map((e=>Math.min(e,i/2,a/2))),e.setLineDash(w),e.lineWidth=f,e.beginPath(),e.moveTo(t+g[0],o),e.arcTo(t+i,o,t+i,o+a,g[1]),e.arcTo(t+i,o+a,t,o+a,g[2]),e.arcTo(t,o+a,t,o,g[3]),e.arcTo(t,o,t+i,o,g[0]),e.closePath(),e.stroke(),e.globalAlpha=1}e.setLineDash([])}(e,n,{viewScaleInfo:c,viewSizeInfo:d}),e.globalAlpha=1}})}function E(e,t,n){const{detail:o}=t,{viewScaleInfo:i,renderContent:a}=n,{shadowColor:r,shadowOffsetX:l,shadowOffsetY:s,shadowBlur:c}=o;y.number(c)?(e.save(),e.shadowColor=r||A.shadowColor,e.shadowOffsetX=(l||0)*i.scale,e.shadowOffsetY=(s||0)*i.scale,e.shadowBlur=(c||0)*i.scale,a(),e.restore()):a()}const C={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,overflow:"hidden"};function _(e,n,o){var i;if(!0!==(null==(i=null==n?void 0:n.operations)?void 0:i.invisible))try{switch(n.type){case"rect":!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:a}=n;let{x:r,y:l,w:s,h:c,angle:d}=o.elementSize(t,i,a);const h={...t,x:r,y:l,w:s,h:c,angle:d};x(e,{x:r,y:l,w:s,h:c,angle:d},(()=>{E(e,h,{viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{T(e,h,{originElem:t,calcElemSize:{x:r,y:l,w:s,h:c,angle:d},viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{}})}})}))}(e,n,o);break;case"circle":!function(e,t,n){const{detail:o,angle:i}=t,{background:a="#000000",borderColor:r="#000000",borderWidth:l=0}=o,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:u,w:f,h:g}=s.elementSize({x:t.x,y:t.y,w:t.w,h:t.h},c,d),w={...t,x:h,y:u,w:f,h:g,angle:i};x(e,{x:h,y:u,w:f,h:g,angle:i},(()=>{E(e,w,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{var n,o;const i=f/2,s=g/2,d=h+i,w=u+s;if(void 0!==(null==(n=null==t?void 0:t.detail)?void 0:n.opacity)&&(null==(o=null==t?void 0:t.detail)?void 0:o.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1,"number"==typeof l&&l>0){const t=l/2+i,n=l/2+s;e.beginPath(),e.strokeStyle=r,e.lineWidth=l,e.circle(d,w,t,n,0,0,2*Math.PI),e.closePath(),e.stroke()}e.beginPath();const v=z(e,a,{viewElementSize:{x:h,y:u,w:f,h:g},viewScaleInfo:c,opacity:e.globalAlpha});e.fillStyle=v,e.circle(d,w,i,s,0,0,2*Math.PI),e.closePath(),e.fill(),e.globalAlpha=1}})}))}(e,n,o);break;case"text":!function(e,n,o){const{calculator:i,viewScaleInfo:a,viewSizeInfo:r}=o,{x:l,y:s,w:c,h:d,angle:h}=i.elementSize(n,a,r),u={...n,x:l,y:s,w:c,h:d,angle:h};x(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{T(e,u,{originElem:n,calcElemSize:{x:l,y:s,w:c,h:d,angle:h},viewScaleInfo:a,viewSizeInfo:r,renderContent:()=>{const o={...C,...n.detail},i=(o.fontSize||C.fontSize)*a.scale,r=o.lineHeight?o.lineHeight*a.scale:i;e.fillStyle=n.detail.color||C.color,e.textBaseline="top",e.$setFont({fontWeight:o.fontWeight,fontSize:i,fontFamily:o.fontFamily});const h=o.text.replace(/\r\n/gi,"\n"),u=r,f=h.split("\n"),g=[];let w=0;f.forEach(((t,n)=>{let o="";if(t.length>0){for(let i=0;i<t.length&&(e.measureText(o+(t[i]||"")).width<e.$doPixelRatio(c)?o+=t[i]||"":(g.push({text:o,width:e.$undoPixelRatio(e.measureText(o).width)}),o=t[i]||"",w++),!((w+1)*u>d));i++)if(t.length-1===i&&(w+1)*u<d){g.push({text:o,width:e.$undoPixelRatio(e.measureText(o).width)}),n<f.length-1&&w++;break}}else g.push({text:"",width:0})}));let v=0;g.length*u<d&&("top"===n.detail.verticalAlign?v=0:"bottom"===n.detail.verticalAlign?v+=d-g.length*u:v+=(d-g.length*u)/2);{const n=s+v;void 0!==o.textShadowColor&&t(o.textShadowColor)&&(e.shadowColor=o.textShadowColor),void 0!==o.textShadowOffsetX&&y.number(o.textShadowOffsetX)&&(e.shadowOffsetX=o.textShadowOffsetX),void 0!==o.textShadowOffsetY&&y.number(o.textShadowOffsetY)&&(e.shadowOffsetY=o.textShadowOffsetY),void 0!==o.textShadowBlur&&y.number(o.textShadowBlur)&&(e.shadowBlur=o.textShadowBlur),g.forEach(((t,i)=>{let a=l;"center"===o.textAlign?a=l+(c-t.width)/2:"right"===o.textAlign&&(a=l+(c-t.width)),e.fillText(t.text,a,n+u*i)}))}}})}))}(e,n,o);break;case"image":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:a,viewSizeInfo:r}=n,{x:l,y:s,w:c,h:d,angle:h}=i.elementSize(t,a,r),u={...t,x:l,y:s,w:c,h:d,angle:h};x(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{E(e,u,{viewScaleInfo:a,viewSizeInfo:r,renderContent:()=>{T(e,u,{originElem:t,calcElemSize:{x:l,y:s,w:c,h:d,angle:h},viewScaleInfo:a,viewSizeInfo:r,renderContent:()=>{if(o||n.loader.load(t,n.elementAssets||{}),"image"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1;const{x:i,y:l,w:s,h:c,radiusList:d}=I(u,{viewScaleInfo:a,viewSizeInfo:r});e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(i+d[0],l),e.arcTo(i+s,l,i+s,l+c,d[1]),e.arcTo(i+s,l+c,i,l+c,d[2]),e.arcTo(i,l+c,i,l,d[3]),e.arcTo(i,l,i+s,l,d[0]),e.closePath(),e.fill(),e.clip(),e.drawImage(o,i,l,s,c),e.globalAlpha=1,e.restore()}}})}})}))}(e,n,o);break;case"svg":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:a,viewSizeInfo:r}=n,{x:l,y:s,w:c,h:d,angle:h}=i.elementSize(t,a,r);x(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{if(o||n.loader.load(t,n.elementAssets||{}),"svg"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(o,l,s,c,d),e.globalAlpha=1}}))}(e,n,o);break;case"html":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:a,viewSizeInfo:r}=n,{x:l,y:s,w:c,h:d,angle:h}=i.elementSize(t,a,r);x(e,{x:l,y:s,w:c,h:d,angle:h},(()=>{if(o||n.loader.load(t,n.elementAssets||{}),"html"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(o,l,s,c,d),e.globalAlpha=1}}))}(e,n,o);break;case"path":!function(e,t,n){const{detail:o}=t,{originX:i,originY:a,originW:r,originH:l}=o,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:u,w:f,h:g,angle:w}=s.elementSize(t,c,d),v=f/r,y=g/l,m=h-i*v,p=u-a*y,b=c.scale*d.devicePixelRatio,I={...t,x:h,y:u,w:f,h:g,angle:w};x(e,{x:h,y:u,w:f,h:g,angle:w},(()=>{T(e,I,{originElem:t,calcElemSize:{x:h,y:u,w:f,h:g,angle:w},viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{E(e,I,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{e.save(),e.translate(m,p),e.scale(b*v/c.scale,b*y/c.scale);const t=S(o.commands||[]),n=new Path2D(t);o.fill&&(e.fillStyle=o.fill,e.fill(n)),o.stroke&&0!==o.strokeWidth&&(e.strokeStyle=o.stroke,e.lineWidth=(o.strokeWidth||1)/d.devicePixelRatio,e.lineCap=o.strokeLineCap||"square",e.stroke(n)),e.translate(-m,-p),e.restore()}})}})}))}(e,n,o);break;case"group":{const t={...o.elementAssets||{},...n.detail.assets||{}};!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:a}=n,{x:r,y:l,w:s,h:c,angle:d}=o.elementSize({x:t.x,y:t.y,w:t.w,h:t.h,angle:t.angle},i,a),h={...t,x:r,y:l,w:s,h:c,angle:d};x(e,{x:r,y:l,w:s,h:c,angle:d},(()=>{E(e,h,{viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{T(e,h,{originElem:t,calcElemSize:{x:r,y:l,w:s,h:c,angle:d},viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{const{x:o,y:r,w:l,h:s,radiusList:c}=I(h,{viewScaleInfo:i,viewSizeInfo:a});if("hidden"===t.detail.overflow&&(e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(o+c[0],r),e.arcTo(o+l,r,o+l,r+s,c[1]),e.arcTo(o+l,r+s,o,r+s,c[2]),e.arcTo(o,r+s,o,r,c[3]),e.arcTo(o,r,o+l,r,c[0]),e.closePath(),e.fill(),e.clip()),Array.isArray(t.detail.children)){const{parentElementSize:o}=n,i={x:o.x+t.x,y:o.y+t.y,w:t.w||o.w,h:t.h||o.h,angle:t.angle},{calculator:a}=n;for(let o=0;o<t.detail.children.length;o++){let r=t.detail.children[o];if(r={...r,x:i.x+r.x,y:i.y+r.y},a.isElementInView(r,n.viewScaleInfo,n.viewSizeInfo))try{_(e,r,{...n})}catch(e){console.error(e)}}}"hidden"===t.detail.overflow&&(e.globalAlpha=1,e.restore())}})}})}))}(e,n,{...o,elementAssets:t});break}}}catch(e){console.error(e)}}const $={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,overflow:"hidden"};const P=["image","svg","html"],L=e=>{var t,n,i;let r=null;return"image"===e.type?r=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?r=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(r=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),"string"==typeof r&&r?/^@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(`${r}`)?r:a(r):a(`${o()}-${e.uuid}-${o()}-${o()}`)};class M extends m{constructor(){super(),this._loadFuncMap={},this._currentLoadItemMap={},this._storageLoadItemMap={},this._registerLoadFunc("image",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.src])?void 0:n.value)||e.detail.src,i=await d(o);return{uuid:e.uuid,lastModified:Date.now(),content:i}})),this._registerLoadFunc("html",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.html])?void 0:n.value)||e.detail.html,i=await u(o,{width:e.detail.width||e.w,height:e.detail.height||e.h});return{uuid:e.uuid,lastModified:Date.now(),content:i}})),this._registerLoadFunc("svg",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.svg])?void 0:n.value)||e.detail.svg,i=await h(o);return{uuid:e.uuid,lastModified:Date.now(),content:i}}))}_registerLoadFunc(e,t){this._loadFuncMap[e]=t}_getLoadElementSource(e){var t,n,o;let i=null;return"image"===e.type?i=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?i=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(i=(null==(o=null==e?void 0:e.detail)?void 0:o.html)||null),i}_createLoadItem(e){return{element:e,status:"null",content:null,error:null,startTime:-1,endTime:-1,source:this._getLoadElementSource(e)}}_emitLoad(e){const t=L(e.element),n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime}))}_emitError(e){const t=L(e.element),n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime}))}_loadResource(e,t){const n=this._createLoadItem(e),o=L(e);this._currentLoadItemMap[o]=n;const i=this._loadFuncMap[e.type];"function"==typeof i&&(n.startTime=Date.now(),i(e,t).then((e=>{n.content=e.content,n.endTime=Date.now(),n.status="load",this._emitLoad(n)})).catch((t=>{console.warn(`Load element source "${n.source}" fail`,t,e),n.endTime=Date.now(),n.status="error",n.error=t,this._emitError(n)})))}_isExistingErrorStorage(e){var t;const n=L(e),o=null==(t=this._currentLoadItemMap)?void 0:t[n];return!(!o||"error"!==o.status||!o.source||o.source!==this._getLoadElementSource(e))}load(e,t){this._isExistingErrorStorage(e)||P.includes(e.type)&&this._loadResource(e,t)}getContent(e){var t,n;const o=L(e);return(null==(n=null==(t=this._storageLoadItemMap)?void 0:t[o])?void 0:n.content)||null}}return e.Renderer=class extends m{constructor(e){super(),this._loader=new M,this._opts=e,this._init()}_init(){const{_loader:e}=this;e.on("load",(e=>{this.trigger("load",e)})),e.on("error",(()=>{}))}updateOptions(e){this._opts=e}drawData(e,t){const{_loader:n}=this,{calculator:o}=this._opts,{viewContext:i}=this._opts.viewContent;i.clearRect(0,0,i.canvas.width,i.canvas.height);!function(e,t,n){const{elements:o=[]}=t;for(let t=0;t<o.length;t++){const i=o[t],a={...i,detail:{...$,...null==i?void 0:i.detail}};if(n.calculator.isElementInView(a,n.viewScaleInfo,n.viewSizeInfo))try{_(e,a,n)}catch(e){console.error(e)}}}(i,e,{loader:n,calculator:o,parentElementSize:{x:0,y:0,w:t.viewSizeInfo.width,h:t.viewSizeInfo.height},elementAssets:e.assets,...t})}scale(e){const{sharer:t}=this._opts,{data:n,offsetTop:o,offsetBottom:i,offsetLeft:a,offsetRight:r,width:l,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}=t.getActiveStoreSnapshot();n&&this.drawData(n,{viewScaleInfo:{scale:e,offsetTop:o,offsetBottom:i,offsetLeft:a,offsetRight:r},viewSizeInfo:{width:l,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}})}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});
+var iDrawRenderer=function(e){"use strict";var t,n,o,i,a=(e,t,n)=>{if(!t.has(e))throw TypeError("Cannot "+n)},l=(e,t,n)=>(a(e,t,"read from private field"),n?n.call(e):t.get(e)),r=(e,t,n)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,n)},s=(e,t,n,o)=>(a(e,t,"write to private field"),o?o.call(e,n):t.set(e,n),n);function c(e){return"string"==typeof e&&(/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||/^[a-z]{1,}$/i.test(e))}function d(e,t){if(1===t)return e;let n=1;const o=/^\#[0-9a-f]{6,6}$/i;let i=e;if(o.test(e)?n=parseInt(e.substring(5,7).replace(/^\#/,"0x")):/^\#[0-9a-f]{8,8}$/i.test(e)&&(n=parseInt(e.substring(7,9).replace(/^\#/,"0x")),i=e.substring(0,7)),n*=t,o.test(i)&&n>0&&n<1){const e=Math.max(0,Math.min(255,Math.ceil(256*n)));i=`${i.toUpperCase()}${e.toString(16).toUpperCase()}`}return i}function h(){function e(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${e()}${e()}-${e()}-${e()}-${e()}-${e()}${e()}${e()}`}function u(e){let t=0;for(let n=0;n<e.length;n++)t+=e.charCodeAt(n)*e.charCodeAt(n)*n*n;return t.toString(16).substring(0,4)}function f(e){const t=e.length,n=Math.floor(t/2),o=e.substring(0,4).padEnd(4,"0"),i=e.substring(0,4).padEnd(4,"0");return`@assets/${u(t.toString(16).padEnd(4,o))}${u(e.substring(n-4,n).padEnd(4,o)).padEnd(4,"f")}-${u(e.substring(n-8,n-4).padEnd(4,o)).padEnd(4,"f")}-${u(e.substring(n-12,n-8).padEnd(4,o)).padEnd(4,"f")}-${u(e.substring(n-16,n-12).padEnd(4,i)).padEnd(4,"f")}-${u(e.substring(n,n+4).padEnd(4,i)).padEnd(4,"f")}${u(e.substring(n+4,n+8).padEnd(4,i)).padEnd(4,"f")}${u(i.padEnd(4,o).padEnd(4,i))}`}function g(e){return(Object.prototype.toString.call(e)||"").replace(/(\[object|\])/gi,"").trim()}const w={type(e,t){const n=g(e);return!0===t?n.toLocaleLowerCase():n},array:e=>"Array"===g(e),json:e=>"Object"===g(e),function:e=>"Function"===g(e),asyncFunction:e=>"AsyncFunction"===g(e),string:e=>"String"===g(e),number:e=>"Number"===g(e),undefined:e=>"Undefined"===g(e),null:e=>"Null"===g(e),promise:e=>"Promise"===g(e)};var v=function(e,t,n,o){return new(n||(n=Promise))((function(i,a){function l(e){try{s(o.next(e))}catch(e){a(e)}}function r(e){try{s(o.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,r)}s((o=o.apply(e,t||[])).next())}))};const{Image:m}=window;function y(e){return new Promise(((t,n)=>{const o=new m;o.crossOrigin="anonymous",o.onload=function(){t(o)},o.onabort=n,o.onerror=n,o.src=e}))}function p(e){return v(this,void 0,void 0,(function*(){const t=yield function(e){return new Promise(((t,n)=>{const o=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),i=new FileReader;i.readAsDataURL(o),i.onload=function(e){var n;const o=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(o)},i.onerror=function(e){n(e)}}))}(e);return yield y(t)}))}function x(e,t){return v(this,void 0,void 0,(function*(){e=e.replace(/\&/gi,"&amp;");const n=yield function(e,t){const{width:n,height:o}=t;return new Promise(((t,i)=>{const a=new Blob([`\n    <svg \n      xmlns="http://www.w3.org/2000/svg" \n      width="${n||""}" \n      height = "${o||""}">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ${e}\n        </div>\n      </foreignObject>\n    </svg>\n    `],{type:"image/svg+xml;charset=utf-8"}),l=new FileReader;l.readAsDataURL(a),l.onload=function(e){var n;const o=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(o)},l.onerror=function(e){i(e)}}))}(e,t);return yield y(n)}))}function S(e){return"number"==typeof e&&(e>0||e<=0)}function b(e){return"number"==typeof e&&e>=0}function I(e){return"string"==typeof e&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${e}`)}function z(e){return"string"==typeof e&&/^(data:image\/)/.test(`${e}`)}const A={x:function(e){return S(e)},y:function(e){return S(e)},w:b,h:function(e){return"number"==typeof e&&e>=0},angle:function(e){return"number"==typeof e&&e>=-360&&e<=360},number:S,numberStr:function(e){return/^(-?\d+(?:\.\d+)?)$/.test(`${e}`)},borderWidth:function(e){return b(e)},borderRadius:function(e){return S(e)&&e>=0},color:function(e){return c(e)},imageSrc:function(e){return z(e)||I(e)},imageURL:I,imageBase64:z,svg:function(e){return"string"==typeof e&&/^(<svg[\s]{1,}|<svg>)/i.test(`${e}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${e}`.trim())},html:function(e){let t=!1;if("string"==typeof e){let n=document.createElement("div");n.innerHTML=e,n.children.length>0&&(t=!0),n=null}return t},text:function(e){return"string"==typeof e},fontSize:function(e){return S(e)&&e>0},lineHeight:function(e){return S(e)&&e>0},textAlign:function(e){return["center","left","right"].includes(e)},fontFamily:function(e){return"string"==typeof e&&e.length>0},fontWeight:function(e){return["bold"].includes(e)},strokeWidth:function(e){return S(e)&&e>0}};class T{constructor(){this._listeners=new Map}on(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e)||[];null==n||n.push(t),this._listeners.set(e,n)}else this._listeners.set(e,[t])}off(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e);if(Array.isArray(n))for(let e=0;e<(null==n?void 0:n.length);e++)if(n[e]===t){n.splice(e,1);break}this._listeners.set(e,n||[])}}trigger(e,t){const n=this._listeners.get(e);return!!Array.isArray(n)&&(n.forEach((e=>{e(t)})),!0)}has(e){if(this._listeners.has(e)){const t=this._listeners.get(e);if(Array.isArray(t)&&t.length>0)return!0}return!1}}function E(e,t,n,o){const i=function(e){return e/180*Math.PI}(t||0);n&&(i>0||i<0)&&(e.translate(n.x,n.y),e.rotate(i),e.translate(-n.x,-n.y)),o(e),n&&(i>0||i<0)&&(e.translate(n.x,n.y),e.rotate(-i),e.translate(-n.x,-n.y))}function C(e,t,n){const o={x:(i=t).x+i.w/2,y:i.y+i.h/2};var i;E(e,t.angle||0,o,(()=>{n(e)}))}function $(e){let t="";return e.forEach((e=>{t+=e.type+e.params.join(" ")})),t}const _={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,overflow:"hidden"};function P(e,t){const{viewScaleInfo:n}=t,{scale:o}=n;let{borderRadius:i}=e.detail;const{boxSizing:a=_.boxSizing,borderWidth:l}=e.detail;"number"!=typeof l&&(i=0);let{x:r,y:s,w:c,h:d}=e,h=[0,0,0,0];if("number"==typeof i){const e=i*o;h=[e,e,e,e]}else Array.isArray(i)&&4===(null==i?void 0:i.length)&&(h=[i[0]*o,i[1]*o,i[2]*o,i[3]*o]);let u=0;return"number"==typeof l&&(u=(l||0)*o),"border-box"===a?(r=e.x+u/2,s=e.y+u/2,c=e.w-u,d=e.h-u):"content-box"===a?(r=e.x-u/2,s=e.y-u/2,c=e.w+u,d=e.h+u):(r=e.x,s=e.y,c=e.w,d=e.h),c=Math.max(c,1),d=Math.max(d,1),h=h.map((e=>Math.min(e,c/2,d/2))),{x:r,y:s,w:c,h:d,radiusList:h}}function L(e,t,n){if("string"==typeof t)return t;const{viewElementSize:o,viewScaleInfo:i,opacity:a=1}=n,{x:l,y:r}=o,{scale:s}=i;if("linear-gradient"===(null==t?void 0:t.type)){const{start:n,end:o,stops:i}=t,c={x:l+n.x*s,y:r+n.y*s},h={x:l+o.x*s,y:r+o.y*s},u=e.createLinearGradient(c.x,c.y,h.x,h.y);return i.forEach((e=>{u.addColorStop(e.offset,d(e.color,a))})),u}if("radial-gradient"===(null==t?void 0:t.type)){const{inner:n,outer:o,stops:i}=t,c={x:l+n.x*s,y:r+n.y*s,radius:n.radius*s},h={x:l+o.x*s,y:r+o.y*s,radius:o.radius*s},u=e.createRadialGradient(c.x,c.y,c.radius,h.x,h.y,h.radius);return i.forEach((e=>{u.addColorStop(e.offset,d(e.color,a))})),u}return"#000000"}const k={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,overflow:"hidden"};function M(e,t,n){const{pattern:o,renderContent:i,originElem:a,calcElemSize:l,viewScaleInfo:r,viewSizeInfo:s}=n||{};!function(e,t,n){const{renderContent:o,originElem:i,calcElemSize:a,viewScaleInfo:l,viewSizeInfo:r}=n,s=l.scale*r.devicePixelRatio,{clipPath:c}=(null==i?void 0:i.detail)||{};if(c&&a&&c.commands){const{x:n,y:i,w:l,h:r}=a,{originW:d,originH:h,originX:u,originY:f}=c,g=l/d,w=r/h,v=n-u*g,m=i-f*w;e.save(),e.translate(v,m),e.scale(s*g,s*w);const y=$(c.commands||[]),p=new Path2D(y);e.clip(p),e.translate(0-v,0-m),e.setTransform(1,0,0,1,0,0),C(e,{...t},(()=>{null==o||o()})),e.restore()}else null==o||o()}(e,t,{originElem:a,calcElemSize:l,viewScaleInfo:r,viewSizeInfo:s,renderContent:()=>{var n,a;void 0!==(null==(n=null==t?void 0:t.detail)?void 0:n.opacity)&&(null==(a=null==t?void 0:t.detail)?void 0:a.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1,function(e,t,n){var o,i;const{pattern:a,viewScaleInfo:l,viewSizeInfo:r}=n,s=[];if(t.detail,t.detail,t.detail.background||a){const{x:n,y:c,w:d,h:h,radiusList:u}=P(t,{viewScaleInfo:l,viewSizeInfo:r});if(e.beginPath(),e.moveTo(n+u[0],c),e.arcTo(n+d,c,n+d,c+h,u[1]),e.arcTo(n+d,c+h,n,c+h,u[2]),e.arcTo(n,c+h,n,c,u[3]),e.arcTo(n,c,n+d,c,u[0]),e.closePath(),"string"==typeof a)e.fillStyle=a;else if(["CanvasPattern"].includes(w.type(a)))e.fillStyle=a;else if("string"==typeof t.detail.background)e.fillStyle=t.detail.background;else if("linear-gradient"===(null==(o=t.detail.background)?void 0:o.type)){const o=L(e,t.detail.background,{viewElementSize:{x:n,y:c,w:d,h:h},viewScaleInfo:l,opacity:e.globalAlpha});e.fillStyle=o}else if("radial-gradient"===(null==(i=t.detail.background)?void 0:i.type)){const o=L(e,t.detail.background,{viewElementSize:{x:n,y:c,w:d,h:h},viewScaleInfo:l,opacity:e.globalAlpha});if(e.fillStyle=o,s&&s.length>0)for(let t=0;t<(null==s?void 0:s.length);t++){const o=s[t];"translate"===o.method?e.translate(o.args[0]+n,o.args[1]+c):"rotate"===o.method?e.rotate(...o.args):"scale"===o.method&&e.scale(...o.args)}}e.fill(),s&&s.length>0&&e.setTransform(1,0,0,1,0,0)}}(e,t,{pattern:o,viewScaleInfo:r,viewSizeInfo:s}),null==i||i(),function(e,t,n){var o,i;if(0===t.detail.borderWidth)return;if(!c(t.detail.borderColor))return;void 0!==(null==(o=null==t?void 0:t.detail)?void 0:o.opacity)&&(null==(i=null==t?void 0:t.detail)?void 0:i.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1;const{viewScaleInfo:a}=n,{scale:l}=a;let r=k.borderColor;!0===c(t.detail.borderColor)&&(r=t.detail.borderColor);const{borderWidth:s,borderRadius:d,borderDash:h,boxSizing:u=k.boxSizing}=t.detail;let f=0;"number"==typeof s&&(f=s||1);f*=l;let g=[0,0,0,0];if("number"==typeof d){const e=d*l;g=[e,e,e,e]}else Array.isArray(d)&&4===(null==d?void 0:d.length)&&(g=[d[0]*l,d[1]*l,d[2]*l,d[3]*l]);e.strokeStyle=r;let w=[];Array.isArray(h)&&h.length>0&&(w=h.map((e=>Math.ceil(e*l))));let v=0,m=0,y=0,p=0;Array.isArray(s)&&(v=(s[0]||0)*l,m=(s[1]||0)*l,y=(s[2]||0)*l,p=(s[3]||0)*l);if(p||m||v||y){e.lineCap="butt";let{x:n,y:o,w:i,h:a}=t;"border-box"===u?(n+=p/2,o+=v/2,i=i-p/2-m/2,a=a-v/2-y/2):"content-box"===u?(n-=p/2,o-=v/2,i=i+p/2+m/2,a=a+v/2+y/2):(n=t.x,o=t.y,i=t.w,a=t.h),v&&(e.beginPath(),e.lineWidth=v,e.moveTo(n-p/2,o),e.lineTo(n+i+m/2,o),e.closePath(),e.stroke()),m&&(e.beginPath(),e.lineWidth=m,e.moveTo(n+i,o-v/2),e.lineTo(n+i,o+a+y/2),e.closePath(),e.stroke()),y&&(e.beginPath(),e.lineWidth=y,e.moveTo(n-p/2,o+a),e.lineTo(n+i+m/2,o+a),e.closePath(),e.stroke()),p&&(e.beginPath(),e.lineWidth=p,e.moveTo(n,o-v/2),e.lineTo(n,o+a+y/2),e.closePath(),e.stroke())}else{let{x:n,y:o,w:i,h:a}=t;"border-box"===u?(n=t.x+f/2,o=t.y+f/2,i=t.w-f,a=t.h-f):"content-box"===u?(n=t.x-f/2,o=t.y-f/2,i=t.w+f,a=t.h+f):(n=t.x,o=t.y,i=t.w,a=t.h),w.length>0?e.lineCap="butt":e.lineCap="square",i=Math.max(i,1),a=Math.max(a,1),g=g.map((e=>Math.min(e,i/2,a/2))),e.setLineDash(w),e.lineWidth=f,e.beginPath(),e.moveTo(n+g[0],o),e.arcTo(n+i,o,n+i,o+a,g[1]),e.arcTo(n+i,o+a,n,o+a,g[2]),e.arcTo(n,o+a,n,o,g[3]),e.arcTo(n,o,n+i,o,g[0]),e.closePath(),e.stroke(),e.globalAlpha=1}e.setLineDash([])}(e,t,{viewScaleInfo:r,viewSizeInfo:s}),e.globalAlpha=1}})}function W(e,t,n){const{detail:o}=t,{viewScaleInfo:i,renderContent:a}=n,{shadowColor:l,shadowOffsetX:r,shadowOffsetY:s,shadowBlur:c}=o;A.number(c)?(e.save(),e.shadowColor=l||k.shadowColor,e.shadowOffsetX=(r||0)*i.scale,e.shadowOffsetY=(s||0)*i.scale,e.shadowBlur=(c||0)*i.scale,a(),e.restore()):a()}const R={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,overflow:"hidden"};function O(e,t,n){var o;if(!0!==(null==(o=null==t?void 0:t.operations)?void 0:o.invisible))try{switch(t.type){case"rect":!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:a}=n,{x:l,y:r,w:s,h:c,angle:d}=(null==o?void 0:o.elementSize(t,i,a))||t,h={...t,x:l,y:r,w:s,h:c,angle:d};C(e,{x:l,y:r,w:s,h:c,angle:d},(()=>{W(e,h,{viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{M(e,h,{originElem:t,calcElemSize:{x:l,y:r,w:s,h:c,angle:d},viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{}})}})}))}(e,t,n);break;case"circle":!function(e,t,n){const{detail:o,angle:i}=t,{background:a="#000000",borderColor:l="#000000",borderWidth:r=0}=o,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:u,w:f,h:g}=(null==s?void 0:s.elementSize({x:t.x,y:t.y,w:t.w,h:t.h},c,d))||t,w={...t,x:h,y:u,w:f,h:g,angle:i};C(e,{x:h,y:u,w:f,h:g,angle:i},(()=>{W(e,w,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{var n,o;const i=f/2,s=g/2,d=h+i,w=u+s;if(void 0!==(null==(n=null==t?void 0:t.detail)?void 0:n.opacity)&&(null==(o=null==t?void 0:t.detail)?void 0:o.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1,"number"==typeof r&&r>0){const t=r/2+i,n=r/2+s;e.beginPath(),e.strokeStyle=l,e.lineWidth=r,e.circle(d,w,t,n,0,0,2*Math.PI),e.closePath(),e.stroke()}e.beginPath();const v=L(e,a,{viewElementSize:{x:h,y:u,w:f,h:g},viewScaleInfo:c,opacity:e.globalAlpha});e.fillStyle=v,e.circle(d,w,i,s,0,0,2*Math.PI),e.closePath(),e.fill(),e.globalAlpha=1}})}))}(e,t,n);break;case"text":!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:a}=n,{x:l,y:r,w:s,h:d,angle:h}=(null==o?void 0:o.elementSize(t,i,a))||t,u={...t,x:l,y:r,w:s,h:d,angle:h};C(e,{x:l,y:r,w:s,h:d,angle:h},(()=>{M(e,u,{originElem:t,calcElemSize:{x:l,y:r,w:s,h:d,angle:h},viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{const n={...R,...t.detail},o=(n.fontSize||R.fontSize)*i.scale,a=n.lineHeight?n.lineHeight*i.scale:o;e.fillStyle=t.detail.color||R.color,e.textBaseline="top",e.$setFont({fontWeight:n.fontWeight,fontSize:o,fontFamily:n.fontFamily});const h=n.text.replace(/\r\n/gi,"\n"),u=a,f=h.split("\n"),g=[];let w=0;f.forEach(((t,n)=>{let o="";if(t.length>0){for(let i=0;i<t.length&&(e.measureText(o+(t[i]||"")).width<e.$doPixelRatio(s)?o+=t[i]||"":(g.push({text:o,width:e.$undoPixelRatio(e.measureText(o).width)}),o=t[i]||"",w++),!((w+1)*u>d));i++)if(t.length-1===i&&(w+1)*u<d){g.push({text:o,width:e.$undoPixelRatio(e.measureText(o).width)}),n<f.length-1&&w++;break}}else g.push({text:"",width:0})}));let v=0;g.length*u<d&&("top"===t.detail.verticalAlign?v=0:"bottom"===t.detail.verticalAlign?v+=d-g.length*u:v+=(d-g.length*u)/2);{const t=r+v;void 0!==n.textShadowColor&&c(n.textShadowColor)&&(e.shadowColor=n.textShadowColor),void 0!==n.textShadowOffsetX&&A.number(n.textShadowOffsetX)&&(e.shadowOffsetX=n.textShadowOffsetX),void 0!==n.textShadowOffsetY&&A.number(n.textShadowOffsetY)&&(e.shadowOffsetY=n.textShadowOffsetY),void 0!==n.textShadowBlur&&A.number(n.textShadowBlur)&&(e.shadowBlur=n.textShadowBlur),g.forEach(((o,i)=>{let a=l;"center"===n.textAlign?a=l+(s-o.width)/2:"right"===n.textAlign&&(a=l+(s-o.width)),e.fillText(o.text,a,t+u*i)}))}}})}))}(e,t,n);break;case"image":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:a,viewSizeInfo:l}=n,{x:r,y:s,w:c,h:d,angle:h}=(null==i?void 0:i.elementSize(t,a,l))||t,u={...t,x:r,y:s,w:c,h:d,angle:h};C(e,{x:r,y:s,w:c,h:d,angle:h},(()=>{W(e,u,{viewScaleInfo:a,viewSizeInfo:l,renderContent:()=>{M(e,u,{originElem:t,calcElemSize:{x:r,y:s,w:c,h:d,angle:h},viewScaleInfo:a,viewSizeInfo:l,renderContent:()=>{if(o||n.loader.load(t,n.elementAssets||{}),"image"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1;const{x:i,y:r,w:s,h:c,radiusList:d}=P(u,{viewScaleInfo:a,viewSizeInfo:l});e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(i+d[0],r),e.arcTo(i+s,r,i+s,r+c,d[1]),e.arcTo(i+s,r+c,i,r+c,d[2]),e.arcTo(i,r+c,i,r,d[3]),e.arcTo(i,r,i+s,r,d[0]),e.closePath(),e.fill(),e.clip(),e.drawImage(o,i,r,s,c),e.globalAlpha=1,e.restore()}}})}})}))}(e,t,n);break;case"svg":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:a,viewSizeInfo:l}=n,{x:r,y:s,w:c,h:d,angle:h}=(null==i?void 0:i.elementSize(t,a,l))||t;C(e,{x:r,y:s,w:c,h:d,angle:h},(()=>{if(o||n.loader.load(t,n.elementAssets||{}),"svg"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(o,r,s,c,d),e.globalAlpha=1}}))}(e,t,n);break;case"html":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:a,viewSizeInfo:l}=n,{x:r,y:s,w:c,h:d,angle:h}=(null==i?void 0:i.elementSize(t,a,l))||t;C(e,{x:r,y:s,w:c,h:d,angle:h},(()=>{if(o||n.loader.load(t,n.elementAssets||{}),"html"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(o,r,s,c,d),e.globalAlpha=1}}))}(e,t,n);break;case"path":!function(e,t,n){const{detail:o}=t,{originX:i,originY:a,originW:l,originH:r}=o,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:u,w:f,h:g,angle:w}=(null==s?void 0:s.elementSize(t,c,d))||t,v=f/l,m=g/r,y=h-i*v,p=u-a*m,x=c.scale*d.devicePixelRatio,S={...t,x:h,y:u,w:f,h:g,angle:w};C(e,{x:h,y:u,w:f,h:g,angle:w},(()=>{M(e,S,{originElem:t,calcElemSize:{x:h,y:u,w:f,h:g,angle:w},viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{W(e,S,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{e.save(),e.translate(y,p),e.scale(x*v/c.scale,x*m/c.scale);const t=$(o.commands||[]),n=new Path2D(t);o.fill&&(e.fillStyle=o.fill,e.fill(n)),o.stroke&&0!==o.strokeWidth&&(e.strokeStyle=o.stroke,e.lineWidth=(o.strokeWidth||1)/d.devicePixelRatio,e.lineCap=o.strokeLineCap||"square",e.stroke(n)),e.translate(-y,-p),e.restore()}})}})}))}(e,t,n);break;case"group":{const o={...n.elementAssets||{},...t.detail.assets||{}};!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:a}=n,{x:l,y:r,w:s,h:c,angle:d}=(null==o?void 0:o.elementSize({x:t.x,y:t.y,w:t.w,h:t.h,angle:t.angle},i,a))||t,h={...t,x:l,y:r,w:s,h:c,angle:d};C(e,{x:l,y:r,w:s,h:c,angle:d},(()=>{W(e,h,{viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{M(e,h,{originElem:t,calcElemSize:{x:l,y:r,w:s,h:c,angle:d},viewScaleInfo:i,viewSizeInfo:a,renderContent:()=>{const{x:o,y:l,w:r,h:s,radiusList:c}=P(h,{viewScaleInfo:i,viewSizeInfo:a});if("hidden"===t.detail.overflow&&(e.save(),e.fillStyle="transparent",e.beginPath(),e.moveTo(o+c[0],l),e.arcTo(o+r,l,o+r,l+s,c[1]),e.arcTo(o+r,l+s,o,l+s,c[2]),e.arcTo(o,l+s,o,l,c[3]),e.arcTo(o,l,o+r,l,c[0]),e.closePath(),e.fill(),e.clip()),Array.isArray(t.detail.children)){const{parentElementSize:o}=n,i={x:o.x+t.x,y:o.y+t.y,w:t.w||o.w,h:t.h||o.h,angle:t.angle},{calculator:a}=n;for(let o=0;o<t.detail.children.length;o++){let l=t.detail.children[o];if(l={...l,x:i.x+l.x,y:i.y+l.y},!0===n.forceDrawAll||(null==a?void 0:a.isElementInView(l,n.viewScaleInfo,n.viewSizeInfo)))try{O(e,l,{...n})}catch(e){console.error(e)}}}"hidden"===t.detail.overflow&&(e.globalAlpha=1,e.restore())}})}})}))}(e,t,{...n,elementAssets:o});break}}}catch(e){console.error(e)}}const D={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,overflow:"hidden"};const F=["image","svg","html"],B=e=>{var t,n,o;let i=null;return"image"===e.type?i=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?i=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(i=(null==(o=null==e?void 0:e.detail)?void 0:o.html)||null),"string"==typeof i&&i?/^@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(`${i}`)?i:f(i):f(`${h()}-${e.uuid}-${h()}-${h()}`)};class H extends T{constructor(){super(),this._loadFuncMap={},this._currentLoadItemMap={},this._storageLoadItemMap={},this._registerLoadFunc("image",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.src])?void 0:n.value)||e.detail.src,i=await y(o);return{uuid:e.uuid,lastModified:Date.now(),content:i}})),this._registerLoadFunc("html",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.html])?void 0:n.value)||e.detail.html,i=await x(o,{width:e.detail.width||e.w,height:e.detail.height||e.h});return{uuid:e.uuid,lastModified:Date.now(),content:i}})),this._registerLoadFunc("svg",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.svg])?void 0:n.value)||e.detail.svg,i=await p(o);return{uuid:e.uuid,lastModified:Date.now(),content:i}}))}_registerLoadFunc(e,t){this._loadFuncMap[e]=t}_getLoadElementSource(e){var t,n,o;let i=null;return"image"===e.type?i=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?i=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(i=(null==(o=null==e?void 0:e.detail)?void 0:o.html)||null),i}_createLoadItem(e){return{element:e,status:"null",content:null,error:null,startTime:-1,endTime:-1,source:this._getLoadElementSource(e)}}_emitLoad(e){const t=B(e.element),n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime}))}_emitError(e){const t=B(e.element),n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime}))}_loadResource(e,t){const n=this._createLoadItem(e),o=B(e);this._currentLoadItemMap[o]=n;const i=this._loadFuncMap[e.type];"function"==typeof i&&(n.startTime=Date.now(),i(e,t).then((e=>{n.content=e.content,n.endTime=Date.now(),n.status="load",this._emitLoad(n)})).catch((t=>{console.warn(`Load element source "${n.source}" fail`,t,e),n.endTime=Date.now(),n.status="error",n.error=t,this._emitError(n)})))}_isExistingErrorStorage(e){var t;const n=B(e),o=null==(t=this._currentLoadItemMap)?void 0:t[n];return!(!o||"error"!==o.status||!o.source||o.source!==this._getLoadElementSource(e))}load(e,t){this._isExistingErrorStorage(e)||F.includes(e.type)&&this._loadResource(e,t)}getContent(e){var t,n;const o=B(e);return(null==(n=null==(t=this._storageLoadItemMap)?void 0:t[o])?void 0:n.content)||null}}return t=new WeakMap,n=new WeakMap,o=new WeakSet,i=function(){const e=l(this,n);e.on("load",(e=>{this.trigger("load",e)})),e.on("error",(()=>{}))},e.Renderer=class extends T{constructor(e){var l,c,d;super(),r(this,o),r(this,t,void 0),r(this,n,new H),s(this,t,e),(l=this,c=o,d=i,a(l,c,"access private method"),d).call(this)}updateOptions(e){s(this,t,e)}drawData(e,o){const i=l(this,n),{calculator:a}=l(this,t),r=l(this,t).viewContext;r.clearRect(0,0,r.canvas.width,r.canvas.height);!function(e,t,n){var o;const{elements:i=[]}=t;for(let t=0;t<i.length;t++){const a=i[t],l={...a,detail:{...D,...null==a?void 0:a.detail}};if(!0===n.forceDrawAll||(null==(o=n.calculator)?void 0:o.isElementInView(l,n.viewScaleInfo,n.viewSizeInfo)))try{O(e,l,n)}catch(e){console.error(e)}}}(r,e,{loader:i,calculator:a,parentElementSize:{x:0,y:0,w:o.viewSizeInfo.width,h:o.viewSizeInfo.height},elementAssets:e.assets,...o})}scale(e){const{sharer:n}=l(this,t);if(!n)return;const{data:o,offsetTop:i,offsetBottom:a,offsetLeft:r,offsetRight:s,width:c,height:d,contextHeight:h,contextWidth:u,devicePixelRatio:f}=n.getActiveStoreSnapshot();o&&this.drawData(o,{viewScaleInfo:{scale:e,offsetTop:i,offsetBottom:a,offsetLeft:r,offsetRight:s},viewSizeInfo:{width:c,height:d,contextHeight:h,contextWidth:u,devicePixelRatio:f}})}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/renderer",
-  "version": "0.4.0-beta.2",
+  "version": "0.4.0-beta.3",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,11 +21,11 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-beta.2"
+    "@idraw/types": "^0.4.0-beta.3"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/util": "^0.4.0-beta.2"
+    "@idraw/util": "^0.4.0-beta.3"
   },
   "publishConfig": {
     "access": "public",