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

feat(react): infer node types from passed nodes

Browse Source
This commit is contained in:
moklick
2024-01-24 18:25:31 +01:00
parent 8983d64397
commit a345b2670b
15 changed files with 364 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/react/src/examples/CustomNode/index.tsx
View File

@@ -44,7 +44,7 @@ const nodeTypes = {
const CustomNodeFlow = () => {
const [nodes, setNodes] = useState<MyNode[]>([]);
const onNodesChange: OnNodesChange = useCallback(
const onNodesChange: OnNodesChange<MyNode> = useCallback(
(changes) =>
setNodes((nds) => {
const nextNodes = applyNodeChanges(changes, nds);

2
examples/react/src/examples/UseNodesData/index.tsx
View File

@@ -18,7 +18,7 @@ import UppercaseNode from './UppercaseNode';
export type TextNode = Node<{ text: string }, 'text'>;
export type ResultNode = Node<{}, 'result'>;
export type UppercaseNode = Node<{}, 'uppercase'>;
export type MyNode = Node<{ text: string }, 'text'> | Node<{}, 'result'> | Node<{}, 'uppercase'>;
export type MyNode = TextNode | ResultNode | UppercaseNode;
const nodeTypes = {
text: TextNode,

8
packages/react/src/components/NodeWrapper/index.tsx
View File

@@ -17,9 +17,9 @@ import { useDrag } from '../../hooks/useDrag';
import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions';
import { handleNodeClick } from '../Nodes/utils';
import { arrowKeyDiffs, builtinNodeTypes } from './utils';
import type { NodeWrapperProps } from '../../types';
import type { Node, NodeWrapperProps } from '../../types';
export function NodeWrapper({
export function NodeWrapper<NodeType extends Node>({
id,
onClick,
onMouseEnter,
@@ -40,9 +40,9 @@ export function NodeWrapper({
nodeExtent,
nodeOrigin,
onError,
}: NodeWrapperProps) {
}: NodeWrapperProps<NodeType>) {
const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
const node = s.nodeLookup.get(id)!;
const node = s.nodeLookup.get(id)! as NodeType;
const positionAbsolute = nodeExtent
? clampPosition(node.computed?.positionAbsolute, nodeExtent)

12
packages/react/src/components/NodesSelection/index.tsx
View File

@@ -14,8 +14,8 @@ import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions';
import { arrowKeyDiffs } from '../NodeWrapper/utils';
import type { Node, ReactFlowState } from '../../types';
export type NodesSelectionProps = {
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
export type NodesSelectionProps<NodeType> = {
onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
noPanClassName?: string;
disableKeyboardA11y: boolean;
};
@@ -32,7 +32,11 @@ const selector = (s: ReactFlowState) => {
};
};
export function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
export function NodesSelection<NodeType extends Node>({
onSelectionContextMenu,
noPanClassName,
disableKeyboardA11y,
}: NodesSelectionProps<NodeType>) {
const store = useStoreApi();
const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
const updatePositions = useUpdateNodePositions();
@@ -58,7 +62,7 @@ export function NodesSelection({ onSelectionContextMenu, noPanClassName, disable
const onContextMenu = onSelectionContextMenu
? (event: MouseEvent) => {
const selectedNodes = store.getState().nodes.filter((n) => n.selected);
onSelectionContextMenu(event, selectedNodes);
onSelectionContextMenu(event, selectedNodes as NodeType[]);
}
: undefined;

8
packages/react/src/components/StoreUpdater/index.tsx
View File

@@ -68,7 +68,9 @@ const reactFlowFieldsToTrack = [
] as const;
type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
type StoreUpdaterProps = Pick<ReactFlowProps, ReactFlowFieldsToTrack> & { rfId: string };
type StoreUpdaterProps<NodeType extends Node = Node> = Pick<ReactFlowProps<NodeType>, ReactFlowFieldsToTrack> & {
rfId: string;
};
// rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'] as const;
@@ -84,7 +86,7 @@ const selector = (s: ReactFlowState) => ({
reset: s.reset,
});
export function StoreUpdater(props: StoreUpdaterProps) {
export function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterProps<NodeType>) {
const {
setNodes,
setEdges,
@@ -106,7 +108,7 @@ export function StoreUpdater(props: StoreUpdaterProps) {
};
}, []);
const previousFields = useRef<Partial<StoreUpdaterProps>>({
const previousFields = useRef<Partial<StoreUpdaterProps<NodeType>>>({
// these are values that are also passed directly to other components
// than the StoreUpdater. We can reduce the number of setStore calls
// by setting the same values here as prev fields.

14
packages/react/src/container/FlowRenderer/index.tsx
View File

@@ -7,10 +7,10 @@ import { GraphViewProps } from '../GraphView';
import { ZoomPane } from '../ZoomPane';
import { Pane } from '../Pane';
import { NodesSelection } from '../../components/NodesSelection';
import type { ReactFlowState } from '../../types';
import type { ReactFlowState, Node } from '../../types';
export type FlowRendererProps = Omit<
GraphViewProps,
export type FlowRendererProps<NodeType extends Node> = Omit<
GraphViewProps<NodeType>,
| 'snapToGrid'
| 'nodeTypes'
| 'edgeTypes'
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
};
const FlowRendererComponent = ({
function FlowRendererComponent<NodeType extends Node>({
children,
onPaneClick,
onPaneMouseEnter,
@@ -68,7 +68,7 @@ const FlowRendererComponent = ({
disableKeyboardA11y,
onViewportChange,
isControlledViewport,
}: FlowRendererProps) => {
}: FlowRendererProps<NodeType>) {
const { nodesSelectionActive, userSelectionActive } = useStore(selector);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
@@ -125,8 +125,8 @@ const FlowRendererComponent = ({
</Pane>
</ZoomPane>
);
};
}
FlowRendererComponent.displayName = 'FlowRenderer';
export const FlowRenderer = memo(FlowRendererComponent);
export const FlowRenderer = memo(FlowRendererComponent) as typeof FlowRendererComponent;

18
packages/react/src/container/GraphView/index.tsx
View File

@@ -8,15 +8,15 @@ import { useOnInitHandler } from '../../hooks/useOnInitHandler';
import { useViewportSync } from '../../hooks/useViewportSync';
import { ConnectionLineWrapper } from '../../components/ConnectionLine';
import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
import type { ReactFlowProps } from '../../types';
import type { Node, ReactFlowProps } from '../../types';
export type GraphViewProps = Omit<
ReactFlowProps,
export type GraphViewProps<NodeType extends Node = Node> = Omit<
ReactFlowProps<NodeType>,
'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
> &
Required<
Pick<
ReactFlowProps,
ReactFlowProps<NodeType>,
| 'selectionKeyCode'
| 'deleteKeyCode'
| 'multiSelectionKeyCode'
@@ -38,7 +38,7 @@ export type GraphViewProps = Omit<
rfId: string;
};
function GraphViewComponent({
function GraphViewComponent<NodeType extends Node = Node>({
nodeTypes,
edgeTypes,
onInit,
@@ -102,7 +102,7 @@ function GraphViewComponent({
rfId,
viewport,
onViewportChange,
}: GraphViewProps) {
}: GraphViewProps<NodeType>) {
useNodeOrEdgeTypesWarning(nodeTypes);
useNodeOrEdgeTypesWarning(edgeTypes);
@@ -110,7 +110,7 @@ function GraphViewComponent({
useViewportSync(viewport);
return (
<FlowRenderer
<FlowRenderer<NodeType>
onPaneClick={onPaneClick}
onPaneMouseEnter={onPaneMouseEnter}
onPaneMouseMove={onPaneMouseMove}
@@ -174,7 +174,7 @@ function GraphViewComponent({
/>
<div className="react-flow__edgelabel-renderer" />
<div className="react-flow__viewport-portal" />
<NodeRenderer
<NodeRenderer<NodeType>
nodeTypes={nodeTypes}
onNodeClick={onNodeClick}
onNodeDoubleClick={onNodeDoubleClick}
@@ -197,4 +197,4 @@ function GraphViewComponent({
GraphViewComponent.displayName = 'GraphView';
export const GraphView = memo(GraphViewComponent);
export const GraphView = memo(GraphViewComponent) as typeof GraphViewComponent;

14
packages/react/src/container/NodeRenderer/index.tsx
View File

@@ -7,10 +7,10 @@ import { containerStyle } from '../../styles/utils';
import { GraphViewProps } from '../GraphView';
import { useResizeObserver } from './useResizeObserver';
import { NodeWrapper } from '../../components/NodeWrapper';
import type { ReactFlowState } from '../../types';
import type { Node, ReactFlowState } from '../../types';
export type NodeRendererProps = Pick<
GraphViewProps,
export type NodeRendererProps<NodeType extends Node> = Pick<
GraphViewProps<NodeType>,
| 'onNodeClick'
| 'onNodeDoubleClick'
| 'onNodeMouseEnter'
@@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => ({
onError: s.onError,
});
const NodeRendererComponent = (props: NodeRendererProps) => {
function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<NodeType>) {
const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
const resizeObserver = useResizeObserver();
@@ -67,7 +67,7 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
// moved into `NodeComponentWrapper`. This ensures they are
// memorized – so if `NodeRenderer` *has* to rerender, it only
// needs to regenerate the list of nodes, nothing else.
<NodeWrapper
<NodeWrapper<NodeType>
key={nodeId}
id={nodeId}
nodeTypes={props.nodeTypes}
@@ -94,8 +94,8 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
})}
</div>
);
};
}
NodeRendererComponent.displayName = 'NodeRenderer';
export const NodeRenderer = memo(NodeRendererComponent);
export const NodeRenderer = memo(NodeRendererComponent) as typeof NodeRendererComponent;

540
packages/react/src/container/ReactFlow/index.tsx
View File

@@ -1,4 +1,4 @@
import { forwardRef, type CSSProperties } from 'react';
import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
import cc from 'classcat';
import {
ConnectionLineType,
@@ -17,7 +17,7 @@ import { StoreUpdater } from '../../components/StoreUpdater';
import { useColorModeClass } from '../../hooks/useColorModeClass';
import { GraphView } from '../GraphView';
import { Wrapper } from './Wrapper';
import type { ReactFlowProps, ReactFlowRefType } from '../../types';
import type { ReactFlowProps, ReactFlowRefType, Node } from '../../types';
export const initNodeOrigin: NodeOrigin = [0, 0];
const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -30,272 +30,276 @@ const wrapperStyle: CSSProperties = {
zIndex: 0,
};
const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
(
{
nodes,
edges,
defaultNodes,
defaultEdges,
className,
nodeTypes,
edgeTypes,
onNodeClick,
onEdgeClick,
onInit,
onMove,
onMoveStart,
onMoveEnd,
onConnect,
onConnectStart,
onConnectEnd,
onClickConnectStart,
onClickConnectEnd,
onNodeMouseEnter,
onNodeMouseMove,
onNodeMouseLeave,
onNodeContextMenu,
onNodeDoubleClick,
onNodeDragStart,
onNodeDrag,
onNodeDragStop,
onNodesDelete,
onEdgesDelete,
onDelete,
onSelectionChange,
onSelectionDragStart,
onSelectionDrag,
onSelectionDragStop,
onSelectionContextMenu,
onSelectionStart,
onSelectionEnd,
onBeforeDelete,
connectionMode,
connectionLineType = ConnectionLineType.Bezier,
connectionLineStyle,
connectionLineComponent,
connectionLineContainerStyle,
deleteKeyCode = 'Backspace',
selectionKeyCode = 'Shift',
selectionOnDrag = false,
selectionMode = SelectionMode.Full,
panActivationKeyCode = 'Space',
multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
snapToGrid,
snapGrid,
onlyRenderVisibleElements = false,
selectNodesOnDrag,
nodesDraggable,
nodesConnectable,
nodesFocusable,
nodeOrigin = initNodeOrigin,
edgesFocusable,
edgesUpdatable,
elementsSelectable = true,
defaultViewport = initDefaultViewport,
minZoom = 0.5,
maxZoom = 2,
translateExtent = infiniteExtent,
preventScrolling = true,
nodeExtent,
defaultMarkerColor = '#b1b1b7',
zoomOnScroll = true,
zoomOnPinch = true,
panOnScroll = false,
panOnScrollSpeed = 0.5,
panOnScrollMode = PanOnScrollMode.Free,
zoomOnDoubleClick = true,
panOnDrag = true,
onPaneClick,
onPaneMouseEnter,
onPaneMouseMove,
onPaneMouseLeave,
onPaneScroll,
onPaneContextMenu,
children,
onEdgeUpdate,
onEdgeContextMenu,
onEdgeDoubleClick,
onEdgeMouseEnter,
onEdgeMouseMove,
onEdgeMouseLeave,
onEdgeUpdateStart,
onEdgeUpdateEnd,
edgeUpdaterRadius = 10,
onNodesChange,
onEdgesChange,
noDragClassName = 'nodrag',
noWheelClassName = 'nowheel',
noPanClassName = 'nopan',
fitView,
fitViewOptions,
connectOnClick,
attributionPosition,
proOptions,
defaultEdgeOptions,
elevateNodesOnSelect,
elevateEdgesOnSelect,
disableKeyboardA11y = false,
autoPanOnConnect,
autoPanOnNodeDrag,
connectionRadius,
isValidConnection,
onError,
style,
id,
nodeDragThreshold,
viewport,
onViewportChange,
width,
height,
colorMode = 'light',
...rest
},
ref
) => {
const rfId = id || '1';
const colorModeClassName = useColorModeClass(colorMode);
declare module 'react' {
function forwardRef<T, P = Record<string, never>>(
render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
}
return (
<div
{...rest}
style={{ ...style, ...wrapperStyle }}
ref={ref}
className={cc(['react-flow', className, colorModeClassName])}
data-testid="rf__wrapper"
id={id}
>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
<GraphView
onInit={onInit}
onNodeClick={onNodeClick}
onEdgeClick={onEdgeClick}
onNodeMouseEnter={onNodeMouseEnter}
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
onNodeDoubleClick={onNodeDoubleClick}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent}
connectionLineContainerStyle={connectionLineContainerStyle}
selectionKeyCode={selectionKeyCode}
selectionOnDrag={selectionOnDrag}
selectionMode={selectionMode}
deleteKeyCode={deleteKeyCode}
multiSelectionKeyCode={multiSelectionKeyCode}
panActivationKeyCode={panActivationKeyCode}
zoomActivationKeyCode={zoomActivationKeyCode}
onlyRenderVisibleElements={onlyRenderVisibleElements}
defaultViewport={defaultViewport}
translateExtent={translateExtent}
minZoom={minZoom}
maxZoom={maxZoom}
preventScrolling={preventScrolling}
zoomOnScroll={zoomOnScroll}
zoomOnPinch={zoomOnPinch}
zoomOnDoubleClick={zoomOnDoubleClick}
panOnScroll={panOnScroll}
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
panOnDrag={panOnDrag}
onPaneClick={onPaneClick}
onPaneMouseEnter={onPaneMouseEnter}
onPaneMouseMove={onPaneMouseMove}
onPaneMouseLeave={onPaneMouseLeave}
onPaneScroll={onPaneScroll}
onPaneContextMenu={onPaneContextMenu}
onSelectionContextMenu={onSelectionContextMenu}
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
onEdgeUpdate={onEdgeUpdate}
onEdgeContextMenu={onEdgeContextMenu}
onEdgeDoubleClick={onEdgeDoubleClick}
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
edgeUpdaterRadius={edgeUpdaterRadius}
defaultMarkerColor={defaultMarkerColor}
noDragClassName={noDragClassName}
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
rfId={rfId}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
viewport={viewport}
onViewportChange={onViewportChange}
/>
<StoreUpdater
nodes={nodes}
edges={edges}
defaultNodes={defaultNodes}
defaultEdges={defaultEdges}
onConnect={onConnect}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}
onClickConnectStart={onClickConnectStart}
onClickConnectEnd={onClickConnectEnd}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
nodesFocusable={nodesFocusable}
edgesFocusable={edgesFocusable}
edgesUpdatable={edgesUpdatable}
elementsSelectable={elementsSelectable}
elevateNodesOnSelect={elevateNodesOnSelect}
elevateEdgesOnSelect={elevateEdgesOnSelect}
minZoom={minZoom}
maxZoom={maxZoom}
nodeExtent={nodeExtent}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
connectionMode={connectionMode}
translateExtent={translateExtent}
connectOnClick={connectOnClick}
defaultEdgeOptions={defaultEdgeOptions}
fitView={fitView}
fitViewOptions={fitViewOptions}
onNodesDelete={onNodesDelete}
onEdgesDelete={onEdgesDelete}
onDelete={onDelete}
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop}
onSelectionDrag={onSelectionDrag}
onSelectionDragStart={onSelectionDragStart}
onSelectionDragStop={onSelectionDragStop}
onMove={onMove}
onMoveStart={onMoveStart}
onMoveEnd={onMoveEnd}
noPanClassName={noPanClassName}
nodeOrigin={nodeOrigin}
rfId={rfId}
autoPanOnConnect={autoPanOnConnect}
autoPanOnNodeDrag={autoPanOnNodeDrag}
onError={onError}
connectionRadius={connectionRadius}
isValidConnection={isValidConnection}
selectNodesOnDrag={selectNodesOnDrag}
nodeDragThreshold={nodeDragThreshold}
onBeforeDelete={onBeforeDelete}
/>
<SelectionListener onSelectionChange={onSelectionChange} />
{children}
<Attribution proOptions={proOptions} position={attributionPosition} />
<A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
</Wrapper>
</div>
);
}
);
function ReactFlow<NodeType extends Node = Node>(
{
nodes,
edges,
defaultNodes,
defaultEdges,
className,
nodeTypes,
edgeTypes,
onNodeClick,
onEdgeClick,
onInit,
onMove,
onMoveStart,
onMoveEnd,
onConnect,
onConnectStart,
onConnectEnd,
onClickConnectStart,
onClickConnectEnd,
onNodeMouseEnter,
onNodeMouseMove,
onNodeMouseLeave,
onNodeContextMenu,
onNodeDoubleClick,
onNodeDragStart,
onNodeDrag,
onNodeDragStop,
onNodesDelete,
onEdgesDelete,
onDelete,
onSelectionChange,
onSelectionDragStart,
onSelectionDrag,
onSelectionDragStop,
onSelectionContextMenu,
onSelectionStart,
onSelectionEnd,
onBeforeDelete,
connectionMode,
connectionLineType = ConnectionLineType.Bezier,
connectionLineStyle,
connectionLineComponent,
connectionLineContainerStyle,
deleteKeyCode = 'Backspace',
selectionKeyCode = 'Shift',
selectionOnDrag = false,
selectionMode = SelectionMode.Full,
panActivationKeyCode = 'Space',
multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
snapToGrid,
snapGrid,
onlyRenderVisibleElements = false,
selectNodesOnDrag,
nodesDraggable,
nodesConnectable,
nodesFocusable,
nodeOrigin = initNodeOrigin,
edgesFocusable,
edgesUpdatable,
elementsSelectable = true,
defaultViewport = initDefaultViewport,
minZoom = 0.5,
maxZoom = 2,
translateExtent = infiniteExtent,
preventScrolling = true,
nodeExtent,
defaultMarkerColor = '#b1b1b7',
zoomOnScroll = true,
zoomOnPinch = true,
panOnScroll = false,
panOnScrollSpeed = 0.5,
panOnScrollMode = PanOnScrollMode.Free,
zoomOnDoubleClick = true,
panOnDrag = true,
onPaneClick,
onPaneMouseEnter,
onPaneMouseMove,
onPaneMouseLeave,
onPaneScroll,
onPaneContextMenu,
children,
onEdgeUpdate,
onEdgeContextMenu,
onEdgeDoubleClick,
onEdgeMouseEnter,
onEdgeMouseMove,
onEdgeMouseLeave,
onEdgeUpdateStart,
onEdgeUpdateEnd,
edgeUpdaterRadius = 10,
onNodesChange,
onEdgesChange,
noDragClassName = 'nodrag',
noWheelClassName = 'nowheel',
noPanClassName = 'nopan',
fitView,
fitViewOptions,
connectOnClick,
attributionPosition,
proOptions,
defaultEdgeOptions,
elevateNodesOnSelect,
elevateEdgesOnSelect,
disableKeyboardA11y = false,
autoPanOnConnect,
autoPanOnNodeDrag,
connectionRadius,
isValidConnection,
onError,
style,
id,
nodeDragThreshold,
viewport,
onViewportChange,
width,
height,
colorMode = 'light',
...rest
}: ReactFlowProps<NodeType>,
ref: ForwardedRef<ReactFlowRefType>
) {
const rfId = id || '1';
const colorModeClassName = useColorModeClass(colorMode);
ReactFlow.displayName = 'ReactFlow';
return (
<div
{...rest}
style={{ ...style, ...wrapperStyle }}
ref={ref}
className={cc(['react-flow', className, colorModeClassName])}
data-testid="rf__wrapper"
id={id}
>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
<GraphView<NodeType>
onInit={onInit}
onNodeClick={onNodeClick}
onEdgeClick={onEdgeClick}
onNodeMouseEnter={onNodeMouseEnter}
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
onNodeDoubleClick={onNodeDoubleClick}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent}
connectionLineContainerStyle={connectionLineContainerStyle}
selectionKeyCode={selectionKeyCode}
selectionOnDrag={selectionOnDrag}
selectionMode={selectionMode}
deleteKeyCode={deleteKeyCode}
multiSelectionKeyCode={multiSelectionKeyCode}
panActivationKeyCode={panActivationKeyCode}
zoomActivationKeyCode={zoomActivationKeyCode}
onlyRenderVisibleElements={onlyRenderVisibleElements}
defaultViewport={defaultViewport}
translateExtent={translateExtent}
minZoom={minZoom}
maxZoom={maxZoom}
preventScrolling={preventScrolling}
zoomOnScroll={zoomOnScroll}
zoomOnPinch={zoomOnPinch}
zoomOnDoubleClick={zoomOnDoubleClick}
panOnScroll={panOnScroll}
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
panOnDrag={panOnDrag}
onPaneClick={onPaneClick}
onPaneMouseEnter={onPaneMouseEnter}
onPaneMouseMove={onPaneMouseMove}
onPaneMouseLeave={onPaneMouseLeave}
onPaneScroll={onPaneScroll}
onPaneContextMenu={onPaneContextMenu}
onSelectionContextMenu={onSelectionContextMenu}
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
onEdgeUpdate={onEdgeUpdate}
onEdgeContextMenu={onEdgeContextMenu}
onEdgeDoubleClick={onEdgeDoubleClick}
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
edgeUpdaterRadius={edgeUpdaterRadius}
defaultMarkerColor={defaultMarkerColor}
noDragClassName={noDragClassName}
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
rfId={rfId}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
viewport={viewport}
onViewportChange={onViewportChange}
/>
<StoreUpdater
nodes={nodes}
edges={edges}
defaultNodes={defaultNodes}
defaultEdges={defaultEdges}
onConnect={onConnect}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}
onClickConnectStart={onClickConnectStart}
onClickConnectEnd={onClickConnectEnd}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
nodesFocusable={nodesFocusable}
edgesFocusable={edgesFocusable}
edgesUpdatable={edgesUpdatable}
elementsSelectable={elementsSelectable}
elevateNodesOnSelect={elevateNodesOnSelect}
elevateEdgesOnSelect={elevateEdgesOnSelect}
minZoom={minZoom}
maxZoom={maxZoom}
nodeExtent={nodeExtent}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
connectionMode={connectionMode}
translateExtent={translateExtent}
connectOnClick={connectOnClick}
defaultEdgeOptions={defaultEdgeOptions}
fitView={fitView}
fitViewOptions={fitViewOptions}
onNodesDelete={onNodesDelete}
onEdgesDelete={onEdgesDelete}
onDelete={onDelete}
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop}
onSelectionDrag={onSelectionDrag}
onSelectionDragStart={onSelectionDragStart}
onSelectionDragStop={onSelectionDragStop}
onMove={onMove}
onMoveStart={onMoveStart}
onMoveEnd={onMoveEnd}
noPanClassName={noPanClassName}
nodeOrigin={nodeOrigin}
rfId={rfId}
autoPanOnConnect={autoPanOnConnect}
autoPanOnNodeDrag={autoPanOnNodeDrag}
onError={onError}
connectionRadius={connectionRadius}
isValidConnection={isValidConnection}
selectNodesOnDrag={selectNodesOnDrag}
nodeDragThreshold={nodeDragThreshold}
onBeforeDelete={onBeforeDelete}
/>
<SelectionListener onSelectionChange={onSelectionChange} />
{children}
<Attribution proOptions={proOptions} position={attributionPosition} />
<A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
</Wrapper>
</div>
);
}
export default ReactFlow;
export default forwardRef(ReactFlow) as <T extends Node = Node>(
props: ReactFlowProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
) => ReturnType<typeof ReactFlow>;

16
packages/react/src/hooks/useNodesEdgesState.ts
View File

@@ -1,7 +1,7 @@
import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
import type { Node, NodeChange, Edge, EdgeChange } from '../types';
import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types';
/**
* Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
@@ -10,12 +10,12 @@ import type { Node, NodeChange, Edge, EdgeChange } from '../types';
* @param initialNodes
* @returns an array [nodes, setNodes, onNodesChange]
*/
export function useNodesState<NodeType extends Node = Node>(
export function useNodesState<NodeType extends Node>(
initialNodes: NodeType[]
): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange<NodeType>[]) => void] {
): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange<NodeType>] {
const [nodes, setNodes] = useState(initialNodes);
const onNodesChange = useCallback(
(changes: NodeChange<NodeType>[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
const onNodesChange: OnNodesChange<NodeType> = useCallback(
(changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
[]
);
@@ -31,10 +31,10 @@ export function useNodesState<NodeType extends Node = Node>(
*/
export function useEdgesState<EdgeType extends Edge = Edge>(
initialEdges: EdgeType[]
): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange<EdgeType>[]) => void] {
): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>] {
const [edges, setEdges] = useState(initialEdges);
const onEdgesChange = useCallback(
(changes: EdgeChange<EdgeType>[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
const onEdgesChange: OnEdgesChange<EdgeType> = useCallback(
(changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
[]
);

6
packages/react/src/hooks/useOnInitHandler.ts
View File

@@ -1,15 +1,15 @@
import { useEffect, useRef } from 'react';
import { useReactFlow } from './useReactFlow';
import type { OnInit } from '../types';
import type { OnInit, Node } from '../types';
/**
* Hook for calling onInit handler.
*
* @internal
*/
export function useOnInitHandler(onInit: OnInit | undefined) {
const rfInstance = useReactFlow();
export function useOnInitHandler<NodeType extends Node = Node>(onInit: OnInit<NodeType> | undefined) {
const rfInstance = useReactFlow<NodeType>();
const isInitialized = useRef<boolean>(false);
useEffect(() => {

4
packages/react/src/hooks/useStore.ts
View File

@@ -31,7 +31,7 @@ function useStore<StateSlice = ExtractState>(
return useZustandStore(store, selector, equalityFn);
}
const useStoreApi = () => {
function useStoreApi() {
const store = useContext(StoreContext);
if (store === null) {
@@ -47,6 +47,6 @@ const useStoreApi = () => {
}),
[store]
);
};
}
export { useStore, useStoreApi };

34
packages/react/src/types/component-props.ts
View File

@@ -50,7 +50,7 @@ import type {
* ReactFlow component props.
* @public
*/
export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
/** An array of nodes to render in a controlled flow.
* @example
* const nodes = [
@@ -62,7 +62,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
* }
* ];
*/
nodes?: Node[];
nodes?: NodeType[];
/** An array of edges to render in a controlled flow.
* @example
* const edges = [
@@ -75,7 +75,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
*/
edges?: Edge[];
/** The initial nodes to render in an uncontrolled flow. */
defaultNodes?: Node[];
defaultNodes?: NodeType[];
/** The initial edges to render in an uncontrolled flow. */
defaultEdges?: Edge[];
/** Defaults to be applied to all new edges that are added to the flow.
@@ -99,23 +99,23 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
*/
defaultEdgeOptions?: DefaultEdgeOptions;
/** This event handler is called when a user clicks on a node */
onNodeClick?: NodeMouseHandler;
onNodeClick?: NodeMouseHandler<NodeType>;
/** This event handler is called when a user double clicks on a node */
onNodeDoubleClick?: NodeMouseHandler;
onNodeDoubleClick?: NodeMouseHandler<NodeType>;
/** This event handler is called when mouse of a user enters a node */
onNodeMouseEnter?: NodeMouseHandler;
onNodeMouseEnter?: NodeMouseHandler<NodeType>;
/** This event handler is called when mouse of a user moves over a node */
onNodeMouseMove?: NodeMouseHandler;
onNodeMouseMove?: NodeMouseHandler<NodeType>;
/** This event handler is called when mouse of a user leaves a node */
onNodeMouseLeave?: NodeMouseHandler;
onNodeMouseLeave?: NodeMouseHandler<NodeType>;
/** This event handler is called when a user right clicks on a node */
onNodeContextMenu?: NodeMouseHandler;
onNodeContextMenu?: NodeMouseHandler<NodeType>;
/** This event handler is called when a user starts to drag a node */
onNodeDragStart?: OnNodeDrag;
onNodeDragStart?: OnNodeDrag<NodeType>;
/** This event handler is called when a user drags a node */
onNodeDrag?: OnNodeDrag;
onNodeDrag?: OnNodeDrag<NodeType>;
/** This event handler is called when a user stops dragging a node */
onNodeDragStop?: OnNodeDrag;
onNodeDragStop?: OnNodeDrag<NodeType>;
/** This event handler is called when a user clicks on an edge */
onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
/** This event handler is called when a user right clicks on an edge */
@@ -147,7 +147,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
*
* return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
*/
onNodesChange?: OnNodesChange;
onNodesChange?: OnNodesChange<NodeType>;
/** This event handler is called when a Edge is updated
* @example // Use EdgesState hook to create edges and get onEdgesChange handler
* import ReactFlow, { useEdgesState } from '@xyflow/react';
@@ -166,7 +166,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
*/
onEdgesChange?: OnEdgesChange;
/** This event handler gets called when a Node is deleted */
onNodesDelete?: OnNodesDelete;
onNodesDelete?: OnNodesDelete<NodeType>;
/** This event handler gets called when a Edge is deleted */
onEdgesDelete?: OnEdgesDelete;
/** This event handler gets called when a Node or Edge is deleted */
@@ -179,7 +179,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
onSelectionDragStop?: SelectionDragHandler;
onSelectionStart?: (event: ReactMouseEvent) => void;
onSelectionEnd?: (event: ReactMouseEvent) => void;
onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => void;
/** When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
*
* You can use the addEdge utility to convert the connection to a complete edge.
@@ -201,7 +201,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
onClickConnectStart?: OnConnectStart;
onClickConnectEnd?: OnConnectEnd;
/** This event handler gets called when a flow has finished initializing */
onInit?: OnInit;
onInit?: OnInit<NodeType>;
/** This event handler is called while the user is either panning or zooming the viewport. */
onMove?: OnMove;
/** This event handler gets called when a user starts to pan or zoom the viewport */
@@ -223,7 +223,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
/** This event handler gets called when mouse leaves the pane */
onPaneMouseLeave?: (event: ReactMouseEvent) => void;
/** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
onBeforeDelete?: OnBeforeDelete;
onBeforeDelete?: OnBeforeDelete<NodeType>;
/** Custom node types to be available in a flow.
*
* React Flow matches a node's type to a component in the nodeTypes object.

14
packages/react/src/types/nodes.ts
View File

@@ -26,18 +26,18 @@ export type OnNodeDrag<NodeType extends Node = Node> = (
nodes: NodeType[]
) => void;
export type NodeWrapperProps = {
export type NodeWrapperProps<NodeType extends Node> = {
id: string;
nodesConnectable: boolean;
elementsSelectable: boolean;
nodesDraggable: boolean;
nodesFocusable: boolean;
onClick?: NodeMouseHandler;
onDoubleClick?: NodeMouseHandler;
onMouseEnter?: NodeMouseHandler;
onMouseMove?: NodeMouseHandler;
onMouseLeave?: NodeMouseHandler;
onContextMenu?: NodeMouseHandler;
onClick?: NodeMouseHandler<NodeType>;
onDoubleClick?: NodeMouseHandler<NodeType>;
onMouseEnter?: NodeMouseHandler<NodeType>;
onMouseMove?: NodeMouseHandler<NodeType>;
onMouseLeave?: NodeMouseHandler<NodeType>;
onContextMenu?: NodeMouseHandler<NodeType>;
resizeObserver: ResizeObserver | null;
noDragClassName: string;
noPanClassName: string;

26
packages/react/src/types/store.ts
View File

@@ -45,17 +45,17 @@ import type {
OnBeforeDelete,
} from '.';
export type ReactFlowStore = {
export type ReactFlowStore<NodeType extends Node> = {
rfId: string;
width: number;
height: number;
transform: Transform;
nodes: Node[];
nodeLookup: NodeLookup<Node>;
nodes: NodeType[];
nodeLookup: NodeLookup<NodeType>;
edges: Edge[];
edgeLookup: EdgeLookup<Edge>;
connectionLookup: ConnectionLookup;
onNodesChange: OnNodesChange | null;
onNodesChange: OnNodesChange<NodeType> | null;
onEdgesChange: OnEdgesChange | null;
hasDefaultNodes: boolean;
hasDefaultEdges: boolean;
@@ -98,9 +98,9 @@ export type ReactFlowStore = {
connectionEndHandle: ConnectingHandle | null;
connectionClickStartHandle: ConnectingHandle | null;
onNodeDragStart?: OnNodeDrag;
onNodeDrag?: OnNodeDrag;
onNodeDragStop?: OnNodeDrag;
onNodeDragStart?: OnNodeDrag<NodeType>;
onNodeDrag?: OnNodeDrag<NodeType>;
onNodeDragStop?: OnNodeDrag<NodeType>;
onSelectionDragStart?: OnSelectionDrag;
onSelectionDrag?: OnSelectionDrag;
@@ -147,10 +147,10 @@ export type ReactFlowStore = {
lib: string;
};
export type ReactFlowActions = {
setNodes: (nodes: Node[]) => void;
export type ReactFlowActions<NodeType extends Node> = {
setNodes: (nodes: NodeType[]) => void;
setEdges: (edges: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: Edge[]) => void;
updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void;
updateNodePositions: UpdateNodePositions;
resetSelectedElements: () => void;
@@ -164,9 +164,9 @@ export type ReactFlowActions = {
cancelConnection: () => void;
updateConnection: UpdateConnection;
reset: () => void;
triggerNodeChanges: (changes: NodeChange[]) => void;
triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
panBy: PanBy;
fitView: (nodes: Node[], options?: FitViewOptions) => boolean;
fitView: (nodes: NodeType[], options?: FitViewOptions) => boolean;
};
export type ReactFlowState = ReactFlowStore & ReactFlowActions;
export type ReactFlowState<NodeType extends Node = Node> = ReactFlowStore<NodeType> & ReactFlowActions<NodeType>;