NodeStart.ts 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { CircleNode, CircleNodeModel, h } from "@logicflow/core";
  2. class StartNode extends CircleNode {
  3. getLabelShape() {
  4. const { model } = this.props;
  5. const { x, y } = model;
  6. return h('text', { fill: '#000000', fontSize: 12, x: x - 12, y: y + 4, width: 50, height: 25 }, 'Start');
  7. }
  8. getShape() {
  9. const { model } = this.props;
  10. const { x, y, r } = model;
  11. const { fill, stroke, strokeWidth } = model.getNodeStyle();
  12. return h('g', {}, [h('circle', { cx: x, cy: y, r, fill, stroke, strokeWidth }), this.getLabelShape()]);
  13. }
  14. }
  15. class StartModel extends CircleNodeModel {
  16. // 自定义节点形状属性
  17. initNodeData(data) {
  18. data.text = {
  19. value: (data.text && data.text.value) || '',
  20. x: data.x,
  21. y: data.y + 35,
  22. dragable: false,
  23. editable: true
  24. }
  25. super.initNodeData(data)
  26. this.r = 20
  27. }
  28. // 自定义节点样式属性
  29. getNodeStyle() {
  30. const style = super.getNodeStyle()
  31. return style
  32. }
  33. // 自定义锚点样式
  34. getAnchorStyle() {
  35. const style = super.getAnchorStyle()
  36. style.hover.r = 8
  37. style.hover.fill = 'rgb(24, 125, 255)'
  38. style.hover.stroke = 'rgb(24, 125, 255)'
  39. return style
  40. }
  41. // 自定义节点outline
  42. getOutlineStyle() {
  43. const style = super.getOutlineStyle()
  44. style.stroke = '#88f'
  45. return style
  46. }
  47. getConnectedTargetRules() {
  48. const rules = super.getConnectedTargetRules()
  49. const notAsTarget = {
  50. message: '起始节点不能作为连线的终点',
  51. validate: () => false
  52. }
  53. rules.push(notAsTarget)
  54. return rules
  55. }
  56. }
  57. export default {
  58. type: 'start-node',
  59. view: StartNode,
  60. model: StartModel
  61. }