@meta2d/core 1.0.51 → 1.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/core.js CHANGED
@@ -612,6 +612,9 @@ var Meta2d = /** @class */ (function () {
612
612
  }
613
613
  if (opts.width !== undefined || opts.height !== undefined) {
614
614
  this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
615
+ if (this.canvas && this.canvas.canvasTemplate.canvas.style.backgroundImage) {
616
+ this.canvas.canvasTemplate.canvas.style.backgroundImage = '';
617
+ }
615
618
  }
616
619
  this.store.options = Object.assign(this.store.options, opts);
617
620
  if (this.canvas && opts.scroll !== undefined) {
@@ -861,7 +864,7 @@ var Meta2d = /** @class */ (function () {
861
864
  value[key] = _pen[key];
862
865
  }
863
866
  }
864
- value.id = _pen.id;
867
+ // value.id = _pen.id;
865
868
  if (_pen.deviceId) {
866
869
  value.deviceId = _pen.deviceId;
867
870
  }
@@ -939,7 +942,8 @@ var Meta2d = /** @class */ (function () {
939
942
  Meta2d.prototype.sendDataToNetWork = function (value, pen, e) {
940
943
  var _a;
941
944
  return __awaiter(this, void 0, void 0, function () {
942
- var network, i, keys, params, res, data, fnJs, clients_1, mqttClient_1, websockets, websocket_1;
945
+ var network, i, keys, params, url_1, keys, res, data, fnJs, clients_1, mqttClient_1, websockets, websocket_1;
946
+ var _this = this;
943
947
  return __generator(this, function (_b) {
944
948
  switch (_b.label) {
945
949
  case 0:
@@ -954,13 +958,16 @@ var Meta2d = /** @class */ (function () {
954
958
  if (!(network.protocol === 'http')) return [3 /*break*/, 5];
955
959
  if (typeof network.headers === 'object') {
956
960
  for (i in network.headers) {
957
- keys = network.headers[i].match(/(?<=\$\{).*?(?=\})/g);
958
- if (keys) {
959
- network.headers[i] = network.headers[i].replace("${" + keys[0] + "}", this.getDynamicParam(keys[0]));
961
+ if (typeof network.headers[i] === 'string') {
962
+ keys = network.headers[i].match(/(?<=\$\{).*?(?=\})/g);
963
+ if (keys) {
964
+ network.headers[i] = network.headers[i].replace("${" + keys[0] + "}", this.getDynamicParam(keys[0]));
965
+ }
960
966
  }
961
967
  }
962
968
  }
963
969
  params = undefined;
970
+ url_1 = network.url;
964
971
  if (network.method === 'GET') {
965
972
  params =
966
973
  '?' +
@@ -968,7 +975,17 @@ var Meta2d = /** @class */ (function () {
968
975
  .map(function (key) { return key + '=' + value[key]; })
969
976
  .join('&');
970
977
  }
971
- return [4 /*yield*/, fetch(network.url + (params ? params : ''), {
978
+ if (network.method === 'POST') {
979
+ if (url_1.indexOf('${') > -1) {
980
+ keys = url_1.match(/(?<=\$\{).*?(?=\})/g);
981
+ if (keys) {
982
+ keys.forEach(function (key) {
983
+ url_1 = url_1.replace("${" + key + "}", getter(pen, key) || _this.getDynamicParam(key));
984
+ });
985
+ }
986
+ }
987
+ }
988
+ return [4 /*yield*/, fetch(url_1 + (params ? params : ''), {
972
989
  headers: network.headers || {},
973
990
  method: network.method,
974
991
  body: network.method === 'POST' ? JSON.stringify(value) : undefined,
@@ -1163,7 +1180,7 @@ var Meta2d = /** @class */ (function () {
1163
1180
  this.store.patchFlagsTop = true;
1164
1181
  };
1165
1182
  Meta2d.prototype.open = function (data, render) {
1166
- var e_3, _a, e_4, _b, e_5, _c, e_6, _e;
1183
+ var e_3, _a, e_4, _b, e_5, _c;
1167
1184
  var _this = this;
1168
1185
  if (render === void 0) { render = true; }
1169
1186
  this.clear(false, data === null || data === void 0 ? void 0 : data.template);
@@ -1174,8 +1191,8 @@ var Meta2d = /** @class */ (function () {
1174
1191
  this.store.data.pens = [];
1175
1192
  try {
1176
1193
  // 第一遍赋初值
1177
- for (var _f = __values(data.pens), _g = _f.next(); !_g.done; _g = _f.next()) {
1178
- var pen = _g.value;
1194
+ for (var _e = __values(data.pens), _f = _e.next(); !_f.done; _f = _e.next()) {
1195
+ var pen = _f.value;
1179
1196
  if (!pen.id) {
1180
1197
  pen.id = s8();
1181
1198
  }
@@ -1186,36 +1203,27 @@ var Meta2d = /** @class */ (function () {
1186
1203
  catch (e_3_1) { e_3 = { error: e_3_1 }; }
1187
1204
  finally {
1188
1205
  try {
1189
- if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
1206
+ if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
1190
1207
  }
1191
1208
  finally { if (e_3) throw e_3.error; }
1192
1209
  }
1193
1210
  try {
1194
- for (var _h = __values(data.pens), _j = _h.next(); !_j.done; _j = _h.next()) {
1195
- var pen = _j.value;
1211
+ for (var _g = __values(data.pens), _h = _g.next(); !_h.done; _h = _g.next()) {
1212
+ var pen = _h.value;
1196
1213
  this.canvas.makePen(pen);
1197
1214
  }
1198
1215
  }
1199
1216
  catch (e_4_1) { e_4 = { error: e_4_1 }; }
1200
1217
  finally {
1201
1218
  try {
1202
- if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
1219
+ if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
1203
1220
  }
1204
1221
  finally { if (e_4) throw e_4.error; }
1205
1222
  }
1206
- try {
1207
- for (var _k = __values(data.pens), _l = _k.next(); !_l.done; _l = _k.next()) {
1208
- var pen = _l.value;
1209
- this.canvas.updateLines(pen);
1210
- }
1211
- }
1212
- catch (e_5_1) { e_5 = { error: e_5_1 }; }
1213
- finally {
1214
- try {
1215
- if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
1216
- }
1217
- finally { if (e_5) throw e_5.error; }
1218
- }
1223
+ //首次计算连线bug
1224
+ // for (const pen of data.pens) {
1225
+ // this.canvas.updateLines(pen);
1226
+ // }
1219
1227
  }
1220
1228
  this.canvas.patchFlagsLines.forEach(function (pen) {
1221
1229
  if (pen.type) {
@@ -1242,19 +1250,19 @@ var Meta2d = /** @class */ (function () {
1242
1250
  this.doInitJS();
1243
1251
  if (this.store.data.iconUrls) {
1244
1252
  try {
1245
- for (var _m = __values(this.store.data.iconUrls), _o = _m.next(); !_o.done; _o = _m.next()) {
1246
- var item = _o.value;
1253
+ for (var _j = __values(this.store.data.iconUrls), _k = _j.next(); !_k.done; _k = _j.next()) {
1254
+ var item = _k.value;
1247
1255
  loadCss(item, function () {
1248
1256
  _this.render();
1249
1257
  });
1250
1258
  }
1251
1259
  }
1252
- catch (e_6_1) { e_6 = { error: e_6_1 }; }
1260
+ catch (e_5_1) { e_5 = { error: e_5_1 }; }
1253
1261
  finally {
1254
1262
  try {
1255
- if (_o && !_o.done && (_e = _m.return)) _e.call(_m);
1263
+ if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
1256
1264
  }
1257
- finally { if (e_6) throw e_6.error; }
1265
+ finally { if (e_5) throw e_5.error; }
1258
1266
  }
1259
1267
  }
1260
1268
  this.canvas.autoPolylineFlag = false;
@@ -1495,7 +1503,7 @@ var Meta2d = /** @class */ (function () {
1495
1503
  * @param render 是否重绘
1496
1504
  */
1497
1505
  Meta2d.prototype.clear = function (render, template) {
1498
- var e_7, _a;
1506
+ var e_6, _a;
1499
1507
  var _b;
1500
1508
  if (render === void 0) { render = true; }
1501
1509
  try {
@@ -1504,12 +1512,12 @@ var Meta2d = /** @class */ (function () {
1504
1512
  (_b = pen.onDestroy) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
1505
1513
  }
1506
1514
  }
1507
- catch (e_7_1) { e_7 = { error: e_7_1 }; }
1515
+ catch (e_6_1) { e_6 = { error: e_6_1 }; }
1508
1516
  finally {
1509
1517
  try {
1510
1518
  if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
1511
1519
  }
1512
- finally { if (e_7) throw e_7.error; }
1520
+ finally { if (e_6) throw e_6.error; }
1513
1521
  }
1514
1522
  clearStore(this.store, template);
1515
1523
  this.hideInput();
@@ -1815,7 +1823,7 @@ var Meta2d = /** @class */ (function () {
1815
1823
  if (index < minIndex) {
1816
1824
  minIndex = index;
1817
1825
  }
1818
- if (pen === parent || pen.parentId === parent.id) {
1826
+ if (pen === parent || pen.parentId === parent.id || pen.id === parent.id) {
1819
1827
  return;
1820
1828
  }
1821
1829
  // pen 来自于 store.active ,不存在有 parentId 的情况
@@ -1864,6 +1872,7 @@ var Meta2d = /** @class */ (function () {
1864
1872
  }
1865
1873
  this.store.emitter.emit('combine', [parent]);
1866
1874
  this.render();
1875
+ return parent;
1867
1876
  };
1868
1877
  Meta2d.prototype.uncombine = function (pen) {
1869
1878
  var _this = this;
@@ -2074,16 +2083,31 @@ var Meta2d = /** @class */ (function () {
2074
2083
  !this.store.data.mqttOptions.customClientId) {
2075
2084
  this.store.data.mqttOptions.clientId = s8();
2076
2085
  }
2077
- this.mqttClient = mqtt.connect(this.store.data.mqtt, this.store.data.mqttOptions);
2078
- this.mqttClient.on('message', function (topic, message) {
2079
- _this.socketCallback(message.toString(), {
2080
- topic: topic,
2081
- type: 'mqtt',
2082
- url: _this.store.data.mqtt,
2086
+ var mqttOptions = __assign({}, this.store.data.mqttOptions);
2087
+ // 如果没有username/password或为空字符串则删除username/password
2088
+ if (!mqttOptions.username) {
2089
+ delete mqttOptions.username;
2090
+ }
2091
+ if (!mqttOptions.password) {
2092
+ delete mqttOptions.password;
2093
+ }
2094
+ var username = mqttOptions.username, password = mqttOptions.password;
2095
+ // username 和 password 必须同时存在或者同时不存在才去建立mqtt连接
2096
+ if ((username && password) || (!username && !password)) {
2097
+ this.mqttClient = mqtt.connect(this.store.data.mqtt, mqttOptions);
2098
+ this.mqttClient.on('message', function (topic, message) {
2099
+ _this.socketCallback(message.toString(), {
2100
+ topic: topic,
2101
+ type: 'mqtt',
2102
+ url: _this.store.data.mqtt,
2103
+ });
2083
2104
  });
2084
- });
2085
- if (this.store.data.mqttTopics) {
2086
- this.mqttClient.subscribe(this.store.data.mqttTopics.split(','));
2105
+ if (this.store.data.mqttTopics) {
2106
+ this.mqttClient.subscribe(this.store.data.mqttTopics.split(','));
2107
+ }
2108
+ }
2109
+ else {
2110
+ console.warn('缺少用户名或密码');
2087
2111
  }
2088
2112
  }
2089
2113
  };
@@ -3090,12 +3114,12 @@ var Meta2d = /** @class */ (function () {
3090
3114
  if (containBkImg === void 0) { containBkImg = false; }
3091
3115
  return this.canvas.toPng(padding, callback, containBkImg, maxWidth);
3092
3116
  };
3093
- Meta2d.prototype.activeToPng = function (padding) {
3094
- return this.canvas.activeToPng(padding);
3117
+ Meta2d.prototype.activeToPng = function (padding, maxWidth) {
3118
+ return this.canvas.activeToPng(padding, maxWidth);
3095
3119
  };
3096
- Meta2d.prototype.pensToPng = function (pens, padding) {
3120
+ Meta2d.prototype.pensToPng = function (pens, padding, maxWidth) {
3097
3121
  if (pens === void 0) { pens = this.store.active; }
3098
- return this.canvas.pensToPng(pens, padding);
3122
+ return this.canvas.pensToPng(pens, padding, maxWidth);
3099
3123
  };
3100
3124
  /**
3101
3125
  * 下载 png
@@ -3103,7 +3127,7 @@ var Meta2d = /** @class */ (function () {
3103
3127
  * @param padding 上右下左的内边距
3104
3128
  */
3105
3129
  Meta2d.prototype.downloadPng = function (name, padding, maxWidth) {
3106
- var e_8, _a;
3130
+ var e_7, _a;
3107
3131
  var _this = this;
3108
3132
  var _b;
3109
3133
  try {
@@ -3115,12 +3139,12 @@ var Meta2d = /** @class */ (function () {
3115
3139
  }
3116
3140
  }
3117
3141
  }
3118
- catch (e_8_1) { e_8 = { error: e_8_1 }; }
3142
+ catch (e_7_1) { e_7 = { error: e_7_1 }; }
3119
3143
  finally {
3120
3144
  try {
3121
3145
  if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
3122
3146
  }
3123
- finally { if (e_8) throw e_8.error; }
3147
+ finally { if (e_7) throw e_7.error; }
3124
3148
  }
3125
3149
  setTimeout(function () {
3126
3150
  var a = document.createElement('a');
@@ -3132,7 +3156,7 @@ var Meta2d = /** @class */ (function () {
3132
3156
  }, 1000);
3133
3157
  };
3134
3158
  Meta2d.prototype.downloadSvg = function () {
3135
- var e_9, _a;
3159
+ var e_8, _a;
3136
3160
  if (!window.C2S) {
3137
3161
  console.error('请先加载乐吾乐官网下的canvas2svg.js', 'https://assets.le5lecdn.com/2d/canvas2svg.js');
3138
3162
  throw new Error('请先加载乐吾乐官网下的canvas2svg.js');
@@ -3151,12 +3175,12 @@ var Meta2d = /** @class */ (function () {
3151
3175
  renderPenRaw(ctx, pen, rect, true);
3152
3176
  }
3153
3177
  }
3154
- catch (e_9_1) { e_9 = { error: e_9_1 }; }
3178
+ catch (e_8_1) { e_8 = { error: e_8_1 }; }
3155
3179
  finally {
3156
3180
  try {
3157
3181
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
3158
3182
  }
3159
- finally { if (e_9) throw e_9.error; }
3183
+ finally { if (e_8) throw e_8.error; }
3160
3184
  }
3161
3185
  var mySerializedSVG = ctx.getSerializedSvg();
3162
3186
  if (this.store.data.background) {
@@ -3204,6 +3228,7 @@ var Meta2d = /** @class */ (function () {
3204
3228
  * @param fit true,填满但完整展示;false,填满,但长边可能截取(即显示不完整)
3205
3229
  */
3206
3230
  Meta2d.prototype.fitView = function (fit, viewPadding) {
3231
+ var _a, _b;
3207
3232
  if (fit === void 0) { fit = true; }
3208
3233
  if (viewPadding === void 0) { viewPadding = 10; }
3209
3234
  // 默认垂直填充,两边留白
@@ -3228,10 +3253,194 @@ var Meta2d = /** @class */ (function () {
3228
3253
  else {
3229
3254
  ratio = w > h ? w : h;
3230
3255
  }
3256
+ if ((_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.length) {
3257
+ this.canvas.opening = true;
3258
+ }
3231
3259
  // 该方法直接更改画布的 scale 属性,所以比率应该乘以当前 scale
3232
3260
  this.scale(ratio * this.store.data.scale);
3233
3261
  // 5. 居中
3234
3262
  this.centerView();
3263
+ if ((_b = this.store.data.fits) === null || _b === void 0 ? void 0 : _b.length) {
3264
+ this.fillView();
3265
+ }
3266
+ };
3267
+ Meta2d.prototype.fillView = function () {
3268
+ var _this = this;
3269
+ var _a, _b;
3270
+ var rect = this.getRect();
3271
+ var wGap = this.canvas.width - rect.width;
3272
+ var hGap = this.canvas.height - rect.height;
3273
+ //宽度拉伸
3274
+ if (Math.abs(wGap) > 10) {
3275
+ (_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.forEach(function (fit) {
3276
+ var pens = [];
3277
+ fit.children.forEach(function (id) {
3278
+ _this.store.pens[id].locked = LockState.None;
3279
+ pens.push(_this.store.pens[id]);
3280
+ });
3281
+ var r = wGap / 2;
3282
+ if (fit.left && fit.right) {
3283
+ //整体拉伸
3284
+ var left_1 = fit.leftValue;
3285
+ var right = fit.rightValue;
3286
+ if (left_1) {
3287
+ left_1 = Math.abs(left_1) < 1 ? left_1 * _this.canvas.width : left_1;
3288
+ }
3289
+ else {
3290
+ left_1 = 0;
3291
+ }
3292
+ if (right) {
3293
+ right = Math.abs(right) < 1 ? right * _this.canvas.width : right;
3294
+ }
3295
+ else {
3296
+ right = 0;
3297
+ }
3298
+ var ratio_1 = (_this.canvas.width - left_1 - right) / (rect.width - left_1 - right);
3299
+ pens.forEach(function (pen) {
3300
+ var _a;
3301
+ if (pen.image && pen.imageRatio) {
3302
+ if (pen.calculative.worldRect.width / _this.canvas.width > 0.1) {
3303
+ pen.imageRatio = false;
3304
+ }
3305
+ }
3306
+ 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));
3307
+ pen.calculative.worldRect.width *= ratio_1;
3308
+ pen.calculative.worldRect.ex = pen.calculative.worldRect.x + pen.calculative.worldRect.width;
3309
+ pen.calculative.width = pen.calculative.worldRect.width;
3310
+ pen.calculative.x = pen.calculative.worldRect.x;
3311
+ pen.width = pen.calculative.worldRect.width;
3312
+ pen.x = pen.calculative.worldRect.x;
3313
+ _this.canvas.updatePenRect(pen, { worldRectIsReady: false });
3314
+ if (pen.externElement) {
3315
+ (_a = pen.onResize) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
3316
+ }
3317
+ });
3318
+ }
3319
+ else if (fit.left) {
3320
+ //左移
3321
+ r = -r;
3322
+ if (fit.leftValue) {
3323
+ r += (Math.abs(fit.leftValue) < 1 ? fit.leftValue * _this.canvas.width : fit.leftValue);
3324
+ }
3325
+ _this.translatePens(pens, r, 0);
3326
+ }
3327
+ else if (fit.right) {
3328
+ //右移
3329
+ if (fit.rightValue) {
3330
+ r = r - (Math.abs(fit.rightValue) < 1 ? fit.rightValue * _this.canvas.width : fit.rightValue);
3331
+ }
3332
+ _this.translatePens(pens, r, 0);
3333
+ }
3334
+ });
3335
+ var iframePens = this.store.data.pens.filter(function (pen) { return pen.name === 'iframe'; });
3336
+ iframePens === null || iframePens === void 0 ? void 0 : iframePens.forEach(function (pen) {
3337
+ var _a, _b;
3338
+ var worldRect = pen.calculative.worldRect;
3339
+ if (worldRect.width / _this.store.data.scale > rect.width * 0.8) {
3340
+ var bfW = worldRect.width;
3341
+ pen.calculative.worldRect.x = worldRect.x - wGap / 2;
3342
+ pen.calculative.worldRect.width =
3343
+ worldRect.width + wGap;
3344
+ pen.calculative.worldRect.ex = worldRect.ex + wGap;
3345
+ pen.operationalRect.x =
3346
+ (pen.operationalRect.x * bfW) / pen.calculative.worldRect.width;
3347
+ pen.operationalRect.width =
3348
+ (pen.calculative.worldRect.width -
3349
+ (1 - pen.operationalRect.width) * bfW) /
3350
+ pen.calculative.worldRect.width;
3351
+ (_a = pen.onBeforeValue) === null || _a === void 0 ? void 0 : _a.call(pen, pen, {
3352
+ operationalRect: pen.operationalRect,
3353
+ });
3354
+ (_b = pen.onResize) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
3355
+ }
3356
+ });
3357
+ }
3358
+ //高度拉伸
3359
+ if (Math.abs(hGap) > 10) {
3360
+ (_b = this.store.data.fits) === null || _b === void 0 ? void 0 : _b.forEach(function (fit) {
3361
+ var pens = [];
3362
+ fit.children.forEach(function (id) {
3363
+ _this.store.pens[id].locked = LockState.None;
3364
+ pens.push(_this.store.pens[id]);
3365
+ });
3366
+ var r = hGap / 2;
3367
+ if (fit.top && fit.bottom) {
3368
+ var top_1 = fit.topValue;
3369
+ var bottom = fit.bottomValue;
3370
+ if (top_1) {
3371
+ top_1 = Math.abs(top_1) < 1 ? top_1 * _this.canvas.height : top_1;
3372
+ }
3373
+ else {
3374
+ top_1 = 0;
3375
+ }
3376
+ if (bottom) {
3377
+ bottom = Math.abs(bottom) < 1 ? bottom * _this.canvas.height : bottom;
3378
+ }
3379
+ else {
3380
+ bottom = 0;
3381
+ }
3382
+ var ratio_2 = (_this.canvas.height - top_1 - bottom) / (rect.height - top_1 - bottom);
3383
+ pens.forEach(function (pen) {
3384
+ var _a;
3385
+ if (pen.image && pen.imageRatio) {
3386
+ if (pen.calculative.worldRect.height / _this.canvas.height > 0.1) {
3387
+ pen.imageRatio = false;
3388
+ }
3389
+ }
3390
+ 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));
3391
+ pen.calculative.worldRect.height *= ratio_2;
3392
+ pen.calculative.worldRect.ey = pen.calculative.worldRect.y + pen.calculative.worldRect.height;
3393
+ pen.calculative.height = pen.calculative.worldRect.height;
3394
+ pen.calculative.y = pen.calculative.worldRect.y;
3395
+ pen.height = pen.calculative.worldRect.height;
3396
+ pen.y = pen.calculative.worldRect.y;
3397
+ _this.canvas.updatePenRect(pen, { worldRectIsReady: false });
3398
+ if (pen.externElement) {
3399
+ (_a = pen.onResize) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
3400
+ }
3401
+ });
3402
+ }
3403
+ else if (fit.top) {
3404
+ r = -r;
3405
+ if (fit.topValue) {
3406
+ r += (Math.abs(fit.topValue) < 1 ? fit.topValue * _this.canvas.height : fit.topValue);
3407
+ }
3408
+ _this.translatePens(pens, 0, r);
3409
+ }
3410
+ else if (fit.bottom) {
3411
+ if (fit.bottomValue) {
3412
+ r = r - (Math.abs(fit.bottomValue) < 1 ? fit.bottomValue * _this.canvas.height : fit.bottomValue);
3413
+ }
3414
+ _this.translatePens(pens, 0, r);
3415
+ }
3416
+ });
3417
+ var iframePens = this.store.data.pens.filter(function (pen) { return pen.name === 'iframe'; });
3418
+ iframePens === null || iframePens === void 0 ? void 0 : iframePens.forEach(function (pen) {
3419
+ var _a, _b;
3420
+ var worldRect = pen.calculative.worldRect;
3421
+ if (worldRect.height / _this.store.data.scale > rect.height * 0.8) {
3422
+ var bfH = worldRect.height;
3423
+ pen.calculative.worldRect.y = worldRect.y - hGap / 2;
3424
+ pen.calculative.worldRect.height =
3425
+ worldRect.height + hGap;
3426
+ pen.calculative.worldRect.ey = worldRect.ey + hGap;
3427
+ pen.operationalRect.y =
3428
+ (pen.operationalRect.y * bfH) / pen.calculative.worldRect.width;
3429
+ pen.operationalRect.height =
3430
+ (pen.calculative.worldRect.height -
3431
+ (1 - pen.operationalRect.height) * bfH) /
3432
+ pen.calculative.worldRect.height;
3433
+ (_a = pen.onBeforeValue) === null || _a === void 0 ? void 0 : _a.call(pen, pen, {
3434
+ operationalRect: pen.operationalRect,
3435
+ });
3436
+ (_b = pen.onResize) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
3437
+ }
3438
+ });
3439
+ }
3440
+ this.canvas.canvasTemplate.init();
3441
+ this.canvas.canvasImage.init();
3442
+ this.canvas.canvasImageBottom.init();
3443
+ this.render(true);
3235
3444
  };
3236
3445
  Meta2d.prototype.trimPens = function () {
3237
3446
  //去除空连线
@@ -3284,6 +3493,7 @@ var Meta2d = /** @class */ (function () {
3284
3493
  this.centerView();
3285
3494
  };
3286
3495
  Meta2d.prototype.fitSizeView = function (fit, viewPadding) {
3496
+ var _a, _b;
3287
3497
  if (fit === void 0) { fit = true; }
3288
3498
  if (viewPadding === void 0) { viewPadding = 10; }
3289
3499
  // 默认垂直填充,两边留白
@@ -3317,10 +3527,16 @@ var Meta2d = /** @class */ (function () {
3317
3527
  ratio = w > h ? w : h;
3318
3528
  }
3319
3529
  }
3530
+ if ((_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.length) {
3531
+ this.canvas.opening = true;
3532
+ }
3320
3533
  // 该方法直接更改画布的 scale 属性,所以比率应该乘以当前 scale
3321
3534
  this.scale(ratio * this.store.data.scale);
3322
3535
  // 5. 居中
3323
3536
  this.centerSizeView();
3537
+ if ((_b = this.store.data.fits) === null || _b === void 0 ? void 0 : _b.length) {
3538
+ this.fillView();
3539
+ }
3324
3540
  };
3325
3541
  Meta2d.prototype.centerSizeView = function () {
3326
3542
  // if (!this.hasView()) return;
@@ -3549,9 +3765,9 @@ var Meta2d = /** @class */ (function () {
3549
3765
  var firstPen_1 = pens[0];
3550
3766
  formatAttrs.forEach(function (attr) {
3551
3767
  attrs[attr] =
3552
- firstPen_1[attr] ||
3553
- _this.store.options.defaultFormat[attr] ||
3554
- _this.store.options[attr];
3768
+ firstPen_1[attr] !== undefined ? firstPen_1[attr] :
3769
+ (_this.store.options.defaultFormat[attr] ||
3770
+ _this.store.options[attr]);
3555
3771
  });
3556
3772
  }
3557
3773
  else {
@@ -3615,7 +3831,7 @@ var Meta2d = /** @class */ (function () {
3615
3831
  });
3616
3832
  };
3617
3833
  Meta2d.prototype.alignNodes = function (align, pens, rect) {
3618
- var e_10, _a;
3834
+ var e_9, _a;
3619
3835
  if (pens === void 0) { pens = this.store.data.pens; }
3620
3836
  !rect && (rect = this.getPenRect(this.getRect(pens)));
3621
3837
  var initPens = deepClone(pens); // 原 pens ,深拷贝一下
@@ -3625,12 +3841,12 @@ var Meta2d = /** @class */ (function () {
3625
3841
  this.alignPen(align, item, rect);
3626
3842
  }
3627
3843
  }
3628
- catch (e_10_1) { e_10 = { error: e_10_1 }; }
3844
+ catch (e_9_1) { e_9 = { error: e_9_1 }; }
3629
3845
  finally {
3630
3846
  try {
3631
3847
  if (pens_1_1 && !pens_1_1.done && (_a = pens_1.return)) _a.call(pens_1);
3632
3848
  }
3633
- finally { if (e_10) throw e_10.error; }
3849
+ finally { if (e_9) throw e_9.error; }
3634
3850
  }
3635
3851
  this.initImageCanvas(pens);
3636
3852
  this.initTemplateCanvas(pens);
@@ -3643,7 +3859,7 @@ var Meta2d = /** @class */ (function () {
3643
3859
  };
3644
3860
  //对齐大屏
3645
3861
  Meta2d.prototype.alignNodesV = function (align, pens) {
3646
- var e_11, _a;
3862
+ var e_10, _a;
3647
3863
  if (pens === void 0) { pens = this.store.data.pens; }
3648
3864
  var width = this.store.data.width || this.store.options.width;
3649
3865
  var height = this.store.data.height || this.store.options.height;
@@ -3660,12 +3876,12 @@ var Meta2d = /** @class */ (function () {
3660
3876
  this.alignPen(align, item, rect);
3661
3877
  }
3662
3878
  }
3663
- catch (e_11_1) { e_11 = { error: e_11_1 }; }
3879
+ catch (e_10_1) { e_10 = { error: e_10_1 }; }
3664
3880
  finally {
3665
3881
  try {
3666
3882
  if (pens_2_1 && !pens_2_1.done && (_a = pens_2.return)) _a.call(pens_2);
3667
3883
  }
3668
- finally { if (e_11) throw e_11.error; }
3884
+ finally { if (e_10) throw e_10.error; }
3669
3885
  }
3670
3886
  this.initImageCanvas(pens);
3671
3887
  this.initTemplateCanvas(pens);
@@ -3760,7 +3976,7 @@ var Meta2d = /** @class */ (function () {
3760
3976
  * @param distance 总的宽 or 高
3761
3977
  */
3762
3978
  Meta2d.prototype.spaceBetweenByDirection = function (direction, pens, distance) {
3763
- var e_12, _a;
3979
+ var e_11, _a;
3764
3980
  var _this = this;
3765
3981
  if (pens === void 0) { pens = this.store.data.pens; }
3766
3982
  !distance && (distance = this.getPenRect(this.getRect(pens))[direction]);
@@ -3794,12 +4010,12 @@ var Meta2d = /** @class */ (function () {
3794
4010
  this.setValue(__assign({ id: pen.id }, penRect), { render: false, doEvent: false });
3795
4011
  }
3796
4012
  }
3797
- catch (e_12_1) { e_12 = { error: e_12_1 }; }
4013
+ catch (e_11_1) { e_11 = { error: e_11_1 }; }
3798
4014
  finally {
3799
4015
  try {
3800
4016
  if (pens_3_1 && !pens_3_1.done && (_a = pens_3.return)) _a.call(pens_3);
3801
4017
  }
3802
- finally { if (e_12) throw e_12.error; }
4018
+ finally { if (e_11) throw e_11.error; }
3803
4019
  }
3804
4020
  this.initImageCanvas(pens);
3805
4021
  this.initTemplateCanvas(pens);
@@ -3863,7 +4079,7 @@ var Meta2d = /** @class */ (function () {
3863
4079
  });
3864
4080
  };
3865
4081
  Meta2d.prototype.gotoView = function (pen) {
3866
- var e_13, _a;
4082
+ var e_12, _a;
3867
4083
  var center = this.getViewCenter();
3868
4084
  var x = center.x -
3869
4085
  pen.calculative.worldRect.x -
@@ -3882,12 +4098,12 @@ var Meta2d = /** @class */ (function () {
3882
4098
  calcInView(pen_1);
3883
4099
  }
3884
4100
  }
3885
- catch (e_13_1) { e_13 = { error: e_13_1 }; }
4101
+ catch (e_12_1) { e_12 = { error: e_12_1 }; }
3886
4102
  finally {
3887
4103
  try {
3888
4104
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
3889
4105
  }
3890
- finally { if (e_13) throw e_13.error; }
4106
+ finally { if (e_12) throw e_12.error; }
3891
4107
  }
3892
4108
  this.canvas.canvasImage.init();
3893
4109
  this.canvas.canvasImageBottom.init();
@@ -3934,7 +4150,7 @@ var Meta2d = /** @class */ (function () {
3934
4150
  * @param pens pen 置顶的画笔
3935
4151
  */
3936
4152
  Meta2d.prototype.top = function (pens) {
3937
- var e_14, _a;
4153
+ var e_13, _a;
3938
4154
  var _this = this;
3939
4155
  if (!pens)
3940
4156
  pens = this.store.active;
@@ -3963,12 +4179,12 @@ var Meta2d = /** @class */ (function () {
3963
4179
  _loop_3(pen);
3964
4180
  }
3965
4181
  }
3966
- catch (e_14_1) { e_14 = { error: e_14_1 }; }
4182
+ catch (e_13_1) { e_13 = { error: e_13_1 }; }
3967
4183
  finally {
3968
4184
  try {
3969
4185
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
3970
4186
  }
3971
- finally { if (e_14) throw e_14.error; }
4187
+ finally { if (e_13) throw e_13.error; }
3972
4188
  }
3973
4189
  this.store.emitter.emit('layer', { type: 'top', pens: pens });
3974
4190
  };
@@ -3992,7 +4208,7 @@ var Meta2d = /** @class */ (function () {
3992
4208
  * @param pens 画笔们,注意 pen 必须在该数组内才有效
3993
4209
  */
3994
4210
  Meta2d.prototype.bottom = function (pens) {
3995
- var e_15, _a;
4211
+ var e_14, _a;
3996
4212
  if (!pens)
3997
4213
  pens = this.store.active;
3998
4214
  if (!Array.isArray(pens))
@@ -4024,12 +4240,12 @@ var Meta2d = /** @class */ (function () {
4024
4240
  _loop_4(pen);
4025
4241
  }
4026
4242
  }
4027
- catch (e_15_1) { e_15 = { error: e_15_1 }; }
4243
+ catch (e_14_1) { e_14 = { error: e_14_1 }; }
4028
4244
  finally {
4029
4245
  try {
4030
4246
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
4031
4247
  }
4032
- finally { if (e_15) throw e_15.error; }
4248
+ finally { if (e_14) throw e_14.error; }
4033
4249
  }
4034
4250
  this.store.emitter.emit('layer', { type: 'bottom', pens: pens });
4035
4251
  };
@@ -4039,7 +4255,7 @@ var Meta2d = /** @class */ (function () {
4039
4255
  * @param pen 画笔
4040
4256
  */
4041
4257
  Meta2d.prototype.upByArea = function (pen) {
4042
- var _a, e_16, _b;
4258
+ var _a, e_15, _b;
4043
4259
  var _this = this;
4044
4260
  var index = this.store.data.pens.findIndex(function (p) { return p.id === pen.id; });
4045
4261
  if (index === -1) {
@@ -4089,12 +4305,12 @@ var Meta2d = /** @class */ (function () {
4089
4305
  _loop_6(pen_3);
4090
4306
  }
4091
4307
  }
4092
- catch (e_16_1) { e_16 = { error: e_16_1 }; }
4308
+ catch (e_15_1) { e_15 = { error: e_15_1 }; }
4093
4309
  finally {
4094
4310
  try {
4095
4311
  if (allPens_1_1 && !allPens_1_1.done && (_b = allPens_1.return)) _b.call(allPens_1);
4096
4312
  }
4097
- finally { if (e_16) throw e_16.error; }
4313
+ finally { if (e_15) throw e_15.error; }
4098
4314
  }
4099
4315
  this.initImageCanvas([pen]);
4100
4316
  };
@@ -4148,7 +4364,7 @@ var Meta2d = /** @class */ (function () {
4148
4364
  * @param pens 画笔
4149
4365
  */
4150
4366
  Meta2d.prototype.up = function (pens) {
4151
- var e_17, _a;
4367
+ var e_16, _a;
4152
4368
  var _this = this;
4153
4369
  if (!pens)
4154
4370
  pens = this.store.active;
@@ -4203,12 +4419,12 @@ var Meta2d = /** @class */ (function () {
4203
4419
  _loop_7(pen);
4204
4420
  }
4205
4421
  }
4206
- catch (e_17_1) { e_17 = { error: e_17_1 }; }
4422
+ catch (e_16_1) { e_16 = { error: e_16_1 }; }
4207
4423
  finally {
4208
4424
  try {
4209
4425
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
4210
4426
  }
4211
- finally { if (e_17) throw e_17.error; }
4427
+ finally { if (e_16) throw e_16.error; }
4212
4428
  }
4213
4429
  this.store.emitter.emit('layer', { type: 'up', pens: pens });
4214
4430
  };
@@ -4217,7 +4433,7 @@ var Meta2d = /** @class */ (function () {
4217
4433
  * @param pen 画笔
4218
4434
  */
4219
4435
  Meta2d.prototype.down = function (pens) {
4220
- var e_18, _a;
4436
+ var e_17, _a;
4221
4437
  var _this = this;
4222
4438
  if (!pens)
4223
4439
  pens = this.store.active;
@@ -4274,12 +4490,12 @@ var Meta2d = /** @class */ (function () {
4274
4490
  _loop_9(pen);
4275
4491
  }
4276
4492
  }
4277
- catch (e_18_1) { e_18 = { error: e_18_1 }; }
4493
+ catch (e_17_1) { e_17 = { error: e_17_1 }; }
4278
4494
  finally {
4279
4495
  try {
4280
4496
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
4281
4497
  }
4282
- finally { if (e_18) throw e_18.error; }
4498
+ finally { if (e_17) throw e_17.error; }
4283
4499
  }
4284
4500
  this.store.emitter.emit('layer', { type: 'down', pens: pens });
4285
4501
  };
@@ -4359,7 +4575,7 @@ var Meta2d = /** @class */ (function () {
4359
4575
  var nextNodes_1 = [];
4360
4576
  // 2. 遍历出线的 nextNode
4361
4577
  lines.forEach(function (line) {
4362
- var e_19, _a;
4578
+ var e_18, _a;
4363
4579
  var lineNextNode = _this.nextNode(line);
4364
4580
  var _loop_11 = function (node) {
4365
4581
  var have = nextNodes_1.find(function (next) { return next.id === node.id; });
@@ -4372,12 +4588,12 @@ var Meta2d = /** @class */ (function () {
4372
4588
  _loop_11(node);
4373
4589
  }
4374
4590
  }
4375
- catch (e_19_1) { e_19 = { error: e_19_1 }; }
4591
+ catch (e_18_1) { e_18 = { error: e_18_1 }; }
4376
4592
  finally {
4377
4593
  try {
4378
4594
  if (lineNextNode_1_1 && !lineNextNode_1_1.done && (_a = lineNextNode_1.return)) _a.call(lineNextNode_1);
4379
4595
  }
4380
- finally { if (e_19) throw e_19.error; }
4596
+ finally { if (e_18) throw e_18.error; }
4381
4597
  }
4382
4598
  });
4383
4599
  return nextNodes_1;
@@ -4400,7 +4616,7 @@ var Meta2d = /** @class */ (function () {
4400
4616
  var preNodes_1 = [];
4401
4617
  // 2. 遍历入线的 preNode
4402
4618
  lines.forEach(function (line) {
4403
- var e_20, _a;
4619
+ var e_19, _a;
4404
4620
  var linePreNode = _this.previousNode(line);
4405
4621
  var _loop_12 = function (node) {
4406
4622
  var have = preNodes_1.find(function (pre) { return pre.id === node.id; });
@@ -4413,12 +4629,12 @@ var Meta2d = /** @class */ (function () {
4413
4629
  _loop_12(node);
4414
4630
  }
4415
4631
  }
4416
- catch (e_20_1) { e_20 = { error: e_20_1 }; }
4632
+ catch (e_19_1) { e_19 = { error: e_19_1 }; }
4417
4633
  finally {
4418
4634
  try {
4419
4635
  if (linePreNode_1_1 && !linePreNode_1_1.done && (_a = linePreNode_1.return)) _a.call(linePreNode_1);
4420
4636
  }
4421
- finally { if (e_20) throw e_20.error; }
4637
+ finally { if (e_19) throw e_19.error; }
4422
4638
  }
4423
4639
  });
4424
4640
  return preNodes_1;
@@ -4765,7 +4981,7 @@ var Meta2d = /** @class */ (function () {
4765
4981
  });
4766
4982
  };
4767
4983
  Meta2d.prototype.setVisible = function (pen, visible, render) {
4768
- var e_21, _a;
4984
+ var e_20, _a;
4769
4985
  if (render === void 0) { render = true; }
4770
4986
  this.onSizeUpdate();
4771
4987
  this.setValue({ id: pen.id, visible: visible }, { render: false, doEvent: false });
@@ -4777,12 +4993,12 @@ var Meta2d = /** @class */ (function () {
4777
4993
  child && this.setVisible(child, visible, false);
4778
4994
  }
4779
4995
  }
4780
- catch (e_21_1) { e_21 = { error: e_21_1 }; }
4996
+ catch (e_20_1) { e_20 = { error: e_20_1 }; }
4781
4997
  finally {
4782
4998
  try {
4783
4999
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
4784
5000
  }
4785
- finally { if (e_21) throw e_21.error; }
5001
+ finally { if (e_20) throw e_20.error; }
4786
5002
  }
4787
5003
  }
4788
5004
  var allPens = getAllChildren(pen, this.store);