@meta2d/core 1.0.52 → 1.0.54

package/src/core.js

@@ -83,7 +83,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { commonAnchors, commonPens, cube } from './diagrams';
 import { Canvas } from './canvas';
-import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, isShowChild, CanvasLayer, validationPlugin, setLifeCycleFunc, getAllFollowers } from './pen';
+import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, isShowChild, CanvasLayer, validationPlugin, setLifeCycleFunc, getAllFollowers, isInteraction } from './pen';
 import { rotatePoint } from './point';
 import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
 import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
@@ -112,6 +112,8 @@ var Meta2d = /** @class */ (function () {
         this.register = register;
         this.registerCanvasDraw = registerCanvasDraw;
         this.registerAnchors = registerAnchors;
+        this.websocketTimes = 0;
+        this.mqttTimes = 0;
         this.httpTimerList = [];
         this.updateTimerList = [];
         this.onEvent = function (eventName, e) {
@@ -184,6 +186,12 @@ var Meta2d = /** @class */ (function () {
                     }
                     _this.navigatorTo(e.params);
                     break;
+                case 'input':
+                    _this.store.data.locked && e && (!e.disabled) && _this.doEvent(e, eventName);
+                    break;
+                case 'change':
+                    _this.store.data.locked && e && (!e.disabled) && _this.doEvent(e, eventName);
+                    break;
             }
             if (_this.store.messageEvents[eventName]) {
                 _this.store.messageEvents[eventName].forEach(function (item) {
@@ -425,7 +433,7 @@ var Meta2d = /** @class */ (function () {
                                                     return _this.judgeCondition(pen, condition.key, condition);
                                                 });
                                             }
-                                            else if (trigger.conditionType === 'or') {
+                                            else if (state.conditionType === 'or') {
                                                 flag = state.conditions.some(function (condition) {
                                                     return _this.judgeCondition(pen, condition.key, condition);
                                                 });
@@ -612,6 +620,9 @@ var Meta2d = /** @class */ (function () {
         }
         if (opts.width !== undefined || opts.height !== undefined) {
             this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
+            if (this.canvas && this.canvas.canvasTemplate.canvas.style.backgroundImage) {
+                this.canvas.canvasTemplate.canvas.style.backgroundImage = '';
+            }
         }
         this.store.options = Object.assign(this.store.options, opts);
         if (this.canvas && opts.scroll !== undefined) {
@@ -1177,7 +1188,7 @@ var Meta2d = /** @class */ (function () {
         this.store.patchFlagsTop = true;
     };
     Meta2d.prototype.open = function (data, render) {
-        var e_3, _a, e_4, _b, e_5, _c, e_6, _e;
+        var e_3, _a, e_4, _b, e_5, _c;
         var _this = this;
         if (render === void 0) { render = true; }
         this.clear(false, data === null || data === void 0 ? void 0 : data.template);
@@ -1188,8 +1199,8 @@ var Meta2d = /** @class */ (function () {
             this.store.data.pens = [];
             try {
                 // 第一遍赋初值
-                for (var _f = __values(data.pens), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var pen = _g.value;
+                for (var _e = __values(data.pens), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var pen = _f.value;
                     if (!pen.id) {
                         pen.id = s8();
                     }
@@ -1200,36 +1211,27 @@ var Meta2d = /** @class */ (function () {
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
             try {
-                for (var _h = __values(data.pens), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var pen = _j.value;
+                for (var _g = __values(data.pens), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var pen = _h.value;
                     this.canvas.makePen(pen);
                 }
             }
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
                 }
                 finally { if (e_4) throw e_4.error; }
             }
-            try {
-                for (var _k = __values(data.pens), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var pen = _l.value;
-                    this.canvas.updateLines(pen);
-                }
-            }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
-            finally {
-                try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
-                }
-                finally { if (e_5) throw e_5.error; }
-            }
+            //首次计算连线bug
+            // for (const pen of data.pens) {
+            //   this.canvas.updateLines(pen);
+            // }
         }
         this.canvas.patchFlagsLines.forEach(function (pen) {
             if (pen.type) {
@@ -1256,19 +1258,19 @@ var Meta2d = /** @class */ (function () {
         this.doInitJS();
         if (this.store.data.iconUrls) {
             try {
-                for (var _m = __values(this.store.data.iconUrls), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var item = _o.value;
+                for (var _j = __values(this.store.data.iconUrls), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var item = _k.value;
                     loadCss(item, function () {
                         _this.render();
                     });
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (_o && !_o.done && (_e = _m.return)) _e.call(_m);
+                    if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_5) throw e_5.error; }
             }
         }
         this.canvas.autoPolylineFlag = false;
@@ -1412,8 +1414,10 @@ var Meta2d = /** @class */ (function () {
         this.stopPencil();
         //恢复可选状态
         this.store.data.pens.forEach(function (pen) {
+            var _a;
             if (pen.externElement === true) {
-                pen.onMove && pen.onMove(pen);
+                // pen.onMove && pen.onMove(pen);
+                ((_a = pen.calculative.singleton) === null || _a === void 0 ? void 0 : _a.div) && setElemPosition(pen, pen.calculative.singleton.div);
             }
         });
         if (lock > 0) {
@@ -1509,7 +1513,7 @@ var Meta2d = /** @class */ (function () {
      * @param render 是否重绘
      */
     Meta2d.prototype.clear = function (render, template) {
-        var e_7, _a;
+        var e_6, _a;
         var _b;
         if (render === void 0) { render = true; }
         try {
@@ -1518,12 +1522,12 @@ var Meta2d = /** @class */ (function () {
                 (_b = pen.onDestroy) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         clearStore(this.store, template);
         this.hideInput();
@@ -1829,7 +1833,7 @@ var Meta2d = /** @class */ (function () {
             if (index < minIndex) {
                 minIndex = index;
             }
-            if (pen === parent || pen.parentId === parent.id) {
+            if (pen === parent || pen.parentId === parent.id || pen.id === parent.id) {
                 return;
             }
             // pen 来自于 store.active ，不存在有 parentId 的情况
@@ -1838,6 +1842,7 @@ var Meta2d = /** @class */ (function () {
             var childRect = calcRelativeRect(pen.calculative.worldRect, rect);
             Object.assign(pen, childRect);
             pen.locked = (_a = pen.lockedOnCombine) !== null && _a !== void 0 ? _a : LockState.DisableMove;
+            pen.locked = (pen.interaction || isInteraction.includes(pen.name)) ? 0 : pen.locked;
         });
         //将组合后的父节点置底
         this.store.data.pens.splice(minIndex, 0, parent);
@@ -2063,7 +2068,18 @@ var Meta2d = /** @class */ (function () {
                     url: _this.store.data.websocket,
                 });
             };
+            this.websocket.onerror = function (error) {
+                _this.store.emitter.emit('error', { type: 'websocket', error: error });
+            };
             this.websocket.onclose = function () {
+                if (_this.store.options.reconnetTimes) {
+                    _this.websocketTimes++;
+                    if (_this.websocketTimes >= _this.store.options.reconnetTimes) {
+                        _this.websocketTimes = 0;
+                        _this.closeWebsocket();
+                        return;
+                    }
+                }
                 console.info('Canvas websocket closed and reconneting...');
                 _this.connectWebsocket();
             };
@@ -2089,16 +2105,43 @@ var Meta2d = /** @class */ (function () {
                 !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: topic,
-                    type: 'mqtt',
-                    url: _this.store.data.mqtt,
+            var mqttOptions = __assign({}, this.store.data.mqttOptions);
+            // 如果没有username/password或为空字符串则删除username/password
+            if (!mqttOptions.username) {
+                delete mqttOptions.username;
+            }
+            if (!mqttOptions.password) {
+                delete mqttOptions.password;
+            }
+            var username = mqttOptions.username, password = mqttOptions.password;
+            // username 和 password 必须同时存在或者同时不存在才去建立mqtt连接
+            if ((username && password) || (!username && !password)) {
+                this.mqttClient = mqtt.connect(this.store.data.mqtt, mqttOptions);
+                this.mqttClient.on('message', function (topic, message) {
+                    _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(','));
+                this.mqttClient.on('error', function (error) {
+                    _this.store.emitter.emit('error', { type: 'mqtt', error: error });
+                });
+                this.mqttClient.on('close', function () {
+                    if (_this.store.options.reconnetTimes) {
+                        _this.mqttTimes++;
+                        if (_this.mqttTimes >= _this.store.options.reconnetTimes) {
+                            _this.mqttTimes = 0;
+                            _this.closeMqtt();
+                        }
+                    }
+                });
+                if (this.store.data.mqttTopics) {
+                    this.mqttClient.subscribe(this.store.data.mqttTopics.split(','));
+                }
+            }
+            else {
+                console.warn('缺少用户名或密码');
             }
         }
     };
@@ -2121,10 +2164,19 @@ var Meta2d = /** @class */ (function () {
             }
             https.forEach(function (item, index) {
                 if (item.http) {
+                    item.times = 0;
                     _this.httpTimerList[index] = setInterval(function () { return __awaiter(_this, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             // 默认每一秒请求一次
                             this.oldRequestHttp(item);
+                            if (this.store.options.reconnetTimes) {
+                                item.times++;
+                                if (item.times >= this.store.options.reconnetTimes) {
+                                    item.times = 0;
+                                    clearInterval(this.httpTimerList[index]);
+                                    this.httpTimerList[index] = undefined;
+                                }
+                            }
                             return [2 /*return*/];
                         });
                     }); }, item.httpTimeInterval || 1000);
@@ -2163,7 +2215,7 @@ var Meta2d = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         req = deepClone(_req);
-                        if (!req.http) return [3 /*break*/, 3];
+                        if (!req.http) return [3 /*break*/, 4];
                         return [4 /*yield*/, fetch(req.http, {
                                 headers: req.httpHeaders,
                                 method: req.method || 'GET',
@@ -2176,8 +2228,11 @@ var Meta2d = /** @class */ (function () {
                     case 2:
                         data = _a.sent();
                         this.socketCallback(data, { type: 'http', url: req.http });
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
+                        return [3 /*break*/, 4];
+                    case 3:
+                        this.store.emitter.emit('error', { type: 'http', error: res });
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
                 }
             });
         });
@@ -2254,9 +2309,11 @@ var Meta2d = /** @class */ (function () {
             networks.forEach(function (net) {
                 if (net.type === 'subscribe') {
                     if (net.protocol === 'mqtt') {
+                        net.index = mqttIndex_1;
                         if (net.options.clientId && !net.options.customClientId) {
                             net.options.clientId = s8();
                         }
+                        net.times = 0;
                         _this.mqttClients[mqttIndex_1] = mqtt.connect(net.url, net.options);
                         _this.mqttClients[mqttIndex_1].on('message', function (topic, message) {
                             _this.socketCallback(message.toString(), {
@@ -2265,16 +2322,48 @@ var Meta2d = /** @class */ (function () {
                                 url: net.url,
                             });
                         });
+                        _this.mqttClients[mqttIndex_1].on('error', function (error) {
+                            _this.store.emitter.emit('error', { type: 'mqtt', error: error });
+                        });
+                        _this.mqttClients[mqttIndex_1].on('close', function () {
+                            var _a;
+                            if (_this.store.options.reconnetTimes) {
+                                net.times++;
+                                if (net.times >= _this.store.options.reconnetTimes) {
+                                    net.times = 0;
+                                    _this.mqttClients && ((_a = _this.mqttClients[net.index]) === null || _a === void 0 ? void 0 : _a.end());
+                                }
+                            }
+                        });
                         if (net.topics) {
                             _this.mqttClients[mqttIndex_1].subscribe(net.topics.split(','));
                         }
                         mqttIndex_1 += 1;
                     }
                     else if (net.protocol === 'websocket') {
-                        _this.websockets[websocketIndex_1] = new WebSocket(net.url, net.protocols || undefined);
-                        _this.websockets[websocketIndex_1].onmessage = function (e) {
-                            _this.socketCallback(e.data, { type: 'websocket', url: net.url });
-                        };
+                        net.index = websocketIndex_1;
+                        _this.connectNetWebSocket(net);
+                        // this.websockets[websocketIndex] = new WebSocket(
+                        //   net.url,
+                        //   net.protocols || undefined
+                        // );
+                        // this.websockets[websocketIndex].onmessage = (e) => {
+                        //   this.socketCallback(e.data, { type: 'websocket', url: net.url });
+                        // };
+                        // this.websockets[websocketIndex].onerror = (error) => {
+                        //   this.store.emitter.emit('error', { type: 'websocket', error });
+                        // };
+                        // this.websockets[websocketIndex].onclose = () => {
+                        //   if (this.store.options.reconnetTimes) {
+                        //     net.times++;
+                        //     if (net.times >= this.store.options.reconnetTimes) {
+                        //       net.times = 0;
+                        //       this.websockets[net.index]?.close();
+                        //       return;
+                        //     }
+                        //   }
+                        // console.info('Canvas websocket closed and reconneting...');
+                        // };
                         websocketIndex_1 += 1;
                     }
                     else if (net.protocol === 'http') {
@@ -2291,6 +2380,39 @@ var Meta2d = /** @class */ (function () {
         }
         this.onNetworkConnect(https);
     };
+    Meta2d.prototype.connectNetWebSocket = function (net) {
+        var _this = this;
+        var _a;
+        if (this.websockets[net.index]) {
+            this.websockets[net.index].onclose = undefined;
+            (_a = this.websockets[net.index]) === null || _a === void 0 ? void 0 : _a.close();
+            this.websockets[net.index] = undefined;
+        }
+        this.websockets[net.index] = new WebSocket(net.url, net.protocols || undefined);
+        this.websockets[net.index].onmessage = function (e) {
+            _this.socketCallback(e.data, { type: 'websocket', url: net.url });
+        };
+        this.websockets[net.index].onerror = function (error) {
+            _this.store.emitter.emit('error', { type: 'websocket', error: error });
+        };
+        this.websockets[net.index].onclose = function () {
+            var _a;
+            if (_this.store.options.reconnetTimes) {
+                net.times++;
+                if (net.times >= _this.store.options.reconnetTimes) {
+                    net.times = 0;
+                    _this.websockets[net.index].onclose = undefined;
+                    (_a = _this.websockets[net.index]) === null || _a === void 0 ? void 0 : _a.close();
+                    _this.websockets[net.index] = undefined;
+                    return;
+                }
+            }
+            setTimeout(function () {
+                console.info('Canvas websocket closed and reconneting...');
+                _this.connectNetWebSocket(net);
+            }, 2000);
+        };
+    };
     Meta2d.prototype.randomString = function (e) {
         e = e || 32;
         var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678', a = t.length, n = '';
@@ -2470,8 +2592,9 @@ var Meta2d = /** @class */ (function () {
             if (Object.keys(_d_1).length) {
                 var data = pen.onBeforeValue ? pen.onBeforeValue(pen, _d_1) : _d_1;
                 this.canvas.updateValue(pen, data);
-                this.store.emitter.emit('valueUpdate', pen);
+                // this.store.emitter.emit('valueUpdate', pen);
                 (_a = pen.onValue) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
+                this.store.emitter.emit('valueUpdate', pen);
             }
         }
     };
@@ -2542,9 +2665,18 @@ var Meta2d = /** @class */ (function () {
         //   }, this.store.data.networkInterval || 1000);
         // }
         https.forEach(function (_item, index) {
+            _item.times = 0;
             _this.updateTimerList[index] = setInterval(function () { return __awaiter(_this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     this.requestHttp(_item);
+                    if (this.store.options.reconnetTimes) {
+                        _item.times++;
+                        if (_item.times >= this.store.options.reconnetTimes) {
+                            _item.times = 0;
+                            clearInterval(this.updateTimerList[index]);
+                            this.updateTimerList[index] = undefined;
+                        }
+                    }
                     return [2 /*return*/];
                 });
             }); }, _item.interval || 1000);
@@ -2557,7 +2689,7 @@ var Meta2d = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         req = deepClone(_req);
-                        if (!req.url) return [3 /*break*/, 3];
+                        if (!req.url) return [3 /*break*/, 4];
                         if (typeof req.headers === 'object') {
                             for (i in req.headers) {
                                 if (typeof req.headers[i] === 'string') {
@@ -2590,8 +2722,11 @@ var Meta2d = /** @class */ (function () {
                     case 2:
                         data = _a.sent();
                         this.socketCallback(data, { type: 'http', url: req.url });
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
+                        return [3 /*break*/, 4];
+                    case 3:
+                        this.store.emitter.emit('error', { type: 'http', error: res });
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
                 }
             });
         });
@@ -2603,7 +2738,11 @@ var Meta2d = /** @class */ (function () {
             });
         this.websockets &&
             this.websockets.forEach(function (websocket) {
-                websocket.close();
+                if (websocket) {
+                    websocket.onclose = undefined;
+                    websocket.close();
+                    websocket = undefined;
+                }
             });
         this.mqttClients = undefined;
         this.websockets = undefined;
@@ -3118,7 +3257,7 @@ var Meta2d = /** @class */ (function () {
      * @param padding 上右下左的内边距
      */
     Meta2d.prototype.downloadPng = function (name, padding, maxWidth) {
-        var e_8, _a;
+        var e_7, _a;
         var _this = this;
         var _b;
         try {
@@ -3130,12 +3269,12 @@ var Meta2d = /** @class */ (function () {
                 }
             }
         }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_8) throw e_8.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         setTimeout(function () {
             var a = document.createElement('a');
@@ -3147,7 +3286,7 @@ var Meta2d = /** @class */ (function () {
         }, 1000);
     };
     Meta2d.prototype.downloadSvg = function () {
-        var e_9, _a;
+        var e_8, _a;
         if (!window.C2S) {
             console.error('请先加载乐吾乐官网下的canvas2svg.js', 'https://assets.le5lecdn.com/2d/canvas2svg.js');
             throw new Error('请先加载乐吾乐官网下的canvas2svg.js');
@@ -3166,12 +3305,12 @@ var Meta2d = /** @class */ (function () {
                 renderPenRaw(ctx, pen, rect, true);
             }
         }
-        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_9) throw e_9.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         var mySerializedSVG = ctx.getSerializedSvg();
         if (this.store.data.background) {
@@ -3219,6 +3358,7 @@ var Meta2d = /** @class */ (function () {
      * @param fit true，填满但完整展示；false，填满，但长边可能截取（即显示不完整）
      */
     Meta2d.prototype.fitView = function (fit, viewPadding) {
+        var _a, _b;
         if (fit === void 0) { fit = true; }
         if (viewPadding === void 0) { viewPadding = 10; }
         // 默认垂直填充，两边留白
@@ -3243,10 +3383,194 @@ var Meta2d = /** @class */ (function () {
         else {
             ratio = w > h ? w : h;
         }
+        if ((_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.length) {
+            this.canvas.opening = true;
+        }
         // 该方法直接更改画布的 scale 属性，所以比率应该乘以当前 scale
         this.scale(ratio * this.store.data.scale);
         // 5. 居中
         this.centerView();
+        if ((_b = this.store.data.fits) === null || _b === void 0 ? void 0 : _b.length) {
+            this.fillView();
+        }
+    };
+    Meta2d.prototype.fillView = function () {
+        var _this = this;
+        var _a, _b;
+        var rect = this.getRect();
+        var wGap = this.canvas.width - rect.width;
+        var hGap = this.canvas.height - rect.height;
+        //宽度拉伸
+        if (Math.abs(wGap) > 10) {
+            (_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.forEach(function (fit) {
+                var pens = [];
+                fit.children.forEach(function (id) {
+                    _this.store.pens[id].locked = LockState.None;
+                    pens.push(_this.store.pens[id]);
+                });
+                var r = wGap / 2;
+                if (fit.left && fit.right) {
+                    //整体拉伸
+                    var left_1 = fit.leftValue;
+                    var right = fit.rightValue;
+                    if (left_1) {
+                        left_1 = Math.abs(left_1) < 1 ? left_1 * _this.canvas.width : left_1;
+                    }
+                    else {
+                        left_1 = 0;
+                    }
+                    if (right) {
+                        right = Math.abs(right) < 1 ? right * _this.canvas.width : right;
+                    }
+                    else {
+                        right = 0;
+                    }
+                    var ratio_1 = (_this.canvas.width - left_1 - right) / (rect.width - left_1 - right);
+                    pens.forEach(function (pen) {
+                        var _a;
+                        if (pen.image && pen.imageRatio) {
+                            if (pen.calculative.worldRect.width / _this.canvas.width > 0.1) {
+                                pen.imageRatio = false;
+                            }
+                        }
+                        pen.calculative.worldRect.x = rect.x - wGap / 2 + left_1 + (pen.calculative.worldRect.x - rect.x) * ratio_1; //(fit.leftValue || 0)+ (pen.calculative.worldRect.x + pen.calculative.worldRect.width/2)-( pen.calculative.worldRect.width*ratio)*(range/2- (fit.rightValue || 0))/(range- (fit.leftValue || 0)-(fit.rightValue || 0));
+                        pen.calculative.worldRect.width *= ratio_1;
+                        pen.calculative.worldRect.ex = pen.calculative.worldRect.x + pen.calculative.worldRect.width;
+                        pen.calculative.width = pen.calculative.worldRect.width;
+                        pen.calculative.x = pen.calculative.worldRect.x;
+                        pen.width = pen.calculative.worldRect.width;
+                        pen.x = pen.calculative.worldRect.x;
+                        _this.canvas.updatePenRect(pen, { worldRectIsReady: false });
+                        if (pen.externElement) {
+                            (_a = pen.onResize) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
+                        }
+                    });
+                }
+                else if (fit.left) {
+                    //左移
+                    r = -r;
+                    if (fit.leftValue) {
+                        r += (Math.abs(fit.leftValue) < 1 ? fit.leftValue * _this.canvas.width : fit.leftValue);
+                    }
+                    _this.translatePens(pens, r, 0);
+                }
+                else if (fit.right) {
+                    //右移
+                    if (fit.rightValue) {
+                        r = r - (Math.abs(fit.rightValue) < 1 ? fit.rightValue * _this.canvas.width : fit.rightValue);
+                    }
+                    _this.translatePens(pens, r, 0);
+                }
+            });
+            var iframePens = this.store.data.pens.filter(function (pen) { return pen.name === 'iframe'; });
+            iframePens === null || iframePens === void 0 ? void 0 : iframePens.forEach(function (pen) {
+                var _a, _b;
+                var worldRect = pen.calculative.worldRect;
+                if (worldRect.width / _this.store.data.scale > rect.width * 0.8) {
+                    var bfW = worldRect.width;
+                    pen.calculative.worldRect.x = worldRect.x - wGap / 2;
+                    pen.calculative.worldRect.width =
+                        worldRect.width + wGap;
+                    pen.calculative.worldRect.ex = worldRect.ex + wGap;
+                    pen.operationalRect.x =
+                        (pen.operationalRect.x * bfW) / pen.calculative.worldRect.width;
+                    pen.operationalRect.width =
+                        (pen.calculative.worldRect.width -
+                            (1 - pen.operationalRect.width) * bfW) /
+                            pen.calculative.worldRect.width;
+                    (_a = pen.onBeforeValue) === null || _a === void 0 ? void 0 : _a.call(pen, pen, {
+                        operationalRect: pen.operationalRect,
+                    });
+                    (_b = pen.onResize) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
+                }
+            });
+        }
+        //高度拉伸
+        if (Math.abs(hGap) > 10) {
+            (_b = this.store.data.fits) === null || _b === void 0 ? void 0 : _b.forEach(function (fit) {
+                var pens = [];
+                fit.children.forEach(function (id) {
+                    _this.store.pens[id].locked = LockState.None;
+                    pens.push(_this.store.pens[id]);
+                });
+                var r = hGap / 2;
+                if (fit.top && fit.bottom) {
+                    var top_1 = fit.topValue;
+                    var bottom = fit.bottomValue;
+                    if (top_1) {
+                        top_1 = Math.abs(top_1) < 1 ? top_1 * _this.canvas.height : top_1;
+                    }
+                    else {
+                        top_1 = 0;
+                    }
+                    if (bottom) {
+                        bottom = Math.abs(bottom) < 1 ? bottom * _this.canvas.height : bottom;
+                    }
+                    else {
+                        bottom = 0;
+                    }
+                    var ratio_2 = (_this.canvas.height - top_1 - bottom) / (rect.height - top_1 - bottom);
+                    pens.forEach(function (pen) {
+                        var _a;
+                        if (pen.image && pen.imageRatio) {
+                            if (pen.calculative.worldRect.height / _this.canvas.height > 0.1) {
+                                pen.imageRatio = false;
+                            }
+                        }
+                        pen.calculative.worldRect.y = rect.y - hGap / 2 + top_1 + (pen.calculative.worldRect.y - rect.y) * ratio_2; //(fit.leftValue || 0)+ (pen.calculative.worldRect.x + pen.calculative.worldRect.width/2)-( pen.calculative.worldRect.width*ratio)*(range/2- (fit.rightValue || 0))/(range- (fit.leftValue || 0)-(fit.rightValue || 0));
+                        pen.calculative.worldRect.height *= ratio_2;
+                        pen.calculative.worldRect.ey = pen.calculative.worldRect.y + pen.calculative.worldRect.height;
+                        pen.calculative.height = pen.calculative.worldRect.height;
+                        pen.calculative.y = pen.calculative.worldRect.y;
+                        pen.height = pen.calculative.worldRect.height;
+                        pen.y = pen.calculative.worldRect.y;
+                        _this.canvas.updatePenRect(pen, { worldRectIsReady: false });
+                        if (pen.externElement) {
+                            (_a = pen.onResize) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
+                        }
+                    });
+                }
+                else if (fit.top) {
+                    r = -r;
+                    if (fit.topValue) {
+                        r += (Math.abs(fit.topValue) < 1 ? fit.topValue * _this.canvas.height : fit.topValue);
+                    }
+                    _this.translatePens(pens, 0, r);
+                }
+                else if (fit.bottom) {
+                    if (fit.bottomValue) {
+                        r = r - (Math.abs(fit.bottomValue) < 1 ? fit.bottomValue * _this.canvas.height : fit.bottomValue);
+                    }
+                    _this.translatePens(pens, 0, r);
+                }
+            });
+            var iframePens = this.store.data.pens.filter(function (pen) { return pen.name === 'iframe'; });
+            iframePens === null || iframePens === void 0 ? void 0 : iframePens.forEach(function (pen) {
+                var _a, _b;
+                var worldRect = pen.calculative.worldRect;
+                if (worldRect.height / _this.store.data.scale > rect.height * 0.8) {
+                    var bfH = worldRect.height;
+                    pen.calculative.worldRect.y = worldRect.y - hGap / 2;
+                    pen.calculative.worldRect.height =
+                        worldRect.height + hGap;
+                    pen.calculative.worldRect.ey = worldRect.ey + hGap;
+                    pen.operationalRect.y =
+                        (pen.operationalRect.y * bfH) / pen.calculative.worldRect.width;
+                    pen.operationalRect.height =
+                        (pen.calculative.worldRect.height -
+                            (1 - pen.operationalRect.height) * bfH) /
+                            pen.calculative.worldRect.height;
+                    (_a = pen.onBeforeValue) === null || _a === void 0 ? void 0 : _a.call(pen, pen, {
+                        operationalRect: pen.operationalRect,
+                    });
+                    (_b = pen.onResize) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
+                }
+            });
+        }
+        this.canvas.canvasTemplate.init();
+        this.canvas.canvasImage.init();
+        this.canvas.canvasImageBottom.init();
+        this.render(true);
     };
     Meta2d.prototype.trimPens = function () {
         //去除空连线
@@ -3299,6 +3623,7 @@ var Meta2d = /** @class */ (function () {
         this.centerView();
     };
     Meta2d.prototype.fitSizeView = function (fit, viewPadding) {
+        var _a, _b;
         if (fit === void 0) { fit = true; }
         if (viewPadding === void 0) { viewPadding = 10; }
         // 默认垂直填充，两边留白
@@ -3332,10 +3657,16 @@ var Meta2d = /** @class */ (function () {
                 ratio = w > h ? w : h;
             }
         }
+        if ((_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.length) {
+            this.canvas.opening = true;
+        }
         // 该方法直接更改画布的 scale 属性，所以比率应该乘以当前 scale
         this.scale(ratio * this.store.data.scale);
         // 5. 居中
         this.centerSizeView();
+        if ((_b = this.store.data.fits) === null || _b === void 0 ? void 0 : _b.length) {
+            this.fillView();
+        }
     };
     Meta2d.prototype.centerSizeView = function () {
         // if (!this.hasView()) return;
@@ -3564,9 +3895,9 @@ var Meta2d = /** @class */ (function () {
             var firstPen_1 = pens[0];
             formatAttrs.forEach(function (attr) {
                 attrs[attr] =
-                    firstPen_1[attr] ||
-                        _this.store.options.defaultFormat[attr] ||
-                        _this.store.options[attr];
+                    firstPen_1[attr] !== undefined ? firstPen_1[attr] :
+                        (_this.store.options.defaultFormat[attr] ||
+                            _this.store.options[attr]);
             });
         }
         else {
@@ -3630,7 +3961,7 @@ var Meta2d = /** @class */ (function () {
         });
     };
     Meta2d.prototype.alignNodes = function (align, pens, rect) {
-        var e_10, _a;
+        var e_9, _a;
         if (pens === void 0) { pens = this.store.data.pens; }
         !rect && (rect = this.getPenRect(this.getRect(pens)));
         var initPens = deepClone(pens); // 原 pens ，深拷贝一下
@@ -3640,12 +3971,12 @@ var Meta2d = /** @class */ (function () {
                 this.alignPen(align, item, rect);
             }
         }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
         finally {
             try {
                 if (pens_1_1 && !pens_1_1.done && (_a = pens_1.return)) _a.call(pens_1);
             }
-            finally { if (e_10) throw e_10.error; }
+            finally { if (e_9) throw e_9.error; }
         }
         this.initImageCanvas(pens);
         this.initTemplateCanvas(pens);
@@ -3658,7 +3989,7 @@ var Meta2d = /** @class */ (function () {
     };
     //对齐大屏
     Meta2d.prototype.alignNodesV = function (align, pens) {
-        var e_11, _a;
+        var e_10, _a;
         if (pens === void 0) { pens = this.store.data.pens; }
         var width = this.store.data.width || this.store.options.width;
         var height = this.store.data.height || this.store.options.height;
@@ -3675,12 +4006,12 @@ var Meta2d = /** @class */ (function () {
                 this.alignPen(align, item, rect);
             }
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (pens_2_1 && !pens_2_1.done && (_a = pens_2.return)) _a.call(pens_2);
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         this.initImageCanvas(pens);
         this.initTemplateCanvas(pens);
@@ -3775,7 +4106,7 @@ var Meta2d = /** @class */ (function () {
      * @param distance 总的宽 or 高
      */
     Meta2d.prototype.spaceBetweenByDirection = function (direction, pens, distance) {
-        var e_12, _a;
+        var e_11, _a;
         var _this = this;
         if (pens === void 0) { pens = this.store.data.pens; }
         !distance && (distance = this.getPenRect(this.getRect(pens))[direction]);
@@ -3809,12 +4140,12 @@ var Meta2d = /** @class */ (function () {
                 this.setValue(__assign({ id: pen.id }, penRect), { render: false, doEvent: false });
             }
         }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
         finally {
             try {
                 if (pens_3_1 && !pens_3_1.done && (_a = pens_3.return)) _a.call(pens_3);
             }
-            finally { if (e_12) throw e_12.error; }
+            finally { if (e_11) throw e_11.error; }
         }
         this.initImageCanvas(pens);
         this.initTemplateCanvas(pens);
@@ -3878,7 +4209,7 @@ var Meta2d = /** @class */ (function () {
         });
     };
     Meta2d.prototype.gotoView = function (pen) {
-        var e_13, _a;
+        var e_12, _a;
         var center = this.getViewCenter();
         var x = center.x -
             pen.calculative.worldRect.x -
@@ -3897,12 +4228,12 @@ var Meta2d = /** @class */ (function () {
                 calcInView(pen_1);
             }
         }
-        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_13) throw e_13.error; }
+            finally { if (e_12) throw e_12.error; }
         }
         this.canvas.canvasImage.init();
         this.canvas.canvasImageBottom.init();
@@ -3949,7 +4280,7 @@ var Meta2d = /** @class */ (function () {
      * @param pens pen 置顶的画笔
      */
     Meta2d.prototype.top = function (pens) {
-        var e_14, _a;
+        var e_13, _a;
         var _this = this;
         if (!pens)
             pens = this.store.active;
@@ -3978,12 +4309,12 @@ var Meta2d = /** @class */ (function () {
                 _loop_3(pen);
             }
         }
-        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_14) throw e_14.error; }
+            finally { if (e_13) throw e_13.error; }
         }
         this.store.emitter.emit('layer', { type: 'top', pens: pens });
     };
@@ -4007,7 +4338,7 @@ var Meta2d = /** @class */ (function () {
      * @param pens 画笔们，注意 pen 必须在该数组内才有效
      */
     Meta2d.prototype.bottom = function (pens) {
-        var e_15, _a;
+        var e_14, _a;
         if (!pens)
             pens = this.store.active;
         if (!Array.isArray(pens))
@@ -4039,12 +4370,12 @@ var Meta2d = /** @class */ (function () {
                 _loop_4(pen);
             }
         }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_15) throw e_15.error; }
+            finally { if (e_14) throw e_14.error; }
         }
         this.store.emitter.emit('layer', { type: 'bottom', pens: pens });
     };
@@ -4054,7 +4385,7 @@ var Meta2d = /** @class */ (function () {
      * @param pen 画笔
      */
     Meta2d.prototype.upByArea = function (pen) {
-        var _a, e_16, _b;
+        var _a, e_15, _b;
         var _this = this;
         var index = this.store.data.pens.findIndex(function (p) { return p.id === pen.id; });
         if (index === -1) {
@@ -4104,12 +4435,12 @@ var Meta2d = /** @class */ (function () {
                 _loop_6(pen_3);
             }
         }
-        catch (e_16_1) { e_16 = { error: e_16_1 }; }
+        catch (e_15_1) { e_15 = { error: e_15_1 }; }
         finally {
             try {
                 if (allPens_1_1 && !allPens_1_1.done && (_b = allPens_1.return)) _b.call(allPens_1);
             }
-            finally { if (e_16) throw e_16.error; }
+            finally { if (e_15) throw e_15.error; }
         }
         this.initImageCanvas([pen]);
     };
@@ -4163,7 +4494,7 @@ var Meta2d = /** @class */ (function () {
      * @param pens 画笔
      */
     Meta2d.prototype.up = function (pens) {
-        var e_17, _a;
+        var e_16, _a;
         var _this = this;
         if (!pens)
             pens = this.store.active;
@@ -4218,12 +4549,12 @@ var Meta2d = /** @class */ (function () {
                 _loop_7(pen);
             }
         }
-        catch (e_17_1) { e_17 = { error: e_17_1 }; }
+        catch (e_16_1) { e_16 = { error: e_16_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_17) throw e_17.error; }
+            finally { if (e_16) throw e_16.error; }
         }
         this.store.emitter.emit('layer', { type: 'up', pens: pens });
     };
@@ -4232,7 +4563,7 @@ var Meta2d = /** @class */ (function () {
      * @param pen 画笔
      */
     Meta2d.prototype.down = function (pens) {
-        var e_18, _a;
+        var e_17, _a;
         var _this = this;
         if (!pens)
             pens = this.store.active;
@@ -4289,12 +4620,12 @@ var Meta2d = /** @class */ (function () {
                 _loop_9(pen);
             }
         }
-        catch (e_18_1) { e_18 = { error: e_18_1 }; }
+        catch (e_17_1) { e_17 = { error: e_17_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_18) throw e_18.error; }
+            finally { if (e_17) throw e_17.error; }
         }
         this.store.emitter.emit('layer', { type: 'down', pens: pens });
     };
@@ -4374,7 +4705,7 @@ var Meta2d = /** @class */ (function () {
             var nextNodes_1 = [];
             // 2. 遍历出线的 nextNode
             lines.forEach(function (line) {
-                var e_19, _a;
+                var e_18, _a;
                 var lineNextNode = _this.nextNode(line);
                 var _loop_11 = function (node) {
                     var have = nextNodes_1.find(function (next) { return next.id === node.id; });
@@ -4387,12 +4718,12 @@ var Meta2d = /** @class */ (function () {
                         _loop_11(node);
                     }
                 }
-                catch (e_19_1) { e_19 = { error: e_19_1 }; }
+                catch (e_18_1) { e_18 = { error: e_18_1 }; }
                 finally {
                     try {
                         if (lineNextNode_1_1 && !lineNextNode_1_1.done && (_a = lineNextNode_1.return)) _a.call(lineNextNode_1);
                     }
-                    finally { if (e_19) throw e_19.error; }
+                    finally { if (e_18) throw e_18.error; }
                 }
             });
             return nextNodes_1;
@@ -4415,7 +4746,7 @@ var Meta2d = /** @class */ (function () {
             var preNodes_1 = [];
             // 2. 遍历入线的 preNode
             lines.forEach(function (line) {
-                var e_20, _a;
+                var e_19, _a;
                 var linePreNode = _this.previousNode(line);
                 var _loop_12 = function (node) {
                     var have = preNodes_1.find(function (pre) { return pre.id === node.id; });
@@ -4428,12 +4759,12 @@ var Meta2d = /** @class */ (function () {
                         _loop_12(node);
                     }
                 }
-                catch (e_20_1) { e_20 = { error: e_20_1 }; }
+                catch (e_19_1) { e_19 = { error: e_19_1 }; }
                 finally {
                     try {
                         if (linePreNode_1_1 && !linePreNode_1_1.done && (_a = linePreNode_1.return)) _a.call(linePreNode_1);
                     }
-                    finally { if (e_20) throw e_20.error; }
+                    finally { if (e_19) throw e_19.error; }
                 }
             });
             return preNodes_1;
@@ -4780,7 +5111,7 @@ var Meta2d = /** @class */ (function () {
         });
     };
     Meta2d.prototype.setVisible = function (pen, visible, render) {
-        var e_21, _a;
+        var e_20, _a;
         if (render === void 0) { render = true; }
         this.onSizeUpdate();
         this.setValue({ id: pen.id, visible: visible }, { render: false, doEvent: false });
@@ -4792,12 +5123,12 @@ var Meta2d = /** @class */ (function () {
                     child && this.setVisible(child, visible, false);
                 }
             }
-            catch (e_21_1) { e_21 = { error: e_21_1 }; }
+            catch (e_20_1) { e_20 = { error: e_20_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_21) throw e_21.error; }
+                finally { if (e_20) throw e_20.error; }
             }
         }
         var allPens = getAllChildren(pen, this.store);