<template>
    <div>
        <div class="app-stencil" ref="stencilContainer"></div>
      <!-- <div class="app-content" ref="container"></div> -->
      <div class="app-content"></div>
    </div>
</template>
<script>
import { Addon } from "@antv/x6";
export default {
  data() {
    return {
      
    };
  },
  activated(){
      ///20210720   zhang   左侧ui栏及拖拽

      ///graph    有错
    const stencil = new Addon.Stencil({
      title: "Components",
      target: graph,
      search(cell, keyword) {
        return cell.shape.indexOf(keyword) !== -1;
      },
      placeholder: "Search by shape name",
      notFoundText: "Not Found",
      collapsable: true,
      stencilGraphWidth: 200,
      stencilGraphHeight: 180,
      groups: [
        {
          name: "group1",
          title: "Group(Collapsable)",
        },
        {
          name: "group2",
          title: "Group",
          // collapsable: false,
        },
      ],
    });

    //
    this.$refs.stencilContainer.appendChild(stencil.container);

    const r = new Shape.Rect({
      width: 70,
      height: 40,
      attrs: {
        rect: { fill: "#31D0C6", stroke: "#4B4A67", strokeWidth: 6 },
        text: { text: "rect", fill: "white" },
      },
    });

    const c = new Shape.Circle({
      width: 60,
      height: 60,
      attrs: {
        circle: { fill: "#FE854F", strokeWidth: 6, stroke: "#4B4A67" },
        text: { text: "ellipse", fill: "white" },
      },
    });

    const c2 = new Shape.Circle({
      width: 60,
      height: 60,
      attrs: {
        circle: { fill: "#4B4A67", "stroke-width": 6, stroke: "#FE854F" },
        text: { text: "ellipse", fill: "white" },
      },
    });

    const r2 = new Shape.Rect({
      width: 70,
      height: 40,
      attrs: {
        rect: { fill: "#4B4A67", stroke: "#31D0C6", strokeWidth: 6 },
        text: { text: "rect", fill: "white" },
      },
    });

    const r3 = new Shape.Rect({
      width: 70,
      height: 40,
      attrs: {
        rect: { fill: "#31D0C6", stroke: "#4B4A67", strokeWidth: 6 },
        text: { text: "rect", fill: "white" },
      },
    });

    const c3 = new Shape.Circle({
      width: 60,
      height: 60,
      attrs: {
        circle: { fill: "#FE854F", strokeWidth: 6, stroke: "#4B4A67" },
        text: { text: "ellipse", fill: "white" },
      },
    });

    stencil.load([r, c, c2, r2.clone()], "group1");
    stencil.load([c2.clone(), r2, r3, c3], "group2");
    stencil.load([znode1],"group1");
  }
};
</script>
<style>
.app-stencil {
  width: 250px;
  border: 1px solid #f0f0f0;
  position: relative;
}

.app-content {
  flex: 1;
  height: 520px;
  margin-left: 8px;
  margin-right: 8px;
  box-shadow: 0 0 10px 1px #e9e9e9;
}
</style>
