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