alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed node bounds calculations if it is an internal node

Browse Source
This commit is contained in:
peterkogo
2024-07-23 16:01:54 +02:00
parent 7f4d56b394
commit 33dbb57aac
3 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/hooks/useReactFlow.ts
+7 -2
View File
@@ -6,6 +6,7 @@ import {
getBoundsOfBoxes, getBoundsOfBoxes,
getElementsToRemove, getElementsToRemove,
getOverlappingArea, getOverlappingArea,
isInternalNodeBase,
isRectObject, isRectObject,
NodeRemoveChange, NodeRemoveChange,
nodeToBox, nodeToBox,
@@ -233,7 +234,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
options options
); );
}, },
getNodesBounds: (nodes: (NodeType | string)[]): Rect => { getNodesBounds: (nodes: (NodeType | InternalNode | string)[]): Rect => {
if (nodes.length === 0) { if (nodes.length === 0) {
return { x: 0, y: 0, width: 0, height: 0 }; return { x: 0, y: 0, width: 0, height: 0 };
} }
@@ -243,7 +244,11 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
const box = nodes.reduce( const box = nodes.reduce(
(currBox, node) => { (currBox, node) => {
const internalNode = const internalNode =
typeof node === 'string' ? nodeLookup.get(node) : node.parentId ? nodeLookup.get(node.id) : node; typeof node === 'string'
? nodeLookup.get(node)
: !isInternalNodeBase(node)
? nodeLookup.get(node.id)
: node;
const nodeBox = internalNode ? nodeToBox(internalNode, nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 }; const nodeBox = internalNode ? nodeToBox(internalNode, nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
return getBoundsOfBoxes(currBox, nodeBox); return getBoundsOfBoxes(currBox, nodeBox);
packages/svelte/src/lib/hooks/useSvelteFlow.ts
+4 -3
View File
@@ -17,7 +17,8 @@ import {
nodeHasDimensions, nodeHasDimensions,
nodeToBox, nodeToBox,
getBoundsOfBoxes, getBoundsOfBoxes,
boxToRect boxToRect,
isInternalNodeBase
} from '@xyflow/system'; } from '@xyflow/system';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
@@ -240,7 +241,7 @@ export function useSvelteFlow(): {
* *
* @returns the bounds of the given nodes * @returns the bounds of the given nodes
*/ */
getNodesBounds: (nodes: (Node | string)[]) => Rect; getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect;
} { } {
const { const {
zoomIn, zoomIn,
@@ -532,7 +533,7 @@ export function useSvelteFlow(): {
const internalNode = const internalNode =
typeof node === 'string' typeof node === 'string'
? _nodeLookup.get(node) ? _nodeLookup.get(node)
: node.parentId : !isInternalNodeBase(node)
? _nodeLookup.get(node.id) ? _nodeLookup.get(node.id)
: node; : node;
packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+5 -3
View File
@@ -1,11 +1,12 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { getNodesBounds, Position, getNodeToolbarTransform } from '@xyflow/system'; import { Position, getNodeToolbarTransform } from '@xyflow/system';
import portal from '$lib/actions/portal'; import portal from '$lib/actions/portal';
import type { InternalNode } from '$lib/types'; import type { InternalNode } from '$lib/types';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import type { NodeToolbarProps } from './types'; import type { NodeToolbarProps } from './types';
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
type $$Props = NodeToolbarProps; type $$Props = NodeToolbarProps;
@@ -15,7 +16,8 @@
export let offset: $$Props['offset'] = undefined; export let offset: $$Props['offset'] = undefined;
export let isVisible: $$Props['isVisible'] = undefined; export let isVisible: $$Props['isVisible'] = undefined;
const { domNode, viewport, nodeLookup, nodes, nodeOrigin } = useStore(); const { domNode, viewport, nodeLookup, nodes } = useStore();
const { getNodesBounds } = useSvelteFlow();
const contextNodeId = getContext<string>('svelteflow__node_id'); const contextNodeId = getContext<string>('svelteflow__node_id');
let transform: string; let transform: string;
@@ -42,7 +44,7 @@
} }
$: { $: {
const nodeRect = getNodesBounds(toolbarNodes, { nodeOrigin: $nodeOrigin }); const nodeRect = getNodesBounds(toolbarNodes);
if (nodeRect) { if (nodeRect) {
transform = getNodeToolbarTransform(nodeRect, $viewport, _position, _offset, _align); transform = getNodeToolbarTransform(nodeRect, $viewport, _position, _offset, _align);