@idraw/core 0.1.13 → 0.2.0-alpha.3

package/dist/index.es.js

@@ -122,7 +122,7 @@ function createUUID$3() {
     }
     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) {
@@ -270,7 +270,7 @@ var index$1 = {
     },
     istype: istype$2,
     data: {
-        deepClone: deepClone$5,
+        deepClone: deepClone$6,
     }
 };
 var BoardEvent = (function () {
@@ -914,7 +914,7 @@ var _watcher = Symbol('_watcher');
 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');
@@ -1043,7 +1043,7 @@ var Board = (function () {
             return;
         }
         this[_resetContext]();
-        this[_initEvent$1]();
+        this[_initEvent]();
         this[_hasRendered] = true;
     };
     Board.prototype[_resetContext] = function () {
@@ -1063,7 +1063,7 @@ var Board = (function () {
         };
         return __assign(__assign({}, defaultOpts), opts);
     };
-    Board.prototype[_initEvent$1] = function () {
+    Board.prototype[_initEvent] = function () {
         var _this = this;
         if (this[_hasRendered] === true) {
             return;
@@ -1204,7 +1204,7 @@ function createUUID$2() {
     }
     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) {
@@ -1352,10 +1352,212 @@ var index = {
     },
     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;
 }
@@ -1440,7 +1642,7 @@ function rotateContext(ctx, center, radian, callback) {
     }
 }
 
-var istype = index.istype, color$1 = index.color;
+var istype = index.istype, color = index.color;
 function clearContext(ctx) {
     ctx.setFillStyle('#000000');
     ctx.setStrokeStyle('#000000');
@@ -1486,7 +1688,7 @@ function drawBoxBorder(ctx, elem) {
         }
         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;
@@ -1512,7 +1714,7 @@ function drawBoxBorder(ctx, elem) {
 }
 
 function drawRect(ctx, elem) {
-    drawBox(ctx, elem, elem.desc.color);
+    drawBox(ctx, elem, elem.desc.bgColor);
 }
 
 function drawImage(ctx, elem, loader) {
@@ -1611,7 +1813,7 @@ function drawText(ctx, elem, loader, helperConfig) {
 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;
@@ -1631,7 +1833,7 @@ function drawCircle(ctx, elem) {
             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));
@@ -1774,13 +1976,13 @@ function drawElementListWrappers(ctx, config) {
     });
 }
 
-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)) {
@@ -1823,11 +2025,30 @@ function drawContext(ctx, data, helperConfig, loader) {
     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);
@@ -1837,7 +2058,7 @@ var LoaderEvent = (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)) {
@@ -1851,7 +2072,7 @@ var LoaderEvent = (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) {
@@ -1863,7 +2084,7 @@ var LoaderEvent = (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) {
@@ -1872,327 +2093,87 @@ var LoaderEvent = (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);
@@ -2367,7 +2348,7 @@ var Element = (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 };
@@ -2385,7 +2366,7 @@ var Helper = (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];
@@ -2394,25 +2375,71 @@ var Helper = (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];
@@ -2423,11 +2450,23 @@ var Helper = (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;
@@ -2571,70 +2610,361 @@ var Helper = (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');
@@ -2662,9 +2992,13 @@ var Mapper = (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;
@@ -2673,10 +3007,6 @@ var Mapper = (function () {
                     cursor = 'n-resize';
                     break;
                 }
-                case 'top-right': {
-                    cursor = 'ne-resize';
-                    break;
-                }
                 case 'right': {
                     cursor = 'e-resize';
                     break;
@@ -2697,101 +3027,30 @@ var Mapper = (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 = {
@@ -2834,215 +3093,116 @@ function isNumber(num) {
     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;
@@ -3051,11 +3211,7 @@ var TempData = (function () {
         return this._temp[name];
     };
     TempData.prototype.clear = function () {
-        this._temp = {
-            selectedUUID: null,
-            hoverUUID: null,
-            selectedUUIDList: [],
-        };
+        this._temp = createData();
     };
     return TempData;
 }());
@@ -3067,185 +3223,431 @@ var _config = Symbol('_config');
 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());
@@ -3255,16 +3657,15 @@ var Core = (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,
@@ -3274,55 +3675,51 @@ var Core = (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) {
@@ -3362,58 +3759,6 @@ var Core = (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]();
@@ -3439,233 +3784,6 @@ var Core = (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()));
@@ -3676,7 +3794,10 @@ var Core = (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;