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
99
100
101
102
| import { RectNode, RectNodeModel, h } from '@logicflow/core';
|
| class AssemblyNodeView 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: 'M0 0v1024h1024V0H0z m943.157895 296.421053v646.736842H80.842105V80.842105h862.31579v215.578948z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M512 404.210526m-161.684211 0a161.684211 161.684211 0 1 0 323.368422 0 161.684211 161.684211 0 1 0-323.368422 0Z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M323.368421 808.421053h377.263158v-161.684211h53.894737v-215.578947h-53.894737v161.68421H323.368421v-161.68421h-53.894737v215.578947h53.894737z',
| }),
| ],
| );
| }
| 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 AssemblyNodeModel 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: 'AssemblyNode',
| view: AssemblyNodeView,
| model: AssemblyNodeModel,
| };
|
|
