coreMethods.js
6.46 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
import panzoom from 'panzoom'
import {tbType} from './tbType.js'
const coreMethods = {
init() {
this.jsPlumb.ready(() => {
// 导入默认配置
this.jsPlumb.importDefaults(this.jsPlumbSetting)
this.loadFlow()
this.initPanZoom()
// 会使整个jsPlumb立即重绘。
this.jsPlumb.setSuspendDrawing(false, true)
})
},
// 加载
loadFlow() {
if (!this.json || !this.json.nodes || this.json.nodes.length === 0) {
this.$message.error('json中nodes数组不能为空')
return
}
if (!this.json || !this.json.nodes) {
this.$message.error('json中edges数组不能是未定义')
return
}
// 初始化节点
this.json.nodes.forEach(node => {
this.jsPlumb.draggable(node.id, {
grid: this.commonGrid
})
const nodeType = node.type
node.columns.forEach(col => {
const colID = `${nodeType}${this.minus}${node.name}${this.minus}${col.name}`
const props = {tbName: node.name, column: col.name}
// 节点类型不同,添加端点的方向也不同.对于Origin/RS表来说 它们都只有一侧有端点.其他表都视为中间表两侧都有端点
if (nodeType === tbType['Origin'].type) {
this.addEndpoint(
colID,
['Right'],
{
isSource: true
},
props
)
} else if (nodeType === tbType['RS'].type) {
this.addEndpoint(
colID,
['Left'],
{
isTarget: true
},
props
)
} else {
this.addEndpoint(
colID,
['Right', 'Left'],
{
isSource: true,
isTarget: true
},
props
)
}
})
})
// 初始化连线
this.json.edges.forEach(edge => {
let fromFull =
tbType['Origin'].type +
this.minus +
edge.from.tbName +
this.minus +
edge.from.column +
this.minus +
'Right',
toFull =
tbType['RS'].type +
this.minus +
edge.to.tbName +
this.minus +
edge.to.column +
this.minus +
'Left'
this.connect(fromFull, toFull)
})
// 绑定click点击连线的事件,记录当前选中的连线
this.jsPlumb.bind('click', conn => {
if (!conn) {
return
}
if (this.currentConnect && this.currentConnect.id == conn.id) {
this.currentConnect = null
} else {
this.currentConnect = conn
}
})
},
// 获取连线对应的数据
getEdgeData() {
const edges = []
const connections = this.jsPlumb.getAllConnections()
if (connections && connections.length > 0) {
connections.forEach(conn => {
const [source, target] = conn.endpoints
const from = source.props
const to = target.props
edges.push({from, to})
})
}
return edges
},
addEndpoint(elID, AnchorArr, setting, props) {
//AnchorArr 可能有多个锚点需要添加
AnchorArr.forEach(anchor => {
const endpoint = this.jsPlumb.addEndpoint(
elID,
{
anchors: anchor,
uuid: elID + this.minus + anchor
},
Object.assign({}, this.jsPlumbSetting, setting)
)
endpoint.props = {...props}
})
},
connect(from, to) {
this.jsPlumb.connect(
{
uuids: [from, to]
},
this.jsPlumbSetting
)
},
initPanZoom() {
const mainContainer = this.jsPlumb.getContainer()
const mainContainerWrap = mainContainer.parentNode
const pan = panzoom(mainContainer, {
smoothScroll: false,
bounds: true,
// autocenter: true,
zoomDoubleClickSpeed: 1,
minZoom: 0.5,
maxZoom: 2,
//设置滚动缩放的组合键,默认不需要组合键
beforeWheel: e => {
// console.log(e)
// let shouldIgnore = !e.ctrlKey
// return shouldIgnore
},
beforeMouseDown: function(e) {
// allow mouse-down panning only if altKey is down. Otherwise - ignore
const isSVG = e.target.className.constructor != String
const shouldIgnore = e.ctrlKey
return shouldIgnore || isSVG
}
})
this.jsPlumb.mainContainerWrap = mainContainerWrap
this.jsPlumb.pan = pan
// 缩放时设置jsPlumb的缩放比率
pan.on('zoom', e => {
const {x, y, scale} = e.getTransform()
this.jsPlumb.setZoom(scale)
})
pan.on('panend', e => {
const {x, y, scale} = e.getTransform()
})
// 平移时设置鼠标样式
mainContainerWrap.style.cursor = 'grab'
mainContainerWrap.addEventListener('mousedown', function wrapMousedown() {
this.style.cursor = 'grabbing'
mainContainerWrap.addEventListener('mouseout', function wrapMouseout() {
this.style.cursor = 'grab'
})
})
mainContainerWrap.addEventListener('mouseup', function wrapMouseup() {
this.style.cursor = 'grab'
})
},
//初始化节点位置 (以便对齐,居中)
fixNodesPosition() {
if (this.json.nodes && this.$refs.flowWrap) {
const nodeWidth = 120
const nodeHeight = 40
let wrapInfo = this.$refs.flowWrap.getBoundingClientRect()
let maxLeft = 0,
minLeft = wrapInfo.width,
maxTop = 0,
minTop = wrapInfo.height
let nodePoint = {
left: 0,
right: 0,
top: 0,
bottom: 0
}
let fixTop = 0,
fixLeft = 0
this.json.nodes.forEach(el => {
let top = el.top
let left = el.left
maxLeft = left > maxLeft ? left : maxLeft
minLeft = left < minLeft ? left : minLeft
maxTop = top > maxTop ? top : maxTop
minTop = top < minTop ? top : minTop
})
nodePoint.left = minLeft
nodePoint.right = wrapInfo.width - maxLeft - nodeWidth
nodePoint.top = minTop
nodePoint.bottom = wrapInfo.height - maxTop - nodeHeight
fixTop =
nodePoint.top !== nodePoint.bottom
? (nodePoint.bottom - nodePoint.top) / 4
: 0
fixLeft =
nodePoint.left !== nodePoint.right
? (nodePoint.right - nodePoint.left) / 2
: 0
this.json.nodes.map(el => {
let top = Number(el.top) + fixTop
let left = Number(el.left) + fixLeft
el.top = Math.round(top / 20) * 20
el.left = Math.round(left / 20) * 20
})
}
}
}
export default coreMethods