fix: bind dragstart after add group (#4131)

package.json

@@ -23,7 +23,7 @@
     "prepare": "is-ci || run-p setup:husky build:dev",
     "start:demo": "cd ./examples/x6-example-features && pnpm start",
     "start:site": "cd ./sites/x6-sites && pnpm start",
-    "release": "pnpm publish --no-git-checks -r  --filter @antv/x6"
+    "release": "pnpm publish --no-git-checks -r --filter @antv/x6"
   },
   "rss": {
     "clean:turbo": "rimraf .turbo",

packages/x6-plugin-stencil/src/index.ts

@@ -180,6 +180,7 @@ export class Stencil extends View implements Graph.Plugin {
       )
       groupNames.forEach((groupName) => {
         const graph = this.graphs[groupName]
+        this.unregisterGraphEvents(graph)
         graph.dispose()
         delete this.graphs[groupName]
 
@@ -249,6 +250,8 @@ export class Stencil extends View implements Graph.Plugin {
       preventDefaultBlankAction: false,
     })
 
+    this.registerGraphEvents(graph)
+
     Dom.append(content, graph.container)
     Dom.append(groupElem, [title, content])
     Dom.appendTo(groupElem, this.content)
@@ -339,19 +342,18 @@ export class Stencil extends View implements Graph.Plugin {
       [`focusin .${searchText}`]: 'onSearchFocusIn',
       [`focusout .${searchText}`]: 'onSearchFocusOut',
     })
-
-    Object.keys(this.graphs).forEach((groupName) => {
-      const graph = this.graphs[groupName]
-      graph.on('cell:mousedown', this.onDragStart, this)
-    })
   }
 
   protected stopListening() {
     this.undelegateEvents()
-    Object.keys(this.graphs).forEach((groupName) => {
-      const graph = this.graphs[groupName]
-      graph.off('cell:mousedown', this.onDragStart, this)
-    })
+  }
+
+  protected registerGraphEvents(graph: Graph) {
+    graph.on('cell:mousedown', this.onDragStart, this)
+  }
+
+  protected unregisterGraphEvents(graph: Graph) {
+    graph.off('cell:mousedown', this.onDragStart, this)
   }
 
   protected loadGroup(
@@ -571,6 +573,7 @@ export class Stencil extends View implements Graph.Plugin {
   protected clearGroups() {
     Object.keys(this.graphs).forEach((groupName) => {
       const graph = this.graphs[groupName]
+      this.unregisterGraphEvents(graph)
       graph.dispose()
     })
     Object.keys(this.groups).forEach((groupName) => {