Antv X6 Stencil Drag and Drop Feature

Question

I use @antv/x6 library and I've just created a very simple demo using codesandbox.

https://codesandbox.io/s/ancient-river-w7n77x?file=/src/App.vue

I'm trying to do a simple behavior with stencil. In this example I create two nodes Node 1 and Node 2

The case is like this;

1. Drag and drop Node 1 into the graph.
2. User should see Node 2 into the graph.

Also, I share my codes below.

App.vue

//App.vue
<template>
  <div id="app">
    <div id="stencil"></div>
    <div id="graph-container"></div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";

export default {
  name: "App",
  mounted() {
    const graph = new Graph({
      container: document.getElementById("graph-container"),
      grid: true,
    });
    const stencil = new Stencil({
      title: "Stencil",
      target: graph,
      stencilGraphWidth: 200,
      stencilGraphHeight: 180,
      collapsable: true,
      groups: [
        {
          title: "Group",
          name: "group1",
        },
      ],
    });
    document.getElementById("stencil").appendChild(stencil.container);

    Graph.registerNode(
      "custom-rect",
      {
        inherit: "rect",
        width: 80,
        height: 40,
        attrs: {
          body: {
            rx: 4,
            ry: 4,
          },
        },
      },
      true
    );

    const n1 = graph.createNode({
      shape: "custom-rect",
      label: "Node 1",
    });

    const n2 = graph.createNode({
      shape: "rect",
      label: "Node2",
      width: 80,
      height: 80,
      attrs: {
        body: {
          rx: 8,
          ry: 8,
          fill: "#ffffff",
          stroke: "#ffe7ba",
        },
      },
    });

    // graph.addNode(n2);

    stencil.load([n1], "group1");
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  border: 1px solid #dfe3e8;
}
#stencil {
  width: 180px;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}
#graph-container {
  width: calc(100% - 180px);
  height: 100%;
}
</style>

main.js

// main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

package.json

// package.json
{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@antv/x6": "2.8.0",
    "@antv/x6-plugin-clipboard": "latest",
    "@antv/x6-plugin-dnd": "latest",
    "@antv/x6-plugin-history": "latest",
    "@antv/x6-plugin-keyboard": "latest",
    "@antv/x6-plugin-selection": "latest",
    "@antv/x6-plugin-snapline": "latest",
    "@antv/x6-plugin-stencil": "latest",
    "@antv/x6-plugin-transform": "latest",
    "@vue/cli-plugin-babel": "4.1.1",
    "insert-css": "latest",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "4.1.1",
    "@vue/cli-service": "4.1.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "keywords": [
    "vue",
    "vuejs",
    "starter"
  ],
  "description": "Vue.js example starter project"
}

I'm trying to do a simple behavior with stencil. In this example I create two nodes Node 1 and Node 2

The case is like this;

Drag and drop Node 1 into the graph. User should see Node 2 into the graph.