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
103
104
105
106
| import { RectNode, RectNodeModel, h } from '@logicflow/core';
|
| class RepairNodeView 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: 'M348.397779 723.674912l237.778899-237.7789a142.66734 142.66734 0 0 0 129.744574-38.768299 136.981323 136.981323 0 0 0 39.80212-78.053508c4.652196-28.430086-13.956588-38.768299-29.463907-23.260979l-28.430086 28.430085a77.536598 77.536598 0 0 1-109.585058-109.585058s12.922766-12.405856 28.430086-28.430085 5.169107-34.116103-23.260979-29.463908a136.981323 136.981323 0 0 0-76.502777 37.217567 142.66734 142.66734 0 0 0-38.768299 129.744574l-237.778899 237.778899A77.536598 77.536598 0 1 0 348.397779 723.674912z m-72.884402-75.985866a25.845533 25.845533 0 1 1 36.700656 36.700656 25.845533 25.845533 0 0 1-36.700656-36.700656z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M286.368501 347.880868l89.425542 89.942454 36.183746-36.700657-89.425543-89.425542-19.642604-38.251389-64.096921-46.005047-36.700656 36.700656 45.488137 64.096921 38.768299 19.642604zM585.659768 538.103988a12.405856 12.405856 0 0 0-18.091873 0l-54.792529 54.792529a12.405856 12.405856 0 0 0 0 18.091873l129.227663 129.227662a51.691065 51.691065 0 0 0 72.884402-72.884401zM964.555275 562.915699a230.54215 230.54215 0 1 0 230.542151 230.542151 230.54215 230.54215 0 0 0-230.542151-230.542151z m0 383.547703a155.073195 155.073195 0 1 1 155.073195-155.073195 155.073195 155.073195 0 0 1-155.073195 155.073195z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M1017.797072 714.887431l-74.435134 74.952044-32.04846-32.04846a38.768299 38.768299 0 0 0-54.792529 54.792529l59.444725 59.444725a38.768299 38.768299 0 0 0 54.792529 0l103.38213-103.382131a38.251388 38.251388 0 0 0 0-54.792529 38.768299 38.768299 0 0 0-56.343261 1.033822z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M686.974255 930.439172H142.150429a64.613831 64.613831 0 0 1-64.613831-64.613831v-723.674912A64.613831 64.613831 0 0 1 142.150429 77.536598h723.674912A64.613831 64.613831 0 0 1 930.439172 142.150429v331.339727a38.768299 38.768299 0 0 0 77.536598 0V142.150429A142.150429 142.150429 0 0 0 865.825341 0h-723.674912A142.150429 142.150429 0 0 0 0 142.150429v723.674912a142.150429 142.150429 0 0 0 142.150429 142.150429h544.823826a38.768299 38.768299 0 0 0 0-77.536598z',
| }),
| ],
| );
| }
| 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 RepairNodeModel 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: 'RepairNode',
| view: RepairNodeView,
| model: RepairNodeModel,
| };
|
|
