fix: 🐛 findParent args

examples/x6-example-features/src/pages/embed/dnd.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { Graph, Node, Color } from '@antv/x6'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 880,
+      height: 600,
+      grid: true,
+      embedding: {
+        enabled: true,
+        findParent({ node }) {
+          const bbox = node.getBBox()
+          return this.getNodes().filter((parent) => {
+            const data = parent.getData<any>()
+            // 只有 data.parent 为 true 的节点才是父节点
+            if (data && data.parent) {
+              const children = parent.getChildren()
+              console.log(children)
+              const valid =
+                children != null &&
+                children.every((cell) => cell.id !== node.id)
+              if (valid) {
+                const targetBBox = parent.getBBox()
+                return targetBBox.containsRect(bbox)
+              }
+            }
+            return false
+          })
+        },
+        validate({ child, parent }) {
+          const data = parent.getData<any>()
+          if (data == null || data.parent == null) {
+            return false
+          }
+          const children = parent.getChildren()
+          return (
+            children != null && children.every((cell) => cell.id !== child.id)
+          )
+        },
+      },
+    })
+
+    const parent1 = graph.addNode({
+      size: { width: 240, height: 400 },
+      position: { x: 80, y: 80 },
+      data: {
+        parent: true,
+      },
+    })
+
+    const parent2 = graph.addNode({
+      size: { width: 240, height: 400 },
+      position: { x: 560, y: 160 },
+      data: {
+        parent: true,
+      },
+    })
+
+    const createChild = (index: number, parent: Node) => {
+      const pos = parent.getPosition()
+      const fill = Color.randomHex()
+      graph
+        .createNode({
+          size: { width: 160, height: 80 },
+          position: { x: pos.x + 40, y: pos.y + 40 * (index + 1) + 80 * index },
+          attrs: {
+            body: { fill, stroke: Color.darken(fill, 40) },
+            label: {
+              text: `Child${index + 1}`,
+              fill: Color.invert(fill, true),
+            },
+          },
+        })
+        .addTo(parent)
+    }
+
+    createChild(0, parent1)
+    createChild(1, parent1)
+    createChild(2, parent1)
+    createChild(0, parent2)
+    createChild(1, parent2)
+    createChild(2, parent2)
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-sites/packages/tutorial/basic/group/embedding/src/app.tsx

@@ -11,7 +11,7 @@ export default class Example extends React.Component {
       grid: true,
       embedding: {
         enabled: true,
-        findParent(node) {
+        findParent({ node }) {
           const bbox = node.getBBox()
           return this.getNodes().filter((node) => {
             const data = node.getData<any>()

packages/x6-sites/docs/tutorial/basic/group.zh.md

@@ -73,7 +73,7 @@ graph.addEdge({
 new Graph({
   embedding: {
     enabled: true,
-    findParent(node) {
+    findParent({ node }) {
       const bbox = node.getBBox()
       return this.getNodes().filter((node) => {
         // 只有 data.parent 为 true 的节点才是父节点

packages/x6/src/graph/options.ts

@@ -400,7 +400,7 @@ export namespace Options {
       | 'topRight'
       | 'bottomLeft'
       | 'bottomRight'
-      | ((this: Graph, view: NodeView) => Cell[])
+      | ((this: Graph, args: { node: Node; view: NodeView }) => Cell[])
 
     /**
      * If enabled only the node on the very front is taken into account for the

packages/x6/src/view/node.ts

@@ -761,15 +761,16 @@ export class NodeView<
 
     let candidates =
       typeof findParent === 'function'
-        ? (FunctionExt.call(findParent, graph, this) as Cell[]).filter(
-            (cell) => {
-              return (
-                cell instanceof Cell &&
-                this.cell.id !== cell.id &&
-                !cell.isDescendantOf(this.cell)
-              )
-            },
-          )
+        ? (FunctionExt.call(findParent, graph, {
+            view: this,
+            node: this.cell,
+          }) as Cell[]).filter((cell) => {
+            return (
+              cell instanceof Cell &&
+              this.cell.id !== cell.id &&
+              !cell.isDescendantOf(this.cell)
+            )
+          })
         : graph.model.getNodesUnderNode(cell, {
             by: options.findParent as Rectangle.KeyPoint,
           })