@meta2d/core 1.0.16 → 1.0.18

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';
@@ -756,7 +756,7 @@ var Meta2d = /** @class */ (function () {
         this.store.patchFlagsBackground = true;
     };
     Meta2d.prototype.setGrid = function (_a) {
-        var _b = _a === void 0 ? {} : _a, _c = _b.grid, grid = _c === void 0 ? this.store.data.grid : _c, _d = _b.gridColor, gridColor = _d === void 0 ? this.store.data.gridColor : _d, _e = _b.gridSize, gridSize = _e === void 0 ? this.store.data.gridSize : _e, _f = _b.gridRotate, gridRotate = _f === void 0 ? this.store.data.gridRotate : _f;
+        var _b = _a === void 0 ? {} : _a, _c = _b.grid, grid = _c === void 0 ? this.store.data.grid : _c, _e = _b.gridColor, gridColor = _e === void 0 ? this.store.data.gridColor : _e, _f = _b.gridSize, gridSize = _f === void 0 ? this.store.data.gridSize : _f, _g = _b.gridRotate, gridRotate = _g === void 0 ? this.store.data.gridRotate : _g;
         this.store.data.grid = grid;
         this.store.data.gridColor = gridColor;
         this.store.data.gridSize = gridSize;
@@ -764,13 +764,15 @@ var Meta2d = /** @class */ (function () {
         this.store.patchFlagsBackground = true;
     };
     Meta2d.prototype.setRule = function (_a) {
-        var _b = _a === void 0 ? {} : _a, _c = _b.rule, rule = _c === void 0 ? this.store.data.rule : _c, _d = _b.ruleColor, ruleColor = _d === void 0 ? this.store.data.ruleColor : _d;
+        var _b = _a === void 0 ? {} : _a, _c = _b.rule, rule = _c === void 0 ? this.store.data.rule : _c, _e = _b.ruleColor, ruleColor = _e === void 0 ? this.store.data.ruleColor : _e;
         this.store.data.rule = rule;
         this.store.data.ruleColor = ruleColor;
         this.store.patchFlagsTop = true;
     };
-    Meta2d.prototype.open = function (data) {
-        var e_1, _a, e_2, _b;
+    Meta2d.prototype.open = function (data, render) {
+        var e_1, _a, e_2, _b, e_3, _c;
+        var _this = this;
+        if (render === void 0) { render = true; }
         this.clear(false);
         if (data) {
             this.setBackgroundImage(data.bkImage);
@@ -778,8 +780,8 @@ var Meta2d = /** @class */ (function () {
             this.store.data.pens = [];
             try {
                 // 第一遍赋初值
-                for (var _c = __values(data.pens), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var pen = _d.value;
+                for (var _e = __values(data.pens), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var pen = _f.value;
                     if (!pen.id) {
                         pen.id = s8();
                     }
@@ -790,24 +792,27 @@ var Meta2d = /** @class */ (function () {
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
             try {
-                for (var _e = __values(data.pens), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var pen = _f.value;
+                for (var _g = __values(data.pens), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var pen = _h.value;
                     this.canvas.makePen(pen);
                 }
             }
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
         }
+        if (!render) {
+            this.canvas.opening = true;
+        }
         this.initBindDatas();
         this.render();
         this.listenSocket();
@@ -815,6 +820,23 @@ var Meta2d = /** @class */ (function () {
         this.startAnimate();
         this.startVideo();
         this.doInitJS();
+        if (this.store.data.iconUrls) {
+            try {
+                for (var _j = __values(this.store.data.iconUrls), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var item = _k.value;
+                    loadCss(item, function () {
+                        _this.render();
+                    });
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
         this.store.emitter.emit('opened');
         if (this.canvas.scroll && this.canvas.scroll.isShow) {
             this.canvas.scroll.init();
@@ -978,21 +1000,21 @@ var Meta2d = /** @class */ (function () {
      * @param render 是否重绘
      */
     Meta2d.prototype.clear = function (render) {
-        var e_3, _a;
+        var e_4, _a;
         var _b;
         if (render === void 0) { render = true; }
         try {
-            for (var _c = __values(this.store.data.pens), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var pen = _d.value;
+            for (var _c = __values(this.store.data.pens), _e = _c.next(); !_e.done; _e = _c.next()) {
+                var pen = _e.value;
                 (_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_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         clearStore(this.store);
         this.hideInput();
@@ -1449,7 +1471,7 @@ var Meta2d = /** @class */ (function () {
             var socketFn = void 0;
             var socketCbJs = this.store.data.socketCbJs;
             if (socketCbJs) {
-                socketFn = new Function('e', 'topic', 'context', socketCbJs);
+                socketFn = new Function('e', 'context', socketCbJs);
             }
             if (!socketFn) {
                 return false;
@@ -1471,7 +1493,10 @@ var Meta2d = /** @class */ (function () {
         if (this.store.data.websocket) {
             this.websocket = new WebSocket(this.store.data.websocket, this.store.data.websocketProtocols);
             this.websocket.onmessage = function (e) {
-                _this.socketCallback(e.data);
+                _this.socketCallback(e.data, {
+                    type: 'websocket',
+                    url: _this.store.data.websocket,
+                });
             };
             this.websocket.onclose = function () {
                 console.info('Canvas websocket closed and reconneting...');
@@ -1501,7 +1526,11 @@ var Meta2d = /** @class */ (function () {
             }
             this.mqttClient = mqtt.connect(this.store.data.mqtt, this.store.data.mqttOptions);
             this.mqttClient.on('message', function (topic, message) {
-                _this.socketCallback(message.toString(), topic);
+                _this.socketCallback(message.toString(), {
+                    topic: topic,
+                    type: 'mqtt',
+                    url: _this.store.data.mqtt,
+                });
             });
             if (this.store.data.mqttTopics) {
                 this.mqttClient.subscribe(this.store.data.mqttTopics.split(','));
@@ -1532,7 +1561,7 @@ var Meta2d = /** @class */ (function () {
                                     return [4 /*yield*/, res.text()];
                                 case 2:
                                     data = _a.sent();
-                                    this.socketCallback(data);
+                                    this.socketCallback(data, { type: 'http', url: item.http });
                                     _a.label = 3;
                                 case 3: return [2 /*return*/];
                             }
@@ -1557,7 +1586,7 @@ var Meta2d = /** @class */ (function () {
                                 return [4 /*yield*/, res.text()];
                             case 2:
                                 data = _a.sent();
-                                this.socketCallback(data);
+                                this.socketCallback(data, { type: 'http', url: http_1 });
                                 _a.label = 3;
                             case 3: return [2 /*return*/];
                         }
@@ -1642,7 +1671,11 @@ var Meta2d = /** @class */ (function () {
                     }
                     _this.mqttClients[mqttIndex_1] = mqtt.connect(net.url, net.options);
                     _this.mqttClients[mqttIndex_1].on('message', function (topic, message) {
-                        _this.socketCallback(message.toString(), topic);
+                        _this.socketCallback(message.toString(), {
+                            topic: topic,
+                            type: 'mqtt',
+                            url: net.url,
+                        });
                     });
                     if (net.topics) {
                         _this.mqttClients[mqttIndex_1].subscribe(net.topics.split(','));
@@ -1652,7 +1685,7 @@ var Meta2d = /** @class */ (function () {
                 else if (net.type === 'websocket') {
                     _this.websockets[websocketIndex_1] = new WebSocket(net.url, net.protocols);
                     _this.websockets[websocketIndex_1].onmessage = function (e) {
-                        _this.socketCallback(e.data);
+                        _this.socketCallback(e.data, { type: 'websocket', url: net.url });
                     };
                     websocketIndex_1 += 1;
                 }
@@ -1663,9 +1696,90 @@ var Meta2d = /** @class */ (function () {
             this.onNetworkConnect(https_1);
         }
     };
+    Meta2d.prototype.randomString = function (e) {
+        e = e || 32;
+        var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678', a = t.length, n = '';
+        for (var i = 0; i < e; i++) {
+            n += t.charAt(Math.floor(Math.random() * a));
+        }
+        return n;
+    };
+    Meta2d.prototype.penMock = function (pen) {
+        var _this = this;
+        var _a;
+        if (pen.realTimes) {
+            var _d_1 = {};
+            pen.realTimes.forEach(function (realTime) {
+                if (!realTime.binds || !realTime.binds.length) {
+                    if (realTime.type === 'number') {
+                        if (realTime.value && realTime.value.indexOf(',') !== -1) {
+                            var arr = realTime.value.split(',');
+                            var rai = Math.floor(Math.random() * arr.length);
+                            _d_1[realTime.key] = parseFloat(arr[rai]);
+                        }
+                        else if (realTime.value && realTime.value.indexOf('-') !== -1) {
+                            var arr = realTime.value.split('-');
+                            var max = parseFloat(arr[1]);
+                            var min = parseFloat(arr[0]);
+                            _d_1[realTime.key] = Math.random() * (max - min) + min;
+                        }
+                        else {
+                            _d_1[realTime.key] = parseFloat(realTime.value);
+                        }
+                    }
+                    else if (realTime.type === 'bool') {
+                        if (typeof realTime.value === 'boolean') {
+                            _d_1[realTime.key] = realTime.value;
+                        }
+                        else if ('true' === realTime.value) {
+                            _d_1[realTime.key] = true;
+                        }
+                        else if ('false' === realTime.value) {
+                            _d_1[realTime.key] = false;
+                        }
+                        else {
+                            _d_1[realTime.key] = Math.random() < 0.5;
+                        }
+                    }
+                    else if (realTime.type === 'object' || realTime.type === 'array') {
+                        _d_1[realTime.key] = realTime.value;
+                    }
+                    else {
+                        //if (realTime.type === 'string')
+                        if (realTime.value &&
+                            realTime.value.startsWith('{') &&
+                            realTime.value.endsWith('}')) {
+                            var str = realTime.value.substring(1, realTime.value.length - 1);
+                            var arr = str.split(',');
+                            var rai = Math.floor(Math.random() * arr.length);
+                            _d_1[realTime.key] = arr[rai];
+                        }
+                        else if (realTime.value &&
+                            realTime.value.startsWith('[') &&
+                            realTime.value.endsWith(']')) {
+                            var len = parseInt(realTime.value.substring(1, realTime.value.length - 1));
+                            _d_1[realTime.key] = _this.randomString(len);
+                        }
+                        else {
+                            _d_1[realTime.key] = realTime.value;
+                        }
+                    }
+                }
+            });
+            if (Object.keys(_d_1).length) {
+                this.canvas.updateValue(pen, _d_1);
+                this.store.emitter.emit('valueUpdate', pen);
+                (_a = pen.onValue) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
+            }
+        }
+    };
     Meta2d.prototype.onNetworkConnect = function (https) {
         var _this = this;
-        this.networkTimer = setInterval(function () {
+        this.updateTimer = setInterval(function () {
+            //模拟数据
+            _this.store.data.pens.forEach(function (pen) {
+                _this.penMock(pen);
+            });
             https.forEach(function (item) { return __awaiter(_this, void 0, void 0, function () {
                 var res, data;
                 return __generator(this, function (_a) {
@@ -1683,14 +1797,13 @@ var Meta2d = /** @class */ (function () {
                             return [4 /*yield*/, res.text()];
                         case 2:
                             data = _a.sent();
-                            this.socketCallback(data);
+                            this.socketCallback(data, { type: 'http', url: item.url });
                             _a.label = 3;
                         case 3: return [2 /*return*/];
                     }
                 });
             }); });
-            //模拟数据
-            _this.store.data.mockData && _this.store.data.mockData();
+            _this.render();
         }, this.store.data.networkInterval || 1000);
     };
     Meta2d.prototype.closeNetwork = function () {
@@ -1704,14 +1817,19 @@ var Meta2d = /** @class */ (function () {
             });
         this.mqttClients = undefined;
         this.websockets = undefined;
-        clearInterval(this.networkTimer);
-        this.networkTimer = undefined;
+        clearInterval(this.updateTimer);
+        this.updateTimer = undefined;
     };
-    Meta2d.prototype.socketCallback = function (message, topic) {
+    Meta2d.prototype.socketCallback = function (message, context) {
         var _this = this;
-        if (topic === void 0) { topic = ''; }
-        this.store.emitter.emit('socket', { message: message, topic: topic });
-        if (this.socketFn && !this.socketFn(message, topic, { meta2d: this })) {
+        this.store.emitter.emit('socket', { message: message, context: context });
+        if (this.socketFn &&
+            !this.socketFn(message, {
+                meta2d: this,
+                type: context.type,
+                topic: context.topic,
+                url: context.url,
+            })) {
             return;
         }
         var data;
@@ -1747,7 +1865,7 @@ var Meta2d = /** @class */ (function () {
     // 绑定变量方式更新组件数据
     Meta2d.prototype.setDatas = function (datas, _a) {
         var _this = this;
-        var _b = _a === void 0 ? {} : _a, _c = _b.render, render = _c === void 0 ? true : _c, _d = _b.doEvent, doEvent = _d === void 0 ? true : _d, history = _b.history;
+        var _b = _a === void 0 ? {} : _a, _c = _b.render, render = _c === void 0 ? true : _c, _e = _b.doEvent, doEvent = _e === void 0 ? true : _e, history = _b.history;
         // 把{dataId: string; value: any}转成setValue格式数据
         var penValues = new Map();
         datas.forEach(function (v) {
@@ -1803,7 +1921,7 @@ var Meta2d = /** @class */ (function () {
     };
     Meta2d.prototype.setValue = function (data, _a) {
         var _this = this;
-        var _b = _a === void 0 ? {} : _a, _c = _b.render, render = _c === void 0 ? true : _c, _d = _b.doEvent, doEvent = _d === void 0 ? true : _d, history = _b.history;
+        var _b = _a === void 0 ? {} : _a, _c = _b.render, render = _c === void 0 ? true : _c, _e = _b.doEvent, doEvent = _e === void 0 ? true : _e, history = _b.history;
         var pens = [];
         if (data.id) {
             if (data.id === this.store.data.id) {
@@ -2020,12 +2138,33 @@ var Meta2d = /** @class */ (function () {
      * @param padding 上右下左的内边距
      */
     Meta2d.prototype.downloadPng = function (name, padding) {
-        var a = document.createElement('a');
-        a.setAttribute('download', name || 'le5le.meta2d.png');
-        a.setAttribute('href', this.toPng(padding, undefined, true));
-        var evt = document.createEvent('MouseEvents');
-        evt.initEvent('click', true, true);
-        a.dispatchEvent(evt);
+        var e_5, _a;
+        var _this = this;
+        var _b;
+        try {
+            for (var _c = __values(this.store.data.pens), _e = _c.next(); !_e.done; _e = _c.next()) {
+                var pen = _e.value;
+                if (pen.calculative.img) {
+                    //重新生成绘制图片
+                    (_b = pen.onRenderPenRaw) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
+                }
+            }
+        }
+        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_5) throw e_5.error; }
+        }
+        setTimeout(function () {
+            var a = document.createElement('a');
+            a.setAttribute('download', name || 'le5le.meta2d.png');
+            a.setAttribute('href', _this.toPng(padding, undefined, true));
+            var evt = document.createEvent('MouseEvents');
+            evt.initEvent('click', true, true);
+            a.dispatchEvent(evt);
+        });
     };
     Meta2d.prototype.getRect = function (pens) {
         if (pens === void 0) { pens = this.store.data.pens; }
@@ -2346,7 +2485,7 @@ var Meta2d = /** @class */ (function () {
         this.formatPainter();
     };
     Meta2d.prototype.alignNodes = function (align, pens, rect) {
-        var e_4, _a;
+        var e_6, _a;
         if (pens === void 0) { pens = this.store.data.pens; }
         !rect && (rect = this.getPenRect(this.getRect(pens)));
         var initPens = deepClone(pens); // 原 pens ，深拷贝一下
@@ -2356,12 +2495,12 @@ var Meta2d = /** @class */ (function () {
                 this.alignPen(align, item, rect);
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (pens_1_1 && !pens_1_1.done && (_a = pens_1.return)) _a.call(pens_1);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         this.render();
         this.pushHistory({
@@ -2450,7 +2589,7 @@ var Meta2d = /** @class */ (function () {
      * @param distance 总的宽 or 高
      */
     Meta2d.prototype.spaceBetweenByDirection = function (direction, pens, distance) {
-        var e_5, _a;
+        var e_7, _a;
         var _this = this;
         if (pens === void 0) { pens = this.store.data.pens; }
         !distance && (distance = this.getPenRect(this.getRect(pens))[direction]);
@@ -2484,12 +2623,12 @@ var Meta2d = /** @class */ (function () {
                 this.setValue(__assign({ id: pen.id }, penRect), { render: false, doEvent: false });
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (pens_2_1 && !pens_2_1.done && (_a = pens_2.return)) _a.call(pens_2);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         this.render();
         this.pushHistory({
@@ -2603,22 +2742,52 @@ var Meta2d = /** @class */ (function () {
     };
     /**
      * 将该画笔置顶，即放到数组最后，最后绘制即在顶部
-     * @param pen pen 置顶的画笔
+     * @param pens pen 置顶的画笔
      */
-    Meta2d.prototype.top = function (pen) {
+    Meta2d.prototype.top = function (pens) {
+        var e_8, _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]);
+                }
+            });
+            //image
+            if (pen.image && pen.name !== 'gif') {
+                this_1.setValue({ id: pen.id, isBottom: false }, { render: false, doEvent: false, history: false });
             }
-        });
+            //dom
+            if (pen.externElement || pen.name === 'gif') {
+                pen.calculative.canvas.maxZindex += 1;
+                this_1.setValue({ id: pen.id, zIndex: pen.calculative.canvas.maxZindex }, { render: false, doEvent: false, history: false });
+            }
+        };
+        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_8_1) { e_8 = { error: e_8_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_8) throw e_8.error; }
+        }
     };
     /**
      * 若本次改变的画笔存在图片，并且在上层 or 下层，需要擦除上层 or 下层
@@ -2632,23 +2801,51 @@ 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_9, _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]);
+                }
+            };
+            // 从后往前，保证 allPens 顺序不变
+            for (var i = allPens.length - 1; i >= 0; i--) {
+                _loop_5(i);
+            }
+            //image
+            if (pen.image && pen.name !== 'gif') {
+                this_2.setValue({ id: pen.id, isBottom: true }, { render: false, doEvent: false, history: false });
+            }
+            //dom
+            if (pen.externElement || pen.name === 'gif') {
+                this_2.setValue({ id: pen.id, zIndex: 0 }, { render: false, doEvent: false, history: false });
             }
         };
-        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_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; }
         }
     };
     /**
@@ -2657,7 +2854,7 @@ var Meta2d = /** @class */ (function () {
      * @param pen 画笔
      */
     Meta2d.prototype.upByArea = function (pen) {
-        var _a, e_6, _b;
+        var _a, e_10, _b;
         var _this = this;
         var index = this.store.data.pens.findIndex(function (p) { return p.id === pen.id; });
         if (index === -1) {
@@ -2693,111 +2890,174 @@ 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_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (allPens_1_1 && !allPens_1_1.done && (_b = allPens_1.return)) _b.call(allPens_1);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         this.initImageCanvas([pen]);
     };
     /**
      * 该画笔上移，即把该画笔在数组中的位置向后移动一个
-     * @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_11, _a;
+        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) {
+                //组合图元
+                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;
+                });
+                _pens.splice.apply(_pens, __spreadArray([lastIndex_1 + 1, 0], __read(preMovePens), false));
+            }
+            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]);
+                }
+            }
+            //image
+            if (pen.image && pen.name !== 'gif') {
+                this_4.setValue({ id: pen.id, isBottom: false }, { render: false, doEvent: false, history: false });
+            }
+            //dom
+            if (pen.externElement || pen.name === 'gif') {
+                var zIndex = pen.calculative.zIndex === undefined ? 5 : pen.calculative.zIndex + 1;
+                this_4.setValue({ id: pen.id, zIndex: zIndex }, { render: false, doEvent: false, history: false });
+            }
+        };
+        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_11_1) { e_11 = { error: e_11_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
+            finally { if (e_11) throw e_11.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_12, _a;
+        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) {
+                //组合图元
+                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;
+                });
+                _pens.splice.apply(_pens, __spreadArray([firstIndex_1 - 1, 0], __read(preMovePens), false));
+            }
+            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));
+            }
+            //image
+            if (pen.image && pen.name !== 'gif') {
+                this_5.setValue({ id: pen.id, isBottom: true }, { render: false, doEvent: false, history: false });
+            }
+            //dom
+            if (pen.externElement || pen.name === 'gif') {
+                var zIndex = pen.calculative.zIndex === undefined ? 3 : pen.calculative.zIndex - 1;
+                if (zIndex < 0) {
+                    zIndex = 0;
+                }
+                this_5.setValue({ id: pen.id, zIndex: zIndex }, { render: false, doEvent: false, history: false });
+            }
+        };
+        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_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; }
         }
     };
     Meta2d.prototype.setLayer = function (pen, toIndex, pens) {
@@ -2872,9 +3132,9 @@ var Meta2d = /** @class */ (function () {
             var nextNodes_1 = [];
             // 2. 遍历出线的 nextNode
             lines.forEach(function (line) {
-                var e_7, _a;
+                var e_13, _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);
@@ -2882,15 +3142,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_7_1) { e_7 = { error: e_7_1 }; }
+                catch (e_13_1) { e_13 = { error: e_13_1 }; }
                 finally {
                     try {
                         if (lineNextNode_1_1 && !lineNextNode_1_1.done && (_a = lineNextNode_1.return)) _a.call(lineNextNode_1);
                     }
-                    finally { if (e_7) throw e_7.error; }
+                    finally { if (e_13) throw e_13.error; }
                 }
             });
             return nextNodes_1;
@@ -2913,9 +3173,9 @@ var Meta2d = /** @class */ (function () {
             var preNodes_1 = [];
             // 2. 遍历入线的 preNode
             lines.forEach(function (line) {
-                var e_8, _a;
+                var e_14, _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);
@@ -2923,15 +3183,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_8_1) { e_8 = { error: e_8_1 }; }
+                catch (e_14_1) { e_14 = { error: e_14_1 }; }
                 finally {
                     try {
                         if (linePreNode_1_1 && !linePreNode_1_1.done && (_a = linePreNode_1.return)) _a.call(linePreNode_1);
                     }
-                    finally { if (e_8) throw e_8.error; }
+                    finally { if (e_14) throw e_14.error; }
                 }
             });
             return preNodes_1;
@@ -3207,7 +3467,7 @@ var Meta2d = /** @class */ (function () {
             : deepClone(__spreadArray([parent], __read(components), false));
     };
     Meta2d.prototype.setVisible = function (pen, visible, render) {
-        var e_9, _a;
+        var e_15, _a;
         if (render === void 0) { render = true; }
         this.onSizeUpdate();
         this.setValue({ id: pen.id, visible: visible }, { render: false, doEvent: false });
@@ -3219,12 +3479,12 @@ var Meta2d = /** @class */ (function () {
                     child && this.setVisible(child, visible, false);
                 }
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_9) throw e_9.error; }
+                finally { if (e_15) throw e_15.error; }
             }
         }
         render && this.render();