@meta2d/core 1.0.17 → 1.0.18

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
@@ -86,7 +86,7 @@ import { Canvas } from './canvas';
86
86
  import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, } from './pen';
87
87
  import { rotatePoint } from './point';
88
88
  import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
89
- import { formatPadding, s8, valueInArray, valueInRange, } from './utils';
89
+ import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
90
90
  import { calcCenter, calcRelativeRect, getRect, rectInRect, } from './rect';
91
91
  import { deepClone } from './utils/clone';
92
92
  import { EventAction } from './event';
@@ -770,7 +770,8 @@ var Meta2d = /** @class */ (function () {
770
770
  this.store.patchFlagsTop = true;
771
771
  };
772
772
  Meta2d.prototype.open = function (data, render) {
773
- var e_1, _a, e_2, _b;
773
+ var e_1, _a, e_2, _b, e_3, _c;
774
+ var _this = this;
774
775
  if (render === void 0) { render = true; }
775
776
  this.clear(false);
776
777
  if (data) {
@@ -779,8 +780,8 @@ var Meta2d = /** @class */ (function () {
779
780
  this.store.data.pens = [];
780
781
  try {
781
782
  // 第一遍赋初值
782
- for (var _c = __values(data.pens), _e = _c.next(); !_e.done; _e = _c.next()) {
783
- var pen = _e.value;
783
+ for (var _e = __values(data.pens), _f = _e.next(); !_f.done; _f = _e.next()) {
784
+ var pen = _f.value;
784
785
  if (!pen.id) {
785
786
  pen.id = s8();
786
787
  }
@@ -791,20 +792,20 @@ var Meta2d = /** @class */ (function () {
791
792
  catch (e_1_1) { e_1 = { error: e_1_1 }; }
792
793
  finally {
793
794
  try {
794
- if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
795
+ if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
795
796
  }
796
797
  finally { if (e_1) throw e_1.error; }
797
798
  }
798
799
  try {
799
- for (var _f = __values(data.pens), _g = _f.next(); !_g.done; _g = _f.next()) {
800
- var pen = _g.value;
800
+ for (var _g = __values(data.pens), _h = _g.next(); !_h.done; _h = _g.next()) {
801
+ var pen = _h.value;
801
802
  this.canvas.makePen(pen);
802
803
  }
803
804
  }
804
805
  catch (e_2_1) { e_2 = { error: e_2_1 }; }
805
806
  finally {
806
807
  try {
807
- if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
808
+ if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
808
809
  }
809
810
  finally { if (e_2) throw e_2.error; }
810
811
  }
@@ -819,6 +820,23 @@ var Meta2d = /** @class */ (function () {
819
820
  this.startAnimate();
820
821
  this.startVideo();
821
822
  this.doInitJS();
823
+ if (this.store.data.iconUrls) {
824
+ try {
825
+ for (var _j = __values(this.store.data.iconUrls), _k = _j.next(); !_k.done; _k = _j.next()) {
826
+ var item = _k.value;
827
+ loadCss(item, function () {
828
+ _this.render();
829
+ });
830
+ }
831
+ }
832
+ catch (e_3_1) { e_3 = { error: e_3_1 }; }
833
+ finally {
834
+ try {
835
+ if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
836
+ }
837
+ finally { if (e_3) throw e_3.error; }
838
+ }
839
+ }
822
840
  this.store.emitter.emit('opened');
823
841
  if (this.canvas.scroll && this.canvas.scroll.isShow) {
824
842
  this.canvas.scroll.init();
@@ -982,7 +1000,7 @@ var Meta2d = /** @class */ (function () {
982
1000
  * @param render 是否重绘
983
1001
  */
984
1002
  Meta2d.prototype.clear = function (render) {
985
- var e_3, _a;
1003
+ var e_4, _a;
986
1004
  var _b;
987
1005
  if (render === void 0) { render = true; }
988
1006
  try {
@@ -991,12 +1009,12 @@ var Meta2d = /** @class */ (function () {
991
1009
  (_b = pen.onDestroy) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
992
1010
  }
993
1011
  }
994
- catch (e_3_1) { e_3 = { error: e_3_1 }; }
1012
+ catch (e_4_1) { e_4 = { error: e_4_1 }; }
995
1013
  finally {
996
1014
  try {
997
1015
  if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
998
1016
  }
999
- finally { if (e_3) throw e_3.error; }
1017
+ finally { if (e_4) throw e_4.error; }
1000
1018
  }
1001
1019
  clearStore(this.store);
1002
1020
  this.hideInput();
@@ -2120,7 +2138,7 @@ var Meta2d = /** @class */ (function () {
2120
2138
  * @param padding 上右下左的内边距
2121
2139
  */
2122
2140
  Meta2d.prototype.downloadPng = function (name, padding) {
2123
- var e_4, _a;
2141
+ var e_5, _a;
2124
2142
  var _this = this;
2125
2143
  var _b;
2126
2144
  try {
@@ -2132,12 +2150,12 @@ var Meta2d = /** @class */ (function () {
2132
2150
  }
2133
2151
  }
2134
2152
  }
2135
- catch (e_4_1) { e_4 = { error: e_4_1 }; }
2153
+ catch (e_5_1) { e_5 = { error: e_5_1 }; }
2136
2154
  finally {
2137
2155
  try {
2138
2156
  if (_e && !_e.done && (_a = _c.return)) _a.call(_c);
2139
2157
  }
2140
- finally { if (e_4) throw e_4.error; }
2158
+ finally { if (e_5) throw e_5.error; }
2141
2159
  }
2142
2160
  setTimeout(function () {
2143
2161
  var a = document.createElement('a');
@@ -2467,7 +2485,7 @@ var Meta2d = /** @class */ (function () {
2467
2485
  this.formatPainter();
2468
2486
  };
2469
2487
  Meta2d.prototype.alignNodes = function (align, pens, rect) {
2470
- var e_5, _a;
2488
+ var e_6, _a;
2471
2489
  if (pens === void 0) { pens = this.store.data.pens; }
2472
2490
  !rect && (rect = this.getPenRect(this.getRect(pens)));
2473
2491
  var initPens = deepClone(pens); // 原 pens ,深拷贝一下
@@ -2477,12 +2495,12 @@ var Meta2d = /** @class */ (function () {
2477
2495
  this.alignPen(align, item, rect);
2478
2496
  }
2479
2497
  }
2480
- catch (e_5_1) { e_5 = { error: e_5_1 }; }
2498
+ catch (e_6_1) { e_6 = { error: e_6_1 }; }
2481
2499
  finally {
2482
2500
  try {
2483
2501
  if (pens_1_1 && !pens_1_1.done && (_a = pens_1.return)) _a.call(pens_1);
2484
2502
  }
2485
- finally { if (e_5) throw e_5.error; }
2503
+ finally { if (e_6) throw e_6.error; }
2486
2504
  }
2487
2505
  this.render();
2488
2506
  this.pushHistory({
@@ -2571,7 +2589,7 @@ var Meta2d = /** @class */ (function () {
2571
2589
  * @param distance 总的宽 or 高
2572
2590
  */
2573
2591
  Meta2d.prototype.spaceBetweenByDirection = function (direction, pens, distance) {
2574
- var e_6, _a;
2592
+ var e_7, _a;
2575
2593
  var _this = this;
2576
2594
  if (pens === void 0) { pens = this.store.data.pens; }
2577
2595
  !distance && (distance = this.getPenRect(this.getRect(pens))[direction]);
@@ -2605,12 +2623,12 @@ var Meta2d = /** @class */ (function () {
2605
2623
  this.setValue(__assign({ id: pen.id }, penRect), { render: false, doEvent: false });
2606
2624
  }
2607
2625
  }
2608
- catch (e_6_1) { e_6 = { error: e_6_1 }; }
2626
+ catch (e_7_1) { e_7 = { error: e_7_1 }; }
2609
2627
  finally {
2610
2628
  try {
2611
2629
  if (pens_2_1 && !pens_2_1.done && (_a = pens_2.return)) _a.call(pens_2);
2612
2630
  }
2613
- finally { if (e_6) throw e_6.error; }
2631
+ finally { if (e_7) throw e_7.error; }
2614
2632
  }
2615
2633
  this.render();
2616
2634
  this.pushHistory({
@@ -2724,22 +2742,52 @@ var Meta2d = /** @class */ (function () {
2724
2742
  };
2725
2743
  /**
2726
2744
  * 将该画笔置顶,即放到数组最后,最后绘制即在顶部
2727
- * @param pen pen 置顶的画笔
2745
+ * @param pens pen 置顶的画笔
2728
2746
  */
2729
- Meta2d.prototype.top = function (pen) {
2747
+ Meta2d.prototype.top = function (pens) {
2748
+ var e_8, _a;
2730
2749
  var _this = this;
2731
- var pens = this.store.data.pens;
2732
- // 获取它包含它的子节点
2733
- var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false).map(function (p) { return p.id; });
2734
- var allPens = pens.filter(function (p) { return allIds.includes(p.id); });
2735
- allPens.forEach(function (pen) {
2736
- var index = pens.findIndex(function (p) { return p.id === pen.id; });
2737
- if (index > -1) {
2738
- pens.push(pens[index]);
2739
- pens.splice(index, 1);
2740
- _this.initImageCanvas([pen]);
2750
+ if (!pens)
2751
+ pens = this.store.active;
2752
+ if (!Array.isArray(pens))
2753
+ pens = [pens]; // 兼容
2754
+ var _loop_3 = function (pen) {
2755
+ var _pens = this_1.store.data.pens;
2756
+ // 获取它包含它的子节点
2757
+ var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_1.store)), false), [pen], false).map(function (p) { return p.id; });
2758
+ var allPens = _pens.filter(function (p) { return allIds.includes(p.id); });
2759
+ allPens.forEach(function (pen) {
2760
+ var index = _pens.findIndex(function (p) { return p.id === pen.id; });
2761
+ if (index > -1) {
2762
+ _pens.push(_pens[index]);
2763
+ _pens.splice(index, 1);
2764
+ _this.initImageCanvas([pen]);
2765
+ }
2766
+ });
2767
+ //image
2768
+ if (pen.image && pen.name !== 'gif') {
2769
+ this_1.setValue({ id: pen.id, isBottom: false }, { render: false, doEvent: false, history: false });
2741
2770
  }
2742
- });
2771
+ //dom
2772
+ if (pen.externElement || pen.name === 'gif') {
2773
+ pen.calculative.canvas.maxZindex += 1;
2774
+ this_1.setValue({ id: pen.id, zIndex: pen.calculative.canvas.maxZindex }, { render: false, doEvent: false, history: false });
2775
+ }
2776
+ };
2777
+ var this_1 = this;
2778
+ try {
2779
+ for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
2780
+ var pen = _c.value;
2781
+ _loop_3(pen);
2782
+ }
2783
+ }
2784
+ catch (e_8_1) { e_8 = { error: e_8_1 }; }
2785
+ finally {
2786
+ try {
2787
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
2788
+ }
2789
+ finally { if (e_8) throw e_8.error; }
2790
+ }
2743
2791
  };
2744
2792
  /**
2745
2793
  * 若本次改变的画笔存在图片,并且在上层 or 下层,需要擦除上层 or 下层
@@ -2753,23 +2801,51 @@ var Meta2d = /** @class */ (function () {
2753
2801
  * 该画笔置底,即放到数组最前,最后绘制即在底部
2754
2802
  * @param pens 画笔们,注意 pen 必须在该数组内才有效
2755
2803
  */
2756
- Meta2d.prototype.bottom = function (pen) {
2757
- var pens = this.store.data.pens;
2758
- var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false).map(function (p) { return p.id; });
2759
- var allPens = pens.filter(function (p) { return allIds.includes(p.id); });
2760
- var _loop_3 = function (i) {
2761
- var pen_1 = allPens[i];
2762
- var index = pens.findIndex(function (p) { return p.id === pen_1.id; });
2763
- if (index > -1) {
2764
- pens.unshift(pens[index]);
2765
- pens.splice(index + 1, 1);
2766
- this_1.initImageCanvas([pen_1]);
2804
+ Meta2d.prototype.bottom = function (pens) {
2805
+ var e_9, _a;
2806
+ if (!pens)
2807
+ pens = this.store.active;
2808
+ if (!Array.isArray(pens))
2809
+ pens = [pens]; // 兼容
2810
+ var _loop_4 = function (pen) {
2811
+ var _pens = this_2.store.data.pens;
2812
+ var allIds = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_2.store)), false), [pen], false).map(function (p) { return p.id; });
2813
+ var allPens = _pens.filter(function (p) { return allIds.includes(p.id); });
2814
+ var _loop_5 = function (i) {
2815
+ var pen_1 = allPens[i];
2816
+ var index = _pens.findIndex(function (p) { return p.id === pen_1.id; });
2817
+ if (index > -1) {
2818
+ _pens.unshift(_pens[index]);
2819
+ _pens.splice(index + 1, 1);
2820
+ this_2.initImageCanvas([pen_1]);
2821
+ }
2822
+ };
2823
+ // 从后往前,保证 allPens 顺序不变
2824
+ for (var i = allPens.length - 1; i >= 0; i--) {
2825
+ _loop_5(i);
2826
+ }
2827
+ //image
2828
+ if (pen.image && pen.name !== 'gif') {
2829
+ this_2.setValue({ id: pen.id, isBottom: true }, { render: false, doEvent: false, history: false });
2830
+ }
2831
+ //dom
2832
+ if (pen.externElement || pen.name === 'gif') {
2833
+ this_2.setValue({ id: pen.id, zIndex: 0 }, { render: false, doEvent: false, history: false });
2767
2834
  }
2768
2835
  };
2769
- var this_1 = this;
2770
- // 从后往前,保证 allPens 顺序不变
2771
- for (var i = allPens.length - 1; i >= 0; i--) {
2772
- _loop_3(i);
2836
+ var this_2 = this;
2837
+ try {
2838
+ for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
2839
+ var pen = _c.value;
2840
+ _loop_4(pen);
2841
+ }
2842
+ }
2843
+ catch (e_9_1) { e_9 = { error: e_9_1 }; }
2844
+ finally {
2845
+ try {
2846
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
2847
+ }
2848
+ finally { if (e_9) throw e_9.error; }
2773
2849
  }
2774
2850
  };
2775
2851
  /**
@@ -2778,7 +2854,7 @@ var Meta2d = /** @class */ (function () {
2778
2854
  * @param pen 画笔
2779
2855
  */
2780
2856
  Meta2d.prototype.upByArea = function (pen) {
2781
- var _a, e_7, _b;
2857
+ var _a, e_10, _b;
2782
2858
  var _this = this;
2783
2859
  var index = this.store.data.pens.findIndex(function (p) { return p.id === pen.id; });
2784
2860
  if (index === -1) {
@@ -2814,111 +2890,174 @@ var Meta2d = /** @class */ (function () {
2814
2890
  return;
2815
2891
  }
2816
2892
  (_a = this.store.data.pens).splice.apply(_a, __spreadArray([nextHitIndex + 1, 0], __read(allPens), false));
2817
- var _loop_4 = function (pen_2) {
2818
- var index_1 = this_2.store.data.pens.findIndex(function (p) { return p.id === pen_2.id; });
2893
+ var _loop_6 = function (pen_2) {
2894
+ var index_1 = this_3.store.data.pens.findIndex(function (p) { return p.id === pen_2.id; });
2819
2895
  if (index_1 > -1) {
2820
- this_2.store.data.pens.splice(index_1, 1);
2896
+ this_3.store.data.pens.splice(index_1, 1);
2821
2897
  }
2822
2898
  };
2823
- var this_2 = this;
2899
+ var this_3 = this;
2824
2900
  try {
2825
2901
  // 删除靠前的 allPens
2826
2902
  for (var allPens_1 = __values(allPens), allPens_1_1 = allPens_1.next(); !allPens_1_1.done; allPens_1_1 = allPens_1.next()) {
2827
2903
  var pen_2 = allPens_1_1.value;
2828
- _loop_4(pen_2);
2904
+ _loop_6(pen_2);
2829
2905
  }
2830
2906
  }
2831
- catch (e_7_1) { e_7 = { error: e_7_1 }; }
2907
+ catch (e_10_1) { e_10 = { error: e_10_1 }; }
2832
2908
  finally {
2833
2909
  try {
2834
2910
  if (allPens_1_1 && !allPens_1_1.done && (_b = allPens_1.return)) _b.call(allPens_1);
2835
2911
  }
2836
- finally { if (e_7) throw e_7.error; }
2912
+ finally { if (e_10) throw e_10.error; }
2837
2913
  }
2838
2914
  this.initImageCanvas([pen]);
2839
2915
  };
2840
2916
  /**
2841
2917
  * 该画笔上移,即把该画笔在数组中的位置向后移动一个
2842
- * @param pen 画笔
2918
+ * @param pens 画笔
2843
2919
  */
2844
- Meta2d.prototype.up = function (pen) {
2845
- var pens = this.store.data.pens;
2846
- if (pen.children) {
2847
- //组合图元
2848
- var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false);
2849
- //先保证组合图元的顺序正确。
2850
- var orderPens = [];
2851
- var _loop_5 = function (index) {
2852
- var _pen = pens[index];
2853
- if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
2854
- _pen.temIndex = index;
2855
- orderPens.push(_pen);
2920
+ Meta2d.prototype.up = function (pens) {
2921
+ var e_11, _a;
2922
+ if (!pens)
2923
+ pens = this.store.active;
2924
+ if (!Array.isArray(pens))
2925
+ pens = [pens]; // 兼容
2926
+ var _loop_7 = function (pen) {
2927
+ var _pens = this_4.store.data.pens;
2928
+ if (pen.children) {
2929
+ //组合图元
2930
+ var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_4.store)), false), [pen], false);
2931
+ //先保证组合图元的顺序正确。
2932
+ var orderPens = [];
2933
+ var _loop_8 = function (index) {
2934
+ var _pen = _pens[index];
2935
+ if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
2936
+ _pen.temIndex = index;
2937
+ orderPens.push(_pen);
2938
+ }
2939
+ };
2940
+ for (var index = 0; index < _pens.length; index++) {
2941
+ _loop_8(index);
2856
2942
  }
2857
- };
2858
- for (var index = 0; index < pens.length; index++) {
2859
- _loop_5(index);
2860
- }
2861
- var lastIndex_1 = -1;
2862
- var offset_1 = 0;
2863
- orderPens.forEach(function (_pen) {
2864
- _pen.temIndex -= offset_1;
2865
- pens.splice(_pen.temIndex, 1);
2866
- offset_1 += 1;
2867
- lastIndex_1 = _pen.temIndex;
2868
- delete _pen.temIndex;
2869
- });
2870
- pens.splice.apply(pens, __spreadArray([lastIndex_1 + 1, 0], __read(preMovePens), false));
2943
+ var lastIndex_1 = -1;
2944
+ var offset_1 = 0;
2945
+ orderPens.forEach(function (_pen) {
2946
+ _pen.temIndex -= offset_1;
2947
+ _pens.splice(_pen.temIndex, 1);
2948
+ offset_1 += 1;
2949
+ lastIndex_1 = _pen.temIndex;
2950
+ delete _pen.temIndex;
2951
+ });
2952
+ _pens.splice.apply(_pens, __spreadArray([lastIndex_1 + 1, 0], __read(preMovePens), false));
2953
+ }
2954
+ else {
2955
+ var index = _pens.findIndex(function (p) { return p.id === pen.id; });
2956
+ if (index > -1 && index !== _pens.length - 1) {
2957
+ _pens.splice(index + 2, 0, _pens[index]);
2958
+ _pens.splice(index, 1);
2959
+ this_4.initImageCanvas([pen]);
2960
+ }
2961
+ }
2962
+ //image
2963
+ if (pen.image && pen.name !== 'gif') {
2964
+ this_4.setValue({ id: pen.id, isBottom: false }, { render: false, doEvent: false, history: false });
2965
+ }
2966
+ //dom
2967
+ if (pen.externElement || pen.name === 'gif') {
2968
+ var zIndex = pen.calculative.zIndex === undefined ? 5 : pen.calculative.zIndex + 1;
2969
+ this_4.setValue({ id: pen.id, zIndex: zIndex }, { render: false, doEvent: false, history: false });
2970
+ }
2971
+ };
2972
+ var this_4 = this;
2973
+ try {
2974
+ for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
2975
+ var pen = _c.value;
2976
+ _loop_7(pen);
2977
+ }
2871
2978
  }
2872
- else {
2873
- var index = pens.findIndex(function (p) { return p.id === pen.id; });
2874
- if (index > -1 && index !== pens.length - 1) {
2875
- pens.splice(index + 2, 0, pens[index]);
2876
- pens.splice(index, 1);
2877
- this.initImageCanvas([pen]);
2979
+ catch (e_11_1) { e_11 = { error: e_11_1 }; }
2980
+ finally {
2981
+ try {
2982
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
2878
2983
  }
2984
+ finally { if (e_11) throw e_11.error; }
2879
2985
  }
2880
2986
  };
2881
2987
  /**
2882
2988
  * 该画笔下移,即把该画笔在该数组中的位置前移一个
2883
2989
  * @param pen 画笔
2884
2990
  */
2885
- Meta2d.prototype.down = function (pen) {
2886
- var pens = this.store.data.pens;
2887
- if (pen.children) {
2888
- //组合图元
2889
- var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this.store)), false), [pen], false);
2890
- //先保证组合图元的顺序正确。
2891
- var orderPens = [];
2892
- var _loop_6 = function (index) {
2893
- var _pen = pens[index];
2894
- if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
2895
- _pen.temIndex = index;
2896
- orderPens.push(_pen);
2991
+ Meta2d.prototype.down = function (pens) {
2992
+ var e_12, _a;
2993
+ if (!pens)
2994
+ pens = this.store.active;
2995
+ if (!Array.isArray(pens))
2996
+ pens = [pens]; // 兼容
2997
+ var _loop_9 = function (pen) {
2998
+ var _pens = this_5.store.data.pens;
2999
+ if (pen.children) {
3000
+ //组合图元
3001
+ var preMovePens = __spreadArray(__spreadArray([], __read(getAllChildren(pen, this_5.store)), false), [pen], false);
3002
+ //先保证组合图元的顺序正确。
3003
+ var orderPens = [];
3004
+ var _loop_10 = function (index) {
3005
+ var _pen = _pens[index];
3006
+ if (preMovePens.findIndex(function (p) { return p.id === _pen.id; }) !== -1) {
3007
+ _pen.temIndex = index;
3008
+ orderPens.push(_pen);
3009
+ }
3010
+ };
3011
+ for (var index = 0; index < _pens.length; index++) {
3012
+ _loop_10(index);
2897
3013
  }
2898
- };
2899
- for (var index = 0; index < pens.length; index++) {
2900
- _loop_6(index);
2901
- }
2902
- var firstIndex_1 = -1;
2903
- var offset_2 = 0;
2904
- orderPens.forEach(function (_pen, index) {
2905
- _pen.temIndex -= offset_2;
2906
- pens.splice(_pen.temIndex, 1);
2907
- offset_2 += 1;
2908
- if (index === 0) {
2909
- firstIndex_1 = _pen.temIndex;
3014
+ var firstIndex_1 = -1;
3015
+ var offset_2 = 0;
3016
+ orderPens.forEach(function (_pen, index) {
3017
+ _pen.temIndex -= offset_2;
3018
+ _pens.splice(_pen.temIndex, 1);
3019
+ offset_2 += 1;
3020
+ if (index === 0) {
3021
+ firstIndex_1 = _pen.temIndex;
3022
+ }
3023
+ delete _pen.temIndex;
3024
+ });
3025
+ _pens.splice.apply(_pens, __spreadArray([firstIndex_1 - 1, 0], __read(preMovePens), false));
3026
+ }
3027
+ else {
3028
+ var index = _pens.findIndex(function (p) { return p.id === pen.id; });
3029
+ if (index > -1 && index !== 0) {
3030
+ _pens.splice(index - 1, 0, _pens[index]);
3031
+ _pens.splice(index + 1, 1);
3032
+ this_5.initImageCanvas([pen]);
2910
3033
  }
2911
- delete _pen.temIndex;
2912
- });
2913
- pens.splice.apply(pens, __spreadArray([firstIndex_1 - 1, 0], __read(preMovePens), false));
3034
+ }
3035
+ //image
3036
+ if (pen.image && pen.name !== 'gif') {
3037
+ this_5.setValue({ id: pen.id, isBottom: true }, { render: false, doEvent: false, history: false });
3038
+ }
3039
+ //dom
3040
+ if (pen.externElement || pen.name === 'gif') {
3041
+ var zIndex = pen.calculative.zIndex === undefined ? 3 : pen.calculative.zIndex - 1;
3042
+ if (zIndex < 0) {
3043
+ zIndex = 0;
3044
+ }
3045
+ this_5.setValue({ id: pen.id, zIndex: zIndex }, { render: false, doEvent: false, history: false });
3046
+ }
3047
+ };
3048
+ var this_5 = this;
3049
+ try {
3050
+ for (var _b = __values(pens), _c = _b.next(); !_c.done; _c = _b.next()) {
3051
+ var pen = _c.value;
3052
+ _loop_9(pen);
3053
+ }
2914
3054
  }
2915
- else {
2916
- var index = pens.findIndex(function (p) { return p.id === pen.id; });
2917
- if (index > -1 && index !== 0) {
2918
- pens.splice(index - 1, 0, pens[index]);
2919
- pens.splice(index + 1, 1);
2920
- this.initImageCanvas([pen]);
3055
+ catch (e_12_1) { e_12 = { error: e_12_1 }; }
3056
+ finally {
3057
+ try {
3058
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
2921
3059
  }
3060
+ finally { if (e_12) throw e_12.error; }
2922
3061
  }
2923
3062
  };
2924
3063
  Meta2d.prototype.setLayer = function (pen, toIndex, pens) {
@@ -2993,9 +3132,9 @@ var Meta2d = /** @class */ (function () {
2993
3132
  var nextNodes_1 = [];
2994
3133
  // 2. 遍历出线的 nextNode
2995
3134
  lines.forEach(function (line) {
2996
- var e_8, _a;
3135
+ var e_13, _a;
2997
3136
  var lineNextNode = _this.nextNode(line);
2998
- var _loop_7 = function (node) {
3137
+ var _loop_11 = function (node) {
2999
3138
  var have = nextNodes_1.find(function (next) { return next.id === node.id; });
3000
3139
  // 3. 不重复的才加进去
3001
3140
  !have && nextNodes_1.push(node);
@@ -3003,15 +3142,15 @@ var Meta2d = /** @class */ (function () {
3003
3142
  try {
3004
3143
  for (var lineNextNode_1 = __values(lineNextNode), lineNextNode_1_1 = lineNextNode_1.next(); !lineNextNode_1_1.done; lineNextNode_1_1 = lineNextNode_1.next()) {
3005
3144
  var node = lineNextNode_1_1.value;
3006
- _loop_7(node);
3145
+ _loop_11(node);
3007
3146
  }
3008
3147
  }
3009
- catch (e_8_1) { e_8 = { error: e_8_1 }; }
3148
+ catch (e_13_1) { e_13 = { error: e_13_1 }; }
3010
3149
  finally {
3011
3150
  try {
3012
3151
  if (lineNextNode_1_1 && !lineNextNode_1_1.done && (_a = lineNextNode_1.return)) _a.call(lineNextNode_1);
3013
3152
  }
3014
- finally { if (e_8) throw e_8.error; }
3153
+ finally { if (e_13) throw e_13.error; }
3015
3154
  }
3016
3155
  });
3017
3156
  return nextNodes_1;
@@ -3034,9 +3173,9 @@ var Meta2d = /** @class */ (function () {
3034
3173
  var preNodes_1 = [];
3035
3174
  // 2. 遍历入线的 preNode
3036
3175
  lines.forEach(function (line) {
3037
- var e_9, _a;
3176
+ var e_14, _a;
3038
3177
  var linePreNode = _this.previousNode(line);
3039
- var _loop_8 = function (node) {
3178
+ var _loop_12 = function (node) {
3040
3179
  var have = preNodes_1.find(function (pre) { return pre.id === node.id; });
3041
3180
  // 3. 不重复的才加进去
3042
3181
  !have && preNodes_1.push(node);
@@ -3044,15 +3183,15 @@ var Meta2d = /** @class */ (function () {
3044
3183
  try {
3045
3184
  for (var linePreNode_1 = __values(linePreNode), linePreNode_1_1 = linePreNode_1.next(); !linePreNode_1_1.done; linePreNode_1_1 = linePreNode_1.next()) {
3046
3185
  var node = linePreNode_1_1.value;
3047
- _loop_8(node);
3186
+ _loop_12(node);
3048
3187
  }
3049
3188
  }
3050
- catch (e_9_1) { e_9 = { error: e_9_1 }; }
3189
+ catch (e_14_1) { e_14 = { error: e_14_1 }; }
3051
3190
  finally {
3052
3191
  try {
3053
3192
  if (linePreNode_1_1 && !linePreNode_1_1.done && (_a = linePreNode_1.return)) _a.call(linePreNode_1);
3054
3193
  }
3055
- finally { if (e_9) throw e_9.error; }
3194
+ finally { if (e_14) throw e_14.error; }
3056
3195
  }
3057
3196
  });
3058
3197
  return preNodes_1;
@@ -3328,7 +3467,7 @@ var Meta2d = /** @class */ (function () {
3328
3467
  : deepClone(__spreadArray([parent], __read(components), false));
3329
3468
  };
3330
3469
  Meta2d.prototype.setVisible = function (pen, visible, render) {
3331
- var e_10, _a;
3470
+ var e_15, _a;
3332
3471
  if (render === void 0) { render = true; }
3333
3472
  this.onSizeUpdate();
3334
3473
  this.setValue({ id: pen.id, visible: visible }, { render: false, doEvent: false });
@@ -3340,12 +3479,12 @@ var Meta2d = /** @class */ (function () {
3340
3479
  child && this.setVisible(child, visible, false);
3341
3480
  }
3342
3481
  }
3343
- catch (e_10_1) { e_10 = { error: e_10_1 }; }
3482
+ catch (e_15_1) { e_15 = { error: e_15_1 }; }
3344
3483
  finally {
3345
3484
  try {
3346
3485
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
3347
3486
  }
3348
- finally { if (e_10) throw e_10.error; }
3487
+ finally { if (e_15) throw e_15.error; }
3349
3488
  }
3350
3489
  }
3351
3490
  render && this.render();