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 { PolygonNode, PolygonNodeModel, h } from "@logicflow/core";
|
| class UserNode extends PolygonNode {
| getIconShape() {
| const { model } = this.props
| const { stroke } = model.getNodeStyle()
| return h(
| 'svg',
| {
| x: 20,
| y: 18,
| width: 30,
| height: 30,
| viewBox: '0 0 1126 1024'
| },
| h(
| 'path',
| {
| fill: stroke,
| d: 'M792.576 379.392a25.6 25.6 0 0 0 25.2928 25.8048h283.2384A25.6 25.6 0 0 0 1126.4 379.392a25.6 25.6 0 0 0-25.2928-25.8048h-283.2384a25.6 25.6 0 0 0-25.344 25.8048z m303.9232 80.7424H761.856c-16.5376 0-29.9008 11.6224-29.9008 25.7536 0 14.1824 13.312 25.7536 29.9008 25.7536h334.6432c16.4864 0 29.9008-11.5712 29.9008-25.7536 0-14.1312-13.4144-25.7536-29.9008-25.7536z m4.608 106.496h-283.2384a25.6 25.6 0 0 0-25.344 25.7536 25.6 25.6 0 0 0 25.344 25.7536h283.2384A25.6 25.6 0 0 0 1126.4 592.384a25.6 25.6 0 0 0-25.2928-25.8048zM543.0272 1024H341.6576C150.8352 1024 0 1024 0 923.648v-20.1216c0-188.16 153.2928-341.1968 341.7088-341.1968h201.2672c188.416 0 341.76 153.0368 341.76 341.1968v20.0704C884.6848 1024 726.3232 1024 542.976 1024z m-203.1616-405.1456c-158.464 0-287.4368 128.4096-287.4368 286.208v20.48c0 40.9088 166.0928 40.9088 287.4368 40.9088h204.9536c100.4544 0 287.4368 0 287.4368-40.96v-20.3776c0-157.8496-128.9728-286.208-287.4368-286.208H339.8656z m92.416-76.7488a271.4112 271.4112 0 0 1-271.2064-271.0528A271.36 271.36 0 0 1 432.2816 0a271.36 271.36 0 0 1 271.2064 271.0528 271.4624 271.4624 0 0 1-271.2064 271.0528z m-215.3472-271.872c0 118.1696 96.6144 214.3232 215.3472 214.3232 118.784 0 215.3984-96.1536 215.3984-214.3232 0-118.2208-96.6144-214.3232-215.3984-214.3232S216.9344 152.0128 216.9344 270.2336z'
| }
| )
| )
| }
| getShape() {
| const { model } = this.props
| const { width, height, x, y, points } = model
| const { fill, fillOpacity, strokeWidth, stroke, strokeOpacity, } = model.getNodeStyle()
| const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
| const pointsPath = points.map(point => point.join(',')).join(' ')
| return h(
| 'g',
| {
| transform
| },
| [
| h(
| 'polygon',
| {
| points: pointsPath,
| fill,
| stroke,
| strokeWidth,
| strokeOpacity,
| fillOpacity
| }
| ),
| this.getIconShape()
| ]
| )
| }
| }
| class UserNodeModel extends PolygonNodeModel {
| constructor(data, graphModel) {
| data.text = {
| value: (data.text && data.text.value) || '',
| x: data.x,
| y: data.y + 50
| }
| super(data, graphModel)
| // 右键菜单自由配置，也可以通过边的properties或者其他属性条件更换不同菜单
| this.menu = [
| {
| className: 'lf-menu-delete',
| text: 'delete',
| callback(node) {
| // const comfirm = window.confirm('你确定要删除吗？')
| lf.deleteNode(node.id)
| }
| },
| {
| text: 'edit',
| className: 'lf-menu-item',
| callback(node) {
| lf.editText(node.id)
| }
| },
| {
| text: 'copy',
| className: 'lf-menu-item',
| callback(node) {
| lf.cloneNode(node.id)
| }
| }
| ]
| }
| initNodeData(data) {
| super.initNodeData(data)
| const lenght = 35
| this.points = [
| [lenght, 0],
| [lenght * 2, lenght],
| [lenght, lenght * 2],
| [0, lenght]
| ]
| }
| // 自定义锚点样式
| getAnchorStyle() {
| const style = super.getAnchorStyle();
| style.hover.r = 8;
| style.hover.fill = "rgb(24, 125, 255)";
| style.hover.stroke = "rgb(24, 125, 255)";
| return style;
| }
| }
| export default {
| type: 'user-node',
| view: UserNode,
| model: UserNodeModel
| }
|
|
