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 SpecPackingNodeView 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: 'M26.88 741.12V261.632c6.4-5.12 12.032-11.264 18.944-15.104 120.576-66.56 241.664-133.12 362.24-199.424 12.544-6.912 24.832-14.336 37.12-21.248h15.104c45.312 25.344 90.624 50.688 135.936 75.776 86.528 47.872 172.8 95.488 259.584 142.848 16.64 9.216 23.808 20.224 23.552 40.448-1.28 83.712-0.512 167.424-0.512 250.88v57.856c22.016 4.608 42.496 2.816 61.184 9.472 33.536 12.288 49.92 40.96 60.672 73.216v239.616c-12.032 43.776-39.936 71.68-83.712 83.712h-239.616c-40.704-13.056-70.656-37.376-80.896-83.2-46.848 28.672-91.392 55.808-135.936 83.2H445.44c-1.792-1.536-3.584-3.328-5.632-4.608-131.328-78.848-262.912-157.44-393.984-236.544-7.168-4.352-12.8-11.52-18.944-17.408zM69.12 306.432c-0.512 4.864-1.28 7.936-1.28 10.752 0 131.84-0.256 263.68 0.512 395.52 0 6.4 6.144 15.104 11.776 18.432 113.152 68.608 226.816 136.704 340.48 204.544 3.328 2.048 7.424 3.072 12.544 5.12 0-136.96 0.256-271.872-0.512-407.04 0-5.888-7.424-14.08-13.312-17.664-111.616-67.584-223.488-134.656-335.36-201.728-4.608-2.304-8.96-4.608-14.848-7.936z m403.968 637.184c38.144-22.784 72.448-44.032 107.264-64 10.752-6.144 14.848-12.8 14.848-25.344-0.768-50.688-0.512-101.376-0.256-152.064 0.256-65.536 42.752-108.032 108.544-108.288 38.656-0.256 77.312 0 115.968 0 6.144 0 12.032-0.512 17.408-0.768V306.688c-30.208 18.176-58.368 35.328-86.784 51.456-9.472 5.376-13.056 11.52-12.8 22.528 0.768 34.304 0.256 68.352 0.256 102.656 0 15.36-5.632 25.6-20.736 32.512-35.072 16.128-69.12 34.56-103.68 51.456-26.368 12.8-38.144 5.376-38.4-23.552v-79.872c-32 19.2-60.672 36.608-89.6 53.248-9.728 5.632-12.544 12.288-12.288 22.784 0.512 34.304 0.256 68.352 0.256 102.656v301.056z m487.168-146.688c0-32.256 0.256-64.768 0-97.024-0.512-40.96-24.576-65.28-64.768-65.536-65.28-0.256-130.56-0.256-195.84 0-38.144 0.256-63.488 25.344-63.488 63.232-0.256 65.792-0.256 131.84 0 197.632 0.256 38.144 24.832 63.232 63.232 63.488 65.792 0.512 131.84 0.512 197.632 0 38.656-0.256 62.976-24.32 63.488-62.976 0-32.768-0.256-65.792-0.256-98.816zM89.344 268.288c120.32 72.96 238.336 144.384 356.352 215.552 3.584 2.048 10.24 2.816 13.824 0.768 32-18.432 63.488-37.632 97.28-57.856-115.456-73.984-228.352-146.432-341.504-218.368-3.584-2.304-11.008-2.048-15.104 0-36.608 19.456-72.704 39.168-110.848 59.904z m589.312 84.736c-2.56-2.816-3.328-4.352-4.864-5.376-109.568-69.632-219.392-139.008-329.216-208.128-4.096-2.56-11.52-4.096-15.36-2.048-26.112 13.568-51.968 28.16-78.592 42.752 2.304 2.816 3.328 4.352 4.608 5.376 110.336 70.912 220.672 141.568 331.264 211.968 3.84 2.56 11.264 3.328 15.104 1.28 25.856-14.336 50.944-29.952 77.056-45.824zM375.808 110.592c114.176 71.936 225.536 142.08 337.152 211.968 3.584 2.304 10.24 3.328 13.568 1.536 29.952-17.152 59.136-35.328 89.088-53.248-2.304-3.072-2.816-4.352-3.584-4.864-116.48-64-233.216-128-349.952-191.744-3.84-2.048-10.496-3.84-13.824-2.048-23.808 11.776-46.848 24.576-72.448 38.4z m320.768 280.576c-26.624 15.872-50.176 29.44-73.216 43.52-3.328 2.048-7.168 6.4-7.168 9.728-0.512 24.32-0.256 48.64-0.256 76.288 26.624-13.312 50.176-24.832 73.472-37.12 3.584-1.792 6.912-7.424 6.912-11.52 0.512-25.6 0.256-51.456 0.256-80.896z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M391.68 777.216c0 18.944 0.768 38.144-0.256 57.088-1.024 22.016-15.36 29.696-33.536 18.176-38.4-24.576-76.544-49.664-113.664-76.288-7.68-5.632-13.824-18.176-14.336-27.904-1.792-34.048-1.28-68.352-0.256-102.656 1.024-32.512 13.568-39.424 40.448-22.016 36.096 23.296 72.192 47.104 107.264 72.192 7.424 5.376 12.8 16.896 13.824 26.368 2.304 17.92 0.768 36.608 0.512 55.04 0.256 0 0 0 0 0z m-40.448 22.784c0-24.32 0.256-44.544-0.256-64.512-0.256-4.352-2.56-10.24-5.888-12.8-23.552-16.384-47.872-32.256-74.752-50.176 0 24.832-0.256 46.08 0.256 67.328 0 3.584 3.328 8.192 6.4 10.24 23.552 16.128 47.104 31.744 74.24 49.92zM777.472 776.192v-73.216c0-14.592 3.072-27.648 20.992-27.392 16.64 0.256 19.968 12.544 19.968 26.624-0.256 63.232-0.256 126.464 0 189.696 0 14.848-4.864 26.112-20.736 25.856-15.872-0.256-20.48-12.288-20.224-26.624 0.256-24.064 0-47.872 0-74.496-25.088 0-48.896-0.256-72.704 0-14.848 0.256-27.904-2.816-27.648-20.48 0-17.92 13.568-20.48 28.16-20.224 23.04 0.512 46.336 0.256 72.192 0.256z',
| }),
| h('path', {
| fill: style.stroke,
| d: 'M744.96 918.528h-55.808c-7.168 0-12.8-5.888-12.8-12.8v-54.016c0-7.168 5.888-12.8 12.8-12.8H744.96c7.168 0 12.8 5.888 12.8 12.8v54.016c0 7.168-5.632 12.8-12.8 12.8zM905.728 755.2h-54.272c-7.168 0-12.8-5.888-12.8-12.8v-54.272c0-7.168 5.888-12.8 12.8-12.8h54.272c7.168 0 12.8 5.888 12.8 12.8V742.4c0 6.912-5.888 12.8-12.8 12.8zM903.424 817.92h-50.432c-7.424 0-13.568-6.144-13.568-13.568v-13.056c0-7.424 6.144-13.568 13.568-13.568h50.432c7.424 0 13.568 6.144 13.568 13.568v13.056c0 7.424-6.144 13.568-13.568 13.568zM918.528 858.88c0-11.008-8.96-19.968-19.968-19.968s-19.968 8.96-19.968 19.968v22.784h-22.784c-9.472 0-17.152 7.68-17.152 17.152v2.048c0 9.472 7.68 17.152 17.152 17.152h45.824c9.472 0 17.152-7.68 17.152-17.152v-2.048c0-0.512 0-1.024-0.256-1.536 0-0.512 0.256-1.024 0.256-1.536v-36.864zM677.12 734.208c0 11.008 8.96 19.968 19.968 19.968s19.968-8.96 19.968-19.968v-22.784h22.784c9.472 0 17.152-7.68 17.152-17.152v-2.048c0-9.472-7.68-17.152-17.152-17.152h-45.824c-9.472 0-17.152 7.68-17.152 17.152v2.048c0 0.512 0 1.024 0.256 1.536 0 0.512-0.256 1.024-0.256 1.536l0.256 36.864z',
| }),
| ],
| );
| }
| 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 SpecPackingNodeModel extends RectNodeModel {
| override setAttributes() {
| const size = this.properties.scale || 1;
| this.width = 110 * size;
| this.height = 80 * size;
| }
| override getTextStyle() {
| const style = super.getTextStyle();
| style.fontSize = 12;
| const properties = this.properties;
| style.color = properties.disabled ? 'red' : 'rgb(221, 133, 32)';
| return style;
| }
| override getNodeStyle() {
| const style = super.getNodeStyle();
| const properties = this.properties;
| if (properties.disabled) {
| style.stroke = 'red';
| } else {
| style.stroke = 'rgb(221, 133, 32)';
| }
| return style;
| }
| override getAnchorStyle() {
| const style = super.getAnchorStyle();
| style.stroke = 'rgb(221, 133, 32)';
| style.r = 3;
| style.hover.r = 8;
| style.hover.fill = 'rgb(221, 133, 32)';
| style.hover.stroke = 'rgb(221, 133, 32)';
| return style;
| }
| override getAnchorLineStyle() {
| const style = super.getAnchorLineStyle();
| style.stroke = 'rgb(221, 133, 32)';
| return style;
| }
| // override getOutlineStyle() {
| // const style = super.getOutlineStyle();
| // style.stroke = 'red';
| // style.hover.stroke = 'red';
| // return style;
| // }
| }
|
| export default {
| type: 'SpecPackingNode',
| view: SpecPackingNodeView,
| model: SpecPackingNodeModel,
| };
|
|
