@meta2d/core 1.0.17 → 1.0.19

package/src/core.js

@@ -86,7 +86,7 @@ import { Canvas } from './canvas';
 import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, } from './pen';
 import { rotatePoint } from './point';
 import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
-import { formatPadding, s8, valueInArray, valueInRange, } from './utils';
+import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
 import { calcCenter, calcRelativeRect, getRect, rectInRect, } from './rect';
 import { deepClone } from './utils/clone';
 import { EventAction } from './event';
@@ -770,7 +770,8 @@ var Meta2d = /** @class */ (function () {
         this.store.patchFlagsTop = true;
     };
     Meta2d.prototype.open = function (data, render) {
-        var e_1, _a, e_2, _b;
+        var e_1, _a, e_2, _b, e_3, _c, e_4, _e;
+        var _this = this;
         if (render === void 0) { render = true; }
         this.clear(false);
         if (data) {
@@ -779,8 +780,8 @@ var Meta2d = /** @class */ (function () {
             this.store.data.pens = [];
             try {
                 // 第一遍赋初值
-                for (var _c = __values(data.pens), _e = _c.next(); !_e.done; _e = _c.next()) {
-                    var pen = _e.value;
+                for (var _f = __values(data.pens), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var pen = _g.value;
                     if (!pen.id) {
                         pen.id = s8();
                     }
@@ -791,34 +792,65 @@ var Meta2d = /** @class */ (function () {
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
+                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
             try {
-                for (var _f = __values(data.pens), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var pen = _g.value;
+                for (var _h = __values(data.pens), _j = _h.next(); !_j.done; _j = _h.next()) {
+                    var pen = _j.value;
                     this.canvas.makePen(pen);
                 }
             }
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
+            try {
+                for (var _k = __values(data.pens), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var pen = _l.value;
+                    this.canvas.updateLines(pen);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
         }
         if (!render) {
             this.canvas.opening = true;
         }
         this.initBindDatas();
+        this.initBinds();
         this.render();
         this.listenSocket();
         this.connectSocket();
         this.startAnimate();
         this.startVideo();
         this.doInitJS();
+        if (this.store.data.iconUrls) {
+            try {
+                for (var _m = __values(this.store.data.iconUrls), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var item = _o.value;
+                    loadCss(item, function () {
+                        _this.render();
+                    });
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_o && !_o.done && (_e = _m.return)) _e.call(_m);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
         this.store.emitter.emit('opened');
         if (this.canvas.scroll && this.canvas.scroll.isShow) {
             this.canvas.scroll.init();
@@ -851,6 +883,24 @@ var Meta2d = /** @class */ (function () {
             });
         });
     };
+    Meta2d.prototype.initBinds = function () {
+        var _this = this;
+        this.store.binds = {};
+        this.store.data.pens.forEach(function (pen) {
+            var _a;
+            (_a = pen.realTimes) === null || _a === void 0 ? void 0 : _a.forEach(function (realTime) {
+                if (realTime.binds && realTime.binds.id) {
+                    if (!_this.store.binds[realTime.binds.id]) {
+                        _this.store.binds[realTime.binds.id] = [];
+                    }
+                    _this.store.binds[realTime.binds.id].push({
+                        id: pen.id,
+                        key: realTime.key,
+                    });
+                }
+            });
+        });
+    };
     Meta2d.prototype.connectSocket = function () {
         this.connectWebsocket();
         this.connectMqtt();
@@ -982,7 +1032,7 @@ var Meta2d = /** @class */ (function () {
      * @param render 是否重绘
      */
     Meta2d.prototype.clear = function (render) {
-        var e_3, _a;
+        var e_5, _a;
         var _b;
         if (render === void 0) { render = true; }
         try {
@@ -991,12 +1041,12 @@ var Meta2d = /** @class */ (function () {
                 (_b = pen.onDestroy) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         clearStore(this.store);
         this.hideInput();
@@ -1692,7 +1742,8 @@ var Meta2d = /** @class */ (function () {
         if (pen.realTimes) {
             var _d_1 = {};
             pen.realTimes.forEach(function (realTime) {
-                if (!realTime.binds || !realTime.binds.length) {
+                if (realTime.value !== undefined &&
+                    (!realTime.binds || !realTime.binds.id)) {
                     if (realTime.type === 'number') {
                         if (realTime.value && realTime.value.indexOf(',') !== -1) {
                             var arr = realTime.value.split(',');
@@ -1771,7 +1822,7 @@ var Meta2d = /** @class */ (function () {
                             return [4 /*yield*/, fetch(item.url, {
                                     headers: item.headers,
                                     method: item.method,
-                                    body: item.body,
+                                    body: item.method === 'GET' ? undefined : item.body,
                                 })];
                         case 1:
                             res = _a.sent();
@@ -1851,7 +1902,7 @@ var Meta2d = /** @class */ (function () {
         // 把{dataId: string; value: any}转成setValue格式数据
         var penValues = new Map();
         datas.forEach(function (v) {
-            var _a;
+            var _a, _b;
             (_a = _this.store.bindDatas[v.dataId]) === null || _a === void 0 ? void 0 : _a.forEach(function (p) {
                 var _a;
                 var pen = _this.store.pens[p.id];
@@ -1879,6 +1930,34 @@ var Meta2d = /** @class */ (function () {
                     penValues.set(pen, penValue);
                 }
             });
+            (_b = _this.store.binds[v.id]) === null || _b === void 0 ? void 0 : _b.forEach(function (p) {
+                var _a;
+                var pen = _this.store.pens[p.id];
+                if (!pen) {
+                    return;
+                }
+                var penValue = penValues.get(pen);
+                // if (typeof pen.onBinds === 'function') {
+                //   // 已经计算了
+                //   if (penValue) {
+                //     return;
+                //   }
+                //   //TODO onBinds的情况
+                //   penValues.set(pen, pen.onBinds(pen, datas));
+                //   return;
+                // }
+                if (penValue) {
+                    penValue[p.key] = v.value;
+                }
+                else {
+                    penValue = (_a = {
+                            id: p.id
+                        },
+                        _a[p.key] = v.value,
+                        _a);
+                    penValues.set(pen, penValue);
+                }
+            });
         });
         var initPens;
         var pens;
@@ -2120,7 +2199,7 @@ var Meta2d = /** @class */ (function () {
      * @param padding 上右下左的内边距
      */
     Meta2d.prototype.downloadPng = function (name, padding) {
-        var e_4, _a;
+        var e_6, _a;
         var _this = this;
         var _b;
         try {
@@ -2132,12 +2211,12 @@ var Meta2d = /** @class */ (function () {
                 }
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         setTimeout(function () {
             var a = document.createElement('a');
@@ -2467,7 +2546,7 @@ var Meta2d = /** @class */ (function () {
         this.formatPainter();
     };
     Meta2d.prototype.alignNodes = function (align, pens, rect) {
-        var e_5, _a;
+        var e_7, _a;
         if (pens === void 0) { pens = this.store.data.pens; }
         !rect && (rect = this.getPenRect(this.getRect(pens)));
         var initPens = deepClone(pens); // 原 pens ，深拷贝一下
@@ -2477,12 +2556,12 @@ var Meta2d = /** @class */ (function () {
                 this.alignPen(align, item, rect);
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (pens_1_1 && !pens_1_1.done && (_a = pens_1.return)) _a.call(pens_1);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         this.render();
         this.pushHistory({
@@ -2571,7 +2650,7 @@ var Meta2d = /** @class */ (function () {
      * @param distance 总的宽 or 高
      */
     Meta2d.prototype.spaceBetweenByDirection = function (direction, pens, distance) {
-        var e_6, _a;
+        var e_8, _a;
         var _this = this;
         if (pens === void 0) { pens = this.store.data.pens; }
         !distance && (distance = this.getPenRect(this.getRect(pens))[direction]);
@@ -2605,12 +2684,12 @@ var Meta2d = /** @class */ (function () {
                 this.setValue(__assign({ id: pen.id }, penRect), { render: false, doEvent: false });
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (pens_2_1 && !pens_2_1.done && (_a = pens_2.return)) _a.call(pens_2);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         this.render();
         this.pushHistory({
@@ -2724,22 +2803,44 @@ var Meta2d = /** @class */ (function () {
     };
     /**
      * 将该画笔置顶，即放到数组最后，最后绘制即在顶部
-     * @param pen pen 置顶的画笔
+     * @param pens pen 置顶的画笔
      */
-    Meta2d.prototype.top = function (pen) {
+    Meta2d.prototype.top = function (pens) {
+        var e_9, _a;
         var _this = this;
-        var pens = this.store.data.pens;
-        // 获取它包含它的子节点
-        var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false).map(function (p) { return p.id; });
-        var allPens = pens.filter(function (p) { return allIds.includes(p.id); });
-        allPens.forEach(function (pen) {
-            var index = pens.findIndex(function (p) { return p.id === pen.id; });
-            if (index > -1) {
-                pens.push(pens[index]);
-                pens.splice(index, 1);
-                _this.initImageCanvas([pen]);
+        if (!pens)
+            pens = this.store.active;
+        if (!Array.isArray(pens))
+            pens = [pens]; // 兼容
+        var _loop_3 = function (pen) {
+            var _pens = this_1.store.data.pens;
+            // 获取它包含它的子节点
+            var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_1.store)), false), [pen], false).map(function (p) { return p.id; });
+            var allPens = _pens.filter(function (p) { return allIds.includes(p.id); });
+            allPens.forEach(function (pen) {
+                var index = _pens.findIndex(function (p) { return p.id === pen.id; });
+                if (index > -1) {
+                    _pens.push(_pens[index]);
+                    _pens.splice(index, 1);
+                    _this.initImageCanvas([pen]);
+                }
+                _this.specificLayerMove(pen, 'top');
+            });
+        };
+        var this_1 = this;
+        try {
+            for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var pen = _c.value;
+                _loop_3(pen);
             }
-        });
+        }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_9) throw e_9.error; }
+        }
     };
     /**
      * 若本次改变的画笔存在图片，并且在上层 or 下层，需要擦除上层 or 下层
@@ -2753,23 +2854,44 @@ var Meta2d = /** @class */ (function () {
      * 该画笔置底，即放到数组最前，最后绘制即在底部
      * @param pens 画笔们，注意 pen 必须在该数组内才有效
      */
-    Meta2d.prototype.bottom = function (pen) {
-        var pens = this.store.data.pens;
-        var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false).map(function (p) { return p.id; });
-        var allPens = pens.filter(function (p) { return allIds.includes(p.id); });
-        var _loop_3 = function (i) {
-            var pen_1 = allPens[i];
-            var index = pens.findIndex(function (p) { return p.id === pen_1.id; });
-            if (index > -1) {
-                pens.unshift(pens[index]);
-                pens.splice(index + 1, 1);
-                this_1.initImageCanvas([pen_1]);
+    Meta2d.prototype.bottom = function (pens) {
+        var e_10, _a;
+        if (!pens)
+            pens = this.store.active;
+        if (!Array.isArray(pens))
+            pens = [pens]; // 兼容
+        var _loop_4 = function (pen) {
+            var _pens = this_2.store.data.pens;
+            var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_2.store)), false), [pen], false).map(function (p) { return p.id; });
+            var allPens = _pens.filter(function (p) { return allIds.includes(p.id); });
+            var _loop_5 = function (i) {
+                var pen_1 = allPens[i];
+                var index = _pens.findIndex(function (p) { return p.id === pen_1.id; });
+                if (index > -1) {
+                    _pens.unshift(_pens[index]);
+                    _pens.splice(index + 1, 1);
+                    this_2.initImageCanvas([pen_1]);
+                }
+                this_2.specificLayerMove(pen_1, 'bottom');
+            };
+            // 从后往前，保证 allPens 顺序不变
+            for (var i = allPens.length - 1; i >= 0; i--) {
+                _loop_5(i);
             }
         };
-        var this_1 = this;
-        // 从后往前，保证 allPens 顺序不变
-        for (var i = allPens.length - 1; i >= 0; i--) {
-            _loop_3(i);
+        var this_2 = this;
+        try {
+            for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var pen = _c.value;
+                _loop_4(pen);
+            }
+        }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_10) throw e_10.error; }
         }
     };
     /**
@@ -2778,7 +2900,7 @@ var Meta2d = /** @class */ (function () {
      * @param pen 画笔
      */
     Meta2d.prototype.upByArea = function (pen) {
-        var _a, e_7, _b;
+        var _a, e_11, _b;
         var _this = this;
         var index = this.store.data.pens.findIndex(function (p) { return p.id === pen.id; });
         if (index === -1) {
@@ -2814,111 +2936,193 @@ var Meta2d = /** @class */ (function () {
             return;
         }
         (_a = this.store.data.pens).splice.apply(_a, __spreadArray([nextHitIndex + 1, 0], __read(allPens), false));
-        var _loop_4 = function (pen_2) {
-            var index_1 = this_2.store.data.pens.findIndex(function (p) { return p.id === pen_2.id; });
+        var _loop_6 = function (pen_2) {
+            var index_1 = this_3.store.data.pens.findIndex(function (p) { return p.id === pen_2.id; });
             if (index_1 > -1) {
-                this_2.store.data.pens.splice(index_1, 1);
+                this_3.store.data.pens.splice(index_1, 1);
             }
         };
-        var this_2 = this;
+        var this_3 = this;
         try {
             // 删除靠前的 allPens
             for (var allPens_1 = __values(allPens), allPens_1_1 = allPens_1.next(); !allPens_1_1.done; allPens_1_1 = allPens_1.next()) {
                 var pen_2 = allPens_1_1.value;
-                _loop_4(pen_2);
+                _loop_6(pen_2);
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
         finally {
             try {
                 if (allPens_1_1 && !allPens_1_1.done && (_b = allPens_1.return)) _b.call(allPens_1);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_11) throw e_11.error; }
         }
         this.initImageCanvas([pen]);
     };
+    //特殊图元层级处理
+    Meta2d.prototype.specificLayerMove = function (pen, type) {
+        //image
+        if (pen.image && pen.name !== 'gif') {
+            var isBottom = false;
+            if (type === 'bottom' || type === 'down') {
+                isBottom = true;
+            }
+            this.setValue({ id: pen.id, isBottom: isBottom }, { render: false, doEvent: false, history: false });
+        }
+        //dom
+        if (pen.externElement || pen.name === 'gif') {
+            var zIndex = 0;
+            // let zIndex = pen.calculative.zIndex === undefined ? 5 : pen.calculative.zIndex + 1;
+            if (type === 'top') {
+                pen.calculative.canvas.maxZindex += 1;
+                zIndex = pen.calculative.canvas.maxZindex;
+            }
+            else if (type === 'up') {
+                zIndex =
+                    pen.calculative.zIndex === undefined ? 5 : pen.calculative.zIndex + 1;
+            }
+            else if (type === 'down') {
+                zIndex =
+                    pen.calculative.zIndex === undefined ? 3 : pen.calculative.zIndex - 1;
+                if (zIndex < 0) {
+                    zIndex = 0;
+                }
+            }
+            this.setValue({ id: pen.id, zIndex: zIndex }, { render: false, doEvent: false, history: false });
+        }
+    };
     /**
      * 该画笔上移，即把该画笔在数组中的位置向后移动一个
-     * @param pen 画笔
+     * @param pens 画笔
      */
-    Meta2d.prototype.up = function (pen) {
-        var pens = this.store.data.pens;
-        if (pen.children) {
-            //组合图元
-            var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false);
-            //先保证组合图元的顺序正确。
-            var orderPens = [];
-            var _loop_5 = function (index) {
-                var _pen = pens[index];
-                if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
-                    _pen.temIndex = index;
-                    orderPens.push(_pen);
+    Meta2d.prototype.up = function (pens) {
+        var e_12, _a;
+        var _this = this;
+        if (!pens)
+            pens = this.store.active;
+        if (!Array.isArray(pens))
+            pens = [pens]; // 兼容
+        var _loop_7 = function (pen) {
+            var _pens = this_4.store.data.pens;
+            if (pen.children && pen.children.length) {
+                //组合图元
+                var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_4.store)), false), [pen], false);
+                //先保证组合图元的顺序正确。
+                var orderPens = [];
+                var _loop_8 = function (index) {
+                    var _pen = _pens[index];
+                    if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
+                        _pen.temIndex = index;
+                        orderPens.push(_pen);
+                    }
+                };
+                for (var index = 0; index < _pens.length; index++) {
+                    _loop_8(index);
                 }
-            };
-            for (var index = 0; index < pens.length; index++) {
-                _loop_5(index);
-            }
-            var lastIndex_1 = -1;
-            var offset_1 = 0;
-            orderPens.forEach(function (_pen) {
-                _pen.temIndex -= offset_1;
-                pens.splice(_pen.temIndex, 1);
-                offset_1 += 1;
-                lastIndex_1 = _pen.temIndex;
-                delete _pen.temIndex;
-            });
-            pens.splice.apply(pens, __spreadArray([lastIndex_1 + 1, 0], __read(preMovePens), false));
+                var lastIndex_1 = -1;
+                var offset_1 = 0;
+                orderPens.forEach(function (_pen) {
+                    _pen.temIndex -= offset_1;
+                    _pens.splice(_pen.temIndex, 1);
+                    offset_1 += 1;
+                    lastIndex_1 = _pen.temIndex;
+                    delete _pen.temIndex;
+                    _this.specificLayerMove(_pen, 'up');
+                });
+                _pens.splice.apply(_pens, __spreadArray([lastIndex_1 + 1, 0], __read(orderPens), false));
+                this_4.initImageCanvas(orderPens);
+            }
+            else {
+                var index = _pens.findIndex(function (p) { return p.id === pen.id; });
+                if (index > -1 && index !== _pens.length - 1) {
+                    _pens.splice(index + 2, 0, _pens[index]);
+                    _pens.splice(index, 1);
+                    this_4.initImageCanvas([pen]);
+                }
+                this_4.specificLayerMove(pen, 'up');
+            }
+        };
+        var this_4 = this;
+        try {
+            for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var pen = _c.value;
+                _loop_7(pen);
+            }
         }
-        else {
-            var index = pens.findIndex(function (p) { return p.id === pen.id; });
-            if (index > -1 && index !== pens.length - 1) {
-                pens.splice(index + 2, 0, pens[index]);
-                pens.splice(index, 1);
-                this.initImageCanvas([pen]);
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
+            finally { if (e_12) throw e_12.error; }
         }
     };
     /**
      * 该画笔下移，即把该画笔在该数组中的位置前移一个
      * @param pen 画笔
      */
-    Meta2d.prototype.down = function (pen) {
-        var pens = this.store.data.pens;
-        if (pen.children) {
-            //组合图元
-            var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false);
-            //先保证组合图元的顺序正确。
-            var orderPens = [];
-            var _loop_6 = function (index) {
-                var _pen = pens[index];
-                if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
-                    _pen.temIndex = index;
-                    orderPens.push(_pen);
+    Meta2d.prototype.down = function (pens) {
+        var e_13, _a;
+        var _this = this;
+        if (!pens)
+            pens = this.store.active;
+        if (!Array.isArray(pens))
+            pens = [pens]; // 兼容
+        var _loop_9 = function (pen) {
+            var _pens = this_5.store.data.pens;
+            if (pen.children && pen.children.length) {
+                //组合图元
+                var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_5.store)), false), [pen], false);
+                //先保证组合图元的顺序正确。
+                var orderPens = [];
+                var _loop_10 = function (index) {
+                    var _pen = _pens[index];
+                    if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
+                        _pen.temIndex = index;
+                        orderPens.push(_pen);
+                    }
+                };
+                for (var index = 0; index < _pens.length; index++) {
+                    _loop_10(index);
                 }
-            };
-            for (var index = 0; index < pens.length; index++) {
-                _loop_6(index);
-            }
-            var firstIndex_1 = -1;
-            var offset_2 = 0;
-            orderPens.forEach(function (_pen, index) {
-                _pen.temIndex -= offset_2;
-                pens.splice(_pen.temIndex, 1);
-                offset_2 += 1;
-                if (index === 0) {
-                    firstIndex_1 = _pen.temIndex;
+                var firstIndex_1 = -1;
+                var offset_2 = 0;
+                orderPens.forEach(function (_pen, index) {
+                    _pen.temIndex -= offset_2;
+                    _pens.splice(_pen.temIndex, 1);
+                    offset_2 += 1;
+                    if (index === 0) {
+                        firstIndex_1 = _pen.temIndex;
+                    }
+                    delete _pen.temIndex;
+                    _this.specificLayerMove(_pen, 'down');
+                });
+                _pens.splice.apply(_pens, __spreadArray([firstIndex_1 - 1, 0], __read(orderPens), false));
+                this_5.initImageCanvas(orderPens);
+            }
+            else {
+                var index = _pens.findIndex(function (p) { return p.id === pen.id; });
+                if (index > -1 && index !== 0) {
+                    _pens.splice(index - 1, 0, _pens[index]);
+                    _pens.splice(index + 1, 1);
+                    this_5.initImageCanvas([pen]);
                 }
-                delete _pen.temIndex;
-            });
-            pens.splice.apply(pens, __spreadArray([firstIndex_1 - 1, 0], __read(preMovePens), false));
+                this_5.specificLayerMove(pen, 'down');
+            }
+        };
+        var this_5 = this;
+        try {
+            for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var pen = _c.value;
+                _loop_9(pen);
+            }
         }
-        else {
-            var index = pens.findIndex(function (p) { return p.id === pen.id; });
-            if (index > -1 && index !== 0) {
-                pens.splice(index - 1, 0, pens[index]);
-                pens.splice(index + 1, 1);
-                this.initImageCanvas([pen]);
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
+            finally { if (e_13) throw e_13.error; }
         }
     };
     Meta2d.prototype.setLayer = function (pen, toIndex, pens) {
@@ -2993,9 +3197,9 @@ var Meta2d = /** @class */ (function () {
             var nextNodes_1 = [];
             // 2. 遍历出线的 nextNode
             lines.forEach(function (line) {
-                var e_8, _a;
+                var e_14, _a;
                 var lineNextNode = _this.nextNode(line);
-                var _loop_7 = function (node) {
+                var _loop_11 = function (node) {
                     var have = nextNodes_1.find(function (next) { return next.id === node.id; });
                     // 3. 不重复的才加进去
                     !have && nextNodes_1.push(node);
@@ -3003,15 +3207,15 @@ var Meta2d = /** @class */ (function () {
                 try {
                     for (var lineNextNode_1 = __values(lineNextNode), lineNextNode_1_1 = lineNextNode_1.next(); !lineNextNode_1_1.done; lineNextNode_1_1 = lineNextNode_1.next()) {
                         var node = lineNextNode_1_1.value;
-                        _loop_7(node);
+                        _loop_11(node);
                     }
                 }
-                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                catch (e_14_1) { e_14 = { error: e_14_1 }; }
                 finally {
                     try {
                         if (lineNextNode_1_1 && !lineNextNode_1_1.done && (_a = lineNextNode_1.return)) _a.call(lineNextNode_1);
                     }
-                    finally { if (e_8) throw e_8.error; }
+                    finally { if (e_14) throw e_14.error; }
                 }
             });
             return nextNodes_1;
@@ -3034,9 +3238,9 @@ var Meta2d = /** @class */ (function () {
             var preNodes_1 = [];
             // 2. 遍历入线的 preNode
             lines.forEach(function (line) {
-                var e_9, _a;
+                var e_15, _a;
                 var linePreNode = _this.previousNode(line);
-                var _loop_8 = function (node) {
+                var _loop_12 = function (node) {
                     var have = preNodes_1.find(function (pre) { return pre.id === node.id; });
                     // 3. 不重复的才加进去
                     !have && preNodes_1.push(node);
@@ -3044,15 +3248,15 @@ var Meta2d = /** @class */ (function () {
                 try {
                     for (var linePreNode_1 = __values(linePreNode), linePreNode_1_1 = linePreNode_1.next(); !linePreNode_1_1.done; linePreNode_1_1 = linePreNode_1.next()) {
                         var node = linePreNode_1_1.value;
-                        _loop_8(node);
+                        _loop_12(node);
                     }
                 }
-                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                catch (e_15_1) { e_15 = { error: e_15_1 }; }
                 finally {
                     try {
                         if (linePreNode_1_1 && !linePreNode_1_1.done && (_a = linePreNode_1.return)) _a.call(linePreNode_1);
                     }
-                    finally { if (e_9) throw e_9.error; }
+                    finally { if (e_15) throw e_15.error; }
                 }
             });
             return preNodes_1;
@@ -3328,7 +3532,7 @@ var Meta2d = /** @class */ (function () {
             : deepClone(__spreadArray([parent], __read(components), false));
     };
     Meta2d.prototype.setVisible = function (pen, visible, render) {
-        var e_10, _a;
+        var e_16, _a;
         if (render === void 0) { render = true; }
         this.onSizeUpdate();
         this.setValue({ id: pen.id, visible: visible }, { render: false, doEvent: false });
@@ -3340,12 +3544,12 @@ var Meta2d = /** @class */ (function () {
                     child && this.setVisible(child, visible, false);
                 }
             }
-            catch (e_10_1) { e_10 = { error: e_10_1 }; }
+            catch (e_16_1) { e_16 = { error: e_16_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_10) throw e_10.error; }
+                finally { if (e_16) throw e_16.error; }
             }
         }
         render && this.render();