antv/x6使用经验

1、版本

@antv/x6的2个大版本写法和用法不太一样，这里是2.x

2、使用

2.x的版本各类插件和主类是分开的

import { Graph } from '@antv/x6'

//图形的基本信息
const shadowAttrs = {
  name: 'dropShadow',
  args: {
    dx: 3,
    dy: 4,
    blur: 20,
    color:  '#00a6ff62'
  }
}
const commonAttrs = {
  body: {
    stroke: "#18FEFE",
    strokeWidth: 1,
    fill: "#020d23",
    rx: 2,
    ry: 2,
    cursor: 'pointer',
    filter: shadowAttrs
  },
  label: {
    fill: '#fff',
    cursor: 'pointer',
    fontSize: 14,
    textWrap: {
      width: -10, // 宽度减少 10px
      height: '80%', // 高度为参照元素高度的一半
      ellipsis: true, // 文本超出显示范围时，自动添加省略号
      breakWord: true // 是否截断单词
    }
  }
}

let graph: Graph
//初始化图
graph = new Graph({
   	container: containerRef.value,
    width: containerRef.value.offsetWidth,
	height: containerRef.value.offsetHeight,
	interacting: false
 })
 //注册图形
Graph.registerNode('parent-node', {
	inherit: 'path', // 继承自 Shape.Rect
	width: containerRef.value.offsetWidth,
    height: containerRef.value.offsetHeight - distance,
    attrs: {
      body: {
        ...commonAttrs.body,
        stroke: gradient,
        strokeWidth: 5
      }
    },
    path: 'M0.5,668.5L0.5,448L-0.5,448L-0.5,669.5L878.5,669.5L878.5,-0.5L-0.5,-0.5L-0.5,222L0.5,222L0.5,0.5L877.5,0.5L877.5,668.5L0.5,668.5Z'
  })
//新增图形到视图中
  graph.addNode({
   	x: 0,
   	y: distance / 2,
   	shape: 'parent-node',
   	data: { parent: true }
 })