149 lines
2.9 KiB
JavaScript
149 lines
2.9 KiB
JavaScript
import { Addon } from '@antv/x6';
|
|
// 拖拽生成四边形
|
|
export const startDragToGraph = (graph, data, e) => {
|
|
const node =
|
|
graph.createNode({
|
|
label: '圆角矩形',
|
|
data: {
|
|
type: 'defaultYSquare'
|
|
},
|
|
shape: 'rect',
|
|
width: 100, //节点的宽度
|
|
height: 60, //节点的高度
|
|
attrs: {
|
|
label: {
|
|
text: data.name,
|
|
workingProcedureId: data.id,
|
|
fill: '#FFFFFF',
|
|
fontSize: 14,
|
|
textWrap: {
|
|
width: -10,
|
|
height: -10,
|
|
ellipsis: true,
|
|
},
|
|
},
|
|
body: {
|
|
stroke: '#000000',
|
|
strokeWidth: 1,
|
|
fill: '#5bdeff',
|
|
rx: 10,
|
|
ry: 10,
|
|
}
|
|
},
|
|
})
|
|
const dnd = new Addon.Dnd({ target: graph })
|
|
dnd.start(node, e)
|
|
}
|
|
//下面是锚点的代码。 知道就行了 我就不一一写了。
|
|
export const ports = {
|
|
groups: {
|
|
// 输入链接桩群组定义
|
|
top: {
|
|
position: 'top',
|
|
attrs: {
|
|
circle: {
|
|
r: 4,
|
|
magnet: true,
|
|
stroke: '#2D8CF0',
|
|
strokeWidth: 2,
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
// 输出链接桩群组定义
|
|
bottom: {
|
|
position: 'bottom',
|
|
attrs: {
|
|
circle: {
|
|
r: 4,
|
|
magnet: true,
|
|
stroke: '#2D8CF0',
|
|
strokeWidth: 2,
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
left: {
|
|
position: 'left',
|
|
attrs: {
|
|
circle: {
|
|
r: 4,
|
|
magnet: true,
|
|
stroke: '#2D8CF0',
|
|
strokeWidth: 2,
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
right: {
|
|
position: 'right',
|
|
attrs: {
|
|
circle: {
|
|
r: 4,
|
|
magnet: true,
|
|
stroke: '#2D8CF0',
|
|
strokeWidth: 2,
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
items: [
|
|
{
|
|
id: 'port1',
|
|
group: 'top',
|
|
},
|
|
{
|
|
id: 'port2',
|
|
group: 'bottom',
|
|
},
|
|
{
|
|
id: 'port3',
|
|
group: 'left',
|
|
},
|
|
{
|
|
id: 'port4',
|
|
group: 'right',
|
|
}
|
|
],
|
|
}
|
|
|
|
|
|
// 连线 label 设置
|
|
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
|
|
if (!labelText) return { attrs: { labelText: { text: '' }, labelBody: { fill: '', stroke: '' } } }
|
|
return {
|
|
markup: [
|
|
{
|
|
tagName: 'rect',
|
|
selector: 'labelBody',
|
|
},
|
|
{
|
|
tagName: 'text',
|
|
selector: 'labelText',
|
|
},
|
|
],
|
|
attrs: {
|
|
labelText: {
|
|
text: labelText || '',
|
|
fill: fontColor || '#333',
|
|
textAnchor: 'middle',
|
|
textVerticalAnchor: 'middle',
|
|
},
|
|
labelBody: {
|
|
ref: 'labelText',
|
|
refX: -8,
|
|
refY: -5,
|
|
refWidth: '100%',
|
|
refHeight: '100%',
|
|
refWidth2: 16,
|
|
refHeight2: 10,
|
|
stroke: stroke || '#555',
|
|
fill: fill || '#fff',
|
|
strokeWidth: 2,
|
|
rx: 5,
|
|
ry: 5,
|
|
},
|
|
}
|
|
}
|
|
} |