antv/x6 自定义html节点并且支持动态更新节点内容

antv/x6 自定义html节点

效果图

定义一个连接桩公共方法

javascript 复制代码
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',
    },
  ],
}

注册图形节点

javascript 复制代码
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'
       }
     ]
   },
 })
  1. effect 是当前节点的 prop 数组,当 effect 包含的 prop 有变动时,会重新执行 html 方法,返回新的 dom,更新节点内容;
  2. ports 是此节点的连接桩;此节点只用到了左右两个连接桩;

创建html节点

javascript 复制代码
const r2 = this.graph.createNode({
 shape: 'html',
  data: {
    props:{
      desc: ''
    },
    label: '自定义html',
  },
})
  1. shape 要和注册节点里的名称一致;

动态更新节点内容

javascript 复制代码
let cell = this.graph.getCellById(id)
cell.prop('data/label', '文字')
cell.prop('data/props/voice', 'desc')
  • id 是要更改内容的cell的id;
相关推荐
小镇程序员15 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐17 分钟前
前端图像处理(一)
前端
程序猿阿伟24 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒26 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪34 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背37 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5