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;
相关推荐
黎金安1 分钟前
前端第二次作业
前端·css·css3
啦啦右一2 分钟前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落7 分钟前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v34 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我35 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记1 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜1 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js