useDnd

Quickly implement a hook for node dragging and dropping.

Basic Usage

const { startDrag } = useDnd();

const { 
  startDrag: (n, e) => void
 } = useDnd(options: Options);

Parameter	Description	Type	Default Value
startDrag	Function to drag nodes	(n: NodeOptions, e: React.MouseEvent<Element, MouseEvent>) => void	-

NodeOptions, in addition to inheriting from Node type, has two additional properties.

For Node-related documentation, please refer to Node.

interface NodeOptions extends Node {
  selected?: boolean; // Whether the node is selected
  draggable?: boolean; // Whether the node is draggable
}

Parameter	Description	Type	Default Value
options	Drag configuration	Options	-

When using useDnd for dragging, you can configure it.

The Options type is as follows:

Parameter	Description	Type	Default Value
scaled	Whether the dragged node should be scaled	`boolean`	`false`
dndContainer	If `dndContainer` is set, releasing the mouse on `dndContainer` will not place the node, commonly used in scenarios where the `dnd` container is above the canvas	`HTMLElement`	-
draggingContainer	Custom dragging canvas container	`HTMLElement`	`document.body`
validateNode	Whether the dragged node should be validated	`(droppingNode: Node, options: ValidateNodeOptions) => boolean	Promise`