@logicflow/extension 1.1.7 → 1.1.8-alpha.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 +14 -7
- package/cjs/NodeResize/Node/DiamondResize.js +8 -4
- package/cjs/NodeResize/Node/EllipseResize.js +7 -4
- package/cjs/NodeResize/Node/HtmlResize.js +7 -4
- package/cjs/NodeResize/Node/RectResize.js +8 -5
- package/cjs/insert-node-in-polyline/index.js +20 -19
- package/cjs/materials/group/GroupNode.js +119 -53
- package/cjs/materials/group/index.js +20 -8
- package/es/NodeResize/Control/Control.d.ts +2 -2
- package/es/NodeResize/Control/Control.js +14 -7
- package/es/NodeResize/Node/DiamondResize.d.ts +1 -4
- package/es/NodeResize/Node/DiamondResize.js +8 -4
- package/es/NodeResize/Node/EllipseResize.d.ts +1 -4
- package/es/NodeResize/Node/EllipseResize.js +7 -4
- package/es/NodeResize/Node/HtmlResize.d.ts +1 -4
- package/es/NodeResize/Node/HtmlResize.js +7 -4
- package/es/NodeResize/Node/RectResize.d.ts +1 -4
- package/es/NodeResize/Node/RectResize.js +8 -5
- package/es/insert-node-in-polyline/index.d.ts +8 -5
- package/es/insert-node-in-polyline/index.js +20 -19
- package/es/materials/group/GroupNode.d.ts +43 -4
- package/es/materials/group/GroupNode.js +119 -53
- package/es/materials/group/index.d.ts +7 -1
- package/es/materials/group/index.js +20 -8
- 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/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 +2 -2
- package/types/NodeResize/Control/Control.d.ts +2 -2
- package/types/NodeResize/Node/DiamondResize.d.ts +1 -4
- package/types/NodeResize/Node/EllipseResize.d.ts +1 -4
- package/types/NodeResize/Node/HtmlResize.d.ts +1 -4
- package/types/NodeResize/Node/RectResize.d.ts +1 -4
- package/types/insert-node-in-polyline/index.d.ts +8 -5
- package/types/materials/group/GroupNode.d.ts +43 -4
- package/types/materials/group/index.d.ts +7 -1
|
@@ -29,10 +29,6 @@ var DiamondResizeModel = /** @class */ (function (_super) {
|
|
|
29
29
|
__extends(DiamondResizeModel, _super);
|
|
30
30
|
function DiamondResizeModel(data, graphModel) {
|
|
31
31
|
var _this = _super.call(this, data, graphModel) || this;
|
|
32
|
-
_this.minWidth = 30;
|
|
33
|
-
_this.minHeight = 30;
|
|
34
|
-
_this.maxWidth = 2000;
|
|
35
|
-
_this.maxHeight = 2000;
|
|
36
32
|
var nodeSize = _this.properties.nodeSize;
|
|
37
33
|
if (nodeSize) {
|
|
38
34
|
_this.rx = nodeSize.rx;
|
|
@@ -40,6 +36,14 @@ var DiamondResizeModel = /** @class */ (function (_super) {
|
|
|
40
36
|
}
|
|
41
37
|
return _this;
|
|
42
38
|
}
|
|
39
|
+
DiamondResizeModel.prototype.initNodeData = function (data) {
|
|
40
|
+
_super.prototype.initNodeData.call(this, data);
|
|
41
|
+
this.minWidth = 30;
|
|
42
|
+
this.minHeight = 30;
|
|
43
|
+
this.maxWidth = 2000;
|
|
44
|
+
this.maxHeight = 2000;
|
|
45
|
+
this.gridSize = 1;
|
|
46
|
+
};
|
|
43
47
|
DiamondResizeModel.prototype.getOutlineStyle = function () {
|
|
44
48
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
45
49
|
style.stroke = 'none';
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { h, EllipseNode, EllipseNodeModel } from '@logicflow/core';
|
|
2
2
|
declare class EllipseResizeModel extends EllipseNodeModel {
|
|
3
|
-
minWidth: number;
|
|
4
|
-
minHeight: number;
|
|
5
|
-
maxWidth: number;
|
|
6
|
-
maxHeight: number;
|
|
7
3
|
constructor(data: any, graphModel: any);
|
|
4
|
+
initNodeData(data: any): void;
|
|
8
5
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
9
6
|
getResizeOutlineStyle(): {
|
|
10
7
|
stroke: string;
|
|
@@ -17,10 +17,6 @@ var EllipseResizeModel = /** @class */ (function (_super) {
|
|
|
17
17
|
__extends(EllipseResizeModel, _super);
|
|
18
18
|
function EllipseResizeModel(data, graphModel) {
|
|
19
19
|
var _this = _super.call(this, data, graphModel) || this;
|
|
20
|
-
_this.minWidth = 30;
|
|
21
|
-
_this.minHeight = 30;
|
|
22
|
-
_this.maxWidth = 2000;
|
|
23
|
-
_this.maxHeight = 2000;
|
|
24
20
|
var nodeSize = _this.properties.nodeSize;
|
|
25
21
|
if (nodeSize) {
|
|
26
22
|
_this.rx = nodeSize.rx;
|
|
@@ -28,6 +24,13 @@ var EllipseResizeModel = /** @class */ (function (_super) {
|
|
|
28
24
|
}
|
|
29
25
|
return _this;
|
|
30
26
|
}
|
|
27
|
+
EllipseResizeModel.prototype.initNodeData = function (data) {
|
|
28
|
+
_super.prototype.initNodeData.call(this, data);
|
|
29
|
+
this.minWidth = 30;
|
|
30
|
+
this.minHeight = 30;
|
|
31
|
+
this.maxWidth = 2000;
|
|
32
|
+
this.maxHeight = 2000;
|
|
33
|
+
};
|
|
31
34
|
EllipseResizeModel.prototype.getOutlineStyle = function () {
|
|
32
35
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
33
36
|
style.stroke = 'none';
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
|
|
2
2
|
declare class HtmlResizeModel extends HtmlNodeModel {
|
|
3
|
-
minWidth: number;
|
|
4
|
-
minHeight: number;
|
|
5
|
-
maxWidth: number;
|
|
6
|
-
maxHeight: number;
|
|
7
3
|
constructor(data: any, graphModel: any);
|
|
4
|
+
initNodeData(data: any): void;
|
|
8
5
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
9
6
|
getResizeOutlineStyle(): {
|
|
10
7
|
stroke: string;
|
|
@@ -17,10 +17,6 @@ var HtmlResizeModel = /** @class */ (function (_super) {
|
|
|
17
17
|
__extends(HtmlResizeModel, _super);
|
|
18
18
|
function HtmlResizeModel(data, graphModel) {
|
|
19
19
|
var _this = _super.call(this, data, graphModel) || this;
|
|
20
|
-
_this.minWidth = 30;
|
|
21
|
-
_this.minHeight = 30;
|
|
22
|
-
_this.maxWidth = 2000;
|
|
23
|
-
_this.maxHeight = 2000;
|
|
24
20
|
var nodeSize = _this.properties.nodeSize;
|
|
25
21
|
if (nodeSize) {
|
|
26
22
|
_this.width = nodeSize.width;
|
|
@@ -28,6 +24,13 @@ var HtmlResizeModel = /** @class */ (function (_super) {
|
|
|
28
24
|
}
|
|
29
25
|
return _this;
|
|
30
26
|
}
|
|
27
|
+
HtmlResizeModel.prototype.initNodeData = function (data) {
|
|
28
|
+
_super.prototype.initNodeData.call(this, data);
|
|
29
|
+
this.minWidth = 30;
|
|
30
|
+
this.minHeight = 30;
|
|
31
|
+
this.maxWidth = 2000;
|
|
32
|
+
this.maxHeight = 2000;
|
|
33
|
+
};
|
|
31
34
|
HtmlResizeModel.prototype.getOutlineStyle = function () {
|
|
32
35
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
33
36
|
style.stroke = 'none';
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { h, RectNode, RectNodeModel } from '@logicflow/core';
|
|
2
2
|
declare class RectResizeModel extends RectNodeModel {
|
|
3
|
-
minWidth: number;
|
|
4
|
-
minHeight: number;
|
|
5
|
-
maxWidth: number;
|
|
6
|
-
maxHeight: number;
|
|
7
3
|
constructor(data: any, graphModel: any);
|
|
4
|
+
initNodeData(data: any): void;
|
|
8
5
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
9
6
|
getResizeOutlineStyle(): {
|
|
10
7
|
fill: string;
|
|
@@ -17,10 +17,6 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
17
17
|
__extends(RectResizeModel, _super);
|
|
18
18
|
function RectResizeModel(data, graphModel) {
|
|
19
19
|
var _this = _super.call(this, data, graphModel) || this;
|
|
20
|
-
_this.minWidth = 30;
|
|
21
|
-
_this.minHeight = 30;
|
|
22
|
-
_this.maxWidth = 2000;
|
|
23
|
-
_this.maxHeight = 2000;
|
|
24
20
|
var nodeSize = _this.properties.nodeSize;
|
|
25
21
|
if (nodeSize) {
|
|
26
22
|
_this.width = nodeSize.width;
|
|
@@ -28,6 +24,13 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
28
24
|
}
|
|
29
25
|
return _this;
|
|
30
26
|
}
|
|
27
|
+
RectResizeModel.prototype.initNodeData = function (data) {
|
|
28
|
+
_super.prototype.initNodeData.call(this, data);
|
|
29
|
+
this.minWidth = 30;
|
|
30
|
+
this.minHeight = 30;
|
|
31
|
+
this.maxWidth = 2000;
|
|
32
|
+
this.maxHeight = 2000;
|
|
33
|
+
};
|
|
31
34
|
RectResizeModel.prototype.getOutlineStyle = function () {
|
|
32
35
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
33
36
|
style.stroke = 'none';
|
|
@@ -39,7 +42,7 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
39
42
|
RectResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
40
43
|
return {
|
|
41
44
|
fill: 'none',
|
|
42
|
-
stroke: '
|
|
45
|
+
stroke: 'transparent',
|
|
43
46
|
strokeWidth: 1,
|
|
44
47
|
strokeDasharray: '3,3',
|
|
45
48
|
};
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import LogicFlow from '@logicflow/core';
|
|
2
|
+
declare class InsertNodeInPolyline {
|
|
3
|
+
static pluginName: string;
|
|
4
|
+
_lf: LogicFlow;
|
|
4
5
|
dndAdd: boolean;
|
|
5
6
|
dropAdd: boolean;
|
|
6
|
-
|
|
7
|
+
constructor({ lf }: {
|
|
8
|
+
lf: any;
|
|
9
|
+
});
|
|
7
10
|
eventHandler(): void;
|
|
8
11
|
insetNode(nodeData: any): void;
|
|
9
|
-
}
|
|
12
|
+
}
|
|
10
13
|
export { InsertNodeInPolyline };
|
|
11
14
|
export default InsertNodeInPolyline;
|
|
@@ -19,26 +19,25 @@ var __spread = (this && this.__spread) || function () {
|
|
|
19
19
|
return ar;
|
|
20
20
|
};
|
|
21
21
|
import { isNodeInSegement } from './edge';
|
|
22
|
-
var InsertNodeInPolyline = {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
InsertNodeInPolyline._lf = lf;
|
|
22
|
+
var InsertNodeInPolyline = /** @class */ (function () {
|
|
23
|
+
function InsertNodeInPolyline(_a) {
|
|
24
|
+
var lf = _a.lf;
|
|
25
|
+
this._lf = lf;
|
|
26
|
+
this.dndAdd = true;
|
|
27
|
+
this.dropAdd = true;
|
|
29
28
|
this.eventHandler();
|
|
30
|
-
}
|
|
31
|
-
eventHandler
|
|
29
|
+
}
|
|
30
|
+
InsertNodeInPolyline.prototype.eventHandler = function () {
|
|
32
31
|
var _this = this;
|
|
33
32
|
// 监听事件
|
|
34
|
-
if (
|
|
35
|
-
|
|
33
|
+
if (this.dndAdd) {
|
|
34
|
+
this._lf.on('node:dnd-add', function (_a) {
|
|
36
35
|
var data = _a.data;
|
|
37
|
-
|
|
36
|
+
_this.insetNode(data);
|
|
38
37
|
});
|
|
39
38
|
}
|
|
40
|
-
if (
|
|
41
|
-
|
|
39
|
+
if (this.dropAdd) {
|
|
40
|
+
this._lf.on('node:drop', function (_a) {
|
|
42
41
|
var data = _a.data;
|
|
43
42
|
var edges = _this._lf.graphModel.edges;
|
|
44
43
|
var id = data.id;
|
|
@@ -50,12 +49,12 @@ var InsertNodeInPolyline = {
|
|
|
50
49
|
}
|
|
51
50
|
}
|
|
52
51
|
if (pureNode) {
|
|
53
|
-
|
|
52
|
+
_this.insetNode(data);
|
|
54
53
|
}
|
|
55
54
|
});
|
|
56
55
|
}
|
|
57
|
-
}
|
|
58
|
-
insetNode
|
|
56
|
+
};
|
|
57
|
+
InsertNodeInPolyline.prototype.insetNode = function (nodeData) {
|
|
59
58
|
var edges = this._lf.graphModel.edges;
|
|
60
59
|
var nodeModel = this._lf.getNodeModelById(nodeData.id);
|
|
61
60
|
for (var i = 0; i < edges.length; i++) {
|
|
@@ -79,7 +78,9 @@ var InsertNodeInPolyline = {
|
|
|
79
78
|
break;
|
|
80
79
|
}
|
|
81
80
|
}
|
|
82
|
-
}
|
|
83
|
-
|
|
81
|
+
};
|
|
82
|
+
InsertNodeInPolyline.pluginName = 'insertNodeInPolyline';
|
|
83
|
+
return InsertNodeInPolyline;
|
|
84
|
+
}());
|
|
84
85
|
export { InsertNodeInPolyline };
|
|
85
86
|
export default InsertNodeInPolyline;
|
|
@@ -2,12 +2,33 @@ import { h } from '@logicflow/core';
|
|
|
2
2
|
import { RectResize } from '../../NodeResize';
|
|
3
3
|
declare class GroupNodeModel extends RectResize.model {
|
|
4
4
|
readonly isGroup = true;
|
|
5
|
+
/**
|
|
6
|
+
* 此分组的子节点Id
|
|
7
|
+
*/
|
|
5
8
|
children: Set<string>;
|
|
9
|
+
/**
|
|
10
|
+
* 其子节点是否被禁止通过拖拽移出分组。 默认false,允许拖拽移除分组。
|
|
11
|
+
*/
|
|
6
12
|
isRestrict: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* 分组节点是否允许调整大小。
|
|
15
|
+
*/
|
|
7
16
|
resizable: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* 分组节点是否允许折叠
|
|
19
|
+
*/
|
|
8
20
|
foldable: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* 折叠后的宽度
|
|
23
|
+
*/
|
|
9
24
|
foldedWidth: number;
|
|
25
|
+
/**
|
|
26
|
+
* 折叠后的高度
|
|
27
|
+
*/
|
|
10
28
|
foldedHeight: number;
|
|
29
|
+
/**
|
|
30
|
+
* 分组折叠状态
|
|
31
|
+
*/
|
|
11
32
|
isFolded: boolean;
|
|
12
33
|
unfoldedWidth: number;
|
|
13
34
|
unfoldedHight: number;
|
|
@@ -18,14 +39,31 @@ declare class GroupNodeModel extends RectResize.model {
|
|
|
18
39
|
strokeWidth: number;
|
|
19
40
|
strokeDasharray: string;
|
|
20
41
|
};
|
|
42
|
+
/**
|
|
43
|
+
* 折叠分组
|
|
44
|
+
* 1. 折叠分组的宽高
|
|
45
|
+
* 2. 处理分组子节点
|
|
46
|
+
* 3. 处理连线
|
|
47
|
+
*/
|
|
21
48
|
foldGroup(isFolded: any): void;
|
|
49
|
+
getAnchorStyle(anchorInfo: any): Record<string, any>;
|
|
22
50
|
/**
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
51
|
+
* 折叠分组的时候,处理分组自身的连线和分组内部子节点上的连线
|
|
52
|
+
* 边的分类:
|
|
53
|
+
* - 虚拟边:分组被收起时,表示分组本身与外部节点关系的边。
|
|
54
|
+
* - 真实边:分组本身或者分组内部节点与外部节点节点(非收起分组)关系的边。
|
|
55
|
+
* 如果一个分组,本身与外部节点有M条连线,且内部N个子节点与外部节点有连线,那么这个分组收起时会生成M+N条连线。
|
|
56
|
+
* 折叠分组时:
|
|
57
|
+
* - 原有的虚拟边删除;
|
|
58
|
+
* - 创建一个虚拟边;
|
|
59
|
+
* - 真实边则隐藏;
|
|
60
|
+
* 展开分组是:
|
|
61
|
+
* - 原有的虚拟边删除;
|
|
62
|
+
* - 如果目外部点是收起的分组,则创建虚拟边;
|
|
63
|
+
* - 如果外部节点是普通节点,则显示真实边;
|
|
27
64
|
*/
|
|
28
65
|
private foldEdge;
|
|
66
|
+
createVirtualEdge(edgeData: any): void;
|
|
29
67
|
isInRange({ x1, y1, x2, y2 }: {
|
|
30
68
|
x1: any;
|
|
31
69
|
y1: any;
|
|
@@ -50,6 +88,7 @@ declare class GroupNodeModel extends RectResize.model {
|
|
|
50
88
|
fill: string;
|
|
51
89
|
};
|
|
52
90
|
getData(): import("@logicflow/core").NodeData;
|
|
91
|
+
getHistoryData(): import("@logicflow/core").NodeData;
|
|
53
92
|
}
|
|
54
93
|
declare class GroupNode extends RectResize.view {
|
|
55
94
|
getControlGroup(): h.JSX.Element;
|
|
@@ -56,6 +56,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
56
56
|
return _this;
|
|
57
57
|
}
|
|
58
58
|
GroupNodeModel.prototype.initNodeData = function (data) {
|
|
59
|
+
var _this = this;
|
|
59
60
|
_super.prototype.initNodeData.call(this, data);
|
|
60
61
|
var children = [];
|
|
61
62
|
if (Array.isArray(data.children)) {
|
|
@@ -76,18 +77,33 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
76
77
|
this.resizable = false;
|
|
77
78
|
this.autoToFront = false;
|
|
78
79
|
this.foldable = false;
|
|
79
|
-
this.properties.isFolded
|
|
80
|
+
if (this.properties.isFolded === undefined) {
|
|
81
|
+
this.properties.isFolded = false;
|
|
82
|
+
}
|
|
80
83
|
this.isFolded = this.properties.isFolded;
|
|
84
|
+
// fixme: 虽然默认保存的分组不会收起,但是如果重写保存数据分组了,
|
|
85
|
+
// 此处代码会导致多一个history记录
|
|
86
|
+
setTimeout(function () {
|
|
87
|
+
_this.isFolded && _this.foldGroup(_this.isFolded);
|
|
88
|
+
});
|
|
89
|
+
// this.foldGroup(this.isFolded);
|
|
81
90
|
};
|
|
82
91
|
GroupNodeModel.prototype.getResizeOutlineStyle = function () {
|
|
83
92
|
var style = _super.prototype.getResizeOutlineStyle.call(this);
|
|
84
93
|
style.stroke = 'none';
|
|
85
94
|
return style;
|
|
86
95
|
};
|
|
96
|
+
/**
|
|
97
|
+
* 折叠分组
|
|
98
|
+
* 1. 折叠分组的宽高
|
|
99
|
+
* 2. 处理分组子节点
|
|
100
|
+
* 3. 处理连线
|
|
101
|
+
*/
|
|
87
102
|
GroupNodeModel.prototype.foldGroup = function (isFolded) {
|
|
88
103
|
var _this = this;
|
|
89
104
|
this.setProperty('isFolded', isFolded);
|
|
90
105
|
this.isFolded = isFolded;
|
|
106
|
+
// step 1
|
|
91
107
|
if (isFolded) {
|
|
92
108
|
this.x = this.x - this.width / 2 + this.foldedWidth / 2;
|
|
93
109
|
this.y = this.y - this.height / 2 + this.foldedHeight / 2;
|
|
@@ -102,70 +118,109 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
102
118
|
this.x = this.x + this.width / 2 - this.foldedWidth / 2;
|
|
103
119
|
this.y = this.y + this.height / 2 - this.foldedHeight / 2;
|
|
104
120
|
}
|
|
105
|
-
//
|
|
106
|
-
var
|
|
107
|
-
var outgoingEdges = this.graphModel.getNodeOutgoingEdge(this.id);
|
|
108
|
-
inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel) {
|
|
109
|
-
_this.graphModel.deleteEdgeById(edgeModel.id);
|
|
110
|
-
if (!edgeModel.isFoldedEdge) {
|
|
111
|
-
var isCommingEdge = edgeModel.targetNodeId === _this.id;
|
|
112
|
-
var data = edgeModel.getData();
|
|
113
|
-
if (isCommingEdge) {
|
|
114
|
-
data.endPoint = undefined;
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
data.startPoint = undefined;
|
|
118
|
-
}
|
|
119
|
-
data.pointsList = undefined;
|
|
120
|
-
_this.graphModel.addEdge(data);
|
|
121
|
-
}
|
|
122
|
-
});
|
|
121
|
+
// step 2
|
|
122
|
+
var allEdges = this.incoming.edges.concat(this.outgoing.edges);
|
|
123
123
|
this.children.forEach(function (elementId) {
|
|
124
124
|
var nodeModel = _this.graphModel.getElement(elementId);
|
|
125
125
|
nodeModel.visible = !isFolded;
|
|
126
|
-
|
|
126
|
+
allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
|
|
127
127
|
});
|
|
128
|
+
// step 3
|
|
129
|
+
this.foldEdge(isFolded, allEdges);
|
|
130
|
+
};
|
|
131
|
+
GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
|
|
132
|
+
var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
|
|
133
|
+
style.stroke = 'transparent';
|
|
134
|
+
style.fill = 'transparent';
|
|
135
|
+
style.hover.fill = 'transparent';
|
|
136
|
+
style.hover.stroke = 'transparent';
|
|
137
|
+
return style;
|
|
128
138
|
};
|
|
129
139
|
/**
|
|
130
|
-
*
|
|
131
|
-
*
|
|
132
|
-
*
|
|
133
|
-
*
|
|
140
|
+
* 折叠分组的时候,处理分组自身的连线和分组内部子节点上的连线
|
|
141
|
+
* 边的分类:
|
|
142
|
+
* - 虚拟边:分组被收起时,表示分组本身与外部节点关系的边。
|
|
143
|
+
* - 真实边:分组本身或者分组内部节点与外部节点节点(非收起分组)关系的边。
|
|
144
|
+
* 如果一个分组,本身与外部节点有M条连线,且内部N个子节点与外部节点有连线,那么这个分组收起时会生成M+N条连线。
|
|
145
|
+
* 折叠分组时:
|
|
146
|
+
* - 原有的虚拟边删除;
|
|
147
|
+
* - 创建一个虚拟边;
|
|
148
|
+
* - 真实边则隐藏;
|
|
149
|
+
* 展开分组是:
|
|
150
|
+
* - 原有的虚拟边删除;
|
|
151
|
+
* - 如果目外部点是收起的分组,则创建虚拟边;
|
|
152
|
+
* - 如果外部节点是普通节点,则显示真实边;
|
|
134
153
|
*/
|
|
135
|
-
GroupNodeModel.prototype.foldEdge = function (
|
|
154
|
+
GroupNodeModel.prototype.foldEdge = function (isFolded, allEdges) {
|
|
136
155
|
var _this = this;
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
data.
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
156
|
+
allEdges.forEach(function (edgeModel, index) {
|
|
157
|
+
var id = edgeModel.id, sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, type = edgeModel.type, properties = edgeModel.properties, text = edgeModel.text;
|
|
158
|
+
var data = {
|
|
159
|
+
id: id + "__" + index,
|
|
160
|
+
sourceNodeId: sourceNodeId,
|
|
161
|
+
targetNodeId: targetNodeId,
|
|
162
|
+
startPoint: startPoint,
|
|
163
|
+
endPoint: endPoint,
|
|
164
|
+
type: type,
|
|
165
|
+
properties: properties,
|
|
166
|
+
text: text === null || text === void 0 ? void 0 : text.value,
|
|
167
|
+
};
|
|
168
|
+
if (edgeModel.virtual) {
|
|
169
|
+
_this.graphModel.deleteEdgeById(edgeModel.id);
|
|
170
|
+
}
|
|
171
|
+
// 折叠时,处理未被隐藏的边的逻辑
|
|
172
|
+
if (isFolded && edgeModel.visible !== false) {
|
|
173
|
+
// 需要确认此分组节点是新连线的起点还是终点
|
|
174
|
+
// 创建一个虚拟边,虚拟边相对真实边,起点或者终点从一起分组内部的节点成为了分组,
|
|
175
|
+
// 如果需要被隐藏的边的起点在需要折叠的分组中,那么设置虚拟边的开始节点为此分组
|
|
176
|
+
if (_this.children.has(sourceNodeId) || _this.id === sourceNodeId) {
|
|
177
|
+
data.startPoint = undefined;
|
|
178
|
+
data.sourceNodeId = _this.id;
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
data.endPoint = undefined;
|
|
182
|
+
data.targetNodeId = _this.id;
|
|
183
|
+
}
|
|
184
|
+
_this.createVirtualEdge(data);
|
|
185
|
+
edgeModel.visible = false;
|
|
186
|
+
}
|
|
187
|
+
// 展开时,处理被隐藏的边的逻辑
|
|
188
|
+
if (!isFolded && edgeModel.visible === false) {
|
|
189
|
+
// 展开分组时:判断真实边的起点和终点是否有任一节点在已折叠分组中,如果不是,则显示真实边。如果是,这修改这个边的对应目标节点id来创建虚拟边。
|
|
190
|
+
var targetNodeIdGroup = _this.graphModel.group.getNodeGroup(targetNodeId);
|
|
191
|
+
// 考虑目标节点本来就是分组的情况
|
|
192
|
+
if (!targetNodeIdGroup) {
|
|
193
|
+
targetNodeIdGroup = _this.graphModel.getNodeModelById(targetNodeId);
|
|
194
|
+
}
|
|
195
|
+
var sourceNodeIdGroup = _this.graphModel.group.getNodeGroup(sourceNodeId);
|
|
196
|
+
if (!sourceNodeIdGroup) {
|
|
197
|
+
sourceNodeIdGroup = _this.graphModel.getNodeModelById(sourceNodeId);
|
|
198
|
+
}
|
|
199
|
+
if (targetNodeIdGroup && targetNodeIdGroup.isGroup && targetNodeIdGroup.isFolded) {
|
|
200
|
+
data.targetNodeId = targetNodeIdGroup.id;
|
|
201
|
+
data.endPoint = undefined;
|
|
202
|
+
_this.createVirtualEdge(data);
|
|
203
|
+
}
|
|
204
|
+
else if (sourceNodeIdGroup && sourceNodeIdGroup.isGroup && sourceNodeIdGroup.isFolded) {
|
|
205
|
+
data.sourceNodeId = sourceNodeIdGroup.id;
|
|
206
|
+
data.startPoint = undefined;
|
|
207
|
+
_this.createVirtualEdge(data);
|
|
208
|
+
}
|
|
209
|
+
else {
|
|
210
|
+
edgeModel.visible = true;
|
|
165
211
|
}
|
|
166
212
|
}
|
|
167
213
|
});
|
|
168
214
|
};
|
|
215
|
+
GroupNodeModel.prototype.createVirtualEdge = function (edgeData) {
|
|
216
|
+
edgeData.pointsList = undefined;
|
|
217
|
+
var model = this.graphModel.addEdge(edgeData);
|
|
218
|
+
model.virtual = true;
|
|
219
|
+
// 强制不保存group连线数据
|
|
220
|
+
model.getData = function () { return null; };
|
|
221
|
+
model.text.editable = false;
|
|
222
|
+
model.isFoldedEdge = true;
|
|
223
|
+
};
|
|
169
224
|
GroupNodeModel.prototype.isInRange = function (_a) {
|
|
170
225
|
var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
|
|
171
226
|
return x1 >= (this.x - this.width / 2)
|
|
@@ -206,6 +261,17 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
206
261
|
delete properties.isFolded;
|
|
207
262
|
return data;
|
|
208
263
|
};
|
|
264
|
+
GroupNodeModel.prototype.getHistoryData = function () {
|
|
265
|
+
var data = _super.prototype.getData.call(this);
|
|
266
|
+
data.children = __spread(this.children);
|
|
267
|
+
var properties = data.properties;
|
|
268
|
+
delete properties.groupAddable;
|
|
269
|
+
if (properties.isFolded) { // 如果分组被折叠
|
|
270
|
+
data.x = data.x + this.unfoldedWidth / 2 - this.foldedWidth / 2;
|
|
271
|
+
data.y = data.y + this.unfoldedHight / 2 - this.foldedHeight / 2;
|
|
272
|
+
}
|
|
273
|
+
return data;
|
|
274
|
+
};
|
|
209
275
|
return GroupNodeModel;
|
|
210
276
|
}(RectResize.model));
|
|
211
277
|
var GroupNode = /** @class */ (function (_super) {
|
|
@@ -20,13 +20,19 @@ declare class Group {
|
|
|
20
20
|
appendNodeToGrop: ({ data }: {
|
|
21
21
|
data: any;
|
|
22
22
|
}) => void;
|
|
23
|
+
deleteGroupChild: ({ data }: {
|
|
24
|
+
data: any;
|
|
25
|
+
}) => void;
|
|
23
26
|
setActiveGroup: ({ data }: {
|
|
24
27
|
data: any;
|
|
25
28
|
}) => void;
|
|
26
|
-
getGroups(): void;
|
|
27
29
|
/**
|
|
28
30
|
* 获取自定位置其所属分组
|
|
29
31
|
*/
|
|
30
32
|
getGroup(bounds: Bounds): BaseNodeModel | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* 获取某个节点所属的groupModel
|
|
35
|
+
*/
|
|
36
|
+
getNodeGroup(nodeId: any): BaseNodeModel;
|
|
31
37
|
}
|
|
32
38
|
export { Group, GroupNode, };
|
|
@@ -55,6 +55,15 @@ var Group = /** @class */ (function () {
|
|
|
55
55
|
group.setAllowAppendChild(false);
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
|
+
this.deleteGroupChild = function (_a) {
|
|
59
|
+
var data = _a.data;
|
|
60
|
+
var groupId = _this.nodeGroupMap.get(data.id);
|
|
61
|
+
if (groupId) {
|
|
62
|
+
var group = _this.lf.getNodeModelById(groupId);
|
|
63
|
+
group.removeChild(data.id);
|
|
64
|
+
_this.nodeGroupMap.delete(data.id);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
58
67
|
this.setActiveGroup = function (_a) {
|
|
59
68
|
var data = _a.data;
|
|
60
69
|
var nodeModel = _this.lf.getNodeModelById(data.id);
|
|
@@ -92,20 +101,14 @@ var Group = /** @class */ (function () {
|
|
|
92
101
|
}
|
|
93
102
|
return true;
|
|
94
103
|
});
|
|
104
|
+
lf.graphModel.group = this;
|
|
95
105
|
lf.on('node:add', this.appendNodeToGrop);
|
|
106
|
+
lf.on('node:delete', this.deleteGroupChild);
|
|
96
107
|
lf.on('node:drop', this.appendNodeToGrop);
|
|
97
108
|
lf.on('node:dnd-drag', this.setActiveGroup);
|
|
98
109
|
lf.on('node:drag', this.setActiveGroup);
|
|
99
110
|
lf.on('graph:rendered', this.graphRendered);
|
|
100
111
|
}
|
|
101
|
-
Group.prototype.getGroups = function () {
|
|
102
|
-
var groups = [];
|
|
103
|
-
this.lf.graphModel.nodes.forEach(function (nodeModel) {
|
|
104
|
-
if (nodeModel.isGroup) {
|
|
105
|
-
groups.push(nodeModel);
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
};
|
|
109
112
|
/**
|
|
110
113
|
* 获取自定位置其所属分组
|
|
111
114
|
*/
|
|
@@ -118,6 +121,15 @@ var Group = /** @class */ (function () {
|
|
|
118
121
|
}
|
|
119
122
|
}
|
|
120
123
|
};
|
|
124
|
+
/**
|
|
125
|
+
* 获取某个节点所属的groupModel
|
|
126
|
+
*/
|
|
127
|
+
Group.prototype.getNodeGroup = function (nodeId) {
|
|
128
|
+
var groupId = this.nodeGroupMap.get(nodeId);
|
|
129
|
+
if (groupId) {
|
|
130
|
+
return this.lf.getNodeModelById(groupId);
|
|
131
|
+
}
|
|
132
|
+
};
|
|
121
133
|
Group.pluginName = 'group';
|
|
122
134
|
return Group;
|
|
123
135
|
}());
|