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 TestNodeView 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: 'M500.443429 1019.611429L512 1024l11.629714-4.827429c18.797714-7.168 463.872-177.444571 463.872-433.883428V130.194286L512 0l-8.411429 2.706286C305.005714 56.685714 66.486857 121.417143 55.588571 126.098286l-19.017142 8.265143V585.874286c0 256.365714 445.074286 426.642286 463.872 433.737143zM99.986286 585.874286V177.005714h0.365714c65.097143-18.505143 267.776-73.289143 411.574857-112.420571l412.013714 112.64v408.868571c0 193.901714-344.210286 344.356571-412.013714 371.346286-68.096-27.794286-411.940571-177.298286-411.940571-371.565714z m456.411428 154.331428l0.146286 0.292572-0.292571 0.073143 0.219428-0.365715zM431.104 401.92l125.44 338.285714 123.538286-238.738285h140.8v-63.634286H640.365714L566.125714 581.339429 432.566857 221.037714 347.282286 437.833143H202.605714v63.634286h188.928l39.570286-99.547429z',
| }),
| // 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 TestNodeModel 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: 'TestNode',
| view: TestNodeView,
| model: TestNodeModel,
| };
|
|
