@meta2d/core 1.0.15 → 1.0.17

package/src/core.js

@@ -170,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);
         };
@@ -376,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;
@@ -425,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') {
@@ -450,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) {
@@ -496,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;
@@ -521,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();
@@ -609,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;
@@ -617,13 +764,14 @@ 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) {
+    Meta2d.prototype.open = function (data, render) {
         var e_1, _a, e_2, _b;
+        if (render === void 0) { render = true; }
         this.clear(false);
         if (data) {
             this.setBackgroundImage(data.bkImage);
@@ -631,8 +779,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 _c = __values(data.pens), _e = _c.next(); !_e.done; _e = _c.next()) {
+                    var pen = _e.value;
                     if (!pen.id) {
                         pen.id = s8();
                     }
@@ -643,24 +791,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 (_e && !_e.done && (_a = _c.return)) _a.call(_c);
                 }
                 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 _f = __values(data.pens), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var pen = _g.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 (_g && !_g.done && (_b = _f.return)) _b.call(_f);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
         }
+        if (!render) {
+            this.canvas.opening = true;
+        }
         this.initBindDatas();
         this.render();
         this.listenSocket();
@@ -712,8 +863,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);
@@ -835,15 +986,15 @@ var Meta2d = /** @class */ (function () {
         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 }; }
         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; }
         }
@@ -903,7 +1054,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;
@@ -926,9 +1077,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;
@@ -1223,6 +1387,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 需要删除的画笔们
@@ -1285,7 +1453,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', 'context', socketCbJs);
             }
             if (!socketFn) {
                 return false;
@@ -1304,23 +1472,13 @@ var Meta2d = /** @class */ (function () {
         if (websocket) {
             this.store.data.websocket = websocket;
         }
-        if (this.store.data.websockets) {
-            this.websockets = [];
-            this.store.data.websockets.forEach(function (websocket, index) {
-                _this.websockets[index] = new WebSocket(websocket.url, websocket.protocols);
-                _this.websockets[index].onmessage = function (e) {
-                    _this.socketCallback(e.data);
-                };
-                _this.websockets[index].onclose = function () {
-                    console.info('Canvas websocket closed and reconneting...');
-                    _this.connectWebsocket();
-                };
-            });
-        }
-        else if (this.store.data.websocket) {
+        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...');
@@ -1334,13 +1492,6 @@ var Meta2d = /** @class */ (function () {
             this.websocket.close();
             this.websocket = undefined;
         }
-        if (this.websockets) {
-            this.websockets.forEach(function (websocket) {
-                websocket.onclose = undefined;
-                websocket.close();
-                websocket = undefined;
-            });
-        }
     };
     Meta2d.prototype.connectMqtt = function (params) {
         var _this = this;
@@ -1350,29 +1501,18 @@ var Meta2d = /** @class */ (function () {
             this.store.data.mqttTopics = params.mqttTopics;
             this.store.data.mqttOptions = params.mqttOptions;
         }
-        if (this.store.data.mqtts) {
-            this.mqttClients = [];
-            this.store.data.mqtts.forEach(function (_mqtt, index) {
-                if (_mqtt.options.clientId && !_mqtt.options.customClientId) {
-                    _mqtt.options.clientId = s8();
-                }
-                _this.mqttClients[index] = mqtt.connect(_mqtt.url, _mqtt.options);
-                _this.mqttClients[index].on('message', function (topic, message) {
-                    _this.socketCallback(message.toString(), topic);
-                });
-                if (_mqtt.topics) {
-                    _this.mqttClients[index].subscribe(_mqtt.topics.split(','));
-                }
-            });
-        }
-        else if (this.store.data.mqtt) {
+        if (this.store.data.mqtt) {
             if (this.store.data.mqttOptions.clientId &&
                 !this.store.data.mqttOptions.customClientId) {
                 this.store.data.mqttOptions.clientId = s8();
             }
             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(','));
@@ -1382,10 +1522,6 @@ var Meta2d = /** @class */ (function () {
     Meta2d.prototype.closeMqtt = function () {
         var _a;
         (_a = this.mqttClient) === null || _a === void 0 ? void 0 : _a.end();
-        this.mqttClients &&
-            this.mqttClients.forEach(function (mqttClient) {
-                mqttClient === null || mqttClient === void 0 ? void 0 : mqttClient.end();
-            });
     };
     Meta2d.prototype.connectHttp = function () {
         var _this = this;
@@ -1407,7 +1543,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*/];
                             }
@@ -1432,7 +1568,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*/];
                         }
@@ -1500,11 +1636,182 @@ var Meta2d = /** @class */ (function () {
                 _httpTimer = undefined;
             });
     };
-    Meta2d.prototype.socketCallback = function (message, topic) {
+    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: topic,
+                            type: 'mqtt',
+                            url: net.url,
+                        });
+                    });
+                    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, { type: 'websocket', url: net.url });
+                    };
+                    websocketIndex_1 += 1;
+                }
+                else {
+                    https_1.push(net);
+                }
+            });
+            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;
-        if (topic === void 0) { topic = ''; }
-        this.store.emitter.emit('socket', { message: message, topic: topic });
-        if (this.socketFn && !this.socketFn(message, topic)) {
+        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) {
+                    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, { type: 'http', url: item.url });
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); });
+            _this.render();
+        }, 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.updateTimer);
+        this.updateTimer = undefined;
+    };
+    Meta2d.prototype.socketCallback = function (message, context) {
+        var _this = 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;
@@ -1540,7 +1847,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) {
@@ -1596,7 +1903,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) {
@@ -1688,6 +1995,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)];
@@ -1751,12 +2120,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_4, _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_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_4) throw e_4.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; }
@@ -1949,7 +2339,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++) {
@@ -1971,6 +2361,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 画笔们
@@ -2048,7 +2467,7 @@ var Meta2d = /** @class */ (function () {
         this.formatPainter();
     };
     Meta2d.prototype.alignNodes = function (align, pens, rect) {
-        var e_4, _a;
+        var e_5, _a;
         if (pens === void 0) { pens = this.store.data.pens; }
         !rect && (rect = this.getPenRect(this.getRect(pens)));
         var initPens = deepClone(pens); // 原 pens ，深拷贝一下
@@ -2058,12 +2477,12 @@ var Meta2d = /** @class */ (function () {
                 this.alignPen(align, item, rect);
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_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_5) throw e_5.error; }
         }
         this.render();
         this.pushHistory({
@@ -2093,6 +2512,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 左对齐，右对齐，上对齐，下对齐，居中对齐
@@ -2131,7 +2571,7 @@ var Meta2d = /** @class */ (function () {
      * @param distance 总的宽 or 高
      */
     Meta2d.prototype.spaceBetweenByDirection = function (direction, pens, distance) {
-        var e_5, _a;
+        var e_6, _a;
         var _this = this;
         if (pens === void 0) { pens = this.store.data.pens; }
         !distance && (distance = this.getPenRect(this.getRect(pens))[direction]);
@@ -2165,12 +2605,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_6_1) { e_6 = { error: e_6_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_6) throw e_6.error; }
         }
         this.render();
         this.pushHistory({
@@ -2285,11 +2725,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); });
@@ -2314,8 +2753,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) {
@@ -2339,7 +2778,7 @@ var Meta2d = /** @class */ (function () {
      * @param pen 画笔
      */
     Meta2d.prototype.upByArea = function (pen) {
-        var _a, e_6, _b;
+        var _a, e_7, _b;
         var _this = this;
         var index = this.store.data.pens.findIndex(function (p) { return p.id === pen.id; });
         if (index === -1) {
@@ -2389,39 +2828,97 @@ var Meta2d = /** @class */ (function () {
                 _loop_4(pen_2);
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_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_7) throw e_7.error; }
         }
         this.initImageCanvas([pen]);
     };
     /**
      * 该画笔上移，即把该画笔在数组中的位置向后移动一个
-     * @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) {
@@ -2496,9 +2993,9 @@ var Meta2d = /** @class */ (function () {
             var nextNodes_1 = [];
             // 2. 遍历出线的 nextNode
             lines.forEach(function (line) {
-                var e_7, _a;
+                var e_8, _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);
@@ -2506,15 +3003,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_5(node);
+                        _loop_7(node);
                     }
                 }
-                catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                catch (e_8_1) { e_8 = { error: e_8_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_8) throw e_8.error; }
                 }
             });
             return nextNodes_1;
@@ -2537,9 +3034,9 @@ var Meta2d = /** @class */ (function () {
             var preNodes_1 = [];
             // 2. 遍历入线的 preNode
             lines.forEach(function (line) {
-                var e_8, _a;
+                var e_9, _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);
@@ -2547,15 +3044,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_6(node);
+                        _loop_8(node);
                     }
                 }
-                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                catch (e_9_1) { e_9 = { error: e_9_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_9) throw e_9.error; }
                 }
             });
             return preNodes_1;
@@ -2831,7 +3328,7 @@ var Meta2d = /** @class */ (function () {
             : deepClone(__spreadArray([parent], __read(components), false));
     };
     Meta2d.prototype.setVisible = function (pen, visible, render) {
-        var e_9, _a;
+        var e_10, _a;
         if (render === void 0) { render = true; }
         this.onSizeUpdate();
         this.setValue({ id: pen.id, visible: visible }, { render: false, doEvent: false });
@@ -2843,12 +3340,12 @@ var Meta2d = /** @class */ (function () {
                     child && this.setVisible(child, visible, false);
                 }
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            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_9) throw e_9.error; }
+                finally { if (e_10) throw e_10.error; }
             }
         }
         render && this.render();