NodeEnd.ts 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { CircleNode, CircleNodeModel, h } from "@logicflow/core";
  2. class EndNode extends CircleNode {
  3. getIconShape() {
  4. const { model } = this.props;
  5. const { x, y, width, height } = model;
  6. const stroke = '#404040';
  7. return h(
  8. 'svg',
  9. {
  10. x: x - width / 2,
  11. y: y - height / 2,
  12. width: 40,
  13. height: 40,
  14. viewBox: '0 0 1024 1024'
  15. },
  16. h(
  17. 'path',
  18. {
  19. fill: stroke,
  20. d: 'M212.992 526.336 212.992 526.336 212.992 526.336 215.04 526.336 212.992 526.336Z'
  21. }
  22. ),
  23. h(
  24. 'path',
  25. {
  26. fill: stroke,
  27. d: 'M724.992 296.96 724.992 296.96 296.96 296.96 296.96 724.992 724.992 724.992 724.992 296.96Z'
  28. }
  29. )
  30. );
  31. }
  32. getShape() {
  33. const { model } = this.props
  34. const { x, y, r } = model
  35. const { fill, stroke, strokeWidth } = model.getNodeStyle()
  36. return h('g', {}, [h('circle', { cx: x, cy: y, r, fill, stroke, strokeWidth }), this.getIconShape()]);
  37. }
  38. }
  39. class EndNodeModel extends CircleNodeModel {
  40. initNodeData(data) {
  41. data.text = {
  42. value: (data.text && data.text.value) || '',
  43. x: data.x,
  44. y: data.y + 35
  45. }
  46. super.initNodeData(data)
  47. this.r = 20
  48. }
  49. // 自定义锚点样式
  50. getAnchorStyle() {
  51. const style = super.getAnchorStyle()
  52. style.hover.r = 8
  53. style.hover.fill = 'rgb(24, 125, 255)'
  54. style.hover.stroke = 'rgb(24, 125, 255)'
  55. return style
  56. }
  57. // 自定义节点outline
  58. getOutlineStyle() {
  59. const style = super.getOutlineStyle()
  60. style.stroke = '#88f'
  61. return style
  62. }
  63. getConnectedSourceRules() {
  64. const rules = super.getConnectedSourceRules()
  65. const notAsTarget = {
  66. message: '终止节点不能作为连线的起点',
  67. validate: () => false
  68. }
  69. rules.push(notAsTarget)
  70. return rules
  71. }
  72. }
  73. export default {
  74. type: 'end-node',
  75. view: EndNode,
  76. model: EndNodeModel
  77. }