效果图
定义一个连接桩公共方法
const ports = {
groups: {
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#cf1322',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'visible',
},
},
},
},
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#389e0d',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'visible',
},
},
},
},
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#389e0d',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'visible',
},
},
},
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#cf1322',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'visible',
},
},
},
},
},
items: [
{
group: 'top',
},
{
group: 'right',
},
{
group: 'bottom',
},
{
group: 'left',
},
],
}
注册图形节点
Shape.HTML.register({
shape: 'html',
width: 70,
height: 36,
effect: ['data'],
html(cell) {
const { label, props } = cell.getData()
const div = document.createElement('div')
div.style.width = 70
const titleDiv = document.createElement('div')
titleDiv.style.width = '70px'
titleDiv.style.height = '36px'
titleDiv.style.background = '#eb2f96'
titleDiv.style.color = 'white'
titleDiv.style.fontSize = '14px'
titleDiv.style.textAlign = 'center'
titleDiv.style.lineHeight = '36px'
titleDiv.style.boxSizing = 'border-box'
titleDiv.style.fontSize = '12px'
titleDiv.style.borderRadius = '6px'
titleDiv.style.whiteSpace = 'nowrap'
titleDiv.style.overflow = 'hidden'
titleDiv.style.textOverflow = 'ellipsis'
titleDiv.setAttribute('title', label)
titleDiv.textContent = label
div.append(titleDiv)
return div
},
ports: {
...ports,
items: [
{
group: 'left'
},
{
group: 'right'
}
]
},
})
- effect 是当前节点的 prop 数组，当 effect 包含的 prop 有变动时，会重新执行 html 方法，返回新的 dom，更新节点内容；
- ports 是此节点的连接桩；此节点只用到了左右两个连接桩；
创建html节点
const r2 = this.graph.createNode({
shape: 'html',
data: {
props:{
desc: ''
},
label: '自定义html',
},
})
动态更新节点内容
let cell = this.graph.getCellById(id)
cell.prop('data/label', '文字')
cell.prop('data/props/voice', 'desc')
原文地址:https://blog.csdn.net/qq_35517283/article/details/134245959
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_38806.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
