@logicflow/core 2.0.0-beta.5 → 2.0.0-beta.6

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 (243) hide show
  1. package/.turbo/turbo-build$colon$dev.log +2 -2
  2. package/.turbo/turbo-build.log +8 -8
  3. package/dist/index.min.js +4 -4
  4. package/es/LogicFlow.d.ts +32 -6
  5. package/es/LogicFlow.js +15 -12
  6. package/es/LogicFlow.js.map +1 -1
  7. package/es/algorithm/edge.js.map +1 -1
  8. package/es/algorithm/index.d.ts +2 -0
  9. package/es/algorithm/index.js +2 -0
  10. package/es/algorithm/index.js.map +1 -1
  11. package/es/algorithm/outline.d.ts +1 -1
  12. package/es/common/drag.d.ts +2 -2
  13. package/es/common/drag.js.map +1 -1
  14. package/es/constant/index.d.ts +37 -1
  15. package/es/constant/index.js +40 -1
  16. package/es/constant/index.js.map +1 -1
  17. package/es/event/eventArgs.d.ts +88 -25
  18. package/es/index.d.ts +4 -0
  19. package/es/index.js +4 -0
  20. package/es/index.js.map +1 -1
  21. package/es/keyboard/shortcut.d.ts +4 -0
  22. package/es/keyboard/shortcut.js +9 -8
  23. package/es/keyboard/shortcut.js.map +1 -1
  24. package/es/model/BaseModel.d.ts +12 -16
  25. package/es/model/EditConfigModel.d.ts +97 -36
  26. package/es/model/EditConfigModel.js +166 -79
  27. package/es/model/EditConfigModel.js.map +1 -1
  28. package/es/model/GraphModel.d.ts +12 -1
  29. package/es/model/GraphModel.js +40 -9
  30. package/es/model/GraphModel.js.map +1 -1
  31. package/es/model/TransformModel.js +1 -1
  32. package/es/model/TransformModel.js.map +1 -1
  33. package/es/model/edge/BaseEdgeModel.d.ts +9 -3
  34. package/es/model/edge/BaseEdgeModel.js +33 -17
  35. package/es/model/edge/BaseEdgeModel.js.map +1 -1
  36. package/es/model/edge/BezierEdgeModel.d.ts +1 -1
  37. package/es/model/edge/BezierEdgeModel.js +5 -2
  38. package/es/model/edge/BezierEdgeModel.js.map +1 -1
  39. package/es/model/edge/PolylineEdgeModel.d.ts +3 -3
  40. package/es/model/edge/PolylineEdgeModel.js +20 -14
  41. package/es/model/edge/PolylineEdgeModel.js.map +1 -1
  42. package/es/model/node/BaseNodeModel.d.ts +7 -1
  43. package/es/model/node/BaseNodeModel.js +22 -11
  44. package/es/model/node/BaseNodeModel.js.map +1 -1
  45. package/es/model/node/CircleNodeModel.js.map +1 -1
  46. package/es/model/node/DiamondNodeModel.js.map +1 -1
  47. package/es/model/node/EllipseNodeModel.js.map +1 -1
  48. package/es/options.d.ts +4 -1
  49. package/es/options.js.map +1 -1
  50. package/es/tool/MultipleSelectTool.d.ts +1 -1
  51. package/es/tool/MultipleSelectTool.js +5 -5
  52. package/es/tool/MultipleSelectTool.js.map +1 -1
  53. package/es/tool/TextEditTool.d.ts +3 -3
  54. package/es/tool/TextEditTool.js +2 -2
  55. package/es/tool/TextEditTool.js.map +1 -1
  56. package/es/tool/index.d.ts +24 -2
  57. package/es/tool/index.js +82 -2
  58. package/es/tool/index.js.map +1 -1
  59. package/es/util/drag.d.ts +5 -5
  60. package/es/util/drag.js +3 -1
  61. package/es/util/drag.js.map +1 -1
  62. package/es/util/edge.d.ts +2 -1
  63. package/es/util/edge.js +9 -12
  64. package/es/util/edge.js.map +1 -1
  65. package/es/util/node.d.ts +2 -5
  66. package/es/util/node.js +1 -0
  67. package/es/util/node.js.map +1 -1
  68. package/es/view/Anchor.d.ts +1 -3
  69. package/es/view/Anchor.js +3 -0
  70. package/es/view/Anchor.js.map +1 -1
  71. package/es/view/Control.d.ts +1 -1
  72. package/es/view/Control.js +7 -7
  73. package/es/view/Control.js.map +1 -1
  74. package/es/view/Graph.d.ts +1 -1
  75. package/es/view/Rotate.js +2 -1
  76. package/es/view/Rotate.js.map +1 -1
  77. package/es/view/behavior/index.d.ts +2 -0
  78. package/es/view/behavior/index.js +3 -0
  79. package/es/view/behavior/index.js.map +1 -0
  80. package/es/view/behavior/snapline.d.ts +3 -0
  81. package/es/{tool → view/behavior}/snapline.js +0 -1
  82. package/es/view/behavior/snapline.js.map +1 -0
  83. package/es/view/edge/AdjustPoint.js +9 -20
  84. package/es/view/edge/AdjustPoint.js.map +1 -1
  85. package/es/view/edge/BaseEdge.js +25 -17
  86. package/es/view/edge/BaseEdge.js.map +1 -1
  87. package/es/view/node/BaseNode.js +14 -9
  88. package/es/view/node/BaseNode.js.map +1 -1
  89. package/es/view/node/HtmlNode.js +2 -2
  90. package/es/view/node/HtmlNode.js.map +1 -1
  91. package/es/view/overlay/CanvasOverlay.js +1 -0
  92. package/es/view/overlay/CanvasOverlay.js.map +1 -1
  93. package/es/view/overlay/ToolOverlay.d.ts +1 -1
  94. package/es/view/overlay/ToolOverlay.js +1 -1
  95. package/es/view/overlay/ToolOverlay.js.map +1 -1
  96. package/es/view/text/BaseText.js +7 -3
  97. package/es/view/text/BaseText.js.map +1 -1
  98. package/lib/LogicFlow.d.ts +32 -6
  99. package/lib/LogicFlow.js +17 -14
  100. package/lib/LogicFlow.js.map +1 -1
  101. package/lib/algorithm/edge.js.map +1 -1
  102. package/lib/algorithm/index.d.ts +2 -0
  103. package/lib/algorithm/index.js +17 -1
  104. package/lib/algorithm/index.js.map +1 -1
  105. package/lib/algorithm/outline.d.ts +1 -1
  106. package/lib/common/drag.d.ts +2 -2
  107. package/lib/common/drag.js.map +1 -1
  108. package/lib/constant/index.d.ts +37 -1
  109. package/lib/constant/index.js +41 -2
  110. package/lib/constant/index.js.map +1 -1
  111. package/lib/event/eventArgs.d.ts +88 -25
  112. package/lib/index.d.ts +4 -0
  113. package/lib/index.js +4 -0
  114. package/lib/index.js.map +1 -1
  115. package/lib/keyboard/shortcut.d.ts +4 -0
  116. package/lib/keyboard/shortcut.js +12 -9
  117. package/lib/keyboard/shortcut.js.map +1 -1
  118. package/lib/model/BaseModel.d.ts +12 -16
  119. package/lib/model/EditConfigModel.d.ts +97 -36
  120. package/lib/model/EditConfigModel.js +165 -78
  121. package/lib/model/EditConfigModel.js.map +1 -1
  122. package/lib/model/GraphModel.d.ts +12 -1
  123. package/lib/model/GraphModel.js +38 -7
  124. package/lib/model/GraphModel.js.map +1 -1
  125. package/lib/model/TransformModel.js +1 -1
  126. package/lib/model/TransformModel.js.map +1 -1
  127. package/lib/model/edge/BaseEdgeModel.d.ts +9 -3
  128. package/lib/model/edge/BaseEdgeModel.js +31 -15
  129. package/lib/model/edge/BaseEdgeModel.js.map +1 -1
  130. package/lib/model/edge/BezierEdgeModel.d.ts +1 -1
  131. package/lib/model/edge/BezierEdgeModel.js +4 -1
  132. package/lib/model/edge/BezierEdgeModel.js.map +1 -1
  133. package/lib/model/edge/PolylineEdgeModel.d.ts +3 -3
  134. package/lib/model/edge/PolylineEdgeModel.js +19 -13
  135. package/lib/model/edge/PolylineEdgeModel.js.map +1 -1
  136. package/lib/model/node/BaseNodeModel.d.ts +7 -1
  137. package/lib/model/node/BaseNodeModel.js +20 -9
  138. package/lib/model/node/BaseNodeModel.js.map +1 -1
  139. package/lib/model/node/CircleNodeModel.js.map +1 -1
  140. package/lib/model/node/DiamondNodeModel.js.map +1 -1
  141. package/lib/model/node/EllipseNodeModel.js.map +1 -1
  142. package/lib/options.d.ts +4 -1
  143. package/lib/options.js.map +1 -1
  144. package/lib/tool/MultipleSelectTool.d.ts +1 -1
  145. package/lib/tool/MultipleSelectTool.js +5 -5
  146. package/lib/tool/MultipleSelectTool.js.map +1 -1
  147. package/lib/tool/TextEditTool.d.ts +3 -3
  148. package/lib/tool/TextEditTool.js +4 -4
  149. package/lib/tool/TextEditTool.js.map +1 -1
  150. package/lib/tool/index.d.ts +24 -2
  151. package/lib/tool/index.js +85 -15
  152. package/lib/tool/index.js.map +1 -1
  153. package/lib/util/drag.d.ts +5 -5
  154. package/lib/util/drag.js +3 -1
  155. package/lib/util/drag.js.map +1 -1
  156. package/lib/util/edge.d.ts +2 -1
  157. package/lib/util/edge.js +11 -14
  158. package/lib/util/edge.js.map +1 -1
  159. package/lib/util/node.d.ts +2 -5
  160. package/lib/util/node.js +1 -0
  161. package/lib/util/node.js.map +1 -1
  162. package/lib/view/Anchor.d.ts +1 -3
  163. package/lib/view/Anchor.js +3 -0
  164. package/lib/view/Anchor.js.map +1 -1
  165. package/lib/view/Control.d.ts +1 -1
  166. package/lib/view/Control.js +7 -7
  167. package/lib/view/Control.js.map +1 -1
  168. package/lib/view/Graph.d.ts +1 -1
  169. package/lib/view/Rotate.js +2 -1
  170. package/lib/view/Rotate.js.map +1 -1
  171. package/lib/view/behavior/index.d.ts +2 -0
  172. package/lib/view/behavior/index.js +19 -0
  173. package/lib/view/behavior/index.js.map +1 -0
  174. package/lib/view/behavior/snapline.d.ts +3 -0
  175. package/lib/{tool → view/behavior}/snapline.js +0 -1
  176. package/lib/view/behavior/snapline.js.map +1 -0
  177. package/lib/view/edge/AdjustPoint.js +9 -20
  178. package/lib/view/edge/AdjustPoint.js.map +1 -1
  179. package/lib/view/edge/BaseEdge.js +24 -16
  180. package/lib/view/edge/BaseEdge.js.map +1 -1
  181. package/lib/view/node/BaseNode.js +13 -8
  182. package/lib/view/node/BaseNode.js.map +1 -1
  183. package/lib/view/node/HtmlNode.js +2 -2
  184. package/lib/view/node/HtmlNode.js.map +1 -1
  185. package/lib/view/overlay/CanvasOverlay.js +1 -0
  186. package/lib/view/overlay/CanvasOverlay.js.map +1 -1
  187. package/lib/view/overlay/ToolOverlay.d.ts +1 -1
  188. package/lib/view/overlay/ToolOverlay.js +1 -1
  189. package/lib/view/overlay/ToolOverlay.js.map +1 -1
  190. package/lib/view/text/BaseText.js +6 -2
  191. package/lib/view/text/BaseText.js.map +1 -1
  192. package/package.json +1 -1
  193. package/src/LogicFlow.tsx +52 -14
  194. package/src/algorithm/edge.ts +1 -0
  195. package/src/algorithm/index.ts +2 -0
  196. package/src/algorithm/outline.ts +2 -2
  197. package/src/common/drag.ts +16 -2
  198. package/src/constant/index.ts +42 -1
  199. package/src/event/eventArgs.ts +155 -34
  200. package/src/index.ts +4 -0
  201. package/src/keyboard/shortcut.ts +12 -8
  202. package/src/model/BaseModel.ts +15 -17
  203. package/src/model/EditConfigModel.ts +206 -94
  204. package/src/model/GraphModel.ts +43 -8
  205. package/src/model/TransformModel.ts +1 -1
  206. package/src/model/edge/BaseEdgeModel.ts +28 -19
  207. package/src/model/edge/BezierEdgeModel.ts +5 -6
  208. package/src/model/edge/PolylineEdgeModel.ts +22 -18
  209. package/src/model/node/BaseNodeModel.ts +19 -13
  210. package/src/model/node/CircleNodeModel.ts +0 -1
  211. package/src/model/node/DiamondNodeModel.ts +0 -1
  212. package/src/model/node/EllipseNodeModel.ts +0 -1
  213. package/src/options.ts +6 -1
  214. package/src/tool/MultipleSelectTool.tsx +6 -6
  215. package/src/tool/TextEditTool.tsx +3 -3
  216. package/src/tool/index.ts +96 -2
  217. package/src/util/drag.ts +22 -6
  218. package/src/util/edge.ts +14 -13
  219. package/src/util/node.ts +3 -5
  220. package/src/view/Anchor.tsx +3 -1
  221. package/src/view/Control.tsx +16 -7
  222. package/src/view/Graph.tsx +1 -1
  223. package/src/view/Rotate.tsx +2 -1
  224. package/src/view/behavior/index.ts +2 -0
  225. package/src/{tool → view/behavior}/snapline.ts +3 -4
  226. package/src/view/edge/AdjustPoint.tsx +32 -46
  227. package/src/view/edge/BaseEdge.tsx +58 -38
  228. package/src/view/node/BaseNode.tsx +24 -10
  229. package/src/view/node/HtmlNode.tsx +2 -2
  230. package/src/view/overlay/CanvasOverlay.tsx +1 -0
  231. package/src/view/overlay/ToolOverlay.tsx +1 -1
  232. package/src/view/text/BaseText.tsx +11 -3
  233. package/es/tool/snapline.d.ts +0 -3
  234. package/es/tool/snapline.js.map +0 -1
  235. package/es/tool/tool.d.ts +0 -22
  236. package/es/tool/tool.js +0 -43
  237. package/es/tool/tool.js.map +0 -1
  238. package/lib/tool/snapline.d.ts +0 -3
  239. package/lib/tool/snapline.js.map +0 -1
  240. package/lib/tool/tool.d.ts +0 -22
  241. package/lib/tool/tool.js +0 -49
  242. package/lib/tool/tool.js.map +0 -1
  243. package/src/tool/tool.ts +0 -66
package/src/util/edge.ts CHANGED
@@ -1,10 +1,13 @@
1
- import { forEach, pick } from 'lodash-es'
1
+ import { pick, forEach } from 'lodash-es'
2
2
  import { getNodeBBox, isInNode, distance, sampleCubic } from '.'
3
3
  import LogicFlow from '../LogicFlow'
4
4
  import { Options } from '../options'
5
5
  import { SegmentDirection } from '../constant'
6
- import { getVerticalPointOfLine } from '../algorithm'
7
- import { getCrossPointOfLine, isInSegment } from '../algorithm/edge'
6
+ import {
7
+ getVerticalPointOfLine,
8
+ getCrossPointOfLine,
9
+ isInSegment,
10
+ } from '../algorithm'
8
11
  import {
9
12
  Model,
10
13
  BaseNodeModel,
@@ -397,7 +400,7 @@ export const getNextNeighborPoints = (
397
400
  return filterRepeatPoints(neighbors)
398
401
  }
399
402
 
400
- /* 路径查找,Astart查找+曼哈顿距离
403
+ /* 路径查找,AStar查找+曼哈顿距离
401
404
  * 算法wiki:https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
402
405
  * 方法无法复用,且调用了很多polyline相关的方法,暂不抽离到src/algorithm中
403
406
  */
@@ -590,10 +593,10 @@ export const getPolylinePoints = (
590
593
  * @param pointsList 多个点组成的数组
591
594
  */
592
595
  export const getLongestEdge = (pointsList: Point[]): [Point, Point] => {
593
- let points
594
596
  if (pointsList.length === 1) {
595
- points = [pointsList[0], pointsList[0]]
596
- } else if (pointsList.length >= 2) {
597
+ const [point] = pointsList
598
+ return [point, point]
599
+ } else {
597
600
  let point1 = pointsList[0]
598
601
  let point2 = pointsList[1]
599
602
  let edgeLength = distance(point1.x, point1.y, point2.x, point2.y)
@@ -612,9 +615,8 @@ export const getLongestEdge = (pointsList: Point[]): [Point, Point] => {
612
615
  point2 = newPoint2
613
616
  }
614
617
  }
615
- points = [point1, point2]
618
+ return [point1, point2]
616
619
  }
617
- return points
618
620
  }
619
621
 
620
622
  /* 线段是否在节点内部,被包含了 */
@@ -650,8 +652,7 @@ export const getCrossPointInRect = (
650
652
  start: Point,
651
653
  end: Point,
652
654
  node: BaseNodeModel,
653
- ): Point => {
654
- let point
655
+ ): Point | false | undefined => {
655
656
  let crossSegments: [Point, Point] | undefined = undefined
656
657
  const nodeBox = getNodeBBox(node)
657
658
  const points = getPointsFromBBox(nodeBox)
@@ -667,9 +668,8 @@ export const getCrossPointInRect = (
667
668
  }
668
669
  }
669
670
  if (crossSegments) {
670
- point = getCrossPointOfLine(start, end, crossSegments[0], crossSegments[1])
671
+ return getCrossPointOfLine(start, end, crossSegments[0], crossSegments[1])
671
672
  }
672
- return point
673
673
  }
674
674
  /* 判断线段的方向 */
675
675
  export const segmentDirection = (
@@ -915,6 +915,7 @@ export const getEndTangent = (
915
915
  * 获取移动边后,文本位置距离边上的最近的一点
916
916
  * @param point 边上文本的位置
917
917
  * @param points 边的各个拐点
918
+ * TODO: Label实验没问题后统一改成新的计算方式,把这个方法废弃
918
919
  */
919
920
  export const getClosestPointOfPolyline = (
920
921
  point: Point,
package/src/util/node.ts CHANGED
@@ -19,6 +19,7 @@ import Direction = LogicFlow.Direction
19
19
  import NodeConfig = LogicFlow.NodeConfig
20
20
  import LineSegment = LogicFlow.LineSegment
21
21
  import AnchorInfo = Model.AnchorInfo
22
+ import BoxBoundsPoint = Model.BoxBoundsPoint
22
23
 
23
24
  /* 获取所有锚点 */
24
25
  export const getAnchors = (data: BaseNodeModel) => {
@@ -145,13 +146,9 @@ export type NodeBBox = {
145
146
  y: number
146
147
  width: number
147
148
  height: number
148
- minX: number
149
- minY: number
150
- maxX: number
151
- maxY: number
152
149
  centerX: number
153
150
  centerY: number
154
- }
151
+ } & BoxBoundsPoint
155
152
 
156
153
  /* 获取节点bbox */
157
154
  export const getNodeBBox = (node: BaseNodeModel): NodeBBox => {
@@ -412,6 +409,7 @@ export const pickNodeConfig = (data: NodeConfig): NodeConfig => {
412
409
  'x',
413
410
  'y',
414
411
  'text',
412
+ 'label',
415
413
  'properties',
416
414
  'virtual', // 区域节点是否为dnd添加的虚拟节点
417
415
  'rotate',
@@ -116,7 +116,7 @@ class Anchor extends Component<IProps, IState> {
116
116
  endY: anchorData.y,
117
117
  })
118
118
  }
119
- onDragging = ({ event }) => {
119
+ onDragging = ({ event }: IDragParams) => {
120
120
  const { graphModel, nodeModel, anchorData } = this.props
121
121
  const {
122
122
  transformModel,
@@ -125,6 +125,8 @@ class Anchor extends Component<IProps, IState> {
125
125
  height,
126
126
  editConfigModel: { autoExpand, stopMoveGraph },
127
127
  } = graphModel
128
+ // TODO:确认该方法是否有影响!理论上 onDragging 时 event 必有值
129
+ if (!event) return
128
130
  const { clientX, clientY } = event
129
131
  const {
130
132
  domOverlayPosition: { x, y },
@@ -103,11 +103,13 @@ export class ResizeControl extends Component<
103
103
 
104
104
  triggerResizeEvent = (
105
105
  preNodeData: ResizeNodeData,
106
- nextNodeData: ResizeNodeData,
106
+ curNodeData: ResizeNodeData,
107
+ nodeModel: BaseNodeModel,
107
108
  ) => {
108
109
  this.graphModel.eventCenter.emit(EventType.NODE_RESIZE, {
109
- preNodeData,
110
- nextNodeData,
110
+ preData: preNodeData,
111
+ data: curNodeData,
112
+ model: nodeModel,
111
113
  })
112
114
  }
113
115
 
@@ -282,14 +284,12 @@ export class ResizeControl extends Component<
282
284
  nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
283
285
 
284
286
  const preNodeData = this.nodeModel.getData()
285
- const nextNodeData = this.nodeModel.resize(nextSize)
286
-
287
- console.log('nextNodeData ===>>>', nextNodeData)
287
+ const curNodeData = this.nodeModel.resize(nextSize)
288
288
 
289
289
  // 更新边
290
290
  this.updateEdgePointByAnchors()
291
291
  // 触发 resize 事件
292
- this.triggerResizeEvent(preNodeData, nextNodeData)
292
+ this.triggerResizeEvent(preNodeData, curNodeData, this.nodeModel)
293
293
  }
294
294
 
295
295
  onDragging = ({ deltaX, deltaY }: IDragParams) => {
@@ -330,6 +330,15 @@ export class ResizeControl extends Component<
330
330
  width={width ?? 7}
331
331
  height={height ?? 7}
332
332
  {...restStyle}
333
+ />
334
+ <Rect
335
+ className="lf-resize-control-content"
336
+ x={x}
337
+ y={y}
338
+ width={30}
339
+ height={30}
340
+ fill="transparent"
341
+ stroke="transparent"
333
342
  onMouseDown={this.dragHandler.handleMouseDown}
334
343
  />
335
344
  </g>
@@ -12,8 +12,8 @@ import {
12
12
  } from './overlay'
13
13
  import DnD from './behavior/dnd'
14
14
  import { observer } from '..'
15
+ import Tool from '../tool'
15
16
  import { Options as LFOptions } from '../options'
16
- import Tool from '../tool/tool'
17
17
  import {
18
18
  GraphModel,
19
19
  BaseEdgeModel,
@@ -83,7 +83,8 @@ class RotateControlPoint extends Component<IRotateControlProps> {
83
83
 
84
84
  eventCenter.emit(EventType.NODE_ROTATE, {
85
85
  e: event,
86
- nodeModel,
86
+ model: nodeModel,
87
+ data: nodeModel.getData(),
87
88
  })
88
89
  }
89
90
 
@@ -0,0 +1,2 @@
1
+ export * from './dnd'
2
+ export * from './snapline'
@@ -1,13 +1,12 @@
1
- import EventEmitter from '../event/eventEmitter'
2
- import SnaplineModel from '../model/SnaplineModel'
1
+ import EventEmitter from '../../event/eventEmitter'
2
+ import SnaplineModel from '../../model/SnaplineModel'
3
3
 
4
4
  export function snapline(
5
5
  eventCenter: EventEmitter,
6
6
  snaplineModel: SnaplineModel,
7
7
  ): void {
8
8
  // 节点拖动时启动对齐线计算
9
- eventCenter.on('node:mousemove', ({ data }: any) => {
10
- // TODO: 取消注释,定义 data 类型,解决编译问题
9
+ eventCenter.on('node:mousemove', ({ data }) => {
11
10
  snaplineModel.setNodeSnapLine(data)
12
11
  })
13
12
  // 节点拖动结束时,对齐线消失
@@ -125,54 +125,40 @@ export class AdjustPoint extends Component<IProps, IState> {
125
125
  )
126
126
  // 如果一定的坐标能够找到目标节点,预结算当前节点与目标节点的路径进行展示
127
127
  if (info && info.node && this.isAllowAdjust(info).pass) {
128
- let params: {
129
- startPoint: Point
130
- endPoint: Point
131
- sourceNode: BaseNodeModel
132
- targetNode: BaseNodeModel
133
- }
134
128
  const { startPoint, endPoint, sourceNode, targetNode } = edgeModel
135
- if (type === AdjustType.SOURCE) {
136
- params = {
137
- startPoint: {
138
- x: info.anchor.x,
139
- y: info.anchor.y,
140
- },
141
- endPoint: {
142
- x: endPoint.x,
143
- y: endPoint.y,
144
- },
145
- sourceNode: info.node,
146
- targetNode,
147
- }
148
- } else if (type === AdjustType.TARGET) {
149
- params = {
150
- startPoint: {
151
- x: startPoint.x,
152
- y: startPoint.y,
153
- },
154
- endPoint: {
155
- x: info.anchor.x,
156
- y: info.anchor.y,
157
- },
158
- sourceNode,
159
- targetNode: info.node,
160
- }
161
- }
162
- edgeModel.updateAfterAdjustStartAndEnd(params!)
163
- } else if (type === AdjustType.SOURCE) {
164
- // 如果没有找到目标节点,更显起终点为当前坐标
165
- edgeModel.updateStartPoint({
166
- x,
167
- y,
168
- })
169
- } else if (type === AdjustType.TARGET) {
170
- edgeModel.updateEndPoint({
171
- x,
172
- y,
173
- })
129
+ const params =
130
+ type === AdjustType.SOURCE
131
+ ? {
132
+ startPoint: {
133
+ x: info.anchor.x,
134
+ y: info.anchor.y,
135
+ },
136
+ endPoint: {
137
+ x: endPoint.x,
138
+ y: endPoint.y,
139
+ },
140
+ sourceNode: info.node,
141
+ targetNode,
142
+ }
143
+ : {
144
+ startPoint: {
145
+ x: startPoint.x,
146
+ y: startPoint.y,
147
+ },
148
+ endPoint: {
149
+ x: info.anchor.x,
150
+ y: info.anchor.y,
151
+ },
152
+ sourceNode,
153
+ targetNode: info.node,
154
+ }
155
+ edgeModel.updateAfterAdjustStartAndEnd(params)
156
+ } else {
157
+ // 如果没有找到目标节点,更新起终点为当前坐标
158
+ type === AdjustType.SOURCE
159
+ ? edgeModel.updateStartPoint({ x, y })
160
+ : edgeModel.updateEndPoint({ x, y })
174
161
  }
175
-
176
162
  if (edgeModel.text.value && editConfigModel.adjustEdge) {
177
163
  edgeModel.setText(
178
164
  Object.assign({}, edgeModel.text, edgeModel.textPosition),
@@ -3,7 +3,7 @@ import { Circle } from '../shape'
3
3
  import { LineText } from '../text'
4
4
  import LogicFlow from '../../LogicFlow'
5
5
  import { GraphModel, BaseEdgeModel, PolylineEdgeModel } from '../../model'
6
- import { ElementState, EventType, ModelType } from '../../constant'
6
+ import { ElementState, EventType, ModelType, TextMode } from '../../constant'
7
7
  import {
8
8
  isMultipleSelect,
9
9
  getClosestPointOfPolyline,
@@ -56,24 +56,31 @@ export abstract class BaseEdge<P extends IProps> extends Component<
56
56
  */
57
57
  getText(): h.JSX.Element | null {
58
58
  const { model, graphModel } = this.props
59
- // 文本被编辑的时候,显示编辑框,不显示文本。
60
- if (model.state === ElementState.TEXT_EDIT) {
61
- return null
62
- }
63
- let draggable = false
64
59
  const { editConfigModel } = graphModel
65
- if (model.text.draggable || editConfigModel.edgeTextDraggable) {
66
- draggable = true
60
+
61
+ // 边文本模式非 TEXT 时,不显示文本
62
+ if (editConfigModel.edgeTextMode !== TextMode.TEXT) return null
63
+ // 文本被编辑的时候,显示编辑框,不显示文本。
64
+ if (model.state === ElementState.TEXT_EDIT) return null
65
+
66
+ if (model.text) {
67
+ let draggable = false
68
+ if (editConfigModel.edgeTextDraggable && model.text.draggable) {
69
+ draggable = true
70
+ }
71
+ return (
72
+ <LineText
73
+ ref={this.textRef}
74
+ editable={
75
+ editConfigModel.edgeTextEdit && (model.text.editable ?? true)
76
+ }
77
+ model={model}
78
+ graphModel={graphModel}
79
+ draggable={draggable}
80
+ />
81
+ )
67
82
  }
68
- return (
69
- <LineText
70
- ref={this.textRef}
71
- editable={editConfigModel.edgeTextEdit && model.text.editable}
72
- model={model}
73
- graphModel={graphModel}
74
- draggable={draggable}
75
- />
76
- )
83
+ return null
77
84
  }
78
85
 
79
86
  /**
@@ -240,24 +247,36 @@ export abstract class BaseEdge<P extends IProps> extends Component<
240
247
  */
241
248
  private getAdjustPoints() {
242
249
  const { model, graphModel } = this.props
250
+ const {
251
+ editConfigModel: {
252
+ adjustEdgeStartAndEnd,
253
+ adjustEdgeStart,
254
+ adjustEdgeEnd,
255
+ },
256
+ } = graphModel
243
257
  const start = model.getAdjustStart()
244
258
  const end = model.getAdjustEnd()
259
+
245
260
  return (
246
261
  <g>
247
- <AdjustPoint
248
- type={AdjustType.SOURCE}
249
- {...start}
250
- getAdjustPointShape={this.getAdjustPointShape}
251
- edgeModel={model}
252
- graphModel={graphModel}
253
- />
254
- <AdjustPoint
255
- type={AdjustType.TARGET}
256
- {...end}
257
- getAdjustPointShape={this.getAdjustPointShape}
258
- edgeModel={model}
259
- graphModel={graphModel}
260
- />
262
+ {adjustEdgeStartAndEnd && adjustEdgeStart && (
263
+ <AdjustPoint
264
+ type={AdjustType.SOURCE}
265
+ {...start}
266
+ getAdjustPointShape={this.getAdjustPointShape}
267
+ edgeModel={model}
268
+ graphModel={graphModel}
269
+ />
270
+ )}
271
+ {adjustEdgeStartAndEnd && adjustEdgeEnd && (
272
+ <AdjustPoint
273
+ type={AdjustType.TARGET}
274
+ {...end}
275
+ getAdjustPointShape={this.getAdjustPointShape}
276
+ edgeModel={model}
277
+ graphModel={graphModel}
278
+ />
279
+ )}
261
280
  </g>
262
281
  )
263
282
  }
@@ -385,15 +404,17 @@ export abstract class BaseEdge<P extends IProps> extends Component<
385
404
  })
386
405
  if (isDoubleClick) {
387
406
  const { editConfigModel, textEditElement } = graphModel
407
+ const { id, text, modelType } = model
388
408
  // 当前边正在编辑,需要先重置状态才能变更文本框位置
389
- if (textEditElement && textEditElement.id === model.id) {
390
- graphModel.setElementStateById(model.id, ElementState.DEFAULT)
409
+ if (textEditElement && textEditElement.id === id) {
410
+ graphModel.setElementStateById(id, ElementState.DEFAULT)
391
411
  }
392
412
  // 边文案可编辑状态,才可以进行文案编辑
393
- if (editConfigModel.edgeTextEdit && model.text.editable) {
394
- graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
413
+ if (editConfigModel.edgeTextEdit && text.editable) {
414
+ model.setSelected(false)
415
+ graphModel.setElementStateById(id, ElementState.TEXT_EDIT)
395
416
  }
396
- if (model.modelType === ModelType.POLYLINE_EDGE) {
417
+ if (modelType === ModelType.POLYLINE_EDGE) {
397
418
  const polylineEdgeModel = model as PolylineEdgeModel
398
419
  const {
399
420
  canvasOverlayPosition: { x, y },
@@ -401,14 +422,13 @@ export abstract class BaseEdge<P extends IProps> extends Component<
401
422
  x: e.x,
402
423
  y: e.y,
403
424
  })
404
- const crossPoint = getClosestPointOfPolyline(
425
+ polylineEdgeModel.dbClickPosition = getClosestPointOfPolyline(
405
426
  {
406
427
  x,
407
428
  y,
408
429
  },
409
430
  polylineEdgeModel.points,
410
431
  )
411
- polylineEdgeModel.dbClickPosition = crossPoint
412
432
  }
413
433
  graphModel.eventCenter.emit(EventType.EDGE_DBCLICK, {
414
434
  data: edgeData,
@@ -5,7 +5,7 @@ import Anchor from '../Anchor'
5
5
  import { BaseText } from '../text'
6
6
  import LogicFlow from '../../LogicFlow'
7
7
  import { GraphModel, BaseNodeModel, Model } from '../../model'
8
- import { ElementState, EventType } from '../../constant'
8
+ import { ElementState, EventType, TextMode } from '../../constant'
9
9
  import {
10
10
  StepDrag,
11
11
  snapToGrid,
@@ -148,14 +148,16 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
148
148
 
149
149
  getText(): h.JSX.Element | null {
150
150
  const { model, graphModel } = this.props
151
+ const { editConfigModel } = graphModel
152
+
153
+ // 当 节点文本模式非 TEXT 时,不显示文本
154
+ if (editConfigModel.nodeTextMode !== TextMode.TEXT) return null
151
155
  // 文本被编辑的时候,显示编辑框,不显示文本。
152
- if (model.state === ElementState.TEXT_EDIT) {
153
- return null
154
- }
156
+ if (model.state === ElementState.TEXT_EDIT) return null
157
+
155
158
  if (model.text) {
156
- const { editConfigModel } = graphModel
157
159
  let draggable = false
158
- if (model.text.draggable || editConfigModel.nodeTextDraggable) {
160
+ if (editConfigModel.nodeTextDraggable && model.text.draggable) {
159
161
  draggable = true
160
162
  }
161
163
  return (
@@ -189,7 +191,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
189
191
  break
190
192
  }
191
193
  if (isDragging) {
192
- className += ' lf-isDragging'
194
+ className += ' lf-dragging'
193
195
  }
194
196
  if (isSelected) {
195
197
  className += ' lf-node-selected'
@@ -212,6 +214,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
212
214
  }
213
215
  }
214
216
  }
217
+
215
218
  onDragging = ({ event }: IDragParams) => {
216
219
  const { model, graphModel } = this.props
217
220
  // const { isDragging } = model;
@@ -294,6 +297,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
294
297
  graphModel.moveNodes(moveNodes, x - model.x, y - model.y)
295
298
  }
296
299
  }
300
+
297
301
  onDragEnd = () => {
298
302
  if (this.t) {
299
303
  cancelRaf(this.t)
@@ -301,10 +305,12 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
301
305
  const { model } = this.props
302
306
  model.isDragging = false
303
307
  }
308
+
304
309
  handleMouseUp = () => {
305
310
  const { model } = this.props
306
311
  this.mouseUpDrag = model.isDragging
307
312
  }
313
+
308
314
  handleClick = (e: MouseEvent) => {
309
315
  // 节点拖拽进画布之后,不触发click事件相关emit
310
316
  // 点拖拽进画布没有触发mousedown事件,没有startTime,用这个值做区分
@@ -350,9 +356,11 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
350
356
 
351
357
  // 不是双击的,默认都是单击
352
358
  if (isDoubleClick) {
353
- if (editConfigModel.nodeTextEdit && model.text.editable) {
354
- model.setSelected(false)
355
- graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
359
+ if (editConfigModel.nodeTextEdit) {
360
+ if (model.text.editable) {
361
+ model.setSelected(false)
362
+ graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT)
363
+ }
356
364
  }
357
365
  graphModel.eventCenter.emit(EventType.NODE_DBCLICK, eventOptions)
358
366
  } else {
@@ -360,6 +368,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
360
368
  graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions)
361
369
  }
362
370
  }
371
+
363
372
  handleContextMenu = (ev: MouseEvent) => {
364
373
  ev.preventDefault()
365
374
  const { model, graphModel } = this.props
@@ -385,6 +394,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
385
394
  })
386
395
  this.toFront()
387
396
  }
397
+
388
398
  handleMouseDown = (ev: MouseEvent) => {
389
399
  const { model, graphModel } = this.props
390
400
  this.startTime = new Date().getTime()
@@ -393,6 +403,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
393
403
  this.stepDrag && this.stepDrag.handleMouseDown(ev)
394
404
  }
395
405
  }
406
+
396
407
  // 为什么将hover状态放到model中?
397
408
  // 因为自定义节点的时候,可能会基于hover状态自定义不同的样式。
398
409
  setHoverOn = (ev: MouseEvent) => {
@@ -405,9 +416,11 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
405
416
  e: ev,
406
417
  })
407
418
  }
419
+
408
420
  setHoverOff = (ev: MouseEvent) => {
409
421
  const { model, graphModel } = this.props
410
422
  const nodeData = model.getData()
423
+ // 文本focus时,关联的元素也需要高亮,所以元素失焦时还要判断下是否有文本处于focus状态
411
424
  if (!model.isHovered) return
412
425
  model.setHovered(false)
413
426
  graphModel.eventCenter.emit(EventType.NODE_MOUSELEAVE, {
@@ -415,6 +428,7 @@ export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
415
428
  e: ev,
416
429
  })
417
430
  }
431
+
418
432
  onMouseOut = (ev: MouseEvent) => {
419
433
  if (isIe) {
420
434
  this.setHoverOff(ev)
@@ -52,14 +52,14 @@ export class HtmlNode extends BaseNode<IHtmlNodeProps> {
52
52
  }
53
53
 
54
54
  componentDidMount() {
55
- console.log('HtmlNode --->>> componentDidMount - 初始化内容')
55
+ // console.log('HtmlNode --->>> componentDidMount - 初始化内容')
56
56
  if (this.shouldUpdate() && this.rootEl) {
57
57
  this.setHtml(this.rootEl)
58
58
  }
59
59
  }
60
60
 
61
61
  componentDidUpdate() {
62
- console.log('HtmlNode --->>> componentDidUpdate - 更新节点内容')
62
+ // console.log('HtmlNode --->>> componentDidUpdate - 更新节点内容')
63
63
  // DONE: 将 componentDidMount 和 componentDidUpdate 区分开,如果写在一次,渲染 React 组件会重复初始化,消耗过多资源
64
64
  // 为了保证历史兼容性,先将默认 HTML 节点的 setHtml 和 confirmUpdate 保持一直,用户可通过自定义的方式重新定义
65
65
  if (this.shouldUpdate() && this.rootEl) {
@@ -123,6 +123,7 @@ export class CanvasOverlay extends Component<IProps, IState> {
123
123
  })
124
124
  }
125
125
  }
126
+ // 鼠标、触摸板 按下
126
127
  mouseDownHandler = (ev: MouseEvent) => {
127
128
  const {
128
129
  graphModel: {
@@ -35,7 +35,7 @@ export class ToolOverlay extends Component<IProps> {
35
35
  h(t, {
36
36
  textEditElement,
37
37
  graphModel,
38
- logicFlow: tool.instance,
38
+ lf: tool.instance,
39
39
  }),
40
40
  )
41
41
  tool.components = components
@@ -1,6 +1,6 @@
1
1
  import classNames from 'classnames'
2
2
  import { createElement as h, Component } from 'preact/compat'
3
- import { ElementState } from '../../constant'
3
+ import { ElementState, EventType } from '../../constant'
4
4
  import { GraphModel, BaseNodeModel, BaseEdgeModel } from '../../model'
5
5
  import { Text } from '../shape'
6
6
  import { IDragParams, StepDrag } from '../../util'
@@ -30,6 +30,7 @@ export class BaseText<
30
30
  onDragging: this.onDragging,
31
31
  step: 1,
32
32
  // model,
33
+ eventType: 'TEXT',
33
34
  isStopPropagation: draggable,
34
35
  })
35
36
  }
@@ -98,11 +99,18 @@ export class BaseText<
98
99
 
99
100
  dbClickHandler = () => {
100
101
  // 静默模式下,双击不更改状态,不可编辑
101
- const { editable } = this.props
102
+ const {
103
+ editable,
104
+ graphModel: { eventCenter },
105
+ model,
106
+ } = this.props
102
107
  if (editable) {
103
- const { model } = this.props
104
108
  model.setElementState(ElementState.TEXT_EDIT)
105
109
  }
110
+ eventCenter.emit(EventType.TEXT_DBCLICK, {
111
+ data: model.text,
112
+ model,
113
+ })
106
114
  }
107
115
 
108
116
  render(): h.JSX.Element | undefined {
@@ -1,3 +0,0 @@
1
- import EventEmitter from '../event/eventEmitter';
2
- import SnaplineModel from '../model/SnaplineModel';
3
- export declare function snapline(eventCenter: EventEmitter, snaplineModel: SnaplineModel): void;
@@ -1 +0,0 @@
1
- {"version":3,"file":"snapline.js","sourceRoot":"","sources":["../../src/tool/snapline.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,QAAQ,CACtB,WAAyB,EACzB,aAA4B;IAE5B,eAAe;IACf,WAAW,CAAC,EAAE,CAAC,gBAAgB,EAAE,UAAC,EAAa;YAAX,IAAI,UAAA;QACtC,+BAA+B;QAC/B,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC,CAAC,CAAA;IACF,gBAAgB;IAChB,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE;QAC7B,aAAa,CAAC,aAAa,EAAE,CAAA;IAC/B,CAAC,CAAC,CAAA;AACJ,CAAC"}