@logicflow/core 2.2.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (236) hide show
  1. package/dist/index.css +3 -2
  2. package/dist/index.min.js +1 -1
  3. package/dist/index.min.js.map +1 -1
  4. package/es/LogicFlow.d.ts +9 -0
  5. package/es/LogicFlow.js +0 -1
  6. package/es/constant/index.d.ts +1 -1
  7. package/es/constant/index.js +1 -1
  8. package/es/constant/theme.d.ts +136 -0
  9. package/es/constant/theme.js +680 -0
  10. package/es/index.css +3 -2
  11. package/es/model/GraphModel.d.ts +10 -2
  12. package/es/model/GraphModel.js +48 -14
  13. package/es/model/TransformModel.js +9 -9
  14. package/es/model/edge/BaseEdgeModel.js +7 -2
  15. package/es/model/edge/PolylineEdgeModel.d.ts +7 -0
  16. package/es/model/edge/PolylineEdgeModel.js +136 -7
  17. package/es/model/node/BaseNodeModel.d.ts +12 -1
  18. package/es/model/node/BaseNodeModel.js +9 -2
  19. package/es/model/node/HtmlNodeModel.d.ts +12 -0
  20. package/es/model/node/HtmlNodeModel.js +19 -0
  21. package/es/model/node/PolygonNodeModel.js +3 -3
  22. package/es/options.d.ts +4 -2
  23. package/es/style/index.css +3 -2
  24. package/es/style/index.less +3 -2
  25. package/es/style/raw.d.ts +1 -1
  26. package/es/style/raw.js +1 -1
  27. package/es/tool/MultipleSelectTool.js +10 -5
  28. package/es/util/drag.js +0 -1
  29. package/es/util/edge.d.ts +40 -1
  30. package/es/util/edge.js +43 -9
  31. package/es/util/geometry.d.ts +8 -0
  32. package/es/util/geometry.js +79 -0
  33. package/es/util/theme.d.ts +2 -65
  34. package/es/util/theme.js +4 -281
  35. package/es/view/Anchor.d.ts +1 -0
  36. package/es/view/Anchor.js +24 -21
  37. package/es/view/Control.d.ts +5 -0
  38. package/es/view/Control.js +44 -57
  39. package/es/view/edge/BaseEdge.js +9 -0
  40. package/es/view/edge/PolylineEdge.js +13 -2
  41. package/es/view/node/BaseNode.d.ts +1 -0
  42. package/es/view/node/BaseNode.js +23 -11
  43. package/es/view/node/HtmlNode.js +2 -4
  44. package/es/view/overlay/CanvasOverlay.js +5 -2
  45. package/es/view/overlay/Grid.d.ts +12 -1
  46. package/es/view/overlay/Grid.js +85 -23
  47. package/es/view/overlay/OutlineOverlay.d.ts +1 -0
  48. package/es/view/overlay/OutlineOverlay.js +18 -17
  49. package/es/view/overlay/gridConfig.d.ts +46 -0
  50. package/es/view/overlay/gridConfig.js +99 -0
  51. package/es/view/shape/Polygon.d.ts +0 -7
  52. package/es/view/shape/Polygon.js +12 -43
  53. package/lib/LogicFlow.d.ts +9 -0
  54. package/lib/LogicFlow.js +0 -1
  55. package/lib/constant/index.d.ts +1 -1
  56. package/lib/constant/index.js +16 -2
  57. package/lib/constant/theme.d.ts +136 -0
  58. package/lib/constant/theme.js +683 -0
  59. package/lib/index.css +3 -2
  60. package/lib/model/GraphModel.d.ts +10 -2
  61. package/lib/model/GraphModel.js +49 -15
  62. package/lib/model/TransformModel.js +9 -9
  63. package/lib/model/edge/BaseEdgeModel.js +7 -2
  64. package/lib/model/edge/PolylineEdgeModel.d.ts +7 -0
  65. package/lib/model/edge/PolylineEdgeModel.js +136 -7
  66. package/lib/model/node/BaseNodeModel.d.ts +12 -1
  67. package/lib/model/node/BaseNodeModel.js +9 -2
  68. package/lib/model/node/HtmlNodeModel.d.ts +12 -0
  69. package/lib/model/node/HtmlNodeModel.js +19 -0
  70. package/lib/model/node/PolygonNodeModel.js +3 -3
  71. package/lib/options.d.ts +4 -2
  72. package/lib/style/index.css +3 -2
  73. package/lib/style/index.less +3 -2
  74. package/lib/style/raw.d.ts +1 -1
  75. package/lib/style/raw.js +1 -1
  76. package/lib/tool/MultipleSelectTool.js +10 -5
  77. package/lib/util/drag.js +0 -1
  78. package/lib/util/edge.d.ts +40 -1
  79. package/lib/util/edge.js +43 -9
  80. package/lib/util/geometry.d.ts +8 -0
  81. package/lib/util/geometry.js +81 -1
  82. package/lib/util/theme.d.ts +2 -65
  83. package/lib/util/theme.js +15 -292
  84. package/lib/view/Anchor.d.ts +1 -0
  85. package/lib/view/Anchor.js +24 -21
  86. package/lib/view/Control.d.ts +5 -0
  87. package/lib/view/Control.js +44 -57
  88. package/lib/view/edge/BaseEdge.js +9 -0
  89. package/lib/view/edge/PolylineEdge.js +13 -2
  90. package/lib/view/node/BaseNode.d.ts +1 -0
  91. package/lib/view/node/BaseNode.js +22 -10
  92. package/lib/view/node/HtmlNode.js +1 -3
  93. package/lib/view/overlay/CanvasOverlay.js +5 -2
  94. package/lib/view/overlay/Grid.d.ts +12 -1
  95. package/lib/view/overlay/Grid.js +83 -21
  96. package/lib/view/overlay/OutlineOverlay.d.ts +1 -0
  97. package/lib/view/overlay/OutlineOverlay.js +18 -17
  98. package/lib/view/overlay/gridConfig.d.ts +46 -0
  99. package/lib/view/overlay/gridConfig.js +104 -0
  100. package/lib/view/shape/Polygon.d.ts +0 -7
  101. package/lib/view/shape/Polygon.js +13 -45
  102. package/package.json +6 -1
  103. package/.turbo/turbo-build$colon$dev.log +0 -10
  104. package/.turbo/turbo-build.log +0 -33
  105. package/CHANGELOG.md +0 -1849
  106. package/__tests__/algorithm/egde.test.ts +0 -131
  107. package/__tests__/algorithm/index.test.ts +0 -74
  108. package/__tests__/algorithm/outline.test.ts +0 -43
  109. package/__tests__/bugs/1545-spec.test.ts +0 -42
  110. package/__tests__/event/event.test.ts +0 -22
  111. package/__tests__/history/history.test.ts +0 -28
  112. package/__tests__/logicflow.test.ts +0 -575
  113. package/__tests__/model/graphmodel.test.ts +0 -87
  114. package/__tests__/util/compatible.test.ts +0 -48
  115. package/__tests__/util/edge.test.ts +0 -224
  116. package/__tests__/util/geometry.test.ts +0 -14
  117. package/__tests__/util/graph.test.ts +0 -16
  118. package/__tests__/util/matrix.test.ts +0 -41
  119. package/__tests__/util/node.test.ts +0 -68
  120. package/__tests__/util/sampling.test.ts +0 -12
  121. package/__tests__/util/vector.test.ts +0 -50
  122. package/__tests__/util/zIndex.test.ts +0 -10
  123. package/src/LogicFlow.tsx +0 -2008
  124. package/src/algorithm/edge.ts +0 -67
  125. package/src/algorithm/index.ts +0 -70
  126. package/src/algorithm/outline.ts +0 -77
  127. package/src/algorithm/rotate.ts +0 -55
  128. package/src/common/drag.ts +0 -219
  129. package/src/common/history.ts +0 -108
  130. package/src/common/index.ts +0 -6
  131. package/src/common/keyboard.ts +0 -108
  132. package/src/common/matrix.ts +0 -122
  133. package/src/common/vector.ts +0 -93
  134. package/src/constant/index.ts +0 -179
  135. package/src/event/event.md +0 -66
  136. package/src/event/eventArgs.ts +0 -643
  137. package/src/event/eventEmitter.ts +0 -156
  138. package/src/history/index.ts +0 -119
  139. package/src/index.less +0 -1
  140. package/src/index.ts +0 -26
  141. package/src/keyboard/index.ts +0 -112
  142. package/src/keyboard/shortcut.ts +0 -200
  143. package/src/model/BaseModel.ts +0 -250
  144. package/src/model/EditConfigModel.ts +0 -334
  145. package/src/model/GraphModel.ts +0 -1788
  146. package/src/model/NestedTransformModel.ts +0 -121
  147. package/src/model/SnaplineModel.ts +0 -256
  148. package/src/model/TransformModel.ts +0 -258
  149. package/src/model/edge/BaseEdgeModel.ts +0 -777
  150. package/src/model/edge/BezierEdgeModel.ts +0 -197
  151. package/src/model/edge/LineEdgeModel.ts +0 -36
  152. package/src/model/edge/PolylineEdgeModel.ts +0 -672
  153. package/src/model/edge/index.ts +0 -4
  154. package/src/model/index.ts +0 -9
  155. package/src/model/node/BaseNodeModel.ts +0 -949
  156. package/src/model/node/CircleNodeModel.ts +0 -91
  157. package/src/model/node/DiamondNodeModel.ts +0 -132
  158. package/src/model/node/EllipseNodeModel.ts +0 -98
  159. package/src/model/node/HtmlNodeModel.ts +0 -50
  160. package/src/model/node/PolygonNodeModel.ts +0 -150
  161. package/src/model/node/RectNodeModel.ts +0 -69
  162. package/src/model/node/TextNodeModel.ts +0 -54
  163. package/src/model/node/index.ts +0 -8
  164. package/src/options.ts +0 -145
  165. package/src/style/index.less +0 -261
  166. package/src/style/raw.ts +0 -220
  167. package/src/tool/MultipleSelectTool.tsx +0 -132
  168. package/src/tool/TextEditTool.tsx +0 -193
  169. package/src/tool/index.ts +0 -101
  170. package/src/typings.d.ts +0 -5
  171. package/src/util/animation.ts +0 -29
  172. package/src/util/browser.ts +0 -4
  173. package/src/util/compatible.ts +0 -15
  174. package/src/util/drag.ts +0 -220
  175. package/src/util/edge.ts +0 -1060
  176. package/src/util/geometry.ts +0 -55
  177. package/src/util/graph.ts +0 -46
  178. package/src/util/index.ts +0 -17
  179. package/src/util/matrix.ts +0 -129
  180. package/src/util/mobx.ts +0 -23
  181. package/src/util/node.ts +0 -543
  182. package/src/util/raf.ts +0 -28
  183. package/src/util/resize.ts +0 -606
  184. package/src/util/sampling.ts +0 -85
  185. package/src/util/theme.ts +0 -375
  186. package/src/util/uuid.ts +0 -26
  187. package/src/util/vector.ts +0 -93
  188. package/src/util/zIndex.ts +0 -6
  189. package/src/view/Anchor.tsx +0 -445
  190. package/src/view/Control.tsx +0 -512
  191. package/src/view/Graph.tsx +0 -141
  192. package/src/view/Rotate.tsx +0 -113
  193. package/src/view/behavior/dnd.ts +0 -162
  194. package/src/view/behavior/index.ts +0 -2
  195. package/src/view/behavior/snapline.ts +0 -16
  196. package/src/view/edge/AdjustPoint.tsx +0 -425
  197. package/src/view/edge/Arrow.tsx +0 -54
  198. package/src/view/edge/BaseEdge.tsx +0 -650
  199. package/src/view/edge/BezierEdge.tsx +0 -101
  200. package/src/view/edge/LineEdge.tsx +0 -81
  201. package/src/view/edge/PolylineEdge.tsx +0 -299
  202. package/src/view/edge/index.ts +0 -6
  203. package/src/view/index.ts +0 -8
  204. package/src/view/node/BaseNode.tsx +0 -571
  205. package/src/view/node/CircleNode.tsx +0 -21
  206. package/src/view/node/DiamondNode.tsx +0 -24
  207. package/src/view/node/EllipseNode.tsx +0 -22
  208. package/src/view/node/HtmlNode.tsx +0 -95
  209. package/src/view/node/PolygonNode.tsx +0 -28
  210. package/src/view/node/RectNode.tsx +0 -30
  211. package/src/view/node/TextNode.tsx +0 -39
  212. package/src/view/node/index.ts +0 -8
  213. package/src/view/overlay/BackgroundOverlay.tsx +0 -34
  214. package/src/view/overlay/BezierAdjustOverlay.tsx +0 -150
  215. package/src/view/overlay/CanvasOverlay.tsx +0 -288
  216. package/src/view/overlay/Grid.tsx +0 -162
  217. package/src/view/overlay/ModificationOverlay.tsx +0 -31
  218. package/src/view/overlay/OutlineOverlay.tsx +0 -170
  219. package/src/view/overlay/SnaplineOverlay.tsx +0 -44
  220. package/src/view/overlay/ToolOverlay.tsx +0 -65
  221. package/src/view/overlay/getTransformHoc.tsx +0 -50
  222. package/src/view/overlay/index.ts +0 -8
  223. package/src/view/shape/Circle.tsx +0 -41
  224. package/src/view/shape/Ellipse.tsx +0 -42
  225. package/src/view/shape/Line.tsx +0 -39
  226. package/src/view/shape/Path.tsx +0 -22
  227. package/src/view/shape/Polygon.tsx +0 -91
  228. package/src/view/shape/Polyline.tsx +0 -31
  229. package/src/view/shape/Rect.tsx +0 -44
  230. package/src/view/shape/Text.tsx +0 -169
  231. package/src/view/shape/index.ts +0 -8
  232. package/src/view/text/BaseText.tsx +0 -134
  233. package/src/view/text/LineText.tsx +0 -168
  234. package/src/view/text/index.ts +0 -2
  235. package/stats.html +0 -4842
  236. package/tsconfig.json +0 -18
@@ -1,643 +0,0 @@
1
- import LogicFlow, {
2
- BaseNodeModel,
3
- BaseEdgeModel,
4
- Model,
5
- GraphModel,
6
- TransformData,
7
- TransformType,
8
- } from '..'
9
-
10
- import NodeData = LogicFlow.NodeData
11
- import EdgeData = LogicFlow.EdgeData
12
- import GraphData = LogicFlow.GraphData
13
- import AnchorConfig = Model.AnchorConfig
14
- import ClientPosition = LogicFlow.ClientPosition
15
-
16
- type ClickEventArgs = {
17
- /**
18
- * 点击后节点是否处于选中状态
19
- */
20
- isSelected: boolean
21
- /**
22
- * 是否为多选状态
23
- */
24
- isMultiple: boolean
25
- }
26
-
27
- type NodeEventArgsPick<
28
- T extends
29
- | 'preData'
30
- | 'data'
31
- | 'model'
32
- | 'e'
33
- | 'position'
34
- | 'deltaX'
35
- | 'deltaY'
36
- | 'index',
37
- > = Pick<
38
- {
39
- /**
40
- * 上一个状态的节点数据
41
- */
42
- preData: NodeData
43
- /**
44
- * 节点数据
45
- */
46
- data: NodeData
47
- /**
48
- * 节点 model
49
- */
50
- model: BaseNodeModel
51
- /**
52
- * 原生鼠标事件对象
53
- */
54
- e: MouseEvent
55
- /**
56
- * 鼠标触发点相对于画布左上角的坐标
57
- */
58
- position: ClientPosition
59
- /**
60
- * 鼠标 X轴移动的距离
61
- */
62
- deltaX: number
63
- /**
64
- * 鼠标Y轴移动的距离
65
- */
66
- deltaY: number
67
- /**
68
- * Resize 时调整的是哪个控制点
69
- */
70
- index: number
71
- },
72
- T
73
- >
74
-
75
- type TextEventArgsPick<
76
- T extends 'data' | 'e' | 'model' | 'element' | 'position',
77
- > = Pick<
78
- {
79
- // 节点数据
80
- data?: any
81
- // 原生鼠标事件对象
82
- e?: MouseEvent | FocusEvent
83
- // 文本所在元素model
84
- model?: BaseNodeModel | BaseEdgeModel | unknown
85
- // 文本dom
86
- element?: HTMLElement | null
87
- // 文本位置
88
- position?: {
89
- x: number
90
- y: number
91
- }
92
- },
93
- T
94
- >
95
-
96
- /**
97
- * 节点事件
98
- */
99
- interface NodeEventArgs {
100
- /**
101
- * 单击节点
102
- */
103
- 'node:click': NodeEventArgsPick<'data' | 'e' | 'position'> & ClickEventArgs
104
- /**
105
- * 双击节点
106
- */
107
- 'node:dbclick': NodeEventArgsPick<'data' | 'e' | 'position'>
108
- /**
109
- * 鼠标按下节点
110
- */
111
- 'node:mousedown': NodeEventArgsPick<'data' | 'e'>
112
- /**
113
- * 鼠标抬起节点
114
- */
115
- 'node:mouseup': NodeEventArgsPick<'data' | 'e'>
116
- /**
117
- * 鼠标移动节点
118
- */
119
- 'node:mousemove': NodeEventArgsPick<'data' | 'e' | 'deltaX' | 'deltaY'>
120
- /**
121
- * 鼠标进入节点
122
- */
123
- 'node:mouseenter': NodeEventArgsPick<'data' | 'e'>
124
- /**
125
- * 鼠标离开节点
126
- */
127
- 'node:mouseleave': NodeEventArgsPick<'data' | 'e'>
128
- /**
129
- * 添加节点
130
- */
131
- 'node:add': NodeEventArgsPick<'data'>
132
- /**
133
- * 删除节点
134
- */
135
- 'node:delete': NodeEventArgsPick<'data' | 'model'>
136
- /**
137
- * 添加外部拖入节点
138
- */
139
- 'node:dnd-add': NodeEventArgsPick<'data'>
140
- /**
141
- * 拖拽外部拖入节点
142
- */
143
- 'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>
144
- /**
145
- * 开始拖拽节点
146
- */
147
- 'node:dragstart': NodeEventArgsPick<'data' | 'e'>
148
- /**
149
- * 拖拽节点
150
- */
151
- 'node:drag': NodeEventArgsPick<'data' | 'e' | 'deltaX' | 'deltaY'>
152
- /**
153
- * 拖拽节点结束
154
- */
155
- 'node:drop': NodeEventArgsPick<'data' | 'e'>
156
- /**
157
- * 右键点击节点
158
- */
159
- 'node:contextmenu': NodeEventArgsPick<'data' | 'e' | 'position'>
160
- /**
161
- * 节点旋转
162
- */
163
- 'node:rotate': NodeEventArgsPick<'data' | 'e' | 'model'>
164
- /**
165
- * 节点缩放
166
- */
167
- 'node:resize': NodeEventArgsPick<
168
- 'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'
169
- >
170
- /**
171
- * 元素的 properties 发生改变
172
- */
173
- 'node:properties-change': {
174
- /**
175
- * 元素的 id
176
- */
177
- id: string
178
- /**
179
- * 改变的 properties 的 key
180
- */
181
- keys: string[]
182
- /**
183
- * 改变前的 properties
184
- */
185
- preProperties: Record<string, any>
186
- /**
187
- * 改变后的 properties
188
- */
189
- properties: Record<string, any>
190
- }
191
- /**
192
- * 节点获焦
193
- */
194
- 'node:focus': NodeEventArgsPick<'data'>
195
- /**
196
- * 节点失焦
197
- */
198
- 'node:blur': NodeEventArgsPick<'data'>
199
- }
200
-
201
- type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
202
- {
203
- /**
204
- * 边数据
205
- */
206
- data: EdgeData
207
- /**
208
- * 原生鼠标事件对象
209
- */
210
- e: MouseEvent
211
- /**
212
- * 鼠标触发点相对于画布左上角的坐标
213
- */
214
- position: ClientPosition
215
- },
216
- T
217
- >
218
-
219
- /**
220
- * 边事件
221
- */
222
- interface EdgeEventArgs {
223
- /**
224
- * 单击边
225
- */
226
- 'edge:click': EdgeEventArgsPick<'data' | 'e' | 'position'>
227
- /**
228
- * 双击边
229
- */
230
- 'edge:dbclick': EdgeEventArgsPick<'data' | 'e' | 'position'>
231
- /**
232
- * 鼠标进入边
233
- */
234
- 'edge:mouseenter': EdgeEventArgsPick<'data' | 'e'>
235
- /**
236
- * 鼠标离开边
237
- */
238
- 'edge:mouseleave': EdgeEventArgsPick<'data' | 'e'>
239
- /**
240
- * 添加边
241
- */
242
- 'edge:add': EdgeEventArgsPick<'data'>
243
- /**
244
- * 删除边
245
- */
246
- 'edge:delete': EdgeEventArgsPick<'data'>
247
- /**
248
- * 右键点击边
249
- */
250
- 'edge:contextmenu': EdgeEventArgsPick<'data' | 'e' | 'position'>
251
- /**
252
- * 拖拽调整边
253
- */
254
- 'edge:adjust': EdgeEventArgsPick<'data'>
255
- /**
256
- * 调整边的起点/终点
257
- */
258
- 'edge:exchange-node': {
259
- data: {
260
- /**
261
- * 新的边的数据
262
- */
263
- newEdge: EdgeData
264
- /**
265
- * 旧的边的数据
266
- */
267
- oldEdge: EdgeData
268
- }
269
- }
270
- /**
271
- * 边获焦
272
- */
273
- 'edge:focus': EdgeEventArgsPick<'data'>
274
- /**
275
- * 边失焦
276
- */
277
- 'edge:blur': EdgeEventArgsPick<'data'>
278
- }
279
-
280
- /**
281
- * 文本事件
282
- */
283
- interface TextEventArgs {
284
- // 鼠标按下文本
285
- 'text:mousedown': TextEventArgsPick<'data' | 'e' | 'model'>
286
- // 开始拖拽文本
287
- 'text:dragstart': TextEventArgsPick<'data' | 'e' | 'model'>
288
- // 文本拖拽
289
- 'text:drag': TextEventArgsPick<'data' | 'e' | 'model'>
290
- // 文本拖拽结束
291
- 'text:drop': TextEventArgsPick<'data' | 'e' | 'model'>
292
- // 文本单击
293
- 'text:click': TextEventArgsPick<'data' | 'e' | 'model'>
294
- // 文本双击
295
- 'text:dbclick': TextEventArgsPick<'data' | 'e' | 'model'>
296
- // 文本失焦
297
- 'text:blur': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
298
- // 鼠标移动文本
299
- 'text:mousemove': TextEventArgsPick<'data' | 'e' | 'model'>
300
- // 鼠标抬起
301
- 'text:mouseup': TextEventArgsPick<'data' | 'e' | 'model'>
302
- // 文本获焦
303
- 'text:focus': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
304
- // 文本新增
305
- 'text:add': TextEventArgsPick<'data' | 'e' | 'model'>
306
- // 文本更新
307
- 'text:update': TextEventArgsPick<'data' | 'e' | 'model'>
308
- // 文本清空
309
- 'text:clear': TextEventArgsPick<'data' | 'e' | 'model'>
310
- // 文本删除
311
- 'text:delete': TextEventArgsPick<'data' | 'e' | 'model'>
312
- // 不允许增加文本
313
- 'text:not-allowed-add': TextEventArgsPick<'data' | 'e' | 'model'>
314
- }
315
-
316
- /**
317
- * label插件文本事件
318
- */
319
- interface TextEventArgs {
320
- // 鼠标按下文本
321
- 'label:mousedown': TextEventArgsPick<'data' | 'e' | 'model'>
322
- // 开始拖拽文本
323
- 'label:dragstart': TextEventArgsPick<'data' | 'e' | 'model'>
324
- // 文本拖拽
325
- 'label:drag': TextEventArgsPick<'data' | 'e' | 'model'>
326
- // 文本拖拽结束
327
- 'label:drop': TextEventArgsPick<'data' | 'e' | 'model'>
328
- // 文本单击
329
- 'label:click': TextEventArgsPick<'data' | 'e' | 'model'>
330
- // 文本双击
331
- 'label:dbclick': TextEventArgsPick<'data' | 'e' | 'model'>
332
- // 文本失焦
333
- 'label:blur': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
334
- // 鼠标移动文本
335
- 'label:mousemove': TextEventArgsPick<'data' | 'e' | 'model'>
336
- // 鼠标抬起
337
- 'label:mouseup': TextEventArgsPick<'data' | 'e' | 'model'>
338
- // 文本获焦
339
- 'label:focus': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
340
- // 文本新增
341
- 'label:add': TextEventArgsPick<'data' | 'e' | 'model'>
342
- // 文本更新
343
- 'label:update': TextEventArgsPick<'data' | 'e' | 'model'>
344
- // 文本清空
345
- 'label:clear': TextEventArgsPick<'data' | 'e' | 'model'>
346
- // 文本删除
347
- 'label:delete': TextEventArgsPick<'data' | 'e' | 'model'>
348
- // 文本新增
349
- 'label:should-add': TextEventArgsPick<'data' | 'e' | 'model' | 'position'>
350
- // 文本批量新增
351
- 'label:batch-add': TextEventArgsPick<'data' | 'e' | 'model'>
352
- // 文本更新
353
- 'label:should-update': TextEventArgsPick<'data' | 'e' | 'model'>
354
- // 文本删除
355
- 'label:should-delete': TextEventArgsPick<'data' | 'e' | 'model'>
356
- // 文本批量删除
357
- 'label:batch-delete': TextEventArgsPick<'data' | 'e' | 'model'>
358
- // 不允许增加文本
359
- 'label:not-allowed-add': TextEventArgsPick<'data' | 'e' | 'model'>
360
- }
361
-
362
- /**
363
- * 连线事件
364
- */
365
- interface ConnectionEventArgs {
366
- 'connection:not-allowed': {
367
- /**
368
- * 目标节点数据
369
- */
370
- data: NodeData
371
- /**
372
- * 校验信息
373
- */
374
- msg?: string
375
- }
376
- }
377
-
378
- /**
379
- * 公共事件
380
- */
381
- interface CommonEventArgs {
382
- 'element:click': {
383
- /**
384
- * 点击元素的数据(节点/边)
385
- */
386
- data: NodeData | EdgeData
387
- /**
388
- * 原生鼠标事件对象
389
- */
390
- e: MouseEvent
391
- /**
392
- * 鼠标触发点相对于画布左上角的坐标
393
- */
394
- position: ClientPosition
395
- }
396
- /**
397
- * 进行画布平移或缩放等变化操作时触发
398
- */
399
- 'graph:transform': {
400
- /**
401
- * 变换操作类型
402
- */
403
- type: TransformType
404
- /**
405
- * 变换操作后的数据
406
- */
407
- transform: TransformData
408
- }
409
- /**
410
- * 画布渲染数据后触发,即 `lf.render()` 方法被调用后触发。
411
- */
412
- 'graph:rendered': {
413
- /**
414
- * 渲染后的画布数据
415
- */
416
- data: GraphData
417
- /**
418
- * 渲染后的画布 model
419
- */
420
- graphModel: GraphModel
421
- }
422
- /**
423
- * 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布(graphModel)上的属性后触发。
424
- * 如果是主动修改某个特定属性导致画布更新,想要在画布更新后做一些操作,建议注册事件后在回调函数中及时注销该事件,或者使用once事件代替on事件。
425
- * 因为其他属性也可能导致画布更新,触发该事件。
426
- */
427
- 'graph:updated': {
428
- /**
429
- * 更新后的画布数据
430
- */
431
- data: GraphData
432
- }
433
- /**
434
- * 画布容器大小发生变化触发,为了性能考虑对事件做了防抖处理,间隔为16ms
435
- */
436
- 'graph:resize': {
437
- /**
438
- * 更新后的画布数据
439
- */
440
- target: HTMLElement
441
- contentRect: DOMRectReadOnly
442
- }
443
- }
444
-
445
- type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =
446
- Pick<
447
- {
448
- /**
449
- * 锚点数据
450
- */
451
- data: AnchorConfig
452
- /**
453
- * 原生鼠标事件对象
454
- */
455
- e: MouseEvent
456
- /**
457
- * 锚点所属节点的数据
458
- */
459
- nodeModel: BaseNodeModel
460
- /**
461
- * 通过拖动锚点连线添加的边的数据
462
- */
463
- edgeModel?: BaseEdgeModel
464
- },
465
- T
466
- >
467
-
468
- /**
469
- * 锚点事件
470
- */
471
- interface AnchorEventArgs {
472
- /**
473
- * anchor 锚点 click
474
- */
475
- 'anchor:click': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>
476
- /**
477
- * anchor 锚点 mousedown
478
- */
479
- 'anchor:mousedown': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>
480
- /**
481
- * 开始拖拽锚点
482
- */
483
- 'anchor:dragstart': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>
484
- /**
485
- * 拖拽锚点
486
- */
487
- 'anchor:drag': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>
488
- /**
489
- * 拖拽锚点结束,并成功添加边。
490
- * 只有在创建连线成功时才触发。用于区分手动创建的连线和自动创建的连线 `edge:add`
491
- */
492
- 'anchor:drop': AnchorEventArgsPick<'data' | 'e' | 'nodeModel' | 'edgeModel'>
493
- /**
494
- * 拖拽锚点结束,不管是否成功添加边都会触发
495
- */
496
- 'anchor:dragend': AnchorEventArgsPick<
497
- 'data' | 'e' | 'nodeModel' | 'edgeModel'
498
- >
499
- }
500
-
501
- type BlankEventArgsPick<T extends 'e' | 'position'> = Pick<
502
- {
503
- /**
504
- * 原生鼠标事件对象
505
- */
506
- e: MouseEvent
507
- /**
508
- * 鼠标触发点相对于画布左上角的坐标
509
- */
510
- position: ClientPosition
511
- },
512
- T
513
- >
514
-
515
- /**
516
- * 画布事件
517
- */
518
- interface BlankEventArgs {
519
- /**
520
- * 鼠标按下画布
521
- */
522
- 'blank:mousedown': BlankEventArgsPick<'e'>
523
- /**
524
- * 鼠标抬起画布
525
- */
526
- 'blank:mouseup': BlankEventArgsPick<'e'>
527
- /**
528
- * 鼠标移动画布
529
- */
530
- 'blank:mousemove': BlankEventArgsPick<'e'>
531
- /**
532
- * 单击画布
533
- */
534
- 'blank:click': BlankEventArgsPick<'e'>
535
- /**
536
- * 右键点击画布
537
- */
538
- 'blank:contextmenu': BlankEventArgsPick<'e' | 'position'>
539
- /**
540
- * 开始拖拽画布
541
- */
542
- 'blank:dragstart': BlankEventArgsPick<'e'>
543
- /**
544
- * 拖拽画布
545
- */
546
- 'blank:drag': BlankEventArgsPick<'e'>
547
- /**
548
- * 拖拽画布结束
549
- */
550
- 'blank:drop': BlankEventArgsPick<'e'>
551
- }
552
-
553
- interface HistoryEventArgs {
554
- /**
555
- * 历史记录变化
556
- */
557
- 'history:change': {
558
- /**
559
- * 历史数据
560
- */
561
- data: {
562
- /**
563
- * 可撤销的 graph 快照
564
- */
565
- undos: GraphData[]
566
- /**
567
- * 可重做的 graph 快照
568
- */
569
- redos: GraphData[]
570
- /**
571
- * 是否可以撤销
572
- */
573
- undoAble: boolean
574
- /**
575
- * 是否可以重做
576
- */
577
- redoAble: boolean
578
- }
579
- }
580
- }
581
-
582
- type SelectionEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
583
- {
584
- /**
585
- * 选中元素的数据(节点/边)
586
- */
587
- data: GraphData
588
- /**
589
- * 原生鼠标事件对象
590
- */
591
- e: MouseEvent
592
- /**
593
- * 鼠标触发点相对于画布左上角的坐标
594
- */
595
- position: ClientPosition
596
- },
597
- T
598
- >
599
-
600
- /**
601
- * 选区事件
602
- */
603
- interface SelectionEventArgs {
604
- /**
605
- * 鼠标按下选区
606
- */
607
- 'selection:mousedown': SelectionEventArgsPick<'e'>
608
- /**
609
- * 开始拖拽选区
610
- */
611
- 'selection:dragstart': SelectionEventArgsPick<'e'>
612
- /**
613
- * 拖拽选区
614
- */
615
- 'selection:drag': SelectionEventArgsPick<'e'>
616
- /**
617
- * 拖拽选区结束
618
- */
619
- 'selection:drop': SelectionEventArgsPick<'e'>
620
- /**
621
- * 鼠标移动选区
622
- */
623
- 'selection:mousemove': SelectionEventArgsPick<'e' | 'position'>
624
- /**
625
- * 鼠标抬起选区
626
- */
627
- 'selection:mouseup': SelectionEventArgsPick<'e'>
628
- /**
629
- * 右键点击选区
630
- */
631
- 'selection:contextmenu': SelectionEventArgsPick<'data' | 'e' | 'position'>
632
- }
633
-
634
- // 此处主要是对事件参数进行聚合
635
- export type EventArgs = NodeEventArgs &
636
- EdgeEventArgs &
637
- ConnectionEventArgs &
638
- CommonEventArgs &
639
- AnchorEventArgs &
640
- BlankEventArgs &
641
- HistoryEventArgs &
642
- SelectionEventArgs &
643
- TextEventArgs