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
107
108
109
110
| import { RectNode, RectNodeModel, h } from '@logicflow/core';
|
| class PackingNodeView 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: 'M511.998613 480.0017a30.293239 30.293239 0 0 1-13.013292-2.773325l-479.9985-213.332666A31.786567 31.786567 0 0 1 0.000213 234.669133a32.213233 32.213233 0 0 1 19.626606-29.439908l479.9985-202.666033a31.146569 31.146569 0 0 1 24.746589 0l479.9985 202.666033A32.213233 32.213233 0 0 1 1023.997013 234.669133a31.786567 31.786567 0 0 1-18.986607 29.439908l-479.9985 213.332667a30.293239 30.293239 0 0 1-13.013293 2.559992zM112.426529 234.669133L511.998613 413.015243 911.570698 234.669133 511.998613 66.776325z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M511.998613 1024a32.213233 32.213233 0 0 1-31.9999-31.9999V448.0018a31.9999 31.9999 0 0 1 18.986608-29.226575l479.9985-213.332667a32.213233 32.213233 0 0 1 30.506571 2.346659A31.786567 31.786567 0 0 1 1023.997013 234.669133v522.665034a31.786567 31.786567 0 0 1-17.919944 28.79991l-479.9985 234.665933A33.066563 33.066563 0 0 1 511.998613 1024z m31.9999-554.664933v471.465193L959.997213 737.280896V283.948979z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M511.998613 1024a32.213233 32.213233 0 0 1-31.9999-31.9999V448.0018a31.9999 31.9999 0 0 1 18.986608-29.226575l479.9985-213.332667a32.213233 32.213233 0 0 1 30.506571 2.346659A31.786567 31.786567 0 0 1 1023.997013 234.669133v522.665034a31.786567 31.786567 0 0 1-17.919944 28.79991l-479.9985 234.665933A33.066563 33.066563 0 0 1 511.998613 1024z m31.9999-554.664933v471.465193L959.997213 737.280896V283.948979z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M511.998613 1024a33.066563 33.066563 0 0 1-14.079956-3.19999l-479.9985-234.665933A32.213233 32.213233 0 0 1 0.000213 757.334167V234.669133a32.426565 32.426565 0 0 1 14.506622-26.879916 32.426565 32.426565 0 0 1 30.506571-2.346659l479.9985 213.332667A31.9999 31.9999 0 0 1 543.998513 448.0018v543.9983a31.573235 31.573235 0 0 1-14.933286 27.093249 32.426565 32.426565 0 0 1-17.066614 4.906651zM64.000013 737.280896l415.9987 203.519364V469.335067L64.000013 283.948979zM746.664547 373.335367a33.066563 33.066563 0 0 1-14.079956-3.19999l-447.9986-219.732647a31.9999 31.9999 0 0 1 28.159912-57.59982l447.9986 219.732647A31.9999 31.9999 0 0 1 746.664547 373.335367z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M330.665847 554.668133a33.066563 33.066563 0 0 1-14.079956-3.19999l-130.559592-63.9998a31.9999 31.9999 0 0 1-18.133277-28.79991v-149.332866a31.9999 31.9999 0 1 1 63.9998 0v129.279596L298.665947 471.468393v-104.106341a31.9999 31.9999 0 0 1 63.9998 0v155.306181a31.573235 31.573235 0 0 1-14.933287 27.093249 32.426565 32.426565 0 0 1-17.066613 4.906651zM415.998913 853.333867a31.9999 31.9999 0 0 1-14.293288-3.413323l-85.333067-42.666533a31.9999 31.9999 0 1 1 28.586577-57.173155l85.333067 42.666533a31.786567 31.786567 0 0 1 14.506621 42.666534 32.213233 32.213233 0 0 1-28.79991 17.919944zM725.33128 586.668033a53.333167 53.333167 0 0 1-23.893259-101.119684l85.333067-42.666533a53.333167 53.333167 0 1 1 47.786517 95.573035l-85.333066 42.666533a52.906501 52.906501 0 0 1-23.893259 5.546649z',
| }),
| ],
| );
| }
| 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 PackingNodeModel 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: 'PackingNode',
| view: PackingNodeView,
| model: PackingNodeModel,
| };
|
|
