首页 前端知识 antv/x6 自定义html节点并且支持动态更新节点内容

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

2024-05-14 22:05:01 前端知识 前端哥 562 458 我要收藏

antv/x6 自定义html节点

    • 效果图
    • 定义一个连接桩公共方法
    • 注册图形节点
    • 创建html节点
    • 动态更新节点内容

效果图

在这里插入图片描述

定义一个连接桩公共方法

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

创建html节点

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

动态更新节点内容

let cell = this.graph.getCellById(id)
cell.prop('data/label', '文字')
cell.prop('data/props/voice', 'desc')
  • id 是要更改内容的cell的id;
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8593.html
标签
评论
发布的文章

JSON简介

2024-09-30 23:09:25

Node.js和npm的安装及配置

2024-09-30 23:09:02

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!