diff --git a/.changeset/dull-bags-know.md b/.changeset/dull-bags-know.md new file mode 100644 index 00000000..fd85ee68 --- /dev/null +++ b/.changeset/dull-bags-know.md @@ -0,0 +1,7 @@ +--- +'@xyflow/react': minor +'@xyflow/svelte': minor +'@xyflow/system': minor +--- + +Deprecate util function getNodesBounds and add alternative to useReactFlow/useSvelteFlow hook diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts index 8f303787..c4d81e2d 100644 --- a/packages/react/src/hooks/useReactFlow.ts +++ b/packages/react/src/hooks/useReactFlow.ts @@ -3,6 +3,7 @@ import { EdgeRemoveChange, evaluateAbsolutePosition, getElementsToRemove, + getNodesBounds, getOverlappingArea, isRectObject, NodeRemoveChange, @@ -230,6 +231,10 @@ export function useReactFlow { + const { nodeLookup, nodeOrigin } = store.getState(); + return getNodesBounds(nodes, { nodeLookup, nodeOrigin }); + }, getHandleConnections: ({ type, id, nodeId }) => Array.from( store diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts index 5806353f..fdece4dd 100644 --- a/packages/react/src/types/instance.ts +++ b/packages/react/src/types/instance.ts @@ -173,6 +173,14 @@ export type GeneralHelpers | ((edge: EdgeType) => Partial), options?: { replace: boolean } ) => void; + /** + * Returns the bounds of the given nodes or node ids. + * + * @param nodes - the nodes or node ids to calculate the bounds for + * + * @returns the bounds of the given nodes + */ + getNodesBounds: (nodes: (NodeType | InternalNode | string)[]) => Rect; /** * Gets all connections for a given handle belonging to a specific node. * diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 9aa16388..6ee27fb2 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -16,7 +16,8 @@ import { rendererPointToPoint, evaluateAbsolutePosition, type HandleType, - type HandleConnection + type HandleConnection, + getNodesBounds } from '@xyflow/system'; import { useStore } from '$lib/store'; @@ -233,7 +234,14 @@ export function useSvelteFlow(): { */ toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; /** - * Gets all connections for a given handle belonging to a specific node. + * Returns the bounds of the given nodes or node ids. + * + * @param nodes - the nodes or node ids to calculate the bounds for + * + * @returns the bounds of the given nodes + */ + getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect; + /** Gets all connections for a given handle belonging to a specific node. * * @param type - handle type 'source' or 'target' * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle) @@ -266,9 +274,9 @@ export function useSvelteFlow(): { edges, domNode, nodeLookup, + nodeOrigin, edgeLookup, - connectionLookup, - nodeOrigin + connectionLookup } = useStore(); const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => { @@ -543,6 +551,12 @@ export function useSvelteFlow(): { nodes.update((nds) => nds); }, + getNodesBounds: (nodes) => { + const _nodeLookup = get(nodeLookup); + const _nodeOrigin = get(nodeOrigin); + + return getNodesBounds(nodes, { nodeLookup: _nodeLookup, nodeOrigin: _nodeOrigin }); + }, getHandleConnections: ({ type, id, nodeId }) => Array.from( get(connectionLookup) diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte index 1de880b3..58d73db5 100644 --- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte +++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte @@ -1,11 +1,12 @@