@logicflow/extension 1.2.0-alpha.8 → 1.2.0-next.0
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 +42 -14
- package/cjs/NodeResize/Node/DiamondResize.js +5 -2
- package/cjs/NodeResize/Node/EllipseResize.js +5 -2
- package/cjs/NodeResize/Node/HtmlResize.js +5 -2
- package/cjs/NodeResize/Node/RectResize.js +5 -2
- package/cjs/bpmn-adapter/json2xml.js +0 -1
- package/cjs/components/mini-map/index.js +24 -4
- package/cjs/components/selection-select/index.js +7 -1
- package/cjs/materials/curved-edge/index.js +47 -40
- package/cjs/materials/group/GroupNode.js +47 -13
- package/cjs/materials/group/index.js +73 -21
- package/cjs/tools/snapshot/index.js +1 -1
- package/cjs/turbo-adapter/index.js +4 -6
- package/es/NodeResize/Control/Control.d.ts +4 -0
- package/es/NodeResize/Control/Control.js +42 -14
- package/es/NodeResize/Node/DiamondResize.js +5 -2
- package/es/NodeResize/Node/EllipseResize.js +5 -2
- package/es/NodeResize/Node/HtmlResize.js +5 -2
- package/es/NodeResize/Node/RectResize.js +5 -2
- package/es/bpmn-adapter/json2xml.js +0 -1
- package/es/components/mini-map/index.d.ts +1 -0
- package/es/components/mini-map/index.js +24 -4
- package/es/components/selection-select/index.js +7 -1
- package/es/materials/curved-edge/index.d.ts +7 -6
- package/es/materials/curved-edge/index.js +47 -39
- package/es/materials/group/GroupNode.d.ts +10 -0
- package/es/materials/group/GroupNode.js +47 -13
- package/es/materials/group/index.d.ts +5 -7
- package/es/materials/group/index.js +73 -21
- package/es/tools/snapshot/index.js +1 -1
- package/es/turbo-adapter/index.js +4 -6
- 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/EnLocale.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/package.json +4 -4
- package/types/NodeResize/Control/Control.d.ts +4 -0
- package/types/components/mini-map/index.d.ts +1 -0
- package/types/materials/curved-edge/index.d.ts +7 -6
- package/types/materials/group/GroupNode.d.ts +10 -0
- package/types/materials/group/index.d.ts +5 -7
|
@@ -23,6 +23,22 @@ var __assign = (this && this.__assign) || function () {
|
|
|
23
23
|
};
|
|
24
24
|
return __assign.apply(this, arguments);
|
|
25
25
|
};
|
|
26
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
27
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
28
|
+
if (!m) return o;
|
|
29
|
+
var i = m.call(o), r, ar = [], e;
|
|
30
|
+
try {
|
|
31
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
32
|
+
}
|
|
33
|
+
catch (error) { e = { error: error }; }
|
|
34
|
+
finally {
|
|
35
|
+
try {
|
|
36
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
37
|
+
}
|
|
38
|
+
finally { if (e) throw e.error; }
|
|
39
|
+
}
|
|
40
|
+
return ar;
|
|
41
|
+
};
|
|
26
42
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
27
43
|
var preact_1 = require("preact");
|
|
28
44
|
var core_1 = require("@logicflow/core");
|
|
@@ -57,7 +73,7 @@ var Control = /** @class */ (function (_super) {
|
|
|
57
73
|
resize.height = height - deltaY * pct;
|
|
58
74
|
break;
|
|
59
75
|
case 2:
|
|
60
|
-
resize.width = width + deltaX;
|
|
76
|
+
resize.width = width + deltaX * pct;
|
|
61
77
|
resize.height = height + deltaY * pct;
|
|
62
78
|
break;
|
|
63
79
|
case 3:
|
|
@@ -167,9 +183,9 @@ var Control = /** @class */ (function (_super) {
|
|
|
167
183
|
_this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
|
|
168
184
|
// 更新rx ry,宽高为计算属性自动更新
|
|
169
185
|
// @ts-ignore
|
|
170
|
-
_this.nodeModel.rx =
|
|
186
|
+
_this.nodeModel.rx = size.width;
|
|
171
187
|
// @ts-ignore
|
|
172
|
-
_this.nodeModel.ry =
|
|
188
|
+
_this.nodeModel.ry = size.height;
|
|
173
189
|
_this.nodeModel.setProperties({
|
|
174
190
|
nodeSize: {
|
|
175
191
|
rx: size.width,
|
|
@@ -231,9 +247,9 @@ var Control = /** @class */ (function (_super) {
|
|
|
231
247
|
_this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
|
|
232
248
|
// 更新rx ry,宽高为计算属性自动更新
|
|
233
249
|
// @ts-ignore
|
|
234
|
-
_this.nodeModel.rx =
|
|
250
|
+
_this.nodeModel.rx = size.width;
|
|
235
251
|
// @ts-ignore
|
|
236
|
-
_this.nodeModel.ry =
|
|
252
|
+
_this.nodeModel.ry = size.height;
|
|
237
253
|
_this.nodeModel.setProperties({
|
|
238
254
|
nodeSize: {
|
|
239
255
|
rx: size.width,
|
|
@@ -275,8 +291,11 @@ var Control = /** @class */ (function (_super) {
|
|
|
275
291
|
_this.graphModel.eventCenter.emit('node:resize', { oldNodeSize: oldNodeSize, newNodeSize: newNodeSize });
|
|
276
292
|
};
|
|
277
293
|
_this.onDragging = function (_a) {
|
|
294
|
+
var _b;
|
|
278
295
|
var deltaX = _a.deltaX, deltaY = _a.deltaY;
|
|
296
|
+
var transformModel = _this.graphModel.transformModel;
|
|
279
297
|
var modelType = _this.nodeModel.modelType;
|
|
298
|
+
_b = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), deltaX = _b[0], deltaY = _b[1];
|
|
280
299
|
// html和矩形的计算方式是一样的,共用一个方法
|
|
281
300
|
if (modelType === Util_1.ModelType.RECT_NODE || modelType === Util_1.ModelType.HTML_NODE) {
|
|
282
301
|
_this.updateRect({ deltaX: deltaX, deltaY: deltaY });
|
|
@@ -289,23 +308,32 @@ var Control = /** @class */ (function (_super) {
|
|
|
289
308
|
_this.updateDiamond({ deltaX: deltaX, deltaY: deltaY });
|
|
290
309
|
}
|
|
291
310
|
};
|
|
311
|
+
/**
|
|
312
|
+
* 由于将拖拽放大缩小改成丝滑模式,这个时候需要在拖拽结束的时候,将节点的位置更新到grid上.
|
|
313
|
+
*/
|
|
314
|
+
_this.onDragEnd = function () {
|
|
315
|
+
var _a = _this.graphModel.gridSize, gridSize = _a === void 0 ? 1 : _a;
|
|
316
|
+
var x = gridSize * Math.round(_this.nodeModel.x / gridSize);
|
|
317
|
+
var y = gridSize * Math.round(_this.nodeModel.y / gridSize);
|
|
318
|
+
_this.nodeModel.moveTo(x, y);
|
|
319
|
+
};
|
|
292
320
|
_this.index = props.index;
|
|
293
321
|
_this.nodeModel = props.model;
|
|
294
322
|
_this.graphModel = props.graphModel;
|
|
295
|
-
var gridSize = _this.graphModel.gridSize;
|
|
296
323
|
// 为保证对齐线功能正常使用,step默认是网格grid的两倍,
|
|
297
324
|
// 没有网格设置,默认为2,保证坐标是整数
|
|
298
|
-
|
|
299
|
-
if (gridSize > 1) {
|
|
300
|
-
|
|
301
|
-
}
|
|
302
|
-
if (
|
|
303
|
-
|
|
304
|
-
}
|
|
325
|
+
// let step = 2;
|
|
326
|
+
// if (gridSize > 1) {
|
|
327
|
+
// step = 2 * gridSize;
|
|
328
|
+
// }
|
|
329
|
+
// if (this.nodeModel.gridSize) {
|
|
330
|
+
// step = 2 * this.nodeModel.gridSize;
|
|
331
|
+
// }
|
|
305
332
|
_this.state = {};
|
|
306
333
|
_this.dragHandler = new StepDrag({
|
|
307
334
|
onDragging: _this.onDragging,
|
|
308
|
-
|
|
335
|
+
onDragEnd: _this.onDragEnd,
|
|
336
|
+
step: 1,
|
|
309
337
|
});
|
|
310
338
|
return _this;
|
|
311
339
|
}
|
|
@@ -50,6 +50,9 @@ var DiamondResizeModel = /** @class */ (function (_super) {
|
|
|
50
50
|
};
|
|
51
51
|
DiamondResizeModel.prototype.getOutlineStyle = function () {
|
|
52
52
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
53
|
+
var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
|
|
54
|
+
if (isSilentMode)
|
|
55
|
+
return style;
|
|
53
56
|
style.stroke = 'none';
|
|
54
57
|
if (style.hover) {
|
|
55
58
|
style.hover.stroke = 'none';
|
|
@@ -91,10 +94,10 @@ var DiamondResizeView = /** @class */ (function (_super) {
|
|
|
91
94
|
core_1.h(Polygon_1.default, __assign({}, style, { points: points }))));
|
|
92
95
|
};
|
|
93
96
|
DiamondResizeView.prototype.getShape = function () {
|
|
94
|
-
var
|
|
97
|
+
var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
|
|
95
98
|
return (core_1.h("g", null,
|
|
96
99
|
this.getResizeShape(),
|
|
97
|
-
isSelected ? this.getControlGroup() : ''));
|
|
100
|
+
isSelected && !isSilentMode ? this.getControlGroup() : ''));
|
|
98
101
|
};
|
|
99
102
|
return DiamondResizeView;
|
|
100
103
|
}(core_1.DiamondNode));
|
|
@@ -37,6 +37,9 @@ var EllipseResizeModel = /** @class */ (function (_super) {
|
|
|
37
37
|
};
|
|
38
38
|
EllipseResizeModel.prototype.getOutlineStyle = function () {
|
|
39
39
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
40
|
+
var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
|
|
41
|
+
if (isSilentMode)
|
|
42
|
+
return style;
|
|
40
43
|
style.stroke = 'none';
|
|
41
44
|
if (style.hover) {
|
|
42
45
|
style.hover.stroke = 'none';
|
|
@@ -74,10 +77,10 @@ var EllipseResizeView = /** @class */ (function (_super) {
|
|
|
74
77
|
return _super.prototype.getShape.call(this);
|
|
75
78
|
};
|
|
76
79
|
EllipseResizeView.prototype.getShape = function () {
|
|
77
|
-
var
|
|
80
|
+
var _a = this.props, model = _a.model, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
|
|
78
81
|
return (core_1.h("g", null,
|
|
79
82
|
this.getResizeShape(),
|
|
80
|
-
model.isSelected ? this.getControlGroup() : ''));
|
|
83
|
+
model.isSelected && !isSilentMode ? this.getControlGroup() : ''));
|
|
81
84
|
};
|
|
82
85
|
return EllipseResizeView;
|
|
83
86
|
}(core_1.EllipseNode));
|
|
@@ -37,6 +37,9 @@ var HtmlResizeModel = /** @class */ (function (_super) {
|
|
|
37
37
|
};
|
|
38
38
|
HtmlResizeModel.prototype.getOutlineStyle = function () {
|
|
39
39
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
40
|
+
var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
|
|
41
|
+
if (isSilentMode)
|
|
42
|
+
return style;
|
|
40
43
|
style.stroke = 'none';
|
|
41
44
|
if (style.hover) {
|
|
42
45
|
style.hover.stroke = 'none';
|
|
@@ -74,10 +77,10 @@ var HtmlResizeView = /** @class */ (function (_super) {
|
|
|
74
77
|
return _super.prototype.getShape.call(this);
|
|
75
78
|
};
|
|
76
79
|
HtmlResizeView.prototype.getShape = function () {
|
|
77
|
-
var
|
|
80
|
+
var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
|
|
78
81
|
return (core_1.h("g", null,
|
|
79
82
|
this.getResizeShape(),
|
|
80
|
-
isSelected ? this.getControlGroup() : ''));
|
|
83
|
+
isSelected && !isSilentMode ? this.getControlGroup() : ''));
|
|
81
84
|
};
|
|
82
85
|
return HtmlResizeView;
|
|
83
86
|
}(core_1.HtmlNode));
|
|
@@ -37,6 +37,9 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
37
37
|
};
|
|
38
38
|
RectResizeModel.prototype.getOutlineStyle = function () {
|
|
39
39
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
40
|
+
var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
|
|
41
|
+
if (isSilentMode)
|
|
42
|
+
return style;
|
|
40
43
|
style.stroke = 'none';
|
|
41
44
|
if (style.hover) {
|
|
42
45
|
style.hover.stroke = 'none';
|
|
@@ -78,10 +81,10 @@ var RectResizeView = /** @class */ (function (_super) {
|
|
|
78
81
|
return _super.prototype.getShape.call(this);
|
|
79
82
|
};
|
|
80
83
|
RectResizeView.prototype.getShape = function () {
|
|
81
|
-
var
|
|
84
|
+
var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
|
|
82
85
|
return (core_1.h("g", null,
|
|
83
86
|
this.getResizeShape(),
|
|
84
|
-
isSelected ? this.getControlGroup() : ''));
|
|
87
|
+
isSelected && !isSilentMode ? this.getControlGroup() : ''));
|
|
85
88
|
};
|
|
86
89
|
return RectResizeView;
|
|
87
90
|
}(core_1.RectNode));
|
|
@@ -64,12 +64,17 @@ var MiniMap = /** @class */ (function () {
|
|
|
64
64
|
y: e.y,
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
|
-
this.
|
|
67
|
+
this.moveViewport = function (top, left) {
|
|
68
68
|
var viewStyle = _this.__viewport.style;
|
|
69
|
-
_this.__viewPortTop
|
|
70
|
-
_this.__viewPortLeft
|
|
69
|
+
_this.__viewPortTop = top;
|
|
70
|
+
_this.__viewPortLeft = left;
|
|
71
71
|
viewStyle.top = _this.__viewPortTop + "px";
|
|
72
72
|
viewStyle.left = _this.__viewPortLeft + "px";
|
|
73
|
+
};
|
|
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;
|
|
77
|
+
_this.moveViewport(top, left);
|
|
73
78
|
_this.__startPosition = {
|
|
74
79
|
x: e.x,
|
|
75
80
|
y: e.y,
|
|
@@ -88,6 +93,21 @@ var MiniMap = /** @class */ (function () {
|
|
|
88
93
|
this.__drop = function () {
|
|
89
94
|
document.removeEventListener('mousemove', _this.__drag);
|
|
90
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;
|
|
100
|
+
}
|
|
101
|
+
if (_this.__viewPortTop > _this.__height) {
|
|
102
|
+
top = _this.__height - _this.__viewPortHeight;
|
|
103
|
+
}
|
|
104
|
+
if (_this.__viewPortLeft < -_this.__width) {
|
|
105
|
+
left = 0;
|
|
106
|
+
}
|
|
107
|
+
if (_this.__viewPortTop < -_this.__height) {
|
|
108
|
+
top = 0;
|
|
109
|
+
}
|
|
110
|
+
_this.moveViewport(top, left);
|
|
91
111
|
};
|
|
92
112
|
this.__lf = lf;
|
|
93
113
|
this.__miniMapWidth = lf.graphModel.width;
|
|
@@ -311,7 +331,7 @@ var MiniMap = /** @class */ (function () {
|
|
|
311
331
|
var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
|
|
312
332
|
var realViewPortHeight = realViewPortWidth / graphRatio;
|
|
313
333
|
this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
|
|
314
|
-
this.__viewPortLeft = -TRANSLATE_X * scale;
|
|
334
|
+
this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
|
|
315
335
|
this.__viewPortWidth = realViewPortWidth;
|
|
316
336
|
this.__viewPortHeight = realViewPortHeight;
|
|
317
337
|
viewStyle.top = this.__viewPortTop + "px";
|
|
@@ -34,6 +34,7 @@ var SelectionSelect = /** @class */ (function () {
|
|
|
34
34
|
this.__drawOff = function () {
|
|
35
35
|
document.removeEventListener('mousemove', _this.__draw);
|
|
36
36
|
document.removeEventListener('mouseup', _this.__drawOff);
|
|
37
|
+
_this.wrapper.oncontextmenu = null;
|
|
37
38
|
_this.__domContainer.removeChild(_this.wrapper);
|
|
38
39
|
var _a = _this.startPoint, x = _a.x, y = _a.y;
|
|
39
40
|
var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
|
|
@@ -43,8 +44,10 @@ var SelectionSelect = /** @class */ (function () {
|
|
|
43
44
|
}
|
|
44
45
|
var lt = [Math.min(x, x1), Math.min(y, y1)];
|
|
45
46
|
var rt = [Math.max(x, x1), Math.max(y, y1)];
|
|
46
|
-
var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
|
|
47
|
+
var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
|
|
48
|
+
var group = _this.lf.graphModel.group;
|
|
47
49
|
elements.forEach(function (element) {
|
|
50
|
+
// 如果节点属于分组,则不不选中节点
|
|
48
51
|
if (_this.isSelectElement(element)) {
|
|
49
52
|
_this.lf.selectElementById(element.id, true);
|
|
50
53
|
}
|
|
@@ -77,6 +80,9 @@ var SelectionSelect = /** @class */ (function () {
|
|
|
77
80
|
_this.endPoint = { x: x, y: y };
|
|
78
81
|
var wrapper = document.createElement('div');
|
|
79
82
|
wrapper.className = 'lf-selection-select';
|
|
83
|
+
wrapper.oncontextmenu = function prevent(ev) {
|
|
84
|
+
ev.preventDefault();
|
|
85
|
+
};
|
|
80
86
|
wrapper.style.top = _this.startPoint.y + "px";
|
|
81
87
|
wrapper.style.left = _this.startPoint.x + "px";
|
|
82
88
|
domContainer.appendChild(wrapper);
|
|
@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
12
12
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
13
13
|
};
|
|
14
14
|
})();
|
|
15
|
+
var __assign = (this && this.__assign) || function () {
|
|
16
|
+
__assign = Object.assign || function(t) {
|
|
17
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
18
|
+
s = arguments[i];
|
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
20
|
+
t[p] = s[p];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
return __assign.apply(this, arguments);
|
|
25
|
+
};
|
|
15
26
|
var __read = (this && this.__read) || function (o, n) {
|
|
16
27
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
17
28
|
if (!m) return o;
|
|
@@ -29,17 +40,36 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
29
40
|
return ar;
|
|
30
41
|
};
|
|
31
42
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
-
exports.CurvedEdge = void 0;
|
|
43
|
+
exports.CurvedEdgeModel = exports.CurvedEdge = void 0;
|
|
33
44
|
var core_1 = require("@logicflow/core");
|
|
34
|
-
var
|
|
35
|
-
__extends(
|
|
36
|
-
function
|
|
45
|
+
var CurvedEdge = /** @class */ (function (_super) {
|
|
46
|
+
__extends(CurvedEdge, _super);
|
|
47
|
+
function CurvedEdge() {
|
|
37
48
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
38
49
|
}
|
|
39
|
-
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
|
|
50
|
+
CurvedEdge.prototype.pointFilter = function (points) {
|
|
51
|
+
var allPoints = points;
|
|
52
|
+
var i = 1;
|
|
53
|
+
while (i < allPoints.length - 1) {
|
|
54
|
+
var _a = __read(allPoints[i - 1], 2), x = _a[0], y = _a[1];
|
|
55
|
+
var _b = __read(allPoints[i], 2), x1 = _b[0], y1 = _b[1];
|
|
56
|
+
var _c = __read(allPoints[i + 1], 2), x2 = _c[0], y2 = _c[1];
|
|
57
|
+
if ((x === x1 && x1 === x2)
|
|
58
|
+
|| (y === y1 && y1 === y2)) {
|
|
59
|
+
allPoints.splice(i, 1);
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
i++;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return allPoints;
|
|
66
|
+
};
|
|
67
|
+
CurvedEdge.prototype.getEdge = function () {
|
|
68
|
+
var model = this.props.model;
|
|
69
|
+
var points = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig, _a = model.radius, radius = _a === void 0 ? 5 : _a;
|
|
70
|
+
var style = model.getEdgeStyle();
|
|
71
|
+
var animationStyle = model.getEdgeAnimationStyle();
|
|
72
|
+
var points2 = this.pointFilter(points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); }));
|
|
43
73
|
var _b = __read(points2[0], 2), startX = _b[0], startY = _b[1];
|
|
44
74
|
var d = "M" + startX + " " + startY;
|
|
45
75
|
// 1) 如果一个点不为开始和结束,则在这个点的前后增加弧度开始和结束点。
|
|
@@ -47,43 +77,36 @@ var CurvedEdgeView = /** @class */ (function (_super) {
|
|
|
47
77
|
// 如果x相同则前一个点的x也不变,
|
|
48
78
|
// y为(这个点的y 大于前一个点的y, 则 为 这个点的y - 5;小于前一个点的y, 则为这个点的y+5)
|
|
49
79
|
// 同理,判断这个点与后一个点的x,y是否相同,如果x相同,则y进行加减,如果y相同,则x进行加减
|
|
50
|
-
// todo: 好丑,看看怎么优化下
|
|
51
|
-
var space = 5;
|
|
52
80
|
for (var i = 1; i < points2.length - 1; i++) {
|
|
53
81
|
var _c = __read(points2[i - 1], 2), preX = _c[0], preY = _c[1];
|
|
54
82
|
var _d = __read(points2[i], 2), currentX = _d[0], currentY = _d[1];
|
|
55
83
|
var _e = __read(points2[i + 1], 2), nextX = _e[0], nextY = _e[1];
|
|
56
84
|
if (currentX === preX && currentY !== preY) {
|
|
57
|
-
var y = currentY > preY ? currentY -
|
|
85
|
+
var y = currentY > preY ? currentY - radius : currentY + radius;
|
|
58
86
|
d = d + " L " + currentX + " " + y;
|
|
59
87
|
}
|
|
60
88
|
if (currentY === preY && currentX !== preX) {
|
|
61
|
-
var x = currentX > preX ? currentX -
|
|
89
|
+
var x = currentX > preX ? currentX - radius : currentX + radius;
|
|
62
90
|
d = d + " L " + x + " " + currentY;
|
|
63
91
|
}
|
|
64
92
|
d = d + " Q " + currentX + " " + currentY;
|
|
65
93
|
if (currentX === nextX && currentY !== nextY) {
|
|
66
|
-
var y = currentY > nextY ? currentY -
|
|
94
|
+
var y = currentY > nextY ? currentY - radius : currentY + radius;
|
|
67
95
|
d = d + " " + currentX + " " + y;
|
|
68
96
|
}
|
|
69
97
|
if (currentY === nextY && currentX !== nextX) {
|
|
70
|
-
var x = currentX > nextX ? currentX -
|
|
98
|
+
var x = currentX > nextX ? currentX - radius : currentX + radius;
|
|
71
99
|
d = d + " " + x + " " + currentY;
|
|
72
100
|
}
|
|
73
101
|
}
|
|
74
102
|
var _f = __read(points2[points2.length - 1], 2), endX = _f[0], endY = _f[1];
|
|
75
103
|
d = d + " L " + endX + " " + endY;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
strokeWidth: strokeWidth,
|
|
79
|
-
stroke: stroke,
|
|
80
|
-
fill: 'none',
|
|
81
|
-
strokeDashArray: strokeDashArray,
|
|
82
|
-
});
|
|
104
|
+
var attrs = __assign(__assign(__assign({ d: d, style: isAnimation ? animationStyle : {} }, style), arrowConfig), { fill: 'none' });
|
|
105
|
+
return core_1.h('path', __assign({ d: d }, attrs));
|
|
83
106
|
};
|
|
84
|
-
|
|
85
|
-
return CurvedEdgeView;
|
|
107
|
+
return CurvedEdge;
|
|
86
108
|
}(core_1.PolylineEdge));
|
|
109
|
+
exports.CurvedEdge = CurvedEdge;
|
|
87
110
|
var CurvedEdgeModel = /** @class */ (function (_super) {
|
|
88
111
|
__extends(CurvedEdgeModel, _super);
|
|
89
112
|
function CurvedEdgeModel() {
|
|
@@ -91,20 +114,4 @@ var CurvedEdgeModel = /** @class */ (function (_super) {
|
|
|
91
114
|
}
|
|
92
115
|
return CurvedEdgeModel;
|
|
93
116
|
}(core_1.PolylineEdgeModel));
|
|
94
|
-
|
|
95
|
-
pluginName: 'curved-edge',
|
|
96
|
-
curvedSpace: 5,
|
|
97
|
-
init: function (_a) {
|
|
98
|
-
var curvedSpace = _a.curvedSpace;
|
|
99
|
-
CurvedEdge.curvedSpace = curvedSpace;
|
|
100
|
-
},
|
|
101
|
-
install: function (lf) {
|
|
102
|
-
lf.register({
|
|
103
|
-
type: 'curved-edge',
|
|
104
|
-
view: CurvedEdgeView,
|
|
105
|
-
model: CurvedEdgeModel,
|
|
106
|
-
});
|
|
107
|
-
},
|
|
108
|
-
};
|
|
109
|
-
exports.CurvedEdge = CurvedEdge;
|
|
110
|
-
exports.default = CurvedEdge;
|
|
117
|
+
exports.CurvedEdgeModel = CurvedEdgeModel;
|
|
@@ -79,6 +79,8 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
79
79
|
this.resizable = false;
|
|
80
80
|
this.autoToFront = false;
|
|
81
81
|
this.foldable = false;
|
|
82
|
+
// 是否可以被嵌套
|
|
83
|
+
this.nestable = false;
|
|
82
84
|
if (this.properties.isFolded === undefined) {
|
|
83
85
|
this.properties.isFolded = false;
|
|
84
86
|
}
|
|
@@ -102,10 +104,25 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
102
104
|
* 3. 处理连线
|
|
103
105
|
*/
|
|
104
106
|
GroupNodeModel.prototype.foldGroup = function (isFolded) {
|
|
105
|
-
var _this = this;
|
|
106
107
|
this.setProperty('isFolded', isFolded);
|
|
107
108
|
this.isFolded = isFolded;
|
|
108
109
|
// step 1
|
|
110
|
+
this.foldRect(isFolded);
|
|
111
|
+
// step 2
|
|
112
|
+
var allEdges = this.foldChildren(isFolded);
|
|
113
|
+
// step 3
|
|
114
|
+
console.log({ allEdges: allEdges });
|
|
115
|
+
this.foldEdge(isFolded, allEdges);
|
|
116
|
+
};
|
|
117
|
+
GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
|
|
118
|
+
var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
|
|
119
|
+
style.stroke = 'transparent';
|
|
120
|
+
style.fill = 'transparent';
|
|
121
|
+
style.hover.fill = 'transparent';
|
|
122
|
+
style.hover.stroke = 'transparent';
|
|
123
|
+
return style;
|
|
124
|
+
};
|
|
125
|
+
GroupNodeModel.prototype.foldRect = function (isFolded) {
|
|
109
126
|
if (isFolded) {
|
|
110
127
|
this.unfoldedWidth = this.width;
|
|
111
128
|
this.unfoldedHight = this.height;
|
|
@@ -124,25 +141,23 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
124
141
|
y: this.y + this.unfoldedHight / 2 - this.foldedHeight / 2,
|
|
125
142
|
});
|
|
126
143
|
}
|
|
127
|
-
|
|
144
|
+
};
|
|
145
|
+
GroupNodeModel.prototype.foldChildren = function (isFolded) {
|
|
146
|
+
var _this = this;
|
|
128
147
|
var allEdges = this.incoming.edges.concat(this.outgoing.edges);
|
|
129
148
|
this.children.forEach(function (elementId) {
|
|
130
149
|
var nodeModel = _this.graphModel.getElement(elementId);
|
|
150
|
+
if (nodeModel.isGroup) {
|
|
151
|
+
var childEdges = nodeModel.foldChildren(isFolded || nodeModel.isFolded);
|
|
152
|
+
allEdges = allEdges.concat(childEdges);
|
|
153
|
+
nodeModel.foldEdge(isFolded, childEdges);
|
|
154
|
+
}
|
|
155
|
+
allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
|
|
131
156
|
nodeModel.updateAttributes({
|
|
132
157
|
visible: !isFolded,
|
|
133
158
|
});
|
|
134
|
-
allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
|
|
135
159
|
});
|
|
136
|
-
|
|
137
|
-
this.foldEdge(isFolded, allEdges);
|
|
138
|
-
};
|
|
139
|
-
GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
|
|
140
|
-
var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
|
|
141
|
-
style.stroke = 'transparent';
|
|
142
|
-
style.fill = 'transparent';
|
|
143
|
-
style.hover.fill = 'transparent';
|
|
144
|
-
style.hover.stroke = 'transparent';
|
|
145
|
-
return style;
|
|
160
|
+
return allEdges;
|
|
146
161
|
};
|
|
147
162
|
/**
|
|
148
163
|
* 折叠分组的时候,处理分组自身的连线和分组内部子节点上的连线
|
|
@@ -267,6 +282,19 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
267
282
|
GroupNodeModel.prototype.removeChild = function (id) {
|
|
268
283
|
this.children.delete(id);
|
|
269
284
|
};
|
|
285
|
+
/**
|
|
286
|
+
* 获得包含嵌套组的所有子节点
|
|
287
|
+
*/
|
|
288
|
+
GroupNodeModel.prototype.getChildren = function () {
|
|
289
|
+
var _this = this;
|
|
290
|
+
return __spread(this.children).flatMap(function (child) {
|
|
291
|
+
var model = _this.graphModel.getElement(child);
|
|
292
|
+
if (model.isGroup) {
|
|
293
|
+
return __spread([child], model.getChildren());
|
|
294
|
+
}
|
|
295
|
+
return child;
|
|
296
|
+
});
|
|
297
|
+
};
|
|
270
298
|
GroupNodeModel.prototype.getAddableOutlineStyle = function () {
|
|
271
299
|
return {
|
|
272
300
|
stroke: '#FEB663',
|
|
@@ -294,6 +322,12 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
294
322
|
}
|
|
295
323
|
return data;
|
|
296
324
|
};
|
|
325
|
+
/**
|
|
326
|
+
* 是否允许此节点添加到此分组中
|
|
327
|
+
*/
|
|
328
|
+
GroupNodeModel.prototype.isAllowAppendIn = function (nodeData) {
|
|
329
|
+
return true;
|
|
330
|
+
};
|
|
297
331
|
return GroupNodeModel;
|
|
298
332
|
}(NodeResize_1.RectResize.model));
|
|
299
333
|
var GroupNode = /** @class */ (function (_super) {
|