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
examples/react/src/examples/CustomNode/index.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const nodeTypes = {
const CustomNodeFlow = () => { const CustomNodeFlow = () => {
const [nodes, setNodes] = useState<MyNode[]>([]); const [nodes, setNodes] = useState<MyNode[]>([]);
const onNodesChange: OnNodesChange = useCallback( const onNodesChange: OnNodesChange<MyNode> = useCallback(
(changes) => (changes) =>
setNodes((nds) => { setNodes((nds) => {
const nextNodes = applyNodeChanges(changes, nds); const nextNodes = applyNodeChanges(changes, nds);
examples/react/src/examples/UseNodesData/index.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ import UppercaseNode from './UppercaseNode';
export type TextNode = Node<{ text: string }, 'text'>; export type TextNode = Node<{ text: string }, 'text'>;
export type ResultNode = Node<{}, 'result'>; export type ResultNode = Node<{}, 'result'>;
export type UppercaseNode = Node<{}, 'uppercase'>; export type UppercaseNode = Node<{}, 'uppercase'>;
export type MyNode = Node<{ text: string }, 'text'> | Node<{}, 'result'> | Node<{}, 'uppercase'>; export type MyNode = TextNode | ResultNode | UppercaseNode;
const nodeTypes = { const nodeTypes = {
text: TextNode, text: TextNode,
packages/react/src/components/NodeWrapper/index.tsx
+4 -4
View File
@@ -17,9 +17,9 @@ import { useDrag } from '../../hooks/useDrag';
import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions'; import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions';
import { handleNodeClick } from '../Nodes/utils'; import { handleNodeClick } from '../Nodes/utils';
import { arrowKeyDiffs, builtinNodeTypes } from './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, id,
onClick, onClick,
onMouseEnter, onMouseEnter,
@@ -40,9 +40,9 @@ export function NodeWrapper({
nodeExtent, nodeExtent,
nodeOrigin, nodeOrigin,
onError, onError,
}: NodeWrapperProps) { }: NodeWrapperProps<NodeType>) {
const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => { 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 const positionAbsolute = nodeExtent
? clampPosition(node.computed?.positionAbsolute, nodeExtent) ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
packages/react/src/components/NodesSelection/index.tsx
+8 -4
View File
@@ -14,8 +14,8 @@ import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions';
import { arrowKeyDiffs } from '../NodeWrapper/utils'; import { arrowKeyDiffs } from '../NodeWrapper/utils';
import type { Node, ReactFlowState } from '../../types'; import type { Node, ReactFlowState } from '../../types';
export type NodesSelectionProps = { export type NodesSelectionProps<NodeType> = {
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void; onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
noPanClassName?: string; noPanClassName?: string;
disableKeyboardA11y: boolean; 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 store = useStoreApi();
const { width, height, transformString, userSelectionActive } = useStore(selector, shallow); const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
const updatePositions = useUpdateNodePositions(); const updatePositions = useUpdateNodePositions();
@@ -58,7 +62,7 @@ export function NodesSelection({ onSelectionContextMenu, noPanClassName, disable
const onContextMenu = onSelectionContextMenu const onContextMenu = onSelectionContextMenu
? (event: MouseEvent) => { ? (event: MouseEvent) => {
const selectedNodes = store.getState().nodes.filter((n) => n.selected); const selectedNodes = store.getState().nodes.filter((n) => n.selected);
onSelectionContextMenu(event, selectedNodes); onSelectionContextMenu(event, selectedNodes as NodeType[]);
} }
: undefined; : undefined;
packages/react/src/components/StoreUpdater/index.tsx
+5 -3
View File
@@ -68,7 +68,9 @@ const reactFlowFieldsToTrack = [
] as const; ] as const;
type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number]; 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 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'] as const; const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'] as const;
@@ -84,7 +86,7 @@ const selector = (s: ReactFlowState) => ({
reset: s.reset, reset: s.reset,
}); });
export function StoreUpdater(props: StoreUpdaterProps) { export function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterProps<NodeType>) {
const { const {
setNodes, setNodes,
setEdges, 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 // these are values that are also passed directly to other components
// than the StoreUpdater. We can reduce the number of setStore calls // than the StoreUpdater. We can reduce the number of setStore calls
// by setting the same values here as prev fields. // by setting the same values here as prev fields.
packages/react/src/container/FlowRenderer/index.tsx
+7 -7
View File
@@ -7,10 +7,10 @@ import { GraphViewProps } from '../GraphView';
import { ZoomPane } from '../ZoomPane'; import { ZoomPane } from '../ZoomPane';
import { Pane } from '../Pane'; import { Pane } from '../Pane';
import { NodesSelection } from '../../components/NodesSelection'; import { NodesSelection } from '../../components/NodesSelection';
import type { ReactFlowState } from '../../types'; import type { ReactFlowState, Node } from '../../types';
export type FlowRendererProps = Omit< export type FlowRendererProps<NodeType extends Node> = Omit<
GraphViewProps, GraphViewProps<NodeType>,
| 'snapToGrid' | 'snapToGrid'
| 'nodeTypes' | 'nodeTypes'
| 'edgeTypes' | 'edgeTypes'
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive }; return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
}; };
const FlowRendererComponent = ({ function FlowRendererComponent<NodeType extends Node>({
children, children,
onPaneClick, onPaneClick,
onPaneMouseEnter, onPaneMouseEnter,
@@ -68,7 +68,7 @@ const FlowRendererComponent = ({
disableKeyboardA11y, disableKeyboardA11y,
onViewportChange, onViewportChange,
isControlledViewport, isControlledViewport,
}: FlowRendererProps) => { }: FlowRendererProps<NodeType>) {
const { nodesSelectionActive, userSelectionActive } = useStore(selector); const { nodesSelectionActive, userSelectionActive } = useStore(selector);
const selectionKeyPressed = useKeyPress(selectionKeyCode); const selectionKeyPressed = useKeyPress(selectionKeyCode);
const panActivationKeyPressed = useKeyPress(panActivationKeyCode); const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
@@ -125,8 +125,8 @@ const FlowRendererComponent = ({
</Pane> </Pane>
</ZoomPane> </ZoomPane>
); );
}; }
FlowRendererComponent.displayName = 'FlowRenderer'; FlowRendererComponent.displayName = 'FlowRenderer';
export const FlowRenderer = memo(FlowRendererComponent); export const FlowRenderer = memo(FlowRendererComponent) as typeof FlowRendererComponent;
packages/react/src/container/GraphView/index.tsx
+9 -9
View File
@@ -8,15 +8,15 @@ import { useOnInitHandler } from '../../hooks/useOnInitHandler';
import { useViewportSync } from '../../hooks/useViewportSync'; import { useViewportSync } from '../../hooks/useViewportSync';
import { ConnectionLineWrapper } from '../../components/ConnectionLine'; import { ConnectionLineWrapper } from '../../components/ConnectionLine';
import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning'; import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
import type { ReactFlowProps } from '../../types'; import type { Node, ReactFlowProps } from '../../types';
export type GraphViewProps = Omit< export type GraphViewProps<NodeType extends Node = Node> = Omit<
ReactFlowProps, ReactFlowProps<NodeType>,
'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect' 'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
> & > &
Required< Required<
Pick< Pick<
ReactFlowProps, ReactFlowProps<NodeType>,
| 'selectionKeyCode' | 'selectionKeyCode'
| 'deleteKeyCode' | 'deleteKeyCode'
| 'multiSelectionKeyCode' | 'multiSelectionKeyCode'
@@ -38,7 +38,7 @@ export type GraphViewProps = Omit<
rfId: string; rfId: string;
}; };
function GraphViewComponent({ function GraphViewComponent<NodeType extends Node = Node>({
nodeTypes, nodeTypes,
edgeTypes, edgeTypes,
onInit, onInit,
@@ -102,7 +102,7 @@ function GraphViewComponent({
rfId, rfId,
viewport, viewport,
onViewportChange, onViewportChange,
}: GraphViewProps) { }: GraphViewProps<NodeType>) {
useNodeOrEdgeTypesWarning(nodeTypes); useNodeOrEdgeTypesWarning(nodeTypes);
useNodeOrEdgeTypesWarning(edgeTypes); useNodeOrEdgeTypesWarning(edgeTypes);
@@ -110,7 +110,7 @@ function GraphViewComponent({
useViewportSync(viewport); useViewportSync(viewport);
return ( return (
<FlowRenderer <FlowRenderer<NodeType>
onPaneClick={onPaneClick} onPaneClick={onPaneClick}
onPaneMouseEnter={onPaneMouseEnter} onPaneMouseEnter={onPaneMouseEnter}
onPaneMouseMove={onPaneMouseMove} onPaneMouseMove={onPaneMouseMove}
@@ -174,7 +174,7 @@ function GraphViewComponent({
/> />
<div className="react-flow__edgelabel-renderer" /> <div className="react-flow__edgelabel-renderer" />
<div className="react-flow__viewport-portal" /> <div className="react-flow__viewport-portal" />
<NodeRenderer <NodeRenderer<NodeType>
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
onNodeClick={onNodeClick} onNodeClick={onNodeClick}
onNodeDoubleClick={onNodeDoubleClick} onNodeDoubleClick={onNodeDoubleClick}
@@ -197,4 +197,4 @@ function GraphViewComponent({
GraphViewComponent.displayName = 'GraphView'; GraphViewComponent.displayName = 'GraphView';
export const GraphView = memo(GraphViewComponent); export const GraphView = memo(GraphViewComponent) as typeof GraphViewComponent;
packages/react/src/container/NodeRenderer/index.tsx
+7 -7
View File
@@ -7,10 +7,10 @@ import { containerStyle } from '../../styles/utils';
import { GraphViewProps } from '../GraphView'; import { GraphViewProps } from '../GraphView';
import { useResizeObserver } from './useResizeObserver'; import { useResizeObserver } from './useResizeObserver';
import { NodeWrapper } from '../../components/NodeWrapper'; import { NodeWrapper } from '../../components/NodeWrapper';
import type { ReactFlowState } from '../../types'; import type { Node, ReactFlowState } from '../../types';
export type NodeRendererProps = Pick< export type NodeRendererProps<NodeType extends Node> = Pick<
GraphViewProps, GraphViewProps<NodeType>,
| 'onNodeClick' | 'onNodeClick'
| 'onNodeDoubleClick' | 'onNodeDoubleClick'
| 'onNodeMouseEnter' | 'onNodeMouseEnter'
@@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => ({
onError: s.onError, 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 { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements); const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
const resizeObserver = useResizeObserver(); const resizeObserver = useResizeObserver();
@@ -67,7 +67,7 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
// moved into `NodeComponentWrapper`. This ensures they are // moved into `NodeComponentWrapper`. This ensures they are
// memorized – so if `NodeRenderer` *has* to rerender, it only // memorized – so if `NodeRenderer` *has* to rerender, it only
// needs to regenerate the list of nodes, nothing else. // needs to regenerate the list of nodes, nothing else.
<NodeWrapper <NodeWrapper<NodeType>
key={nodeId} key={nodeId}
id={nodeId} id={nodeId}
nodeTypes={props.nodeTypes} nodeTypes={props.nodeTypes}
@@ -94,8 +94,8 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
})} })}
</div> </div>
); );
}; }
NodeRendererComponent.displayName = 'NodeRenderer'; NodeRendererComponent.displayName = 'NodeRenderer';
export const NodeRenderer = memo(NodeRendererComponent); export const NodeRenderer = memo(NodeRendererComponent) as typeof NodeRendererComponent;
packages/react/src/container/ReactFlow/index.tsx
+272 -268
View File
@@ -1,4 +1,4 @@
import { forwardRef, type CSSProperties } from 'react'; import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import { import {
ConnectionLineType, ConnectionLineType,
@@ -17,7 +17,7 @@ import { StoreUpdater } from '../../components/StoreUpdater';
import { useColorModeClass } from '../../hooks/useColorModeClass'; import { useColorModeClass } from '../../hooks/useColorModeClass';
import { GraphView } from '../GraphView'; import { GraphView } from '../GraphView';
import { Wrapper } from './Wrapper'; import { Wrapper } from './Wrapper';
import type { ReactFlowProps, ReactFlowRefType } from '../../types'; import type { ReactFlowProps, ReactFlowRefType, Node } from '../../types';
export const initNodeOrigin: NodeOrigin = [0, 0]; export const initNodeOrigin: NodeOrigin = [0, 0];
const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 }; const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -30,272 +30,276 @@ const wrapperStyle: CSSProperties = {
zIndex: 0, zIndex: 0,
}; };
const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>( declare module 'react' {
( function forwardRef<T, P = Record<string, never>>(
{ render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
nodes, ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
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);
return ( function ReactFlow<NodeType extends Node = Node>(
<div {
{...rest} nodes,
style={{ ...style, ...wrapperStyle }} edges,
ref={ref} defaultNodes,
className={cc(['react-flow', className, colorModeClassName])} defaultEdges,
data-testid="rf__wrapper" className,
id={id} nodeTypes,
> edgeTypes,
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}> onNodeClick,
<GraphView onEdgeClick,
onInit={onInit} onInit,
onNodeClick={onNodeClick} onMove,
onEdgeClick={onEdgeClick} onMoveStart,
onNodeMouseEnter={onNodeMouseEnter} onMoveEnd,
onNodeMouseMove={onNodeMouseMove} onConnect,
onNodeMouseLeave={onNodeMouseLeave} onConnectStart,
onNodeContextMenu={onNodeContextMenu} onConnectEnd,
onNodeDoubleClick={onNodeDoubleClick} onClickConnectStart,
nodeTypes={nodeTypes} onClickConnectEnd,
edgeTypes={edgeTypes} onNodeMouseEnter,
connectionLineType={connectionLineType} onNodeMouseMove,
connectionLineStyle={connectionLineStyle} onNodeMouseLeave,
connectionLineComponent={connectionLineComponent} onNodeContextMenu,
connectionLineContainerStyle={connectionLineContainerStyle} onNodeDoubleClick,
selectionKeyCode={selectionKeyCode} onNodeDragStart,
selectionOnDrag={selectionOnDrag} onNodeDrag,
selectionMode={selectionMode} onNodeDragStop,
deleteKeyCode={deleteKeyCode} onNodesDelete,
multiSelectionKeyCode={multiSelectionKeyCode} onEdgesDelete,
panActivationKeyCode={panActivationKeyCode} onDelete,
zoomActivationKeyCode={zoomActivationKeyCode} onSelectionChange,
onlyRenderVisibleElements={onlyRenderVisibleElements} onSelectionDragStart,
defaultViewport={defaultViewport} onSelectionDrag,
translateExtent={translateExtent} onSelectionDragStop,
minZoom={minZoom} onSelectionContextMenu,
maxZoom={maxZoom} onSelectionStart,
preventScrolling={preventScrolling} onSelectionEnd,
zoomOnScroll={zoomOnScroll} onBeforeDelete,
zoomOnPinch={zoomOnPinch} connectionMode,
zoomOnDoubleClick={zoomOnDoubleClick} connectionLineType = ConnectionLineType.Bezier,
panOnScroll={panOnScroll} connectionLineStyle,
panOnScrollSpeed={panOnScrollSpeed} connectionLineComponent,
panOnScrollMode={panOnScrollMode} connectionLineContainerStyle,
panOnDrag={panOnDrag} deleteKeyCode = 'Backspace',
onPaneClick={onPaneClick} selectionKeyCode = 'Shift',
onPaneMouseEnter={onPaneMouseEnter} selectionOnDrag = false,
onPaneMouseMove={onPaneMouseMove} selectionMode = SelectionMode.Full,
onPaneMouseLeave={onPaneMouseLeave} panActivationKeyCode = 'Space',
onPaneScroll={onPaneScroll} multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
onPaneContextMenu={onPaneContextMenu} zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
onSelectionContextMenu={onSelectionContextMenu} snapToGrid,
onSelectionStart={onSelectionStart} snapGrid,
onSelectionEnd={onSelectionEnd} onlyRenderVisibleElements = false,
onEdgeUpdate={onEdgeUpdate} selectNodesOnDrag,
onEdgeContextMenu={onEdgeContextMenu} nodesDraggable,
onEdgeDoubleClick={onEdgeDoubleClick} nodesConnectable,
onEdgeMouseEnter={onEdgeMouseEnter} nodesFocusable,
onEdgeMouseMove={onEdgeMouseMove} nodeOrigin = initNodeOrigin,
onEdgeMouseLeave={onEdgeMouseLeave} edgesFocusable,
onEdgeUpdateStart={onEdgeUpdateStart} edgesUpdatable,
onEdgeUpdateEnd={onEdgeUpdateEnd} elementsSelectable = true,
edgeUpdaterRadius={edgeUpdaterRadius} defaultViewport = initDefaultViewport,
defaultMarkerColor={defaultMarkerColor} minZoom = 0.5,
noDragClassName={noDragClassName} maxZoom = 2,
noWheelClassName={noWheelClassName} translateExtent = infiniteExtent,
noPanClassName={noPanClassName} preventScrolling = true,
rfId={rfId} nodeExtent,
disableKeyboardA11y={disableKeyboardA11y} defaultMarkerColor = '#b1b1b7',
nodeOrigin={nodeOrigin} zoomOnScroll = true,
nodeExtent={nodeExtent} zoomOnPinch = true,
viewport={viewport} panOnScroll = false,
onViewportChange={onViewportChange} panOnScrollSpeed = 0.5,
/> panOnScrollMode = PanOnScrollMode.Free,
<StoreUpdater zoomOnDoubleClick = true,
nodes={nodes} panOnDrag = true,
edges={edges} onPaneClick,
defaultNodes={defaultNodes} onPaneMouseEnter,
defaultEdges={defaultEdges} onPaneMouseMove,
onConnect={onConnect} onPaneMouseLeave,
onConnectStart={onConnectStart} onPaneScroll,
onConnectEnd={onConnectEnd} onPaneContextMenu,
onClickConnectStart={onClickConnectStart} children,
onClickConnectEnd={onClickConnectEnd} onEdgeUpdate,
nodesDraggable={nodesDraggable} onEdgeContextMenu,
nodesConnectable={nodesConnectable} onEdgeDoubleClick,
nodesFocusable={nodesFocusable} onEdgeMouseEnter,
edgesFocusable={edgesFocusable} onEdgeMouseMove,
edgesUpdatable={edgesUpdatable} onEdgeMouseLeave,
elementsSelectable={elementsSelectable} onEdgeUpdateStart,
elevateNodesOnSelect={elevateNodesOnSelect} onEdgeUpdateEnd,
elevateEdgesOnSelect={elevateEdgesOnSelect} edgeUpdaterRadius = 10,
minZoom={minZoom} onNodesChange,
maxZoom={maxZoom} onEdgesChange,
nodeExtent={nodeExtent} noDragClassName = 'nodrag',
onNodesChange={onNodesChange} noWheelClassName = 'nowheel',
onEdgesChange={onEdgesChange} noPanClassName = 'nopan',
snapToGrid={snapToGrid} fitView,
snapGrid={snapGrid} fitViewOptions,
connectionMode={connectionMode} connectOnClick,
translateExtent={translateExtent} attributionPosition,
connectOnClick={connectOnClick} proOptions,
defaultEdgeOptions={defaultEdgeOptions} defaultEdgeOptions,
fitView={fitView} elevateNodesOnSelect,
fitViewOptions={fitViewOptions} elevateEdgesOnSelect,
onNodesDelete={onNodesDelete} disableKeyboardA11y = false,
onEdgesDelete={onEdgesDelete} autoPanOnConnect,
onDelete={onDelete} autoPanOnNodeDrag,
onNodeDragStart={onNodeDragStart} connectionRadius,
onNodeDrag={onNodeDrag} isValidConnection,
onNodeDragStop={onNodeDragStop} onError,
onSelectionDrag={onSelectionDrag} style,
onSelectionDragStart={onSelectionDragStart} id,
onSelectionDragStop={onSelectionDragStop} nodeDragThreshold,
onMove={onMove} viewport,
onMoveStart={onMoveStart} onViewportChange,
onMoveEnd={onMoveEnd} width,
noPanClassName={noPanClassName} height,
nodeOrigin={nodeOrigin} colorMode = 'light',
rfId={rfId} ...rest
autoPanOnConnect={autoPanOnConnect} }: ReactFlowProps<NodeType>,
autoPanOnNodeDrag={autoPanOnNodeDrag} ref: ForwardedRef<ReactFlowRefType>
onError={onError} ) {
connectionRadius={connectionRadius} const rfId = id || '1';
isValidConnection={isValidConnection} const colorModeClassName = useColorModeClass(colorMode);
selectNodesOnDrag={selectNodesOnDrag}
nodeDragThreshold={nodeDragThreshold}
onBeforeDelete={onBeforeDelete}
/>
<SelectionListener onSelectionChange={onSelectionChange} />
{children}
<Attribution proOptions={proOptions} position={attributionPosition} />
<A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
</Wrapper>
</div>
);
}
);
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>;
packages/react/src/hooks/useNodesEdgesState.ts
+8 -8
View File
@@ -1,7 +1,7 @@
import { useState, useCallback, type Dispatch, type SetStateAction } from 'react'; import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
import { applyNodeChanges, applyEdgeChanges } from '../utils/changes'; 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. * 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 * @param initialNodes
* @returns an array [nodes, setNodes, onNodesChange] * @returns an array [nodes, setNodes, onNodesChange]
*/ */
export function useNodesState<NodeType extends Node = Node>( export function useNodesState<NodeType extends Node>(
initialNodes: NodeType[] initialNodes: NodeType[]
): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange<NodeType>[]) => void] { ): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange<NodeType>] {
const [nodes, setNodes] = useState(initialNodes); const [nodes, setNodes] = useState(initialNodes);
const onNodesChange = useCallback( const onNodesChange: OnNodesChange<NodeType> = useCallback(
(changes: NodeChange<NodeType>[]) => setNodes((nds) => applyNodeChanges(changes, nds)), (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
[] []
); );
@@ -31,10 +31,10 @@ export function useNodesState<NodeType extends Node = Node>(
*/ */
export function useEdgesState<EdgeType extends Edge = Edge>( export function useEdgesState<EdgeType extends Edge = Edge>(
initialEdges: EdgeType[] initialEdges: EdgeType[]
): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange<EdgeType>[]) => void] { ): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>] {
const [edges, setEdges] = useState(initialEdges); const [edges, setEdges] = useState(initialEdges);
const onEdgesChange = useCallback( const onEdgesChange: OnEdgesChange<EdgeType> = useCallback(
(changes: EdgeChange<EdgeType>[]) => setEdges((eds) => applyEdgeChanges(changes, eds)), (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
[] []
); );
packages/react/src/hooks/useOnInitHandler.ts
+3 -3
View File
@@ -1,15 +1,15 @@
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { useReactFlow } from './useReactFlow'; import { useReactFlow } from './useReactFlow';
import type { OnInit } from '../types'; import type { OnInit, Node } from '../types';
/** /**
* Hook for calling onInit handler. * Hook for calling onInit handler.
* *
* @internal * @internal
*/ */
export function useOnInitHandler(onInit: OnInit | undefined) { export function useOnInitHandler<NodeType extends Node = Node>(onInit: OnInit<NodeType> | undefined) {
const rfInstance = useReactFlow(); const rfInstance = useReactFlow<NodeType>();
const isInitialized = useRef<boolean>(false); const isInitialized = useRef<boolean>(false);
useEffect(() => { useEffect(() => {
packages/react/src/hooks/useStore.ts
+2 -2
View File
@@ -31,7 +31,7 @@ function useStore<StateSlice = ExtractState>(
return useZustandStore(store, selector, equalityFn); return useZustandStore(store, selector, equalityFn);
} }
const useStoreApi = () => { function useStoreApi() {
const store = useContext(StoreContext); const store = useContext(StoreContext);
if (store === null) { if (store === null) {
@@ -47,6 +47,6 @@ const useStoreApi = () => {
}), }),
[store] [store]
); );
}; }
export { useStore, useStoreApi }; export { useStore, useStoreApi };
packages/react/src/types/component-props.ts
+17 -17
View File
@@ -50,7 +50,7 @@ import type {
* ReactFlow component props. * ReactFlow component props.
* @public * @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. /** An array of nodes to render in a controlled flow.
* @example * @example
* const nodes = [ * 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. /** An array of edges to render in a controlled flow.
* @example * @example
* const edges = [ * const edges = [
@@ -75,7 +75,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
*/ */
edges?: Edge[]; edges?: Edge[];
/** The initial nodes to render in an uncontrolled flow. */ /** The initial nodes to render in an uncontrolled flow. */
defaultNodes?: Node[]; defaultNodes?: NodeType[];
/** The initial edges to render in an uncontrolled flow. */ /** The initial edges to render in an uncontrolled flow. */
defaultEdges?: Edge[]; defaultEdges?: Edge[];
/** Defaults to be applied to all new edges that are added to the flow. /** 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; defaultEdgeOptions?: DefaultEdgeOptions;
/** This event handler is called when a user clicks on a node */ /** 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 */ /** 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 */ /** 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 */ /** 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 */ /** 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 */ /** 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 */ /** 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 */ /** 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 */ /** 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 */ /** This event handler is called when a user clicks on an edge */
onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
/** This event handler is called when a user right clicks on an edge */ /** 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} />) * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
*/ */
onNodesChange?: OnNodesChange; onNodesChange?: OnNodesChange<NodeType>;
/** This event handler is called when a Edge is updated /** This event handler is called when a Edge is updated
* @example // Use EdgesState hook to create edges and get onEdgesChange handler * @example // Use EdgesState hook to create edges and get onEdgesChange handler
* import ReactFlow, { useEdgesState } from '@xyflow/react'; * import ReactFlow, { useEdgesState } from '@xyflow/react';
@@ -166,7 +166,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
*/ */
onEdgesChange?: OnEdgesChange; onEdgesChange?: OnEdgesChange;
/** This event handler gets called when a Node is deleted */ /** 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 */ /** This event handler gets called when a Edge is deleted */
onEdgesDelete?: OnEdgesDelete; onEdgesDelete?: OnEdgesDelete;
/** This event handler gets called when a Node or Edge is deleted */ /** 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; onSelectionDragStop?: SelectionDragHandler;
onSelectionStart?: (event: ReactMouseEvent) => void; onSelectionStart?: (event: ReactMouseEvent) => void;
onSelectionEnd?: (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. /** 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. * 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; onClickConnectStart?: OnConnectStart;
onClickConnectEnd?: OnConnectEnd; onClickConnectEnd?: OnConnectEnd;
/** This event handler gets called when a flow has finished initializing */ /** 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. */ /** This event handler is called while the user is either panning or zooming the viewport. */
onMove?: OnMove; onMove?: OnMove;
/** This event handler gets called when a user starts to pan or zoom the viewport */ /** 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 */ /** This event handler gets called when mouse leaves the pane */
onPaneMouseLeave?: (event: ReactMouseEvent) => void; 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. */ /** 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. /** Custom node types to be available in a flow.
* *
* React Flow matches a node's type to a component in the nodeTypes object. * React Flow matches a node's type to a component in the nodeTypes object.
packages/react/src/types/nodes.ts
+7 -7
View File
@@ -26,18 +26,18 @@ export type OnNodeDrag<NodeType extends Node = Node> = (
nodes: NodeType[] nodes: NodeType[]
) => void; ) => void;
export type NodeWrapperProps = { export type NodeWrapperProps<NodeType extends Node> = {
id: string; id: string;
nodesConnectable: boolean; nodesConnectable: boolean;
elementsSelectable: boolean; elementsSelectable: boolean;
nodesDraggable: boolean; nodesDraggable: boolean;
nodesFocusable: boolean; nodesFocusable: boolean;
onClick?: NodeMouseHandler; onClick?: NodeMouseHandler<NodeType>;
onDoubleClick?: NodeMouseHandler; onDoubleClick?: NodeMouseHandler<NodeType>;
onMouseEnter?: NodeMouseHandler; onMouseEnter?: NodeMouseHandler<NodeType>;
onMouseMove?: NodeMouseHandler; onMouseMove?: NodeMouseHandler<NodeType>;
onMouseLeave?: NodeMouseHandler; onMouseLeave?: NodeMouseHandler<NodeType>;
onContextMenu?: NodeMouseHandler; onContextMenu?: NodeMouseHandler<NodeType>;
resizeObserver: ResizeObserver | null; resizeObserver: ResizeObserver | null;
noDragClassName: string; noDragClassName: string;
noPanClassName: string; noPanClassName: string;
packages/react/src/types/store.ts
+13 -13
View File
@@ -45,17 +45,17 @@ import type {
OnBeforeDelete, OnBeforeDelete,
} from '.'; } from '.';
export type ReactFlowStore = { export type ReactFlowStore<NodeType extends Node> = {
rfId: string; rfId: string;
width: number; width: number;
height: number; height: number;
transform: Transform; transform: Transform;
nodes: Node[]; nodes: NodeType[];
nodeLookup: NodeLookup<Node>; nodeLookup: NodeLookup<NodeType>;
edges: Edge[]; edges: Edge[];
edgeLookup: EdgeLookup<Edge>; edgeLookup: EdgeLookup<Edge>;
connectionLookup: ConnectionLookup; connectionLookup: ConnectionLookup;
onNodesChange: OnNodesChange | null; onNodesChange: OnNodesChange<NodeType> | null;
onEdgesChange: OnEdgesChange | null; onEdgesChange: OnEdgesChange | null;
hasDefaultNodes: boolean; hasDefaultNodes: boolean;
hasDefaultEdges: boolean; hasDefaultEdges: boolean;
@@ -98,9 +98,9 @@ export type ReactFlowStore = {
connectionEndHandle: ConnectingHandle | null; connectionEndHandle: ConnectingHandle | null;
connectionClickStartHandle: ConnectingHandle | null; connectionClickStartHandle: ConnectingHandle | null;
onNodeDragStart?: OnNodeDrag; onNodeDragStart?: OnNodeDrag<NodeType>;
onNodeDrag?: OnNodeDrag; onNodeDrag?: OnNodeDrag<NodeType>;
onNodeDragStop?: OnNodeDrag; onNodeDragStop?: OnNodeDrag<NodeType>;
onSelectionDragStart?: OnSelectionDrag; onSelectionDragStart?: OnSelectionDrag;
onSelectionDrag?: OnSelectionDrag; onSelectionDrag?: OnSelectionDrag;
@@ -147,10 +147,10 @@ export type ReactFlowStore = {
lib: string; lib: string;
}; };
export type ReactFlowActions = { export type ReactFlowActions<NodeType extends Node> = {
setNodes: (nodes: Node[]) => void; setNodes: (nodes: NodeType[]) => void;
setEdges: (edges: Edge[]) => void; setEdges: (edges: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void; setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: Edge[]) => void;
updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void; updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void;
updateNodePositions: UpdateNodePositions; updateNodePositions: UpdateNodePositions;
resetSelectedElements: () => void; resetSelectedElements: () => void;
@@ -164,9 +164,9 @@ export type ReactFlowActions = {
cancelConnection: () => void; cancelConnection: () => void;
updateConnection: UpdateConnection; updateConnection: UpdateConnection;
reset: () => void; reset: () => void;
triggerNodeChanges: (changes: NodeChange[]) => void; triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
panBy: PanBy; 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>;