@idraw/renderer 0.3.0-alpha.4 → 0.3.0-alpha.7

package/dist/index.global.js

@@ -1,1591 +1,1257 @@
-var iDrawRenderer = (function () {
-    'use strict';
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign$1 = function() {
-        __assign$1 = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign$1.apply(this, arguments);
-    };
-    function __awaiter$1(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
+var iDrawRenderer = function() {
+  "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()}`;
+  }
+  function deepClone(target) {
+    function _clone(t) {
+      const type = is$1(t);
+      if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
+        return t;
+      } else if (type === "Array") {
+        const arr = [];
+        t.forEach((item) => {
+          arr.push(_clone(item));
+        });
+        return arr;
+      } else if (type === "Object") {
+        const obj = {};
+        const keys = Object.keys(t);
+        keys.forEach((key) => {
+          obj[key] = _clone(t[key]);
         });
+        return obj;
+      }
     }
-    function __generator$1(thisArg, body) {
-        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-                if (y = 0, t) op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0: case 1: t = op; break;
-                    case 4: _.label++; return { value: op[1], done: false };
-                    case 5: _.label++; y = op[1]; op = [0]; continue;
-                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                        if (t[2]) _.ops.pop();
-                        _.trys.pop(); continue;
-                }
-                op = body.call(thisArg, _);
-            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    return _clone(target);
+  }
+  function is$1(data) {
+    return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
+  }
+  function parsePrototype(data) {
+    const typeStr = Object.prototype.toString.call(data) || "";
+    const result = typeStr.replace(/(\[object|\])/ig, "").trim();
+    return result;
+  }
+  const istype = {
+    type(data, lowerCase) {
+      const result = parsePrototype(data);
+      return lowerCase === true ? result.toLocaleLowerCase() : result;
+    },
+    array(data) {
+      return parsePrototype(data) === "Array";
+    },
+    json(data) {
+      return parsePrototype(data) === "Object";
+    },
+    function(data) {
+      return parsePrototype(data) === "Function";
+    },
+    asyncFunction(data) {
+      return parsePrototype(data) === "AsyncFunction";
+    },
+    string(data) {
+      return parsePrototype(data) === "String";
+    },
+    number(data) {
+      return parsePrototype(data) === "Number";
+    },
+    undefined(data) {
+      return parsePrototype(data) === "Undefined";
+    },
+    null(data) {
+      return parsePrototype(data) === "Null";
+    },
+    promise(data) {
+      return parsePrototype(data) === "Promise";
+    }
+  };
+  function parseHTMLToDataURL(html2, opts) {
+    const { width, height } = opts;
+    return new Promise((resolve, reject) => {
+      const _svg = `
+    <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}
+        </div>
+      </foreignObject>
+    </svg>
+    `;
+      const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = function(event) {
+        var _a2;
+        const base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  function parseSVGToDataURL(svg2) {
+    return new Promise((resolve, reject) => {
+      const _svg = svg2;
+      const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = function(event) {
+        var _a2;
+        const base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        resolve(base64);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+  var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function(resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
         }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  };
+  const { Image } = window;
+  function loadImage(src) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = function() {
+        resolve(img);
+      };
+      img.onabort = reject;
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+  function loadSVG(svg2) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const dataURL = yield parseSVGToDataURL(svg2);
+      const image = yield loadImage(dataURL);
+      return image;
+    });
+  }
+  function filterAmpersand(str) {
+    return str.replace(/\&/ig, "&amp;");
+  }
+  function loadHTML(html2, opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+      html2 = filterAmpersand(html2);
+      const dataURL = yield parseHTMLToDataURL(html2, opts);
+      const image = yield loadImage(dataURL);
+      return image;
+    });
+  }
+  class Context {
+    constructor(ctx, opts) {
+      this._opts = opts;
+      this._ctx = ctx;
+      this._transform = {
+        scale: 1,
+        scrollX: 0,
+        scrollY: 0
+      };
     }
-
-    function compose(middleware) {
-        return function (context, next) {
-            return dispatch(0);
-            function dispatch(i) {
-                var fn = middleware[i];
-                if (i === middleware.length && next) {
-                    fn = next;
-                }
-                if (!fn)
-                    return Promise.resolve();
-                try {
-                    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
-                }
-                catch (err) {
-                    return Promise.reject(err);
-                }
-            }
-        };
+    getContext() {
+      return this._ctx;
     }
-    function delay(time) {
-        return new Promise(function (resolve) {
-            setTimeout(function () {
-                resolve();
-            }, time);
-        });
+    resetSize(opts) {
+      this._opts = Object.assign(Object.assign({}, this._opts), opts);
     }
-    function throttle(fn, timeout) {
-        var timer = -1;
-        return function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            if (timer > 0) {
-                return;
-            }
-            timer = setTimeout(function () {
-                fn.apply(void 0, args);
-                timer = -1;
-            }, timeout);
-        };
-    }
-    function downloadImageFromCanvas(canvas, opts) {
-        var filename = opts.filename, _a = opts.type, type = _a === void 0 ? 'image/jpeg' : _a;
-        var stream = canvas.toDataURL(type);
-        var downloadLink = document.createElement('a');
-        downloadLink.href = stream;
-        downloadLink.download = filename;
-        var downloadClickEvent = document.createEvent('MouseEvents');
-        downloadClickEvent.initEvent('click', true, false);
-        downloadLink.dispatchEvent(downloadClickEvent);
-    }
-    function toColorHexNum(color) {
-        return parseInt(color.replace(/^\#/, '0x'));
-    }
-    function toColorHexStr(color) {
-        return '#' + color.toString(16);
-    }
-    function isColorStr(color) {
-        return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
-    }
-    function createUUID() {
-        function str4() {
-            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-        }
-        return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
+    calcDeviceNum(num) {
+      return num * this._opts.devicePixelRatio;
     }
-    function deepClone(target) {
-        function _clone(t) {
-            var type = is$1(t);
-            if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
-                return t;
-            }
-            else if (type === 'Array') {
-                var arr_1 = [];
-                t.forEach(function (item) {
-                    arr_1.push(_clone(item));
-                });
-                return arr_1;
-            }
-            else if (type === 'Object') {
-                var obj_1 = {};
-                var keys = Object.keys(t);
-                keys.forEach(function (key) {
-                    obj_1[key] = _clone(t[key]);
-                });
-                return obj_1;
-            }
-        }
-        return _clone(target);
+    calcScreenNum(num) {
+      return num / this._opts.devicePixelRatio;
     }
-    function is$1(data) {
-        return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
+    getSize() {
+      return {
+        width: this._opts.width,
+        height: this._opts.height,
+        contextWidth: this._opts.contextWidth,
+        contextHeight: this._opts.contextHeight,
+        devicePixelRatio: this._opts.devicePixelRatio
+      };
     }
-    function parsePrototype(data) {
-        var typeStr = Object.prototype.toString.call(data) || '';
-        var result = typeStr.replace(/(\[object|\])/ig, '').trim();
-        return result;
+    setTransform(config) {
+      this._transform = Object.assign(Object.assign({}, this._transform), config);
     }
-    var istype = {
-        type: function (data, lowerCase) {
-            var result = parsePrototype(data);
-            return lowerCase === true ? result.toLocaleLowerCase() : result;
-        },
-        array: function (data) {
-            return parsePrototype(data) === 'Array';
-        },
-        json: function (data) {
-            return parsePrototype(data) === 'Object';
-        },
-        function: function (data) {
-            return parsePrototype(data) === 'Function';
-        },
-        asyncFunction: function (data) {
-            return parsePrototype(data) === 'AsyncFunction';
-        },
-        string: function (data) {
-            return parsePrototype(data) === 'String';
-        },
-        number: function (data) {
-            return parsePrototype(data) === 'Number';
-        },
-        undefined: function (data) {
-            return parsePrototype(data) === 'Undefined';
-        },
-        null: function (data) {
-            return parsePrototype(data) === 'Null';
-        },
-        promise: function (data) {
-            return parsePrototype(data) === 'Promise';
-        },
-    };
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
+    getTransform() {
+      return {
+        scale: this._transform.scale,
+        scrollX: this._transform.scrollX,
+        scrollY: this._transform.scrollY
+      };
     }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-                if (y = 0, t) op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0: case 1: t = op; break;
-                    case 4: _.label++; return { value: op[1], done: false };
-                    case 5: _.label++; y = op[1]; op = [0]; continue;
-                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                        if (t[2]) _.ops.pop();
-                        _.trys.pop(); continue;
-                }
-                op = body.call(thisArg, _);
-            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-        }
+    setFillStyle(color2) {
+      this._ctx.fillStyle = color2;
     }
-    function parseHTMLToDataURL(html, opts) {
-        var width = opts.width, height = opts.height;
-        return new Promise(function (resolve, reject) {
-            var _svg = "\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width || '', "\" height = \"").concat(height || '', "\">\n      <foreignObject width=\"100%\" height=\"100%\">\n        <div xmlns = \"http://www.w3.org/1999/xhtml\">\n          ").concat(html, "\n        </div>\n      </foreignObject>\n    </svg>\n    ");
-            var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
-            var reader = new FileReader();
-            reader.readAsDataURL(blob);
-            reader.onload = function (event) {
-                var _a;
-                var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
-                resolve(base64);
-            };
-            reader.onerror = function (err) {
-                reject(err);
-            };
-        });
+    fill(fillRule) {
+      return this._ctx.fill(fillRule || "nonzero");
     }
-    function parseSVGToDataURL(svg) {
-        return new Promise(function (resolve, reject) {
-            var _svg = svg;
-            var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
-            var reader = new FileReader();
-            reader.readAsDataURL(blob);
-            reader.onload = function (event) {
-                var _a;
-                var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
-                resolve(base64);
-            };
-            reader.onerror = function (err) {
-                reject(err);
-            };
-        });
+    arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
+      return this._ctx.arc(this._doSize(x2), this._doSize(y2), this._doSize(radius), startAngle, endAngle, anticlockwise);
     }
-    var Image = window.Image;
-    function loadImage(src) {
-        return new Promise(function (resolve, reject) {
-            var img = new Image;
-            img.crossOrigin = 'anonymous';
-            img.onload = function () {
-                resolve(img);
-            };
-            img.onabort = reject;
-            img.onerror = reject;
-            img.src = src;
-        });
+    rect(x2, y2, w2, h2) {
+      return this._ctx.rect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
     }
-    function loadSVG(svg) {
-        return __awaiter(this, void 0, void 0, function () {
-            var dataURL, image;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4, parseSVGToDataURL(svg)];
-                    case 1:
-                        dataURL = _a.sent();
-                        return [4, loadImage(dataURL)];
-                    case 2:
-                        image = _a.sent();
-                        return [2, image];
-                }
-            });
-        });
+    fillRect(x2, y2, w2, h2) {
+      return this._ctx.fillRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
     }
-    function filterAmpersand(str) {
-        return str.replace(/\&/ig, '&amp;');
-    }
-    function loadHTML(html, opts) {
-        return __awaiter(this, void 0, void 0, function () {
-            var dataURL, image;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        html = filterAmpersand(html);
-                        return [4, parseHTMLToDataURL(html, opts)];
-                    case 1:
-                        dataURL = _a.sent();
-                        return [4, loadImage(dataURL)];
-                    case 2:
-                        image = _a.sent();
-                        return [2, image];
-                }
-            });
-        });
+    clearRect(x2, y2, w2, h2) {
+      return this._ctx.clearRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
     }
-    var Context = (function () {
-        function Context(ctx, opts) {
-            this._opts = opts;
-            this._ctx = ctx;
-            this._transform = {
-                scale: 1,
-                scrollX: 0,
-                scrollY: 0,
-            };
-        }
-        Context.prototype.getContext = function () {
-            return this._ctx;
-        };
-        Context.prototype.resetSize = function (opts) {
-            this._opts = __assign(__assign({}, this._opts), opts);
-        };
-        Context.prototype.calcDeviceNum = function (num) {
-            return num * this._opts.devicePixelRatio;
-        };
-        Context.prototype.calcScreenNum = function (num) {
-            return num / this._opts.devicePixelRatio;
-        };
-        Context.prototype.getSize = function () {
-            return {
-                width: this._opts.width,
-                height: this._opts.height,
-                contextWidth: this._opts.contextWidth,
-                contextHeight: this._opts.contextHeight,
-                devicePixelRatio: this._opts.devicePixelRatio,
-            };
-        };
-        Context.prototype.setTransform = function (config) {
-            this._transform = __assign(__assign({}, this._transform), config);
-        };
-        Context.prototype.getTransform = function () {
-            return {
-                scale: this._transform.scale,
-                scrollX: this._transform.scrollX,
-                scrollY: this._transform.scrollY,
-            };
-        };
-        Context.prototype.setFillStyle = function (color) {
-            this._ctx.fillStyle = color;
-        };
-        Context.prototype.fill = function (fillRule) {
-            return this._ctx.fill(fillRule || 'nonzero');
-        };
-        Context.prototype.arc = function (x, y, radius, startAngle, endAngle, anticlockwise) {
-            return this._ctx.arc(this._doSize(x), this._doSize(y), this._doSize(radius), startAngle, endAngle, anticlockwise);
-        };
-        Context.prototype.rect = function (x, y, w, h) {
-            return this._ctx.rect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
-        };
-        Context.prototype.fillRect = function (x, y, w, h) {
-            return this._ctx.fillRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
-        };
-        Context.prototype.clearRect = function (x, y, w, h) {
-            return this._ctx.clearRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
-        };
-        Context.prototype.beginPath = function () {
-            return this._ctx.beginPath();
-        };
-        Context.prototype.closePath = function () {
-            return this._ctx.closePath();
-        };
-        Context.prototype.lineTo = function (x, y) {
-            return this._ctx.lineTo(this._doSize(x), this._doSize(y));
-        };
-        Context.prototype.moveTo = function (x, y) {
-            return this._ctx.moveTo(this._doSize(x), this._doSize(y));
-        };
-        Context.prototype.arcTo = function (x1, y1, x2, y2, radius) {
-            return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
-        };
-        Context.prototype.setLineWidth = function (w) {
-            return this._ctx.lineWidth = this._doSize(w);
-        };
-        Context.prototype.setLineDash = function (nums) {
-            var _this = this;
-            return this._ctx.setLineDash(nums.map(function (n) { return _this._doSize(n); }));
-        };
-        Context.prototype.isPointInPath = function (x, y) {
-            return this._ctx.isPointInPath(this._doX(x), this._doY(y));
-        };
-        Context.prototype.isPointInPathWithoutScroll = function (x, y) {
-            return this._ctx.isPointInPath(this._doSize(x), this._doSize(y));
-        };
-        Context.prototype.setStrokeStyle = function (color) {
-            this._ctx.strokeStyle = color;
-        };
-        Context.prototype.stroke = function () {
-            return this._ctx.stroke();
-        };
-        Context.prototype.translate = function (x, y) {
-            return this._ctx.translate(this._doSize(x), this._doSize(y));
-        };
-        Context.prototype.rotate = function (angle) {
-            return this._ctx.rotate(angle);
-        };
-        Context.prototype.drawImage = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var image = args[0];
-            var sx = args[1];
-            var sy = args[2];
-            var sw = args[3];
-            var sh = args[4];
-            var dx = args[args.length - 4];
-            var dy = args[args.length - 3];
-            var dw = args[args.length - 2];
-            var 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));
-            }
-        };
-        Context.prototype.createPattern = function (image, repetition) {
-            return this._ctx.createPattern(image, repetition);
-        };
-        Context.prototype.measureText = function (text) {
-            return this._ctx.measureText(text);
-        };
-        Context.prototype.setTextAlign = function (align) {
-            this._ctx.textAlign = align;
-        };
-        Context.prototype.fillText = function (text, x, y, maxWidth) {
-            if (maxWidth !== undefined) {
-                return this._ctx.fillText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
-            }
-            else {
-                return this._ctx.fillText(text, this._doSize(x), this._doSize(y));
-            }
-        };
-        Context.prototype.strokeText = function (text, x, y, maxWidth) {
-            if (maxWidth !== undefined) {
-                return this._ctx.strokeText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
-            }
-            else {
-                return this._ctx.strokeText(text, this._doSize(x), this._doSize(y));
+    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);
+  }
+  function x(value) {
+    return number(value);
+  }
+  function y(value) {
+    return number(value);
+  }
+  function w(value) {
+    return typeof value === "number" && value >= 0;
+  }
+  function h(value) {
+    return typeof value === "number" && value >= 0;
+  }
+  function angle(value) {
+    return typeof value === "number" && value >= -360 && value <= 360;
+  }
+  function borderWidth(value) {
+    return w(value);
+  }
+  function borderRadius(value) {
+    return number(value) && value >= 0;
+  }
+  function color(value) {
+    return isColorStr(value);
+  }
+  function imageURL(value) {
+    return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`);
+  }
+  function imageBase64(value) {
+    return typeof value === "string" && /^(data:image\/)/.test(`${value}`);
+  }
+  function imageSrc(value) {
+    return imageBase64(value) || imageURL(value);
+  }
+  function svg(value) {
+    return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim());
+  }
+  function html(value) {
+    let result = false;
+    if (typeof value === "string") {
+      let div = document.createElement("div");
+      div.innerHTML = value;
+      if (div.children.length > 0) {
+        result = true;
+      }
+      div = null;
+    }
+    return result;
+  }
+  function text(value) {
+    return typeof value === "string";
+  }
+  function fontSize(value) {
+    return number(value) && value > 0;
+  }
+  function lineHeight(value) {
+    return number(value) && value > 0;
+  }
+  function strokeWidth(value) {
+    return number(value) && value > 0;
+  }
+  function textAlign(value) {
+    return ["center", "left", "right"].includes(value);
+  }
+  function fontFamily(value) {
+    return typeof value === "string" && value.length > 0;
+  }
+  function fontWeight(value) {
+    return ["bold"].includes(value);
+  }
+  const is = {
+    x,
+    y,
+    w,
+    h,
+    angle,
+    number,
+    borderWidth,
+    borderRadius,
+    color,
+    imageSrc,
+    imageURL,
+    imageBase64,
+    svg,
+    html,
+    text,
+    fontSize,
+    lineHeight,
+    textAlign,
+    fontFamily,
+    fontWeight,
+    strokeWidth
+  };
+  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) {
+    if (center && (radian > 0 || radian < 0)) {
+      ctx.translate(center.x, center.y);
+      ctx.rotate(radian);
+      ctx.translate(-center.x, -center.y);
+    }
+    callback(ctx);
+    if (center && (radian > 0 || radian < 0)) {
+      ctx.translate(center.x, center.y);
+      ctx.rotate(-radian);
+      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 drawBgColor(ctx, color2) {
+    const size = ctx.getSize();
+    ctx.setFillStyle(color2);
+    ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
+  }
+  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;
+      r = Math.min(r, w2 / 2, h2 / 2);
+      if (w2 < r * 2 || h2 < r * 2) {
+        r = 0;
+      }
+      ctx.beginPath();
+      ctx.moveTo(x2 + r, y2);
+      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
+      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
+      ctx.arcTo(x2, y2 + h2, x2, y2, r);
+      ctx.arcTo(x2, y2, x2 + w2, y2, r);
+      ctx.closePath();
+      if (typeof pattern === "string") {
+        ctx.setFillStyle(pattern);
+      } else if (["CanvasPattern"].includes(istype.type(pattern))) {
+        ctx.setFillStyle(pattern);
+      }
+      ctx.fill();
+    });
+  }
+  function drawBoxBorder(ctx, elem) {
+    clearContext(ctx);
+    rotateElement(ctx, elem, () => {
+      if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
+        return;
+      }
+      const bw = elem.desc.borderWidth;
+      let borderColor = "#000000";
+      if (isColorStr(elem.desc.borderColor) === true) {
+        borderColor = elem.desc.borderColor;
+      }
+      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;
+      }
+      const { desc } = elem;
+      if (desc.shadowColor !== void 0 && isColorStr(desc.shadowColor)) {
+        ctx.setShadowColor(desc.shadowColor);
+      }
+      if (desc.shadowOffsetX !== void 0 && is.number(desc.shadowOffsetX)) {
+        ctx.setShadowOffsetX(desc.shadowOffsetX);
+      }
+      if (desc.shadowOffsetY !== void 0 && is.number(desc.shadowOffsetY)) {
+        ctx.setShadowOffsetY(desc.shadowOffsetY);
+      }
+      if (desc.shadowBlur !== void 0 && is.number(desc.shadowBlur)) {
+        ctx.setShadowBlur(desc.shadowBlur);
+      }
+      ctx.beginPath();
+      ctx.setLineWidth(bw);
+      ctx.setStrokeStyle(borderColor);
+      ctx.moveTo(x2 + r, y2);
+      ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
+      ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
+      ctx.arcTo(x2, y2 + h2, x2, y2, r);
+      ctx.arcTo(x2, y2, x2 + w2, y2, r);
+      ctx.closePath();
+      ctx.stroke();
+    });
+  }
+  function drawRect(ctx, elem) {
+    drawBox(ctx, elem, elem.desc.bgColor);
+  }
+  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 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 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 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/ig, "\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] || "";
+            } else {
+              lines.push({
+                text: lineText,
+                width: ctx.calcScreenNum(ctx.measureText(lineText).width)
+              });
+              lineText = tempText[i] || "";
+              lineNum++;
             }
-        };
-        Context.prototype.setFont = function (opts) {
-            var strList = [];
-            if (opts.fontWeight === 'bold') {
-                strList.push("".concat(opts.fontWeight));
+            if ((lineNum + 1) * fontHeight > elem.h) {
+              break;
             }
-            strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
-            strList.push("".concat(opts.fontFamily || 'sans-serif'));
-            this._ctx.font = "".concat(strList.join(' '));
-        };
-        Context.prototype.setTextBaseline = function (baseline) {
-            this._ctx.textBaseline = baseline;
-        };
-        Context.prototype.setGlobalAlpha = function (alpha) {
-            this._ctx.globalAlpha = alpha;
-        };
-        Context.prototype.save = function () {
-            this._ctx.save();
-        };
-        Context.prototype.restore = function () {
-            this._ctx.restore();
-        };
-        Context.prototype.scale = function (ratioX, ratioY) {
-            this._ctx.scale(ratioX, ratioY);
-        };
-        Context.prototype.setShadowColor = function (color) {
-            this._ctx.shadowColor = color;
-        };
-        Context.prototype.setShadowOffsetX = function (offsetX) {
-            this._ctx.shadowOffsetX = this._doSize(offsetX);
-        };
-        Context.prototype.setShadowOffsetY = function (offsetY) {
-            this._ctx.shadowOffsetY = this._doSize(offsetY);
-        };
-        Context.prototype.setShadowBlur = function (blur) {
-            this._ctx.shadowBlur = this._doSize(blur);
-        };
-        Context.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-            this._ctx.ellipse(this._doSize(x), this._doSize(y), this._doSize(radiusX), this._doSize(radiusY), rotation, startAngle, endAngle, counterclockwise);
-        };
-        Context.prototype._doSize = function (num) {
-            return this._opts.devicePixelRatio * num;
-        };
-        Context.prototype._doX = function (x) {
-            var _a = this._transform, scale = _a.scale, scrollX = _a.scrollX;
-            var _x = (x - scrollX) / scale;
-            return this._doSize(_x);
-        };
-        Context.prototype._doY = function (y) {
-            var _a = this._transform, scale = _a.scale, scrollY = _a.scrollY;
-            var _y = (y - scrollY) / scale;
-            return this._doSize(_y);
-        };
-        return Context;
-    }());
-    function number(value) {
-        return (typeof value === 'number' && (value > 0 || value <= 0));
-    }
-    function x(value) {
-        return number(value);
-    }
-    function y(value) {
-        return number(value);
-    }
-    function w(value) {
-        return (typeof value === 'number' && value >= 0);
-    }
-    function h(value) {
-        return (typeof value === 'number' && value >= 0);
-    }
-    function angle(value) {
-        return (typeof value === 'number' && value >= -360 && value <= 360);
-    }
-    function borderWidth(value) {
-        return w(value);
-    }
-    function borderRadius(value) {
-        return number(value) && value >= 0;
-    }
-    function color(value) {
-        return isColorStr(value);
-    }
-    function imageURL(value) {
-        return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
-    }
-    function imageBase64(value) {
-        return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
-    }
-    function imageSrc(value) {
-        return (imageBase64(value) || imageURL(value));
-    }
-    function svg(value) {
-        return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
-    }
-    function html(value) {
-        var result = false;
-        if (typeof value === 'string') {
-            var div = document.createElement('div');
-            div.innerHTML = value;
-            if (div.children.length > 0) {
-                result = true;
+            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;
+              }
             }
-            div = null;
+          }
+        } else {
+          lines.push({
+            text: "",
+            width: 0
+          });
         }
-        return result;
-    }
-    function text(value) {
-        return typeof value === 'string';
-    }
-    function fontSize(value) {
-        return number(value) && value > 0;
-    }
-    function lineHeight(value) {
-        return number(value) && value > 0;
-    }
-    function strokeWidth(value) {
-        return number(value) && value > 0;
-    }
-    function textAlign(value) {
-        return ['center', 'left', 'right'].includes(value);
-    }
-    function fontFamily(value) {
-        return typeof value === 'string' && value.length > 0;
-    }
-    function fontWeight(value) {
-        return ['bold'].includes(value);
-    }
-    var is = {
-        x: x,
-        y: y,
-        w: w,
-        h: h,
-        angle: angle,
-        number: number,
-        borderWidth: borderWidth,
-        borderRadius: borderRadius,
-        color: color,
-        imageSrc: imageSrc,
-        imageURL: imageURL,
-        imageBase64: imageBase64,
-        svg: svg,
-        html: html,
-        text: text,
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-        textAlign: textAlign,
-        fontFamily: fontFamily,
-        fontWeight: fontWeight,
-        strokeWidth: strokeWidth,
-    };
-    function attrs(attrs) {
-        var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
-        if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
-            return false;
+      });
+      {
+        let _y = elem.y;
+        if (lines.length * fontHeight < elem.h) {
+          _y += (elem.h - lines.length * fontHeight) / 2;
         }
-        if (!(angle >= -360 && angle <= 360)) {
-            return false;
+        if (desc.textShadowColor !== void 0 && isColorStr(desc.textShadowColor)) {
+          ctx.setShadowColor(desc.textShadowColor);
         }
-        return true;
-    }
-    function box(desc) {
-        if (desc === void 0) { desc = {}; }
-        var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
-        if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
-            return false;
+        if (desc.textShadowOffsetX !== void 0 && is.number(desc.textShadowOffsetX)) {
+          ctx.setShadowOffsetX(desc.textShadowOffsetX);
         }
-        if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
-            return false;
+        if (desc.textShadowOffsetY !== void 0 && is.number(desc.textShadowOffsetY)) {
+          ctx.setShadowOffsetY(desc.textShadowOffsetY);
         }
-        if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
-            return false;
+        if (desc.textShadowBlur !== void 0 && is.number(desc.textShadowBlur)) {
+          ctx.setShadowBlur(desc.textShadowBlur);
         }
-        return true;
+        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) {
+        let _y = elem.y;
+        if (lines.length * fontHeight < elem.h) {
+          _y += (elem.h - lines.length * fontHeight) / 2;
+        }
+        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 drawContext(ctx, data, loader) {
+    var _a2;
+    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)) {
+      return;
     }
-    function rectDesc(desc) {
-        var bgColor = desc.bgColor;
-        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
-            return false;
+    for (let i = 0; i < data.elements.length; i++) {
+      const elem = data.elements[i];
+      if (((_a2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _a2.invisible) === true) {
+        continue;
+      }
+      switch (elem.type) {
+        case "rect": {
+          drawRect(ctx, elem);
+          break;
         }
-        if (!box(desc)) {
-            return false;
+        case "text": {
+          drawText(ctx, elem);
+          break;
         }
-        return true;
-    }
-    function circleDesc(desc) {
-        var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
-        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
-            return false;
+        case "image": {
+          drawImage(ctx, elem, loader);
+          break;
         }
-        if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
-            return false;
+        case "svg": {
+          drawSVG(ctx, elem, loader);
+          break;
         }
-        if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
-            return false;
+        case "html": {
+          drawHTML(ctx, elem, loader);
+          break;
         }
-        return true;
+        case "circle": {
+          drawCircle(ctx, elem);
+          break;
+        }
+      }
+    }
+  }
+  class LoaderEvent {
+    constructor() {
+      this._listeners = /* @__PURE__ */ new Map();
     }
-    function imageDesc(desc) {
-        var src = desc.src;
-        if (!is.imageSrc(src)) {
-            return false;
+    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;
+            }
+          }
         }
+        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 svgDesc(desc) {
-        var svg = desc.svg;
-        if (!is.svg(svg)) {
-            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 true;
+      }
+      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
+        });
+      }
+    }
+    on(name, callback) {
+      this._event.on(name, callback);
+    }
+    off(name, callback) {
+      this._event.off(name, callback);
+    }
+    isComplete() {
+      return this._status === "complete";
     }
-    function htmlDesc(desc) {
-        var html = desc.html;
-        if (!is.html(html)) {
-            return false;
+    getContent(uuid) {
+      var _a2;
+      if (((_a2 = this._storageLoadData[uuid]) == null ? void 0 : _a2.status) === "loaded") {
+        return this._storageLoadData[uuid].content;
+      }
+      return null;
+    }
+    // getPattern(
+    //   elem: TypeElement<keyof TypeElemDesc>,
+    //   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 true;
+      }
+      return [uuidQueue, loadData];
     }
-    function textDesc(desc) {
-        var text = desc.text, color = desc.color, fontSize = desc.fontSize, lineHeight = desc.lineHeight, fontFamily = desc.fontFamily, textAlign = desc.textAlign, fontWeight = desc.fontWeight, bgColor = desc.bgColor, strokeWidth = desc.strokeWidth, strokeColor = desc.strokeColor;
-        if (!is.text(text)) {
-            return false;
+    _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;
+      }
+      return {
+        uuid: elem.uuid,
+        type,
+        status: "null",
+        content: null,
+        source,
+        elemW,
+        elemH,
+        element: deepClone(elem)
+      };
+    }
+    _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;
+          }
         }
-        if (!is.color(color)) {
-            return false;
+      }
+      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 (!is.fontSize(fontSize)) {
-            return false;
+        if (uuids.length === 0) {
+          return true;
         }
-        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
-            return false;
+        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 _a2, _b2;
+            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: (_a2 = this._storageLoadData[uuid]) == null ? void 0 : _a2.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: (_b2 = this._storageLoadData[uuid]) == null ? void 0 : _b2.element
+            });
+          }).catch((err) => {
+            var _a2, _b2, _c2, _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: (_a2 = this._currentLoadData[uuid]) == null ? void 0 : _a2.type,
+                status: "fail",
+                content: null,
+                error: err,
+                source: (_b2 = this._currentLoadData[uuid]) == null ? void 0 : _b2.source,
+                elemW: (_c2 = this._currentLoadData[uuid]) == null ? void 0 : _c2.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
+              });
+            }
+          });
         }
-        if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
-            return false;
+        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]);
+      }
+    }
+    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;
+            }
+          }
         }
-        if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
-            return false;
+        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;
+      }
+    }
+    has(name) {
+      if (this._listeners.has(name)) {
+        const list = this._listeners.get(name);
+        if (Array.isArray(list) && list.length > 0) {
+          return true;
         }
-        if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
-            return false;
+      }
+      return false;
+    }
+  }
+  const _queue = Symbol("_queue");
+  const _ctx = Symbol("_ctx");
+  const _status = Symbol("_status");
+  const _loader = Symbol("_loader");
+  const _opts = Symbol("_opts");
+  const _freeze = Symbol("_freeze");
+  const _drawFrame = Symbol("_drawFrame");
+  const _retainQueueOneItem = Symbol("_retainQueueOneItem");
+  var _a, _b, _c;
+  const { requestAnimationFrame } = window;
+  class Renderer extends RendererEvent {
+    constructor(opts) {
+      super();
+      this[_a] = [];
+      this[_b] = null;
+      this[_c] = "null";
+      this[_opts] = opts;
+      this[_loader] = new Loader({
+        maxParallelNum: 6
+      });
+      this[_loader].on("load", (res) => {
+        this[_drawFrame]();
+        this.trigger("load", { element: res.element });
+      });
+      this[_loader].on("error", (res) => {
+        this.trigger("error", { element: res.element, error: res.error });
+      });
+      this[_loader].on("complete", () => {
+        this.trigger("loadComplete", { t: Date.now() });
+      });
+    }
+    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, {
+            width,
+            height,
+            contextWidth: contextWidth || width,
+            contextHeight: contextHeight || height,
+            devicePixelRatio
+          });
+        } else if (target) {
+          this[_ctx] = target;
         }
-        if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
-            return false;
+      }
+      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";
+    }
+    [(_a = _queue, _b = _ctx, _c = _status, _freeze)]() {
+      this[_status] = "freeze";
+    }
+    [_drawFrame]() {
+      if (this[_status] === "freeze") {
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (this[_status] === "freeze") {
+          return;
         }
-        if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
-            return false;
+        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 (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
-            return false;
+        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";
         }
-        if (!box(desc)) {
-            return false;
+        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]();
         }
-        return true;
+      });
     }
-    var check = {
-        attrs: attrs,
-        textDesc: textDesc,
-        rectDesc: rectDesc,
-        circleDesc: circleDesc,
-        imageDesc: imageDesc,
-        svgDesc: svgDesc,
-        htmlDesc: htmlDesc,
-    };
-    Object.freeze({
-      __proto__: null,
-      is: is,
-      check: check,
-      delay: delay,
-      compose: compose,
-      throttle: throttle,
-      loadImage: loadImage,
-      loadSVG: loadSVG,
-      loadHTML: loadHTML,
-      downloadImageFromCanvas: downloadImageFromCanvas,
-      toColorHexStr: toColorHexStr,
-      toColorHexNum: toColorHexNum,
-      isColorStr: isColorStr,
-      createUUID: createUUID,
-      istype: istype,
-      deepClone: deepClone,
-      Context: Context
-    });
-
-    function parseAngleToRadian(angle) {
-        return angle / 180 * Math.PI;
-    }
-    function calcElementCenter(elem) {
-        var p = {
-            x: elem.x + elem.w / 2,
-            y: elem.y + elem.h / 2,
-        };
-        return p;
-    }
-
-    function rotateElement(ctx, elem, callback) {
-        var center = calcElementCenter(elem);
-        var radian = parseAngleToRadian(elem.angle || 0);
-        return rotateContext(ctx, center, radian || 0, callback);
-    }
-    function rotateContext(ctx, center, radian, callback) {
-        if (center && (radian > 0 || radian < 0)) {
-            ctx.translate(center.x, center.y);
-            ctx.rotate(radian);
-            ctx.translate(-center.x, -center.y);
-        }
-        callback(ctx);
-        if (center && (radian > 0 || radian < 0)) {
-            ctx.translate(center.x, center.y);
-            ctx.rotate(-radian);
-            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 drawBgColor(ctx, color) {
-        var size = ctx.getSize();
-        ctx.setFillStyle(color);
-        ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
-    }
-    function drawBox(ctx, elem, pattern) {
-        clearContext(ctx);
-        drawBoxBorder(ctx, elem);
-        clearContext(ctx);
-        rotateElement(ctx, elem, function () {
-            var x = elem.x, y = elem.y, w = elem.w, h = elem.h;
-            var r = elem.desc.borderRadius || 0;
-            r = Math.min(r, w / 2, h / 2);
-            if (w < r * 2 || h < r * 2) {
-                r = 0;
-            }
-            ctx.beginPath();
-            ctx.moveTo(x + r, y);
-            ctx.arcTo(x + w, y, x + w, y + h, r);
-            ctx.arcTo(x + w, y + h, x, y + h, r);
-            ctx.arcTo(x, y + h, x, y, r);
-            ctx.arcTo(x, y, x + w, y, r);
-            ctx.closePath();
-            if (typeof pattern === 'string') {
-                ctx.setFillStyle(pattern);
-            }
-            else if (['CanvasPattern'].includes(istype.type(pattern))) {
-                ctx.setFillStyle(pattern);
-            }
-            ctx.fill();
-        });
-    }
-    function drawBoxBorder(ctx, elem) {
-        clearContext(ctx);
-        rotateElement(ctx, elem, function () {
-            if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
-                return;
-            }
-            var bw = elem.desc.borderWidth;
-            var borderColor = '#000000';
-            if (isColorStr(elem.desc.borderColor) === true) {
-                borderColor = elem.desc.borderColor;
-            }
-            var x = elem.x - bw / 2;
-            var y = elem.y - bw / 2;
-            var w = elem.w + bw;
-            var h = elem.h + bw;
-            var r = elem.desc.borderRadius || 0;
-            r = Math.min(r, w / 2, h / 2);
-            if (r < w / 2 && r < h / 2) {
-                r = r + bw / 2;
-            }
-            var desc = elem.desc;
-            if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
-                ctx.setShadowColor(desc.shadowColor);
-            }
-            if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
-                ctx.setShadowOffsetX(desc.shadowOffsetX);
-            }
-            if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
-                ctx.setShadowOffsetY(desc.shadowOffsetY);
-            }
-            if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
-                ctx.setShadowBlur(desc.shadowBlur);
-            }
-            ctx.beginPath();
-            ctx.setLineWidth(bw);
-            ctx.setStrokeStyle(borderColor);
-            ctx.moveTo(x + r, y);
-            ctx.arcTo(x + w, y, x + w, y + h, r);
-            ctx.arcTo(x + w, y + h, x, y + h, r);
-            ctx.arcTo(x, y + h, x, y, r);
-            ctx.arcTo(x, y, x + w, y, r);
-            ctx.closePath();
-            ctx.stroke();
-        });
-    }
-
-    function drawRect(ctx, elem) {
-        drawBox(ctx, elem, elem.desc.bgColor);
-    }
-
-    function drawImage(ctx, elem, loader) {
-        var content = loader.getContent(elem.uuid);
-        rotateElement(ctx, elem, function () {
-            if (content) {
-                ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
-            }
-        });
-    }
-
-    function drawSVG(ctx, elem, loader) {
-        var content = loader.getContent(elem.uuid);
-        rotateElement(ctx, elem, function () {
-            if (content) {
-                ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
-            }
-        });
-    }
-
-    function drawHTML(ctx, elem, loader) {
-        var content = loader.getContent(elem.uuid);
-        rotateElement(ctx, elem, function () {
-            if (content) {
-                ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
-            }
-        });
-    }
-
-    function drawText(ctx, elem, loader) {
-        clearContext(ctx);
-        drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
-        rotateElement(ctx, elem, function () {
-            var desc = __assign$1({
-                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
-            });
-            var descText = desc.text.replace(/\r\n/ig, '\n');
-            var fontHeight = desc.lineHeight || desc.fontSize;
-            var descTextList = descText.split('\n');
-            var lines = [];
-            var lineNum = 0;
-            descTextList.forEach(function (tempText, idx) {
-                var lineText = '';
-                if (tempText.length > 0) {
-                    for (var i = 0; i < tempText.length; i++) {
-                        if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
-                            lineText += (tempText[i] || '');
-                        }
-                        else {
-                            lines.push({
-                                text: lineText,
-                                width: ctx.calcScreenNum(ctx.measureText(lineText).width),
-                            });
-                            lineText = (tempText[i] || '');
-                            lineNum++;
-                        }
-                        if ((lineNum + 1) * fontHeight > elem.h) {
-                            break;
-                        }
-                        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;
-                            }
-                        }
-                    }
-                }
-                else {
-                    lines.push({
-                        text: '',
-                        width: 0,
-                    });
-                }
-            });
-            {
-                var _y_1 = elem.y;
-                if (lines.length * fontHeight < elem.h) {
-                    _y_1 += ((elem.h - lines.length * fontHeight) / 2);
-                }
-                if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
-                    ctx.setShadowColor(desc.textShadowColor);
-                }
-                if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
-                    ctx.setShadowOffsetX(desc.textShadowOffsetX);
-                }
-                if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
-                    ctx.setShadowOffsetY(desc.textShadowOffsetY);
-                }
-                if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
-                    ctx.setShadowBlur(desc.textShadowBlur);
-                }
-                lines.forEach(function (line, i) {
-                    var _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_1 + fontHeight * i);
-                });
-                clearContext(ctx);
-            }
-            if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
-                var _y_2 = elem.y;
-                if (lines.length * fontHeight < elem.h) {
-                    _y_2 += ((elem.h - lines.length * fontHeight) / 2);
-                }
-                lines.forEach(function (line, i) {
-                    var _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 !== undefined) {
-                        ctx.setStrokeStyle(desc.strokeColor);
-                    }
-                    if (desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
-                        ctx.setLineWidth(desc.strokeWidth);
-                    }
-                    ctx.strokeText(line.text, _x, _y_2 + fontHeight * i);
-                });
-            }
-        });
-    }
-
-    function drawCircle(ctx, elem) {
-        clearContext(ctx);
-        rotateElement(ctx, elem, function (ctx) {
-            var x = elem.x, y = elem.y, w = elem.w, h = elem.h, desc = elem.desc;
-            var _a = desc.bgColor, bgColor = _a === void 0 ? '#000000' : _a, _b = desc.borderColor, borderColor = _b === void 0 ? '#000000' : _b, _c = desc.borderWidth, borderWidth = _c === void 0 ? 0 : _c;
-            var a = w / 2;
-            var b = h / 2;
-            var centerX = x + a;
-            var centerY = y + b;
-            if (borderWidth && borderWidth > 0) {
-                var ba = borderWidth / 2 + a;
-                var bb = borderWidth / 2 + b;
-                ctx.beginPath();
-                ctx.setStrokeStyle(borderColor);
-                ctx.setLineWidth(borderWidth);
-                ctx.ellipse(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
-                ctx.closePath();
-                ctx.stroke();
-            }
-            ctx.beginPath();
-            ctx.setFillStyle(bgColor);
-            ctx.ellipse(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-            ctx.closePath();
-            ctx.fill();
-        });
-    }
-
-    function drawContext(ctx, data, loader) {
-        var _a;
-        clearContext(ctx);
-        var 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)) {
-            return;
-        }
-        for (var i = 0; i < data.elements.length; i++) {
-            var elem = data.elements[i];
-            if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
-                continue;
-            }
-            switch (elem.type) {
-                case 'rect': {
-                    drawRect(ctx, elem);
-                    break;
-                }
-                case 'text': {
-                    drawText(ctx, elem);
-                    break;
-                }
-                case 'image': {
-                    drawImage(ctx, elem, loader);
-                    break;
-                }
-                case 'svg': {
-                    drawSVG(ctx, elem, loader);
-                    break;
-                }
-                case 'html': {
-                    drawHTML(ctx, elem, loader);
-                    break;
-                }
-                case 'circle': {
-                    drawCircle(ctx, elem);
-                    break;
-                }
-            }
-        }
-    }
-
-    var LoaderEvent = (function () {
-        function LoaderEvent() {
-            this._listeners = new Map();
-        }
-        LoaderEvent.prototype.on = function (eventKey, callback) {
-            if (this._listeners.has(eventKey)) {
-                var 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]);
-            }
-        };
-        LoaderEvent.prototype.off = function (eventKey, callback) {
-            if (this._listeners.has(eventKey)) {
-                var callbacks = this._listeners.get(eventKey);
-                if (Array.isArray(callbacks)) {
-                    for (var 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 || []);
-            }
-        };
-        LoaderEvent.prototype.trigger = function (eventKey, arg) {
-            var callbacks = this._listeners.get(eventKey);
-            if (Array.isArray(callbacks)) {
-                callbacks.forEach(function (cb) {
-                    cb(arg);
-                });
-                return true;
-            }
-            else {
-                return false;
-            }
-        };
-        LoaderEvent.prototype.has = function (name) {
-            if (this._listeners.has(name)) {
-                var list = this._listeners.get(name);
-                if (Array.isArray(list) && list.length > 0) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        return LoaderEvent;
-    }());
-
-    function filterScript(html) {
-        return html.replace(/<script[\s\S]*?<\/script>/ig, '');
-    }
-
-    var LoaderStatus;
-    (function (LoaderStatus) {
-        LoaderStatus["FREE"] = "free";
-        LoaderStatus["LOADING"] = "loading";
-        LoaderStatus["COMPLETE"] = "complete";
-    })(LoaderStatus || (LoaderStatus = {}));
-    var Loader = (function () {
-        function Loader(opts) {
-            this._currentLoadData = {};
-            this._currentUUIDQueue = [];
-            this._storageLoadData = {};
-            this._status = LoaderStatus.FREE;
-            this._waitingLoadQueue = [];
-            this._opts = opts;
-            this._event = new LoaderEvent();
-            this._waitingLoadQueue = [];
-        }
-        Loader.prototype.load = function (data, changeResourceUUIDs) {
-            var _a = this._resetLoadData(data, changeResourceUUIDs), uuidQueue = _a[0], loadData = _a[1];
-            if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
-                this._currentUUIDQueue = uuidQueue;
-                this._currentLoadData = loadData;
-                this._loadTask();
-            }
-            else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
-                this._waitingLoadQueue.push({
-                    uuidQueue: uuidQueue,
-                    loadData: loadData,
-                });
-            }
-        };
-        Loader.prototype.on = function (name, callback) {
-            this._event.on(name, callback);
-        };
-        Loader.prototype.off = function (name, callback) {
-            this._event.off(name, callback);
-        };
-        Loader.prototype.isComplete = function () {
-            return this._status === LoaderStatus.COMPLETE;
-        };
-        Loader.prototype.getContent = function (uuid) {
-            var _a;
-            if (((_a = this._storageLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.status) === 'loaded') {
-                return this._storageLoadData[uuid].content;
-            }
-            return null;
-        };
-        Loader.prototype._resetLoadData = function (data, changeResourceUUIDs) {
-            var loadData = {};
-            var uuidQueue = [];
-            var storageLoadData = this._storageLoadData;
-            for (var i = data.elements.length - 1; i >= 0; i--) {
-                var 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];
-        };
-        Loader.prototype._createEmptyLoadItem = function (elem) {
-            var source = '';
-            var type = elem.type;
-            var elemW = elem.w;
-            var elemH = elem.h;
-            if (elem.type === 'image') {
-                var _elem = elem;
-                source = _elem.desc.src || '';
-            }
-            else if (elem.type === 'svg') {
-                var _elem = elem;
-                source = _elem.desc.svg || '';
-            }
-            else if (elem.type === 'html') {
-                var _elem = elem;
-                source = filterScript(_elem.desc.html || '');
-                elemW = _elem.desc.width || elem.w;
-                elemH = _elem.desc.height || elem.h;
-            }
-            return {
-                uuid: elem.uuid,
-                type: type,
-                status: 'null',
-                content: null,
-                source: source,
-                elemW: elemW,
-                elemH: elemH,
-                element: deepClone(elem),
-            };
-        };
-        Loader.prototype._loadTask = function () {
-            var _this = this;
-            if (this._status === LoaderStatus.LOADING) {
-                return;
-            }
-            this._status = LoaderStatus.LOADING;
-            if (this._currentUUIDQueue.length === 0) {
-                if (this._waitingLoadQueue.length === 0) {
-                    this._status = LoaderStatus.COMPLETE;
-                    this._event.trigger('complete', undefined);
-                    return;
-                }
-                else {
-                    var waitingItem = this._waitingLoadQueue.shift();
-                    if (waitingItem) {
-                        var uuidQueue = waitingItem.uuidQueue, loadData = waitingItem.loadData;
-                        this._currentLoadData = loadData;
-                        this._currentUUIDQueue = uuidQueue;
-                    }
-                }
-            }
-            var maxParallelNum = this._opts.maxParallelNum;
-            var uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
-            uuids.forEach(function (url, i) {
-            });
-            var loadUUIDList = [];
-            var _loadAction = function () {
-                if (loadUUIDList.length >= maxParallelNum) {
-                    return false;
-                }
-                if (uuids.length === 0) {
-                    return true;
-                }
-                var _loop_1 = function (i) {
-                    var uuid = uuids.shift();
-                    if (uuid === undefined) {
-                        return "break";
-                    }
-                    loadUUIDList.push(uuid);
-                    _this._loadElementSource(_this._currentLoadData[uuid]).then(function (image) {
-                        var _a, _b;
-                        loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-                        var status = _loadAction();
-                        _this._storageLoadData[uuid] = {
-                            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 = LoaderStatus.FREE;
-                            _this._loadTask();
-                        }
-                        _this._event.trigger('load', {
-                            uuid: (_a = _this._storageLoadData[uuid]) === null || _a === void 0 ? 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 || _b === void 0 ? void 0 : _b.element,
-                        });
-                    }).catch(function (err) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                        console.warn(err);
-                        loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-                        var status = _loadAction();
-                        if (_this._currentLoadData[uuid]) {
-                            _this._storageLoadData[uuid] = {
-                                uuid: uuid,
-                                type: (_a = _this._currentLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.type,
-                                status: 'fail',
-                                content: null,
-                                error: err,
-                                source: (_b = _this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
-                                elemW: (_c = _this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.elemW,
-                                elemH: (_d = _this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
-                                element: (_e = _this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element,
-                            };
-                        }
-                        if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-                            _this._status = LoaderStatus.FREE;
-                            _this._loadTask();
-                        }
-                        if (_this._currentLoadData[uuid]) {
-                            _this._event.trigger('error', {
-                                uuid: uuid,
-                                type: (_f = _this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.type,
-                                status: (_g = _this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.status,
-                                content: (_h = _this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.content,
-                                source: (_j = _this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.source,
-                                elemW: (_k = _this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemW,
-                                elemH: (_l = _this._storageLoadData[uuid]) === null || _l === void 0 ? void 0 : _l.elemH,
-                                element: (_m = _this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element,
-                            });
-                        }
-                    });
-                };
-                for (var i = loadUUIDList.length; i < maxParallelNum; i++) {
-                    var state_1 = _loop_1();
-                    if (state_1 === "break")
-                        break;
-                }
-                return false;
-            };
-            _loadAction();
-        };
-        Loader.prototype._loadElementSource = function (params) {
-            return __awaiter$1(this, void 0, void 0, function () {
-                var image, image, image;
-                return __generator$1(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!(params && params.type === 'image')) return [3, 2];
-                            return [4, loadImage(params.source)];
-                        case 1:
-                            image = _a.sent();
-                            return [2, image];
-                        case 2:
-                            if (!(params && params.type === 'svg')) return [3, 4];
-                            return [4, loadSVG(params.source)];
-                        case 3:
-                            image = _a.sent();
-                            return [2, image];
-                        case 4:
-                            if (!(params && params.type === 'html')) return [3, 6];
-                            return [4, loadHTML(params.source, {
-                                    width: params.elemW, height: params.elemH
-                                })];
-                        case 5:
-                            image = _a.sent();
-                            return [2, image];
-                        case 6: throw Error('Element\'s source is not support!');
-                    }
-                });
-            });
-        };
-        return Loader;
-    }());
-
-    var RendererEvent = (function () {
-        function RendererEvent() {
-            this._listeners = new Map();
-        }
-        RendererEvent.prototype.on = function (eventKey, callback) {
-            if (this._listeners.has(eventKey)) {
-                var 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]);
-            }
-        };
-        RendererEvent.prototype.off = function (eventKey, callback) {
-            if (this._listeners.has(eventKey)) {
-                var callbacks = this._listeners.get(eventKey);
-                if (Array.isArray(callbacks)) {
-                    for (var 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 || []);
-            }
-        };
-        RendererEvent.prototype.trigger = function (eventKey, arg) {
-            var callbacks = this._listeners.get(eventKey);
-            if (Array.isArray(callbacks)) {
-                callbacks.forEach(function (cb) {
-                    cb(arg);
-                });
-                return true;
-            }
-            else {
-                return false;
-            }
-        };
-        RendererEvent.prototype.has = function (name) {
-            if (this._listeners.has(name)) {
-                var list = this._listeners.get(name);
-                if (Array.isArray(list) && list.length > 0) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        return RendererEvent;
-    }());
-
-    var _queue = Symbol('_queue');
-    var _ctx = Symbol('_ctx');
-    var _status = Symbol('_status');
-    var _loader = Symbol('_loader');
-    var _opts = Symbol('_opts');
-    var _freeze = Symbol('_freeze');
-    var _drawFrame = Symbol('_drawFrame');
-    var _retainQueueOneItem = Symbol('_retainQueueOneItem');
-
-    var _a, _b, _c;
-    var requestAnimationFrame = window.requestAnimationFrame;
-    var DrawStatus;
-    (function (DrawStatus) {
-        DrawStatus["NULL"] = "null";
-        DrawStatus["FREE"] = "free";
-        DrawStatus["DRAWING"] = "drawing";
-        DrawStatus["FREEZE"] = "freeze";
-    })(DrawStatus || (DrawStatus = {}));
-    var Renderer = (function (_super) {
-        __extends(Renderer, _super);
-        function Renderer(opts) {
-            var _this = _super.call(this) || this;
-            _this[_a] = [];
-            _this[_b] = null;
-            _this[_c] = DrawStatus.NULL;
-            _this[_opts] = opts;
-            _this[_loader] = new Loader({
-                maxParallelNum: 6
-            });
-            _this[_loader].on('load', function (res) {
-                _this[_drawFrame]();
-                _this.trigger('load', { element: res.element });
-            });
-            _this[_loader].on('error', function (res) {
-                _this.trigger('error', { element: res.element, error: res.error });
-            });
-            _this[_loader].on('complete', function () {
-                _this.trigger('loadComplete', { t: Date.now() });
-            });
-            return _this;
-        }
-        Renderer.prototype.render = function (target, originData, opts) {
-            var _d = (opts || {}).changeResourceUUIDs, changeResourceUUIDs = _d === void 0 ? [] : _d;
-            this[_status] = DrawStatus.FREE;
-            var data = deepClone(originData);
-            if (Array.isArray(data.elements)) {
-                data.elements.forEach(function (elem) {
-                    if (!(typeof elem.uuid === 'string' && elem.uuid)) {
-                        elem.uuid = createUUID();
-                    }
-                });
-            }
-            if (!this[_ctx]) {
-                if (this[_opts] && Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') {
-                    var _e = this[_opts], width = _e.width, height = _e.height, contextWidth = _e.contextWidth, contextHeight = _e.contextHeight, devicePixelRatio_1 = _e.devicePixelRatio;
-                    var canvas = target;
-                    canvas.width = width * devicePixelRatio_1;
-                    canvas.height = height * devicePixelRatio_1;
-                    var ctx2d = canvas.getContext('2d');
-                    this[_ctx] = new Context(ctx2d, {
-                        width: width,
-                        height: height,
-                        contextWidth: contextWidth || width,
-                        contextHeight: contextHeight || height,
-                        devicePixelRatio: devicePixelRatio_1
-                    });
-                }
-                else if (target) {
-                    this[_ctx] = target;
-                }
-            }
-            if ([DrawStatus.FREEZE].includes(this[_status])) {
-                return;
-            }
-            var _data = deepClone({ data: data, });
-            this[_queue].push(_data);
-            this[_drawFrame]();
-            this[_loader].load(data, changeResourceUUIDs || []);
-        };
-        Renderer.prototype.getContext = function () {
-            return this[_ctx];
-        };
-        Renderer.prototype.thaw = function () {
-            this[_status] = DrawStatus.FREE;
-        };
-        Renderer.prototype[(_a = _queue, _b = _ctx, _c = _status, _freeze)] = function () {
-            this[_status] = DrawStatus.FREEZE;
-        };
-        Renderer.prototype[_drawFrame] = function () {
-            var _this = this;
-            if (this[_status] === DrawStatus.FREEZE) {
-                return;
-            }
-            requestAnimationFrame(function () {
-                if (_this[_status] === DrawStatus.FREEZE) {
-                    return;
-                }
-                var ctx = _this[_ctx];
-                var item = _this[_queue][0];
-                var 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] = DrawStatus.FREE;
-                    }
-                }
-                else {
-                    _this[_status] = DrawStatus.FREE;
-                }
-                _this.trigger('drawFrame', { t: Date.now() });
-                if (_this[_loader].isComplete() === true && _this[_queue].length === 1 && _this[_status] === DrawStatus.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]();
-                }
-            });
-        };
-        Renderer.prototype[_retainQueueOneItem] = function () {
-            if (this[_queue].length <= 1) {
-                return;
-            }
-            var lastOne = deepClone(this[_queue][this[_queue].length - 1]);
-            this[_queue] = [lastOne];
-        };
-        return Renderer;
-    }(RendererEvent));
-
-    var default_1 = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        Renderer: Renderer
-    });
-
-    return default_1;
-
-})();
+    [_retainQueueOneItem]() {
+      if (this[_queue].length <= 1) {
+        return;
+      }
+      const lastOne = deepClone(this[_queue][this[_queue].length - 1]);
+      this[_queue] = [lastOne];
+    }
+  }
+  return Renderer;
+}();