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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| import { RectNode, RectNodeModel, h } from '@logicflow/core';
|
| class CollectNodeView extends RectNode {
| getLabelShape() {
| const { model } = this.props;
| const { x, y, width, height } = model;
| const style = model.getNodeStyle();
| return h(
| 'svg',
| {
| x: x - width / 2 + 5,
| y: y - height / 2 + 5,
| width: 25,
| height: 25,
| viewBox: '0 0 1274 1024',
| },
| [
| h('path', {
| fill: style.stroke,
| d: 'M853.1 916.4H167.6c-34.9 0-63.3-28.4-63.3-63.3V167.6c0-34.9 28.4-63.3 63.3-63.3h685.5c34.9 0 63.3 28.4 63.3 63.3v685.5c0 34.9-28.4 63.3-63.3 63.3z m-685.5-772c-12.8 0-23.3 10.4-23.3 23.3v685.5c0 12.8 10.4 23.3 23.3 23.3h685.5c12.8 0 23.3-10.4 23.3-23.3V167.6c0-12.8-10.4-23.3-23.3-23.3H167.6z',
| }),
| // h('path', {
| // fill: style.stroke,
| // d: 'M512.31992 1.535616c-282.766642 0-512.021328 228.89211-512.021328 511.210864 0 282.46805 229.254686 511.25352 512.021328 511.25352 117.431975 0 228.828126-39.606098 318.810964-111.204199 10.791969-8.488545 12.540865-24.22861 3.988336-34.99925-8.616513-10.770641-24.356578-12.540865-35.127218-3.94568-81.174373 64.538532-181.586603 100.241606-287.650754 100.241606-255.210864 0-462.028493-206.561693-462.028493-461.367325 0-254.762976 206.817629-461.303341 462.028493-461.303341 255.210864 0 462.092477 206.561693 462.092477 461.303341 0 87.380821-24.33525 171.093227-69.614596 243.651087-7.272848 11.645089-3.668416 27.086562 8.040657 34.35941 11.709073 7.272848 27.10789 3.62576 34.402066-7.976672 50.184787-80.406565 77.143381-173.247355 77.143381-270.055153C1024.383904 230.427726 795.10789 1.535616 512.31992 1.535616z',
| // }),
| ],
| );
| }
| override getShape() {
| const { model } = this.props;
| const { x, y, width, height, radius, properties } = model;
| const style = model.getNodeStyle();
| console.log(properties);
| return h('g', {}, [
| h('rect', {
| ...style,
| x: x - width / 2,
| y: y - height / 2,
| rx: radius,
| ry: radius,
| width,
| height,
| }),
| this.getLabelShape(),
| ]);
| }
| }
|
| class CollectNodeModel extends RectNodeModel {
| override setAttributes() {
| const size = this.properties.scale || 1;
| this.width = 100 * size;
| this.height = 80 * size;
| }
| override getTextStyle() {
| const style = super.getTextStyle();
| style.fontSize = 12;
| const properties = this.properties;
| style.color = properties.disabled ? 'red' : 'rgb(24, 125, 255)';
| return style;
| }
| override getNodeStyle() {
| const style = super.getNodeStyle();
| const properties = this.properties;
| if (properties.disabled) {
| style.stroke = 'red';
| } else {
| style.stroke = 'rgb(24, 125, 255)';
| }
| return style;
| }
| override getAnchorStyle() {
| const style = super.getAnchorStyle();
| style.stroke = 'rgb(24, 125, 255)';
| style.r = 3;
| style.hover.r = 8;
| style.hover.fill = 'rgb(24, 125, 255)';
| style.hover.stroke = 'rgb(24, 125, 255)';
| return style;
| }
| override getAnchorLineStyle() {
| const style = super.getAnchorLineStyle();
| style.stroke = 'rgb(24, 125, 255)';
| return style;
| }
| // override getOutlineStyle() {
| // const style = super.getOutlineStyle();
| // style.stroke = 'red';
| // style.hover.stroke = 'red';
| // return style;
| // }
| }
|
| export default {
| type: 'CollectNode',
| view: CollectNodeView,
| model: CollectNodeModel,
| };
|
|
