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;
相关推荐
blackorbird2 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者3 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强3 小时前
Chrome和IE获取本机ip地址
前端
天***88963 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*3 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v3 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls3 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友3 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵4 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda4 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#