[Vue3]使用Stencil时，拖拽/点击Stencil中的Node时报错，Uncaught TypeError: Cannot read properties of null (reading 'undelegateEvents')

[xkkjiayou]

Describe the bug

index.ts:147 Uncaught TypeError: Cannot read properties of null (reading 'undelegateEvents')
    at Dnd.prepareDragging (index.ts:147:18)
    at Dnd.start (index.ts:87:10)
    at Stencil.onDragStart (index.ts:251:14)
    at Object.apply (function.ts:15:19)
    at call2 (util.ts:9:29)
    at Graph.trigger (events.ts:146:20)
    at NodeView.notify (cell.ts:620:16)
    at NodeView.onMouseDown (cell.ts:659:10)
    at NodeView.notifyMouseDown (node.ts:456:11)
    at NodeView.onMouseDown (node.ts:489:10)

Your Example Website or App

无

Steps to Reproduce the Bug or Issue

1.使用Stencil时，拖拽/点击Stencil中的Node时报错，Uncaught TypeError: Cannot read properties of null (reading 'undelegateEvents') 我的代码时直接参考X6文档中复制的：

<template>
    <div class="content">
        <div id="stencil" class="app-stencil" ref="stencil"></div>
        <div id="container" class="app-content" ref="container"></div>
    </div>
</template>

<script lang="ts">
// import "@antv/x6-vue-shape";
import { Graph, Node, Path, Cell } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Snapline } from '@antv/x6-plugin-snapline'
import { Dnd } from "@antv/x6-plugin-dnd";
import { Shape } from '@antv/x6'
export default {
    data() {
        return {
            moduleList: [
                {
                    id: 1,
                    name: '开始模块',
                    type: 'initial' // 初始模块(用于区分样式)
                },
                {
                    id: 2,
                    name: '结束模块',
                    type: 'initial'
                },
                {
                    id: 3,
                    name: '逻辑模块1',
                    type: 'logic' // 逻辑模块(用于区分样式)
                },
                {
                    id: 4,
                    name: '逻辑模块2',
                    type: 'logic'
                }
            ], // 列表可拖动模块
            graph: null, // 画布实例对象
            curSelectNode: null, // 当前选中的节点
            stencil: {},
            stencilContainer: {}
        }
    },
    mounted() {
        this.initGraph()
    },
    methods: {
        // 初始化流程图画布
        initGraph() {
            const graph = new Graph({
                container: this.$refs.container,
                width: 800,
                height: 600,
                background: {
                    color: "#F2F7FA",
                },
                panning: true,
                mousewheel: true,
                background: {
                    color: '#F2F7FA',
                },
                grid: {
                    visible: true,
                    type: 'doubleMesh',
                    args: [
                        {
                            color: '#eee', // 主网格线颜色
                            thickness: 1, // 主网格线宽度
                        },
                        {
                            color: '#ddd', // 次网格线颜色
                            thickness: 1, // 次网格线宽度
                            factor: 4, // 主次网格线间隔
                        },
                    ],
                },
            });
            // graph.fromJSON(data)
            graph.centerContent()

            const source = graph.addNode({
                x: 130,
                y: 30,
                width: 100,
                height: 40,
                label: 'Hello',
                attrs: {
                    body: {
                        stroke: '#8f8f8f',
                        strokeWidth: 1,
                        fill: '#fff',
                        rx: 6,
                        ry: 6,
                    },
                },
            })

            const target = graph.addNode({
                x: 320,
                y: 240,
                width: 100,
                height: 40,
                label: 'World',
                attrs: {
                    body: {
                        stroke: '#8f8f8f',
                        strokeWidth: 1,
                        fill: '#fff',
                        rx: 6,
                        ry: 6,
                    },
                },
            })

            graph.addEdge({
                source,
                target,
                attrs: {
                    line: {
                        stroke: '#8f8f8f',
                        strokeWidth: 1,
                    },
                },
            })
            this.graph = graph
            graph.centerContent()

            this.stencil = new Stencil({
                title: 'Components',
                target: this.graph,
                search(cell, keyword) {
                    return cell.shape.indexOf(keyword) !== -1
                },
                placeholder: 'Search by shape name',
                notFoundText: 'Not Found',
                collapsable: true,
                stencilGraphWidth: 200,
                stencilGraphHeight: 100,
                groups: [
                    {
                        name: 'group1',
                        title: 'Group(Collapsable)',
                    },
                    {
                        name: 'group2',
                        title: 'Group',
                        collapsable: false,
                    },
                ],
            })
            this.$refs.stencil.appendChild(this.stencil.container)

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

            this.stencil.load([r], 'group1')
            // stencil.load([n3, n4], 'group2')

        },

    },
}
</script>

<style >
.content {
    font-family: sans-serif;
    display: flex;
}

.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;
}

.x6-graph-scroller {
    border: 1px solid #f0f0f0;
    margin-left: -1px;
}
</style>

Expected behavior

应该拖拽成功，结果失败了

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 15

Additional context

No response

包信息

{
  "name": "cloud",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@antv/x6": "^2.1.1",
    "@antv/x6-plugin-dnd": "^2.0.3",
    "@antv/x6-plugin-snapline": "^2.1.6",
    "@antv/x6-plugin-stencil": "^2.0.2",
    "@antv/x6-vue-shape": "^2.0.7",
    "@antv/xflow": "^1.0.52",
    "@element-plus/icons-vue": "^2.0.10",
    "af-table-column": "^1.0.3",
    "axios": "^1.2.1",
    "core-js": "^3.8.3",
    "echarts": "^5.4.1",
    "element-plus": "^2.2.27",
    "less": "^4.1.3",
    "pinia": "^2.0.28",
    "screenfull": "^6.0.2",
    "three": "^0.147.0",
    "vanta": "^0.5.24",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vuedraggable": "next"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.11"
  }
}

[x6-bot[bot]]

👋 @xkkjiayou

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[xkkjiayou]

感谢您的来信，此时我不在办公室，稍后会及时阅读。在此期间我不方便接收邮件。如果您想及时获得通讯，请拨打我的手机联系我，谢谢您。

[lloydzhou]

@NewByVector 去看了看x6-plugin-dnd/src/index.ts的代码，猜测可能是prepareDragging这个函数调用 clearDragging 导致的，感觉在这个函数中间调用clearDragging显得有点不合时宜（如果确实是需要做一些初始化或者清理的工作，是不是应该在prepareDragging函数的一开始就调用？）...

[NewByVector]

我本地试了一下，demo 能完整跑起来，并没有报错，这个先关闭了，如果可以提供一个可以复现的项目，请重新提一个 issue。

[panzhengtao]

2.0 版本官方文档，参考stencil插件提供的示例，复制源码到项目里面打开就有这个问题

我本地试了一下，demo 能完整跑起来，并没有报错，这个先关闭了，如果可以提供一个可以复现的项目，请重新提一个 issue。

[xkkjiayou]

感谢您的来信，此时我不在办公室，稍后会及时阅读。在此期间我不方便接收邮件。如果您想及时获得通讯，请拨打我的手机联系我，谢谢您。

[Hemomoo]

2.0 版本官方文档，参考stencil插件提供的示例，复制源码到项目里面打开就有这个问题

我本地试了一下，demo 能完整跑起来，并没有报错，这个先关闭了，如果可以提供一个可以复现的项目，请重新提一个 issue。

你好 这个问题您解决了吗？ 我也遇到了同样的问题

[x6-bot[bot]]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.