@idraw/core 0.1.13 → 0.2.0-alpha.3

package/dist/index.global.js

@@ -125,7 +125,7 @@ var iDrawCore = (function () {
         }
         return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
     }
-    function deepClone$5(target) {
+    function deepClone$6(target) {
         function _clone(t) {
             var type = is$2(t);
             if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
@@ -273,7 +273,7 @@ var iDrawCore = (function () {
         },
         istype: istype$2,
         data: {
-            deepClone: deepClone$5,
+            deepClone: deepClone$6,
         }
     };
     var BoardEvent = (function () {
@@ -917,7 +917,7 @@ var iDrawCore = (function () {
     var _render = Symbol('_render');
     var _parsePrivateOptions = Symbol('_parsePrivateOptions');
     var _scroller = Symbol('_scroller');
-    var _initEvent$1 = Symbol('_initEvent');
+    var _initEvent = Symbol('_initEvent');
     var _doScrollX = Symbol('_doScrollX');
     var _doScrollY = Symbol('_doScrollY');
     var _doMoveScroll = Symbol('_doMoveScroll');
@@ -1046,7 +1046,7 @@ var iDrawCore = (function () {
                 return;
             }
             this[_resetContext]();
-            this[_initEvent$1]();
+            this[_initEvent]();
             this[_hasRendered] = true;
         };
         Board.prototype[_resetContext] = function () {
@@ -1066,7 +1066,7 @@ var iDrawCore = (function () {
             };
             return __assign(__assign({}, defaultOpts), opts);
         };
-        Board.prototype[_initEvent$1] = function () {
+        Board.prototype[_initEvent] = function () {
             var _this = this;
             if (this[_hasRendered] === true) {
                 return;
@@ -1207,7 +1207,7 @@ var iDrawCore = (function () {
         }
         return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
     }
-    function deepClone$4(target) {
+    function deepClone$5(target) {
         function _clone(t) {
             var type = is$1(t);
             if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
@@ -1355,10 +1355,212 @@ var iDrawCore = (function () {
         },
         istype: istype$1,
         data: {
-            deepClone: deepClone$4,
+            deepClone: deepClone$5,
         }
     };
 
+    var isColorStr$1 = index.color.isColorStr;
+    function number(value) {
+        return (typeof value === 'number' && (value > 0 || value <= 0));
+    }
+    function x(value) {
+        return number(value);
+    }
+    function y(value) {
+        return number(value);
+    }
+    function w(value) {
+        return (typeof value === 'number' && value >= 0);
+    }
+    function h(value) {
+        return (typeof value === 'number' && value >= 0);
+    }
+    function angle(value) {
+        return (typeof value === 'number' && value >= -360 && value <= 360);
+    }
+    function borderWidth(value) {
+        return w(value);
+    }
+    function borderRadius(value) {
+        return number(value) && value >= 0;
+    }
+    function color$1(value) {
+        return isColorStr$1(value);
+    }
+    function imageURL(value) {
+        return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+    }
+    function imageBase64(value) {
+        return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
+    }
+    function imageSrc(value) {
+        return (imageBase64(value) || imageURL(value));
+    }
+    function svg(value) {
+        return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+    }
+    function html(value) {
+        var result = false;
+        if (typeof value === 'string') {
+            var div = document.createElement('div');
+            div.innerHTML = value;
+            if (div.children.length > 0) {
+                result = true;
+            }
+            div = null;
+        }
+        return result;
+    }
+    function text(value) {
+        return typeof value === 'string';
+    }
+    function fontSize(value) {
+        return number(value) && value > 0;
+    }
+    function lineHeight(value) {
+        return number(value) && value > 0;
+    }
+    function textAlign(value) {
+        return ['center', 'left', 'right'].includes(value);
+    }
+    function fontFamily(value) {
+        return typeof value === 'string' && value.length > 0;
+    }
+    function fontWeight(value) {
+        return ['bold'].includes(value);
+    }
+    var is = {
+        x: x,
+        y: y,
+        w: w,
+        h: h,
+        angle: angle,
+        number: number,
+        borderWidth: borderWidth,
+        borderRadius: borderRadius,
+        color: color$1,
+        imageSrc: imageSrc,
+        imageURL: imageURL,
+        imageBase64: imageBase64,
+        svg: svg,
+        html: html,
+        text: text,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        textAlign: textAlign,
+        fontFamily: fontFamily,
+        fontWeight: fontWeight,
+    };
+
+    function attrs(attrs) {
+        var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
+        if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
+            return false;
+        }
+        if (!(angle >= -360 && angle <= 360)) {
+            return false;
+        }
+        return true;
+    }
+    function box(desc) {
+        if (desc === void 0) { desc = {}; }
+        var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
+        if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+            return false;
+        }
+        return true;
+    }
+    function rectDesc(desc) {
+        var bgColor = desc.bgColor;
+        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+            return false;
+        }
+        if (!box(desc)) {
+            return false;
+        }
+        return true;
+    }
+    function circleDesc(desc) {
+        var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
+        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+            return false;
+        }
+        return true;
+    }
+    function imageDesc(desc) {
+        var src = desc.src;
+        if (!is.imageSrc(src)) {
+            return false;
+        }
+        return true;
+    }
+    function svgDesc(desc) {
+        var svg = desc.svg;
+        if (!is.svg(svg)) {
+            return false;
+        }
+        return true;
+    }
+    function htmlDesc(desc) {
+        var html = desc.html;
+        if (!is.html(html)) {
+            return false;
+        }
+        return true;
+    }
+    function textDesc(desc) {
+        var text = desc.text, color = desc.color, fontSize = desc.fontSize, lineHeight = desc.lineHeight, fontFamily = desc.fontFamily, textAlign = desc.textAlign, fontWeight = desc.fontWeight, bgColor = desc.bgColor;
+        if (!is.text(text)) {
+            return false;
+        }
+        if (!is.color(color)) {
+            return false;
+        }
+        if (!is.fontSize(fontSize)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
+            return false;
+        }
+        if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
+            return false;
+        }
+        if (!box(desc)) {
+            return false;
+        }
+        return true;
+    }
+    var check = {
+        attrs: attrs,
+        textDesc: textDesc,
+        rectDesc: rectDesc,
+        circleDesc: circleDesc,
+        imageDesc: imageDesc,
+        svgDesc: svgDesc,
+        htmlDesc: htmlDesc,
+    };
+
     function parseRadianToAngle(radian) {
         return radian / Math.PI * 180;
     }
@@ -1443,7 +1645,7 @@ var iDrawCore = (function () {
         }
     }
 
-    var istype = index.istype, color$1 = index.color;
+    var istype = index.istype, color = index.color;
     function clearContext(ctx) {
         ctx.setFillStyle('#000000');
         ctx.setStrokeStyle('#000000');
@@ -1489,7 +1691,7 @@ var iDrawCore = (function () {
             }
             var bw = elem.desc.borderWidth;
             var borderColor = '#000000';
-            if (color$1.isColorStr(elem.desc.borderColor) === true) {
+            if (color.isColorStr(elem.desc.borderColor) === true) {
                 borderColor = elem.desc.borderColor;
             }
             var x = elem.x - bw / 2;
@@ -1515,7 +1717,7 @@ var iDrawCore = (function () {
     }
 
     function drawRect(ctx, elem) {
-        drawBox(ctx, elem, elem.desc.color);
+        drawBox(ctx, elem, elem.desc.bgColor);
     }
 
     function drawImage(ctx, elem, loader) {
@@ -1614,7 +1816,7 @@ var iDrawCore = (function () {
     function drawCircle(ctx, elem) {
         rotateElement(ctx, elem, function (ctx) {
             var x = elem.x, y = elem.y, w = elem.w, h = elem.h, desc = elem.desc;
-            var _a = desc.color, color = _a === void 0 ? '#000000' : _a, _b = desc.borderColor, borderColor = _b === void 0 ? '#000000' : _b, borderWidth = desc.borderWidth;
+            var _a = desc.bgColor, bgColor = _a === void 0 ? '#000000' : _a, _b = desc.borderColor, borderColor = _b === void 0 ? '#000000' : _b, borderWidth = desc.borderWidth;
             var a = w / 2;
             var b = h / 2;
             var centerX = x + a;
@@ -1634,7 +1836,7 @@ var iDrawCore = (function () {
                 ctx.stroke();
             }
             ctx.beginPath();
-            ctx.setFillStyle(color);
+            ctx.setFillStyle(bgColor);
             ctx.moveTo(centerX + a, centerY);
             for (var i = 0; i < 2 * Math.PI; i += unit) {
                 ctx.lineTo(centerX + a * Math.cos(i), centerY + b * Math.sin(i));
@@ -1777,13 +1979,13 @@ var iDrawCore = (function () {
         });
     }
 
-    var isColorStr$1 = index.color.isColorStr;
+    var isColorStr = index.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$1(data.bgColor)) {
+        if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) {
             drawBgColor(ctx, data.bgColor);
         }
         if (!(data.elements.length > 0)) {
@@ -1826,11 +2028,30 @@ var iDrawCore = (function () {
         drawElementListWrappers(ctx, helperConfig);
     }
 
-    var LoaderEvent = (function () {
-        function LoaderEvent() {
+    var defaultConfig = {
+        elementWrapper: {
+            color: '#2ab6f1',
+            lockColor: '#aaaaaa',
+            dotSize: 6,
+            lineWidth: 1,
+            lineDash: [4, 3],
+        }
+    };
+    function mergeConfig(config) {
+        var result = index.data.deepClone(defaultConfig);
+        if (config) {
+            if (config.elementWrapper) {
+                result.elementWrapper = __assign$1(__assign$1({}, result.elementWrapper), config.elementWrapper);
+            }
+        }
+        return result;
+    }
+
+    var CoreEvent = (function () {
+        function CoreEvent() {
             this._listeners = new Map();
         }
-        LoaderEvent.prototype.on = function (eventKey, callback) {
+        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);
@@ -1840,7 +2061,7 @@ var iDrawCore = (function () {
                 this._listeners.set(eventKey, [callback]);
             }
         };
-        LoaderEvent.prototype.off = function (eventKey, callback) {
+        CoreEvent.prototype.off = function (eventKey, callback) {
             if (this._listeners.has(eventKey)) {
                 var callbacks = this._listeners.get(eventKey);
                 if (Array.isArray(callbacks)) {
@@ -1854,7 +2075,7 @@ var iDrawCore = (function () {
                 this._listeners.set(eventKey, callbacks || []);
             }
         };
-        LoaderEvent.prototype.trigger = function (eventKey, arg) {
+        CoreEvent.prototype.trigger = function (eventKey, arg) {
             var callbacks = this._listeners.get(eventKey);
             if (Array.isArray(callbacks)) {
                 callbacks.forEach(function (cb) {
@@ -1866,7 +2087,7 @@ var iDrawCore = (function () {
                 return false;
             }
         };
-        LoaderEvent.prototype.has = function (name) {
+        CoreEvent.prototype.has = function (name) {
             if (this._listeners.has(name)) {
                 var list = this._listeners.get(name);
                 if (Array.isArray(list) && list.length > 0) {
@@ -1875,327 +2096,87 @@ var iDrawCore = (function () {
             }
             return false;
         };
-        return LoaderEvent;
+        return CoreEvent;
     }());
 
-    function filterScript(html) {
-        return html.replace(/<script[\s\S]*?<\/script>/ig, '');
-    }
-
-    var _a = index.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;
+    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;
             }
-            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;
+            case 'svg': {
+                isChange = isChangeSVGElementResource(before, after);
+                break;
             }
-            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;
-                    }
-                }
+            case 'html': {
+                isChange = isChangeHTMLElementResource(before, after);
+                break;
             }
-            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(this, void 0, void 0, function () {
-                var image, image, image;
-                return __generator(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 requestAnimationFrame = window.requestAnimationFrame;
-    var deepClone$3 = index.data.deepClone;
-    var DrawStatus;
-    (function (DrawStatus) {
-        DrawStatus["FREE"] = "free";
-        DrawStatus["DRAWING"] = "drawing";
-    })(DrawStatus || (DrawStatus = {}));
-    var Renderer = (function () {
-        function Renderer(board) {
-            var _this = this;
-            this._queue = [];
-            this._status = DrawStatus.FREE;
-            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) {
-            });
         }
-        Renderer.prototype.render = function (data, helper, changeResourceUUIDs) {
-            var _data = deepClone$3({ data: data, helper: helper });
-            this._queue.push(_data);
-            if (this._status !== DrawStatus.DRAWING) {
-                this._status = DrawStatus.DRAWING;
-                this._drawFrame();
+        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;
             }
-            this._loader.load(data, changeResourceUUIDs);
-        };
-        Renderer.prototype._drawFrame = function () {
-            var _this = this;
-            requestAnimationFrame(function () {
-                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();
+            if (beforeMap[uuid]) {
+                var isChange = false;
+                switch (beforeMap[uuid].type) {
+                    case 'image': {
+                        isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
+                        break;
                     }
-                }
-                else if (item) {
-                    drawContext(ctx, item.data, item.helper, _this._loader);
-                    _this._board.draw();
-                    _this._retainQueueOneItem();
-                    if (!isLastFrame) {
-                        _this._drawFrame();
+                    case 'svg': {
+                        isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
+                        break;
                     }
-                    else {
-                        _this._status = DrawStatus.FREE;
+                    case 'html': {
+                        isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
+                        break;
                     }
                 }
-                else {
-                    _this._status = DrawStatus.FREE;
+                if (isChange === true) {
+                    uuids.push(uuid);
                 }
-            });
-        };
-        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;
-    }());
+            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);
@@ -2370,7 +2351,7 @@ var iDrawCore = (function () {
         return Element;
     }());
 
-    var deepClone$2 = index.data.deepClone;
+    var deepClone$4 = index.data.deepClone;
     var Helper = (function () {
         function Helper(board, config) {
             this._areaStart = { x: 0, y: 0 };
@@ -2388,7 +2369,7 @@ var iDrawCore = (function () {
             this._updateSelectedElementListWrapper(data, opts);
         };
         Helper.prototype.getConfig = function () {
-            return deepClone$2(this._helperConfig);
+            return deepClone$4(this._helperConfig);
         };
         Helper.prototype.getElementIndexByUUID = function (uuid) {
             var index = this._helperConfig.elementIndexMap[uuid];
@@ -2397,25 +2378,71 @@ var iDrawCore = (function () {
             }
             return null;
         };
-        Helper.prototype.isPointInElementWrapperDot = function (p) {
+        Helper.prototype.isPointInElementWrapperDot = function (p, data) {
             var _a, _b;
             var ctx = this._ctx;
-            var uuid = (_b = (_a = this._helperConfig) === null || _a === void 0 ? void 0 : _a.selectedElementWrapper) === null || _b === void 0 ? void 0 : _b.uuid;
+            var uuid = ((_b = (_a = this._helperConfig) === null || _a === void 0 ? void 0 : _a.selectedElementWrapper) === null || _b === void 0 ? void 0 : _b.uuid) || null;
+            var directIdx = null;
             var direction = null;
             if (!this._helperConfig.selectedElementWrapper) {
-                return [null, null];
+                return [uuid, direction, directIdx];
             }
             var wrapper = this._helperConfig.selectedElementWrapper;
             var dots = [
-                wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right,
-                wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left,
-                wrapper.dots.rotate,
+                wrapper.dots.right,
+                wrapper.dots.topRight,
+                wrapper.dots.top,
+                wrapper.dots.topLeft,
+                wrapper.dots.left,
+                wrapper.dots.bottomLeft,
+                wrapper.dots.bottom,
+                wrapper.dots.bottomRight,
             ];
             var directionNames = [
-                'top-left', 'top', 'top-right', 'right',
-                'bottom-right', 'bottom', 'bottom-left', 'left',
-                'rotate',
+                'right',
+                'top-right',
+                'top',
+                'top-left',
+                'left',
+                'bottom-left',
+                'bottom',
+                'bottom-right',
             ];
+            var angleMoveNum = 0;
+            if (data && uuid) {
+                var elemIdx = this.getElementIndexByUUID(uuid);
+                if (elemIdx !== null && elemIdx >= 0) {
+                    var elem = data.elements[elemIdx];
+                    var angle = elem.angle;
+                    if (angle < 0) {
+                        angle += 360;
+                    }
+                    if (angle < 45) {
+                        angleMoveNum = 0;
+                    }
+                    else if (angle < 90) {
+                        angleMoveNum = 1;
+                    }
+                    else if (angle < 135) {
+                        angleMoveNum = 2;
+                    }
+                    else if (angle < 180) {
+                        angleMoveNum = 3;
+                    }
+                    else if (angle < 225) {
+                        angleMoveNum = 4;
+                    }
+                    else if (angle < 270) {
+                        angleMoveNum = 5;
+                    }
+                    else if (angle < 315) {
+                        angleMoveNum = 6;
+                    }
+                }
+            }
+            if (angleMoveNum > 0) {
+                directionNames = directionNames.slice(-angleMoveNum).concat(directionNames.slice(0, -angleMoveNum));
+            }
             rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
                 for (var i = 0; i < dots.length; i++) {
                     var dot = dots[i];
@@ -2426,11 +2453,23 @@ var iDrawCore = (function () {
                         direction = directionNames[i];
                     }
                     if (direction) {
+                        directIdx = i;
                         break;
                     }
                 }
             });
-            return [uuid, direction];
+            if (direction === null) {
+                rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
+                    var dot = wrapper.dots.rotate;
+                    ctx.beginPath();
+                    ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2);
+                    ctx.closePath();
+                    if (ctx.isPointInPath(p.x, p.y)) {
+                        direction = 'rotate';
+                    }
+                });
+            }
+            return [uuid, direction, directIdx];
         };
         Helper.prototype.isPointInElementList = function (p, data) {
             var _a, _b;
@@ -2574,70 +2613,361 @@ var iDrawCore = (function () {
                     wrapperList.push(wrapper);
                 }
             });
-            this._helperConfig.selectedElementListWrappers = wrapperList;
-        };
-        Helper.prototype._createSelectedElementWrapper = function (elem, opts) {
-            var _a, _b, _c;
-            var scale = opts.scale;
-            var elemWrapper = this._coreConfig.elementWrapper;
-            var dotSize = elemWrapper.dotSize / scale;
-            var lineWidth = elemWrapper.lineWidth / scale;
-            var lineDash = elemWrapper.lineDash.map(function (n) { return (n / scale); });
-            var rotateLimit = 12;
-            var bw = ((_a = elem.desc) === null || _a === void 0 ? void 0 : _a.borderWidth) || 0;
-            var wrapper = {
-                uuid: elem.uuid,
-                dotSize: dotSize,
-                lock: ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.lock) === true,
-                dots: {
-                    topLeft: {
-                        x: elem.x - dotSize - bw,
-                        y: elem.y - dotSize - bw,
-                    },
-                    top: {
-                        x: elem.x + elem.w / 2,
-                        y: elem.y - dotSize - bw,
-                    },
-                    topRight: {
-                        x: elem.x + elem.w + dotSize + bw,
-                        y: elem.y - dotSize - bw,
-                    },
-                    right: {
-                        x: elem.x + elem.w + dotSize + bw,
-                        y: elem.y + elem.h / 2,
-                    },
-                    bottomRight: {
-                        x: elem.x + elem.w + dotSize + bw,
-                        y: elem.y + elem.h + dotSize + bw,
-                    },
-                    bottom: {
-                        x: elem.x + elem.w / 2,
-                        y: elem.y + elem.h + dotSize + bw,
-                    },
-                    bottomLeft: {
-                        x: elem.x - dotSize - bw,
-                        y: elem.y + elem.h + dotSize + bw,
-                    },
-                    left: {
-                        x: elem.x - dotSize - bw,
-                        y: elem.y + elem.h / 2,
-                    },
-                    rotate: {
-                        x: elem.x + elem.w / 2,
-                        y: elem.y - dotSize - (dotSize * 2 + rotateLimit) - bw,
+            this._helperConfig.selectedElementListWrappers = wrapperList;
+        };
+        Helper.prototype._createSelectedElementWrapper = function (elem, opts) {
+            var _a, _b, _c;
+            var scale = opts.scale;
+            var elemWrapper = this._coreConfig.elementWrapper;
+            var dotSize = elemWrapper.dotSize / scale;
+            var lineWidth = elemWrapper.lineWidth / scale;
+            var lineDash = elemWrapper.lineDash.map(function (n) { return (n / scale); });
+            var rotateLimit = 12;
+            var bw = ((_a = elem.desc) === null || _a === void 0 ? void 0 : _a.borderWidth) || 0;
+            var wrapper = {
+                uuid: elem.uuid,
+                dotSize: dotSize,
+                lock: ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.lock) === true,
+                dots: {
+                    topLeft: {
+                        x: elem.x - dotSize - bw,
+                        y: elem.y - dotSize - bw,
+                    },
+                    top: {
+                        x: elem.x + elem.w / 2,
+                        y: elem.y - dotSize - bw,
+                    },
+                    topRight: {
+                        x: elem.x + elem.w + dotSize + bw,
+                        y: elem.y - dotSize - bw,
+                    },
+                    right: {
+                        x: elem.x + elem.w + dotSize + bw,
+                        y: elem.y + elem.h / 2,
+                    },
+                    bottomRight: {
+                        x: elem.x + elem.w + dotSize + bw,
+                        y: elem.y + elem.h + dotSize + bw,
+                    },
+                    bottom: {
+                        x: elem.x + elem.w / 2,
+                        y: elem.y + elem.h + dotSize + bw,
+                    },
+                    bottomLeft: {
+                        x: elem.x - dotSize - bw,
+                        y: elem.y + elem.h + dotSize + bw,
+                    },
+                    left: {
+                        x: elem.x - dotSize - bw,
+                        y: elem.y + elem.h / 2,
+                    },
+                    rotate: {
+                        x: elem.x + elem.w / 2,
+                        y: elem.y - dotSize - (dotSize * 2 + rotateLimit) - bw,
+                    }
+                },
+                lineWidth: lineWidth,
+                lineDash: lineDash,
+                color: ((_c = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _c === void 0 ? void 0 : _c.lock) === true ? elemWrapper.lockColor : elemWrapper.color,
+            };
+            if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) {
+                wrapper.radian = parseAngleToRadian(elem.angle);
+                wrapper.translate = calcElementCenter(elem);
+            }
+            return wrapper;
+        };
+        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.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";
                     }
-                },
-                lineWidth: lineWidth,
-                lineDash: lineDash,
-                color: ((_c = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _c === void 0 ? void 0 : _c.lock) === true ? elemWrapper.lockColor : elemWrapper.color,
+                    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;
             };
-            if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) {
-                wrapper.radian = parseAngleToRadian(elem.angle);
-                wrapper.translate = calcElementCenter(elem);
-            }
-            return wrapper;
+            _loadAction();
         };
-        return Helper;
+        Loader.prototype._loadElementSource = function (params) {
+            return __awaiter(this, void 0, void 0, function () {
+                var image, image, image;
+                return __generator(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');
@@ -2665,9 +2995,13 @@ var iDrawCore = (function () {
             if (!this.isEffectivePoint(p)) {
                 return { cursor: cursor, elementUUID: elementUUID };
             }
-            var _a = this[_helper$1].isPointInElementWrapperDot(p), uuid = _a[0], direction = _a[1];
+            var _a = this[_helper$1].isPointInElementWrapperDot(p, data), uuid = _a[0], direction = _a[1];
             if (uuid && direction) {
                 switch (direction) {
+                    case 'top-right': {
+                        cursor = 'ne-resize';
+                        break;
+                    }
                     case 'top-left': {
                         cursor = 'nw-resize';
                         break;
@@ -2676,10 +3010,6 @@ var iDrawCore = (function () {
                         cursor = 'n-resize';
                         break;
                     }
-                    case 'top-right': {
-                        cursor = 'ne-resize';
-                        break;
-                    }
                     case 'right': {
                         cursor = 'e-resize';
                         break;
@@ -2700,101 +3030,30 @@ var iDrawCore = (function () {
                         cursor = 'w-resize';
                         break;
                     }
-                    case 'rotate': {
-                        cursor = 'grab';
-                        break;
-                    }
-                }
-                if (uuid) {
-                    elementUUID = uuid;
-                }
-            }
-            else {
-                var _b = this[_element$1].isPointInElement(p, data), index = _b[0], uuid_1 = _b[1];
-                if (index >= 0) {
-                    cursor = 'move';
-                }
-                if (uuid_1) {
-                    elementUUID = uuid_1;
-                }
-            }
-            return {
-                cursor: cursor,
-                elementUUID: elementUUID,
-            };
-        };
-        return Mapper;
-    }());
-
-    var defaultConfig = {
-        elementWrapper: {
-            color: '#2ab6f1',
-            lockColor: '#aaaaaa',
-            dotSize: 6,
-            lineWidth: 1,
-            lineDash: [4, 3],
-        }
-    };
-    function mergeConfig(config) {
-        var result = index.data.deepClone(defaultConfig);
-        if (config) {
-            if (config.elementWrapper) {
-                result.elementWrapper = __assign$1(__assign$1({}, 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;
-                        }
-                    }
+                    case 'rotate': {
+                        cursor = 'grab';
+                        break;
+                    }
+                }
+                if (uuid) {
+                    elementUUID = uuid;
                 }
-                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;
+                var _b = this[_element$1].isPointInElement(p, data), index = _b[0], uuid_1 = _b[1];
+                if (index >= 0) {
+                    cursor = 'move';
+                }
+                if (uuid_1) {
+                    elementUUID = uuid_1;
                 }
             }
-            return false;
+            return {
+                cursor: cursor,
+                elementUUID: elementUUID,
+            };
         };
-        return CoreEvent;
+        return Mapper;
     }());
 
     var elementTypes = {
@@ -2837,215 +3096,116 @@ var iDrawCore = (function () {
         return (num >= 0 || num < 0);
     }
 
-    var isColorStr = index.color.isColorStr;
-    function number(value) {
-        return (typeof value === 'number' && (value > 0 || value <= 0));
-    }
-    function x(value) {
-        return number(value);
-    }
-    function y(value) {
-        return number(value);
-    }
-    function w(value) {
-        return (typeof value === 'number' && value >= 0);
-    }
-    function h(value) {
-        return (typeof value === 'number' && value >= 0);
-    }
-    function angle(value) {
-        return (typeof value === 'number' && value >= -360 && value <= 360);
-    }
-    function borderWidth(value) {
-        return w(value);
-    }
-    function borderRadius(value) {
-        return number(value) && value >= 0;
-    }
-    function color(value) {
-        return isColorStr(value);
-    }
-    function imageURL(value) {
-        return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
-    }
-    function imageBase64(value) {
-        return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
-    }
-    function imageSrc(value) {
-        return (imageBase64(value) || imageURL(value));
-    }
-    function svg(value) {
-        return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
-    }
-    function html(value) {
-        var result = false;
-        if (typeof value === 'string') {
-            var div = document.createElement('div');
-            div.innerHTML = value;
-            if (div.children.length > 0) {
-                result = true;
-            }
-            div = null;
-        }
-        return result;
-    }
-    function text(value) {
-        return typeof value === 'string';
-    }
-    function fontSize(value) {
-        return number(value) && value > 0;
-    }
-    function lineHeight(value) {
-        return number(value) && value > 0;
-    }
-    function textAlign(value) {
-        return ['center', 'left', 'right'].includes(value);
-    }
-    function fontFamily(value) {
-        return typeof value === 'string' && value.length > 0;
-    }
-    function fontWeight(value) {
-        return ['bold'].includes(value);
-    }
-    var is = {
-        x: x,
-        y: y,
-        w: w,
-        h: h,
-        angle: angle,
-        number: number,
-        borderWidth: borderWidth,
-        borderRadius: borderRadius,
-        color: color,
-        imageSrc: imageSrc,
-        imageURL: imageURL,
-        imageBase64: imageBase64,
-        svg: svg,
-        html: html,
-        text: text,
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-        textAlign: textAlign,
-        fontFamily: fontFamily,
-        fontWeight: fontWeight,
-    };
-
-    function attrs(attrs) {
-        var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
-        if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
-            return false;
-        }
-        if (!(angle >= -360 && angle <= 360)) {
-            return false;
-        }
-        return true;
-    }
-    function box(desc) {
-        if (desc === void 0) { desc = {}; }
-        var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
-        if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
-            return false;
-        }
-        return true;
-    }
-    function rectDesc(desc) {
-        var color = desc.color;
-        if (desc.hasOwnProperty('color') && !is.color(color)) {
-            return false;
-        }
-        if (!box(desc)) {
-            return false;
-        }
-        return true;
-    }
-    function circleDesc(desc) {
-        var color = desc.color, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
-        if (desc.hasOwnProperty('color') && !is.color(color)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
-            return false;
-        }
-        return true;
-    }
-    function imageDesc(desc) {
-        var src = desc.src;
-        if (!is.imageSrc(src)) {
-            return false;
-        }
-        return true;
-    }
-    function svgDesc(desc) {
-        var svg = desc.svg;
-        if (!is.svg(svg)) {
-            return false;
-        }
-        return true;
-    }
-    function htmlDesc(desc) {
-        var html = desc.html;
-        if (!is.html(html)) {
-            return false;
-        }
-        return true;
-    }
-    function textDesc(desc) {
-        var text = desc.text, color = desc.color, fontSize = desc.fontSize, lineHeight = desc.lineHeight, fontFamily = desc.fontFamily, textAlign = desc.textAlign, fontWeight = desc.fontWeight, bgColor = desc.bgColor;
-        if (!is.text(text)) {
-            return false;
-        }
-        if (!is.color(color)) {
-            return false;
-        }
-        if (!is.fontSize(fontSize)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
-            return false;
-        }
-        if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
-            return false;
-        }
-        if (!box(desc)) {
-            return false;
+    var requestAnimationFrame = window.requestAnimationFrame;
+    var deepClone$3 = index.data.deepClone;
+    var DrawStatus;
+    (function (DrawStatus) {
+        DrawStatus["FREE"] = "free";
+        DrawStatus["DRAWING"] = "drawing";
+    })(DrawStatus || (DrawStatus = {}));
+    var Renderer = (function () {
+        function Renderer(board) {
+            var _this = this;
+            this._queue = [];
+            this._status = DrawStatus.FREE;
+            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 true;
-    }
-    var check = {
-        attrs: attrs,
-        textDesc: textDesc,
-        rectDesc: rectDesc,
-        circleDesc: circleDesc,
-        imageDesc: imageDesc,
-        svgDesc: svgDesc,
-        htmlDesc: htmlDesc,
-    };
+        Renderer.prototype.render = function (data, helper, changeResourceUUIDs) {
+            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;
+            requestAnimationFrame(function () {
+                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;
+                }
+            });
+        };
+        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;
+    }());
+
+    var Mode;
+    (function (Mode) {
+        Mode["NULL"] = "null";
+        Mode["SELECT_ELEMENT"] = "select-element";
+        Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
+        Mode["SELECT_ELEMENT_WRAPPER_DOT"] = "select-element-wrapper-dot";
+        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,
+            selectedDotDirection: null,
+            prevPoint: null,
+        };
+    }
     var TempData = (function () {
         function TempData() {
-            this._temp = {
-                selectedUUID: null,
-                selectedUUIDList: [],
-                hoverUUID: null,
-            };
+            this._temp = createData();
         }
         TempData.prototype.set = function (name, value) {
             this._temp[name] = value;
@@ -3054,11 +3214,7 @@ var iDrawCore = (function () {
             return this._temp[name];
         };
         TempData.prototype.clear = function () {
-            this._temp = {
-                selectedUUID: null,
-                hoverUUID: null,
-                selectedUUIDList: [],
-            };
+            this._temp = createData();
         };
         return TempData;
     }());
@@ -3070,185 +3226,431 @@ var iDrawCore = (function () {
     var _renderer = Symbol('_renderer');
     var _element = Symbol('_element');
     var _helper = Symbol('_helper');
-    var _hasInited = Symbol('_hasInited');
-    var _mode = Symbol('_mode');
     var _tempData = Symbol('_tempData');
-    var _prevPoint = Symbol('_prevPoint');
     var _draw = Symbol('_draw');
-    var _selectedDotDirection = Symbol('_selectedDotDirection');
     var _coreEvent = Symbol('_coreEvent');
     var _mapper = Symbol('_mapper');
-    var _initEvent = Symbol('_initEvent');
-    var _handleClick = Symbol('_handleClick');
-    var _handleDoubleClick = Symbol('_handleDoubleClick');
-    var _handlePoint = Symbol('_handlePoint');
-    var _handleMoveStart = Symbol('_handleMoveStart');
-    var _handleMove = Symbol('_handleMove');
-    var _handleMoveEnd = Symbol('_handleMoveEnd');
-    var _handleHover = Symbol('_handleHover');
-    var _handleLeave = Symbol('_handleLeave');
-    var _dragElements = Symbol('_dragElements');
-    var _transfromElement = Symbol('_transfromElement');
     var _emitChangeScreen = Symbol('_emitChangeScreen');
     var _emitChangeData = Symbol('_emitChangeData');
-    var _onlyRender = Symbol('_onlyRender');
-    var _cursorStatus = Symbol('_cursorStatus');
-
-    var Mode;
-    (function (Mode) {
-        Mode["NULL"] = "null";
-        Mode["SELECT_ELEMENT"] = "select-element";
-        Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
-        Mode["SELECT_ELEMENT_WRAPPER_DOT"] = "select-element-wrapper-dot";
-        Mode["SELECT_AREA"] = "select-area";
-    })(Mode || (Mode = {}));
-    var CursorStatus;
-    (function (CursorStatus) {
-        CursorStatus["DRAGGING"] = "dragging";
-        CursorStatus["NULL"] = "null";
-    })(CursorStatus || (CursorStatus = {}));
+    var _todo = Symbol('_todo');
 
-    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));
+    var deepClone$2 = index.data.deepClone;
+    var createUUID = index.uuid.createUUID;
+    function getSelectedElements(core) {
+        var elems = [];
+        var list = [];
+        var uuid = core[_tempData].get('selectedUUID');
+        if (typeof uuid === 'string' && uuid) {
+            list.push(uuid);
+        }
+        else {
+            list = core[_tempData].get('selectedUUIDList');
+        }
+        list.forEach(function (uuid) {
+            var _a;
+            var index = core[_helper].getElementIndexByUUID(uuid);
+            if (index !== null && index >= 0) {
+                var elem = (_a = core[_data]) === null || _a === void 0 ? void 0 : _a.elements[index];
+                if (elem)
+                    elems.push(elem);
+            }
+        });
+        return deepClone$2(elems);
     }
-    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 getElement(core, uuid) {
+        var elem = null;
+        var index = core[_helper].getElementIndexByUUID(uuid);
+        if (index !== null && core[_data].elements[index]) {
+            elem = deepClone$2(core[_data].elements[index]);
+        }
+        return elem;
     }
-    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 getElementByIndex(core, index) {
+        var elem = null;
+        if (index >= 0 && core[_data].elements[index]) {
+            elem = deepClone$2(core[_data].elements[index]);
+        }
+        return elem;
     }
-    function diffElementResourceChange(before, after) {
-        var result = null;
-        var isChange = false;
-        switch (after.type) {
-            case 'image': {
-                isChange = isChangeImageElementResource(before, after);
+    function updateElement(core, elem) {
+        var _a;
+        var _elem = deepClone$2(elem);
+        var data = core[_data];
+        var resourceChangeUUIDs = [];
+        for (var i = 0; i < data.elements.length; i++) {
+            if (_elem.uuid === ((_a = data.elements[i]) === null || _a === void 0 ? void 0 : _a.uuid)) {
+                var result = diffElementResourceChange(data.elements[i], _elem);
+                if (typeof result === 'string') {
+                    resourceChangeUUIDs.push(result);
+                }
+                data.elements[i] = _elem;
                 break;
             }
-            case 'svg': {
-                isChange = isChangeSVGElementResource(before, after);
-                break;
+        }
+        core[_emitChangeData]();
+        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);
             }
-            case 'html': {
-                isChange = isChangeHTMLElementResource(before, after);
-                break;
+            else {
+                core[_tempData].set('mode', Mode.NULL);
             }
+            if (typeof uuid === 'string') {
+                core[_tempData].set('selectedUUID', uuid);
+                core[_tempData].set('selectedUUIDList', []);
+            }
+            core[_draw]();
         }
-        if (isChange === true) {
-            result = after.uuid;
+    }
+    function selectElement(core, uuid, opts) {
+        if (core[_tempData].get('onlyRender') === true)
+            return;
+        var index = core[_helper].getElementIndexByUUID(uuid);
+        if (typeof index === 'number' && index >= 0) {
+            core.selectElementByIndex(index, opts);
         }
-        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;
+    function moveUpElement(core, uuid) {
+        var index = core[_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];
+            core[_data].elements[index + 1] = temp;
+        }
+        core[_emitChangeData]();
+        core[_draw]();
+    }
+    function moveDownElement(core, uuid) {
+        var index = core[_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];
+            core[_data].elements[index - 1] = temp;
+        }
+        core[_emitChangeData]();
+        core[_draw]();
+    }
+    function addElement(core, elem) {
+        var _elem = deepClone$2(elem);
+        _elem.uuid = createUUID();
+        core[_data].elements.push(_elem);
+        core[_emitChangeData]();
+        core[_draw]();
+        return _elem.uuid;
+    }
+    function deleteElement(core, uuid) {
+        var index = core[_element].getElementIndex(core[_data], uuid);
+        if (index >= 0) {
+            core[_data].elements.splice(index, 1);
+            core[_emitChangeData]();
+            core[_draw]();
+        }
+    }
+    function insertElementBefore(core, elem, beforeUUID) {
+        var index = core[_helper].getElementIndexByUUID(beforeUUID);
+        if (index !== null) {
+            return core.insertElementBeforeIndex(elem, index);
+        }
+        return null;
+    }
+    function insertElementBeforeIndex(core, elem, index) {
+        var _elem = deepClone$2(elem);
+        _elem.uuid = createUUID();
+        if (index >= 0) {
+            core[_data].elements.splice(index, 0, _elem);
+            core[_emitChangeData]();
+            core[_draw]();
+            return _elem.uuid;
+        }
+        return null;
+    }
+    function insertElementAfter(core, elem, beforeUUID) {
+        var index = core[_helper].getElementIndexByUUID(beforeUUID);
+        if (index !== null) {
+            return core.insertElementAfterIndex(elem, index);
+        }
+        return null;
+    }
+    function insertElementAfterIndex(core, elem, index) {
+        var _elem = deepClone$2(elem);
+        _elem.uuid = createUUID();
+        if (index >= 0) {
+            core[_data].elements.splice(index + 1, 0, _elem);
+            core[_emitChangeData]();
+            core[_draw]();
+            return _elem.uuid;
+        }
+        return null;
+    }
+
+    var time = index.time;
+    var deepClone$1 = index.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;
+        }
+        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[_tempData].set('hasInited', true);
+    }
+    function handleDoubleClick(core) {
+        return function (point) {
+            var _a, _b, _c;
+            var _d = core[_element].isPointInElement(point, core[_data]), index = _d[0], uuid = _d[1];
+            if (index >= 0 && uuid) {
+                var elem = deepClone$1((_a = core[_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]) });
+                }
             }
-            if (beforeMap[uuid]) {
-                var isChange = false;
-                switch (beforeMap[uuid].type) {
-                    case 'image': {
-                        isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
-                        break;
+            core[_draw]();
+        };
+    }
+    function handlePoint(core) {
+        return function (point) {
+            var _a, _b, _c;
+            if (!core[_mapper].isEffectivePoint(point)) {
+                return;
+            }
+            if (core[_helper].isPointInElementList(point, core[_data])) {
+                core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST);
+            }
+            else {
+                var _d = core[_helper].isPointInElementWrapperDot(point, core[_data]), uuid = _d[0], direction = _d[1];
+                if (uuid && direction) {
+                    core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_DOT);
+                    core[_tempData].set('selectedDotDirection', direction);
+                    core[_tempData].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]();
+                        }
+                        core[_tempData].set('mode', Mode.SELECT_ELEMENT);
                     }
-                    case 'svg': {
-                        isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
-                        break;
+                    else {
+                        core[_tempData].set('selectedUUIDList', []);
+                        core[_tempData].set('mode', Mode.SELECT_AREA);
+                    }
+                }
+            }
+            core[_draw]();
+        };
+    }
+    function handleClick(core) {
+        return function (point) {
+            var _a;
+            var _b = core[_element].isPointInElement(point, core[_data]), index = _b[0], uuid = _b[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]) });
+            }
+            core[_draw]();
+        };
+    }
+    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),
+                        uuid: uuid,
+                        x: point.x,
+                        y: point.y
+                    });
+                }
+            }
+            else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
+                core[_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);
+            }
+            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 (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_DOT && core[_tempData].get('selectedDotDirection')) {
+                    transfromElement(core, core[_tempData].get('selectedUUID'), point, core[_tempData].get('prevPoint'), core[_tempData].get('selectedDotDirection'));
+                    core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
+                }
+            }
+            else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
+                core[_helper].changeSelectArea(point);
+                core[_draw]();
+            }
+            core[_tempData].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)
+                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');
+            if (typeof uuid === 'string') {
+                var index = core[_element].getElementIndex(core[_data], uuid);
+                var elem = core[_data].elements[index];
+                if (elem) {
+                    if (core[_coreEvent].has('screenMoveElementEnd')) {
+                        core[_coreEvent].trigger('screenMoveElementEnd', {
+                            index: index,
+                            uuid: uuid,
+                            x: point.x,
+                            y: point.y
+                        });
                     }
-                    case 'html': {
-                        isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
-                        break;
+                    if (core[_coreEvent].has('screenChangeElement')) {
+                        core[_coreEvent].trigger('screenChangeElement', {
+                            index: index,
+                            uuid: uuid,
+                            width: elem.w,
+                            height: elem.h,
+                            angle: elem.angle || 0
+                        });
                     }
+                    core[_emitChangeData]();
                 }
-                if (isChange === true) {
-                    uuids.push(uuid);
+            }
+            else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
+                var uuids = core[_helper].calcSelectedElements(core[_data]);
+                if (uuids.length > 0) {
+                    core[_tempData].set('selectedUUIDList', uuids);
+                    core[_tempData].set('selectedUUID', null);
                 }
+                else {
+                    core[_tempData].set('mode', Mode.NULL);
+                }
+                core[_helper].clearSelectedArea();
+                core[_draw]();
             }
-            else {
-                uuids.push(uuid);
+            if (core[_tempData].get('mode') !== Mode.SELECT_ELEMENT) {
+                core[_tempData].set('selectedUUID', null);
             }
-        }
-        return uuids;
+            core[_tempData].set('cursorStatus', CursorStatus.NULL);
+            core[_tempData].set('mode', Mode.NULL);
+        };
     }
-    function parseDataElementMap(data) {
-        var elemMap = {};
-        data.elements.forEach(function (elem) {
-            elemMap[elem.uuid] = elem;
-        });
-        return elemMap;
-    }
-
-    var deepClone$1 = index.data.deepClone;
-    function getSelectedElements(core) {
-        var elems = [];
-        var list = [];
-        var uuid = core[_tempData].get('selectedUUID');
-        if (typeof uuid === 'string' && uuid) {
-            list.push(uuid);
-        }
-        else {
-            list = core[_tempData].get('selectedUUIDList');
-        }
-        list.forEach(function (uuid) {
-            var _a;
-            var index = core[_helper].getElementIndexByUUID(uuid);
-            if (index !== null && index >= 0) {
-                var elem = (_a = core[_data]) === null || _a === void 0 ? void 0 : _a.elements[index];
-                if (elem)
-                    elems.push(elem);
+    function handleHover(core) {
+        return 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();
+            }
+            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);
+                if (elementUUID) {
+                    var index = core[_helper].getElementIndexByUUID(elementUUID);
+                    if (index !== null && index >= 0) {
+                        var elem = core[_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();
+                            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'),
+                                    index: preIndex,
+                                    element: core[_data].elements[preIndex]
+                                });
+                            }
+                        }
+                        if (elem) {
+                            core[_coreEvent].trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
+                            core[_tempData].set('hoverUUID', elem.uuid);
+                            isMouseOverElement = true;
+                        }
+                    }
+                }
             }
-        });
-        return elems;
+            if (isMouseOverElement !== true && core[_tempData].get('hoverUUID') !== null) {
+                var uuid = core[_tempData].get('hoverUUID');
+                var index = core[_helper].getElementIndexByUUID(uuid || '');
+                if (index !== null)
+                    core[_coreEvent].trigger('mouseLeaveElement', { uuid: uuid, index: index, element: core[_data].elements[index] });
+                core[_tempData].set('hoverUUID', null);
+            }
+            if (core[_coreEvent].has('mouseOverScreen'))
+                core[_coreEvent].trigger('mouseOverScreen', point);
+        };
     }
-    function updateElement(core, elem) {
-        var _a;
-        var _elem = deepClone$1(elem);
-        var data = core[_data];
-        var resourceChangeUUIDs = [];
-        for (var i = 0; i < data.elements.length; i++) {
-            if (_elem.uuid === ((_a = data.elements[i]) === null || _a === void 0 ? void 0 : _a.uuid)) {
-                var result = diffElementResourceChange(data.elements[i], _elem);
-                if (typeof result === 'string') {
-                    resourceChangeUUIDs.push(result);
-                }
-                data.elements[i] = _elem;
-                break;
+    function handleLeave(core) {
+        return function () {
+            if (core[_coreEvent].has('mouseLeaveScreen')) {
+                core[_coreEvent].trigger('mouseLeaveScreen', undefined);
             }
+        };
+    }
+    function transfromElement(core, uuid, point, prevPoint, direction) {
+        if (!prevPoint) {
+            return null;
         }
-        core[_emitChangeData]();
-        core[_draw]({ resourceChangeUUIDs: resourceChangeUUIDs });
+        var result = core[_element].transformElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale, direction);
+        core[_draw]();
+        return result;
     }
 
-    var time = index.time;
     var deepClone = index.data.deepClone;
-    var createUUID = index.uuid.createUUID;
     var Core = (function () {
         function Core(mount, opts, config) {
-            var _h, _j, _k;
-            this[_a] = false;
-            this[_b] = Mode.NULL;
-            this[_c] = new CoreEvent();
-            this[_d] = null;
-            this[_e] = null;
-            this[_f] = false;
-            this[_g] = CursorStatus.NULL;
+            var _c, _d, _e;
+            this[_a] = new CoreEvent();
+            this[_b] = new TempData();
             this[_data] = { elements: [] };
             this[_opts] = opts;
-            this[_onlyRender] = opts.onlyRender === true;
+            this[_tempData].set('onlyRender', opts.onlyRender === true);
             this[_config] = mergeConfig(config || {});
-            this[_tempData] = new TempData();
-            this[_board] = new Board(mount, __assign$1(__assign$1({}, this[_opts]), { canScroll: (_h = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _h === void 0 ? void 0 : _h.use, scrollConfig: {
-                    color: ((_j = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _j === void 0 ? void 0 : _j.color) || '#a0a0a0',
-                    lineWidth: ((_k = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _k === void 0 ? void 0 : _k.lineWidth) || 12,
+            this[_board] = new Board(mount, __assign$1(__assign$1({}, 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',
+                    lineWidth: ((_e = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _e === void 0 ? void 0 : _e.lineWidth) || 12,
                 } }));
             this[_renderer] = new Renderer(this[_board]);
             this[_element] = new Element(this[_board].getContext());
@@ -3258,16 +3660,15 @@ var iDrawCore = (function () {
                 helper: this[_helper],
                 element: this[_element]
             });
-            this[_initEvent]();
-            this[_hasInited] = true;
+            initEvent(this);
         }
-        Core.prototype[(_a = _hasInited, _b = _mode, _c = _coreEvent, _d = _prevPoint, _e = _selectedDotDirection, _f = _onlyRender, _g = _cursorStatus, _draw)] = function (opts) {
-            var _h, _j;
+        Core.prototype[(_a = _coreEvent, _b = _tempData, _draw)] = function (opts) {
+            var _c, _d;
             var transfrom = this[_board].getTransform();
             this[_helper].updateConfig(this[_data], {
                 width: this[_opts].width,
                 height: this[_opts].height,
-                canScroll: ((_j = (_h = this[_config]) === null || _h === void 0 ? void 0 : _h.scrollWrapper) === null || _j === void 0 ? void 0 : _j.use) === true,
+                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,
@@ -3277,55 +3678,51 @@ var iDrawCore = (function () {
             });
             this[_renderer].render(this[_data], this[_helper].getConfig(), (opts === null || opts === void 0 ? void 0 : opts.resourceChangeUUIDs) || []);
         };
-        Core.prototype.resetSize = function (opts) {
-            this[_opts] = __assign$1(__assign$1({}, this[_opts]), opts);
-            this[_board].resetSize(opts);
-            this[_draw]();
+        Core.prototype.getElement = function (uuid) {
+            return getElement(this, uuid);
+        };
+        Core.prototype.getElementByIndex = function (index) {
+            return getElementByIndex(this, index);
         };
         Core.prototype.selectElementByIndex = function (index, opts) {
-            if (this[_onlyRender] === true)
-                return;
-            if (this[_data].elements[index]) {
-                var uuid = this[_data].elements[index].uuid;
-                if ((opts === null || opts === void 0 ? void 0 : opts.useMode) === true) {
-                    this[_mode] = Mode.SELECT_ELEMENT;
-                }
-                else {
-                    this[_mode] = Mode.NULL;
-                }
-                if (typeof uuid === 'string') {
-                    this[_tempData].set('selectedUUID', uuid);
-                    this[_tempData].set('selectedUUIDList', []);
-                }
-                this[_draw]();
-            }
+            return selectElementByIndex(this, index, opts);
         };
         Core.prototype.selectElement = function (uuid, opts) {
-            if (this[_onlyRender] === true)
-                return;
-            var index = this[_helper].getElementIndexByUUID(uuid);
-            if (typeof index === 'number' && index >= 0) {
-                this.selectElementByIndex(index, opts);
-            }
+            return selectElement(this, uuid, opts);
         };
         Core.prototype.moveUpElement = function (uuid) {
-            var index = this[_helper].getElementIndexByUUID(uuid);
-            if (typeof index === 'number' && index >= 0 && index < this[_data].elements.length - 1) {
-                var temp = this[_data].elements[index];
-                this[_data].elements[index] = this[_data].elements[index + 1];
-                this[_data].elements[index + 1] = temp;
-            }
-            this[_emitChangeData]();
-            this[_draw]();
+            return moveUpElement(this, uuid);
         };
         Core.prototype.moveDownElement = function (uuid) {
-            var index = this[_helper].getElementIndexByUUID(uuid);
-            if (typeof index === 'number' && index > 0 && index < this[_data].elements.length) {
-                var temp = this[_data].elements[index];
-                this[_data].elements[index] = this[_data].elements[index - 1];
-                this[_data].elements[index - 1] = temp;
-            }
-            this[_emitChangeData]();
+            return moveDownElement(this, uuid);
+        };
+        Core.prototype.updateElement = function (elem) {
+            return updateElement(this, elem);
+        };
+        Core.prototype.addElement = function (elem) {
+            return addElement(this, elem);
+        };
+        Core.prototype.deleteElement = function (uuid) {
+            return deleteElement(this, uuid);
+        };
+        Core.prototype.insertElementBefore = function (elem, beforeUUID) {
+            return insertElementBefore(this, elem, beforeUUID);
+        };
+        Core.prototype.insertElementBeforeIndex = function (elem, index) {
+            return insertElementBeforeIndex(this, elem, index);
+        };
+        Core.prototype.getSelectedElements = function () {
+            return getSelectedElements(this);
+        };
+        Core.prototype.insertElementAfter = function (elem, beforeUUID) {
+            return insertElementAfter(this, elem, beforeUUID);
+        };
+        Core.prototype.insertElementAfterIndex = function (elem, index) {
+            return insertElementAfterIndex(this, elem, index);
+        };
+        Core.prototype.resetSize = function (opts) {
+            this[_opts] = __assign$1(__assign$1({}, this[_opts]), opts);
+            this[_board].resetSize(opts);
             this[_draw]();
         };
         Core.prototype.scale = function (ratio) {
@@ -3365,58 +3762,6 @@ var iDrawCore = (function () {
             }
             this[_draw]({ resourceChangeUUIDs: resourceChangeUUIDs });
         };
-        Core.prototype.updateElement = function (elem) {
-            return updateElement(this, elem);
-        };
-        Core.prototype.addElement = function (elem) {
-            var _elem = deepClone(elem);
-            _elem.uuid = createUUID();
-            this[_data].elements.push(_elem);
-            this[_emitChangeData]();
-            this[_draw]();
-            return _elem.uuid;
-        };
-        Core.prototype.deleteElement = function (uuid) {
-            var index = this[_element].getElementIndex(this[_data], uuid);
-            if (index >= 0) {
-                this[_data].elements.splice(index, 1);
-                this[_emitChangeData]();
-                this[_draw]();
-            }
-        };
-        Core.prototype.insertElementBefore = function (elem, beforeUUID) {
-            var index = this[_helper].getElementIndexByUUID(beforeUUID);
-            if (index !== null) {
-                this.insertElementBeforeIndex(elem, index);
-            }
-        };
-        Core.prototype.insertElementBeforeIndex = function (elem, index) {
-            var _elem = deepClone(elem);
-            _elem.uuid = createUUID();
-            if (index >= 0) {
-                this[_data].elements.splice(index, 0, _elem);
-                this[_emitChangeData]();
-                this[_draw]();
-            }
-        };
-        Core.prototype.getSelectedElements = function () {
-            return getSelectedElements(this);
-        };
-        Core.prototype.insertElementAfter = function (elem, beforeUUID) {
-            var index = this[_helper].getElementIndexByUUID(beforeUUID);
-            if (index !== null) {
-                this.insertElementAfterIndex(elem, index);
-            }
-        };
-        Core.prototype.insertElementAfterIndex = function (elem, index) {
-            var _elem = deepClone(elem);
-            _elem.uuid = createUUID();
-            if (index >= 0) {
-                this[_data].elements.splice(index + 1, 0, _elem);
-                this[_emitChangeData]();
-                this[_draw]();
-            }
-        };
         Core.prototype.clearOperation = function () {
             this[_tempData].clear();
             this[_draw]();
@@ -3442,233 +3787,6 @@ var iDrawCore = (function () {
         Core.prototype.__getOriginContext = function () {
             return this[_board].getOriginContext();
         };
-        Core.prototype[_initEvent] = function () {
-            if (this[_hasInited] === true) {
-                return;
-            }
-            this[_board].on('hover', time.throttle(this[_handleHover].bind(this), 32));
-            this[_board].on('leave', time.throttle(this[_handleLeave].bind(this), 32));
-            this[_board].on('point', time.throttle(this[_handleClick].bind(this), 16));
-            this[_board].on('doubleClick', this[_handleDoubleClick].bind(this));
-            if (this[_onlyRender] === true) {
-                return;
-            }
-            this[_board].on('point', this[_handlePoint].bind(this));
-            this[_board].on('moveStart', this[_handleMoveStart].bind(this));
-            this[_board].on('move', time.throttle(this[_handleMove].bind(this), 16));
-            this[_board].on('moveEnd', this[_handleMoveEnd].bind(this));
-        };
-        Core.prototype[_handleDoubleClick] = function (point) {
-            var _h;
-            var _j = this[_element].isPointInElement(point, this[_data]), index = _j[0], uuid = _j[1];
-            if (index >= 0 && uuid) {
-                this[_coreEvent].trigger('screenDoubleClickElement', { index: index, uuid: uuid, element: deepClone((_h = this[_data].elements) === null || _h === void 0 ? void 0 : _h[index]) });
-            }
-            this[_draw]();
-        };
-        Core.prototype[_handleClick] = function (point) {
-            var _h;
-            var _j = this[_element].isPointInElement(point, this[_data]), index = _j[0], uuid = _j[1];
-            if (index >= 0 && uuid) {
-                this[_coreEvent].trigger('screenClickElement', { index: index, uuid: uuid, element: deepClone((_h = this[_data].elements) === null || _h === void 0 ? void 0 : _h[index]) });
-            }
-            this[_draw]();
-        };
-        Core.prototype[_handlePoint] = function (point) {
-            var _h, _j, _k;
-            if (!this[_mapper].isEffectivePoint(point)) {
-                return;
-            }
-            if (this[_helper].isPointInElementList(point, this[_data])) {
-                this[_mode] = Mode.SELECT_ELEMENT_LIST;
-            }
-            else {
-                var _l = this[_helper].isPointInElementWrapperDot(point), uuid = _l[0], direction = _l[1];
-                if (uuid && direction) {
-                    this[_mode] = Mode.SELECT_ELEMENT_WRAPPER_DOT;
-                    this[_selectedDotDirection] = direction;
-                    this[_tempData].set('selectedUUID', uuid);
-                }
-                else {
-                    var _m = this[_element].isPointInElement(point, this[_data]), index = _m[0], uuid_1 = _m[1];
-                    if (index >= 0 && ((_j = (_h = this[_data].elements[index]) === null || _h === void 0 ? void 0 : _h.operation) === null || _j === void 0 ? void 0 : _j.invisible) !== true) {
-                        this.selectElementByIndex(index, { useMode: true });
-                        if (typeof uuid_1 === 'string' && this[_coreEvent].has('screenSelectElement')) {
-                            this[_coreEvent].trigger('screenSelectElement', { index: index, uuid: uuid_1, element: deepClone((_k = this[_data].elements) === null || _k === void 0 ? void 0 : _k[index]) });
-                            this[_emitChangeScreen]();
-                        }
-                        this[_mode] = Mode.SELECT_ELEMENT;
-                    }
-                    else {
-                        this[_tempData].set('selectedUUIDList', []);
-                        this[_mode] = Mode.SELECT_AREA;
-                    }
-                }
-            }
-            this[_draw]();
-        };
-        Core.prototype[_handleMoveStart] = function (point) {
-            this[_prevPoint] = point;
-            var uuid = this[_tempData].get('selectedUUID');
-            if (this[_mode] === Mode.SELECT_ELEMENT_LIST) ;
-            else if (this[_mode] === Mode.SELECT_ELEMENT) {
-                if (typeof uuid === 'string' && this[_coreEvent].has('screenMoveElementStart')) {
-                    this[_coreEvent].trigger('screenMoveElementStart', {
-                        index: this[_element].getElementIndex(this[_data], uuid),
-                        uuid: uuid,
-                        x: point.x,
-                        y: point.y
-                    });
-                }
-            }
-            else if (this[_mode] === Mode.SELECT_AREA) {
-                this[_helper].startSelectArea(point);
-            }
-        };
-        Core.prototype[_handleMove] = function (point) {
-            if (this[_mode] === Mode.SELECT_ELEMENT_LIST) {
-                this[_dragElements](this[_tempData].get('selectedUUIDList'), point, this[_prevPoint]);
-                this[_draw]();
-                this[_cursorStatus] = CursorStatus.DRAGGING;
-            }
-            else if (typeof this[_tempData].get('selectedUUID') === 'string') {
-                if (this[_mode] === Mode.SELECT_ELEMENT) {
-                    this[_dragElements]([this[_tempData].get('selectedUUID')], point, this[_prevPoint]);
-                    this[_draw]();
-                    this[_cursorStatus] = CursorStatus.DRAGGING;
-                }
-                else if (this[_mode] === Mode.SELECT_ELEMENT_WRAPPER_DOT && this[_selectedDotDirection]) {
-                    this[_transfromElement](this[_tempData].get('selectedUUID'), point, this[_prevPoint], this[_selectedDotDirection]);
-                    this[_cursorStatus] = CursorStatus.DRAGGING;
-                }
-            }
-            else if (this[_mode] === Mode.SELECT_AREA) {
-                this[_helper].changeSelectArea(point);
-                this[_draw]();
-            }
-            this[_prevPoint] = point;
-        };
-        Core.prototype[_handleMoveEnd] = function (point) {
-            var uuid = this[_tempData].get('selectedUUID');
-            if (typeof uuid === 'string') {
-                var index = this[_element].getElementIndex(this[_data], uuid);
-                var elem = this[_data].elements[index];
-                if (elem) {
-                    if (this[_coreEvent].has('screenMoveElementEnd')) {
-                        this[_coreEvent].trigger('screenMoveElementEnd', {
-                            index: index,
-                            uuid: uuid,
-                            x: point.x,
-                            y: point.y
-                        });
-                    }
-                    if (this[_coreEvent].has('screenChangeElement')) {
-                        this[_coreEvent].trigger('screenChangeElement', {
-                            index: index,
-                            uuid: uuid,
-                            width: elem.w,
-                            height: elem.h,
-                            angle: elem.angle || 0
-                        });
-                    }
-                    this[_emitChangeData]();
-                }
-            }
-            else if (this[_mode] === Mode.SELECT_AREA) {
-                var uuids = this[_helper].calcSelectedElements(this[_data]);
-                if (uuids.length > 0) {
-                    this[_tempData].set('selectedUUIDList', uuids);
-                    this[_tempData].set('selectedUUID', null);
-                }
-                else {
-                    this[_mode] = Mode.NULL;
-                }
-                this[_helper].clearSelectedArea();
-                this[_draw]();
-            }
-            if (this[_mode] !== Mode.SELECT_ELEMENT) {
-                this[_tempData].set('selectedUUID', null);
-            }
-            this[_prevPoint] = null;
-            this[_cursorStatus] = CursorStatus.NULL;
-            this[_mode] = Mode.NULL;
-        };
-        Core.prototype[_handleHover] = function (point) {
-            var _h, _j;
-            var isMouseOverElement = false;
-            if (this[_mode] === Mode.SELECT_AREA) {
-                if (this[_onlyRender] !== true)
-                    this[_board].resetCursor();
-            }
-            else if (this[_cursorStatus] === CursorStatus.NULL) {
-                var _k = this[_mapper].judgePointCursor(point, this[_data]), cursor = _k.cursor, elementUUID = _k.elementUUID;
-                if (this[_onlyRender] !== true)
-                    this[_board].setCursor(cursor);
-                if (elementUUID) {
-                    var index = this[_helper].getElementIndexByUUID(elementUUID);
-                    if (index !== null && index >= 0) {
-                        var elem = this[_data].elements[index];
-                        if (((_h = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _h === void 0 ? void 0 : _h.lock) === true || ((_j = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _j === void 0 ? void 0 : _j.invisible) === true) {
-                            this[_board].resetCursor();
-                            return;
-                        }
-                        if (this[_tempData].get('hoverUUID') !== elem.uuid) {
-                            var preIndex = this[_helper].getElementIndexByUUID(this[_tempData].get('hoverUUID') || '');
-                            if (preIndex !== null && this[_data].elements[preIndex]) {
-                                this[_coreEvent].trigger('mouseLeaveElement', {
-                                    uuid: this[_tempData].get('hoverUUID'),
-                                    index: preIndex,
-                                    element: this[_data].elements[preIndex]
-                                });
-                            }
-                        }
-                        if (elem) {
-                            this[_coreEvent].trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
-                            this[_tempData].set('hoverUUID', elem.uuid);
-                            isMouseOverElement = true;
-                        }
-                    }
-                }
-            }
-            if (isMouseOverElement !== true && this[_tempData].get('hoverUUID') !== null) {
-                var uuid = this[_tempData].get('hoverUUID');
-                var index = this[_helper].getElementIndexByUUID(uuid || '');
-                if (index !== null)
-                    this[_coreEvent].trigger('mouseLeaveElement', { uuid: uuid, index: index, element: this[_data].elements[index] });
-                this[_tempData].set('hoverUUID', null);
-            }
-            if (this[_coreEvent].has('mouseOverScreen'))
-                this[_coreEvent].trigger('mouseOverScreen', point);
-        };
-        Core.prototype[_handleLeave] = function () {
-            if (this[_coreEvent].has('mouseLeaveScreen'))
-                this[_coreEvent].trigger('mouseLeaveScreen', undefined);
-        };
-        Core.prototype[_dragElements] = function (uuids, point, prevPoint) {
-            var _this = this;
-            if (!prevPoint) {
-                return;
-            }
-            uuids.forEach(function (uuid) {
-                var _h, _j;
-                var idx = _this[_helper].getElementIndexByUUID(uuid);
-                if (idx === null)
-                    return;
-                var elem = _this[_data].elements[idx];
-                if (((_h = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _h === void 0 ? void 0 : _h.lock) !== true && ((_j = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _j === void 0 ? void 0 : _j.invisible) !== true) {
-                    _this[_element].dragElement(_this[_data], uuid, point, prevPoint, _this[_board].getContext().getTransform().scale);
-                }
-            });
-            this[_draw]();
-        };
-        Core.prototype[_transfromElement] = function (uuid, point, prevPoint, direction) {
-            if (!prevPoint) {
-                return null;
-            }
-            var result = this[_element].transformElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale, direction);
-            this[_draw]();
-            return result;
-        };
         Core.prototype[_emitChangeScreen] = function () {
             if (this[_coreEvent].has('changeScreen')) {
                 this[_coreEvent].trigger('changeScreen', __assign$1({}, this.getScreenTransform()));
@@ -3679,7 +3797,10 @@ var iDrawCore = (function () {
                 this[_coreEvent].trigger('changeData', deepClone(this[_data]));
             }
         };
-        var _a, _b, _c, _d, _e, _f, _g;
+        Core.prototype[_todo] = function () {
+            console.log(this[_mapper]);
+        };
+        var _a, _b;
         Core.is = is;
         Core.check = check;
         return Core;