@logicflow/extension 1.2.0-next.1 → 1.2.0-next.3

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.
Files changed (104) hide show
  1. package/cjs/NodeResize/Control/Control.js +71 -16
  2. package/cjs/NodeResize/Node/DiamondResize.js +24 -10
  3. package/cjs/NodeResize/Node/EllipseResize.js +24 -10
  4. package/cjs/NodeResize/Node/HtmlResize.js +24 -10
  5. package/cjs/NodeResize/Node/RectResize.js +24 -10
  6. package/cjs/bpmn-adapter/index.js +74 -122
  7. package/cjs/bpmn-adapter/json2xml.js +2 -4
  8. package/cjs/bpmn-adapter/xml2json.js +247 -2
  9. package/cjs/components/control/index.js +16 -16
  10. package/cjs/components/dnd-panel/index.js +21 -0
  11. package/cjs/components/highlight/index.js +0 -1
  12. package/cjs/components/menu/index.js +9 -9
  13. package/cjs/components/mini-map/index.js +223 -138
  14. package/cjs/components/selection-select/index.js +6 -19
  15. package/cjs/index.js +0 -1
  16. package/cjs/materials/curved-edge/index.js +19 -5
  17. package/cjs/materials/curved-edge/searchMiddleIndex.js +17 -0
  18. package/cjs/materials/group/GroupNode.js +34 -64
  19. package/cjs/materials/group/index.js +99 -70
  20. package/cjs/style/index.css +10 -0
  21. package/cjs/tools/auto-layout/index.js +1 -1
  22. package/es/NodeResize/Control/Control.d.ts +4 -1
  23. package/es/NodeResize/Control/Control.js +71 -16
  24. package/es/NodeResize/Node/DiamondResize.d.ts +3 -1
  25. package/es/NodeResize/Node/DiamondResize.js +24 -10
  26. package/es/NodeResize/Node/EllipseResize.d.ts +3 -1
  27. package/es/NodeResize/Node/EllipseResize.js +24 -10
  28. package/es/NodeResize/Node/HtmlResize.d.ts +3 -1
  29. package/es/NodeResize/Node/HtmlResize.js +24 -10
  30. package/es/NodeResize/Node/RectResize.d.ts +3 -1
  31. package/es/NodeResize/Node/RectResize.js +24 -10
  32. package/es/bpmn-adapter/index.d.ts +33 -41
  33. package/es/bpmn-adapter/index.js +74 -122
  34. package/es/bpmn-adapter/json2xml.js +2 -4
  35. package/es/bpmn-adapter/xml2json.js +247 -2
  36. package/es/components/control/index.d.ts +3 -2
  37. package/es/components/control/index.js +16 -16
  38. package/es/components/dnd-panel/index.js +21 -0
  39. package/es/components/highlight/index.js +0 -1
  40. package/es/components/menu/index.d.ts +3 -2
  41. package/es/components/menu/index.js +9 -9
  42. package/es/components/mini-map/index.d.ts +57 -45
  43. package/es/components/mini-map/index.js +223 -138
  44. package/es/components/selection-select/index.d.ts +0 -1
  45. package/es/components/selection-select/index.js +6 -19
  46. package/es/index.d.ts +0 -1
  47. package/es/index.js +0 -1
  48. package/es/materials/curved-edge/index.js +19 -5
  49. package/es/materials/curved-edge/searchMiddleIndex.d.ts +1 -0
  50. package/es/materials/curved-edge/searchMiddleIndex.js +14 -0
  51. package/es/materials/group/GroupNode.d.ts +5 -7
  52. package/es/materials/group/GroupNode.js +34 -64
  53. package/es/materials/group/index.d.ts +21 -1
  54. package/es/materials/group/index.js +99 -70
  55. package/es/style/index.css +10 -0
  56. package/es/tools/auto-layout/index.d.ts +1 -1
  57. package/es/tools/auto-layout/index.js +1 -1
  58. package/lib/AutoLayout.js +1 -1
  59. package/lib/BpmnAdapter.js +1 -1
  60. package/lib/BpmnElement.js +1 -1
  61. package/lib/ContextMenu.js +1 -1
  62. package/lib/Control.js +1 -1
  63. package/lib/CurvedEdge.js +1 -1
  64. package/lib/DndPanel.js +1 -1
  65. package/lib/FlowPath.js +1 -1
  66. package/lib/Group.js +1 -1
  67. package/lib/Highlight.js +1 -1
  68. package/lib/InsertNodeInPolyline.js +1 -1
  69. package/lib/Menu.js +1 -1
  70. package/lib/MiniMap.js +1 -1
  71. package/lib/NodeResize.js +1 -1
  72. package/lib/RectLabelNode.js +1 -1
  73. package/lib/SelectionSelect.js +1 -1
  74. package/lib/Snapshot.js +1 -1
  75. package/lib/TurboAdapter.js +1 -1
  76. package/lib/lfJson2Xml.js +1 -1
  77. package/lib/lfXml2Json.js +1 -1
  78. package/lib/style/index.css +10 -0
  79. package/package.json +3 -2
  80. package/types/NodeResize/Control/Control.d.ts +4 -1
  81. package/types/NodeResize/Node/DiamondResize.d.ts +3 -1
  82. package/types/NodeResize/Node/EllipseResize.d.ts +3 -1
  83. package/types/NodeResize/Node/HtmlResize.d.ts +3 -1
  84. package/types/NodeResize/Node/RectResize.d.ts +3 -1
  85. package/types/bpmn-adapter/index.d.ts +33 -41
  86. package/types/components/control/index.d.ts +3 -2
  87. package/types/components/menu/index.d.ts +3 -2
  88. package/types/components/mini-map/index.d.ts +57 -45
  89. package/types/components/selection-select/index.d.ts +0 -1
  90. package/types/index.d.ts +0 -1
  91. package/types/materials/curved-edge/searchMiddleIndex.d.ts +1 -0
  92. package/types/materials/group/GroupNode.d.ts +5 -7
  93. package/types/materials/group/index.d.ts +21 -1
  94. package/types/tools/auto-layout/index.d.ts +1 -1
  95. package/cjs/locale/en-locale/en.js +0 -22
  96. package/cjs/locale/en-locale/index.js +0 -29
  97. package/cjs/locale/locale.js +0 -19
  98. package/es/locale/en-locale/en.d.ts +0 -19
  99. package/es/locale/en-locale/en.js +0 -19
  100. package/es/locale/en-locale/index.d.ts +0 -9
  101. package/es/locale/en-locale/index.js +0 -26
  102. package/es/locale/locale.d.ts +0 -6
  103. package/es/locale/locale.js +0 -16
  104. package/lib/EnLocale.js +0 -1
@@ -12,134 +12,180 @@ var __values = (this && this.__values) || function(o) {
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.MiniMap = void 0;
15
+ var lodash_es_1 = require("lodash-es");
15
16
  var MiniMap = /** @class */ (function () {
16
17
  function MiniMap(_a) {
17
18
  var _this = this;
18
- var lf = _a.lf, LogicFlow = _a.LogicFlow;
19
- this.__lf = null;
20
- this.__container = null;
21
- this.__miniMapWrap = null;
22
- this.__miniMapContainer = null;
23
- this.__lfMap = null;
24
- this.__viewport = null;
25
- this.__width = 150;
26
- this.__height = 220;
27
- this.__miniMapWidth = 450;
28
- this.__miniMapHeight = 660;
29
- this.__viewPortTop = 0;
30
- this.__viewPortLeft = 0;
31
- this.__startPosition = null;
32
- this.__viewPortScale = 1;
33
- this.__viewPortWidth = 150;
34
- this.__viewPortHeight = 75;
35
- this.__resetDataX = 0;
36
- this.__resetDataY = 0;
37
- this.__LogicFlow = null;
38
- this.__isShow = false;
39
- this.__disabledPlugins = ['miniMap', 'control', 'selectionSelect'];
19
+ var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
20
+ this.lf = null;
21
+ this.container = null;
22
+ this.miniMapWrap = null;
23
+ this.miniMapContainer = null;
24
+ this.lfMap = null;
25
+ this.viewport = null;
26
+ this.width = 150;
27
+ this.height = 220;
28
+ this.leftPosition = undefined;
29
+ this.topPosition = undefined;
30
+ this.rightPosition = undefined;
31
+ this.bottomPosition = undefined;
32
+ this.miniMapWidth = 450;
33
+ this.miniMapHeight = 660;
34
+ this.viewPortTop = 0;
35
+ this.viewPortLeft = 0;
36
+ this.startPosition = null;
37
+ this.viewPortScale = 1;
38
+ this.viewPortWidth = 150;
39
+ this.viewPortHeight = 75;
40
+ this.resetDataX = 0;
41
+ this.resetDataY = 0;
42
+ this.LogicFlow = null;
43
+ this.isShow = false;
44
+ this.isShowHeader = true;
45
+ this.isShowCloseIcon = true;
46
+ this.dragging = false;
47
+ this.disabledPlugins = ['miniMap', 'control', 'selectionSelect'];
40
48
  /**
41
49
  * 显示mini map
42
- */
50
+ */
43
51
  this.show = function (leftPosition, topPosition) {
44
- _this.__setView();
45
- if (!_this.__isShow) {
46
- _this.__createMiniMap(leftPosition, topPosition);
52
+ _this.setView();
53
+ if (!_this.isShow) {
54
+ _this.createMiniMap(leftPosition, topPosition);
47
55
  }
48
- _this.__isShow = true;
56
+ _this.isShow = true;
49
57
  };
50
58
  /**
51
59
  * 隐藏mini map
52
60
  */
53
61
  this.hide = function () {
54
- if (_this.__isShow) {
55
- _this.__removeMiniMap();
62
+ if (_this.isShow) {
63
+ _this.removeMiniMap();
56
64
  }
57
- _this.__isShow = false;
65
+ _this.isShow = false;
66
+ };
67
+ this.reset = function () {
68
+ _this.lf.resetTranslate();
69
+ _this.lf.resetZoom();
70
+ _this.hide();
71
+ _this.show();
58
72
  };
59
- this.__startDrag = function (e) {
60
- document.addEventListener('mousemove', _this.__drag);
61
- document.addEventListener('mouseup', _this.__drop);
62
- _this.__startPosition = {
73
+ this.startDrag = function (e) {
74
+ document.addEventListener('mousemove', _this.drag);
75
+ document.addEventListener('mouseup', _this.drop);
76
+ _this.startPosition = {
63
77
  x: e.x,
64
78
  y: e.y,
65
79
  };
66
80
  };
67
81
  this.moveViewport = function (top, left) {
68
- var viewStyle = _this.__viewport.style;
69
- _this.__viewPortTop = top;
70
- _this.__viewPortLeft = left;
71
- viewStyle.top = _this.__viewPortTop + "px";
72
- viewStyle.left = _this.__viewPortLeft + "px";
82
+ var viewStyle = _this.viewport.style;
83
+ _this.viewPortTop = top;
84
+ _this.viewPortLeft = left;
85
+ viewStyle.top = _this.viewPortTop + "px";
86
+ viewStyle.left = _this.viewPortLeft + "px";
73
87
  };
74
- this.__drag = function (e) {
75
- var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
76
- var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
88
+ this.drag = function (e) {
89
+ _this.dragging = true;
90
+ var top = _this.viewPortTop + e.y - _this.startPosition.y;
91
+ var left = _this.viewPortLeft + e.x - _this.startPosition.x;
77
92
  _this.moveViewport(top, left);
78
- _this.__startPosition = {
93
+ _this.startPosition = {
79
94
  x: e.x,
80
95
  y: e.y,
81
96
  };
82
- var centerX = (_this.__viewPortLeft + _this.__viewPortWidth / 2)
83
- / _this.__viewPortScale;
84
- var centerY = (_this.__viewPortTop + _this.__viewPortHeight / 2)
85
- / _this.__viewPortScale;
86
- _this.__lf.focusOn({
97
+ var centerX = (_this.viewPortLeft + _this.viewPortWidth / 2)
98
+ / _this.viewPortScale;
99
+ var centerY = (_this.viewPortTop + _this.viewPortHeight / 2)
100
+ / _this.viewPortScale;
101
+ _this.lf.focusOn({
87
102
  coordinate: {
88
- x: centerX + _this.__resetDataX,
89
- y: centerY + _this.__resetDataY,
103
+ x: centerX + _this.resetDataX,
104
+ y: centerY + _this.resetDataY,
90
105
  },
91
106
  });
92
107
  };
93
- this.__drop = function () {
94
- document.removeEventListener('mousemove', _this.__drag);
95
- document.removeEventListener('mouseup', _this.__drop);
96
- var top = _this.__viewPortTop;
97
- var left = _this.__viewPortLeft;
98
- if (_this.__viewPortLeft > _this.__width) {
99
- left = _this.__width - _this.__viewPortWidth;
108
+ this.drop = function () {
109
+ document.removeEventListener('mousemove', _this.drag);
110
+ document.removeEventListener('mouseup', _this.drop);
111
+ var top = _this.viewPortTop;
112
+ var left = _this.viewPortLeft;
113
+ if (_this.viewPortLeft > _this.width) {
114
+ left = _this.width - _this.viewPortWidth;
100
115
  }
101
- if (_this.__viewPortTop > _this.__height) {
102
- top = _this.__height - _this.__viewPortHeight;
116
+ if (_this.viewPortTop > _this.height) {
117
+ top = _this.height - _this.viewPortHeight;
103
118
  }
104
- if (_this.__viewPortLeft < -_this.__width) {
119
+ if (_this.viewPortLeft < -_this.width) {
105
120
  left = 0;
106
121
  }
107
- if (_this.__viewPortTop < -_this.__height) {
122
+ if (_this.viewPortTop < -_this.height) {
108
123
  top = 0;
109
124
  }
110
125
  _this.moveViewport(top, left);
111
126
  };
112
- this.__lf = lf;
113
- this.__miniMapWidth = lf.graphModel.width;
114
- this.__miniMapHeight = (lf.graphModel.width * 220) / 150;
115
- this.__LogicFlow = LogicFlow;
116
- this.__init();
127
+ this.mapClick = function (e) {
128
+ if (_this.dragging) {
129
+ _this.dragging = false;
130
+ }
131
+ else {
132
+ var layerX = e.layerX, layerY = e.layerY;
133
+ var ViewPortCenterX = layerX;
134
+ var ViewPortCenterY = layerY;
135
+ var graphData = _this.lf.getGraphRawData();
136
+ var _a = _this.getBounds(graphData), left = _a.left, top_1 = _a.top;
137
+ var resetGraphX = left + ViewPortCenterX / _this.viewPortScale;
138
+ var resetGraphY = top_1 + ViewPortCenterY / _this.viewPortScale;
139
+ _this.lf.focusOn({ coordinate: { x: resetGraphX, y: resetGraphY } });
140
+ }
141
+ };
142
+ this.lf = lf;
143
+ if (options && options.MiniMap) {
144
+ this.setOption(options);
145
+ }
146
+ this.miniMapWidth = lf.graphModel.width;
147
+ this.miniMapHeight = (lf.graphModel.width * this.height) / this.width;
148
+ this.LogicFlow = LogicFlow;
149
+ this.initMiniMap();
117
150
  }
118
151
  MiniMap.prototype.render = function (lf, container) {
119
152
  var _this = this;
120
- this.__container = container;
121
- this.__lf.on('history:change', function () {
122
- if (_this.__isShow) {
123
- _this.__setView();
153
+ this.container = container;
154
+ this.lf.on('history:change', function () {
155
+ if (_this.isShow) {
156
+ _this.setView();
124
157
  }
125
158
  });
126
- this.__lf.on('blank:drop', function () {
127
- if (_this.__isShow) {
128
- _this.__setView();
159
+ this.lf.on('graph:transform', lodash_es_1.throttle(function () {
160
+ // 小地图已展示,并且没有拖拽小地图视口
161
+ if (_this.isShow && !_this.dragging) {
162
+ _this.setView();
129
163
  }
130
- });
164
+ }, 300));
131
165
  };
132
166
  MiniMap.prototype.init = function (option) {
133
- this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);
167
+ this.disabledPlugins = this.disabledPlugins.concat(option.disabledPlugins || []);
168
+ };
169
+ MiniMap.prototype.setOption = function (options) {
170
+ var _a = options.MiniMap, _b = _a.width, width = _b === void 0 ? 150 : _b, _c = _a.height, height = _c === void 0 ? 220 : _c, _d = _a.isShowHeader, isShowHeader = _d === void 0 ? true : _d, _e = _a.isShowCloseIcon, isShowCloseIcon = _e === void 0 ? true : _e, _f = _a.leftPosition, leftPosition = _f === void 0 ? 0 : _f, _g = _a.topPosition, topPosition = _g === void 0 ? 0 : _g, rightPosition = _a.rightPosition, bottomPosition = _a.bottomPosition;
171
+ this.width = width;
172
+ this.height = height;
173
+ this.isShowHeader = isShowHeader;
174
+ this.isShowCloseIcon = isShowCloseIcon;
175
+ this.viewPortWidth = width;
176
+ this.leftPosition = leftPosition;
177
+ this.topPosition = topPosition;
178
+ this.rightPosition = rightPosition;
179
+ this.bottomPosition = bottomPosition;
134
180
  };
135
- MiniMap.prototype.__init = function () {
181
+ MiniMap.prototype.initMiniMap = function () {
136
182
  var miniMapWrap = document.createElement('div');
137
183
  miniMapWrap.className = 'lf-mini-map-graph';
138
- miniMapWrap.style.width = this.__width + "px";
139
- miniMapWrap.style.height = this.__height + "px";
140
- this.__lfMap = new this.__LogicFlow({
141
- width: this.__lf.graphModel.width,
142
- height: (this.__lf.graphModel.width * 220) / 150,
184
+ miniMapWrap.style.width = this.width + 4 + "px";
185
+ miniMapWrap.style.height = this.height + "px";
186
+ this.lfMap = new this.LogicFlow({
187
+ width: this.lf.graphModel.width,
188
+ height: (this.lf.graphModel.width * this.height) / this.width,
143
189
  container: miniMapWrap,
144
190
  isSilentMode: true,
145
191
  stopZoomGraph: true,
@@ -147,48 +193,68 @@ var MiniMap = /** @class */ (function () {
147
193
  stopMoveGraph: true,
148
194
  hideAnchors: true,
149
195
  hoverOutline: false,
150
- disabledPlugins: this.__disabledPlugins,
196
+ disabledPlugins: this.disabledPlugins,
151
197
  });
152
198
  // minimap中禁用adapter。
153
- this.__lfMap.adapterIn = function (a) { return a; };
154
- this.__lfMap.adapterOut = function (a) { return a; };
155
- this.__miniMapWrap = miniMapWrap;
156
- this.__createViewPort();
199
+ this.lfMap.adapterIn = function (a) { return a; };
200
+ this.lfMap.adapterOut = function (a) { return a; };
201
+ this.miniMapWrap = miniMapWrap;
202
+ this.createViewPort();
203
+ miniMapWrap.addEventListener('click', this.mapClick);
157
204
  };
158
- MiniMap.prototype.__createMiniMap = function (left, top) {
205
+ MiniMap.prototype.createMiniMap = function (left, top) {
159
206
  var miniMapContainer = document.createElement('div');
160
- var miniMapWrap = this.__miniMapWrap;
161
- miniMapContainer.appendChild(miniMapWrap);
162
- if (typeof left !== 'undefined' && typeof top !== 'undefined') {
163
- miniMapContainer.style.left = left + "px";
164
- miniMapContainer.style.top = top + "px";
207
+ miniMapContainer.appendChild(this.miniMapWrap);
208
+ if (typeof left !== 'undefined' || typeof top !== 'undefined') {
209
+ miniMapContainer.style.left = (left || 0) + "px";
210
+ miniMapContainer.style.top = (top || 0) + "px";
211
+ }
212
+ else {
213
+ if (typeof this.rightPosition !== 'undefined') {
214
+ miniMapContainer.style.right = this.rightPosition + "px";
215
+ }
216
+ else if (typeof this.leftPosition !== 'undefined') {
217
+ miniMapContainer.style.left = this.leftPosition + "px";
218
+ }
219
+ if (typeof this.bottomPosition !== 'undefined') {
220
+ miniMapContainer.style.bottom = this.bottomPosition + "px";
221
+ }
222
+ else if (typeof this.topPosition !== 'undefined') {
223
+ miniMapContainer.style.top = this.topPosition + "px";
224
+ }
165
225
  }
166
226
  miniMapContainer.style.position = 'absolute';
167
227
  miniMapContainer.className = 'lf-mini-map';
168
- this.__container.appendChild(miniMapContainer);
169
- this.__miniMapWrap.appendChild(this.__viewport);
228
+ if (!this.isShowCloseIcon) {
229
+ miniMapContainer.classList.add('lf-mini-map-no-close-icon');
230
+ }
231
+ if (!this.isShowHeader) {
232
+ miniMapContainer.classList.add('lf-mini-map-no-header');
233
+ }
234
+ this.container.appendChild(miniMapContainer);
235
+ this.miniMapWrap.appendChild(this.viewport);
170
236
  var header = document.createElement('div');
171
237
  header.className = 'lf-mini-map-header';
172
- header.innerText = '导航';
238
+ header.innerText = MiniMap.headerTitle;
173
239
  miniMapContainer.appendChild(header);
174
240
  var close = document.createElement('span');
175
241
  close.className = 'lf-mini-map-close';
176
242
  close.addEventListener('click', this.hide);
177
243
  miniMapContainer.appendChild(close);
178
- this.__miniMapContainer = miniMapContainer;
244
+ this.miniMapContainer = miniMapContainer;
179
245
  };
180
- MiniMap.prototype.__removeMiniMap = function () {
181
- this.__container.removeChild(this.__miniMapContainer);
246
+ MiniMap.prototype.removeMiniMap = function () {
247
+ this.container.removeChild(this.miniMapContainer);
182
248
  };
183
249
  /**
184
250
  * 计算所有图形一起,占领的区域范围。
185
251
  * @param data
186
252
  */
187
- MiniMap.prototype.__getBounds = function (data) {
253
+ MiniMap.prototype.getBounds = function (data) {
188
254
  var left = 0;
189
- var right = this.__miniMapWidth;
255
+ var right = this.miniMapWidth;
190
256
  var top = 0;
191
- var bottom = this.__miniMapHeight;
257
+ var bottom = this.miniMapHeight;
192
258
  var nodes = data.nodes;
193
259
  if (nodes && nodes.length > 0) {
194
260
  // 因为获取的节点不知道真实的宽高,这里需要补充一点数值
@@ -216,7 +282,7 @@ var MiniMap = /** @class */ (function () {
216
282
  * 保证渲染的时候,minimap能完全展示。
217
283
  * 获取将画布所有元素平移到0,0开始时,所有节点数据
218
284
  */
219
- MiniMap.prototype.__resetData = function (data) {
285
+ MiniMap.prototype.resetData = function (data) {
220
286
  var nodes = data.nodes, edges = data.edges;
221
287
  var left = 0;
222
288
  var top = 0;
@@ -230,8 +296,8 @@ var MiniMap = /** @class */ (function () {
230
296
  top = nodeTop < top ? nodeTop : top;
231
297
  });
232
298
  if (left < 0 || top < 0) {
233
- this.__resetDataX = left;
234
- this.__resetDataY = top;
299
+ this.resetDataX = left;
300
+ this.resetDataY = top;
235
301
  nodes.forEach(function (node) {
236
302
  node.x = node.x - left;
237
303
  node.y = node.y - top;
@@ -269,21 +335,22 @@ var MiniMap = /** @class */ (function () {
269
335
  * 显示视口范围
270
336
  * 1. 基于画布的范围比例,设置视口范围比例。宽度默认为导航宽度。
271
337
  */
272
- MiniMap.prototype.__setView = function () {
338
+ MiniMap.prototype.setView = function () {
273
339
  var e_1, _a;
274
340
  // 1. 获取到图中所有的节点中的位置,将其偏移到原点开始(避免节点位置为负的时候无法展示问题)。
275
- var data = this.__resetData(this.__lf.getGraphRawData());
341
+ var graphData = this.lf.getGraphRawData();
342
+ var data = this.resetData(graphData);
276
343
  // 由于随时都会有新节点注册进来,需要同步将注册的
277
- var viewMap = this.__lf.viewMap;
278
- var modelMap = this.__lf.graphModel.modelMap;
279
- var minimapViewMap = this.__lfMap.viewMap;
344
+ var viewMap = this.lf.viewMap;
345
+ var modelMap = this.lf.graphModel.modelMap;
346
+ var minimapViewMap = this.lfMap.viewMap;
280
347
  try {
281
348
  // todo: no-restricted-syntax
282
349
  for (var _b = __values(viewMap.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
283
350
  var key = _c.value;
284
351
  if (!minimapViewMap.has(key)) {
285
- this.__lfMap.setView(key, viewMap.get(key));
286
- this.__lfMap.graphModel.modelMap.set(key, modelMap.get(key));
352
+ this.lfMap.setView(key, viewMap.get(key));
353
+ this.lfMap.graphModel.modelMap.set(key, modelMap.get(key));
287
354
  }
288
355
  }
289
356
  }
@@ -294,22 +361,22 @@ var MiniMap = /** @class */ (function () {
294
361
  }
295
362
  finally { if (e_1) throw e_1.error; }
296
363
  }
297
- this.__lfMap.render(data);
364
+ this.lfMap.render(data);
298
365
  // 2. 将偏移后的数据渲染到minimap画布上
299
366
  // 3. 计算出所有节点在一起的边界。
300
- var _d = this.__getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
367
+ var _d = this.getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
301
368
  // 4. 计算所有节点的边界与minimap看板的边界的比例.
302
- var realWidthScale = this.__width / (right - left);
303
- var realHeightScale = this.__height / (bottom - top);
369
+ var realWidthScale = this.width / (right - left);
370
+ var realHeightScale = this.height / (bottom - top);
304
371
  // 5. 取比例最小的值,将渲染的画布缩小对应比例。
305
- var innerStyle = this.__miniMapWrap.firstChild.style;
372
+ var innerStyle = this.miniMapWrap.firstChild.style;
306
373
  var scale = Math.min(realWidthScale, realHeightScale);
307
374
  innerStyle.transform = "matrix(" + scale + ", 0, 0, " + scale + ", 0, 0)";
308
375
  innerStyle.transformOrigin = 'left top';
309
376
  innerStyle.height = bottom - Math.min(top, 0) + "px";
310
377
  innerStyle.width = right - Math.min(left, 0) + "px";
311
- this.__viewPortScale = scale;
312
- this.__setViewPort(scale, {
378
+ this.viewPortScale = scale;
379
+ this.setViewPort(scale, {
313
380
  left: left,
314
381
  top: top,
315
382
  right: right,
@@ -317,36 +384,54 @@ var MiniMap = /** @class */ (function () {
317
384
  });
318
385
  };
319
386
  // 设置视口
320
- MiniMap.prototype.__setViewPort = function (scale, _a) {
387
+ MiniMap.prototype.setViewPort = function (scale, _a) {
321
388
  var left = _a.left, right = _a.right, top = _a.top, bottom = _a.bottom;
322
- var viewStyle = this.__viewport.style;
323
- viewStyle.width = this.__width - 4 + "px";
324
- viewStyle.height = (this.__width - 4) / (this.__lf.graphModel.width / this.__lf.graphModel.height) + "px";
325
- // top
326
- var _b = this.__lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y;
389
+ var viewStyle = this.viewport.style;
390
+ viewStyle.width = this.viewPortWidth + "px";
391
+ viewStyle.height = (this.viewPortWidth) / (this.lf.graphModel.width / this.lf.graphModel.height) + "px";
392
+ var _b = this.lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y, SCALE_X = _b.SCALE_X, SCALE_Y = _b.SCALE_Y;
327
393
  var realWidth = right - left;
328
- // 视口实际宽 = 视口默认宽 / (所有元素一起占据的真实宽 / 绘布宽)
329
- var realViewPortWidth = (this.__width - 4) / (realWidth / this.__lf.graphModel.width);
394
+ // 视口宽 = 小地图宽 / (所有元素一起占据的真实宽 / 绘布宽)
395
+ var viewPortWidth = (this.width) / (realWidth / this.lf.graphModel.width);
396
+ // 实际视口宽 = 小地图宽 * 占宽度比例
397
+ var realViewPortWidth = this.width * (viewPortWidth / this.width);
398
+ var graphRatio = (this.lf.graphModel.width / this.lf.graphModel.height);
330
399
  // 视口实际高 = 视口实际宽 / (绘布宽 / 绘布高)
331
- var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
332
400
  var realViewPortHeight = realViewPortWidth / graphRatio;
333
- this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
334
- this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
335
- this.__viewPortWidth = realViewPortWidth;
336
- this.__viewPortHeight = realViewPortHeight;
337
- viewStyle.top = this.__viewPortTop + "px";
338
- viewStyle.left = this.__viewPortLeft + "px";
339
- viewStyle.width = realViewPortWidth + "px";
340
- viewStyle.height = realViewPortHeight + "px";
401
+ var graphData = this.lf.getGraphRawData();
402
+ var _c = this.getBounds(graphData), graphLeft = _c.left, graphTop = _c.top;
403
+ var viewportLeft = graphLeft;
404
+ var viewportTop = graphTop;
405
+ viewportLeft += TRANSLATE_X / SCALE_X;
406
+ viewportTop += TRANSLATE_Y / SCALE_Y;
407
+ this.viewPortTop = viewportTop > 0 ? 0 : (-viewportTop * scale);
408
+ this.viewPortLeft = viewportLeft > 0 ? 0 : (-viewportLeft * scale);
409
+ this.viewPortWidth = realViewPortWidth;
410
+ this.viewPortHeight = realViewPortHeight;
411
+ viewStyle.top = this.viewPortTop + "px";
412
+ viewStyle.left = this.viewPortLeft + "px";
413
+ viewStyle.width = realViewPortWidth / SCALE_X + "px";
414
+ viewStyle.height = realViewPortHeight / SCALE_Y + "px";
341
415
  };
342
416
  // 预览视窗
343
- MiniMap.prototype.__createViewPort = function () {
417
+ MiniMap.prototype.createViewPort = function () {
344
418
  var div = document.createElement('div');
345
419
  div.className = 'lf-minimap-viewport';
346
- div.addEventListener('mousedown', this.__startDrag);
347
- this.__viewport = div;
420
+ div.addEventListener('mousedown', this.startDrag);
421
+ this.viewport = div;
348
422
  };
349
423
  MiniMap.pluginName = 'miniMap';
424
+ MiniMap.width = 150;
425
+ MiniMap.height = 220;
426
+ MiniMap.viewPortWidth = 150;
427
+ MiniMap.viewPortHeight = 75;
428
+ MiniMap.isShowHeader = true;
429
+ MiniMap.isShowCloseIcon = true;
430
+ MiniMap.leftPosition = 0;
431
+ MiniMap.topPosition = 0;
432
+ MiniMap.rightPosition = null;
433
+ MiniMap.bottomPosition = null;
434
+ MiniMap.headerTitle = '导航';
350
435
  return MiniMap;
351
436
  }());
352
437
  exports.MiniMap = MiniMap;
@@ -48,7 +48,7 @@ var SelectionSelect = /** @class */ (function () {
48
48
  var group = _this.lf.graphModel.group;
49
49
  elements.forEach(function (element) {
50
50
  // 如果节点属于分组,则不不选中节点
51
- if (_this.isSelectElement(element)) {
51
+ if (!group || !group.getNodeGroup(element.id)) {
52
52
  _this.lf.selectElementById(element.id, true);
53
53
  }
54
54
  });
@@ -75,6 +75,11 @@ var SelectionSelect = /** @class */ (function () {
75
75
  if (!config.stopMoveGraph || _this.__disabled) {
76
76
  return;
77
77
  }
78
+ // 禁用右键框选,修复可能导致画布出现多个框选框不消失的问题,见https://github.com/didi/LogicFlow/issues/985
79
+ var isRightClick = e.button === 2;
80
+ if (isRightClick) {
81
+ return;
82
+ }
78
83
  var _b = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _b.x, y = _b.y;
79
84
  _this.startPoint = { x: x, y: y };
80
85
  _this.endPoint = { x: x, y: y };
@@ -126,24 +131,6 @@ var SelectionSelect = /** @class */ (function () {
126
131
  }
127
132
  this.close();
128
133
  };
129
- SelectionSelect.prototype.isSelectElement = function (elementModel) {
130
- // 如果不可见,则不被选中
131
- if (!elementModel.visible)
132
- return false;
133
- var group = this.lf.extension.group;
134
- // 节点在group中,则不被选中
135
- if (group) {
136
- if (elementModel.BaseType === 'node' && group.getNodeGroup(elementModel.id))
137
- return false;
138
- if (elementModel.BaseType === 'edge') {
139
- if (group.getNodeGroup(elementModel.sourceNodeId)
140
- || group.getNodeGroup(elementModel.targetNodeId)) {
141
- return false;
142
- }
143
- }
144
- }
145
- return true;
146
- };
147
134
  SelectionSelect.prototype.open = function () {
148
135
  this.__disabled = false;
149
136
  };
package/cjs/index.js CHANGED
@@ -29,5 +29,4 @@ __exportStar(require("./tools/flow-path"), exports);
29
29
  __exportStar(require("./tools/auto-layout"), exports);
30
30
  __exportStar(require("./bpmn-adapter/xml2json"), exports);
31
31
  __exportStar(require("./bpmn-adapter/json2xml"), exports);
32
- __exportStar(require("./locale/en-locale"), exports);
33
32
  __exportStar(require("./components/highlight"), exports);
@@ -42,6 +42,7 @@ var __read = (this && this.__read) || function (o, n) {
42
42
  Object.defineProperty(exports, "__esModule", { value: true });
43
43
  exports.CurvedEdgeModel = exports.CurvedEdge = void 0;
44
44
  var core_1 = require("@logicflow/core");
45
+ var searchMiddleIndex_1 = require("./searchMiddleIndex");
45
46
  var CurvedEdge = /** @class */ (function (_super) {
46
47
  __extends(CurvedEdge, _super);
47
48
  function CurvedEdge() {
@@ -70,7 +71,20 @@ var CurvedEdge = /** @class */ (function (_super) {
70
71
  var style = model.getEdgeStyle();
71
72
  var animationStyle = model.getEdgeAnimationStyle();
72
73
  var points2 = this.pointFilter(points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); }));
73
- var _b = __read(points2[0], 2), startX = _b[0], startY = _b[1];
74
+ var res = searchMiddleIndex_1.default(points2);
75
+ if (res) {
76
+ var _b = __read(res, 2), first = _b[0], last = _b[1];
77
+ var firstPoint = points2[first];
78
+ var lastPoint_1 = points2[last];
79
+ var flag = firstPoint.some(function (num, index) { return num === lastPoint_1[index]; });
80
+ if (!flag) {
81
+ var diff = (lastPoint_1[1] - firstPoint[1]) / 2;
82
+ var firstNextPoint = [lastPoint_1[0], lastPoint_1[1] - diff];
83
+ var lastPrePoint = [firstPoint[0], firstPoint[1] + diff];
84
+ points2.splice(first + 1, 0, lastPrePoint, firstNextPoint);
85
+ }
86
+ }
87
+ var _c = __read(points2[0], 2), startX = _c[0], startY = _c[1];
74
88
  var d = "M" + startX + " " + startY;
75
89
  // 1) 如果一个点不为开始和结束,则在这个点的前后增加弧度开始和结束点。
76
90
  // 2) 判断这个点与前一个点的坐标
@@ -78,9 +92,9 @@ var CurvedEdge = /** @class */ (function (_super) {
78
92
  // y为(这个点的y 大于前一个点的y, 则 为 这个点的y - 5;小于前一个点的y, 则为这个点的y+5)
79
93
  // 同理,判断这个点与后一个点的x,y是否相同,如果x相同,则y进行加减,如果y相同,则x进行加减
80
94
  for (var i = 1; i < points2.length - 1; i++) {
81
- var _c = __read(points2[i - 1], 2), preX = _c[0], preY = _c[1];
82
- var _d = __read(points2[i], 2), currentX = _d[0], currentY = _d[1];
83
- var _e = __read(points2[i + 1], 2), nextX = _e[0], nextY = _e[1];
95
+ var _d = __read(points2[i - 1], 2), preX = _d[0], preY = _d[1];
96
+ var _e = __read(points2[i], 2), currentX = _e[0], currentY = _e[1];
97
+ var _f = __read(points2[i + 1], 2), nextX = _f[0], nextY = _f[1];
84
98
  if (currentX === preX && currentY !== preY) {
85
99
  var y = currentY > preY ? currentY - radius : currentY + radius;
86
100
  d = d + " L " + currentX + " " + y;
@@ -99,7 +113,7 @@ var CurvedEdge = /** @class */ (function (_super) {
99
113
  d = d + " " + x + " " + currentY;
100
114
  }
101
115
  }
102
- var _f = __read(points2[points2.length - 1], 2), endX = _f[0], endY = _f[1];
116
+ var _g = __read(points2[points2.length - 1], 2), endX = _g[0], endY = _g[1];
103
117
  d = d + " L " + endX + " " + endY;
104
118
  var attrs = __assign(__assign(__assign({ d: d, style: isAnimation ? animationStyle : {} }, style), arrowConfig), { fill: 'none' });
105
119
  return core_1.h('path', __assign({ d: d }, attrs));
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ function searchMiddleIndex(arr) {
4
+ if (arr.length <= 1)
5
+ return false;
6
+ var first = 0;
7
+ var last = arr.length - 1;
8
+ while (first !== last && first + 1 !== last && last - 1 !== first) {
9
+ first++;
10
+ last--;
11
+ }
12
+ if (first === last) {
13
+ return [--first, last];
14
+ }
15
+ return [first, last];
16
+ }
17
+ exports.default = searchMiddleIndex;