开始实现官方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");
},