diff --git a/examples/x6-example-features/src/pages/embed/dnd.tsx b/examples/x6-example-features/src/pages/embed/dnd.tsx new file mode 100644 index 00000000000..dd17b555e55 --- /dev/null +++ b/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() + // 只有 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() + 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 ( +
+
+
+ ) + } +} diff --git a/examples/x6-example-sites/packages/tutorial/basic/group/embedding/src/app.tsx b/examples/x6-example-sites/packages/tutorial/basic/group/embedding/src/app.tsx index fce91de5e37..6bab79d5dbe 100644 --- a/examples/x6-example-sites/packages/tutorial/basic/group/embedding/src/app.tsx +++ b/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() diff --git a/packages/x6-sites/docs/tutorial/basic/group.zh.md b/packages/x6-sites/docs/tutorial/basic/group.zh.md index b957f711543..d8bb7213452 100644 --- a/packages/x6-sites/docs/tutorial/basic/group.zh.md +++ b/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 的节点才是父节点 diff --git a/packages/x6/src/graph/options.ts b/packages/x6/src/graph/options.ts index 82f9cb87844..ad6be73373b 100644 --- a/packages/x6/src/graph/options.ts +++ b/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 diff --git a/packages/x6/src/view/node.ts b/packages/x6/src/view/node.ts index 1417b5ed908..18c21163bd1 100644 --- a/packages/x6/src/view/node.ts +++ b/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, })