2024-08-14
New edge examples

Hayleigh Thompson
Software Engineer
Here’s a care drop of new edge examples including how to animate nodes along an edge path, how to create temporary edges, and a demo of every connection event. We hope this new bundle of examples will help you level up your flow game!
import React, { useEffect, useMemo } from 'react';
import {
BaseEdge,
getBezierPath,
useReactFlow,
type Edge,
type EdgeProps,
} from '@xyflow/react';
export type AnimatedNodeEdge = Edge<{ node: string }, 'animatedNode'>;
export function AnimatedNodeEdge({
id,
data = { node: '' },
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
}: EdgeProps<AnimatedNodeEdge>) {
const { getNode, updateNode } = useReactFlow();
const [edgePath] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const selector = useMemo(
() => `.react-flow__node[data-id="${data.node}"]`,
[data.node],
);
useEffect(() => {
const node = document.querySelector(selector) as HTMLElement;
if (!node) return;
node.style.offsetPath = `path('${edgePath}')`;
node.style.offsetRotate = '0deg';
// This property is fairly new and not all versions of TypeScript have it
// in the lib.dom.d.ts file. If you get an error here, you can either
// ignore it or add the property to the CSSStyleDeclaration interface
// yourself.
//
// @ts-expect-error
node.style.offsetAnchor = 'center';
let wasDraggable = getNode(data.node).draggable;
updateNode(data.node, { draggable: false });
return () => {
node.style.offsetPath = 'none';
updateNode(data.node, { draggable: wasDraggable });
};
}, [selector, edgePath]);
useEffect(() => {
const node = document.querySelector(selector) as HTMLElement;
if (!node) return;
const keyframes = [{ offsetDistance: '0%' }, { offsetDistance: '100%' }];
const animation = node.animate(keyframes, {
duration: 2000,
direction: 'alternate',
iterations: Infinity,
});
return () => {
animation.cancel();
};
}, [selector]);
return <BaseEdge id={id} path={edgePath} />;
}
This is a breakdown of what’s been added:
-
Two examples in one showing how to animate SVG elements and other nodes along an edge path.
-
A new example showing how to create a temporary edge attached to only one handle. These edges can be picked back up and connected at a later time.
-
We have a lot of events related to connections so we’ve created a small demo showing every connection and event and when they are triggered.
Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro
Last updated on