1.自定义节点
const ports = {}
const textWrap = { width: -10, // 宽度减少 10px height: '70%', // 高度为参照元素高度的一半 ellipsis: true, // 文本超出显示范围时，自动添加省略号 breakWord: true, // 是否截断单词}
Graph.registerNode('flow-chart-title-rect', {
inherit: 'rect',
width: 83,
height: 50,
attrs: {
body: {
stroke: '#000',
strokeWidth: 1,
fill: '#fff',
rx: 5,
ry: 5
},
fo: {
refWidth: '100%',
refHeight: '100%'
},
foBody: {
xmlns: Dom.ns.xhtml,
className:'foBody1',
style: {
width: '100%',
height: '20px',
borderRadius: '5px 5px 0 0',
background: '#f2f2f2',
borderBottom: '1px solid #000'
}
},
image: {
'xlink:href': '',
height: 20,
x: 2,
},
title: {
text: '',
refX: 40,
refY: 6,
fontSize: 12,
textAnchor: 'middle'
},
texttitle: {
text: '',
fontSize: 12,
fill: 'rgba(0,0,0,1)',
textAnchor: 'middle',
},
text: {
text: '',
refY: 35,
fontSize: 12,
fill: 'rgba(0,0,0,0.6)',
textAnchor: 'middle',
textWrap:textWrap
},
date: {
text: '',
refX: 46,
refY: 52,
fontSize: 12,
fill: 'rgba(0,0,0,0.6)',
textAnchor: 'middle'
},
principal:{
text: '',
refX: 46,
refY: -12,
fontSize: 12,
fill: 'rgba(0,0,0,0.6)',
textAnchor: 'middle'
}
},
markup: [
{
tagName: 'rect',
selector: 'body'
},
// {
// tagName: 'rect',
// selector: 'head'
// },
{
tagName: 'foreignObject',
selector: 'fo',
children: [
{
ns: Dom.ns.xhtml,
tagName: 'body',
selector: 'foBody',
}
]
},
{
tagName: 'image',
selector: 'image'
},
{
tagName: 'text',
selector: 'title'
},
{
tagName: 'text',
selector: 'text'
},
{
tagName: 'title',
selector: 'texttitle'
},
{
tagName: 'text',
selector: 'date'
},
{
tagName: 'text',
selector: 'principal'
}
],
tools: tools ,
ports: { ...ports },
})
2 主要代码
texttitle: {
text: '',
fontSize: 12,
fill: 'rgba(0,0,0,1)',
textAnchor: 'middle',
},
text: {
text: '',
refY: 35,
fontSize: 12,
fill: 'rgba(0,0,0,0.6)',
textAnchor: 'middle',
textWrap:textWrap
},
{
tagName: 'text',
selector: 'text'
},
{
tagName: 'title',
selector: 'texttitle'
},
3.更改当前展示的值以及title
graph.on('cell:change:data', ({ cell, options }) => {
cell.attr('text/text', cell.data.value);
cell.attr('texttitle/text', cell.data.value);
})
