@logicflow/core 2.0.6 → 2.0.8
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/.turbo/turbo-build$colon$dev.log +2 -2
- package/.turbo/turbo-build.log +3 -19
- package/CHANGELOG.md +31 -0
- package/__tests__/algorithm/egde.test.ts +36 -23
- package/dist/index.css +3 -0
- package/es/algorithm/edge.js +3 -5
- package/es/constant/index.d.ts +4 -0
- package/es/constant/index.js +4 -0
- package/es/event/eventArgs.d.ts +40 -30
- package/es/index.css +3 -0
- package/es/model/GraphModel.d.ts +13 -3
- package/es/model/GraphModel.js +54 -3
- package/es/model/edge/BaseEdgeModel.d.ts +1 -0
- package/es/model/edge/LineEdgeModel.d.ts +2 -0
- package/es/model/edge/LineEdgeModel.js +8 -0
- package/es/model/edge/PolylineEdgeModel.d.ts +1 -0
- package/es/model/edge/PolylineEdgeModel.js +4 -3
- package/es/model/node/BaseNodeModel.d.ts +2 -2
- package/es/model/node/BaseNodeModel.js +1 -1
- package/es/model/node/HtmlNodeModel.d.ts +2 -2
- package/es/model/node/TextNodeModel.d.ts +2 -2
- package/es/style/index.css +3 -0
- package/es/style/index.less +5 -0
- package/es/style/raw.d.ts +1 -1
- package/es/style/raw.js +1 -1
- package/es/util/drag.d.ts +1 -0
- package/es/util/drag.js +11 -0
- package/es/view/Anchor.js +6 -8
- package/es/view/Control.js +1 -1
- package/es/view/Graph.js +3 -15
- package/es/view/behavior/dnd.js +1 -0
- package/es/view/edge/BaseEdge.d.ts +5 -1
- package/es/view/edge/BaseEdge.js +20 -5
- package/es/view/node/BaseNode.d.ts +2 -0
- package/es/view/node/BaseNode.js +13 -1
- package/es/view/overlay/BackgroundOverlay.d.ts +4 -14
- package/es/view/overlay/BackgroundOverlay.js +12 -1
- package/es/view/overlay/Grid.d.ts +4 -3
- package/es/view/overlay/Grid.js +8 -31
- package/es/view/overlay/getTransformHoc.d.ts +1 -1
- package/es/view/text/BaseText.js +1 -1
- package/lib/algorithm/edge.js +3 -5
- package/lib/constant/index.d.ts +4 -0
- package/lib/constant/index.js +4 -0
- package/lib/event/eventArgs.d.ts +40 -30
- package/lib/index.css +3 -0
- package/lib/model/GraphModel.d.ts +13 -3
- package/lib/model/GraphModel.js +53 -2
- package/lib/model/edge/BaseEdgeModel.d.ts +1 -0
- package/lib/model/edge/LineEdgeModel.d.ts +2 -0
- package/lib/model/edge/LineEdgeModel.js +8 -0
- package/lib/model/edge/PolylineEdgeModel.d.ts +1 -0
- package/lib/model/edge/PolylineEdgeModel.js +4 -3
- package/lib/model/node/BaseNodeModel.d.ts +2 -2
- package/lib/model/node/BaseNodeModel.js +1 -1
- package/lib/model/node/HtmlNodeModel.d.ts +2 -2
- package/lib/model/node/TextNodeModel.d.ts +2 -2
- package/lib/style/index.css +3 -0
- package/lib/style/index.less +5 -0
- package/lib/style/raw.d.ts +1 -1
- package/lib/style/raw.js +1 -1
- package/lib/util/drag.d.ts +1 -0
- package/lib/util/drag.js +11 -0
- package/lib/view/Anchor.js +6 -8
- package/lib/view/Control.js +1 -1
- package/lib/view/Graph.js +3 -15
- package/lib/view/behavior/dnd.js +1 -0
- package/lib/view/edge/BaseEdge.d.ts +5 -1
- package/lib/view/edge/BaseEdge.js +20 -5
- package/lib/view/node/BaseNode.d.ts +2 -0
- package/lib/view/node/BaseNode.js +13 -1
- package/lib/view/overlay/BackgroundOverlay.d.ts +4 -14
- package/lib/view/overlay/BackgroundOverlay.js +12 -1
- package/lib/view/overlay/Grid.d.ts +4 -3
- package/lib/view/overlay/Grid.js +8 -31
- package/lib/view/overlay/getTransformHoc.d.ts +1 -1
- package/lib/view/text/BaseText.js +1 -1
- package/package.json +1 -1
- package/src/LogicFlow.tsx +6 -0
- package/src/algorithm/edge.ts +3 -5
- package/src/algorithm/outline.ts +1 -1
- package/src/constant/index.ts +4 -0
- package/src/event/eventArgs.ts +50 -30
- package/src/model/GraphModel.ts +122 -3
- package/src/model/edge/BaseEdgeModel.ts +1 -0
- package/src/model/edge/LineEdgeModel.ts +8 -0
- package/src/model/edge/PolylineEdgeModel.ts +5 -3
- package/src/model/node/BaseNodeModel.ts +1 -1
- package/src/model/node/HtmlNodeModel.ts +1 -1
- package/src/style/index.less +5 -0
- package/src/style/raw.ts +3 -0
- package/src/util/drag.ts +12 -0
- package/src/view/Anchor.tsx +7 -8
- package/src/view/Control.tsx +1 -1
- package/src/view/Graph.tsx +5 -7
- package/src/view/behavior/dnd.ts +1 -0
- package/src/view/edge/BaseEdge.tsx +24 -3
- package/src/view/node/BaseNode.tsx +17 -1
- package/src/view/overlay/BackgroundOverlay.tsx +11 -16
- package/src/view/overlay/Grid.tsx +13 -9
- package/src/view/overlay/OutlineOverlay.tsx +1 -1
- package/src/view/text/BaseText.tsx +1 -1
- package/stats.html +1 -1
- package/dist/index.min.js +0 -2
- package/dist/index.min.js.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
|
|
2
|
-
> @logicflow/core@2.0.
|
|
2
|
+
> @logicflow/core@2.0.7 build:dev /Users/didi/Desktop/github/LogicFlow/packages/core
|
|
3
3
|
> rss
|
|
4
4
|
|
|
5
5
|
> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
|
|
6
6
|
|
|
7
|
-
> @logicflow/core@2.0.
|
|
7
|
+
> @logicflow/core@2.0.7 build:less /Users/didi/Desktop/github/LogicFlow/packages/core
|
|
8
8
|
> rss
|
|
9
9
|
|
|
10
10
|
> [build:less] ./scripts/build-less
|
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,33 +1,17 @@
|
|
|
1
1
|
|
|
2
|
-
> @logicflow/core@2.0.
|
|
2
|
+
> @logicflow/core@2.0.7 prebuild /Users/didi/Desktop/github/LogicFlow/packages/core
|
|
3
3
|
> rss
|
|
4
4
|
|
|
5
5
|
> [prebuild] run-s -s clean:build
|
|
6
6
|
> [clean:build] rimraf dist es lib
|
|
7
7
|
|
|
8
|
-
> @logicflow/core@2.0.
|
|
8
|
+
> @logicflow/core@2.0.7 build /Users/didi/Desktop/github/LogicFlow/packages/core
|
|
9
9
|
> rss
|
|
10
10
|
|
|
11
11
|
> [build] run-p -s build:dev build:umd
|
|
12
|
-
> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
|
|
13
12
|
> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs
|
|
13
|
+
> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
|
|
14
14
|
> [build:less] ./scripts/build-less
|
|
15
15
|
> [build:less] ./scripts/build-less
|
|
16
16
|
[36m
|
|
17
17
|
[1m./src/index.ts[22m → [1mdist/index.min.js[22m...[39m
|
|
18
|
-
+------------------------------------+
|
|
19
|
-
| |
|
|
20
|
-
| [32m[1mBundle Format:[22m[39m [33mumd[39m |
|
|
21
|
-
| [32m[1mBundle Name:[22m[39m [33mCore[39m |
|
|
22
|
-
| [32m[1mDestination:[22m[39m [33mdist/index.min.js[39m |
|
|
23
|
-
| [32m[1mBundle Size:[22m[39m [33m378.13 KB[39m |
|
|
24
|
-
| [32m[1mMinified Size:[22m[39m [33m376.88 KB[39m |
|
|
25
|
-
| [32m[1mGZipped Size:[22m[39m [33m109.25 KB[39m |
|
|
26
|
-
| |
|
|
27
|
-
+------------------------------------+
|
|
28
|
-
[1m[33m(!) Circular dependencies[39m[22m
|
|
29
|
-
src/index.ts -> src/LogicFlow.tsx -> src/index.ts
|
|
30
|
-
src/util/index.ts -> src/util/edge.ts -> src/util/index.ts
|
|
31
|
-
src/util/index.ts -> src/util/edge.ts -> src/algorithm/index.ts -> src/algorithm/outline.ts -> src/util/index.ts
|
|
32
|
-
...and 18 more
|
|
33
|
-
[32mcreated [1mdist/index.min.js[22m in [1m14.3s[22m[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 2.0.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(core): 修复已知问题,新增渐进连线能力
|
|
8
|
+
- feat: 支持动态修改画布背景配置
|
|
9
|
+
- fix(core): 修复使用label情况下双击节点会让节点进入文本编辑态问题
|
|
10
|
+
- fix(core): 修复初始化画布时因为节点吸附网格导致的节点与边错位问题 #1954
|
|
11
|
+
- feat(core): 增加节点和边的focus和blur事件上报 #1917
|
|
12
|
+
- feat(core): line 和 polyline 增加getPath方法 #1929
|
|
13
|
+
|
|
14
|
+
## 2.0.7
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- fix: 修复一些问题
|
|
19
|
+
- fix: 修复文本拖拽不符合预期的问题 by ChangeSuger
|
|
20
|
+
- feat: 支持动态修改 Grid 的配置 by ChangeSuger
|
|
21
|
+
- fix: 修复 2.x 与 1.x 下相同的网格线宽,Grid 表现不一致的问题 by ChangeSuger
|
|
22
|
+
- fix: node:dnd-drag 增加事件数据 by HeatonZ
|
|
23
|
+
- fix(extension): 【dynamic-group】修复mousemove和isCollapsed相关问题 by wbccb
|
|
24
|
+
- fix: 修复 windows 系统 node20 环境下样式文件打包失败的问题 by ChangeSuger
|
|
25
|
+
- fix: 修复 node:dnd-drag 事件的类型检查问题 by ChangeSuger
|
|
26
|
+
- fix(example): 修复文档中vue3自定义组件不能正常显示bug by zkt2002
|
|
27
|
+
- fix(core): 在没有拖拽的情况下,Control组件突然销毁,不触发cancelDrag(#1926) by wbccb
|
|
28
|
+
- fix(core): 修复笔记本触摸板点击边事件失效 by wuchenguang1998
|
|
29
|
+
- feat(examples): 添加动画边demo by DymoneLewis
|
|
30
|
+
- fix(core): 类型定义 properties:change 改为 node:properties-change by HeatonZ
|
|
31
|
+
- feat: node-registry 自定义properties类型 by HeatonZ
|
|
32
|
+
- fix(core): 修复 polyline 与多边形节点的交点不正确的问题 by Yuan-ZW
|
|
33
|
+
|
|
3
34
|
## 2.0.6
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getCrossPointOfLine, isInSegment } from '../../src/algorithm/edge'
|
|
1
|
+
import { getCrossPointOfLine, isInSegment } from '../../src/algorithm/edge'
|
|
2
2
|
|
|
3
3
|
describe('algorithm/edge', () => {
|
|
4
4
|
// one intersection
|
|
@@ -12,7 +12,7 @@ describe('algorithm/edge', () => {
|
|
|
12
12
|
x: 10,
|
|
13
13
|
y: 10,
|
|
14
14
|
},
|
|
15
|
-
]
|
|
15
|
+
]
|
|
16
16
|
const line2 = [
|
|
17
17
|
{
|
|
18
18
|
x: 10,
|
|
@@ -22,11 +22,11 @@ describe('algorithm/edge', () => {
|
|
|
22
22
|
x: 0,
|
|
23
23
|
y: 10,
|
|
24
24
|
},
|
|
25
|
-
]
|
|
25
|
+
]
|
|
26
26
|
expect(
|
|
27
27
|
getCrossPointOfLine(line1[0], line1[1], line2[0], line2[1]),
|
|
28
|
-
).toBeTruthy()
|
|
29
|
-
})
|
|
28
|
+
).toBeTruthy()
|
|
29
|
+
})
|
|
30
30
|
// multiple intersection
|
|
31
31
|
test('multiple intersection', () => {
|
|
32
32
|
const line1 = [
|
|
@@ -38,7 +38,7 @@ describe('algorithm/edge', () => {
|
|
|
38
38
|
x: 10,
|
|
39
39
|
y: 10,
|
|
40
40
|
},
|
|
41
|
-
]
|
|
41
|
+
]
|
|
42
42
|
const line2 = [
|
|
43
43
|
{
|
|
44
44
|
x: 0,
|
|
@@ -48,11 +48,11 @@ describe('algorithm/edge', () => {
|
|
|
48
48
|
x: 10,
|
|
49
49
|
y: 10,
|
|
50
50
|
},
|
|
51
|
-
]
|
|
51
|
+
]
|
|
52
52
|
expect(
|
|
53
53
|
getCrossPointOfLine(line1[0], line1[1], line2[0], line2[1]),
|
|
54
|
-
).toBeFalsy()
|
|
55
|
-
})
|
|
54
|
+
).toBeFalsy()
|
|
55
|
+
})
|
|
56
56
|
// no intersection
|
|
57
57
|
test('intersection', () => {
|
|
58
58
|
const line1 = [
|
|
@@ -64,7 +64,7 @@ describe('algorithm/edge', () => {
|
|
|
64
64
|
x: 10,
|
|
65
65
|
y: 10,
|
|
66
66
|
},
|
|
67
|
-
]
|
|
67
|
+
]
|
|
68
68
|
const line2 = [
|
|
69
69
|
{
|
|
70
70
|
x: 10,
|
|
@@ -74,18 +74,18 @@ describe('algorithm/edge', () => {
|
|
|
74
74
|
x: 20,
|
|
75
75
|
y: 10,
|
|
76
76
|
},
|
|
77
|
-
]
|
|
77
|
+
]
|
|
78
78
|
expect(
|
|
79
79
|
getCrossPointOfLine(line1[0], line1[1], line2[0], line2[1]),
|
|
80
|
-
).toBeFalsy()
|
|
81
|
-
})
|
|
80
|
+
).toBeFalsy()
|
|
81
|
+
})
|
|
82
82
|
|
|
83
83
|
test('in segment', () => {
|
|
84
84
|
const point = {
|
|
85
85
|
x: 0,
|
|
86
86
|
y: 0,
|
|
87
|
-
}
|
|
88
|
-
const
|
|
87
|
+
}
|
|
88
|
+
const line1 = [
|
|
89
89
|
{
|
|
90
90
|
x: -10,
|
|
91
91
|
y: -10,
|
|
@@ -94,15 +94,28 @@ describe('algorithm/edge', () => {
|
|
|
94
94
|
x: 10,
|
|
95
95
|
y: 10,
|
|
96
96
|
},
|
|
97
|
-
]
|
|
98
|
-
|
|
99
|
-
|
|
97
|
+
]
|
|
98
|
+
const line2 = [
|
|
99
|
+
{
|
|
100
|
+
x: -10,
|
|
101
|
+
y: 10,
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
x: 10,
|
|
105
|
+
y: -10,
|
|
106
|
+
},
|
|
107
|
+
]
|
|
108
|
+
expect(isInSegment(point, line1[0], line1[1])).toBeTruthy()
|
|
109
|
+
expect(isInSegment(point, line1[1], line1[0])).toBeTruthy()
|
|
110
|
+
expect(isInSegment(point, line2[0], line2[1])).toBeTruthy()
|
|
111
|
+
expect(isInSegment(point, line2[1], line2[0])).toBeTruthy()
|
|
112
|
+
})
|
|
100
113
|
// not in segment
|
|
101
114
|
test('not in segment', () => {
|
|
102
115
|
const point = {
|
|
103
116
|
x: 10,
|
|
104
117
|
y: 0,
|
|
105
|
-
}
|
|
118
|
+
}
|
|
106
119
|
const line = [
|
|
107
120
|
{
|
|
108
121
|
x: -10,
|
|
@@ -112,7 +125,7 @@ describe('algorithm/edge', () => {
|
|
|
112
125
|
x: 10,
|
|
113
126
|
y: 10,
|
|
114
127
|
},
|
|
115
|
-
]
|
|
116
|
-
expect(isInSegment(point, line[0], line[1])).toBeFalsy()
|
|
117
|
-
})
|
|
118
|
-
})
|
|
128
|
+
]
|
|
129
|
+
expect(isInSegment(point, line[0], line[1])).toBeFalsy()
|
|
130
|
+
})
|
|
131
|
+
})
|
package/dist/index.css
CHANGED
package/es/algorithm/edge.js
CHANGED
|
@@ -48,9 +48,7 @@ export var isInSegment = function (point, start, end) {
|
|
|
48
48
|
var endX = end.x, endY = end.y;
|
|
49
49
|
var k = (endY - startY) / (endX - startX);
|
|
50
50
|
var b = startY - k * startX;
|
|
51
|
-
return (x >= startX &&
|
|
52
|
-
|
|
53
|
-
y
|
|
54
|
-
y <= endY &&
|
|
55
|
-
Math.abs(y - k * x + b) < Number.EPSILON);
|
|
51
|
+
return (((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
|
|
52
|
+
((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
|
|
53
|
+
Math.abs(y - k * x - b) < Number.EPSILON);
|
|
56
54
|
};
|
package/es/constant/index.d.ts
CHANGED
|
@@ -49,12 +49,16 @@ export declare enum EventType {
|
|
|
49
49
|
NODE_CONTEXTMENU = "node:contextmenu",
|
|
50
50
|
NODE_ROTATE = "node:rotate",
|
|
51
51
|
NODE_RESIZE = "node:resize",
|
|
52
|
+
NODE_FOCUS = "node:focus",
|
|
53
|
+
NODE_BLUR = "node:blur",
|
|
52
54
|
NODE_PROPERTIES_CHANGE = "node:properties-change",
|
|
53
55
|
NODE_PROPERTIES_DELETE = "node:properties-delete",
|
|
54
56
|
EDGE_ADD = "edge:add",
|
|
55
57
|
EDGE_DELETE = "edge:delete",
|
|
56
58
|
EDGE_CLICK = "edge:click",
|
|
57
59
|
EDGE_DBCLICK = "edge:dbclick",
|
|
60
|
+
EDGE_FOCUS = "edge:focus",
|
|
61
|
+
EDGE_BLUR = "edge:blur",
|
|
58
62
|
EDGE_MOUSEENTER = "edge:mouseenter",
|
|
59
63
|
EDGE_MOUSELEAVE = "edge:mouseleave",
|
|
60
64
|
EDGE_CONTEXTMENU = "edge:contextmenu",
|
package/es/constant/index.js
CHANGED
|
@@ -54,6 +54,8 @@ export var EventType;
|
|
|
54
54
|
EventType["NODE_CONTEXTMENU"] = "node:contextmenu";
|
|
55
55
|
EventType["NODE_ROTATE"] = "node:rotate";
|
|
56
56
|
EventType["NODE_RESIZE"] = "node:resize";
|
|
57
|
+
EventType["NODE_FOCUS"] = "node:focus";
|
|
58
|
+
EventType["NODE_BLUR"] = "node:blur";
|
|
57
59
|
// 节点 properties 变化事件
|
|
58
60
|
EventType["NODE_PROPERTIES_CHANGE"] = "node:properties-change";
|
|
59
61
|
EventType["NODE_PROPERTIES_DELETE"] = "node:properties-delete";
|
|
@@ -62,6 +64,8 @@ export var EventType;
|
|
|
62
64
|
EventType["EDGE_DELETE"] = "edge:delete";
|
|
63
65
|
EventType["EDGE_CLICK"] = "edge:click";
|
|
64
66
|
EventType["EDGE_DBCLICK"] = "edge:dbclick";
|
|
67
|
+
EventType["EDGE_FOCUS"] = "edge:focus";
|
|
68
|
+
EventType["EDGE_BLUR"] = "edge:blur";
|
|
65
69
|
EventType["EDGE_MOUSEENTER"] = "edge:mouseenter";
|
|
66
70
|
EventType["EDGE_MOUSELEAVE"] = "edge:mouseleave";
|
|
67
71
|
EventType["EDGE_CONTEXTMENU"] = "edge:contextmenu";
|
package/es/event/eventArgs.d.ts
CHANGED
|
@@ -97,7 +97,7 @@ interface NodeEventArgs {
|
|
|
97
97
|
/**
|
|
98
98
|
* 删除节点
|
|
99
99
|
*/
|
|
100
|
-
'node:delete': NodeEventArgsPick<'data'>;
|
|
100
|
+
'node:delete': NodeEventArgsPick<'data' | 'model'>;
|
|
101
101
|
/**
|
|
102
102
|
* 添加外部拖入节点
|
|
103
103
|
*/
|
|
@@ -105,7 +105,7 @@ interface NodeEventArgs {
|
|
|
105
105
|
/**
|
|
106
106
|
* 拖拽外部拖入节点
|
|
107
107
|
*/
|
|
108
|
-
'node:dnd-drag': NodeEventArgsPick<'data'>;
|
|
108
|
+
'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>;
|
|
109
109
|
/**
|
|
110
110
|
* 开始拖拽节点
|
|
111
111
|
*/
|
|
@@ -130,6 +130,35 @@ interface NodeEventArgs {
|
|
|
130
130
|
* 节点缩放
|
|
131
131
|
*/
|
|
132
132
|
'node:resize': NodeEventArgsPick<'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'>;
|
|
133
|
+
/**
|
|
134
|
+
* 元素的 properties 发生改变
|
|
135
|
+
*/
|
|
136
|
+
'node:properties-change': {
|
|
137
|
+
/**
|
|
138
|
+
* 元素的 id
|
|
139
|
+
*/
|
|
140
|
+
id: string;
|
|
141
|
+
/**
|
|
142
|
+
* 改变的 properties 的 key
|
|
143
|
+
*/
|
|
144
|
+
keys: string[];
|
|
145
|
+
/**
|
|
146
|
+
* 改变前的 properties
|
|
147
|
+
*/
|
|
148
|
+
preProperties: Record<string, any>;
|
|
149
|
+
/**
|
|
150
|
+
* 改变后的 properties
|
|
151
|
+
*/
|
|
152
|
+
properties: Record<string, any>;
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* 节点获焦
|
|
156
|
+
*/
|
|
157
|
+
'node:focus': NodeEventArgsPick<'data'>;
|
|
158
|
+
/**
|
|
159
|
+
* 节点失焦
|
|
160
|
+
*/
|
|
161
|
+
'node:blur': NodeEventArgsPick<'data'>;
|
|
133
162
|
}
|
|
134
163
|
type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
|
|
135
164
|
/**
|
|
@@ -196,6 +225,14 @@ interface EdgeEventArgs {
|
|
|
196
225
|
oldEdge: EdgeData;
|
|
197
226
|
};
|
|
198
227
|
};
|
|
228
|
+
/**
|
|
229
|
+
* 边获焦
|
|
230
|
+
*/
|
|
231
|
+
'edge:focus': EdgeEventArgsPick<'data'>;
|
|
232
|
+
/**
|
|
233
|
+
* 边失焦
|
|
234
|
+
*/
|
|
235
|
+
'edge:blur': EdgeEventArgsPick<'data'>;
|
|
199
236
|
}
|
|
200
237
|
/**
|
|
201
238
|
* 文本事件
|
|
@@ -275,33 +312,6 @@ interface CommonEventArgs {
|
|
|
275
312
|
*/
|
|
276
313
|
position: ClientPosition;
|
|
277
314
|
};
|
|
278
|
-
/**
|
|
279
|
-
* 元素的 properties 发生改变
|
|
280
|
-
*/
|
|
281
|
-
'properties:change': {
|
|
282
|
-
data: {
|
|
283
|
-
/**
|
|
284
|
-
* 元素的 id
|
|
285
|
-
*/
|
|
286
|
-
id: string;
|
|
287
|
-
/**
|
|
288
|
-
* 元素的类型
|
|
289
|
-
*/
|
|
290
|
-
type: string;
|
|
291
|
-
/**
|
|
292
|
-
* 改变的 properties 的 key
|
|
293
|
-
*/
|
|
294
|
-
keys: string[];
|
|
295
|
-
/**
|
|
296
|
-
* 改变前的 properties
|
|
297
|
-
*/
|
|
298
|
-
preProperties: Record<string, any>;
|
|
299
|
-
/**
|
|
300
|
-
* 改变后的 properties
|
|
301
|
-
*/
|
|
302
|
-
properties: Record<string, any>;
|
|
303
|
-
};
|
|
304
|
-
};
|
|
305
315
|
/**
|
|
306
316
|
* 进行画布平移或缩放等变化操作时触发
|
|
307
317
|
*/
|
|
@@ -356,7 +366,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = P
|
|
|
356
366
|
/**
|
|
357
367
|
* 通过拖动锚点连线添加的边的数据
|
|
358
368
|
*/
|
|
359
|
-
edgeModel
|
|
369
|
+
edgeModel?: BaseEdgeModel;
|
|
360
370
|
}, T>;
|
|
361
371
|
/**
|
|
362
372
|
* 锚点事件
|
package/es/index.css
CHANGED
package/es/model/GraphModel.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { ElementState, EventType, OverlapMode, TextMode } from '../constant';
|
|
|
3
3
|
import LogicFlow from '../LogicFlow';
|
|
4
4
|
import { Options as LFOptions } from '../options';
|
|
5
5
|
import EventEmitter from '../event/eventEmitter';
|
|
6
|
+
import { Grid } from '../view/overlay';
|
|
6
7
|
import PointTuple = LogicFlow.PointTuple;
|
|
7
8
|
import GraphData = LogicFlow.GraphData;
|
|
8
9
|
import NodeConfig = LogicFlow.NodeConfig;
|
|
@@ -16,6 +17,7 @@ export declare class GraphModel {
|
|
|
16
17
|
width: number;
|
|
17
18
|
height: number;
|
|
18
19
|
theme: LogicFlow.Theme;
|
|
20
|
+
grid: Grid.GridOptions;
|
|
19
21
|
readonly eventCenter: EventEmitter;
|
|
20
22
|
readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
|
|
21
23
|
/**
|
|
@@ -68,15 +70,15 @@ export declare class GraphModel {
|
|
|
68
70
|
* 基于zIndex对元素进行排序。
|
|
69
71
|
* todo: 性能优化
|
|
70
72
|
*/
|
|
71
|
-
get sortElements(): (
|
|
73
|
+
get sortElements(): (BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>)[];
|
|
72
74
|
/**
|
|
73
75
|
* 当前编辑的元素,低频操作,先循环找。
|
|
74
76
|
*/
|
|
75
|
-
get textEditElement():
|
|
77
|
+
get textEditElement(): BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType> | undefined;
|
|
76
78
|
/**
|
|
77
79
|
* 当前画布所有被选中的元素
|
|
78
80
|
*/
|
|
79
|
-
get selectElements(): Map<string,
|
|
81
|
+
get selectElements(): Map<string, BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>>;
|
|
80
82
|
get selectNodes(): BaseNodeModel<LogicFlow.PropertiesType>[];
|
|
81
83
|
/**
|
|
82
84
|
* 获取指定区域内的所有元素
|
|
@@ -383,6 +385,14 @@ export declare class GraphModel {
|
|
|
383
385
|
* todo docs link
|
|
384
386
|
*/
|
|
385
387
|
setTheme(style: Partial<LogicFlow.Theme>): void;
|
|
388
|
+
/**
|
|
389
|
+
* 更新网格配置
|
|
390
|
+
*/
|
|
391
|
+
updateGridOptions(options: Partial<Grid.GridOptions>): void;
|
|
392
|
+
/**
|
|
393
|
+
* 更新网格配置
|
|
394
|
+
*/
|
|
395
|
+
updateBackgroundOptions(options: boolean | Partial<LFOptions.BackgroundConfig>): void;
|
|
386
396
|
/**
|
|
387
397
|
* 重新设置画布的宽高
|
|
388
398
|
*/
|
package/es/model/GraphModel.js
CHANGED
|
@@ -40,12 +40,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
40
40
|
}
|
|
41
41
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
42
42
|
};
|
|
43
|
-
import { find, forEach, map } from 'lodash-es';
|
|
43
|
+
import { find, forEach, map, merge, isBoolean, isEqual } from 'lodash-es';
|
|
44
44
|
import { action, computed, observable } from 'mobx';
|
|
45
45
|
import { EditConfigModel, TransformModel, } from '.';
|
|
46
46
|
import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
|
|
47
47
|
import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, } from '../util';
|
|
48
48
|
import EventEmitter from '../event/eventEmitter';
|
|
49
|
+
import { Grid } from '../view/overlay';
|
|
49
50
|
var GraphModel = /** @class */ (function () {
|
|
50
51
|
function GraphModel(options) {
|
|
51
52
|
// 维护所有节点和边类型对应的 model
|
|
@@ -88,6 +89,7 @@ var GraphModel = /** @class */ (function () {
|
|
|
88
89
|
this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
|
|
89
90
|
}
|
|
90
91
|
this.theme = setupTheme(options.style);
|
|
92
|
+
this.grid = Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
|
|
91
93
|
this.edgeType = options.edgeType || 'polyline';
|
|
92
94
|
this.animation = setupAnimation(animation);
|
|
93
95
|
this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
|
|
@@ -373,6 +375,31 @@ var GraphModel = /** @class */ (function () {
|
|
|
373
375
|
throw new Error("\u627E\u4E0D\u5230".concat(edge.type, "\u5BF9\u5E94\u7684\u8FB9\u3002"));
|
|
374
376
|
}
|
|
375
377
|
var edgeModel = new Model(edge, _this);
|
|
378
|
+
// 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
|
|
379
|
+
// 判断当前起终锚点数据和Model中存储的起终点数据是否一致,不一致更新起终点信息
|
|
380
|
+
var sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, _b = edgeModel.sourceAnchorId, sourceAnchorId = _b === void 0 ? '' : _b, _c = edgeModel.targetAnchorId, targetAnchorId = _c === void 0 ? '' : _c, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, text = edgeModel.text, textPosition = edgeModel.textPosition;
|
|
381
|
+
var updateAnchorPoint = function (node, anchorId, point, updatePoint) {
|
|
382
|
+
var anchor = node === null || node === void 0 ? void 0 : node.anchors.find(function (anchor) { return anchor.id === anchorId; });
|
|
383
|
+
if (anchor && !isEqual(anchor, point)) {
|
|
384
|
+
updatePoint(anchor);
|
|
385
|
+
}
|
|
386
|
+
};
|
|
387
|
+
var sourceNode = _this.getNodeModelById(sourceNodeId);
|
|
388
|
+
var targetNode = _this.getNodeModelById(targetNodeId);
|
|
389
|
+
updateAnchorPoint(sourceNode, sourceAnchorId, startPoint, edgeModel.updateStartPoint.bind(edgeModel));
|
|
390
|
+
updateAnchorPoint(targetNode, targetAnchorId, endPoint, edgeModel.updateEndPoint.bind(edgeModel));
|
|
391
|
+
// 而文本需要先算一下文本与默认文本位置之间的相对位置差
|
|
392
|
+
// 再计算新路径的文本默认位置,加上相对位置差,得到调整后边的文本的位置
|
|
393
|
+
if (text) {
|
|
394
|
+
var x = text.x, y = text.y;
|
|
395
|
+
var defaultX = textPosition.x, defaultY = textPosition.y;
|
|
396
|
+
if (x && y && defaultX && defaultY) {
|
|
397
|
+
var deltaX = x - defaultX;
|
|
398
|
+
var deltaY = y - defaultY;
|
|
399
|
+
edgeModel.resetTextPosition();
|
|
400
|
+
edgeModel.moveText(deltaX, deltaY);
|
|
401
|
+
}
|
|
402
|
+
}
|
|
376
403
|
_this.edgeModelMap.set(edgeModel.id, edgeModel);
|
|
377
404
|
_this.elementsModelMap.set(edgeModel.id, edgeModel);
|
|
378
405
|
return edgeModel;
|
|
@@ -664,11 +691,15 @@ var GraphModel = /** @class */ (function () {
|
|
|
664
691
|
* @param {string} nodeId 节点Id
|
|
665
692
|
*/
|
|
666
693
|
GraphModel.prototype.deleteNode = function (nodeId) {
|
|
667
|
-
var
|
|
694
|
+
var nodeModel = this.nodesMap[nodeId].model;
|
|
695
|
+
var nodeData = nodeModel.getData();
|
|
668
696
|
this.deleteEdgeBySource(nodeId);
|
|
669
697
|
this.deleteEdgeByTarget(nodeId);
|
|
670
698
|
this.nodes.splice(this.nodesMap[nodeId].index, 1);
|
|
671
|
-
this.eventCenter.emit(EventType.NODE_DELETE, {
|
|
699
|
+
this.eventCenter.emit(EventType.NODE_DELETE, {
|
|
700
|
+
data: nodeData,
|
|
701
|
+
model: nodeModel,
|
|
702
|
+
});
|
|
672
703
|
};
|
|
673
704
|
/**
|
|
674
705
|
* 添加节点
|
|
@@ -1238,6 +1269,23 @@ var GraphModel = /** @class */ (function () {
|
|
|
1238
1269
|
GraphModel.prototype.setTheme = function (style) {
|
|
1239
1270
|
this.theme = updateTheme(__assign(__assign({}, this.theme), style));
|
|
1240
1271
|
};
|
|
1272
|
+
/**
|
|
1273
|
+
* 更新网格配置
|
|
1274
|
+
*/
|
|
1275
|
+
GraphModel.prototype.updateGridOptions = function (options) {
|
|
1276
|
+
merge(this.grid, options);
|
|
1277
|
+
};
|
|
1278
|
+
/**
|
|
1279
|
+
* 更新网格配置
|
|
1280
|
+
*/
|
|
1281
|
+
GraphModel.prototype.updateBackgroundOptions = function (options) {
|
|
1282
|
+
if (isBoolean(options) || isBoolean(this.background)) {
|
|
1283
|
+
this.background = options;
|
|
1284
|
+
}
|
|
1285
|
+
else {
|
|
1286
|
+
this.background = __assign(__assign({}, this.background), options);
|
|
1287
|
+
}
|
|
1288
|
+
};
|
|
1241
1289
|
/**
|
|
1242
1290
|
* 重新设置画布的宽高
|
|
1243
1291
|
*/
|
|
@@ -1365,6 +1413,9 @@ var GraphModel = /** @class */ (function () {
|
|
|
1365
1413
|
__decorate([
|
|
1366
1414
|
observable
|
|
1367
1415
|
], GraphModel.prototype, "height", void 0);
|
|
1416
|
+
__decorate([
|
|
1417
|
+
observable
|
|
1418
|
+
], GraphModel.prototype, "grid", void 0);
|
|
1368
1419
|
__decorate([
|
|
1369
1420
|
observable
|
|
1370
1421
|
], GraphModel.prototype, "edgeType", void 0);
|
|
@@ -16,6 +16,8 @@ export declare class LineEdgeModel extends BaseEdgeModel {
|
|
|
16
16
|
height?: number | undefined;
|
|
17
17
|
path?: string | undefined;
|
|
18
18
|
};
|
|
19
|
+
initEdgeData(data: LogicFlow.EdgeConfig): void;
|
|
20
|
+
getPath(points: Point[]): string;
|
|
19
21
|
getTextPosition(): Point;
|
|
20
22
|
}
|
|
21
23
|
export default LineEdgeModel;
|
|
@@ -65,6 +65,14 @@ var LineEdgeModel = /** @class */ (function (_super) {
|
|
|
65
65
|
var _a = this.properties.style, customStyle = _a === void 0 ? {} : _a;
|
|
66
66
|
return __assign(__assign(__assign({}, style), cloneDeep(line)), cloneDeep(customStyle));
|
|
67
67
|
};
|
|
68
|
+
LineEdgeModel.prototype.initEdgeData = function (data) {
|
|
69
|
+
_super.prototype.initEdgeData.call(this, data);
|
|
70
|
+
this.points = this.getPath([this.startPoint, this.endPoint]);
|
|
71
|
+
};
|
|
72
|
+
LineEdgeModel.prototype.getPath = function (points) {
|
|
73
|
+
var _a = __read(points, 2), start = _a[0], end = _a[1];
|
|
74
|
+
return "".concat(start.x, ",").concat(start.y, " ").concat(end.x, ",").concat(end.y);
|
|
75
|
+
};
|
|
68
76
|
LineEdgeModel.prototype.getTextPosition = function () {
|
|
69
77
|
return {
|
|
70
78
|
x: (this.startPoint.x + this.endPoint.x) / 2,
|
|
@@ -295,11 +295,12 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
|
|
|
295
295
|
pointsList: pointsList,
|
|
296
296
|
});
|
|
297
297
|
};
|
|
298
|
+
PolylineEdgeModel.prototype.getPath = function (points) {
|
|
299
|
+
return points.map(function (point) { return "".concat(point.x, ",").concat(point.y); }).join(' ');
|
|
300
|
+
};
|
|
298
301
|
PolylineEdgeModel.prototype.initPoints = function () {
|
|
299
302
|
if (this.pointsList.length > 0) {
|
|
300
|
-
this.points = this.pointsList
|
|
301
|
-
.map(function (point) { return "".concat(point.x, ",").concat(point.y); })
|
|
302
|
-
.join(' ');
|
|
303
|
+
this.points = this.getPath(this.pointsList);
|
|
303
304
|
}
|
|
304
305
|
else {
|
|
305
306
|
this.updatePoints();
|
|
@@ -172,8 +172,8 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
|
|
|
172
172
|
color?: string | undefined;
|
|
173
173
|
fontSize: number;
|
|
174
174
|
lineHeight?: number | undefined;
|
|
175
|
-
textAnchor?: "
|
|
176
|
-
dominantBaseline?: "middle" | "
|
|
175
|
+
textAnchor?: "start" | "end" | "middle" | undefined;
|
|
176
|
+
dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
|
|
177
177
|
};
|
|
178
178
|
/**
|
|
179
179
|
* @overridable 支持重写
|
|
@@ -736,7 +736,7 @@ var BaseNodeModel = /** @class */ (function () {
|
|
|
736
736
|
var preProperties = toJS(this.properties);
|
|
737
737
|
this.properties = nextProperties;
|
|
738
738
|
this.setAttributes();
|
|
739
|
-
// 触发更新节点 properties
|
|
739
|
+
// 触发更新节点 node:properties-change 的事件
|
|
740
740
|
this.graphModel.eventCenter.emit(EventType.NODE_PROPERTIES_CHANGE, {
|
|
741
741
|
id: this.id,
|
|
742
742
|
keys: updateKeys,
|
|
@@ -4,13 +4,13 @@ import { ModelType } from '../../constant';
|
|
|
4
4
|
import AnchorConfig = Model.AnchorConfig;
|
|
5
5
|
import LogicFlow from '../../LogicFlow';
|
|
6
6
|
import GraphModel from '../GraphModel';
|
|
7
|
-
export
|
|
7
|
+
export interface IHtmlNodeProperties {
|
|
8
8
|
width?: number;
|
|
9
9
|
height?: number;
|
|
10
10
|
style?: LogicFlow.CommonTheme;
|
|
11
11
|
textStyle?: LogicFlow.CommonTheme;
|
|
12
12
|
[key: string]: unknown;
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
14
|
export declare class HtmlNodeModel<P extends IHtmlNodeProperties = IHtmlNodeProperties> extends BaseNodeModel<P> {
|
|
15
15
|
modelType: ModelType;
|
|
16
16
|
constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel);
|