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

refactor(types): use same structure for nodes and edges

Browse Source
This commit is contained in:
moklick
2024-02-17 15:45:10 +01:00
parent 776f6ce0b7
commit ad7403cc75
24 changed files with 176 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
+7 -7
View File
@@ -5,20 +5,20 @@ import { EdgeAnchor } from '../Edges/EdgeAnchor';
import type { EdgeWrapperProps, Edge } from '../../types/edges';
import { useStoreApi } from '../../hooks/useStore';
type EdgeUpdateAnchorsProps = {
edge: Edge;
type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
edge: EdgeType;
isUpdatable: boolean | 'source' | 'target';
edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
sourceHandleId: Edge['sourceHandle'];
targetHandleId: Edge['targetHandle'];
onEdgeUpdate: EdgeWrapperProps['onEdgeUpdate'];
onEdgeUpdateStart: EdgeWrapperProps['onEdgeUpdateStart'];
onEdgeUpdateEnd: EdgeWrapperProps['onEdgeUpdateEnd'];
onEdgeUpdate: EdgeWrapperProps<EdgeType>['onEdgeUpdate'];
onEdgeUpdateStart: EdgeWrapperProps<EdgeType>['onEdgeUpdateStart'];
onEdgeUpdateEnd: EdgeWrapperProps<EdgeType>['onEdgeUpdateEnd'];
setUpdateHover: (hover: boolean) => void;
setUpdating: (updating: boolean) => void;
} & EdgePosition;
export function EdgeUpdateAnchors({
export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
isUpdatable,
edgeUpdaterRadius,
edge,
@@ -35,7 +35,7 @@ export function EdgeUpdateAnchors({
onEdgeUpdateEnd,
setUpdating,
setUpdateHover,
}: EdgeUpdateAnchorsProps) {
}: EdgeUpdateAnchorsProps<EdgeType>) {
const store = useStoreApi();
const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
packages/react/src/components/EdgeWrapper/index.tsx
+5 -5
View File
@@ -13,9 +13,9 @@ import { useStoreApi, useStore } from '../../hooks/useStore';
import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
import { builtinEdgeTypes, nullPosition } from './utils';
import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
import type { EdgeWrapperProps } from '../../types';
import type { Edge, EdgeWrapperProps } from '../../types';
export function EdgeWrapper({
export function EdgeWrapper<EdgeType extends Edge = Edge>({
id,
edgesFocusable,
edgesUpdatable,
@@ -34,8 +34,8 @@ export function EdgeWrapper({
edgeTypes,
noPanClassName,
onError,
}: EdgeWrapperProps): JSX.Element | null {
let edge = useStore((s) => s.edgeLookup.get(id)!);
}: EdgeWrapperProps<EdgeType>): JSX.Element | null {
let edge = useStore((s) => s.edgeLookup.get(id)!) as EdgeType;
const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
@@ -236,7 +236,7 @@ export function EdgeWrapper({
/>
)}
{isUpdatable && (
<EdgeUpdateAnchors
<EdgeUpdateAnchors<EdgeType>
edge={edge}
isUpdatable={isUpdatable}
edgeUpdaterRadius={edgeUpdaterRadius}
packages/react/src/components/StoreUpdater/index.tsx
+8 -3
View File
@@ -68,7 +68,10 @@ const reactFlowFieldsToTrack = [
] as const;
type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
type StoreUpdaterProps<NodeType extends Node = Node> = Pick<ReactFlowProps<NodeType>, ReactFlowFieldsToTrack> & {
type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<
ReactFlowProps<NodeType, EdgeType>,
ReactFlowFieldsToTrack
> & {
rfId: string;
};
@@ -86,7 +89,9 @@ const selector = (s: ReactFlowState) => ({
reset: s.reset,
});
export function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterProps<NodeType>) {
export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
props: StoreUpdaterProps<NodeType, EdgeType>
) {
const {
setNodes,
setEdges,
@@ -108,7 +113,7 @@ export function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterPr
};
}, []);
const previousFields = useRef<Partial<StoreUpdaterProps<NodeType>>>({
const previousFields = useRef<Partial<StoreUpdaterProps<NodeType, EdgeType>>>({
// 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.
packages/react/src/container/EdgeRenderer/index.tsx
+7 -7
View File
@@ -6,10 +6,10 @@ import { useVisibleEdgeIds } from '../../hooks/useVisibleEdgeIds';
import MarkerDefinitions from './MarkerDefinitions';
import { GraphViewProps } from '../GraphView';
import { EdgeWrapper } from '../../components/EdgeWrapper';
import type { ReactFlowState } from '../../types';
import type { Edge, ReactFlowState, Node } from '../../types';
type EdgeRendererProps = Pick<
GraphViewProps,
type EdgeRendererProps<EdgeType extends Edge = Edge> = Pick<
GraphViewProps<Node, EdgeType>,
| 'onEdgeClick'
| 'onEdgeDoubleClick'
| 'defaultMarkerColor'
@@ -40,7 +40,7 @@ const selector = (s: ReactFlowState) => ({
onError: s.onError,
});
function EdgeRendererComponent({
function EdgeRendererComponent<EdgeType extends Edge = Edge>({
defaultMarkerColor,
onlyRenderVisibleElements,
rfId,
@@ -56,7 +56,7 @@ function EdgeRendererComponent({
onEdgeDoubleClick,
onEdgeUpdateStart,
onEdgeUpdateEnd,
}: EdgeRendererProps) {
}: EdgeRendererProps<EdgeType>) {
const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
@@ -66,7 +66,7 @@ function EdgeRendererComponent({
{edgeIds.map((id) => {
return (
<EdgeWrapper
<EdgeWrapper<EdgeType>
key={id}
id={id}
edgesFocusable={edgesFocusable}
@@ -95,4 +95,4 @@ function EdgeRendererComponent({
EdgeRendererComponent.displayName = 'EdgeRenderer';
export const EdgeRenderer = memo(EdgeRendererComponent);
export const EdgeRenderer = memo(EdgeRendererComponent) as typeof EdgeRendererComponent;
packages/react/src/container/FlowRenderer/index.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { Pane } from '../Pane';
import { NodesSelection } from '../../components/NodesSelection';
import type { ReactFlowState, Node } from '../../types';
export type FlowRendererProps<NodeType extends Node> = Omit<
export type FlowRendererProps<NodeType extends Node = Node> = Omit<
GraphViewProps<NodeType>,
| 'snapToGrid'
| 'nodeTypes'
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
};
function FlowRendererComponent<NodeType extends Node>({
function FlowRendererComponent<NodeType extends Node = Node>({
children,
onPaneClick,
onPaneMouseEnter,
packages/react/src/container/GraphView/index.tsx
+7 -7
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 { Node, ReactFlowProps } from '../../types';
import type { Edge, Node, ReactFlowProps } from '../../types';
export type GraphViewProps<NodeType extends Node = Node> = Omit<
ReactFlowProps<NodeType>,
export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<
ReactFlowProps<NodeType, EdgeType>,
'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
> &
Required<
Pick<
ReactFlowProps<NodeType>,
ReactFlowProps<NodeType, EdgeType>,
| 'selectionKeyCode'
| 'deleteKeyCode'
| 'multiSelectionKeyCode'
@@ -38,7 +38,7 @@ export type GraphViewProps<NodeType extends Node = Node> = Omit<
rfId: string;
};
function GraphViewComponent<NodeType extends Node = Node>({
function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge = Edge>({
nodeTypes,
edgeTypes,
onInit,
@@ -102,7 +102,7 @@ function GraphViewComponent<NodeType extends Node = Node>({
rfId,
viewport,
onViewportChange,
}: GraphViewProps<NodeType>) {
}: GraphViewProps<NodeType, EdgeType>) {
useNodeOrEdgeTypesWarning(nodeTypes);
useNodeOrEdgeTypesWarning(edgeTypes);
@@ -148,7 +148,7 @@ function GraphViewComponent<NodeType extends Node = Node>({
isControlledViewport={!!viewport}
>
<Viewport>
<EdgeRenderer
<EdgeRenderer<EdgeType>
edgeTypes={edgeTypes}
onEdgeClick={onEdgeClick}
onEdgeDoubleClick={onEdgeDoubleClick}
packages/react/src/container/ReactFlow/index.tsx
+5 -13
View File
@@ -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, Node } from '../../types';
import type { ReactFlowProps, ReactFlowRefType, Node, Edge } from '../../types';
export const initNodeOrigin: NodeOrigin = [0, 0];
const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -30,13 +30,7 @@ const wrapperStyle: CSSProperties = {
zIndex: 0,
};
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;
}
function ReactFlow<NodeType extends Node = Node>(
function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
{
nodes,
edges,
@@ -156,7 +150,7 @@ function ReactFlow<NodeType extends Node = Node>(
height,
colorMode = 'light',
...rest
}: ReactFlowProps<NodeType>,
}: ReactFlowProps<NodeType, EdgeType>,
ref: ForwardedRef<ReactFlowRefType>
) {
const rfId = id || '1';
@@ -172,7 +166,7 @@ function ReactFlow<NodeType extends Node = Node>(
id={id}
>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
<GraphView<NodeType>
<GraphView<NodeType, EdgeType>
onInit={onInit}
onNodeClick={onNodeClick}
onEdgeClick={onEdgeClick}
@@ -300,6 +294,4 @@ function ReactFlow<NodeType extends Node = Node>(
);
}
export default forwardRef(ReactFlow) as <T extends Node = Node>(
props: ReactFlowProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
) => ReturnType<typeof ReactFlow>;
export default forwardRef(ReactFlow) as typeof ReactFlow;
packages/react/src/hooks/useEdges.ts
+2 -2
View File
@@ -11,8 +11,8 @@ const edgesSelector = (state: ReactFlowState) => state.edges;
* @public
* @returns An array of edges
*/
export function useEdges<EdgeData>(): Edge<EdgeData>[] {
const edges = useStore(edgesSelector, shallow);
export function useEdges<EdgeType extends Edge = Edge>(): EdgeType[] {
const edges = useStore(edgesSelector, shallow) as EdgeType[];
return edges;
}
packages/react/src/hooks/useOnInitHandler.ts
+5 -3
View File
@@ -1,15 +1,17 @@
import { useEffect, useRef } from 'react';
import { useReactFlow } from './useReactFlow';
import type { OnInit, Node } from '../types';
import type { OnInit, Node, Edge } from '../types';
/**
* Hook for calling onInit handler.
*
* @internal
*/
export function useOnInitHandler<NodeType extends Node = Node>(onInit: OnInit<NodeType> | undefined) {
const rfInstance = useReactFlow<NodeType>();
export function useOnInitHandler<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
onInit: OnInit<NodeType, EdgeType> | undefined
) {
const rfInstance = useReactFlow<NodeType, EdgeType>();
const isInitialized = useRef<boolean>(false);
useEffect(() => {
packages/react/src/index.ts
-1
View File
@@ -53,7 +53,6 @@ export {
type OnConnectStart,
type OnConnect,
type OnConnectEnd,
type IsValidConnection,
type Viewport,
type SnapGrid,
PanOnScrollMode,
packages/react/src/types/component-props.ts
+22 -21
View File
@@ -18,7 +18,6 @@ import type {
HandleType,
SelectionMode,
OnError,
IsValidConnection,
ColorMode,
SnapGrid,
} from '@xyflow/system';
@@ -44,13 +43,15 @@ import type {
EdgeMouseHandler,
OnNodeDrag,
OnBeforeDelete,
IsValidConnection,
} from '.';
/**
* ReactFlow component props.
* @public
*/
export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
/** An array of nodes to render in a controlled flow.
* @example
* const nodes = [
@@ -73,11 +74,11 @@ export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLA
* }
* ];
*/
edges?: Edge[];
edges?: EdgeType[];
/** The initial nodes to render in an uncontrolled flow. */
defaultNodes?: NodeType[];
/** The initial edges to render in an uncontrolled flow. */
defaultEdges?: Edge[];
defaultEdges?: EdgeType[];
/** Defaults to be applied to all new edges that are added to the flow.
*
* Properties on a new edge will override these defaults if they exist.
@@ -117,20 +118,20 @@ export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLA
/** This event handler is called when a user stops dragging a node */
onNodeDragStop?: OnNodeDrag<NodeType>;
/** This event handler is called when a user clicks on an edge */
onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
onEdgeClick?: (event: ReactMouseEvent, edge: EdgeType) => void;
/** This event handler is called when a user right clicks on an edge */
onEdgeContextMenu?: EdgeMouseHandler;
onEdgeContextMenu?: EdgeMouseHandler<EdgeType>;
/** This event handler is called when mouse of a user enters an edge */
onEdgeMouseEnter?: EdgeMouseHandler;
onEdgeMouseEnter?: EdgeMouseHandler<EdgeType>;
/** This event handler is called when mouse of a user moves over an edge */
onEdgeMouseMove?: EdgeMouseHandler;
onEdgeMouseMove?: EdgeMouseHandler<EdgeType>;
/** This event handler is called when mouse of a user leaves an edge */
onEdgeMouseLeave?: EdgeMouseHandler;
onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
/** This event handler is called when a user double clicks on an edge */
onEdgeDoubleClick?: EdgeMouseHandler;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeDoubleClick?: EdgeMouseHandler<EdgeType>;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
/** This event handler is called when a Node is updated
* @example // Use NodesState hook to create edges and get onNodesChange handler
* import ReactFlow, { useNodesState } from '@xyflow/react';
@@ -164,19 +165,19 @@ export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLA
*
* return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
*/
onEdgesChange?: OnEdgesChange;
onEdgesChange?: OnEdgesChange<EdgeType>;
/** This event handler gets called when a Node is deleted */
onNodesDelete?: OnNodesDelete<NodeType>;
/** This event handler gets called when a Edge is deleted */
onEdgesDelete?: OnEdgesDelete;
onEdgesDelete?: OnEdgesDelete<EdgeType>;
/** This event handler gets called when a Node or Edge is deleted */
onDelete?: OnDelete;
onDelete?: OnDelete<NodeType, EdgeType>;
/** This event handler gets called when a user starts to drag a selection box */
onSelectionDragStart?: SelectionDragHandler;
onSelectionDragStart?: SelectionDragHandler<NodeType>;
/** This event handler gets called when a user drags a selection box */
onSelectionDrag?: SelectionDragHandler;
onSelectionDrag?: SelectionDragHandler<NodeType>;
/** This event handler gets called when a user stops dragging a selection box */
onSelectionDragStop?: SelectionDragHandler;
onSelectionDragStop?: SelectionDragHandler<NodeType>;
onSelectionStart?: (event: ReactMouseEvent) => void;
onSelectionEnd?: (event: ReactMouseEvent) => void;
onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => void;
@@ -201,7 +202,7 @@ export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLA
onClickConnectStart?: OnConnectStart;
onClickConnectEnd?: OnConnectEnd;
/** This event handler gets called when a flow has finished initializing */
onInit?: OnInit<NodeType>;
onInit?: OnInit<NodeType, EdgeType>;
/** 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 +224,7 @@ export interface ReactFlowProps<NodeType extends Node = Node> extends Omit<HTMLA
/** 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<NodeType>;
onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
/** Custom node types to be available in a flow.
*
* React Flow matches a node's type to a component in the nodeTypes object.
packages/react/src/types/edges.ts
+28 -25
View File
@@ -30,7 +30,14 @@ export type EdgeLabelOptions = {
export type EdgeUpdatable = boolean | HandleType;
export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> &
/**
* The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
* @public
*/
export type Edge<
EdgeData extends Record<string, unknown> = Record<string, unknown>,
EdgeType extends string | undefined = string | undefined
> = EdgeBase<EdgeData, EdgeType> &
EdgeLabelOptions & {
style?: CSSProperties;
className?: string;
@@ -38,45 +45,41 @@ export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> &
focusable?: boolean;
};
type SmoothStepEdgeType<T> = DefaultEdge<T> & {
type SmoothStepEdgeType<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData> & {
type: 'smoothstep';
pathOptions?: SmoothStepPathOptions;
};
type BezierEdgeType<T> = DefaultEdge<T> & {
type BezierEdgeType<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData> & {
type: 'default';
pathOptions?: BezierPathOptions;
};
type StepEdgeType<T> = DefaultEdge<T> & {
type StepEdgeType<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData> & {
type: 'step';
pathOptions?: StepPathOptions;
};
/**
* The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
* @public
*/
export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
export type BuiltInEdge = SmoothStepEdgeType | BezierEdgeType | StepEdgeType;
export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
export type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: ReactMouseEvent, edge: EdgeType) => void;
export type EdgeWrapperProps = {
export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
id: string;
edgesFocusable: boolean;
edgesUpdatable: boolean;
elementsSelectable: boolean;
noPanClassName: string;
onClick?: EdgeMouseHandler;
onDoubleClick?: EdgeMouseHandler;
onEdgeUpdate?: OnEdgeUpdateFunc;
onContextMenu?: EdgeMouseHandler;
onMouseEnter?: EdgeMouseHandler;
onMouseMove?: EdgeMouseHandler;
onMouseLeave?: EdgeMouseHandler;
onClick?: EdgeMouseHandler<EdgeType>;
onDoubleClick?: EdgeMouseHandler<EdgeType>;
onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
onContextMenu?: EdgeMouseHandler<EdgeType>;
onMouseEnter?: EdgeMouseHandler<EdgeType>;
onMouseMove?: EdgeMouseHandler<EdgeType>;
onMouseLeave?: EdgeMouseHandler<EdgeType>;
edgeUpdaterRadius?: number;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
rfId?: string;
edgeTypes?: EdgeTypes;
onError?: OnError;
@@ -94,10 +97,10 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
* Custom edge component props
* @public
*/
export type EdgeProps<T = any> = Pick<
Edge<T>,
'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
> &
export type EdgeProps<
EdgeData extends Record<string, unknown> = Record<string, unknown>,
EdgeType extends string | undefined = string | undefined
> = Pick<Edge<EdgeData, EdgeType>, 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'> &
EdgePosition &
EdgeLabelOptions & {
sourceHandleId?: string | null;
@@ -185,7 +188,7 @@ export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'tar
*/
export type SimpleBezierEdgeProps = EdgeComponentProps;
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
export type OnEdgeUpdateFunc<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
export type ConnectionLineComponentProps = {
connectionLineStyle?: CSSProperties;
packages/react/src/types/general.ts
+8 -2
View File
@@ -12,6 +12,7 @@ import {
XYPosition,
NodeProps,
OnBeforeDeleteBase,
Connection,
} from '@xyflow/system';
import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
@@ -21,8 +22,11 @@ export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<N
export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
export type OnNodesDelete<NodeType extends Node = Node> = (nodes: NodeType[]) => void;
export type OnEdgesDelete = (edges: Edge[]) => void;
export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
export type OnEdgesDelete<EdgeType extends Edge = Edge> = (edges: EdgeType[]) => void;
export type OnDelete<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (params: {
nodes: NodeType[];
edges: EdgeType[];
}) => void;
export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
@@ -139,3 +143,5 @@ export type OnBeforeDelete<NodeType extends Node = Node, EdgeType extends Edge =
NodeType,
EdgeType
>;
export type IsValidConnection<EdgeType extends Edge = Edge> = (edge: EdgeType | Connection) => boolean;
packages/react/src/types/nodes.ts
+4 -5
View File
@@ -7,11 +7,10 @@ import { NodeTypes } from './general';
* The node data structure that gets used for the nodes prop.
* @public
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
NodeData,
NodeType
> & {
export type Node<
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string | undefined = string | undefined
> = NodeBase<NodeData, NodeType> & {
style?: CSSProperties;
className?: string;
resizing?: boolean;
packages/react/src/types/store.ts
+16 -12
View File
@@ -21,7 +21,6 @@ import {
type OnMoveStart,
type OnMove,
type OnMoveEnd,
type IsValidConnection,
type UpdateConnection,
type EdgeLookup,
type ConnectionLookup,
@@ -43,9 +42,10 @@ import type {
OnDelete,
OnNodeDrag,
OnBeforeDelete,
IsValidConnection,
} from '.';
export type ReactFlowStore<NodeType extends Node = Node> = {
export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
rfId: string;
width: number;
height: number;
@@ -53,10 +53,10 @@ export type ReactFlowStore<NodeType extends Node = Node> = {
nodes: NodeType[];
nodeLookup: NodeLookup<NodeType>;
edges: Edge[];
edgeLookup: EdgeLookup<Edge>;
edgeLookup: EdgeLookup<EdgeType>;
connectionLookup: ConnectionLookup;
onNodesChange: OnNodesChange<NodeType> | null;
onEdgesChange: OnEdgesChange | null;
onEdgesChange: OnEdgesChange<EdgeType> | null;
hasDefaultNodes: boolean;
hasDefaultEdges: boolean;
domNode: HTMLDivElement | null;
@@ -124,8 +124,8 @@ export type ReactFlowStore<NodeType extends Node = Node> = {
fitViewDone: boolean;
fitViewOnInitOptions: FitViewOptions | undefined;
onNodesDelete?: OnNodesDelete;
onEdgesDelete?: OnEdgesDelete;
onNodesDelete?: OnNodesDelete<NodeType>;
onEdgesDelete?: OnEdgesDelete<EdgeType>;
onDelete?: OnDelete;
onError?: OnError;
@@ -133,7 +133,7 @@ export type ReactFlowStore<NodeType extends Node = Node> = {
onViewportChangeStart?: OnViewportChange;
onViewportChange?: OnViewportChange;
onViewportChangeEnd?: OnViewportChange;
onBeforeDelete?: OnBeforeDelete;
onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
onSelectionChangeHandlers: OnSelectionChangeFunc[];
@@ -142,15 +142,15 @@ export type ReactFlowStore<NodeType extends Node = Node> = {
autoPanOnNodeDrag: boolean;
connectionRadius: number;
isValidConnection?: IsValidConnection;
isValidConnection?: IsValidConnection<EdgeType>;
lib: string;
};
export type ReactFlowActions<NodeType extends Node> = {
export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
setNodes: (nodes: NodeType[]) => void;
setEdges: (edges: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: Edge[]) => void;
setEdges: (edges: EdgeType[]) => void;
setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: EdgeType[]) => void;
updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void;
updateNodePositions: UpdateNodePositions;
resetSelectedElements: () => void;
@@ -169,4 +169,8 @@ export type ReactFlowActions<NodeType extends Node> = {
fitView: (nodes: NodeType[], options?: FitViewOptions) => boolean;
};
export type ReactFlowState<NodeType extends Node = Node> = ReactFlowStore<NodeType> & ReactFlowActions<NodeType>;
export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<
NodeType,
EdgeType
> &
ReactFlowActions<NodeType, EdgeType>;
packages/svelte/src/lib/container/SvelteFlow/types.ts
+4 -4
View File
@@ -10,7 +10,6 @@ import type {
OnMoveEnd,
CoordinateExtent,
PanOnScrollMode,
IsValidConnection,
OnError,
ConnectionMode,
PanelPosition,
@@ -18,8 +17,7 @@ import type {
ColorMode,
OnConnect,
OnConnectStart,
OnConnectEnd,
OnBeforeDelete
OnConnectEnd
} from '@xyflow/system';
import type {
@@ -31,7 +29,9 @@ import type {
DefaultEdgeOptions,
FitViewOptions,
OnDelete,
OnEdgeCreate
OnEdgeCreate,
OnBeforeDelete,
IsValidConnection
} from '$lib/types';
import type { Writable } from 'svelte/store';
packages/svelte/src/lib/hooks/useNodesData.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { derived, type Readable } from 'svelte/store';
import type { Node } from '$lib/types';
import { useStore } from '$lib/store';
function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] | null)[] | null) {
if ((!a && !b) || (!a?.length && !b?.length)) {
true;
}
packages/svelte/src/lib/index.ts
-1
View File
@@ -66,7 +66,6 @@ export {
type OnConnectStart,
type OnConnect,
type OnConnectEnd,
type IsValidConnection,
type Viewport,
type SnapGrid,
PanOnScrollMode,
packages/svelte/src/lib/store/initial-store.ts
+2 -2
View File
@@ -14,7 +14,6 @@ import {
type MarkerProps,
type PanZoomInstance,
type CoordinateExtent,
type IsValidConnection,
type NodeOrigin,
type OnError,
type Viewport,
@@ -47,7 +46,8 @@ import type {
FitViewOptions,
OnDelete,
OnEdgeCreate,
OnBeforeDelete
OnBeforeDelete,
IsValidConnection
} from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
packages/svelte/src/lib/types/edges.ts
+24 -17
View File
@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { SvelteComponent, ComponentType } from 'svelte';
import type {
EdgeBase,
@@ -11,41 +10,49 @@ import type {
import type { Node } from '$lib/types';
export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
/**
* The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
*/
export type Edge<
EdgeData extends Record<string, unknown> = Record<string, unknown>,
EdgeType extends string | undefined = string | undefined
> = EdgeBase<EdgeData, EdgeType> & {
label?: string;
labelStyle?: string;
style?: string;
class?: string;
};
type SmoothStepEdgeType<T> = DefaultEdge<T> & {
type: 'smoothstep';
type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
EdgeData,
'smoothstep'
> & {
pathOptions?: SmoothStepPathOptions;
};
type BezierEdgeType<T> = DefaultEdge<T> & {
type: 'default';
type BezierEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
EdgeData,
'default'
> & {
pathOptions?: BezierPathOptions;
};
type StepEdgeType<T> = DefaultEdge<T> & {
type: 'step';
type StepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
EdgeData,
'step'
> & {
pathOptions?: StepPathOptions;
};
/**
* The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
*/
export type Edge<T = any> =
| DefaultEdge<T>
| SmoothStepEdgeType<T>
| BezierEdgeType<T>
| StepEdgeType<T>;
export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
/**
* Custom edge component props.
*/
export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
export type EdgeProps<
EdgeData extends Record<string, unknown> = Record<string, unknown>,
EdgeType extends string | undefined = string | undefined
> = Omit<Edge<EdgeData, EdgeType>, 'sourceHandle' | 'targetHandle' | 'type'> &
EdgePosition & {
markerStart?: string;
markerEnd?: string;
packages/svelte/src/lib/types/general.ts
+4
View File
@@ -57,3 +57,7 @@ export type OnBeforeDelete<
NodeType extends Node = Node,
EdgeType extends Edge = Edge
> = OnBeforeDeleteBase<NodeType, EdgeType>;
export type IsValidConnection<EdgeType extends Edge = Edge> = (
edge: EdgeType | Connection
) => boolean;
packages/svelte/src/lib/types/nodes.ts
+3 -1
View File
@@ -7,7 +7,7 @@ import type { NodeBase, NodeProps } from '@xyflow/system';
* @public
*/
export type Node<
NodeData = any,
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string | undefined = string | undefined
> = NodeBase<NodeData, NodeType> & {
class?: string;
@@ -17,3 +17,5 @@ export type Node<
export type NodeTypes = Record<string, ComponentType<SvelteComponent<NodeProps>>>;
export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
packages/system/src/types/edges.ts
+5 -2
View File
@@ -1,11 +1,14 @@
import { Position } from './utils';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type EdgeBase<EdgeData = any> = {
export type EdgeBase<
EdgeData extends Record<string, unknown> = Record<string, unknown>,
EdgeType extends string | undefined = string | undefined
> = {
/** Unique id of an edge */
id: string;
/** Type of an edge defined in edgeTypes */
type?: string;
type?: EdgeType;
/** Id of source node */
source: string;
/** Id of target node */
packages/system/src/types/nodes.ts
+7 -4
View File
@@ -9,7 +9,10 @@ import { Optional } from '../utils/types';
* @typeParam T - type of the node data
* @typeParam U - type of the node
*/
export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
export type NodeBase<
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string | undefined = string | undefined
> = {
/** Unique id of a node */
id: string;
/** Position of a node on the pane
@@ -17,9 +20,9 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
*/
position: XYPosition;
/** Arbitrary data passed to a node */
data: T;
data: NodeData;
/** Type of node defined in nodeTypes */
type?: U;
type?: NodeType;
/** Only relevant for default, source, target nodeType. controls source position
* @example 'right', 'left', 'top', 'bottom'
*/
@@ -70,7 +73,7 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
/** Holds a reference to the original node object provided by the user
* (which may lack some fields, like `computed` or `[internalSymbol]`. Used
* as an optimization to avoid certain operations. */
userProvidedNode: NodeBase<T, U>;
userProvidedNode: NodeBase<NodeData, NodeType>;
};
};