import { Dom, Graph, Node } from '@antv/x6'
import {
conveyor,
direction,
one_track,
pallet,
rgv,
stacker,
storage,
two_track
} from './images'
import { basicPorts, customPorts } from './ports'
export const SRM = Graph.registerNode('SRM', {
inherit: 'image',
width: 40,
height: 40,
attrs: {
image: {
'xlink:href': stacker,
height: 40,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
imagePallet: {
'xlink:href': pallet,
height: 40,
width: 40,
class: 'hide-pallet',
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
body: {
// stroke: '#5F95FF',
stroke: '#FF0000',
strokeWidth: 3,
fill: 'rgba(95,149,255,0.0001)',
// fill: 'rgba(255,0,0,1)',
height: 0,
width: 0,
class: 'flash-shrink-animation-close'
},
textCode: {
class: 'animate-text1',
text: '',
fontSize: 8,
fill: '#000000',
stroke: '#000000',
strokeWidth: 1,
x: 0,
y: -5
}
// text: {
// stroke: '#FF0000',
// strokeWidth: 1,
// class: 'animate-text1',
// text: '堆垛机',
// fontSize: 12,
// fill: '#FF0000',
// fillOpacity: 0.8,
// background: {
// fill: '#FFFF00',
// }
// }
},
markup: [
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'image',
selector: 'imagePallet'
},
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'textCode'
}
]
})
export const RGV = Graph.registerNode('RGV', {
inherit: 'image',
width: 40,
height: 40,
attrs: {
image: {
'xlink:href': rgv,
height: 40,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
imagePallet: {
'xlink:href': pallet,
height: 40,
width: 40,
class: 'hide-pallet',
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
body: {
stroke: '#FF0000',
strokeWidth: 3,
fill: 'rgba(95,149,255,0.0001)',
height: 0,
width: 0,
class: 'flash-shrink-animation-close'
},
textCode: {
class: 'animate-text1',
text: '',
fontSize: 8,
fill: '#000000',
stroke: '#000000',
strokeWidth: 1,
x: 5,
y: 20
}
},
markup: [
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'image',
selector: 'imagePallet'
},
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'textCode'
}
]
})
export const Station = Graph.registerNode('Station', {
inherit: 'image',
width: 60,
height: 60,
attrs: {
image: {
'xlink:href': conveyor,
height: 60,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
imagePallet: {
'xlink:href': pallet,
height: 40,
width: 40,
class: 'hide-pallet',
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
body: {
stroke: '#FF0000',
strokeWidth: 3,
fill: 'rgba(95,149,255,0.0001)',
height: 0,
width: 0,
class: 'flash-shrink-animation-close'
},
text: {
class: 'animate-text1',
fontSize: 12,
// fill: '#5F95FF',
// fill: '#0000FF',
fill: '#5F95FF'
},
textCode: {
class: 'animate-text1',
text: '',
fontSize: 8,
fill: '#000000',
stroke: '#000000',
strokeWidth: 1,
x: 15,
y: 20
}
},
markup: [
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'image',
selector: 'imagePallet'
},
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'rect',
selector: 'textBackground'
},
{
tagName: 'text',
selector: 'text'
},
{
tagName: 'text',
selector: 'textCode'
}
]
})
export const Station_D = Graph.registerNode('Station-D', {
inherit: 'image',
width: 60,
height: 60,
attrs: {
image: {
'xlink:href': direction,
height: 60,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
imagePallet: {
'xlink:href': pallet,
height: 40,
width: 40,
class: 'hide-pallet',
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
body: {
stroke: '#FF0000',
strokeWidth: 3,
fill: 'rgba(95,149,255,0.0001)',
height: 0,
width: 0,
class: 'flash-shrink-animation-close'
},
text: {
class: 'animate-text1',
text: '',
fontSize: 12,
// fill: '#5F95FF',
// fill: '#0000FF',
fill: '#5F95FF'
},
textCode: {
class: 'animate-text1',
text: '',
fontSize: 8,
fill: '#000000',
stroke: '#000000',
strokeWidth: 1,
x: 2,
y: 20
}
},
markup: [
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'image',
selector: 'imagePallet'
},
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'text'
},
{
tagName: 'text',
selector: 'textCode'
}
]
})
export const Storage = Graph.registerNode('Storage', {
inherit: 'image',
width: 60,
height: 60,
attrs: {
image: {
'xlink:href': storage,
height: 60,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
},
body: {
stroke: '#5F95FF',
strokeWidth: 1,
fill: 'rgba(95,149,255,0.05)',
height: 30,
width: 30
},
text: {
class: 'animate-text1',
text: '1',
fontSize: 12,
fill: '#5F95FF'
// fill: '#0000FF',
}
},
markup: [
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'text'
}
]
})
export const OneTrack = Graph.registerNode('OneTrack', {
inherit: 'image',
width: 40,
height: 40,
attrs: {
image: {
'xlink:href': one_track,
height: 40,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
}
},
markup: [
{
tagName: 'image',
selector: 'image'
}
]
})
export const TwoTrack = Graph.registerNode('TwoTrack', {
inherit: 'image',
width: 40,
height: 40,
attrs: {
image: {
'xlink:href': two_track,
height: 40,
x: 0,
y: 0,
preserveAspectRatio: 'none',
'vector-effect': 'non-scaling-stroke'
}
},
markup: [
{
tagName: 'image',
selector: 'image'
}
]
})
// 基础节点
export const FlowChartRect = Graph.registerNode('flow-chart-rect', {
inherit: 'rect',
width: 80,
height: 42,
attrs: {
body: {
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#ffffff'
},
fo: {
refWidth: '100%',
refHeight: '100%'
},
foBody: {
xmlns: Dom.ns.xhtml,
style: {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
},
'edit-text': {
contenteditable: 'true',
class: 'x6-edit-text',
style: {
width: '100%',
textAlign: 'center',
fontSize: 12,
color: 'rgba(0,0,0,0.85)'
}
},
text: {
fontSize: 12,
fill: '#080808'
}
},
markup: [
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'text'
}
// 不让双击编辑文本
// {
// tagName: 'foreignObject',
// selector: 'fo',
// children: [
// {
// ns: Dom.ns.xhtml,
// tagName: 'body',
// selector: 'foBody',
// children: [
// {
// tagName: 'div',
// selector: 'edit-text'
// }
// ]
// }
// ]
// }
],
ports: { ...basicPorts }
})
// 组合节点
export const FlowChartImageRect = Graph.registerNode('flow-chart-image-rect', {
inherit: 'rect',
width: 200,
height: 60,
attrs: {
body: {
stroke: '#5F95FF',
strokeWidth: 1,
fill: 'rgba(95,149,255,0.05)'
},
image: {
'xlink:href':
'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
width: 16,
height: 16,
x: 12,
y: 12
},
title: {
text: 'Node',
refX: 40,
refY: 14,
fill: 'rgba(0,0,0,0.85)',
fontSize: 12,
'text-anchor': 'start'
},
text: {
text: 'this is content text',
refX: 40,
refY: 38,
fontSize: 12,
fill: 'rgba(0,0,0,0.6)',
'text-anchor': 'start'
}
},
markup: [
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'text',
selector: 'title'
},
{
tagName: 'text',
selector: 'text'
}
],
ports: { ...basicPorts }
})
export const FlowChartTitleRect = Graph.registerNode('flow-chart-title-rect', {
inherit: 'rect',
width: 200,
height: 68,
attrs: {
body: {
stroke: '#5F95FF',
strokeWidth: 1,
fill: 'rgba(95,149,255,0.05)'
},
head: {
refWidth: '100%',
stroke: 'transparent',
height: 28,
fill: 'rgb(95,149,255)'
},
image: {
'xlink:href':
'data:image/png;base64,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',
height: 16,
x: 6,
y: 6
},
title: {
text: 'Node',
refX: 30,
refY: 9,
fill: '#ffffff',
fontSize: 12,
'text-anchor': 'start'
},
text: {
text: 'this is content text',
refX: 8,
refY: 45,
fontSize: 12,
fill: 'rgba(0,0,0,0.6)',
'text-anchor': 'start'
}
},
markup: [
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'rect',
selector: 'head'
},
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'text',
selector: 'title'
},
{
tagName: 'text',
selector: 'text'
}
],
ports: { ...basicPorts }
})
export const FlowChartAnimateText = Graph.registerNode(
'flow-chart-animate-text',
{
inherit: 'rect',
width: 200,
height: 60,
attrs: {
body: {
stroke: '#5F95FF',
strokeWidth: 1,
fill: 'rgba(95,149,255,0.05)'
},
text1: {
class: 'animate-text1',
text: '|||||||||||||',
fontSize: 50,
fill: '#5F95FF'
}
// text2: {
// class: 'animate-text2',
// text: 'AntV X6',
// fontSize: 32
// }
},
markup: [
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'text1'
}
// {
// tagName: 'text',
// selector: 'text2'
// }
]
}
)
// 自定义 系统设计图
export const FlowChartImageRectCustom = Graph.registerNode(
'flow-chart-image-rect-custom',
{
inherit: 'rect',
width: 80,
height: 80,
markup: [
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'image'
},
{
tagName: 'text',
selector: 'label'
}
],
attrs: {
body: {
// 节点线的颜色
stroke: 'transparent',
// 背景填充色
fill: 'transparent'
},
// 自定义图片
image: {
width: 60,
height: 60,
refX: 0,
refY: 0
},
label: {
refX: 3,
refY: 2,
textAnchor: 'left',
textVerticalAnchor: 'top',
fontSize: 12,
fill: 'black'
},
'edit-text': {
contenteditable: 'true',
class: 'x6-edit-text',
style: {
width: '100%',
textAlign: 'center',
fontSize: 12,
color: 'rgba(0,0,0,0.85)'
}
},
text: {
fontSize: 12,
fill: '#080808'
}
},
ports: { ...customPorts }
}
)
// 节点组
export class NodeGroup extends Node {
collapsed = true;
postprocess() {
this.toggleCollapse(true)
}
isCollapsed() {
return this.collapsed
}
toggleCollapse(collapsed) {
const target = collapsed == null ? !this.collapsed : collapsed
if (target) {
this.attr('buttonSign', { d: 'M 1 5 9 5 M 5 1 5 9' })
this.resize(200, 40)
} else {
this.attr('buttonSign', { d: 'M 2 5 8 5' })
this.resize(240, 240)
}
this.collapsed = target
}
}
NodeGroup.config({
shape: 'rect',
markup: [
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'text',
selector: 'text'
},
{
tagName: 'g',
selector: 'buttonGroup',
children: [
{
tagName: 'rect',
selector: 'button',
attrs: {
'pointer-events': 'visiblePainted'
}
},
{
tagName: 'path',
selector: 'buttonSign',
attrs: {
fill: 'none',
'pointer-events': 'none'
}
}
]
}
],
attrs: {
body: {
refWidth: '100%',
refHeight: '100%',
strokeWidth: 1,
fill: 'rgba(95,149,255,0.05)',
stroke: '#5F95FF'
},
image: {
'xlink:href':
'https://gw.alipayobjects.com/mdn/rms_0b51a4/afts/img/A*X4e0TrDsEiIAAAAAAAAAAAAAARQnAQ',
width: 16,
height: 16,
x: 8,
y: 12
},
text: {
fontSize: 12,
fill: 'rgba(0,0,0,0.85)',
refX: 30,
refY: 15
},
buttonGroup: {
refX: '100%',
refX2: -25,
refY: 13
},
button: {
height: 14,
width: 16,
rx: 2,
ry: 2,
fill: '#f5f5f5',
stroke: '#ccc',
cursor: 'pointer',
event: 'node:collapse'
},
buttonSign: {
refX: 3,
refY: 2,
stroke: '#808080'
}
}
})
Graph.registerNode('groupNode', NodeGroup)