@meta2d/core 1.0.14 → 1.0.16

package/src/core.js

@@ -94,6 +94,7 @@ import { ViewMap } from './map';
 import * as mqtt from 'mqtt/dist/mqtt.min.js';
 import pkg from '../package.json';
 import { lockedError } from './utils/error';
+import { Scroll } from './scroll';
 var Meta2d = /** @class */ (function () {
     function Meta2d(parent, opts) {
         var _this = this;
@@ -169,69 +170,100 @@ var Meta2d = /** @class */ (function () {
             }
         };
         this.doEvent = function (pen, eventName) {
-            var _a;
+            var _a, _b;
             if (!pen) {
                 return;
             }
             (_a = pen.events) === null || _a === void 0 ? void 0 : _a.forEach(function (event) {
                 var _a;
-                if (_this.events[event.action] && event.name === eventName) {
-                    var can = !((_a = event.where) === null || _a === void 0 ? void 0 : _a.type);
-                    if (event.where) {
-                        var _b = event.where, fn = _b.fn, fnJs = _b.fnJs, comparison = _b.comparison, key = _b.key, value = _b.value;
-                        if (fn) {
-                            can = fn(pen);
+                if (event.actions && event.actions.length) {
+                    event.actions.forEach(function (action) {
+                        if (_this.events[action.action] && event.name === eventName) {
+                            _this.events[action.action](pen, action);
                         }
-                        else if (fnJs) {
-                            try {
-                                event.where.fn = new Function('pen', fnJs);
-                            }
-                            catch (err) {
-                                console.error('Error: make function:', err);
+                    });
+                }
+                else {
+                    if (_this.events[event.action] && event.name === eventName) {
+                        var can = !((_a = event.where) === null || _a === void 0 ? void 0 : _a.type);
+                        if (event.where) {
+                            var _b = event.where, fn = _b.fn, fnJs = _b.fnJs, comparison = _b.comparison, key = _b.key, value = _b.value;
+                            if (fn) {
+                                can = fn(pen, { meta2d: _this });
                             }
-                            if (event.where.fn) {
-                                can = event.where.fn(pen);
+                            else if (fnJs) {
+                                try {
+                                    event.where.fn = new Function('pen', 'context', fnJs);
+                                }
+                                catch (err) {
+                                    console.error('Error: make function:', err);
+                                }
+                                if (event.where.fn) {
+                                    can = event.where.fn(pen, { meta2d: _this });
+                                }
                             }
-                        }
-                        else {
-                            switch (comparison) {
-                                case '>':
-                                    can = pen[key] > +value;
-                                    break;
-                                case '>=':
-                                    can = pen[key] >= +value;
-                                    break;
-                                case '<':
-                                    can = pen[key] < +value;
-                                    break;
-                                case '<=':
-                                    can = pen[key] <= +value;
-                                    break;
-                                case '=':
-                                case '==':
-                                    can = pen[key] == value;
-                                    break;
-                                case '!=':
-                                    can = pen[key] != value;
-                                    break;
-                                case '[)':
-                                    can = valueInRange(+pen[key], value);
-                                    break;
-                                case '![)':
-                                    can = !valueInRange(+pen[key], value);
-                                    break;
-                                case '[]':
-                                    can = valueInArray(+pen[key], value);
-                                    break;
-                                case '![]':
-                                    can = !valueInArray(+pen[key], value);
-                                    break;
+                            else {
+                                switch (comparison) {
+                                    case '>':
+                                        can = pen[key] > +value;
+                                        break;
+                                    case '>=':
+                                        can = pen[key] >= +value;
+                                        break;
+                                    case '<':
+                                        can = pen[key] < +value;
+                                        break;
+                                    case '<=':
+                                        can = pen[key] <= +value;
+                                        break;
+                                    case '=':
+                                    case '==':
+                                        can = pen[key] == value;
+                                        break;
+                                    case '!=':
+                                        can = pen[key] != value;
+                                        break;
+                                    case '[)':
+                                        can = valueInRange(+pen[key], value);
+                                        break;
+                                    case '![)':
+                                        can = !valueInRange(+pen[key], value);
+                                        break;
+                                    case '[]':
+                                        can = valueInArray(+pen[key], value);
+                                        break;
+                                    case '![]':
+                                        can = !valueInArray(+pen[key], value);
+                                        break;
+                                }
                             }
                         }
+                        can && _this.events[event.action](pen, event);
                     }
-                    can && _this.events[event.action](pen, event);
                 }
             });
+            (_b = pen.realTimes) === null || _b === void 0 ? void 0 : _b.forEach(function (realTime) {
+                var _a;
+                (_a = realTime.triggers) === null || _a === void 0 ? void 0 : _a.forEach(function (trigger) {
+                    var _a;
+                    var flag = false;
+                    if (trigger.conditionType === 'and') {
+                        flag = trigger.conditions.every(function (condition) {
+                            return _this.judgeCondition(pen, realTime.key, condition);
+                        });
+                    }
+                    else if (trigger.conditionType === 'or') {
+                        flag = trigger.conditions.some(function (condition) {
+                            return _this.judgeCondition(pen, realTime.key, condition);
+                        });
+                    }
+                    if (flag) {
+                        (_a = trigger.actions) === null || _a === void 0 ? void 0 : _a.forEach(function (event) {
+                            _this.events[event.action](pen, event);
+                        });
+                    }
+                });
+            });
             // 事件冒泡，子执行完，父执行
             _this.doEvent(_this.store.pens[pen.parentId], eventName);
         };
@@ -307,6 +339,15 @@ var Meta2d = /** @class */ (function () {
     Meta2d.prototype.setOptions = function (opts) {
         if (opts === void 0) { opts = {}; }
         this.store.options = Object.assign(this.store.options, opts);
+        if (this.canvas && opts.scroll !== undefined) {
+            if (opts.scroll) {
+                !this.canvas.scroll && (this.canvas.scroll = new Scroll(this.canvas));
+                this.canvas.scroll.show();
+            }
+            else {
+                this.canvas.scroll.hide();
+            }
+        }
     };
     Meta2d.prototype.getOptions = function () {
         return this.store.options;
@@ -366,6 +407,10 @@ var Meta2d = /** @class */ (function () {
             console.warn('[meta2d] SetProps value is not an object');
         };
         this.events[EventAction.StartAnimate] = function (pen, e) {
+            if (e.targetType && e.params) {
+                _this.startAnimate(e.value || [pen], e.params);
+                return;
+            }
             if (!e.value || typeof e.value === 'string') {
                 _this.startAnimate(e.value || [pen]);
                 return;
@@ -415,13 +460,13 @@ var Meta2d = /** @class */ (function () {
                         throw new Error('[meta2d] Function value must be string');
                     }
                     var fnJs = e.value;
-                    e.fn = new Function('pen', 'params', fnJs);
+                    e.fn = new Function('pen', 'params', 'context', fnJs);
                 }
                 catch (err) {
                     console.error('[meta2d]: Error on make a function:', err);
                 }
             }
-            (_a = e.fn) === null || _a === void 0 ? void 0 : _a.call(e, pen, e.params);
+            (_a = e.fn) === null || _a === void 0 ? void 0 : _a.call(e, pen, e.params, { meta2d: _this, eventName: e.name });
         };
         this.events[EventAction.GlobalFn] = function (pen, e) {
             if (typeof e.value !== 'string') {
@@ -440,6 +485,7 @@ var Meta2d = /** @class */ (function () {
             _this.store.emitter.emit(e.value, {
                 pen: pen,
                 params: e.params,
+                eventName: e.name,
             });
         };
         this.events[EventAction.SendPropData] = function (pen, e) {
@@ -486,6 +532,51 @@ var Meta2d = /** @class */ (function () {
             }
             console.warn('[meta2d] SendVarData value is not an object');
         };
+        this.events[EventAction.Navigator] = function (pen, e) {
+            if (e.value && typeof e.value === 'string') {
+                _this.navigatorTo(e.value);
+            }
+        };
+        this.events[EventAction.Dialog] = function (pen, e) {
+            if (e.params &&
+                typeof e.params === 'string' &&
+                e.value &&
+                typeof e.value === 'string') {
+                _this.canvas.dialog.show(e.value, e.params);
+            }
+        };
+        this.events[EventAction.SendData] = function (pen, e) {
+            var value = deepClone(e.value);
+            if (value && typeof value === 'object') {
+                if (e.targetType === 'action') {
+                    var _pen = e.params ? _this.findOne(e.params) : pen;
+                    for (var key in value) {
+                        if (!value[key]) {
+                            value[key] = _pen[key];
+                        }
+                    }
+                    value.id = _pen.id;
+                    _this.sendDataToNetWork(value, e.network);
+                    return;
+                }
+            }
+        };
+    };
+    Meta2d.prototype.navigatorTo = function (id) {
+        if (!id) {
+            return;
+        }
+        var href = window.location.href;
+        var arr = href.split('id=');
+        if (arr.length > 1) {
+            var idx = arr[1].indexOf('&');
+            if (idx === -1) {
+                window.location.href = arr[0] + 'id=' + id;
+            }
+            else {
+                window.location.href = arr[0] + 'id=' + id + arr[1].slice(idx + 1);
+            }
+        }
     };
     Meta2d.prototype.doSendDataEvent = function (value, topics) {
         var _this = this;
@@ -511,6 +602,72 @@ var Meta2d = /** @class */ (function () {
         }
         this.store.emitter.emit('sendData', data);
     };
+    Meta2d.prototype.sendDataToNetWork = function (value, network) {
+        return __awaiter(this, void 0, void 0, function () {
+            var res, clients_1, mqttClient_1, websockets, websocket_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!network.url) {
+                            return [2 /*return*/];
+                        }
+                        if (!(network.type === 'http')) return [3 /*break*/, 2];
+                        return [4 /*yield*/, fetch(network.url, {
+                                headers: network.headers,
+                                method: network.method,
+                                body: value,
+                            })];
+                    case 1:
+                        res = _a.sent();
+                        if (res.ok) {
+                            console.info('http消息发送成功');
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        if (network.type === 'mqtt') {
+                            clients_1 = this.mqttClients.filter(function (client) { return client.options.href === network.url; });
+                            if (clients_1 && clients_1.length) {
+                                if (clients_1[0].connected) {
+                                    network.topics.split(',').forEach(function (topic) {
+                                        clients_1[0].publish(topic, value);
+                                    });
+                                }
+                            }
+                            else {
+                                mqttClient_1 = mqtt.connect(network.url, network.options);
+                                mqttClient_1.on('connect', function () {
+                                    console.info('mqtt连接成功');
+                                    network.topics.split(',').forEach(function (topic) {
+                                        mqttClient_1.publish(topic, value);
+                                        mqttClient_1 === null || mqttClient_1 === void 0 ? void 0 : mqttClient_1.end();
+                                    });
+                                });
+                            }
+                        }
+                        else if (network.type === 'websocket') {
+                            websockets = this.websockets.filter(function (socket) { return socket.url === network.url; });
+                            if (websockets && websockets.length) {
+                                if (websockets[0].readyState === 1) {
+                                    websockets[0].send(value);
+                                }
+                            }
+                            else {
+                                websocket_1 = new WebSocket(network.url, network.protocols);
+                                websocket_1.onopen = function () {
+                                    console.info('websocket连接成功');
+                                    websocket_1.send(value);
+                                    setTimeout(function () {
+                                        websocket_1.close();
+                                    }, 100);
+                                };
+                            }
+                        }
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
     Meta2d.prototype.resize = function (width, height) {
         this.canvas.resize(width, height);
         this.render();
@@ -702,8 +859,8 @@ var Meta2d = /** @class */ (function () {
         var initJs = this.store.data.initJs;
         if (initJs && initJs.trim()) {
             try {
-                var fn = new Function(initJs);
-                fn();
+                var fn = new Function('context', initJs);
+                fn({ meta2d: this });
             }
             catch (e) {
                 console.warn('initJs error', e);
@@ -893,7 +1050,7 @@ var Meta2d = /** @class */ (function () {
         if (render === void 0) { render = true; }
         this.canvas.setPenRect(pen, rect, render);
     };
-    Meta2d.prototype.startAnimate = function (idOrTagOrPens, index) {
+    Meta2d.prototype.startAnimate = function (idOrTagOrPens, params) {
         var _this = this;
         this.stopAnimate(idOrTagOrPens);
         var pens;
@@ -916,9 +1073,22 @@ var Meta2d = /** @class */ (function () {
                 pen.calculative.frameEnd += d;
             }
             else {
-                if (index !== undefined &&
-                    pen.animations &&
-                    pen.animations.length > index) {
+                if (params !== undefined && pen.animations) {
+                    var index = -1;
+                    if (typeof params === 'string') {
+                        index = pen.animations.findIndex(function (animation) { return animation.name === params; });
+                        if (index === -1) {
+                            return;
+                        }
+                    }
+                    else if (typeof params === 'number') {
+                        if (pen.animations.length > params) {
+                            index = params;
+                        }
+                        else {
+                            return;
+                        }
+                    }
                     var animate = deepClone(pen.animations[index]);
                     delete animate.name;
                     animate.currentAnimation = index;
@@ -1213,6 +1383,10 @@ var Meta2d = /** @class */ (function () {
     Meta2d.prototype.inactive = function () {
         this.canvas.inactive();
     };
+    Meta2d.prototype.activeAll = function () {
+        this.canvas.active(this.store.data.pens.filter(function (pen) { return !pen.parentId && pen.locked !== LockState.Disable; }));
+        this.render();
+    };
     /**
      * 删除画笔
      * @param pens 需要删除的画笔们
@@ -1275,7 +1449,7 @@ var Meta2d = /** @class */ (function () {
             var socketFn = void 0;
             var socketCbJs = this.store.data.socketCbJs;
             if (socketCbJs) {
-                socketFn = new Function('e', 'topic', socketCbJs);
+                socketFn = new Function('e', 'topic', 'context', socketCbJs);
             }
             if (!socketFn) {
                 return false;
@@ -1295,7 +1469,7 @@ var Meta2d = /** @class */ (function () {
             this.store.data.websocket = websocket;
         }
         if (this.store.data.websocket) {
-            this.websocket = new WebSocket(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);
             };
@@ -1451,11 +1625,93 @@ var Meta2d = /** @class */ (function () {
                 _httpTimer = undefined;
             });
     };
+    Meta2d.prototype.connectNetwork = function () {
+        var _this = this;
+        this.closeNetwork();
+        var networks = this.store.data.networks;
+        if (networks) {
+            var mqttIndex_1 = 0;
+            this.mqttClients = [];
+            var websocketIndex_1 = 0;
+            this.websockets = [];
+            var https_1 = [];
+            networks.forEach(function (net) {
+                if (net.type === 'mqtt') {
+                    if (net.options.clientId && !net.options.customClientId) {
+                        net.options.clientId = s8();
+                    }
+                    _this.mqttClients[mqttIndex_1] = mqtt.connect(net.url, net.options);
+                    _this.mqttClients[mqttIndex_1].on('message', function (topic, message) {
+                        _this.socketCallback(message.toString(), topic);
+                    });
+                    if (net.topics) {
+                        _this.mqttClients[mqttIndex_1].subscribe(net.topics.split(','));
+                    }
+                    mqttIndex_1 += 1;
+                }
+                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);
+                    };
+                    websocketIndex_1 += 1;
+                }
+                else {
+                    https_1.push(net);
+                }
+            });
+            this.onNetworkConnect(https_1);
+        }
+    };
+    Meta2d.prototype.onNetworkConnect = function (https) {
+        var _this = this;
+        this.networkTimer = setInterval(function () {
+            https.forEach(function (item) { return __awaiter(_this, void 0, void 0, function () {
+                var res, data;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!item.url) return [3 /*break*/, 3];
+                            return [4 /*yield*/, fetch(item.url, {
+                                    headers: item.headers,
+                                    method: item.method,
+                                    body: item.body,
+                                })];
+                        case 1:
+                            res = _a.sent();
+                            if (!res.ok) return [3 /*break*/, 3];
+                            return [4 /*yield*/, res.text()];
+                        case 2:
+                            data = _a.sent();
+                            this.socketCallback(data);
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); });
+            //模拟数据
+            _this.store.data.mockData && _this.store.data.mockData();
+        }, this.store.data.networkInterval || 1000);
+    };
+    Meta2d.prototype.closeNetwork = function () {
+        this.mqttClients &&
+            this.mqttClients.forEach(function (mqttClient) {
+                mqttClient.end();
+            });
+        this.websockets &&
+            this.websockets.forEach(function (websocket) {
+                websocket.close();
+            });
+        this.mqttClients = undefined;
+        this.websockets = undefined;
+        clearInterval(this.networkTimer);
+        this.networkTimer = undefined;
+    };
     Meta2d.prototype.socketCallback = function (message, topic) {
         var _this = this;
         if (topic === void 0) { topic = ''; }
         this.store.emitter.emit('socket', { message: message, topic: topic });
-        if (this.socketFn && !this.socketFn(message, topic)) {
+        if (this.socketFn && !this.socketFn(message, topic, { meta2d: this })) {
             return;
         }
         var data;
@@ -1639,6 +1895,68 @@ var Meta2d = /** @class */ (function () {
     Meta2d.prototype.clearDropdownList = function () {
         this.canvas.clearDropdownList();
     };
+    Meta2d.prototype.judgeCondition = function (pen, key, condition) {
+        var type = condition.type, target = condition.target, fnJs = condition.fnJs, fn = condition.fn, operator = condition.operator, valueType = condition.valueType;
+        var can = false;
+        if (type === 'fn') {
+            //方法
+            if (fn) {
+                can = fn(pen, { meta2d: this });
+            }
+            else if (fnJs) {
+                try {
+                    condition.fn = new Function('pen', 'context', fnJs);
+                }
+                catch (err) {
+                    console.error('Error: make function:', err);
+                }
+                if (condition.fn) {
+                    can = condition.fn(pen, { meta2d: this });
+                }
+            }
+        }
+        else {
+            //TODO boolean类型 数字类型
+            var value = condition.value;
+            if (valueType === 'prop') {
+                value = this.store.pens[target][condition.value];
+            }
+            switch (operator) {
+                case '>':
+                    can = pen[key] > +value;
+                    break;
+                case '>=':
+                    can = pen[key] >= +value;
+                    break;
+                case '<':
+                    can = pen[key] < +value;
+                    break;
+                case '<=':
+                    can = pen[key] <= +value;
+                    break;
+                case '=':
+                case '==':
+                    can = pen[key] == value;
+                    break;
+                case '!=':
+                    can = pen[key] != value;
+                    break;
+                case '[)':
+                    can = valueInRange(+pen[key], value);
+                    break;
+                case '![)':
+                    can = !valueInRange(+pen[key], value);
+                    break;
+                case '[]':
+                    can = valueInArray(+pen[key], value);
+                    break;
+                case '![]':
+                    can = !valueInArray(+pen[key], value);
+                    break;
+            }
+        }
+        return can;
+    };
     Meta2d.prototype.pushChildren = function (parent, children) {
         var _this = this;
         var initUpdatePens = [deepClone(parent, true)];
@@ -1805,8 +2123,9 @@ var Meta2d = /** @class */ (function () {
      * 宽度放大到屏幕尺寸，并滚动到最顶部
      *
      */
-    Meta2d.prototype.scrollView = function (viewPadding) {
+    Meta2d.prototype.scrollView = function (viewPadding, pageMode) {
         if (viewPadding === void 0) { viewPadding = 10; }
+        if (pageMode === void 0) { pageMode = false; }
         if (!this.hasView())
             return;
         //滚动状态下
@@ -1821,6 +2140,28 @@ var Meta2d = /** @class */ (function () {
         var ratio = (width - padding[1] - padding[3]) / rect.width;
         this.scale(ratio * this.store.data.scale);
         this.topView(padding[0]);
+        if (pageMode) {
+            this.canvas.scroll.changeMode();
+        }
+    };
+    Meta2d.prototype.screenView = function (viewPadding, WorH) {
+        if (viewPadding === void 0) { viewPadding = 10; }
+        if (WorH === void 0) { WorH = true; }
+        if (!this.hasView())
+            return;
+        var canvas = this.canvas.canvas;
+        var width = canvas.offsetWidth, height = canvas.offsetHeight;
+        this.resize(width, height);
+        var padding = formatPadding(viewPadding);
+        var rect = this.getRect();
+        //默认宽度充满
+        var ratio = (width - padding[1] - padding[3]) / rect.width;
+        if (!WorH) {
+            ratio = (height - padding[0] - padding[2]) / rect.height;
+        }
+        this.scale(ratio * this.store.data.scale);
+        //height充满时是居中
+        this.topView(padding[0]);
     };
     Meta2d.prototype.topView = function (paddingTop) {
         if (paddingTop === void 0) { paddingTop = 10; }
@@ -1877,7 +2218,7 @@ var Meta2d = /** @class */ (function () {
     Meta2d.prototype.beSameByFirst = function (pens, attribute) {
         if (pens === void 0) { pens = this.store.data.pens; }
         var initPens = deepClone(pens); // 原 pens ，深拷贝一下
-        // 1. 得到第一个画笔的 宽高 字体大小
+        // 1. 得到第一个画笔的 宽高
         var firstPen = pens[0];
         var _a = this.getPenRect(firstPen), width = _a.width, height = _a.height;
         for (var i = 1; i < pens.length; i++) {
@@ -1899,6 +2240,35 @@ var Meta2d = /** @class */ (function () {
             pens: pens,
         });
     };
+    /**
+     * 大小相同
+     * @param pens 画笔们
+     */
+    Meta2d.prototype.beSameByLast = function (pens, attribute) {
+        if (pens === void 0) { pens = this.store.data.pens; }
+        var initPens = deepClone(pens); // 原 pens ，深拷贝一下
+        // 1. 得到最后一个画笔的 宽高
+        var lastPen = pens[pens.length - 1];
+        var _a = this.getPenRect(lastPen), width = _a.width, height = _a.height;
+        for (var i = 0; i < pens.length - 1; i++) {
+            var pen = pens[i];
+            if (attribute === 'width') {
+                this.setValue({ id: pen.id, width: width }, { render: false, doEvent: false });
+            }
+            else if (attribute === 'height') {
+                this.setValue({ id: pen.id, height: height }, { render: false, doEvent: false });
+            }
+            else {
+                this.setValue({ id: pen.id, width: width, height: height }, { render: false, doEvent: false });
+            }
+        }
+        this.render();
+        this.pushHistory({
+            type: EditType.Update,
+            initPens: initPens,
+            pens: pens,
+        });
+    };
     /**
      * 格式刷（样式相同，大小无需一致。）
      * @param pens 画笔们
@@ -2021,6 +2391,27 @@ var Meta2d = /** @class */ (function () {
             pens: pens,
         });
     };
+    /**
+     * 对齐画笔，基于最后选中的画笔
+     * @param align 左对齐，右对齐，上对齐，下对齐，居中对齐
+     * @param pens
+     */
+    Meta2d.prototype.alignNodesByLast = function (align, pens) {
+        if (pens === void 0) { pens = this.store.data.pens; }
+        var initPens = deepClone(pens); // 原 pens ，深拷贝一下
+        var lastPen = pens[pens.length - 1];
+        var rect = this.getPenRect(lastPen);
+        for (var i = 0; i < pens.length - 1; i++) {
+            var pen = pens[i];
+            this.alignPen(align, pen, rect);
+        }
+        this.render();
+        this.pushHistory({
+            type: EditType.Update,
+            initPens: initPens,
+            pens: pens,
+        });
+    };
     /**
      * 将画笔参照 rect 进行 align 对齐
      * @param align 左对齐，右对齐，上对齐，下对齐，居中对齐
@@ -2213,11 +2604,10 @@ var Meta2d = /** @class */ (function () {
     /**
      * 将该画笔置顶，即放到数组最后，最后绘制即在顶部
      * @param pen pen 置顶的画笔
-     * @param pens 画笔们，注意 pen 必须在该数组内才有效
      */
-    Meta2d.prototype.top = function (pen, pens) {
+    Meta2d.prototype.top = function (pen) {
         var _this = this;
-        if (pens === void 0) { pens = this.store.data.pens; }
+        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); });
@@ -2242,8 +2632,8 @@ var Meta2d = /** @class */ (function () {
      * 该画笔置底，即放到数组最前，最后绘制即在底部
      * @param pens 画笔们，注意 pen 必须在该数组内才有效
      */
-    Meta2d.prototype.bottom = function (pen, pens) {
-        if (pens === void 0) { pens = this.store.data.pens; }
+    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) {
@@ -2328,28 +2718,86 @@ var Meta2d = /** @class */ (function () {
     };
     /**
      * 该画笔上移，即把该画笔在数组中的位置向后移动一个
-     * @param pens 画笔们，注意 pen 必须在该数组内才有效
+     * @param pen 画笔
      */
-    Meta2d.prototype.up = function (pen, pens) {
-        if (pens === void 0) { pens = this.store.data.pens; }
-        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]);
+    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);
+                }
+            };
+            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));
+        }
+        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]);
+            }
         }
     };
     /**
      * 该画笔下移，即把该画笔在该数组中的位置前移一个
-     * @param pens 画笔们，注意 pen 必须在该数组内才有效
+     * @param pen 画笔
      */
-    Meta2d.prototype.down = function (pen, pens) {
-        if (pens === void 0) { pens = this.store.data.pens; }
-        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]);
+    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);
+                }
+            };
+            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;
+                }
+                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.initImageCanvas([pen]);
+            }
         }
     };
     Meta2d.prototype.setLayer = function (pen, toIndex, pens) {
@@ -2426,7 +2874,7 @@ var Meta2d = /** @class */ (function () {
             lines.forEach(function (line) {
                 var e_7, _a;
                 var lineNextNode = _this.nextNode(line);
-                var _loop_5 = function (node) {
+                var _loop_7 = function (node) {
                     var have = nextNodes_1.find(function (next) { return next.id === node.id; });
                     // 3. 不重复的才加进去
                     !have && nextNodes_1.push(node);
@@ -2434,7 +2882,7 @@ 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_5(node);
+                        _loop_7(node);
                     }
                 }
                 catch (e_7_1) { e_7 = { error: e_7_1 }; }
@@ -2467,7 +2915,7 @@ var Meta2d = /** @class */ (function () {
             lines.forEach(function (line) {
                 var e_8, _a;
                 var linePreNode = _this.previousNode(line);
-                var _loop_6 = function (node) {
+                var _loop_8 = function (node) {
                     var have = preNodes_1.find(function (pre) { return pre.id === node.id; });
                     // 3. 不重复的才加进去
                     !have && preNodes_1.push(node);
@@ -2475,7 +2923,7 @@ 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_6(node);
+                        _loop_8(node);
                     }
                 }
                 catch (e_8_1) { e_8 = { error: e_8_1 }; }