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

package/dist/index.global.js

@@ -1,19 +1,6 @@
 var iDrawCore = (function () {
     'use strict';
 
-    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++) {
@@ -24,42 +11,6 @@ var iDrawCore = (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) {
@@ -136,9 +87,9 @@ var iDrawCore = (function () {
         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) {
@@ -170,7 +121,7 @@ var iDrawCore = (function () {
         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;
@@ -252,7 +203,7 @@ var iDrawCore = (function () {
     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);
@@ -283,7 +234,7 @@ var iDrawCore = (function () {
         });
     }
     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 () {
@@ -294,7 +245,7 @@ var iDrawCore = (function () {
             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) {
@@ -302,7 +253,7 @@ var iDrawCore = (function () {
                     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];
@@ -310,7 +261,7 @@ var iDrawCore = (function () {
             });
         });
     }
-    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) {
@@ -318,7 +269,7 @@ var iDrawCore = (function () {
                     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];
@@ -326,7 +277,7 @@ var iDrawCore = (function () {
             });
         });
     }
-    var Context$2$1 = (function () {
+    var Context$1$1 = (function () {
         function Context(ctx, opts) {
             this._opts = opts;
             this._ctx = ctx;
@@ -474,11 +425,11 @@ var iDrawCore = (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;
@@ -553,16 +504,16 @@ var iDrawCore = (function () {
         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;
@@ -743,9 +694,9 @@ var iDrawCore = (function () {
             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,
@@ -758,11 +709,11 @@ var iDrawCore = (function () {
         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() {
@@ -828,7 +779,7 @@ var iDrawCore = (function () {
             }
         };
     }
-    var TempData$1 = (function () {
+    var TempData$2 = (function () {
         function TempData() {
             this._temp = createTempData();
         }
@@ -846,7 +797,7 @@ var iDrawCore = (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;
@@ -880,19 +831,24 @@ var iDrawCore = (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();
@@ -1069,7 +1025,7 @@ var iDrawCore = (function () {
         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);
     }
@@ -1103,7 +1059,7 @@ var iDrawCore = (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),
@@ -1117,7 +1073,7 @@ var iDrawCore = (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),
@@ -1212,7 +1168,7 @@ var iDrawCore = (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);
@@ -1332,37 +1288,6 @@ var iDrawCore = (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');
@@ -1381,14 +1306,12 @@ var iDrawCore = (function () {
     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');
@@ -1487,9 +1410,6 @@ var iDrawCore = (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);
@@ -1545,7 +1465,7 @@ var iDrawCore = (function () {
             };
             return screenPoint;
         };
-        Board.prototype[(_a$3 = _hasRendered, _render)] = function () {
+        Board.prototype[(_a$2 = _hasRendered, _render)] = function () {
             if (this[_hasRendered] === true) {
                 return;
             }
@@ -1562,8 +1482,8 @@ var iDrawCore = (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) {
@@ -1711,9 +1631,9 @@ var iDrawCore = (function () {
         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) {
@@ -1745,7 +1665,7 @@ var iDrawCore = (function () {
         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;
@@ -1827,7 +1747,7 @@ var iDrawCore = (function () {
     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);
@@ -1858,7 +1778,7 @@ var iDrawCore = (function () {
         });
     }
     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 () {
@@ -1869,7 +1789,7 @@ var iDrawCore = (function () {
             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) {
@@ -1877,7 +1797,7 @@ var iDrawCore = (function () {
                     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];
@@ -1885,7 +1805,7 @@ var iDrawCore = (function () {
             });
         });
     }
-    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) {
@@ -1893,7 +1813,7 @@ var iDrawCore = (function () {
                     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];
@@ -2049,11 +1969,11 @@ var iDrawCore = (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;
@@ -2128,16 +2048,16 @@ var iDrawCore = (function () {
         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;
@@ -2318,9 +2238,9 @@ var iDrawCore = (function () {
             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,
@@ -2333,9 +2253,9 @@ var iDrawCore = (function () {
         uuid: {
             createUUID: createUUID$3
         },
-        istype: istype$3,
+        istype: istype$2,
         data: {
-            deepClone: deepClone$6,
+            deepClone: deepClone$5,
         },
         Context: Context$2,
     };
@@ -2457,14 +2377,14 @@ var iDrawCore = (function () {
     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) {
@@ -2580,7 +2500,7 @@ var iDrawCore = (function () {
     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);
@@ -2802,11 +2722,11 @@ var iDrawCore = (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;
@@ -2878,19 +2798,19 @@ var iDrawCore = (function () {
         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;
@@ -3081,7 +3001,7 @@ var iDrawCore = (function () {
         color: {
             toColorHexStr: toColorHexStr,
             toColorHexNum: toColorHexNum,
-            isColorStr: isColorStr$1$1,
+            isColorStr: isColorStr$1,
         },
         uuid: {
             createUUID: createUUID$1$1
@@ -3120,7 +3040,7 @@ var iDrawCore = (function () {
             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');
@@ -3131,14 +3051,14 @@ var iDrawCore = (function () {
         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;
@@ -3157,13 +3077,13 @@ var iDrawCore = (function () {
             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)) {
@@ -3171,7 +3091,7 @@ var iDrawCore = (function () {
             }
             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;
@@ -3184,7 +3104,7 @@ var iDrawCore = (function () {
                 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)) {
@@ -3208,10 +3128,10 @@ var iDrawCore = (function () {
             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) {
@@ -3219,7 +3139,7 @@ var iDrawCore = (function () {
             }
         });
     }
-    function drawSVG$1(ctx, elem, loader) {
+    function drawSVG(ctx, elem, loader) {
         var content = loader.getContent(elem.uuid);
         rotateElement$1(ctx, elem, function () {
             if (content) {
@@ -3227,7 +3147,7 @@ var iDrawCore = (function () {
             }
         });
     }
-    function drawHTML$1(ctx, elem, loader) {
+    function drawHTML(ctx, elem, loader) {
         var content = loader.getContent(elem.uuid);
         rotateElement$1(ctx, elem, function () {
             if (content) {
@@ -3236,9 +3156,9 @@ var iDrawCore = (function () {
         });
     }
     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,
@@ -3338,7 +3258,7 @@ var iDrawCore = (function () {
             }
         });
     }
-    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;
@@ -3365,13 +3285,13 @@ var iDrawCore = (function () {
         });
     }
     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;
@@ -3383,33 +3303,33 @@ var iDrawCore = (function () {
             }
             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();
         }
@@ -3460,36 +3380,36 @@ var iDrawCore = (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,
@@ -3503,7 +3423,7 @@ var iDrawCore = (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;
@@ -3548,7 +3468,7 @@ var iDrawCore = (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;
             }
@@ -3565,13 +3485,13 @@ var iDrawCore = (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;
                 }
@@ -3619,7 +3539,7 @@ var iDrawCore = (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', {
@@ -3651,7 +3571,7 @@ var iDrawCore = (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]) {
@@ -3684,19 +3604,19 @@ var iDrawCore = (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:
@@ -3709,7 +3629,7 @@ var iDrawCore = (function () {
         };
         return Loader;
     }());
-    var RendererEvent$1 = (function () {
+    var RendererEvent = (function () {
         function RendererEvent() {
             this._listeners = new Map();
         }
@@ -3768,27 +3688,27 @@ var iDrawCore = (function () {
     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) {
@@ -3805,8 +3725,8 @@ var iDrawCore = (function () {
         }
         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)) {
@@ -3833,10 +3753,10 @@ var iDrawCore = (function () {
                     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 || []);
@@ -3845,18 +3765,18 @@ var iDrawCore = (function () {
             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];
@@ -3871,26 +3791,26 @@ var iDrawCore = (function () {
                 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]();
@@ -3901,13 +3821,13 @@ var iDrawCore = (function () {
             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));
     }
@@ -3932,20 +3852,20 @@ var iDrawCore = (function () {
     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;
@@ -3989,7 +3909,7 @@ var iDrawCore = (function () {
         number: number,
         borderWidth: borderWidth,
         borderRadius: borderRadius,
-        color: color$1,
+        color: color,
         imageSrc: imageSrc,
         imageURL: imageURL,
         imageBase64: imageBase64,
@@ -4184,6 +4104,156 @@ var iDrawCore = (function () {
         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);
@@ -4203,601 +4273,9 @@ var iDrawCore = (function () {
         }
     }
 
-    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);
@@ -5192,7 +4670,7 @@ var iDrawCore = (function () {
     }
 
     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 };
@@ -5210,7 +4688,7 @@ var iDrawCore = (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];
@@ -5479,48 +4957,50 @@ var iDrawCore = (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
                     },
@@ -5543,299 +5023,8 @@ var iDrawCore = (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 () {
@@ -5843,7 +5032,7 @@ var iDrawCore = (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();
@@ -5859,7 +5048,7 @@ var iDrawCore = (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) {
@@ -5946,198 +5135,19 @@ var iDrawCore = (function () {
             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;
@@ -6146,7 +5156,7 @@ var iDrawCore = (function () {
             return this._temp[name];
         };
         TempData.prototype.clear = function () {
-            this._temp = createData();
+            this._temp = createData$1();
         };
         return TempData;
     }());
@@ -6157,30 +5167,42 @@ var iDrawCore = (function () {
     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)
@@ -6191,7 +5213,7 @@ var iDrawCore = (function () {
     }
     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]);
         }
@@ -6223,33 +5245,29 @@ var iDrawCore = (function () {
         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];
@@ -6259,7 +5277,7 @@ var iDrawCore = (function () {
         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];
@@ -6285,7 +5303,7 @@ var iDrawCore = (function () {
         }
     }
     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);
         }
@@ -6303,7 +5321,7 @@ var iDrawCore = (function () {
         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);
         }
@@ -6321,168 +5339,241 @@ var iDrawCore = (function () {
         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,
@@ -6490,91 +5581,237 @@ var iDrawCore = (function () {
                             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;
@@ -6583,10 +5820,9 @@ var iDrawCore = (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',
@@ -6595,7 +5831,7 @@ var iDrawCore = (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);
@@ -6611,27 +5847,31 @@ var iDrawCore = (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], {
@@ -6724,7 +5964,6 @@ var iDrawCore = (function () {
         };
         Core.prototype.clearOperation = function () {
             this[_tempData].clear();
-            this[_tempData].set('onlyRender', this[_opts].onlyRender === true);
             this[_draw]();
         };
         Core.prototype.on = function (key, callback) {
@@ -6739,12 +5978,6 @@ var iDrawCore = (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();
         };
@@ -6764,9 +5997,6 @@ var iDrawCore = (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;