@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.
- package/cjs/NodeResize/Control/Control.js +71 -16
- package/cjs/NodeResize/Node/DiamondResize.js +24 -10
- package/cjs/NodeResize/Node/EllipseResize.js +24 -10
- package/cjs/NodeResize/Node/HtmlResize.js +24 -10
- package/cjs/NodeResize/Node/RectResize.js +24 -10
- package/cjs/bpmn-adapter/index.js +74 -122
- package/cjs/bpmn-adapter/json2xml.js +2 -4
- package/cjs/bpmn-adapter/xml2json.js +247 -2
- package/cjs/components/control/index.js +16 -16
- package/cjs/components/dnd-panel/index.js +21 -0
- package/cjs/components/highlight/index.js +0 -1
- package/cjs/components/menu/index.js +9 -9
- package/cjs/components/mini-map/index.js +223 -138
- package/cjs/components/selection-select/index.js +6 -19
- package/cjs/index.js +0 -1
- package/cjs/materials/curved-edge/index.js +19 -5
- package/cjs/materials/curved-edge/searchMiddleIndex.js +17 -0
- package/cjs/materials/group/GroupNode.js +34 -64
- package/cjs/materials/group/index.js +99 -70
- package/cjs/style/index.css +10 -0
- package/cjs/tools/auto-layout/index.js +1 -1
- package/es/NodeResize/Control/Control.d.ts +4 -1
- package/es/NodeResize/Control/Control.js +71 -16
- package/es/NodeResize/Node/DiamondResize.d.ts +3 -1
- package/es/NodeResize/Node/DiamondResize.js +24 -10
- package/es/NodeResize/Node/EllipseResize.d.ts +3 -1
- package/es/NodeResize/Node/EllipseResize.js +24 -10
- package/es/NodeResize/Node/HtmlResize.d.ts +3 -1
- package/es/NodeResize/Node/HtmlResize.js +24 -10
- package/es/NodeResize/Node/RectResize.d.ts +3 -1
- package/es/NodeResize/Node/RectResize.js +24 -10
- package/es/bpmn-adapter/index.d.ts +33 -41
- package/es/bpmn-adapter/index.js +74 -122
- package/es/bpmn-adapter/json2xml.js +2 -4
- package/es/bpmn-adapter/xml2json.js +247 -2
- package/es/components/control/index.d.ts +3 -2
- package/es/components/control/index.js +16 -16
- package/es/components/dnd-panel/index.js +21 -0
- package/es/components/highlight/index.js +0 -1
- package/es/components/menu/index.d.ts +3 -2
- package/es/components/menu/index.js +9 -9
- package/es/components/mini-map/index.d.ts +57 -45
- package/es/components/mini-map/index.js +223 -138
- package/es/components/selection-select/index.d.ts +0 -1
- package/es/components/selection-select/index.js +6 -19
- package/es/index.d.ts +0 -1
- package/es/index.js +0 -1
- package/es/materials/curved-edge/index.js +19 -5
- package/es/materials/curved-edge/searchMiddleIndex.d.ts +1 -0
- package/es/materials/curved-edge/searchMiddleIndex.js +14 -0
- package/es/materials/group/GroupNode.d.ts +5 -7
- package/es/materials/group/GroupNode.js +34 -64
- package/es/materials/group/index.d.ts +21 -1
- package/es/materials/group/index.js +99 -70
- package/es/style/index.css +10 -0
- package/es/tools/auto-layout/index.d.ts +1 -1
- package/es/tools/auto-layout/index.js +1 -1
- package/lib/AutoLayout.js +1 -1
- package/lib/BpmnAdapter.js +1 -1
- package/lib/BpmnElement.js +1 -1
- package/lib/ContextMenu.js +1 -1
- package/lib/Control.js +1 -1
- package/lib/CurvedEdge.js +1 -1
- package/lib/DndPanel.js +1 -1
- package/lib/FlowPath.js +1 -1
- package/lib/Group.js +1 -1
- package/lib/Highlight.js +1 -1
- package/lib/InsertNodeInPolyline.js +1 -1
- package/lib/Menu.js +1 -1
- package/lib/MiniMap.js +1 -1
- package/lib/NodeResize.js +1 -1
- package/lib/RectLabelNode.js +1 -1
- package/lib/SelectionSelect.js +1 -1
- package/lib/Snapshot.js +1 -1
- package/lib/TurboAdapter.js +1 -1
- package/lib/lfJson2Xml.js +1 -1
- package/lib/lfXml2Json.js +1 -1
- package/lib/style/index.css +10 -0
- package/package.json +3 -2
- package/types/NodeResize/Control/Control.d.ts +4 -1
- package/types/NodeResize/Node/DiamondResize.d.ts +3 -1
- package/types/NodeResize/Node/EllipseResize.d.ts +3 -1
- package/types/NodeResize/Node/HtmlResize.d.ts +3 -1
- package/types/NodeResize/Node/RectResize.d.ts +3 -1
- package/types/bpmn-adapter/index.d.ts +33 -41
- package/types/components/control/index.d.ts +3 -2
- package/types/components/menu/index.d.ts +3 -2
- package/types/components/mini-map/index.d.ts +57 -45
- package/types/components/selection-select/index.d.ts +0 -1
- package/types/index.d.ts +0 -1
- package/types/materials/curved-edge/searchMiddleIndex.d.ts +1 -0
- package/types/materials/group/GroupNode.d.ts +5 -7
- package/types/materials/group/index.d.ts +21 -1
- package/types/tools/auto-layout/index.d.ts +1 -1
- package/cjs/locale/en-locale/en.js +0 -22
- package/cjs/locale/en-locale/index.js +0 -29
- package/cjs/locale/locale.js +0 -19
- package/es/locale/en-locale/en.d.ts +0 -19
- package/es/locale/en-locale/en.js +0 -19
- package/es/locale/en-locale/index.d.ts +0 -9
- package/es/locale/en-locale/index.js +0 -26
- package/es/locale/locale.d.ts +0 -6
- package/es/locale/locale.js +0 -16
- 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.
|
|
20
|
-
this.
|
|
21
|
-
this.
|
|
22
|
-
this.
|
|
23
|
-
this.
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
this.
|
|
27
|
-
this.
|
|
28
|
-
this.
|
|
29
|
-
this.
|
|
30
|
-
this.
|
|
31
|
-
this.
|
|
32
|
-
this.
|
|
33
|
-
this.
|
|
34
|
-
this.
|
|
35
|
-
this.
|
|
36
|
-
this.
|
|
37
|
-
this.
|
|
38
|
-
this.
|
|
39
|
-
this.
|
|
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.
|
|
45
|
-
if (!_this.
|
|
46
|
-
_this.
|
|
52
|
+
_this.setView();
|
|
53
|
+
if (!_this.isShow) {
|
|
54
|
+
_this.createMiniMap(leftPosition, topPosition);
|
|
47
55
|
}
|
|
48
|
-
_this.
|
|
56
|
+
_this.isShow = true;
|
|
49
57
|
};
|
|
50
58
|
/**
|
|
51
59
|
* 隐藏mini map
|
|
52
60
|
*/
|
|
53
61
|
this.hide = function () {
|
|
54
|
-
if (_this.
|
|
55
|
-
_this.
|
|
62
|
+
if (_this.isShow) {
|
|
63
|
+
_this.removeMiniMap();
|
|
56
64
|
}
|
|
57
|
-
_this.
|
|
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.
|
|
60
|
-
document.addEventListener('mousemove', _this.
|
|
61
|
-
document.addEventListener('mouseup', _this.
|
|
62
|
-
_this.
|
|
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.
|
|
69
|
-
_this.
|
|
70
|
-
_this.
|
|
71
|
-
viewStyle.top = _this.
|
|
72
|
-
viewStyle.left = _this.
|
|
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.
|
|
75
|
-
|
|
76
|
-
var
|
|
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.
|
|
93
|
+
_this.startPosition = {
|
|
79
94
|
x: e.x,
|
|
80
95
|
y: e.y,
|
|
81
96
|
};
|
|
82
|
-
var centerX = (_this.
|
|
83
|
-
/ _this.
|
|
84
|
-
var centerY = (_this.
|
|
85
|
-
/ _this.
|
|
86
|
-
_this.
|
|
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.
|
|
89
|
-
y: centerY + _this.
|
|
103
|
+
x: centerX + _this.resetDataX,
|
|
104
|
+
y: centerY + _this.resetDataY,
|
|
90
105
|
},
|
|
91
106
|
});
|
|
92
107
|
};
|
|
93
|
-
this.
|
|
94
|
-
document.removeEventListener('mousemove', _this.
|
|
95
|
-
document.removeEventListener('mouseup', _this.
|
|
96
|
-
var top = _this.
|
|
97
|
-
var left = _this.
|
|
98
|
-
if (_this.
|
|
99
|
-
left = _this.
|
|
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.
|
|
102
|
-
top = _this.
|
|
116
|
+
if (_this.viewPortTop > _this.height) {
|
|
117
|
+
top = _this.height - _this.viewPortHeight;
|
|
103
118
|
}
|
|
104
|
-
if (_this.
|
|
119
|
+
if (_this.viewPortLeft < -_this.width) {
|
|
105
120
|
left = 0;
|
|
106
121
|
}
|
|
107
|
-
if (_this.
|
|
122
|
+
if (_this.viewPortTop < -_this.height) {
|
|
108
123
|
top = 0;
|
|
109
124
|
}
|
|
110
125
|
_this.moveViewport(top, left);
|
|
111
126
|
};
|
|
112
|
-
this.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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.
|
|
121
|
-
this.
|
|
122
|
-
if (_this.
|
|
123
|
-
_this.
|
|
153
|
+
this.container = container;
|
|
154
|
+
this.lf.on('history:change', function () {
|
|
155
|
+
if (_this.isShow) {
|
|
156
|
+
_this.setView();
|
|
124
157
|
}
|
|
125
158
|
});
|
|
126
|
-
this.
|
|
127
|
-
|
|
128
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
139
|
-
miniMapWrap.style.height = this.
|
|
140
|
-
this.
|
|
141
|
-
width: this.
|
|
142
|
-
height: (this.
|
|
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.
|
|
196
|
+
disabledPlugins: this.disabledPlugins,
|
|
151
197
|
});
|
|
152
198
|
// minimap中禁用adapter。
|
|
153
|
-
this.
|
|
154
|
-
this.
|
|
155
|
-
this.
|
|
156
|
-
this.
|
|
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.
|
|
205
|
+
MiniMap.prototype.createMiniMap = function (left, top) {
|
|
159
206
|
var miniMapContainer = document.createElement('div');
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
miniMapContainer.style.
|
|
164
|
-
|
|
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.
|
|
169
|
-
|
|
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.
|
|
244
|
+
this.miniMapContainer = miniMapContainer;
|
|
179
245
|
};
|
|
180
|
-
MiniMap.prototype.
|
|
181
|
-
this.
|
|
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.
|
|
253
|
+
MiniMap.prototype.getBounds = function (data) {
|
|
188
254
|
var left = 0;
|
|
189
|
-
var right = this.
|
|
255
|
+
var right = this.miniMapWidth;
|
|
190
256
|
var top = 0;
|
|
191
|
-
var bottom = this.
|
|
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.
|
|
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.
|
|
234
|
-
this.
|
|
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.
|
|
338
|
+
MiniMap.prototype.setView = function () {
|
|
273
339
|
var e_1, _a;
|
|
274
340
|
// 1. 获取到图中所有的节点中的位置,将其偏移到原点开始(避免节点位置为负的时候无法展示问题)。
|
|
275
|
-
var
|
|
341
|
+
var graphData = this.lf.getGraphRawData();
|
|
342
|
+
var data = this.resetData(graphData);
|
|
276
343
|
// 由于随时都会有新节点注册进来,需要同步将注册的
|
|
277
|
-
var viewMap = this.
|
|
278
|
-
var modelMap = this.
|
|
279
|
-
var minimapViewMap = this.
|
|
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.
|
|
286
|
-
this.
|
|
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.
|
|
364
|
+
this.lfMap.render(data);
|
|
298
365
|
// 2. 将偏移后的数据渲染到minimap画布上
|
|
299
366
|
// 3. 计算出所有节点在一起的边界。
|
|
300
|
-
var _d = this.
|
|
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.
|
|
303
|
-
var realHeightScale = this.
|
|
369
|
+
var realWidthScale = this.width / (right - left);
|
|
370
|
+
var realHeightScale = this.height / (bottom - top);
|
|
304
371
|
// 5. 取比例最小的值,将渲染的画布缩小对应比例。
|
|
305
|
-
var innerStyle = this.
|
|
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.
|
|
312
|
-
this.
|
|
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.
|
|
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.
|
|
323
|
-
viewStyle.width = this.
|
|
324
|
-
viewStyle.height = (this.
|
|
325
|
-
|
|
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
|
|
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
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
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.
|
|
417
|
+
MiniMap.prototype.createViewPort = function () {
|
|
344
418
|
var div = document.createElement('div');
|
|
345
419
|
div.className = 'lf-minimap-viewport';
|
|
346
|
-
div.addEventListener('mousedown', this.
|
|
347
|
-
this.
|
|
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 (
|
|
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
|
|
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
|
|
82
|
-
var
|
|
83
|
-
var
|
|
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
|
|
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;
|