fix intersections for svelte flow

This commit is contained in:
peterkogo
2024-08-19 14:05:37 +02:00
parent aaf130f6cb
commit e1f6b74389
3 changed files with 34 additions and 14 deletions

View File

@@ -13,12 +13,14 @@
const { getIntersectingNodes } = useSvelteFlow();
function onNodeDrag({ detail: { targetNode } }) {
const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
if (targetNode) {
const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
$nodes.forEach((n) => {
n.class = intersections.includes(n.id) ? 'highlight' : '';
});
$nodes = $nodes;
$nodes.forEach((n) => {
n.class = intersections.includes(n.id) ? 'highlight' : '';
});
$nodes = $nodes;
}
}
</script>

View File

@@ -10,7 +10,8 @@ export const initialNodes: Node[] = [
{
id: '2',
data: { label: 'Node 2' },
position: { x: 0, y: 150 }
position: { x: 0, y: 150 },
parentId: '1'
},
{
id: '3',

View File

@@ -14,7 +14,7 @@ import {
getViewportForBounds,
getElementsToRemove,
rendererPointToPoint,
nodeHasDimensions
evaluateAbsolutePosition
} from '@xyflow/system';
import { useStore } from '$lib/store';
@@ -247,15 +247,32 @@ export function useSvelteFlow(): {
edges,
domNode,
nodeLookup,
edgeLookup
edgeLookup,
nodeOrigin
} = useStore();
const getNodeRect = (nodeOrRect: Node | { id: Node['id'] }): Rect | null => {
const node =
isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
? nodeOrRect
: get(nodeLookup).get(nodeOrRect.id);
return node ? nodeToRect(node) : null;
const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
const $nodeLookup = get(nodeLookup);
const nodeToUse = isNode(node) ? node : $nodeLookup.get(node.id)!;
const position = nodeToUse.parentId
? evaluateAbsolutePosition(
nodeToUse.position,
nodeToUse.measured,
nodeToUse.parentId,
$nodeLookup,
get(nodeOrigin)
)
: nodeToUse.position;
const nodeWithPosition = {
id: nodeToUse.id,
position,
width: nodeToUse.measured?.width ?? nodeToUse.width,
height: nodeToUse.measured?.height ?? nodeToUse.height,
data: nodeToUse.data
};
return nodeToRect(nodeWithPosition);
};
const updateNode = (