antv x6 Stencil 自定义拖拽拓扑图

开始实现官方dome

1安装引入插件

$ npm install @antv/x6-plugin-stencil --save



import { Stencil } from "@antv/x6-plugin-stencil";

2创建stencil模版

 // 左侧模板
   buildStencil() {
      //模版设置
      this.stencil = new Stencil({
        target: this.graph,

        // 模版中的分类，数组长度就是类型长度
        groups: [
          {
            name: "group1",
          },
          {
            name: "group2",
          },
        ],
      });
     
      const rect1 = this.graph.createNode({ //创建节点
        shape: "rect",
        width: 100,
        height: 40,
      });
      const rect2 = rect1.clone();

      // 需要一个容纳 stencil 的 Dom 容器 stencilContainer
      document.getElementById("stencil").appendChild(this.stencil.container);
      //把节点加载到模版第一个分类中
      this.stencil.load([rect1, rect2], "group1");
    },