基于vue简单使用antv/x6 学习笔记2

概要

X6图形编辑库提供了完善的节点操作API，支持新增、修改、删除等核心功能。新增节点可通过addNode实现，支持自定义样式、业务数据及批量导入；修改节点利用prop、attr等方法动态调整属性、位置和尺寸；删除节点支持单节点或批量操作。详细API参考官方文档。

一、节点新增

我们可以使用X6的内置节点图形（rect-矩形、circle-圆形、ellipse-椭圆、polygon-多边形、image-图片等），或者使用自定义组件作为节点。

• graph.addNode(config: NodeConfig) 基础方法，接受节点配置对象，返回新增的节点实例。
• graph.fromJSON(data: ModelData) 通过JSON数据初始化画布（包含节点和边）。

（1）新增内置节点：

（2）新增自定义节点：

        1)创建Vue组件

<!-- CustomNode.vue -->
<template>
  <div class="custom-node">
    {{ nodeInfo.label }}
  </div>
</template>

<script>
export default {
  name: "CustomNode",
  inject: ["getNode"],
  data() {
    return {
      nodeInfo: {},
    };
  },
  mounted() {
    this.node = this.getNode();
    this.nodeInfo = this.node.data;
  },
};
</script>

        2) 注册节点类型    

// 将自定义的节点文件，引入到画布文件中
import CustomNode from "./CustomNode.vue";

// 初始化时注册
initGraph() {
    Graph.registerNode(
      "custom-node", 
      {
        inherit: "vue-shape",  // 继承Vue组件类型
        width: 100,
        height: 40,
        component: CustomNode  // 关联组件
      },
      true
    );
     const graph = new Graph({
        container: document.getElementById("container"),
        panning: true,
        autoResize: true,
        mousewheel: true,
        background: {
          color: "#F5F7FA",
        },
        grid: {
          size: 10,
          visible: true,
        },
        ....
    )}
    graph.addNode({
      id: 'custom-node1',
      shape: 'custom-node',  // 使用注册的类型
      x: 100,
      y: 40,
      data: { label:"自定义节点",value: "custom-node" }  // 传递给组件的数据
    })
}

二、节点修改

• node.prop(key: string, value: any)修改节点属性（如样式、文本）。
• node.attr(path: string, value: any)修改节点特定属性路径（如attrs/body/fill）。

node.prop(path,value)，在控制台打印一下node.prop()，看一下节点有哪些属性

const nodes = graph.getNodes();
console.log(nodes[0].prop());

// 场景1：修改节点样式和文本
const node = graph.getCellById('node1');
node.prop('attrs/body/fill', '#e74c3c'); // 修改填充色
node.prop('label', '修改后的标签'); // 更新文本

// 场景2：通过attr精确修改属性
node.attr('body/stroke', '#c0392b'); // 修改边框颜色 等价于 nodes.prop('attrs/body/stroke', '#c0392b')
node.attr('label/fontSize', 14); // 修改字体大小 

// 场景3：动态调整位置和尺寸
node.position(300, 200); // 移动到新坐标
node.resize(120, 60);    // 调整宽高

三、节点删除

• node.remove() 删除单个节点。
• graph.removeCells(cells: Cell[])批量删除节点和边。

// 场景1：删除单个节点 通过节点id
const node = graph.getCellById('node1');
graph.removeNode(node);

// 场景2：批量删除选中节点
const selectedNodes = graph.getSelectedCells().filter(cell => cell.isNode());
graph.removeCells(selectedNodes);