@meta2d/core 1.0.13 → 1.0.15

package/src/core.d.ts

@@ -14,6 +14,8 @@ export declare class Meta2d {
     canvas: Canvas;
     websocket: WebSocket;
     mqttClient: MqttClient;
+    websockets: WebSocket[];
+    mqttClients: MqttClient[];
     socketFn: (e: string, topic: string) => boolean;
     events: Record<number, (pen: Pen, e: Event) => void>;
     map: ViewMap;
@@ -224,7 +226,8 @@ export declare class Meta2d {
      * 宽度放大到屏幕尺寸，并滚动到最顶部
      *
      */
-    scrollView(viewPadding?: Padding): void;
+    scrollView(viewPadding?: Padding, pageMode?: boolean): void;
+    screenView(viewPadding?: Padding, WorH?: boolean): void;
     topView(paddingTop?: number): void;
     centerView(): void;
     /**

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;
@@ -307,13 +308,22 @@ 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;
     };
     Meta2d.prototype.setDatabyOptions = function (options) {
         if (options === void 0) { options = {}; }
-        var color = options.color, activeColor = options.activeColor, activeBackground = options.activeBackground, grid = options.grid, gridColor = options.gridColor, gridSize = options.gridSize, fromArrow = options.fromArrow, toArrow = options.toArrow, rule = options.rule, ruleColor = options.ruleColor;
+        var color = options.color, activeColor = options.activeColor, activeBackground = options.activeBackground, grid = options.grid, gridColor = options.gridColor, gridSize = options.gridSize, fromArrow = options.fromArrow, toArrow = options.toArrow, rule = options.rule, ruleColor = options.ruleColor, textColor = options.textColor;
         this.setRule({ rule: rule, ruleColor: ruleColor });
         this.setGrid({
             grid: grid,
@@ -321,6 +331,7 @@ var Meta2d = /** @class */ (function () {
             gridSize: gridSize,
         });
         this.store.data = Object.assign(this.store.data, {
+            textColor: textColor,
             color: color,
             activeColor: activeColor,
             activeBackground: activeBackground,
@@ -724,14 +735,12 @@ var Meta2d = /** @class */ (function () {
         this.finishDrawLine(true);
         this.canvas.drawingLineName = '';
         this.stopPencil();
-        if (lock === 0) {
-            //恢复可选状态
-            this.store.data.pens.forEach(function (pen) {
-                if (pen.externElement === true) {
-                    pen.onMove && pen.onMove(pen);
-                }
-            });
-        }
+        //恢复可选状态
+        this.store.data.pens.forEach(function (pen) {
+            if (pen.externElement === true) {
+                pen.onMove && pen.onMove(pen);
+            }
+        });
     };
     // end  - 当前鼠标位置，是否作为终点
     Meta2d.prototype.finishDrawLine = function (end) {
@@ -922,6 +931,7 @@ var Meta2d = /** @class */ (function () {
                     pen.animations.length > index) {
                     var animate = deepClone(pen.animations[index]);
                     delete animate.name;
+                    animate.currentAnimation = index;
                     if (!pen.type && animate.frames) {
                         animate.showDuration = _this.calcAnimateDuration(animate);
                     }
@@ -975,6 +985,7 @@ var Meta2d = /** @class */ (function () {
             pens = idOrTagOrPens;
         }
         pens.forEach(function (pen) {
+            pen.currentAnimation = undefined;
             pen.calculative.pause = undefined;
             pen.calculative.start = undefined;
             pen.calculative.duration = undefined;
@@ -1060,6 +1071,7 @@ var Meta2d = /** @class */ (function () {
      * @param showChild 组合后展示第几个孩子
      */
     Meta2d.prototype.combine = function (pens, showChild) {
+        var _this = this;
         if (pens === void 0) { pens = this.store.active; }
         if (!pens || !pens.length) {
             return;
@@ -1094,8 +1106,13 @@ var Meta2d = /** @class */ (function () {
         this.canvas.makePen(parent);
         // }
         var initParent = deepClone(parent);
+        var minIndex = Infinity;
         pens.forEach(function (pen) {
             var _a;
+            var index = _this.store.data.pens.findIndex(function (_pen) { return _pen.id === pen.id; });
+            if (index < minIndex) {
+                minIndex = index;
+            }
             if (pen === parent || pen.parentId === parent.id) {
                 return;
             }
@@ -1106,6 +1123,9 @@ var Meta2d = /** @class */ (function () {
             Object.assign(pen, childRect);
             pen.locked = (_a = pen.lockedOnCombine) !== null && _a !== void 0 ? _a : LockState.DisableMove;
         });
+        //将组合后的父节点置底
+        this.store.data.pens.splice(minIndex, 0, parent);
+        this.store.data.pens.pop();
         this.canvas.active([parent]);
         var step = 1;
         // if (!oneIsParent) {
@@ -1284,8 +1304,21 @@ var Meta2d = /** @class */ (function () {
         if (websocket) {
             this.store.data.websocket = websocket;
         }
-        if (this.store.data.websocket) {
-            this.websocket = new WebSocket(this.store.data.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) {
+            this.websocket = new WebSocket(this.store.data.websocket, this.store.data.websocketProtocols);
             this.websocket.onmessage = function (e) {
                 _this.socketCallback(e.data);
             };
@@ -1301,6 +1334,13 @@ 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;
@@ -1310,7 +1350,22 @@ var Meta2d = /** @class */ (function () {
             this.store.data.mqttTopics = params.mqttTopics;
             this.store.data.mqttOptions = params.mqttOptions;
         }
-        if (this.store.data.mqtt) {
+        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.mqttOptions.clientId &&
                 !this.store.data.mqttOptions.customClientId) {
                 this.store.data.mqttOptions.clientId = s8();
@@ -1327,6 +1382,10 @@ 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;
@@ -1795,8 +1854,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;
         //滚动状态下
@@ -1811,6 +1871,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; }