@idraw/core 0.2.0-alpha.21 → 0.2.0-alpha.25

package/dist/index.es.js

@@ -1,16 +1,3 @@
-var extendStatics$1 = function(d, b) {
-    extendStatics$1 = 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$1(d, b);
-};
-function __extends$1(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics$1(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
 var __assign$4 = function() {
     __assign$4 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,42 +8,6 @@ var __assign$4 = function() {
     };
     return __assign$4.apply(this, arguments);
 };
-function __awaiter$4(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());
-    });
-}
-function __generator$4(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 };
-    }
-}
 
 var __assign$1$1 = function() {
     __assign$1$1 = Object.assign || function __assign(t) {
@@ -133,9 +84,9 @@ function createUUID$4() {
     function str4() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
-    return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
 }
-function deepClone$7(target) {
+function deepClone$6(target) {
     function _clone(t) {
         var type = is$1$3(t);
         if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
@@ -167,7 +118,7 @@ function parsePrototype$2(data) {
     var result = typeStr.replace(/(\[object|\])/ig, '').trim();
     return result;
 }
-var istype$4 = {
+var istype$3 = {
     type: function (data, lowerCase) {
         var result = parsePrototype$2(data);
         return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -249,7 +200,7 @@ function __generator$3(thisArg, body) {
 function parseHTMLToDataURL$2(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=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n      <foreignObject width=\"100%\" height=\"100%\">\n        <div xmlns = \"http://www.w3.org/1999/xhtml\">\n          " + html + "\n        </div>\n      </foreignObject>\n    </svg>\n    ";
+        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);
@@ -280,7 +231,7 @@ function parseSVGToDataURL$2(svg) {
     });
 }
 var Image$2 = window.Image;
-function loadImage$4(src) {
+function loadImage$3(src) {
     return new Promise(function (resolve, reject) {
         var img = new Image$2;
         img.onload = function () {
@@ -291,7 +242,7 @@ function loadImage$4(src) {
         img.src = src;
     });
 }
-function loadSVG$4(svg) {
+function loadSVG$3(svg) {
     return __awaiter$3(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator$3(this, function (_a) {
@@ -299,7 +250,7 @@ function loadSVG$4(svg) {
                 case 0: return [4, parseSVGToDataURL$2(svg)];
                 case 1:
                     dataURL = _a.sent();
-                    return [4, loadImage$4(dataURL)];
+                    return [4, loadImage$3(dataURL)];
                 case 2:
                     image = _a.sent();
                     return [2, image];
@@ -307,7 +258,7 @@ function loadSVG$4(svg) {
         });
     });
 }
-function loadHTML$4(html, opts) {
+function loadHTML$3(html, opts) {
     return __awaiter$3(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator$3(this, function (_a) {
@@ -315,7 +266,7 @@ function loadHTML$4(html, opts) {
                 case 0: return [4, parseHTMLToDataURL$2(html, opts)];
                 case 1:
                     dataURL = _a.sent();
-                    return [4, loadImage$4(dataURL)];
+                    return [4, loadImage$3(dataURL)];
                 case 2:
                     image = _a.sent();
                     return [2, image];
@@ -323,7 +274,7 @@ function loadHTML$4(html, opts) {
         });
     });
 }
-var Context$2$1 = (function () {
+var Context$1$1 = (function () {
     function Context(ctx, opts) {
         this._opts = opts;
         this._ctx = ctx;
@@ -471,11 +422,11 @@ var Context$2$1 = (function () {
     Context.prototype.setFont = function (opts) {
         var strList = [];
         if (opts.fontWeight === 'bold') {
-            strList.push("" + opts.fontWeight);
+            strList.push("".concat(opts.fontWeight));
         }
-        strList.push(this._doSize(opts.fontSize || 12) + "px");
-        strList.push("" + (opts.fontFamily || 'sans-serif'));
-        this._ctx.font = "" + strList.join(' ');
+        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;
@@ -550,16 +501,16 @@ function color$5(value) {
     return isColorStr$4(value);
 }
 function imageURL$3(value) {
-    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
 }
 function imageBase64$3(value) {
-    return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
+    return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
 }
 function imageSrc$3(value) {
     return (imageBase64$3(value) || imageURL$3(value));
 }
 function svg$3(value) {
-    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
 }
 function html$3(value) {
     var result = false;
@@ -740,9 +691,9 @@ var index$2 = {
         throttle: throttle$1$1,
     },
     loader: {
-        loadImage: loadImage$4,
-        loadSVG: loadSVG$4,
-        loadHTML: loadHTML$4,
+        loadImage: loadImage$3,
+        loadSVG: loadSVG$3,
+        loadHTML: loadHTML$3,
     },
     file: {
         downloadImageFromCanvas: downloadImageFromCanvas$2,
@@ -755,11 +706,11 @@ var index$2 = {
     uuid: {
         createUUID: createUUID$4
     },
-    istype: istype$4,
+    istype: istype$3,
     data: {
-        deepClone: deepClone$7,
+        deepClone: deepClone$6,
     },
-    Context: Context$2$1,
+    Context: Context$1$1,
 };
 var BoardEvent = (function () {
     function BoardEvent() {
@@ -825,7 +776,7 @@ function createTempData() {
         }
     };
 }
-var TempData$1 = (function () {
+var TempData$2 = (function () {
     function TempData() {
         this._temp = createTempData();
     }
@@ -843,7 +794,7 @@ var TempData$1 = (function () {
 var ScreenWatcher = (function () {
     function ScreenWatcher(canvas, ctx) {
         this._isMoving = false;
-        this._temp = new TempData$1;
+        this._temp = new TempData$2;
         this._container = window;
         this._canvas = canvas;
         this._isMoving = false;
@@ -877,19 +828,24 @@ var ScreenWatcher = (function () {
         this._initParentEvent();
     };
     ScreenWatcher.prototype._initParentEvent = function () {
-        var target = window;
-        var targetOrigin = target.origin;
-        while (target.self !== target.top) {
-            if (target.self !== target.parent) {
-                if (target.origin === targetOrigin) {
-                    target.parent.window.addEventListener('mousemove', this._listSameOriginParentWindow.bind(this), false);
+        try {
+            var target = window;
+            var targetOrigin = target.origin;
+            while (target.self !== target.top) {
+                if (target.self !== target.parent) {
+                    if (target.origin === targetOrigin) {
+                        target.parent.window.addEventListener('mousemove', this._listSameOriginParentWindow.bind(this), false);
+                    }
+                }
+                target = target.parent;
+                if (!target) {
+                    break;
                 }
-            }
-            target = target.parent;
-            if (!target) {
-                break;
             }
         }
+        catch (err) {
+            console.warn(err);
+        }
     };
     ScreenWatcher.prototype._listenHover = function (e) {
         e.preventDefault();
@@ -1066,7 +1022,7 @@ function setStyle(dom, style) {
     var keys = Object.keys(_style);
     var styleStr = '';
     keys.forEach(function (key) {
-        styleStr += key + ":" + (_style[key] || '') + ";";
+        styleStr += "".concat(key, ":").concat(_style[key] || '', ";");
     });
     dom.setAttribute('style', styleStr);
 }
@@ -1100,7 +1056,7 @@ var Scroller = (function () {
             ctx.fillStyle = wrapper.color;
             ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize));
             ctx.globalAlpha = 1;
-            drawBox$2(ctx, {
+            drawBox$1(ctx, {
                 x: this._doSize(wrapper.translateX),
                 y: this._doSize(height - wrapper.lineSize),
                 w: this._doSize(wrapper.xSize),
@@ -1114,7 +1070,7 @@ var Scroller = (function () {
             ctx.fillStyle = wrapper.color;
             ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height));
             ctx.globalAlpha = 1;
-            drawBox$2(ctx, {
+            drawBox$1(ctx, {
                 x: this._doSize(width - wrapper.lineSize),
                 y: this._doSize(wrapper.translateY),
                 w: this._doSize(wrapper.lineSize),
@@ -1209,7 +1165,7 @@ var Scroller = (function () {
     };
     return Scroller;
 }());
-function drawBox$2(ctx, opts) {
+function drawBox$1(ctx, opts) {
     var x = opts.x, y = opts.y, w = opts.w, h = opts.h, color = opts.color;
     var r = opts.r;
     r = Math.min(r, w / 2, h / 2);
@@ -1329,37 +1285,6 @@ var Screen = (function () {
     };
     return Screen;
 }());
-var Context$1$1 = index$2.Context;
-function createDefaultData(opts) {
-    var canvas = document.createElement('canvas');
-    var ctx2d = canvas.getContext('2d');
-    var ctx = new Context$1$1(ctx2d, {
-        width: opts.width,
-        height: opts.height,
-        contextWidth: opts.contextWidth,
-        contextHeight: opts.contextHeight,
-        devicePixelRatio: opts.devicePixelRatio || window.devicePixelRatio || 1,
-    });
-    return {
-        plugins: [],
-        ctx: ctx
-    };
-}
-var TempData$2 = (function () {
-    function TempData(opts) {
-        this._temp = createDefaultData(opts);
-    }
-    TempData.prototype.set = function (name, value) {
-        this._temp[name] = value;
-    };
-    TempData.prototype.get = function (name) {
-        return this._temp[name];
-    };
-    TempData.prototype.clear = function (opts) {
-        this._temp = createDefaultData(opts);
-    };
-    return TempData;
-}());
 var _canvas = Symbol('_canvas');
 var _displayCanvas = Symbol('_displayCanvas');
 var _helperCanvas = Symbol('_helperCanvas');
@@ -1378,14 +1303,12 @@ var _doScrollY = Symbol('_doScrollY');
 var _doMoveScroll = Symbol('_doMoveScroll');
 var _resetContext = Symbol('_resetContext');
 var _screen = Symbol('_screen');
-var _tempData$1 = Symbol('_tempData');
-var _a$3;
+var _a$2;
 var Context$3 = index$2.Context;
 var throttle$2 = index$2.time.throttle;
 var Board = (function () {
     function Board(mount, opts) {
-        this[_a$3] = false;
-        this[_tempData$1] = new TempData$2(opts);
+        this[_a$2] = false;
         this[_mount] = mount;
         this[_canvas] = document.createElement('canvas');
         this[_helperCanvas] = document.createElement('canvas');
@@ -1484,9 +1407,6 @@ var Board = (function () {
         }
         return { position: position, size: size };
     };
-    Board.prototype.addPlugin = function (plugin) {
-        this[_tempData$1].get('plugins').push(plugin);
-    };
     Board.prototype.clear = function () {
         var displayCtx = this[_displayCanvas].getContext('2d');
         displayCtx === null || displayCtx === void 0 ? void 0 : displayCtx.clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
@@ -1542,7 +1462,7 @@ var Board = (function () {
         };
         return screenPoint;
     };
-    Board.prototype[(_a$3 = _hasRendered, _render)] = function () {
+    Board.prototype[(_a$2 = _hasRendered, _render)] = function () {
         if (this[_hasRendered] === true) {
             return;
         }
@@ -1559,8 +1479,8 @@ var Board = (function () {
         this[_displayCanvas].width = width * devicePixelRatio;
         this[_displayCanvas].height = height * devicePixelRatio;
         setStyle(this[_displayCanvas], {
-            width: width + "px",
-            height: height + "px",
+            width: "".concat(width, "px"),
+            height: "".concat(height, "px"),
         });
     };
     Board.prototype[_parsePrivateOptions] = function (opts) {
@@ -1708,9 +1628,9 @@ function createUUID$3() {
     function str4() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
-    return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
 }
-function deepClone$6(target) {
+function deepClone$5(target) {
     function _clone(t) {
         var type = is$1$2(t);
         if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
@@ -1742,7 +1662,7 @@ function parsePrototype$1(data) {
     var result = typeStr.replace(/(\[object|\])/ig, '').trim();
     return result;
 }
-var istype$3 = {
+var istype$2 = {
     type: function (data, lowerCase) {
         var result = parsePrototype$1(data);
         return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -1824,7 +1744,7 @@ function __generator$2(thisArg, body) {
 function parseHTMLToDataURL$1(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=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n      <foreignObject width=\"100%\" height=\"100%\">\n        <div xmlns = \"http://www.w3.org/1999/xhtml\">\n          " + html + "\n        </div>\n      </foreignObject>\n    </svg>\n    ";
+        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);
@@ -1855,7 +1775,7 @@ function parseSVGToDataURL$1(svg) {
     });
 }
 var Image$1 = window.Image;
-function loadImage$3(src) {
+function loadImage$2(src) {
     return new Promise(function (resolve, reject) {
         var img = new Image$1;
         img.onload = function () {
@@ -1866,7 +1786,7 @@ function loadImage$3(src) {
         img.src = src;
     });
 }
-function loadSVG$3(svg) {
+function loadSVG$2(svg) {
     return __awaiter$2(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator$2(this, function (_a) {
@@ -1874,7 +1794,7 @@ function loadSVG$3(svg) {
                 case 0: return [4, parseSVGToDataURL$1(svg)];
                 case 1:
                     dataURL = _a.sent();
-                    return [4, loadImage$3(dataURL)];
+                    return [4, loadImage$2(dataURL)];
                 case 2:
                     image = _a.sent();
                     return [2, image];
@@ -1882,7 +1802,7 @@ function loadSVG$3(svg) {
         });
     });
 }
-function loadHTML$3(html, opts) {
+function loadHTML$2(html, opts) {
     return __awaiter$2(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator$2(this, function (_a) {
@@ -1890,7 +1810,7 @@ function loadHTML$3(html, opts) {
                 case 0: return [4, parseHTMLToDataURL$1(html, opts)];
                 case 1:
                     dataURL = _a.sent();
-                    return [4, loadImage$3(dataURL)];
+                    return [4, loadImage$2(dataURL)];
                 case 2:
                     image = _a.sent();
                     return [2, image];
@@ -2046,11 +1966,11 @@ var Context$2 = (function () {
     Context.prototype.setFont = function (opts) {
         var strList = [];
         if (opts.fontWeight === 'bold') {
-            strList.push("" + opts.fontWeight);
+            strList.push("".concat(opts.fontWeight));
         }
-        strList.push(this._doSize(opts.fontSize || 12) + "px");
-        strList.push("" + (opts.fontFamily || 'sans-serif'));
-        this._ctx.font = "" + strList.join(' ');
+        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;
@@ -2125,16 +2045,16 @@ function color$4(value) {
     return isColorStr$3(value);
 }
 function imageURL$2(value) {
-    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
 }
 function imageBase64$2(value) {
-    return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
+    return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
 }
 function imageSrc$2(value) {
     return (imageBase64$2(value) || imageURL$2(value));
 }
 function svg$2(value) {
-    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
 }
 function html$2(value) {
     var result = false;
@@ -2315,9 +2235,9 @@ var index$1 = {
         throttle: throttle$1,
     },
     loader: {
-        loadImage: loadImage$3,
-        loadSVG: loadSVG$3,
-        loadHTML: loadHTML$3,
+        loadImage: loadImage$2,
+        loadSVG: loadSVG$2,
+        loadHTML: loadHTML$2,
     },
     file: {
         downloadImageFromCanvas: downloadImageFromCanvas$1,
@@ -2330,9 +2250,9 @@ var index$1 = {
     uuid: {
         createUUID: createUUID$3
     },
-    istype: istype$3,
+    istype: istype$2,
     data: {
-        deepClone: deepClone$6,
+        deepClone: deepClone$5,
     },
     Context: Context$2,
 };
@@ -2454,14 +2374,14 @@ function toColorHexNum(color) {
 function toColorHexStr(color) {
     return '#' + color.toString(16);
 }
-function isColorStr$1$1(color) {
+function isColorStr$1(color) {
     return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
 }
 function createUUID$1$1() {
     function str4() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
-    return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
 }
 function deepClone$2$1(target) {
     function _clone(t) {
@@ -2577,7 +2497,7 @@ function __generator(thisArg, body) {
 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=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n      <foreignObject width=\"100%\" height=\"100%\">\n        <div xmlns = \"http://www.w3.org/1999/xhtml\">\n          " + html + "\n        </div>\n      </foreignObject>\n    </svg>\n    ";
+        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);
@@ -2799,11 +2719,11 @@ var Context$1 = (function () {
     Context.prototype.setFont = function (opts) {
         var strList = [];
         if (opts.fontWeight === 'bold') {
-            strList.push("" + opts.fontWeight);
+            strList.push("".concat(opts.fontWeight));
         }
-        strList.push(this._doSize(opts.fontSize || 12) + "px");
-        strList.push("" + (opts.fontFamily || 'sans-serif'));
-        this._ctx.font = "" + strList.join(' ');
+        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;
@@ -2875,19 +2795,19 @@ function borderRadius$1(value) {
     return number$1(value) && value >= 0;
 }
 function color$2(value) {
-    return isColorStr$1$1(value);
+    return isColorStr$1(value);
 }
 function imageURL$1(value) {
-    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
 }
 function imageBase64$1(value) {
-    return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
+    return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
 }
 function imageSrc$1(value) {
     return (imageBase64$1(value) || imageURL$1(value));
 }
 function svg$1(value) {
-    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
 }
 function html$1(value) {
     var result = false;
@@ -3078,7 +2998,7 @@ var index = {
     color: {
         toColorHexStr: toColorHexStr,
         toColorHexNum: toColorHexNum,
-        isColorStr: isColorStr$1$1,
+        isColorStr: isColorStr$1,
     },
     uuid: {
         createUUID: createUUID$1$1
@@ -3117,7 +3037,7 @@ function rotateContext$1(ctx, center, radian, callback) {
         ctx.translate(-center.x, -center.y);
     }
 }
-var is$1 = index.is, istype$2 = index.istype, color$1$1 = index.color;
+var is$1 = index.is, istype = index.istype, color$1 = index.color;
 function clearContext$1(ctx) {
     ctx.setFillStyle('#000000');
     ctx.setStrokeStyle('#000000');
@@ -3128,14 +3048,14 @@ function clearContext$1(ctx) {
     ctx.setShadowOffsetY(0);
     ctx.setShadowBlur(0);
 }
-function drawBgColor$1(ctx, color) {
+function drawBgColor(ctx, color) {
     var size = ctx.getSize();
     ctx.setFillStyle(color);
     ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
 }
-function drawBox$1(ctx, elem, pattern) {
+function drawBox(ctx, elem, pattern) {
     clearContext$1(ctx);
-    drawBoxBorder$1(ctx, elem);
+    drawBoxBorder(ctx, elem);
     clearContext$1(ctx);
     rotateElement$1(ctx, elem, function () {
         var x = elem.x, y = elem.y, w = elem.w, h = elem.h;
@@ -3154,13 +3074,13 @@ function drawBox$1(ctx, elem, pattern) {
         if (typeof pattern === 'string') {
             ctx.setFillStyle(pattern);
         }
-        else if (['CanvasPattern'].includes(istype$2.type(pattern))) {
+        else if (['CanvasPattern'].includes(istype.type(pattern))) {
             ctx.setFillStyle(pattern);
         }
         ctx.fill();
     });
 }
-function drawBoxBorder$1(ctx, elem) {
+function drawBoxBorder(ctx, elem) {
     clearContext$1(ctx);
     rotateElement$1(ctx, elem, function () {
         if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
@@ -3168,7 +3088,7 @@ function drawBoxBorder$1(ctx, elem) {
         }
         var bw = elem.desc.borderWidth;
         var borderColor = '#000000';
-        if (color$1$1.isColorStr(elem.desc.borderColor) === true) {
+        if (color$1.isColorStr(elem.desc.borderColor) === true) {
             borderColor = elem.desc.borderColor;
         }
         var x = elem.x - bw / 2;
@@ -3181,7 +3101,7 @@ function drawBoxBorder$1(ctx, elem) {
             r = r + bw / 2;
         }
         var desc = elem.desc;
-        if (desc.shadowColor !== undefined && color$1$1.isColorStr(desc.shadowColor)) {
+        if (desc.shadowColor !== undefined && color$1.isColorStr(desc.shadowColor)) {
             ctx.setShadowColor(desc.shadowColor);
         }
         if (desc.shadowOffsetX !== undefined && is$1.number(desc.shadowOffsetX)) {
@@ -3205,10 +3125,10 @@ function drawBoxBorder$1(ctx, elem) {
         ctx.stroke();
     });
 }
-function drawRect$1(ctx, elem) {
-    drawBox$1(ctx, elem, elem.desc.bgColor);
+function drawRect(ctx, elem) {
+    drawBox(ctx, elem, elem.desc.bgColor);
 }
-function drawImage$1(ctx, elem, loader) {
+function drawImage(ctx, elem, loader) {
     var content = loader.getContent(elem.uuid);
     rotateElement$1(ctx, elem, function () {
         if (content) {
@@ -3216,7 +3136,7 @@ function drawImage$1(ctx, elem, loader) {
         }
     });
 }
-function drawSVG$1(ctx, elem, loader) {
+function drawSVG(ctx, elem, loader) {
     var content = loader.getContent(elem.uuid);
     rotateElement$1(ctx, elem, function () {
         if (content) {
@@ -3224,7 +3144,7 @@ function drawSVG$1(ctx, elem, loader) {
         }
     });
 }
-function drawHTML$1(ctx, elem, loader) {
+function drawHTML(ctx, elem, loader) {
     var content = loader.getContent(elem.uuid);
     rotateElement$1(ctx, elem, function () {
         if (content) {
@@ -3233,9 +3153,9 @@ function drawHTML$1(ctx, elem, loader) {
     });
 }
 var is$3 = index.is, color$3 = index.color;
-function drawText$1(ctx, elem, loader) {
+function drawText(ctx, elem, loader) {
     clearContext$1(ctx);
-    drawBox$1(ctx, elem, elem.desc.bgColor || 'transparent');
+    drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
     rotateElement$1(ctx, elem, function () {
         var desc = __assign$1({
             fontSize: 12,
@@ -3335,7 +3255,7 @@ function drawText$1(ctx, elem, loader) {
         }
     });
 }
-function drawCircle$1(ctx, elem) {
+function drawCircle(ctx, elem) {
     clearContext$1(ctx);
     rotateElement$1(ctx, elem, function (ctx) {
         var x = elem.x, y = elem.y, w = elem.w, h = elem.h, desc = elem.desc;
@@ -3362,13 +3282,13 @@ function drawCircle$1(ctx, elem) {
     });
 }
 var isColorStr$2 = index.color.isColorStr;
-function drawContext$1(ctx, data, loader) {
+function drawContext(ctx, data, loader) {
     var _a;
     clearContext$1(ctx);
     var size = ctx.getSize();
     ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
     if (typeof data.bgColor === 'string' && isColorStr$2(data.bgColor)) {
-        drawBgColor$1(ctx, data.bgColor);
+        drawBgColor(ctx, data.bgColor);
     }
     if (!(data.elements.length > 0)) {
         return;
@@ -3380,33 +3300,33 @@ function drawContext$1(ctx, data, loader) {
         }
         switch (elem.type) {
             case 'rect': {
-                drawRect$1(ctx, elem);
+                drawRect(ctx, elem);
                 break;
             }
             case 'text': {
-                drawText$1(ctx, elem);
+                drawText(ctx, elem);
                 break;
             }
             case 'image': {
-                drawImage$1(ctx, elem, loader);
+                drawImage(ctx, elem, loader);
                 break;
             }
             case 'svg': {
-                drawSVG$1(ctx, elem, loader);
+                drawSVG(ctx, elem, loader);
                 break;
             }
             case 'html': {
-                drawHTML$1(ctx, elem, loader);
+                drawHTML(ctx, elem, loader);
                 break;
             }
             case 'circle': {
-                drawCircle$1(ctx, elem);
+                drawCircle(ctx, elem);
                 break;
             }
         }
     }
 }
-var LoaderEvent$1 = (function () {
+var LoaderEvent = (function () {
     function LoaderEvent() {
         this._listeners = new Map();
     }
@@ -3457,36 +3377,36 @@ var LoaderEvent$1 = (function () {
     };
     return LoaderEvent;
 }());
-function filterScript$1(html) {
+function filterScript(html) {
     return html.replace(/<script[\s\S]*?<\/script>/ig, '');
 }
-var _a$1 = index.loader, loadImage$2 = _a$1.loadImage, loadSVG$2 = _a$1.loadSVG, loadHTML$2 = _a$1.loadHTML;
+var _a$1 = index.loader, loadImage = _a$1.loadImage, loadSVG = _a$1.loadSVG, loadHTML = _a$1.loadHTML;
 var deepClone$1$1 = index.data.deepClone;
-var LoaderStatus$1;
+var LoaderStatus;
 (function (LoaderStatus) {
     LoaderStatus["FREE"] = "free";
     LoaderStatus["LOADING"] = "loading";
     LoaderStatus["COMPLETE"] = "complete";
-})(LoaderStatus$1 || (LoaderStatus$1 = {}));
-var Loader$1 = (function () {
+})(LoaderStatus || (LoaderStatus = {}));
+var Loader = (function () {
     function Loader(opts) {
         this._currentLoadData = {};
         this._currentUUIDQueue = [];
         this._storageLoadData = {};
-        this._status = LoaderStatus$1.FREE;
+        this._status = LoaderStatus.FREE;
         this._waitingLoadQueue = [];
         this._opts = opts;
-        this._event = new LoaderEvent$1();
+        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$1.FREE || this._status === LoaderStatus$1.COMPLETE) {
+        if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
             this._currentUUIDQueue = uuidQueue;
             this._currentLoadData = loadData;
             this._loadTask();
         }
-        else if (this._status === LoaderStatus$1.LOADING && uuidQueue.length > 0) {
+        else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
             this._waitingLoadQueue.push({
                 uuidQueue: uuidQueue,
                 loadData: loadData,
@@ -3500,7 +3420,7 @@ var Loader$1 = (function () {
         this._event.off(name, callback);
     };
     Loader.prototype.isComplete = function () {
-        return this._status === LoaderStatus$1.COMPLETE;
+        return this._status === LoaderStatus.COMPLETE;
     };
     Loader.prototype.getContent = function (uuid) {
         var _a;
@@ -3545,7 +3465,7 @@ var Loader$1 = (function () {
         }
         else if (elem.type === 'html') {
             var _elem = elem;
-            source = filterScript$1(_elem.desc.html || '');
+            source = filterScript(_elem.desc.html || '');
             elemW = _elem.desc.width || elem.w;
             elemH = _elem.desc.height || elem.h;
         }
@@ -3562,13 +3482,13 @@ var Loader$1 = (function () {
     };
     Loader.prototype._loadTask = function () {
         var _this = this;
-        if (this._status === LoaderStatus$1.LOADING) {
+        if (this._status === LoaderStatus.LOADING) {
             return;
         }
-        this._status = LoaderStatus$1.LOADING;
+        this._status = LoaderStatus.LOADING;
         if (this._currentUUIDQueue.length === 0) {
             if (this._waitingLoadQueue.length === 0) {
-                this._status = LoaderStatus$1.COMPLETE;
+                this._status = LoaderStatus.COMPLETE;
                 this._event.trigger('complete', undefined);
                 return;
             }
@@ -3616,7 +3536,7 @@ var Loader$1 = (function () {
                         element: _this._currentLoadData[uuid].element,
                     };
                     if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-                        _this._status = LoaderStatus$1.FREE;
+                        _this._status = LoaderStatus.FREE;
                         _this._loadTask();
                     }
                     _this._event.trigger('load', {
@@ -3648,7 +3568,7 @@ var Loader$1 = (function () {
                         };
                     }
                     if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-                        _this._status = LoaderStatus$1.FREE;
+                        _this._status = LoaderStatus.FREE;
                         _this._loadTask();
                     }
                     if (_this._currentLoadData[uuid]) {
@@ -3681,19 +3601,19 @@ var Loader$1 = (function () {
                 switch (_a.label) {
                     case 0:
                         if (!(params && params.type === 'image')) return [3, 2];
-                        return [4, loadImage$2(params.source)];
+                        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$2(params.source)];
+                        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$2(params.source, {
+                        return [4, loadHTML(params.source, {
                                 width: params.elemW, height: params.elemH
                             })];
                     case 5:
@@ -3706,7 +3626,7 @@ var Loader$1 = (function () {
     };
     return Loader;
 }());
-var RendererEvent$1 = (function () {
+var RendererEvent = (function () {
     function RendererEvent() {
         this._listeners = new Map();
     }
@@ -3765,27 +3685,27 @@ var _opts$2 = Symbol('_opts');
 var _freeze = Symbol('_freeze');
 var _drawFrame = Symbol('_drawFrame');
 var _retainQueueOneItem = Symbol('_retainQueueOneItem');
-var _a$2, _b, _c;
-var requestAnimationFrame$1 = window.requestAnimationFrame;
+var _a, _b, _c;
+var requestAnimationFrame = window.requestAnimationFrame;
 var createUUID$2 = index.uuid.createUUID;
-var deepClone$5 = index.data.deepClone;
+var deepClone$4 = index.data.deepClone;
 var Context = index.Context;
-var DrawStatus$1;
+var DrawStatus;
 (function (DrawStatus) {
     DrawStatus["NULL"] = "null";
     DrawStatus["FREE"] = "free";
     DrawStatus["DRAWING"] = "drawing";
     DrawStatus["FREEZE"] = "freeze";
-})(DrawStatus$1 || (DrawStatus$1 = {}));
+})(DrawStatus || (DrawStatus = {}));
 var Renderer = (function (_super) {
     __extends(Renderer, _super);
     function Renderer(opts) {
         var _this = _super.call(this) || this;
-        _this[_a$2] = [];
+        _this[_a] = [];
         _this[_b] = null;
-        _this[_c] = DrawStatus$1.NULL;
+        _this[_c] = DrawStatus.NULL;
         _this[_opts$2] = opts;
-        _this[_loader] = new Loader$1({
+        _this[_loader] = new Loader({
             maxParallelNum: 6
         });
         _this[_loader].on('load', function (res) {
@@ -3802,8 +3722,8 @@ var Renderer = (function (_super) {
     }
     Renderer.prototype.render = function (target, originData, opts) {
         var _d = (opts || {}).changeResourceUUIDs, changeResourceUUIDs = _d === void 0 ? [] : _d;
-        this[_status] = DrawStatus$1.FREE;
-        var data = deepClone$5(originData);
+        this[_status] = DrawStatus.FREE;
+        var data = deepClone$4(originData);
         if (Array.isArray(data.elements)) {
             data.elements.forEach(function (elem) {
                 if (!(typeof elem.uuid === 'string' && elem.uuid)) {
@@ -3830,10 +3750,10 @@ var Renderer = (function (_super) {
                 this[_ctx] = target;
             }
         }
-        if ([DrawStatus$1.FREEZE].includes(this[_status])) {
+        if ([DrawStatus.FREEZE].includes(this[_status])) {
             return;
         }
-        var _data = deepClone$5({ data: data, });
+        var _data = deepClone$4({ data: data, });
         this[_queue].push(_data);
         this[_drawFrame]();
         this[_loader].load(data, changeResourceUUIDs || []);
@@ -3842,18 +3762,18 @@ var Renderer = (function (_super) {
         return this[_ctx];
     };
     Renderer.prototype.thaw = function () {
-        this[_status] = DrawStatus$1.FREE;
+        this[_status] = DrawStatus.FREE;
     };
-    Renderer.prototype[(_a$2 = _queue, _b = _ctx, _c = _status, _freeze)] = function () {
-        this[_status] = DrawStatus$1.FREEZE;
+    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$1.FREEZE) {
+        if (this[_status] === DrawStatus.FREEZE) {
             return;
         }
-        requestAnimationFrame$1(function () {
-            if (_this[_status] === DrawStatus$1.FREEZE) {
+        requestAnimationFrame(function () {
+            if (_this[_status] === DrawStatus.FREEZE) {
                 return;
             }
             var ctx = _this[_ctx];
@@ -3868,26 +3788,26 @@ var Renderer = (function (_super) {
             if (_this[_loader].isComplete() !== true) {
                 _this[_drawFrame]();
                 if (item && ctx) {
-                    drawContext$1(ctx, item.data, _this[_loader]);
+                    drawContext(ctx, item.data, _this[_loader]);
                 }
             }
             else if (item && ctx) {
-                drawContext$1(ctx, item.data, _this[_loader]);
+                drawContext(ctx, item.data, _this[_loader]);
                 _this[_retainQueueOneItem]();
                 if (!isLastFrame) {
                     _this[_drawFrame]();
                 }
                 else {
-                    _this[_status] = DrawStatus$1.FREE;
+                    _this[_status] = DrawStatus.FREE;
                 }
             }
             else {
-                _this[_status] = DrawStatus$1.FREE;
+                _this[_status] = DrawStatus.FREE;
             }
             _this.trigger('drawFrame', { t: Date.now() });
-            if (_this[_loader].isComplete() === true && _this[_queue].length === 1 && _this[_status] === DrawStatus$1.FREE) {
+            if (_this[_loader].isComplete() === true && _this[_queue].length === 1 && _this[_status] === DrawStatus.FREE) {
                 if (ctx && _this[_queue][0] && _this[_queue][0].data) {
-                    drawContext$1(ctx, _this[_queue][0].data, _this[_loader]);
+                    drawContext(ctx, _this[_queue][0].data, _this[_loader]);
                 }
                 _this.trigger('drawFrameComplete', { t: Date.now() });
                 _this[_freeze]();
@@ -3898,13 +3818,13 @@ var Renderer = (function (_super) {
         if (this[_queue].length <= 1) {
             return;
         }
-        var lastOne = deepClone$5(this[_queue][this[_queue].length - 1]);
+        var lastOne = deepClone$4(this[_queue][this[_queue].length - 1]);
         this[_queue] = [lastOne];
     };
     return Renderer;
-}(RendererEvent$1));
+}(RendererEvent));
 
-var isColorStr$1 = index$1.color.isColorStr;
+var isColorStr = index$1.color.isColorStr;
 function number(value) {
     return (typeof value === 'number' && (value > 0 || value <= 0));
 }
@@ -3929,20 +3849,20 @@ function borderWidth(value) {
 function borderRadius(value) {
     return number(value) && value >= 0;
 }
-function color$1(value) {
-    return isColorStr$1(value);
+function color(value) {
+    return isColorStr(value);
 }
 function imageURL(value) {
-    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
 }
 function imageBase64(value) {
-    return (typeof value === 'string' && /^(data:image\/)/.test("" + 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(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+    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;
@@ -3986,7 +3906,7 @@ var is = {
     number: number,
     borderWidth: borderWidth,
     borderRadius: borderRadius,
-    color: color$1,
+    color: color,
     imageSrc: imageSrc,
     imageURL: imageURL,
     imageBase64: imageBase64,
@@ -4181,6 +4101,156 @@ function calcLineAngle(center, p) {
     return null;
 }
 
+var defaultConfig = {
+    elementWrapper: {
+        color: '#2ab6f1',
+        lockColor: '#aaaaaa',
+        controllerSize: 6,
+        lineWidth: 1,
+        lineDash: [4, 3],
+    }
+};
+function mergeConfig(config) {
+    var result = index$1.data.deepClone(defaultConfig);
+    if (config) {
+        if (config.elementWrapper) {
+            result.elementWrapper = __assign$4(__assign$4({}, result.elementWrapper), config.elementWrapper);
+        }
+    }
+    return result;
+}
+
+var CoreEvent = (function () {
+    function CoreEvent() {
+        this._listeners = new Map();
+    }
+    CoreEvent.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]);
+        }
+    };
+    CoreEvent.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 || []);
+        }
+    };
+    CoreEvent.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;
+        }
+    };
+    CoreEvent.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 CoreEvent;
+}());
+
+function isChangeImageElementResource(before, after) {
+    var _a, _b;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src));
+}
+function isChangeSVGElementResource(before, after) {
+    var _a, _b;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg));
+}
+function isChangeHTMLElementResource(before, after) {
+    var _a, _b, _c, _d, _e, _f;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html)
+        || ((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width)
+        || ((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
+}
+function diffElementResourceChange(before, after) {
+    var result = null;
+    var isChange = false;
+    switch (after.type) {
+        case 'image': {
+            isChange = isChangeImageElementResource(before, after);
+            break;
+        }
+        case 'svg': {
+            isChange = isChangeSVGElementResource(before, after);
+            break;
+        }
+        case 'html': {
+            isChange = isChangeHTMLElementResource(before, after);
+            break;
+        }
+    }
+    if (isChange === true) {
+        result = after.uuid;
+    }
+    return result;
+}
+function diffElementResourceChangeList(before, after) {
+    var _a;
+    var uuids = [];
+    var beforeMap = parseDataElementMap(before);
+    var afterMap = parseDataElementMap(after);
+    for (var uuid in afterMap) {
+        if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
+            continue;
+        }
+        if (beforeMap[uuid]) {
+            var isChange = false;
+            switch (beforeMap[uuid].type) {
+                case 'image': {
+                    isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'svg': {
+                    isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'html': {
+                    isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+            }
+            if (isChange === true) {
+                uuids.push(uuid);
+            }
+        }
+        else {
+            uuids.push(uuid);
+        }
+    }
+    return uuids;
+}
+function parseDataElementMap(data) {
+    var elemMap = {};
+    data.elements.forEach(function (elem) {
+        elemMap[elem.uuid] = elem;
+    });
+    return elemMap;
+}
+
 function rotateElement(ctx, elem, callback) {
     var center = calcElementCenter(elem);
     var radian = parseAngleToRadian(elem.angle || 0);
@@ -4200,601 +4270,9 @@ function rotateContext(ctx, center, radian, callback) {
     }
 }
 
-var istype = index$1.istype, color = index$1.color;
-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 (color.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 && index$1.color.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, helperConfig) {
-    clearContext(ctx);
-    drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
-    rotateElement(ctx, elem, function () {
-        var desc = __assign$4({
-            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 = [];
-        descTextList.forEach(function (tempText) {
-            var lineText = '';
-            var lineNum = 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 (lineText && tempText.length - 1 === i) {
-                    if ((lineNum + 1) * fontHeight < elem.h) {
-                        lines.push({
-                            text: lineText,
-                            width: ctx.calcScreenNum(ctx.measureText(lineText).width),
-                        });
-                        break;
-                    }
-                }
-            }
-        });
-        {
-            var _y_1 = elem.y;
-            if (lines.length * fontHeight < elem.h) {
-                _y_1 += ((elem.h - lines.length * fontHeight) / 2);
-            }
-            if (desc.textShadowColor !== undefined && index$1.color.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 (index$1.color.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 drawElementWrapper(ctx, config) {
-    if (!(config === null || config === void 0 ? void 0 : config.selectedElementWrapper)) {
-        return;
-    }
-    var wrapper = config.selectedElementWrapper;
-    clearContext(ctx);
-    rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
-        ctx.beginPath();
-        ctx.setLineDash(wrapper.lineDash);
-        ctx.setLineWidth(wrapper.lineWidth);
-        ctx.setStrokeStyle(wrapper.color);
-        ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
-        ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
-        ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
-        ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
-        ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
-        ctx.stroke();
-        ctx.closePath();
-        if (wrapper.lock !== true) {
-            if (wrapper.controllers.rotate.invisible !== true) {
-                ctx.beginPath();
-                ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
-                ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
-                ctx.stroke();
-                ctx.closePath();
-                ctx.beginPath();
-                ctx.setLineDash([]);
-                ctx.setLineWidth(wrapper.controllerSize / 2);
-                ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
-                ctx.stroke();
-                ctx.closePath();
-            }
-            ctx.setFillStyle(wrapper.color);
-            [
-                wrapper.controllers.topLeft,
-                wrapper.controllers.top,
-                wrapper.controllers.topRight,
-                wrapper.controllers.right,
-                wrapper.controllers.bottomRight,
-                wrapper.controllers.bottom,
-                wrapper.controllers.bottomLeft,
-                wrapper.controllers.left,
-            ].forEach(function (controller) {
-                if (controller.invisible !== true) {
-                    ctx.beginPath();
-                    ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
-                    ctx.fill();
-                    ctx.closePath();
-                }
-            });
-        }
-        else {
-            clearContext(ctx);
-            ctx.setStrokeStyle(wrapper.color);
-            [
-                wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
-                wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
-            ].forEach(function (controller) {
-                ctx.beginPath();
-                ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
-                ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
-                ctx.stroke();
-                ctx.closePath();
-                ctx.beginPath();
-                ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
-                ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
-                ctx.stroke();
-                ctx.closePath();
-            });
-        }
-    });
-}
-function drawAreaWrapper(ctx, config) {
-    if (!(config === null || config === void 0 ? void 0 : config.selectedAreaWrapper)) {
-        return;
-    }
-    var wrapper = config.selectedAreaWrapper;
-    if (wrapper && wrapper.w > 0 && wrapper.h > 0) {
-        clearContext(ctx);
-        ctx.setGlobalAlpha(0.3);
-        ctx.setFillStyle(wrapper.color);
-        ctx.fillRect(wrapper.x, wrapper.y, wrapper.w, wrapper.h);
-        clearContext(ctx);
-        ctx.beginPath();
-        ctx.setLineDash(wrapper.lineDash);
-        ctx.setLineWidth(wrapper.lineWidth);
-        ctx.setStrokeStyle(wrapper.color);
-        ctx.moveTo(wrapper.x, wrapper.y);
-        ctx.lineTo(wrapper.x + wrapper.w, wrapper.y);
-        ctx.lineTo(wrapper.x + wrapper.w, wrapper.y + wrapper.h);
-        ctx.lineTo(wrapper.x, wrapper.y + wrapper.h);
-        ctx.lineTo(wrapper.x, wrapper.y);
-        ctx.stroke();
-        ctx.closePath();
-    }
-}
-function drawElementListWrappers(ctx, config) {
-    if (!Array.isArray(config === null || config === void 0 ? void 0 : config.selectedElementListWrappers)) {
-        return;
-    }
-    var wrapperList = config.selectedElementListWrappers;
-    wrapperList === null || wrapperList === void 0 ? void 0 : wrapperList.forEach(function (wrapper) {
-        clearContext(ctx);
-        rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
-            clearContext(ctx);
-            ctx.setGlobalAlpha(0.05);
-            ctx.setFillStyle(wrapper.color);
-            ctx.fillRect(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x, wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y);
-            clearContext(ctx);
-            ctx.beginPath();
-            ctx.setLineDash(wrapper.lineDash);
-            ctx.setLineWidth(wrapper.lineWidth);
-            ctx.setStrokeStyle(wrapper.color);
-            ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
-            ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
-            ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
-            ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
-            ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
-            ctx.stroke();
-            ctx.closePath();
-            if (wrapper.lock === true) {
-                clearContext(ctx);
-                ctx.setStrokeStyle(wrapper.color);
-                [
-                    wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
-                    wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
-                ].forEach(function (controller) {
-                    ctx.beginPath();
-                    ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
-                    ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
-                    ctx.stroke();
-                    ctx.closePath();
-                    ctx.beginPath();
-                    ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
-                    ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
-                    ctx.stroke();
-                    ctx.closePath();
-                });
-            }
-        });
-    });
-}
-
-var isColorStr = index$1.color.isColorStr;
-function drawContext(ctx, data, helperConfig, 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;
-            }
-        }
-    }
-    drawElementWrapper(ctx, helperConfig);
-    drawAreaWrapper(ctx, helperConfig);
-    drawElementListWrappers(ctx, helperConfig);
-}
-
-var defaultConfig = {
-    elementWrapper: {
-        color: '#2ab6f1',
-        lockColor: '#aaaaaa',
-        controllerSize: 6,
-        lineWidth: 1,
-        lineDash: [4, 3],
-    }
-};
-function mergeConfig(config) {
-    var result = index$1.data.deepClone(defaultConfig);
-    if (config) {
-        if (config.elementWrapper) {
-            result.elementWrapper = __assign$4(__assign$4({}, result.elementWrapper), config.elementWrapper);
-        }
-    }
-    return result;
-}
-
-var CoreEvent = (function () {
-    function CoreEvent() {
-        this._listeners = new Map();
-    }
-    CoreEvent.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]);
-        }
-    };
-    CoreEvent.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 || []);
-        }
-    };
-    CoreEvent.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;
-        }
-    };
-    CoreEvent.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 CoreEvent;
-}());
-
-function isChangeImageElementResource(before, after) {
-    var _a, _b;
-    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src));
-}
-function isChangeSVGElementResource(before, after) {
-    var _a, _b;
-    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg));
-}
-function isChangeHTMLElementResource(before, after) {
-    var _a, _b, _c, _d, _e, _f;
-    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html)
-        || ((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width)
-        || ((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
-}
-function diffElementResourceChange(before, after) {
-    var result = null;
-    var isChange = false;
-    switch (after.type) {
-        case 'image': {
-            isChange = isChangeImageElementResource(before, after);
-            break;
-        }
-        case 'svg': {
-            isChange = isChangeSVGElementResource(before, after);
-            break;
-        }
-        case 'html': {
-            isChange = isChangeHTMLElementResource(before, after);
-            break;
-        }
-    }
-    if (isChange === true) {
-        result = after.uuid;
-    }
-    return result;
-}
-function diffElementResourceChangeList(before, after) {
-    var _a;
-    var uuids = [];
-    var beforeMap = parseDataElementMap(before);
-    var afterMap = parseDataElementMap(after);
-    for (var uuid in afterMap) {
-        if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
-            continue;
-        }
-        if (beforeMap[uuid]) {
-            var isChange = false;
-            switch (beforeMap[uuid].type) {
-                case 'image': {
-                    isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
-                    break;
-                }
-                case 'svg': {
-                    isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
-                    break;
-                }
-                case 'html': {
-                    isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
-                    break;
-                }
-            }
-            if (isChange === true) {
-                uuids.push(uuid);
-            }
-        }
-        else {
-            uuids.push(uuid);
-        }
-    }
-    return uuids;
-}
-function parseDataElementMap(data) {
-    var elemMap = {};
-    data.elements.forEach(function (elem) {
-        elemMap[elem.uuid] = elem;
-    });
-    return elemMap;
-}
-
-function limitNum(num) {
-    var numStr = num.toFixed(2);
-    return parseFloat(numStr);
+function limitNum(num) {
+    var numStr = num.toFixed(2);
+    return parseFloat(numStr);
 }
 function limitAngle(angle) {
     return limitNum(angle % 360);
@@ -5189,7 +4667,7 @@ function changeMoveDistDirect(moveDist, moveDirect) {
 }
 
 var limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
-var deepClone$4 = index$1.data.deepClone;
+var deepClone$3 = index$1.data.deepClone;
 var Helper = (function () {
     function Helper(board, config) {
         this._areaStart = { x: 0, y: 0 };
@@ -5207,7 +4685,7 @@ var Helper = (function () {
         this._updateSelectedElementListWrapper(data, opts);
     };
     Helper.prototype.getConfig = function () {
-        return deepClone$4(this._helperConfig);
+        return deepClone$3(this._helperConfig);
     };
     Helper.prototype.getElementIndexByUUID = function (uuid) {
         var index = this._helperConfig.elementIndexMap[uuid];
@@ -5476,48 +4954,50 @@ var Helper = (function () {
         if (typeof elem.angle === 'number' && Math.abs(elem.angle) > limitQbliqueAngle) {
             hideObliqueDirection = true;
         }
+        var controllerOffset = lineWidth;
         var wrapper = {
             uuid: elem.uuid,
             controllerSize: controllerSize,
+            controllerOffset: controllerOffset,
             lock: ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.lock) === true,
             controllers: {
                 topLeft: {
-                    x: elem.x - controllerSize - bw,
-                    y: elem.y - controllerSize - bw,
+                    x: elem.x - controllerOffset - bw,
+                    y: elem.y - controllerOffset - bw,
                     invisible: hideObliqueDirection || ((_c = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _c === void 0 ? void 0 : _c.disbaleScale) === true,
                 },
                 top: {
                     x: elem.x + elem.w / 2,
-                    y: elem.y - controllerSize - bw,
+                    y: elem.y - controllerOffset - bw,
                     invisible: ((_d = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _d === void 0 ? void 0 : _d.disbaleScale) === true,
                 },
                 topRight: {
-                    x: elem.x + elem.w + controllerSize + bw,
-                    y: elem.y - controllerSize - bw,
+                    x: elem.x + elem.w + controllerOffset + bw,
+                    y: elem.y - controllerOffset - bw,
                     invisible: hideObliqueDirection || ((_e = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _e === void 0 ? void 0 : _e.disbaleScale) === true,
                 },
                 right: {
-                    x: elem.x + elem.w + controllerSize + bw,
+                    x: elem.x + elem.w + controllerOffset + bw,
                     y: elem.y + elem.h / 2,
                     invisible: ((_f = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _f === void 0 ? void 0 : _f.disbaleScale) === true
                 },
                 bottomRight: {
-                    x: elem.x + elem.w + controllerSize + bw,
-                    y: elem.y + elem.h + controllerSize + bw,
+                    x: elem.x + elem.w + controllerOffset + bw,
+                    y: elem.y + elem.h + controllerOffset + bw,
                     invisible: hideObliqueDirection || ((_g = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _g === void 0 ? void 0 : _g.disbaleScale) === true,
                 },
                 bottom: {
                     x: elem.x + elem.w / 2,
-                    y: elem.y + elem.h + controllerSize + bw,
+                    y: elem.y + elem.h + controllerOffset + bw,
                     invisible: ((_h = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _h === void 0 ? void 0 : _h.disbaleScale) === true,
                 },
                 bottomLeft: {
-                    x: elem.x - controllerSize - bw,
-                    y: elem.y + elem.h + controllerSize + bw,
+                    x: elem.x - controllerOffset - bw,
+                    y: elem.y + elem.h + controllerOffset + bw,
                     invisible: hideObliqueDirection || ((_j = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _j === void 0 ? void 0 : _j.disbaleScale) === true,
                 },
                 left: {
-                    x: elem.x - controllerSize - bw,
+                    x: elem.x - controllerOffset - bw,
                     y: elem.y + elem.h / 2,
                     invisible: ((_k = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _k === void 0 ? void 0 : _k.disbaleScale) === true
                 },
@@ -5540,299 +5020,8 @@ var Helper = (function () {
     return Helper;
 }());
 
-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 _a = index$1.loader, loadImage = _a.loadImage, loadSVG = _a.loadSVG, loadHTML = _a.loadHTML;
-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 {
-            type: type,
-            status: 'null',
-            content: null,
-            source: source,
-            elemW: elemW,
-            elemH: elemH,
-        };
-    };
-    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);
-        var uuidMap = {};
-        uuids.forEach(function (url, i) {
-            uuidMap[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) {
-                    loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-                    var status = _loadAction();
-                    _this._storageLoadData[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,
-                    };
-                    if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-                        _this._status = LoaderStatus.FREE;
-                        _this._loadTask();
-                    }
-                    _this._event.trigger('load', {
-                        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,
-                    });
-                }).catch(function (err) {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                    console.warn(err);
-                    loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
-                    var status = _loadAction();
-                    if (_this._currentLoadData[uuid]) {
-                        _this._storageLoadData[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,
-                        };
-                    }
-                    if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
-                        _this._status = LoaderStatus.FREE;
-                        _this._loadTask();
-                    }
-                    if (_this._currentLoadData[uuid]) {
-                        _this._event.trigger('error', {
-                            type: (_e = _this._storageLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.type,
-                            status: (_f = _this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.status,
-                            content: (_g = _this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.content,
-                            source: (_h = _this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.source,
-                            elemW: (_j = _this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.elemW,
-                            elemH: (_k = _this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemH,
-                        });
-                    }
-                });
-            };
-            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$4(this, void 0, void 0, function () {
-            var image, image, image;
-            return __generator$4(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 _board$1 = Symbol('_displayCtx');
-var _helper$1 = Symbol('_helper');
+var _helper = Symbol('_helper');
 var _element$1 = Symbol('_element');
 var _opts$1 = Symbol('_opts');
 var Mapper = (function () {
@@ -5840,7 +5029,7 @@ var Mapper = (function () {
         this[_opts$1] = opts;
         this[_board$1] = this[_opts$1].board;
         this[_element$1] = this[_opts$1].element;
-        this[_helper$1] = this[_opts$1].helper;
+        this[_helper] = this[_opts$1].helper;
     }
     Mapper.prototype.isEffectivePoint = function (p) {
         var scrollLineWidth = this[_board$1].getScrollLineWidth();
@@ -5856,7 +5045,7 @@ var Mapper = (function () {
         if (!this.isEffectivePoint(p)) {
             return { cursor: cursor, elementUUID: elementUUID };
         }
-        var _a = this[_helper$1].isPointInElementWrapperController(p, data), uuid = _a.uuid, hoverControllerDirection = _a.hoverControllerDirection;
+        var _a = this[_helper].isPointInElementWrapperController(p, data), uuid = _a.uuid, hoverControllerDirection = _a.hoverControllerDirection;
         var direction = hoverControllerDirection;
         if (uuid && direction) {
             switch (direction) {
@@ -5943,198 +5132,19 @@ function isElement(elem) {
         return false;
     }
     return true;
-}
-function isNumber(num) {
-    return (num >= 0 || num < 0);
-}
-
-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 requestAnimationFrame = window.requestAnimationFrame;
-var deepClone$3 = index$1.data.deepClone;
-var DrawStatus;
-(function (DrawStatus) {
-    DrawStatus["NULL"] = "null";
-    DrawStatus["FREE"] = "free";
-    DrawStatus["DRAWING"] = "drawing";
-    DrawStatus["FREEZE"] = "freeze";
-})(DrawStatus || (DrawStatus = {}));
-((function (_super) {
-    __extends$1(Renderer, _super);
-    function Renderer(board) {
-        var _this = _super.call(this) || this;
-        _this._queue = [];
-        _this._status = DrawStatus.NULL;
-        _this._board = board;
-        _this._loader = new Loader({
-            board: board,
-            maxParallelNum: 6
-        });
-        _this._loader.on('load', function (res) {
-            _this._drawFrame();
-        });
-        _this._loader.on('error', function (res) {
-            console.log('Loader Error: ', res);
-        });
-        _this._loader.on('complete', function (res) {
-        });
-        return _this;
-    }
-    Renderer.prototype.freeze = function () {
-        this._status = DrawStatus.FREEZE;
-    };
-    Renderer.prototype.thaw = function () {
-        this._status = DrawStatus.FREE;
-    };
-    Renderer.prototype.render = function (data, helper, changeResourceUUIDs) {
-        if ([DrawStatus.FREEZE].includes(this._status)) {
-            return;
-        }
-        var _data = deepClone$3({ data: data, helper: helper });
-        this._queue.push(_data);
-        if (this._status !== DrawStatus.DRAWING) {
-            this._status = DrawStatus.DRAWING;
-            this._drawFrame();
-        }
-        this._loader.load(data, changeResourceUUIDs);
-    };
-    Renderer.prototype._drawFrame = function () {
-        var _this = this;
-        if (this._status === DrawStatus.FREEZE) {
-            return;
-        }
-        requestAnimationFrame(function () {
-            if (_this._status === DrawStatus.FREEZE) {
-                return;
-            }
-            var ctx = _this._board.getContext();
-            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) {
-                    drawContext(ctx, item.data, item.helper, _this._loader);
-                    _this._board.draw();
-                }
-            }
-            else if (item) {
-                drawContext(ctx, item.data, item.helper, _this._loader);
-                _this._board.draw();
-                _this._retainQueueOneItem();
-                if (!isLastFrame) {
-                    _this._drawFrame();
-                }
-                else {
-                    _this._status = DrawStatus.FREE;
-                }
-            }
-            else {
-                _this._status = DrawStatus.FREE;
-            }
-            _this.trigger('drawFrame', undefined);
-            if (_this._loader.isComplete() === true && _this._queue.length === 1 && _this._status === DrawStatus.FREE) {
-                _this.trigger('drawFrameComplete', undefined);
-                _this.freeze();
-            }
-        });
-    };
-    Renderer.prototype._retainQueueOneItem = function () {
-        if (this._queue.length <= 1) {
-            return;
-        }
-        var lastOne = deepClone$3(this._queue[this._queue.length - 1]);
-        this._queue = [lastOne];
-    };
-    return Renderer;
-})(RendererEvent));
-
-var Mode;
-(function (Mode) {
-    Mode["NULL"] = "null";
-    Mode["SELECT_ELEMENT"] = "select-element";
-    Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
-    Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
-    Mode["SELECT_AREA"] = "select-area";
-})(Mode || (Mode = {}));
-var CursorStatus;
-(function (CursorStatus) {
-    CursorStatus["DRAGGING"] = "dragging";
-    CursorStatus["NULL"] = "null";
-})(CursorStatus || (CursorStatus = {}));
-
-function createData() {
-    return {
-        onlyRender: false,
-        hasInited: false,
-        mode: Mode.NULL,
-        cursorStatus: CursorStatus.NULL,
-        selectedUUID: null,
-        selectedUUIDList: [],
-        hoverUUID: null,
-        selectedControllerDirection: null,
-        hoverControllerDirection: null,
-        prevPoint: null,
+}
+function isNumber(num) {
+    return (num >= 0 || num < 0);
+}
+
+function createData$1() {
+    return {
+        hasInited: false,
     };
 }
-var TempData = (function () {
+var TempData$1 = (function () {
     function TempData() {
-        this._temp = createData();
+        this._temp = createData$1();
     }
     TempData.prototype.set = function (name, value) {
         this._temp[name] = value;
@@ -6143,7 +5153,7 @@ var TempData = (function () {
         return this._temp[name];
     };
     TempData.prototype.clear = function () {
-        this._temp = createData();
+        this._temp = createData$1();
     };
     return TempData;
 }());
@@ -6154,30 +5164,42 @@ var _opts = Symbol('_opts');
 var _config = Symbol('_config');
 var _renderer = Symbol('_renderer');
 var _element = Symbol('_element');
-var _helper = Symbol('_helper');
 var _tempData = Symbol('_tempData');
 var _draw = Symbol('_draw');
 var _coreEvent = Symbol('_coreEvent');
-var _mapper = Symbol('_mapper');
 var _emitChangeScreen = Symbol('_emitChangeScreen');
 var _emitChangeData = Symbol('_emitChangeData');
-var _todo = Symbol('_todo');
+var _engine = Symbol('_engine');
+
+var Mode;
+(function (Mode) {
+    Mode["NULL"] = "null";
+    Mode["SELECT_ELEMENT"] = "select-element";
+    Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
+    Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
+    Mode["SELECT_AREA"] = "select-area";
+})(Mode || (Mode = {}));
+var CursorStatus;
+(function (CursorStatus) {
+    CursorStatus["DRAGGING"] = "dragging";
+    CursorStatus["NULL"] = "null";
+})(CursorStatus || (CursorStatus = {}));
 
 var deepClone$2 = index$1.data.deepClone;
 var createUUID = index$1.uuid.createUUID;
 function getSelectedElements(core) {
     var elems = [];
     var list = [];
-    var uuid = core[_tempData].get('selectedUUID');
+    var uuid = core[_engine].temp.get('selectedUUID');
     if (typeof uuid === 'string' && uuid) {
         list.push(uuid);
     }
     else {
-        list = core[_tempData].get('selectedUUIDList');
+        list = core[_engine].temp.get('selectedUUIDList');
     }
     list.forEach(function (uuid) {
         var _a;
-        var index = core[_helper].getElementIndexByUUID(uuid);
+        var index = core[_engine].helper.getElementIndexByUUID(uuid);
         if (index !== null && index >= 0) {
             var elem = (_a = core[_data]) === null || _a === void 0 ? void 0 : _a.elements[index];
             if (elem)
@@ -6188,7 +5210,7 @@ function getSelectedElements(core) {
 }
 function getElement(core, uuid) {
     var elem = null;
-    var index = core[_helper].getElementIndexByUUID(uuid);
+    var index = core[_engine].helper.getElementIndexByUUID(uuid);
     if (index !== null && core[_data].elements[index]) {
         elem = deepClone$2(core[_data].elements[index]);
     }
@@ -6220,33 +5242,29 @@ function updateElement(core, elem) {
     core[_draw]({ resourceChangeUUIDs: resourceChangeUUIDs });
 }
 function selectElementByIndex(core, index, opts) {
-    if (core[_tempData].get('onlyRender') === true)
-        return;
     if (core[_data].elements[index]) {
         var uuid = core[_data].elements[index].uuid;
         if ((opts === null || opts === void 0 ? void 0 : opts.useMode) === true) {
-            core[_tempData].set('mode', Mode.SELECT_ELEMENT);
+            core[_engine].temp.set('mode', Mode.SELECT_ELEMENT);
         }
         else {
-            core[_tempData].set('mode', Mode.NULL);
+            core[_engine].temp.set('mode', Mode.NULL);
         }
         if (typeof uuid === 'string') {
-            core[_tempData].set('selectedUUID', uuid);
-            core[_tempData].set('selectedUUIDList', []);
+            core[_engine].temp.set('selectedUUID', uuid);
+            core[_engine].temp.set('selectedUUIDList', []);
         }
         core[_draw]();
     }
 }
 function selectElement(core, uuid, opts) {
-    if (core[_tempData].get('onlyRender') === true)
-        return;
-    var index = core[_helper].getElementIndexByUUID(uuid);
+    var index = core[_engine].helper.getElementIndexByUUID(uuid);
     if (typeof index === 'number' && index >= 0) {
         core.selectElementByIndex(index, opts);
     }
 }
 function moveUpElement(core, uuid) {
-    var index = core[_helper].getElementIndexByUUID(uuid);
+    var index = core[_engine].helper.getElementIndexByUUID(uuid);
     if (typeof index === 'number' && index >= 0 && index < core[_data].elements.length - 1) {
         var temp = core[_data].elements[index];
         core[_data].elements[index] = core[_data].elements[index + 1];
@@ -6256,7 +5274,7 @@ function moveUpElement(core, uuid) {
     core[_draw]();
 }
 function moveDownElement(core, uuid) {
-    var index = core[_helper].getElementIndexByUUID(uuid);
+    var index = core[_engine].helper.getElementIndexByUUID(uuid);
     if (typeof index === 'number' && index > 0 && index < core[_data].elements.length) {
         var temp = core[_data].elements[index];
         core[_data].elements[index] = core[_data].elements[index - 1];
@@ -6282,7 +5300,7 @@ function deleteElement(core, uuid) {
     }
 }
 function insertElementBefore(core, elem, beforeUUID) {
-    var index = core[_helper].getElementIndexByUUID(beforeUUID);
+    var index = core[_engine].helper.getElementIndexByUUID(beforeUUID);
     if (index !== null) {
         return core.insertElementBeforeIndex(elem, index);
     }
@@ -6300,7 +5318,7 @@ function insertElementBeforeIndex(core, elem, index) {
     return null;
 }
 function insertElementAfter(core, elem, beforeUUID) {
-    var index = core[_helper].getElementIndexByUUID(beforeUUID);
+    var index = core[_engine].helper.getElementIndexByUUID(beforeUUID);
     if (index !== null) {
         return core.insertElementAfterIndex(elem, index);
     }
@@ -6318,168 +5336,241 @@ function insertElementAfterIndex(core, elem, index) {
     return null;
 }
 
+function createData() {
+    return {
+        hasInited: false,
+        mode: Mode.NULL,
+        cursorStatus: CursorStatus.NULL,
+        selectedUUID: null,
+        selectedUUIDList: [],
+        hoverUUID: null,
+        selectedControllerDirection: null,
+        hoverControllerDirection: null,
+        prevPoint: null,
+    };
+}
+var TempData = (function () {
+    function TempData() {
+        this._temp = createData();
+    }
+    TempData.prototype.set = function (name, value) {
+        this._temp[name] = value;
+    };
+    TempData.prototype.get = function (name) {
+        return this._temp[name];
+    };
+    TempData.prototype.clear = function () {
+        this._temp = createData();
+    };
+    return TempData;
+}());
+
 var time = index$1.time;
 var deepClone$1 = index$1.data.deepClone;
-function initEvent(core) {
-    if (core[_tempData].get('hasInited') === true) {
-        return;
-    }
-    core[_board].on('hover', time.throttle(handleHover(core), 32));
-    core[_board].on('leave', time.throttle(handleLeave(core), 32));
-    core[_board].on('point', time.throttle(handleClick(core), 16));
-    core[_board].on('doubleClick', handleDoubleClick(core));
-    if (core[_tempData].get('onlyRender') === true) {
-        return;
+var Engine = (function () {
+    function Engine(opts) {
+        this._plugins = [];
+        var board = opts.board, config = opts.config, element = opts.element;
+        var helper = new Helper(board, config);
+        this._opts = opts;
+        this.temp = new TempData();
+        this.helper = helper;
+        this._mapper = new Mapper({ board: board, helper: helper, element: element });
     }
-    core[_board].on('point', handlePoint(core));
-    core[_board].on('moveStart', handleMoveStart(core));
-    core[_board].on('move', time.throttle(handleMove(core), 16));
-    core[_board].on('moveEnd', handleMoveEnd(core));
-    core[_renderer].on('drawFrame', function () {
-        core[_coreEvent].trigger('drawFrame', undefined);
-    });
-    core[_renderer].on('drawFrameComplete', function () {
-        core[_coreEvent].trigger('drawFrameComplete', undefined);
-    });
-    core[_tempData].set('hasInited', true);
-}
-function handleDoubleClick(core) {
-    return function (point) {
+    Engine.prototype.addPlugin = function (plugin) {
+        this._plugins.push(plugin);
+    };
+    Engine.prototype.getHelperConfig = function () {
+        return this.helper.getConfig();
+    };
+    Engine.prototype.updateHelperConfig = function (opts) {
+        var _a;
+        var _b = this._opts, board = _b.board, getDataFeekback = _b.getDataFeekback, config = _b.config;
+        var data = getDataFeekback();
+        var transform = board.getTransform();
+        this.helper.updateConfig(data, {
+            width: opts.width,
+            height: opts.height,
+            devicePixelRatio: opts.devicePixelRatio,
+            canScroll: ((_a = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _a === void 0 ? void 0 : _a.use) === true,
+            selectedUUID: this.temp.get('selectedUUID'),
+            selectedUUIDList: this.temp.get('selectedUUIDList'),
+            scale: transform.scale,
+            scrollX: transform.scrollX,
+            scrollY: transform.scrollY,
+        });
+    };
+    Engine.prototype.init = function () {
+        this._initEvent();
+    };
+    Engine.prototype._initEvent = function () {
+        if (this.temp.get('hasInited') === true) {
+            return;
+        }
+        var board = this._opts.board;
+        board.on('hover', time.throttle(this._handleHover.bind(this), 32));
+        board.on('leave', time.throttle(this._handleLeave.bind(this), 32));
+        board.on('point', time.throttle(this._handleClick.bind(this), 16));
+        board.on('doubleClick', this._handleDoubleClick.bind(this));
+        board.on('point', this._handlePoint.bind(this));
+        board.on('moveStart', this._handleMoveStart.bind(this));
+        board.on('move', time.throttle(this._handleMove.bind(this), 16));
+        board.on('moveEnd', this._handleMoveEnd.bind(this));
+    };
+    Engine.prototype._handleDoubleClick = function (point) {
         var _a, _b, _c;
-        var _d = core[_element].isPointInElement(point, core[_data]), index = _d[0], uuid = _d[1];
+        var _d = this._opts, element = _d.element, getDataFeekback = _d.getDataFeekback, drawFeekback = _d.drawFeekback, coreEvent = _d.coreEvent;
+        var data = getDataFeekback();
+        var _e = element.isPointInElement(point, data), index = _e[0], uuid = _e[1];
         if (index >= 0 && uuid) {
-            var elem = deepClone$1((_a = core[_data].elements) === null || _a === void 0 ? void 0 : _a[index]);
+            var elem = deepClone$1((_a = data.elements) === null || _a === void 0 ? void 0 : _a[index]);
             if (((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
-                core[_coreEvent].trigger('screenDoubleClickElement', { index: index, uuid: uuid, element: deepClone$1((_c = core[_data].elements) === null || _c === void 0 ? void 0 : _c[index]) });
+                coreEvent.trigger('screenDoubleClickElement', { index: index, uuid: uuid, element: deepClone$1((_c = data.elements) === null || _c === void 0 ? void 0 : _c[index]) });
             }
         }
-        core[_draw]();
+        drawFeekback();
     };
-}
-function handlePoint(core) {
-    return function (point) {
+    Engine.prototype._handlePoint = function (point) {
         var _a, _b, _c;
-        if (!core[_mapper].isEffectivePoint(point)) {
+        if (!this._mapper.isEffectivePoint(point)) {
             return;
         }
-        if (core[_helper].isPointInElementList(point, core[_data])) {
-            core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST);
+        var _d = this._opts, element = _d.element, getDataFeekback = _d.getDataFeekback, selectElementByIndex = _d.selectElementByIndex, coreEvent = _d.coreEvent, emitChangeScreen = _d.emitChangeScreen, drawFeekback = _d.drawFeekback;
+        var helper = this.helper;
+        var data = getDataFeekback();
+        if (helper.isPointInElementList(point, data)) {
+            this.temp.set('mode', Mode.SELECT_ELEMENT_LIST);
         }
         else {
-            var _d = core[_helper].isPointInElementWrapperController(point, core[_data]), uuid = _d.uuid, selectedControllerDirection = _d.selectedControllerDirection;
+            var _e = helper.isPointInElementWrapperController(point, data), uuid = _e.uuid, selectedControllerDirection = _e.selectedControllerDirection;
             if (uuid && selectedControllerDirection) {
-                core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
-                core[_tempData].set('selectedControllerDirection', selectedControllerDirection);
-                core[_tempData].set('selectedUUID', uuid);
+                this.temp.set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
+                this.temp.set('selectedControllerDirection', selectedControllerDirection);
+                this.temp.set('selectedUUID', uuid);
             }
             else {
-                var _e = core[_element].isPointInElement(point, core[_data]), index = _e[0], uuid_1 = _e[1];
-                if (index >= 0 && ((_b = (_a = core[_data].elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
-                    core.selectElementByIndex(index, { useMode: true });
-                    if (typeof uuid_1 === 'string' && core[_coreEvent].has('screenSelectElement')) {
-                        core[_coreEvent].trigger('screenSelectElement', { index: index, uuid: uuid_1, element: deepClone$1((_c = core[_data].elements) === null || _c === void 0 ? void 0 : _c[index]) });
-                        core[_emitChangeScreen]();
+                var _f = element.isPointInElement(point, data), index = _f[0], uuid_1 = _f[1];
+                if (index >= 0 && ((_b = (_a = data.elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
+                    selectElementByIndex(index, { useMode: true });
+                    if (typeof uuid_1 === 'string' && coreEvent.has('screenSelectElement')) {
+                        coreEvent.trigger('screenSelectElement', { index: index, uuid: uuid_1, element: deepClone$1((_c = data.elements) === null || _c === void 0 ? void 0 : _c[index]) });
+                        emitChangeScreen();
                     }
-                    core[_tempData].set('mode', Mode.SELECT_ELEMENT);
+                    this.temp.set('mode', Mode.SELECT_ELEMENT);
                 }
                 else {
-                    core[_tempData].set('selectedUUIDList', []);
-                    core[_tempData].set('selectedUUID', null);
-                    core[_tempData].set('mode', Mode.SELECT_AREA);
+                    this.temp.set('selectedUUIDList', []);
+                    this.temp.set('selectedUUID', null);
+                    this.temp.set('mode', Mode.SELECT_AREA);
                 }
             }
         }
-        core[_draw]();
+        drawFeekback();
     };
-}
-function handleClick(core) {
-    return function (point) {
+    Engine.prototype._handleClick = function (point) {
         var _a;
-        var _b = core[_element].isPointInElement(point, core[_data]), index = _b[0], uuid = _b[1];
+        var _b = this._opts, element = _b.element, getDataFeekback = _b.getDataFeekback, coreEvent = _b.coreEvent, drawFeekback = _b.drawFeekback;
+        var data = getDataFeekback();
+        var _c = element.isPointInElement(point, data), index = _c[0], uuid = _c[1];
         if (index >= 0 && uuid) {
-            core[_coreEvent].trigger('screenClickElement', { index: index, uuid: uuid, element: deepClone$1((_a = core[_data].elements) === null || _a === void 0 ? void 0 : _a[index]) });
+            coreEvent.trigger('screenClickElement', { index: index, uuid: uuid, element: deepClone$1((_a = data.elements) === null || _a === void 0 ? void 0 : _a[index]) });
         }
-        core[_draw]();
+        drawFeekback();
     };
-}
-function handleMoveStart(core) {
-    return function (point) {
-        core[_tempData].set('prevPoint', point);
-        var uuid = core[_tempData].get('selectedUUID');
-        if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_LIST) ;
-        else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT) {
-            if (typeof uuid === 'string' && core[_coreEvent].has('screenMoveElementStart')) {
-                core[_coreEvent].trigger('screenMoveElementStart', {
-                    index: core[_element].getElementIndex(core[_data], uuid),
+    Engine.prototype._handleMoveStart = function (point) {
+        var _a = this._opts, element = _a.element, getDataFeekback = _a.getDataFeekback, coreEvent = _a.coreEvent;
+        var data = getDataFeekback();
+        var helper = this.helper;
+        this.temp.set('prevPoint', point);
+        var uuid = this.temp.get('selectedUUID');
+        if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) ;
+        else if (this.temp.get('mode') === Mode.SELECT_ELEMENT) {
+            if (typeof uuid === 'string' && coreEvent.has('screenMoveElementStart')) {
+                coreEvent.trigger('screenMoveElementStart', {
+                    index: element.getElementIndex(data, uuid),
                     uuid: uuid,
                     x: point.x,
                     y: point.y
                 });
             }
         }
-        else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
-            core[_helper].startSelectArea(point);
+        else if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            helper.startSelectArea(point);
         }
     };
-}
-function handleMove(core) {
-    return function (point) {
-        if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_LIST) {
-            dragElements(core, core[_tempData].get('selectedUUIDList'), point, core[_tempData].get('prevPoint'));
-            core[_draw]();
-            core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
+    Engine.prototype._handleMove = function (point) {
+        var drawFeekback = this._opts.drawFeekback;
+        var helper = this.helper;
+        if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) {
+            this._dragElements(this.temp.get('selectedUUIDList'), point, this.temp.get('prevPoint'));
+            drawFeekback();
+            this.temp.set('cursorStatus', CursorStatus.DRAGGING);
         }
-        else if (typeof core[_tempData].get('selectedUUID') === 'string') {
-            if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT) {
-                dragElements(core, [core[_tempData].get('selectedUUID')], point, core[_tempData].get('prevPoint'));
-                core[_draw]();
-                core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
+        else if (typeof this.temp.get('selectedUUID') === 'string') {
+            if (this.temp.get('mode') === Mode.SELECT_ELEMENT) {
+                this._dragElements([this.temp.get('selectedUUID')], point, this.temp.get('prevPoint'));
+                drawFeekback();
+                this.temp.set('cursorStatus', CursorStatus.DRAGGING);
             }
-            else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && core[_tempData].get('selectedControllerDirection')) {
-                transfromElement(core, core[_tempData].get('selectedUUID'), point, core[_tempData].get('prevPoint'), core[_tempData].get('selectedControllerDirection'));
-                core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
+            else if (this.temp.get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && this.temp.get('selectedControllerDirection')) {
+                this._transfromElement(this.temp.get('selectedUUID'), point, this.temp.get('prevPoint'), this.temp.get('selectedControllerDirection'));
+                this.temp.set('cursorStatus', CursorStatus.DRAGGING);
             }
         }
-        else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
-            core[_helper].changeSelectArea(point);
-            core[_draw]();
+        else if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            helper.changeSelectArea(point);
+            drawFeekback();
         }
-        core[_tempData].set('prevPoint', point);
+        this.temp.set('prevPoint', point);
     };
-}
-function dragElements(core, uuids, point, prevPoint) {
-    if (!prevPoint) {
-        return;
-    }
-    uuids.forEach(function (uuid) {
-        var _a, _b;
-        var idx = core[_helper].getElementIndexByUUID(uuid);
-        if (idx === null)
+    Engine.prototype._dragElements = function (uuids, point, prevPoint) {
+        if (!prevPoint) {
             return;
-        var elem = core[_data].elements[idx];
-        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) !== true && ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
-            core[_element].dragElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale);
         }
-    });
-    core[_draw]();
-}
-function handleMoveEnd(core) {
-    return function (point) {
-        var uuid = core[_tempData].get('selectedUUID');
+        var _a = this._opts, board = _a.board, element = _a.element, getDataFeekback = _a.getDataFeekback, drawFeekback = _a.drawFeekback;
+        var data = getDataFeekback();
+        var helper = this.helper;
+        uuids.forEach(function (uuid) {
+            var _a, _b;
+            var idx = helper.getElementIndexByUUID(uuid);
+            if (idx === null)
+                return;
+            var elem = data.elements[idx];
+            if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) !== true && ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
+                element.dragElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale);
+            }
+        });
+        drawFeekback();
+    };
+    Engine.prototype._transfromElement = function (uuid, point, prevPoint, direction) {
+        if (!prevPoint) {
+            return null;
+        }
+        var _a = this._opts, board = _a.board, element = _a.element, getDataFeekback = _a.getDataFeekback, drawFeekback = _a.drawFeekback;
+        var data = getDataFeekback();
+        var result = element.transformElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale, direction);
+        drawFeekback();
+        return result;
+    };
+    Engine.prototype._handleMoveEnd = function (point) {
+        var _a = this._opts, element = _a.element, getDataFeekback = _a.getDataFeekback, coreEvent = _a.coreEvent, drawFeekback = _a.drawFeekback, emitChangeData = _a.emitChangeData;
+        var data = getDataFeekback();
+        var helper = this.helper;
+        var uuid = this.temp.get('selectedUUID');
         if (typeof uuid === 'string') {
-            var index = core[_element].getElementIndex(core[_data], uuid);
-            var elem = core[_data].elements[index];
+            var index = element.getElementIndex(data, uuid);
+            var elem = data.elements[index];
             if (elem) {
-                if (core[_coreEvent].has('screenMoveElementEnd')) {
-                    core[_coreEvent].trigger('screenMoveElementEnd', {
+                if (coreEvent.has('screenMoveElementEnd')) {
+                    coreEvent.trigger('screenMoveElementEnd', {
                         index: index,
                         uuid: uuid,
                         x: point.x,
                         y: point.y
                     });
                 }
-                if (core[_coreEvent].has('screenChangeElement')) {
-                    core[_coreEvent].trigger('screenChangeElement', {
+                if (coreEvent.has('screenChangeElement')) {
+                    coreEvent.trigger('screenChangeElement', {
                         index: index,
                         uuid: uuid,
                         width: elem.w,
@@ -6487,91 +5578,237 @@ function handleMoveEnd(core) {
                         angle: elem.angle || 0
                     });
                 }
-                core[_emitChangeData]();
+                emitChangeData();
             }
         }
-        else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
-            var uuids = core[_helper].calcSelectedElements(core[_data]);
+        else if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            var uuids = helper.calcSelectedElements(data);
             if (uuids.length > 0) {
-                core[_tempData].set('selectedUUIDList', uuids);
-                core[_tempData].set('selectedUUID', null);
+                this.temp.set('selectedUUIDList', uuids);
+                this.temp.set('selectedUUID', null);
             }
             else {
-                core[_tempData].set('mode', Mode.NULL);
+                this.temp.set('mode', Mode.NULL);
             }
-            core[_helper].clearSelectedArea();
-            core[_draw]();
+            helper.clearSelectedArea();
+            drawFeekback();
         }
-        if (core[_tempData].get('mode') !== Mode.SELECT_ELEMENT) {
-            core[_tempData].set('selectedUUID', null);
+        if (this.temp.get('mode') !== Mode.SELECT_ELEMENT) {
+            this.temp.set('selectedUUID', null);
         }
-        core[_tempData].set('cursorStatus', CursorStatus.NULL);
-        core[_tempData].set('mode', Mode.NULL);
+        this.temp.set('cursorStatus', CursorStatus.NULL);
+        this.temp.set('mode', Mode.NULL);
     };
-}
-function handleHover(core) {
-    return function (point) {
+    Engine.prototype._handleHover = function (point) {
         var _a, _b;
         var isMouseOverElement = false;
-        if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
-            if (core[_tempData].get('onlyRender') !== true)
-                core[_board].resetCursor();
+        var _c = this._opts, board = _c.board, getDataFeekback = _c.getDataFeekback, coreEvent = _c.coreEvent;
+        var data = getDataFeekback();
+        var helper = this.helper;
+        var mapper = this._mapper;
+        if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            board.resetCursor();
         }
-        else if (core[_tempData].get('cursorStatus') === CursorStatus.NULL) {
-            var _c = core[_mapper].judgePointCursor(point, core[_data]), cursor = _c.cursor, elementUUID = _c.elementUUID;
-            if (core[_tempData].get('onlyRender') !== true)
-                core[_board].setCursor(cursor);
+        else if (this.temp.get('cursorStatus') === CursorStatus.NULL) {
+            var _d = mapper.judgePointCursor(point, data), cursor = _d.cursor, elementUUID = _d.elementUUID;
+            board.setCursor(cursor);
             if (elementUUID) {
-                var index = core[_helper].getElementIndexByUUID(elementUUID);
+                var index = helper.getElementIndexByUUID(elementUUID);
                 if (index !== null && index >= 0) {
-                    var elem = core[_data].elements[index];
+                    var elem = data.elements[index];
                     if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) === true || ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) === true) {
-                        core[_board].resetCursor();
+                        board.resetCursor();
                         return;
                     }
-                    if (core[_tempData].get('hoverUUID') !== elem.uuid) {
-                        var preIndex = core[_helper].getElementIndexByUUID(core[_tempData].get('hoverUUID') || '');
-                        if (preIndex !== null && core[_data].elements[preIndex]) {
-                            core[_coreEvent].trigger('mouseLeaveElement', {
-                                uuid: core[_tempData].get('hoverUUID'),
+                    if (this.temp.get('hoverUUID') !== elem.uuid) {
+                        var preIndex = helper.getElementIndexByUUID(this.temp.get('hoverUUID') || '');
+                        if (preIndex !== null && data.elements[preIndex]) {
+                            coreEvent.trigger('mouseLeaveElement', {
+                                uuid: this.temp.get('hoverUUID'),
                                 index: preIndex,
-                                element: core[_data].elements[preIndex]
+                                element: data.elements[preIndex]
                             });
                         }
                     }
                     if (elem) {
-                        core[_coreEvent].trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
-                        core[_tempData].set('hoverUUID', elem.uuid);
+                        coreEvent.trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
+                        this.temp.set('hoverUUID', elem.uuid);
                         isMouseOverElement = true;
                     }
                 }
             }
         }
-        if (isMouseOverElement !== true && core[_tempData].get('hoverUUID') !== null) {
-            var uuid = core[_tempData].get('hoverUUID');
-            var index = core[_helper].getElementIndexByUUID(uuid || '');
+        if (isMouseOverElement !== true && this.temp.get('hoverUUID') !== null) {
+            var uuid = this.temp.get('hoverUUID');
+            var index = helper.getElementIndexByUUID(uuid || '');
             if (index !== null)
-                core[_coreEvent].trigger('mouseLeaveElement', { uuid: uuid, index: index, element: core[_data].elements[index] });
-            core[_tempData].set('hoverUUID', null);
+                coreEvent.trigger('mouseLeaveElement', { uuid: uuid, index: index, element: data.elements[index] });
+            this.temp.set('hoverUUID', null);
         }
-        if (core[_coreEvent].has('mouseOverScreen'))
-            core[_coreEvent].trigger('mouseOverScreen', point);
+        if (coreEvent.has('mouseOverScreen'))
+            coreEvent.trigger('mouseOverScreen', point);
     };
-}
-function handleLeave(core) {
-    return function () {
-        if (core[_coreEvent].has('mouseLeaveScreen')) {
-            core[_coreEvent].trigger('mouseLeaveScreen', undefined);
+    Engine.prototype._handleLeave = function () {
+        var coreEvent = this._opts.coreEvent;
+        if (coreEvent.has('mouseLeaveScreen')) {
+            coreEvent.trigger('mouseLeaveScreen', undefined);
         }
     };
+    return Engine;
+}());
+
+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 drawElementWrapper(ctx, config) {
+    if (!(config === null || config === void 0 ? void 0 : config.selectedElementWrapper)) {
+        return;
+    }
+    var wrapper = config.selectedElementWrapper;
+    clearContext(ctx);
+    rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
+        ctx.beginPath();
+        ctx.setLineDash(wrapper.lineDash);
+        ctx.setLineWidth(wrapper.lineWidth);
+        ctx.setStrokeStyle(wrapper.color);
+        ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
+        ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
+        ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
+        ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
+        ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
+        ctx.stroke();
+        ctx.closePath();
+        if (wrapper.lock !== true) {
+            if (wrapper.controllers.rotate.invisible !== true) {
+                ctx.beginPath();
+                ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
+                ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
+                ctx.stroke();
+                ctx.closePath();
+                ctx.beginPath();
+                ctx.setLineDash([]);
+                ctx.setLineWidth(wrapper.controllerSize / 2);
+                ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
+                ctx.stroke();
+                ctx.closePath();
+            }
+            ctx.setFillStyle(wrapper.color);
+            [
+                wrapper.controllers.topLeft,
+                wrapper.controllers.top,
+                wrapper.controllers.topRight,
+                wrapper.controllers.right,
+                wrapper.controllers.bottomRight,
+                wrapper.controllers.bottom,
+                wrapper.controllers.bottomLeft,
+                wrapper.controllers.left,
+            ].forEach(function (controller) {
+                if (controller.invisible !== true) {
+                    ctx.beginPath();
+                    ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.closePath();
+                }
+            });
+        }
+        else {
+            clearContext(ctx);
+            ctx.setStrokeStyle(wrapper.color);
+            [
+                wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
+                wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
+            ].forEach(function (controller) {
+                ctx.beginPath();
+                ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                ctx.stroke();
+                ctx.closePath();
+                ctx.beginPath();
+                ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                ctx.stroke();
+                ctx.closePath();
+            });
+        }
+    });
 }
-function transfromElement(core, uuid, point, prevPoint, direction) {
-    if (!prevPoint) {
-        return null;
+function drawAreaWrapper(ctx, config) {
+    if (!(config === null || config === void 0 ? void 0 : config.selectedAreaWrapper)) {
+        return;
     }
-    var result = core[_element].transformElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale, direction);
-    core[_draw]();
-    return result;
+    var wrapper = config.selectedAreaWrapper;
+    if (wrapper && wrapper.w > 0 && wrapper.h > 0) {
+        clearContext(ctx);
+        ctx.setGlobalAlpha(0.3);
+        ctx.setFillStyle(wrapper.color);
+        ctx.fillRect(wrapper.x, wrapper.y, wrapper.w, wrapper.h);
+        clearContext(ctx);
+        ctx.beginPath();
+        ctx.setLineDash(wrapper.lineDash);
+        ctx.setLineWidth(wrapper.lineWidth);
+        ctx.setStrokeStyle(wrapper.color);
+        ctx.moveTo(wrapper.x, wrapper.y);
+        ctx.lineTo(wrapper.x + wrapper.w, wrapper.y);
+        ctx.lineTo(wrapper.x + wrapper.w, wrapper.y + wrapper.h);
+        ctx.lineTo(wrapper.x, wrapper.y + wrapper.h);
+        ctx.lineTo(wrapper.x, wrapper.y);
+        ctx.stroke();
+        ctx.closePath();
+    }
+}
+function drawElementListWrappers(ctx, config) {
+    if (!Array.isArray(config === null || config === void 0 ? void 0 : config.selectedElementListWrappers)) {
+        return;
+    }
+    var wrapperList = config.selectedElementListWrappers;
+    wrapperList === null || wrapperList === void 0 ? void 0 : wrapperList.forEach(function (wrapper) {
+        clearContext(ctx);
+        rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
+            clearContext(ctx);
+            ctx.setGlobalAlpha(0.05);
+            ctx.setFillStyle(wrapper.color);
+            ctx.fillRect(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x, wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y);
+            clearContext(ctx);
+            ctx.beginPath();
+            ctx.setLineDash(wrapper.lineDash);
+            ctx.setLineWidth(wrapper.lineWidth);
+            ctx.setStrokeStyle(wrapper.color);
+            ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
+            ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
+            ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
+            ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
+            ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
+            ctx.stroke();
+            ctx.closePath();
+            if (wrapper.lock === true) {
+                clearContext(ctx);
+                ctx.setStrokeStyle(wrapper.color);
+                [
+                    wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
+                    wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
+                ].forEach(function (controller) {
+                    ctx.beginPath();
+                    ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                    ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                    ctx.stroke();
+                    ctx.closePath();
+                    ctx.beginPath();
+                    ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                    ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                    ctx.stroke();
+                    ctx.closePath();
+                });
+            }
+        });
+    });
 }
 
 var deepClone = index$1.data.deepClone;
@@ -6580,10 +5817,9 @@ var Core = (function () {
         var _this = this;
         var _c, _d, _e;
         this[_a] = new CoreEvent();
-        this[_b] = new TempData();
+        this[_b] = new TempData$1();
         this[_data] = { elements: [] };
         this[_opts] = opts;
-        this[_tempData].set('onlyRender', opts.onlyRender === true);
         this[_config] = mergeConfig(config || {});
         this[_board] = new Board(mount, __assign$4(__assign$4({}, this[_opts]), { canScroll: (_c = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _c === void 0 ? void 0 : _c.use, scrollConfig: {
                 color: ((_d = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _d === void 0 ? void 0 : _d.color) || '#a0a0a0',
@@ -6592,7 +5828,7 @@ var Core = (function () {
         this[_renderer] = new Renderer();
         var drawFrame = function () {
             var helperCtx = _this[_board].getHelperContext();
-            var helperConfig = _this[_helper].getConfig();
+            var helperConfig = _this[_engine].getHelperConfig();
             _this[_board].clear();
             var _c = _this[_opts], contextWidth = _c.contextWidth, contextHeight = _c.contextHeight, devicePixelRatio = _c.devicePixelRatio;
             helperCtx.clearRect(0, 0, contextWidth * devicePixelRatio, contextHeight * devicePixelRatio);
@@ -6608,27 +5844,31 @@ var Core = (function () {
             drawFrame();
         });
         this[_element] = new Element(this[_board].getContext());
-        this[_helper] = new Helper(this[_board], this[_config]);
-        this[_mapper] = new Mapper({
+        this[_engine] = new Engine({
+            coreEvent: this[_coreEvent],
             board: this[_board],
-            helper: this[_helper],
-            element: this[_element]
+            element: this[_element],
+            config: this[_config],
+            drawFeekback: this[_draw].bind(this),
+            getDataFeekback: function () { return _this[_data]; },
+            selectElementByIndex: this.selectElementByIndex.bind(this),
+            emitChangeScreen: this[_emitChangeScreen].bind(this),
+            emitChangeData: this[_emitChangeData].bind(this),
+        });
+        this[_engine].init();
+        this[_renderer].on('drawFrame', function () {
+            _this[_coreEvent].trigger('drawFrame', undefined);
         });
-        initEvent(this);
+        this[_renderer].on('drawFrameComplete', function () {
+            _this[_coreEvent].trigger('drawFrameComplete', undefined);
+        });
+        this[_tempData].set('hasInited', true);
     }
     Core.prototype[(_a = _coreEvent, _b = _tempData, _draw)] = function (opts) {
-        var _c, _d;
-        var transfrom = this[_board].getTransform();
-        this[_helper].updateConfig(this[_data], {
+        this[_engine].updateHelperConfig({
             width: this[_opts].width,
             height: this[_opts].height,
-            canScroll: ((_d = (_c = this[_config]) === null || _c === void 0 ? void 0 : _c.scrollWrapper) === null || _d === void 0 ? void 0 : _d.use) === true,
-            selectedUUID: this[_tempData].get('selectedUUID'),
-            selectedUUIDList: this[_tempData].get('selectedUUIDList'),
             devicePixelRatio: this[_opts].devicePixelRatio,
-            scale: transfrom.scale,
-            scrollX: transfrom.scrollX,
-            scrollY: transfrom.scrollY,
         });
         this[_renderer].thaw();
         this[_renderer].render(this[_board].getContext(), this[_data], {
@@ -6721,7 +5961,6 @@ var Core = (function () {
     };
     Core.prototype.clearOperation = function () {
         this[_tempData].clear();
-        this[_tempData].set('onlyRender', this[_opts].onlyRender === true);
         this[_draw]();
     };
     Core.prototype.on = function (key, callback) {
@@ -6736,12 +5975,6 @@ var Core = (function () {
     Core.prototype.pointContextToScreen = function (p) {
         return this[_board].pointContextToScreen(p);
     };
-    Core.prototype.setOnlyRender = function () {
-        this[_tempData].set('onlyRender', true);
-    };
-    Core.prototype.cancelOnlyRender = function () {
-        this[_tempData].set('onlyRender', false);
-    };
     Core.prototype.__getBoardContext = function () {
         return this[_board].getContext();
     };
@@ -6761,9 +5994,6 @@ var Core = (function () {
             this[_coreEvent].trigger('changeData', deepClone(this[_data]));
         }
     };
-    Core.prototype[_todo] = function () {
-        console.log(this[_mapper]);
-    };
     var _a, _b;
     Core.is = is;
     Core.check = check;