From 63bb2045f4f1229f662f71d86a4d1ee09c7ff975 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 28 Feb 2023 18:16:51 +0100 Subject: [PATCH] refactor(react/svelte): cleanup types --- .../src/components/A11yDescriptions/index.tsx | 2 +- .../src/components/ConnectionLine/index.tsx | 4 +- .../components/EdgeLabelRenderer/index.tsx | 2 +- .../core/src/components/Edges/BaseEdge.tsx | 3 +- .../core/src/components/Edges/BezierEdge.tsx | 3 +- .../core/src/components/Edges/EdgeText.tsx | 7 +- .../src/components/Edges/SimpleBezierEdge.tsx | 3 +- .../src/components/Edges/SmoothStepEdge.tsx | 3 +- .../core/src/components/Edges/StepEdge.tsx | 2 +- .../src/components/Edges/StraightEdge.tsx | 2 +- packages/core/src/components/Edges/utils.ts | 3 +- .../core/src/components/Edges/wrapEdge.tsx | 6 +- .../core/src/components/Handle/handler.ts | 3 +- packages/core/src/components/Handle/index.tsx | 6 +- packages/core/src/components/Handle/utils.ts | 13 +- packages/core/src/components/Nodes/utils.ts | 4 +- .../core/src/components/Nodes/wrapNode.tsx | 6 +- .../src/components/NodesSelection/index.tsx | 2 +- packages/core/src/components/Panel/index.tsx | 3 +- .../components/ReactFlowProvider/index.tsx | 5 +- .../components/SelectionListener/index.tsx | 2 +- .../src/components/StoreUpdater/index.tsx | 3 +- .../src/components/UserSelection/index.tsx | 2 +- .../EdgeRenderer/MarkerDefinitions.tsx | 3 +- .../core/src/container/EdgeRenderer/index.tsx | 4 +- .../core/src/container/EdgeRenderer/utils.ts | 5 +- .../core/src/container/FlowRenderer/index.tsx | 2 +- .../core/src/container/GraphView/index.tsx | 2 +- .../core/src/container/NodeRenderer/index.tsx | 6 +- .../core/src/container/NodeRenderer/utils.ts | 3 +- packages/core/src/container/Pane/index.tsx | 21 +- .../core/src/container/ReactFlow/index.tsx | 19 +- .../core/src/container/ReactFlow/utils.ts | 9 +- .../core/src/container/Viewport/index.tsx | 2 +- .../core/src/container/ZoomPane/index.tsx | 6 +- packages/core/src/hooks/useDrag/index.ts | 6 +- packages/core/src/hooks/useDrag/utils.ts | 4 +- packages/core/src/hooks/useEdges.ts | 3 +- packages/core/src/hooks/useNodes.ts | 3 +- packages/core/src/hooks/useNodesEdgesState.ts | 2 +- .../core/src/hooks/useNodesInitialized.ts | 3 +- packages/core/src/hooks/useOnInitHandler.ts | 2 +- .../core/src/hooks/useOnSelectionChange.ts | 2 +- packages/core/src/hooks/useReactFlow.ts | 13 +- packages/core/src/hooks/useStore.ts | 3 +- packages/core/src/hooks/useViewport.ts | 3 +- packages/core/src/hooks/useViewportHelper.ts | 3 +- packages/core/src/hooks/useVisibleEdges.ts | 3 +- packages/core/src/hooks/useVisibleNodes.ts | 4 +- packages/core/src/index.ts | 31 ++- packages/core/src/store/index.ts | 20 +- packages/core/src/store/initialState.ts | 9 +- packages/core/src/store/utils.ts | 14 +- .../{system => core}/src/types/changes.ts | 6 +- .../src/types/component-props.ts | 34 ++-- packages/core/src/types/edges.ts | 137 +++++++++++++ packages/core/src/types/general.ts | 68 +++++++ packages/core/src/types/index.ts | 7 + .../{system => core}/src/types/instance.ts | 4 +- packages/core/src/types/nodes.ts | 46 +++++ packages/core/src/types/store.ts | 149 ++++++++++++++ packages/core/src/utils/changes.ts | 2 +- packages/core/src/utils/general.ts | 18 ++ packages/core/src/utils/index.ts | 2 + packages/svelte/src/lib/actions/drag/index.ts | 6 +- packages/svelte/src/lib/actions/drag/utils.ts | 40 +--- packages/svelte/src/lib/actions/zoom/index.ts | 3 +- .../src/lib/components/Handle/handler.ts | 5 +- .../src/lib/components/Handle/index.svelte | 2 +- .../svelte/src/lib/components/Handle/utils.ts | 4 +- .../src/lib/components/edges/BaseEdge.svelte | 10 +- .../lib/components/edges/EdgeWrapper.svelte | 6 +- .../src/lib/container/Pane/index.svelte | 11 +- .../src/lib/container/SvelteFlow.svelte | 24 +-- packages/svelte/src/lib/index.ts | 2 + .../svelte/src/lib/store/connection-path.ts | 30 +-- .../svelte/src/lib/store/edges-layouted.ts | 4 +- packages/svelte/src/lib/store/index.ts | 18 +- .../svelte/src/lib/store/initial-store.ts | 10 +- .../src/lib/store/{types.d.ts => types.ts} | 2 +- packages/svelte/src/lib/types/edges.ts | 64 +++++- packages/svelte/src/lib/types/general.ts | 5 +- packages/svelte/src/lib/types/index.ts | 9 - packages/svelte/src/lib/types/nodes.ts | 30 +-- packages/svelte/src/lib/utils/index.ts | 47 +++++ packages/svelte/src/utils/index.ts | 97 --------- packages/system/package.json | 11 +- packages/system/src/constants.ts | 4 +- packages/system/src/types/edges.ts | 133 +----------- packages/system/src/types/general.ts | 189 +----------------- packages/system/src/types/handles.ts | 17 +- packages/system/src/types/index.ts | 3 - packages/system/src/types/nodes.ts | 58 ++---- packages/system/src/types/utils.ts | 14 +- packages/utils/src/graph.ts | 107 ++++++---- packages/utils/src/utils.ts | 9 +- 96 files changed, 899 insertions(+), 847 deletions(-) rename packages/{system => core}/src/types/changes.ts (90%) rename packages/{system => core}/src/types/component-props.ts (99%) create mode 100644 packages/core/src/types/edges.ts create mode 100644 packages/core/src/types/general.ts create mode 100644 packages/core/src/types/index.ts rename packages/{system => core}/src/types/instance.ts (95%) create mode 100644 packages/core/src/types/nodes.ts create mode 100644 packages/core/src/types/store.ts create mode 100644 packages/core/src/utils/general.ts create mode 100644 packages/core/src/utils/index.ts rename packages/svelte/src/lib/store/{types.d.ts => types.ts} (95%) create mode 100644 packages/svelte/src/lib/utils/index.ts delete mode 100644 packages/svelte/src/utils/index.ts diff --git a/packages/core/src/components/A11yDescriptions/index.tsx b/packages/core/src/components/A11yDescriptions/index.tsx index 481a6aeb..a92f27ac 100644 --- a/packages/core/src/components/A11yDescriptions/index.tsx +++ b/packages/core/src/components/A11yDescriptions/index.tsx @@ -1,7 +1,7 @@ import { CSSProperties } from 'react'; -import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; const style: CSSProperties = { display: 'none' }; const ariaLiveStyle: CSSProperties = { diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx index 0c3c0a70..ee320216 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/core/src/components/ConnectionLine/index.tsx @@ -6,16 +6,14 @@ import { Position, ConnectionLineType, ConnectionMode, - type ConnectionLineComponent, type ConnectionStatus, type HandleType, - type ReactFlowState, - type ReactFlowStore, } from '@reactflow/system'; import { getBezierPath, getSmoothStepPath } from '@reactflow/edge-utils'; import { useStore } from '../../hooks/useStore'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; +import type { ConnectionLineComponent, ReactFlowState, ReactFlowStore } from '../../types'; type ConnectionLineProps = { nodeId: string; diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index 07d06688..85c94291 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx @@ -1,8 +1,8 @@ import type { ReactNode } from 'react'; import { createPortal } from 'react-dom'; -import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer'); diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index f365175d..a52551ec 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -1,5 +1,6 @@ import { isNumeric } from '@reactflow/utils'; -import type { BaseEdgeProps } from '@reactflow/system'; + +import type { BaseEdgeProps } from '../../types'; import EdgeText from './EdgeText'; diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx index 443877b2..fd04e1bd 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/core/src/components/Edges/BezierEdge.tsx @@ -1,8 +1,9 @@ import { memo } from 'react'; -import { Position, type BezierEdgeProps } from '@reactflow/system'; +import { Position } from '@reactflow/system'; import { getBezierPath } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; +import type { BezierEdgeProps } from '../../types'; const BezierEdge = memo( ({ diff --git a/packages/core/src/components/Edges/EdgeText.tsx b/packages/core/src/components/Edges/EdgeText.tsx index 40db33ec..e1d71249 100644 --- a/packages/core/src/components/Edges/EdgeText.tsx +++ b/packages/core/src/components/Edges/EdgeText.tsx @@ -1,7 +1,8 @@ -import { memo, useRef, useState, useEffect } from 'react'; -import type { FC, PropsWithChildren } from 'react'; +import { memo, useRef, useState, useEffect, type FC, type PropsWithChildren } from 'react'; import cc from 'classcat'; -import { EdgeTextProps, Rect } from '@reactflow/system'; +import type { Rect } from '@reactflow/system'; + +import type { EdgeTextProps } from '../../types'; const EdgeText: FC> = ({ x, diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index 54236c98..548ae8da 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -1,8 +1,9 @@ import { memo } from 'react'; -import { Position, type EdgeProps } from '@reactflow/system'; +import { Position } from '@reactflow/system'; import { getBezierEdgeCenter } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; +import type { EdgeProps } from '../../types'; export interface GetSimpleBezierPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/core/src/components/Edges/SmoothStepEdge.tsx index a5de7976..048d8cac 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -1,8 +1,9 @@ import { memo } from 'react'; -import { Position, type SmoothStepEdgeProps } from '@reactflow/system'; +import { Position } from '@reactflow/system'; import { getSmoothStepPath } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; +import type { SmoothStepEdgeProps } from '../../types'; const SmoothStepEdge = memo( ({ diff --git a/packages/core/src/components/Edges/StepEdge.tsx b/packages/core/src/components/Edges/StepEdge.tsx index 6d802eae..df2646a7 100644 --- a/packages/core/src/components/Edges/StepEdge.tsx +++ b/packages/core/src/components/Edges/StepEdge.tsx @@ -1,7 +1,7 @@ import { memo, useMemo } from 'react'; -import type { SmoothStepEdgeProps } from '@reactflow/system'; import SmoothStepEdge from './SmoothStepEdge'; +import type { SmoothStepEdgeProps } from '../../types'; const StepEdge = memo((props: SmoothStepEdgeProps) => ( ) => { const EdgeWrapper = ({ diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index e9cff290..5e1daeb7 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -7,7 +7,7 @@ import { pointToRendererPoint, rendererPointToPoint, } from '@reactflow/utils'; -import type { OnConnect, HandleType, ReactFlowState, Connection } from '@reactflow/system'; +import type { OnConnect, HandleType, Connection } from '@reactflow/system'; import { ConnectionHandle, @@ -19,6 +19,7 @@ import { resetRecentHandle, ValidConnectionFunc, } from './utils'; +import type { ReactFlowState } from '../../types'; export function handlePointerDown({ event, diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index 1ae7be91..2d0d5d91 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -1,13 +1,15 @@ import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; import cc from 'classcat'; import { shallow } from 'zustand/shallow'; -import { errorMessages, Position, type HandleProps, type Connection, type ReactFlowState } from '@reactflow/system'; -import { getHostForElement, isMouseEvent, addEdge } from '@reactflow/utils'; +import { errorMessages, Position, type HandleProps, type Connection } from '@reactflow/system'; +import { getHostForElement, isMouseEvent } from '@reactflow/utils'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { useNodeId } from '../../contexts/NodeIdContext'; import { handlePointerDown } from './handler'; import { isValidHandle } from './utils'; +import { addEdge } from '../../utils'; +import type { ReactFlowState } from '../../types'; const alwaysValid = () => true; diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index c7839bb1..8e03a4ae 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -1,8 +1,17 @@ import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; -import { internalsSymbol, ConnectionMode, ConnectionStatus } from '@reactflow/system'; -import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '@reactflow/system'; +import { + internalsSymbol, + ConnectionMode, + ConnectionStatus, + type Connection, + type HandleType, + type XYPosition, + type NodeHandleBounds, +} from '@reactflow/system'; import { getEventPosition } from '@reactflow/utils'; +import type { Node } from '../../types'; + export type ConnectionHandle = { id: string | null; type: HandleType; diff --git a/packages/core/src/components/Nodes/utils.ts b/packages/core/src/components/Nodes/utils.ts index 2390102b..37574ad0 100644 --- a/packages/core/src/components/Nodes/utils.ts +++ b/packages/core/src/components/Nodes/utils.ts @@ -1,7 +1,9 @@ import { MouseEvent } from 'react'; import { StoreApi } from 'zustand'; import { getDimensions } from '@reactflow/utils'; -import { Position, type HandleElement, type Node, type NodeOrigin, type ReactFlowState } from '@reactflow/system'; +import { Position, type HandleElement, type NodeOrigin } from '@reactflow/system'; + +import type { Node, ReactFlowState } from '../../types'; export const getHandleBounds = ( selector: string, diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index f8b249be..8f23eb0b 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -1,8 +1,7 @@ -import { useEffect, useRef, memo } from 'react'; -import type { ComponentType, MouseEvent, KeyboardEvent } from 'react'; +import { useEffect, useRef, memo, type ComponentType, type MouseEvent, type KeyboardEvent } from 'react'; import cc from 'classcat'; import { elementSelectionKeys, isInputDOMNode } from '@reactflow/utils'; -import type { NodeProps, WrapNodeProps, XYPosition } from '@reactflow/system'; +import type { NodeProps, XYPosition } from '@reactflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { Provider } from '../../contexts/NodeIdContext'; @@ -10,6 +9,7 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions'; import useDrag from '../../hooks/useDrag'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; import { getMouseHandler, handleNodeClick } from './utils'; +import type { WrapNodeProps } from '../../types'; export const arrowKeyDiffs: Record = { ArrowUp: { x: 0, y: -1 }, diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index e5a1da89..d6888fa6 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -8,12 +8,12 @@ import type { MouseEvent, KeyboardEvent } from 'react'; import cc from 'classcat'; import { shallow } from 'zustand/shallow'; import { getRectOfNodes } from '@reactflow/utils'; -import type { Node, ReactFlowState } from '@reactflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; import useDrag from '../../hooks/useDrag'; import { arrowKeyDiffs } from '../Nodes/wrapNode'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; +import type { Node, ReactFlowState } from '../../types'; export interface NodesSelectionProps { onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void; diff --git a/packages/core/src/components/Panel/index.tsx b/packages/core/src/components/Panel/index.tsx index d9aefd36..db306331 100644 --- a/packages/core/src/components/Panel/index.tsx +++ b/packages/core/src/components/Panel/index.tsx @@ -1,8 +1,9 @@ import type { HTMLAttributes, ReactNode } from 'react'; import cc from 'classcat'; -import type { PanelPosition, ReactFlowState } from '@reactflow/system'; +import type { PanelPosition } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; export type PanelProps = HTMLAttributes & { position: PanelPosition; diff --git a/packages/core/src/components/ReactFlowProvider/index.tsx b/packages/core/src/components/ReactFlowProvider/index.tsx index f3ad453c..7f70e7b4 100644 --- a/packages/core/src/components/ReactFlowProvider/index.tsx +++ b/packages/core/src/components/ReactFlowProvider/index.tsx @@ -1,10 +1,9 @@ -import { useRef } from 'react'; -import type { FC, PropsWithChildren } from 'react'; +import { useRef, type FC, type PropsWithChildren } from 'react'; import { StoreApi } from 'zustand'; -import type { ReactFlowState } from '@reactflow/system'; import { Provider } from '../../contexts/RFStoreContext'; import { createRFStore } from '../../store'; +import type { ReactFlowState } from '../../types'; const ReactFlowProvider: FC> = ({ children }) => { const storeRef = useRef | null>(null); diff --git a/packages/core/src/components/SelectionListener/index.tsx b/packages/core/src/components/SelectionListener/index.tsx index de7612d6..556d7ce8 100644 --- a/packages/core/src/components/SelectionListener/index.tsx +++ b/packages/core/src/components/SelectionListener/index.tsx @@ -1,8 +1,8 @@ import { memo, useEffect } from 'react'; import { shallow } from 'zustand/shallow'; -import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '@reactflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; +import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types'; type SelectionListenerProps = { onSelectionChange?: OnSelectionChangeFunc; diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 7bdaac3e..f911f614 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -1,9 +1,10 @@ import { useEffect } from 'react'; import { StoreApi } from 'zustand'; import { shallow } from 'zustand/shallow'; -import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '@reactflow/system'; +import type { CoordinateExtent } from '@reactflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; +import type { Node, Edge, ReactFlowState, ReactFlowProps, ReactFlowStore } from '../../types'; type StoreUpdaterProps = Pick< ReactFlowProps, diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 09fafbd4..00bbcd63 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -1,7 +1,7 @@ import { shallow } from 'zustand/shallow'; -import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => ({ userSelectionActive: s.userSelectionActive, diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx index cc630ddb..1ea6296c 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -1,9 +1,10 @@ import { memo, useCallback } from 'react'; -import type { EdgeMarker, ReactFlowState } from '@reactflow/system'; +import type { EdgeMarker } from '@reactflow/system'; import { getMarkerId } from '@reactflow/utils'; import { useStore } from '../../hooks/useStore'; import { useMarkerSymbol } from './MarkerSymbols'; +import type { ReactFlowState } from '../../types'; type MarkerProps = EdgeMarker & { id: string; diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 51f3f2d6..043cb936 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -1,14 +1,14 @@ import { memo, ReactNode } from 'react'; import { shallow } from 'zustand/shallow'; import cc from 'classcat'; -import { errorMessages, ConnectionMode, Position, type Edge, type ReactFlowState } from '@reactflow/system'; +import { errorMessages, ConnectionMode, Position } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; import useVisibleEdges from '../../hooks/useVisibleEdges'; import MarkerDefinitions from './MarkerDefinitions'; import { getEdgePositions, getHandle, getNodeData } from './utils'; - import { GraphViewProps } from '../GraphView'; +import type { Edge, ReactFlowState } from '../../types'; type EdgeRendererProps = Pick< GraphViewProps, diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts index b4329238..8907b264 100644 --- a/packages/core/src/container/EdgeRenderer/utils.ts +++ b/packages/core/src/container/EdgeRenderer/utils.ts @@ -2,12 +2,8 @@ import type { ComponentType } from 'react'; import { internalsSymbol, Position, - type EdgeProps, - type EdgeTypes, - type EdgeTypesWrapped, type HandleElement, type NodeHandleBounds, - type Node, type Rect, type Transform, type XYPosition, @@ -16,6 +12,7 @@ import { rectToBox } from '@reactflow/utils'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; +import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, Node } from '../../types'; export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 2c47f9c5..98e89613 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -1,5 +1,4 @@ import { memo, type ReactNode } from 'react'; -import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; @@ -8,6 +7,7 @@ import { GraphViewProps } from '../GraphView'; import ZoomPane from '../ZoomPane'; import Pane from '../Pane'; import NodesSelection from '../../components/NodesSelection'; +import type { ReactFlowState } from '../../types'; export type FlowRendererProps = Omit< GraphViewProps, diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 0408fcd3..e489b1e9 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -1,5 +1,4 @@ import { memo } from 'react'; -import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '@reactflow/system'; import FlowRenderer from '../FlowRenderer'; import NodeRenderer from '../NodeRenderer'; @@ -7,6 +6,7 @@ import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; import ConnectionLine from '../../components/ConnectionLine'; +import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; export type GraphViewProps = Omit & Required< diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index 30654861..3f1d71d6 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -1,7 +1,6 @@ -import { memo, useMemo, useEffect, useRef } from 'react'; -import type { ComponentType } from 'react'; +import { memo, useMemo, useEffect, useRef, type ComponentType } from 'react'; import { shallow } from 'zustand/shallow'; -import { internalsSymbol, errorMessages, Position, type ReactFlowState, type WrapNodeProps } from '@reactflow/system'; +import { internalsSymbol, errorMessages, Position } from '@reactflow/system'; import { clampPosition } from '@reactflow/utils'; import useVisibleNodes from '../../hooks/useVisibleNodes'; @@ -9,6 +8,7 @@ import { useStore } from '../../hooks/useStore'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; import { getPositionWithOrigin } from './utils'; +import type { ReactFlowState, WrapNodeProps } from '../../types'; type NodeRendererProps = Pick< GraphViewProps, diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/core/src/container/NodeRenderer/utils.ts index 221aaccc..23fd5532 100644 --- a/packages/core/src/container/NodeRenderer/utils.ts +++ b/packages/core/src/container/NodeRenderer/utils.ts @@ -1,11 +1,12 @@ import type { ComponentType } from 'react'; -import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '@reactflow/system'; +import type { NodeProps, NodeOrigin, XYPosition } from '@reactflow/system'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; import OutputNode from '../../components/Nodes/OutputNode'; import GroupNode from '../../components/Nodes/GroupNode'; import wrapNode from '../../components/Nodes/wrapNode'; +import type { NodeTypes, NodeTypesWrapped } from '../../types'; export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped; diff --git a/packages/core/src/container/Pane/index.tsx b/packages/core/src/container/Pane/index.tsx index 06eceb48..7b3de5ab 100644 --- a/packages/core/src/container/Pane/index.tsx +++ b/packages/core/src/container/Pane/index.tsx @@ -2,22 +2,17 @@ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift */ -import { memo, useRef, MouseEvent as ReactMouseEvent, ReactNode } from 'react'; +import { memo, useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'; import { shallow } from 'zustand/shallow'; import cc from 'classcat'; -import { getConnectedEdges, getNodesInside, getEventPosition } from '@reactflow/utils'; -import { - SelectionMode, - type ReactFlowProps, - type ReactFlowState, - type NodeChange, - type EdgeChange, -} from '@reactflow/system'; +import { getNodesInside, getEventPosition } from '@reactflow/utils'; +import { SelectionMode } from '@reactflow/system'; import UserSelection from '../../components/UserSelection'; import { containerStyle } from '../../styles'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { getSelectionChanges } from '../../utils/changes'; +import { getSelectionChanges, getConnectedEdges } from '../../utils'; +import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange, Node } from '../../types'; type PaneProps = { isSelecting: boolean; @@ -135,7 +130,7 @@ const Pane = memo( }; const onMouseMove = (event: ReactMouseEvent): void => { - const { userSelectionRect, nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = + const { userSelectionRect, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = store.getState(); if (!isSelecting || !containerBounds.current || !userSelectionRect) { return; @@ -156,8 +151,8 @@ const Pane = memo( }; const nodes = getNodes(); - const selectedNodes = getNodesInside( - nodeInternals, + const selectedNodes = getNodesInside( + nodes, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 1ded2de0..74c407d2 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -1,20 +1,14 @@ -import { forwardRef } from 'react'; -import type { CSSProperties } from 'react'; +import { forwardRef, type CSSProperties } from 'react'; import cc from 'classcat'; import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode, - type EdgeTypes, - type EdgeTypesWrapped, type NodeOrigin, - type NodeTypes, - type NodeTypesWrapped, - type ReactFlowProps, - type ReactFlowRefType, type Viewport, } from '@reactflow/system'; +import { infiniteExtent } from '@reactflow/utils'; import Attribution from '../../components/Attribution'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; @@ -29,8 +23,15 @@ import { createEdgeTypes } from '../EdgeRenderer/utils'; import { createNodeTypes } from '../NodeRenderer/utils'; import GraphView from '../GraphView'; import Wrapper from './Wrapper'; -import { infiniteExtent } from '../../store/initialState'; import { useNodeOrEdgeTypes } from './utils'; +import type { + EdgeTypes, + EdgeTypesWrapped, + NodeTypes, + NodeTypesWrapped, + ReactFlowProps, + ReactFlowRefType, +} from '../../types'; const defaultNodeTypes: NodeTypes = { input: InputNode, diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts index d2a441e4..927b6930 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -1,16 +1,11 @@ import { useMemo, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { - errorMessages, - type EdgeTypes, - type EdgeTypesWrapped, - type NodeTypes, - type NodeTypesWrapped, -} from '@reactflow/system'; +import { errorMessages } from '@reactflow/system'; import { devWarn } from '@reactflow/utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; +import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped; diff --git a/packages/core/src/container/Viewport/index.tsx b/packages/core/src/container/Viewport/index.tsx index f786d5ed..64ed99d5 100644 --- a/packages/core/src/container/Viewport/index.tsx +++ b/packages/core/src/container/Viewport/index.tsx @@ -1,7 +1,7 @@ import type { ReactNode } from 'react'; -import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`; diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index effe658c..34441198 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -1,17 +1,17 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect, useRef } from 'react'; -import { zoom, zoomIdentity } from 'd3-zoom'; -import type { D3ZoomEvent } from 'd3-zoom'; +import { zoom, zoomIdentity, type D3ZoomEvent } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import { shallow } from 'zustand/shallow'; import { clamp } from '@reactflow/utils'; -import { type Viewport, type ReactFlowState, CoordinateExtent, PanOnScrollMode } from '@reactflow/system'; +import { CoordinateExtent, PanOnScrollMode, type Viewport } from '@reactflow/system'; import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { containerStyle } from '../../styles'; import type { FlowRendererProps } from '../FlowRenderer'; +import type { ReactFlowState } from '../../types'; type ZoomPaneProps = Omit< FlowRendererProps, diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index eb88e34e..98ff2758 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -1,14 +1,14 @@ -import { useEffect, useRef, useState } from 'react'; -import type { RefObject, MouseEvent } from 'react'; +import { useEffect, useRef, useState, type RefObject, type MouseEvent } from 'react'; import { drag } from 'd3-drag'; import { select } from 'd3-selection'; import { calcAutoPan, getEventPosition } from '@reactflow/utils'; -import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '@reactflow/system'; +import type { NodeDragItem, UseDragEvent, XYPosition } from '@reactflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils'; import { handleNodeClick } from '../../components/Nodes/utils'; import useGetPointerPosition from '../useGetPointerPosition'; +import type { Node, SelectionDragHandler } from '../../types'; export type UseDragData = { dx: number; dy: number }; diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index 3ad6e6d5..f2c297a4 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -2,15 +2,15 @@ import type { RefObject } from 'react'; import { errorMessages, type CoordinateExtent, - type Node, type NodeDragItem, - type NodeInternals, type NodeOrigin, type OnError, type XYPosition, } from '@reactflow/system'; import { clampPosition, isNumeric, getNodePositionWithOrigin } from '@reactflow/utils'; +import type { Node, NodeInternals } from '../../types'; + export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean { if (!node.parentNode) { return false; diff --git a/packages/core/src/hooks/useEdges.ts b/packages/core/src/hooks/useEdges.ts index 3426aacb..78c0e36a 100644 --- a/packages/core/src/hooks/useEdges.ts +++ b/packages/core/src/hooks/useEdges.ts @@ -1,6 +1,5 @@ -import type { Edge, ReactFlowState } from '@reactflow/system'; - import { useStore } from '../hooks/useStore'; +import type { Edge, ReactFlowState } from '../types'; const edgesSelector = (state: ReactFlowState) => state.edges; diff --git a/packages/core/src/hooks/useNodes.ts b/packages/core/src/hooks/useNodes.ts index 8aad017d..923d03d1 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/core/src/hooks/useNodes.ts @@ -1,5 +1,6 @@ import { useStore } from '../hooks/useStore'; -import type { Node, ReactFlowState } from '@reactflow/system'; + +import type { Node, ReactFlowState } from '../types'; const nodesSelector = (state: ReactFlowState) => state.getNodes(); diff --git a/packages/core/src/hooks/useNodesEdgesState.ts b/packages/core/src/hooks/useNodesEdgesState.ts index 90348d38..19754aa4 100644 --- a/packages/core/src/hooks/useNodesEdgesState.ts +++ b/packages/core/src/hooks/useNodesEdgesState.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useState, useCallback, type SetStateAction, type Dispatch } from 'react'; -import type { Node, NodeChange, Edge, EdgeChange } from '@reactflow/system'; import { applyNodeChanges, applyEdgeChanges } from '../utils/changes'; +import type { Node, NodeChange, Edge, EdgeChange } from '../types'; type ApplyChanges = (changes: ChangesType[], items: ItemType[]) => ItemType[]; type OnChange = (changes: ChangesType[]) => void; diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/core/src/hooks/useNodesInitialized.ts index dea87f33..0a1e851a 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/core/src/hooks/useNodesInitialized.ts @@ -1,6 +1,7 @@ -import { internalsSymbol, type ReactFlowState } from '@reactflow/system'; +import { internalsSymbol } from '@reactflow/system'; import { useStore } from './useStore'; +import type { ReactFlowState } from '../types'; const selector = (s: ReactFlowState) => { if (s.nodeInternals.size === 0) { diff --git a/packages/core/src/hooks/useOnInitHandler.ts b/packages/core/src/hooks/useOnInitHandler.ts index ab9ecd6f..27de912b 100644 --- a/packages/core/src/hooks/useOnInitHandler.ts +++ b/packages/core/src/hooks/useOnInitHandler.ts @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; -import type { OnInit } from '@reactflow/system'; import useReactFlow from './useReactFlow'; +import type { OnInit } from '../types'; function useOnInitHandler(onInit: OnInit | undefined) { const rfInstance = useReactFlow(); diff --git a/packages/core/src/hooks/useOnSelectionChange.ts b/packages/core/src/hooks/useOnSelectionChange.ts index 653c4e47..323f23a8 100644 --- a/packages/core/src/hooks/useOnSelectionChange.ts +++ b/packages/core/src/hooks/useOnSelectionChange.ts @@ -1,7 +1,7 @@ import { useEffect } from 'react'; -import type { OnSelectionChangeFunc } from '@reactflow/system'; import { useStoreApi } from './useStore'; +import type { OnSelectionChangeFunc } from '../types'; export type UseOnSelectionChangeOptions = { onChange?: OnSelectionChangeFunc; diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts index fcba29a2..500fa15b 100644 --- a/packages/core/src/hooks/useReactFlow.ts +++ b/packages/core/src/hooks/useReactFlow.ts @@ -1,5 +1,10 @@ import { useCallback, useMemo } from 'react'; -import { getConnectedEdges, getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils'; +import { getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils'; +import type { Rect } from '@reactflow/system'; + +import useViewportHelper from './useViewportHelper'; +import { useStoreApi } from '../hooks/useStore'; +import { getConnectedEdges } from '../utils'; import type { ReactFlowInstance, Instance, @@ -11,11 +16,7 @@ import type { EdgeRemoveChange, NodeChange, Node, - Rect, -} from '@reactflow/system'; - -import useViewportHelper from './useViewportHelper'; -import { useStoreApi } from '../hooks/useStore'; +} from '../types'; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ export default function useReactFlow(): ReactFlowInstance { diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts index ca077cbf..0af201bb 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/core/src/hooks/useStore.ts @@ -1,8 +1,9 @@ import { useContext, useMemo } from 'react'; import { useStore as useZustandStore, type StoreApi } from 'zustand'; -import { errorMessages, type ReactFlowState } from '@reactflow/system'; +import { errorMessages } from '@reactflow/system'; import StoreContext from '../contexts/RFStoreContext'; +import type { ReactFlowState } from '../types'; const zustandErrorMessage = errorMessages['001'](); diff --git a/packages/core/src/hooks/useViewport.ts b/packages/core/src/hooks/useViewport.ts index d188b15e..13b214c5 100644 --- a/packages/core/src/hooks/useViewport.ts +++ b/packages/core/src/hooks/useViewport.ts @@ -1,7 +1,8 @@ import { shallow } from 'zustand/shallow'; -import type { Viewport, ReactFlowState } from '@reactflow/system'; +import type { Viewport } from '@reactflow/system'; import { useStore } from '../hooks/useStore'; +import type { ReactFlowState } from '../types'; const viewportSelector = (state: ReactFlowState) => ({ x: state.transform[0], diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts index 324cb945..07a5a2ba 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/core/src/hooks/useViewportHelper.ts @@ -2,9 +2,10 @@ import { useMemo } from 'react'; import { zoomIdentity } from 'd3-zoom'; import { shallow } from 'zustand/shallow'; import { pointToRendererPoint, getTransformForBounds, getD3Transition, fitView } from '@reactflow/utils'; -import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '@reactflow/system'; +import type { XYPosition } from '@reactflow/system'; import { useStoreApi, useStore } from '../hooks/useStore'; +import type { ViewportHelperFunctions, ReactFlowState } from '../types'; // eslint-disable-next-line @typescript-eslint/no-empty-function const noop = () => {}; diff --git a/packages/core/src/hooks/useVisibleEdges.ts b/packages/core/src/hooks/useVisibleEdges.ts index fe8d14d0..ac888780 100644 --- a/packages/core/src/hooks/useVisibleEdges.ts +++ b/packages/core/src/hooks/useVisibleEdges.ts @@ -1,9 +1,10 @@ import { useCallback } from 'react'; -import { internalsSymbol, type ReactFlowState, type NodeInternals, type Edge } from '@reactflow/system'; +import { internalsSymbol } from '@reactflow/system'; import { isNumeric } from '@reactflow/utils'; import { useStore } from '../hooks/useStore'; import { isEdgeVisible } from '../container/EdgeRenderer/utils'; +import { type ReactFlowState, type NodeInternals, type Edge } from '../types'; const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }]; diff --git a/packages/core/src/hooks/useVisibleNodes.ts b/packages/core/src/hooks/useVisibleNodes.ts index 19be6b3b..1a1d6c5d 100644 --- a/packages/core/src/hooks/useVisibleNodes.ts +++ b/packages/core/src/hooks/useVisibleNodes.ts @@ -1,15 +1,15 @@ import { useCallback } from 'react'; import { getNodesInside } from '@reactflow/utils'; -import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../hooks/useStore'; +import type { Node, ReactFlowState } from '../types'; function useVisibleNodes(onlyRenderVisible: boolean) { const nodes = useStore( useCallback( (s: ReactFlowState) => onlyRenderVisible - ? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true) + ? getNodesInside(s.getNodes(), { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true) : s.getNodes(), [onlyRenderVisible] ) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 52d202f5..055aad42 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -8,22 +8,6 @@ export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/E export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge'; export { default as BaseEdge } from './components/Edges/BaseEdge'; -export { - isNode, - isEdge, - addEdge, - getOutgoers, - getIncomers, - getConnectedEdges, - updateEdge, - getTransformForBounds, - getRectOfNodes, - getNodePositionWithOrigin, - rectToBox, - boxToRect, - getBoundsOfRects, -} from '@reactflow/utils'; -export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { default as ReactFlowProvider } from './components/ReactFlowProvider'; export { default as Panel } from './components/Panel'; export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer'; @@ -41,7 +25,18 @@ export { default as useOnSelectionChange } from './hooks/useOnSelectionChange'; export { default as useNodesInitialized } from './hooks/useNodesInitialized'; export { default as useGetPointerPosition } from './hooks/useGetPointerPosition'; export { useNodeId } from './contexts/NodeIdContext'; -export * from '@reactflow/system'; export * from '@reactflow/edge-utils'; +export * from '@reactflow/system'; +export { + getTransformForBounds, + getRectOfNodes, + getNodePositionWithOrigin, + rectToBox, + boxToRect, + getBoundsOfRects, +} from '@reactflow/utils'; -// export * from './types'; +export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; +export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general'; + +export * from './types'; diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 972ba9e8..e305336f 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -3,18 +3,9 @@ import { zoomIdentity } from 'd3-zoom'; import { clampPosition, getDimensions, fitView } from '@reactflow/utils'; import { internalsSymbol, - type ReactFlowState, - type Node, - type Edge, type NodeDimensionUpdate, type CoordinateExtent, - type NodeDimensionChange, - type EdgeSelectionChange, - type NodeSelectionChange, - type NodePositionChange, type NodeDragItem, - type UnselectNodesAndEdgesParams, - type NodeChange, type XYPosition, } from '@reactflow/system'; @@ -22,6 +13,17 @@ import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '.. import { getHandleBounds } from '../components/Nodes/utils'; import { createNodeInternals, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils'; import initialState from './initialState'; +import type { + ReactFlowState, + Node, + Edge, + NodeDimensionChange, + EdgeSelectionChange, + NodeSelectionChange, + NodePositionChange, + UnselectNodesAndEdgesParams, + NodeChange, +} from '../types'; const createRFStore = () => createStore((set, get) => ({ diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index f00b02ed..65550c46 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -1,10 +1,7 @@ -import { devWarn } from '@reactflow/utils'; -import { ConnectionMode, type CoordinateExtent, type ReactFlowStore } from '@reactflow/system'; +import { devWarn, infiniteExtent } from '@reactflow/utils'; +import { ConnectionMode } from '@reactflow/system'; -export const infiniteExtent: CoordinateExtent = [ - [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], - [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY], -]; +import type { ReactFlowStore } from '../types'; const initialState: ReactFlowStore = { rfId: '1', diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index de21c644..15438212 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -1,17 +1,9 @@ import type { StoreApi } from 'zustand'; -import { - internalsSymbol, - type Edge, - type EdgeSelectionChange, - type Node, - type NodeInternals, - type NodeSelectionChange, - type ReactFlowState, - type XYZPosition, - type NodeOrigin, -} from '@reactflow/system'; +import { internalsSymbol, type XYZPosition, type NodeOrigin } from '@reactflow/system'; import { isNumeric, getNodePositionWithOrigin } from '@reactflow/utils'; +import type { Edge, EdgeSelectionChange, Node, NodeInternals, NodeSelectionChange, ReactFlowState } from '../types'; + type ParentNodes = Record; function calculateXYZPosition( diff --git a/packages/system/src/types/changes.ts b/packages/core/src/types/changes.ts similarity index 90% rename from packages/system/src/types/changes.ts rename to packages/core/src/types/changes.ts index 375c8bf2..a486e7cf 100644 --- a/packages/system/src/types/changes.ts +++ b/packages/core/src/types/changes.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { XYPosition, Dimensions } from './utils'; -import type { Node } from './nodes'; -import type { Edge } from './edges'; +import type { XYPosition, Dimensions } from '@reactflow/system'; + +import type { Node, Edge } from '.'; export type NodeDimensionChange = { id: string; diff --git a/packages/system/src/types/component-props.ts b/packages/core/src/types/component-props.ts similarity index 99% rename from packages/system/src/types/component-props.ts rename to packages/core/src/types/component-props.ts index 1614805a..1840f238 100644 --- a/packages/system/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -1,4 +1,22 @@ import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; +import type { + ConnectionMode, + ConnectionLineType, + OnConnect, + CoordinateExtent, + KeyCode, + PanOnScrollMode, + ProOptions, + PanelPosition, + OnMove, + OnMoveStart, + OnMoveEnd, + Viewport, + NodeOrigin, + HandleType, + SelectionMode, + OnError, +} from '@reactflow/system'; import type { OnSelectionChangeFunc, @@ -6,37 +24,21 @@ import type { EdgeTypes, Node, Edge, - ConnectionMode, - ConnectionLineType, ConnectionLineComponent, OnConnectStart, OnConnectEnd, - OnConnect, - CoordinateExtent, - KeyCode, - PanOnScrollMode, OnEdgeUpdateFunc, OnInit, - ProOptions, - PanelPosition, DefaultEdgeOptions, FitViewOptions, OnNodesDelete, OnEdgesDelete, OnNodesChange, OnEdgesChange, - OnMove, - OnMoveStart, - OnMoveEnd, NodeDragHandler, NodeMouseHandler, SelectionDragHandler, - Viewport, - NodeOrigin, EdgeMouseHandler, - HandleType, - SelectionMode, - OnError, } from '.'; export type ReactFlowProps = HTMLAttributes & { diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts new file mode 100644 index 00000000..37c415d2 --- /dev/null +++ b/packages/core/src/types/edges.ts @@ -0,0 +1,137 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ + +import type { CSSProperties, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react'; +import type { + BaseEdge, + BezierPathOptions, + Position, + SmoothStepPathOptions, + DefaultEdgeOptionsBase, + HandleType, + Connection, + ConnectionLineType, + HandleElement, + ConnectionStatus, +} from '@reactflow/system'; + +import { Node } from '.'; + +export type EdgeLabelOptions = { + label?: string | ReactNode; + labelStyle?: CSSProperties; + labelShowBg?: boolean; + labelBgStyle?: CSSProperties; + labelBgPadding?: [number, number]; + labelBgBorderRadius?: number; +}; + +export type DefaultEdge = BaseEdge & { + style?: CSSProperties; + className?: string; + sourceNode?: Node; + targetNode?: Node; +} & EdgeLabelOptions; + +type SmoothStepEdgeType = DefaultEdge & { + type: 'smoothstep'; + pathOptions?: SmoothStepPathOptions; +}; + +type BezierEdgeType = DefaultEdge & { + type: 'default'; + pathOptions?: BezierPathOptions; +}; + +export type Edge = DefaultEdge | SmoothStepEdgeType | BezierEdgeType; + +export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void; + +export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandle'> & { + onClick?: EdgeMouseHandler; + onEdgeDoubleClick?: EdgeMouseHandler; + sourceHandleId?: string | null; + targetHandleId?: string | null; + sourceX: number; + sourceY: number; + targetX: number; + targetY: number; + sourcePosition: Position; + targetPosition: Position; + elementsSelectable?: boolean; + onEdgeUpdate?: OnEdgeUpdateFunc; + onContextMenu?: EdgeMouseHandler; + onMouseEnter?: EdgeMouseHandler; + onMouseMove?: EdgeMouseHandler; + onMouseLeave?: EdgeMouseHandler; + edgeUpdaterRadius?: number; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void; + rfId?: string; + isFocusable: boolean; + pathOptions?: BezierPathOptions | SmoothStepPathOptions; +}; + +export type DefaultEdgeOptions = DefaultEdgeOptionsBase; + +export type EdgeTextProps = HTMLAttributes & + EdgeLabelOptions & { + x: number; + y: number; + }; + +// props that get passed to a custom edge +export type EdgeProps = Pick< + Edge, + 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' +> & + Pick< + WrapEdgeProps, + | 'sourceX' + | 'sourceY' + | 'targetX' + | 'targetY' + | 'sourcePosition' + | 'targetPosition' + | 'sourceHandleId' + | 'targetHandleId' + | 'interactionWidth' + > & + EdgeLabelOptions & { + markerStart?: string; + markerEnd?: string; + // @TODO: how can we get better types for pathOptions? + pathOptions?: any; + }; + +export type BaseEdgeProps = Pick & + EdgeLabelOptions & { + labelX?: number; + labelY?: number; + path: string; + }; + +export type SmoothStepEdgeProps = EdgeProps & { + pathOptions?: SmoothStepPathOptions; +}; + +export type BezierEdgeProps = EdgeProps & { + pathOptions?: BezierPathOptions; +}; + +export type OnEdgeUpdateFunc = (oldEdge: Edge, newConnection: Connection) => void; + +export type ConnectionLineComponentProps = { + connectionLineStyle?: CSSProperties; + connectionLineType: ConnectionLineType; + fromNode?: Node; + fromHandle?: HandleElement; + fromX: number; + fromY: number; + toX: number; + toY: number; + fromPosition: Position; + toPosition: Position; + connectionStatus: ConnectionStatus | null; +}; + +export type ConnectionLineComponent = ComponentType; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts new file mode 100644 index 00000000..aa947c01 --- /dev/null +++ b/packages/core/src/types/general.ts @@ -0,0 +1,68 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import type { + MouseEvent as ReactMouseEvent, + TouchEvent as ReactTouchEvent, + ComponentType, + MemoExoticComponent, +} from 'react'; +import { + FitViewParamsBase, + FitViewOptionsBase, + NodeProps, + OnConnectStartParams, + ZoomInOut, + ZoomTo, + SetViewport, + GetZoom, + GetViewport, + SetCenter, + FitBounds, + Project, +} from '@reactflow/system'; + +import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.'; + +export type OnNodesChange = (changes: NodeChange[]) => void; +export type OnEdgesChange = (changes: EdgeChange[]) => void; + +export type OnNodesDelete = (nodes: Node[]) => void; +export type OnEdgesDelete = (edges: Edge[]) => void; + +export type NodeTypes = { [key: string]: ComponentType }; +export type NodeTypesWrapped = { [key: string]: MemoExoticComponent> }; +export type EdgeTypes = { [key: string]: ComponentType }; +export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent> }; + +export type UnselectNodesAndEdgesParams = { + nodes?: Node[]; + edges?: Edge[]; +}; + +export type OnSelectionChangeParams = { + nodes: Node[]; + edges: Edge[]; +}; + +export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void; + +export type OnConnectStart = (event: ReactMouseEvent | ReactTouchEvent, params: OnConnectStartParams) => void; +export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void; + +export type FitViewParams = FitViewParamsBase; +export type FitViewOptions = FitViewOptionsBase; +export type FitView = (fitViewOptions?: FitViewOptions) => boolean; +export type OnInit = (reactFlowInstance: ReactFlowInstance) => void; + +export type ViewportHelperFunctions = { + zoomIn: ZoomInOut; + zoomOut: ZoomInOut; + zoomTo: ZoomTo; + getZoom: GetZoom; + setViewport: SetViewport; + getViewport: GetViewport; + fitView: FitView; + setCenter: SetCenter; + fitBounds: FitBounds; + project: Project; + viewportInitialized: boolean; +}; diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts new file mode 100644 index 00000000..6ee8dada --- /dev/null +++ b/packages/core/src/types/index.ts @@ -0,0 +1,7 @@ +export * from './nodes'; +export * from './edges'; +export * from './changes'; +export * from './component-props'; +export * from './general'; +export * from './store'; +export * from './instance'; diff --git a/packages/system/src/types/instance.ts b/packages/core/src/types/instance.ts similarity index 95% rename from packages/system/src/types/instance.ts rename to packages/core/src/types/instance.ts index 7ff85606..af83e1e3 100644 --- a/packages/system/src/types/instance.ts +++ b/packages/core/src/types/instance.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-namespace */ -import { ViewportHelperFunctions, Viewport, Node, Edge, Rect } from '.'; +import type { Rect, Viewport } from '@reactflow/system'; +import type { Node, Edge, ViewportHelperFunctions } from '.'; export type ReactFlowJsonObject = { nodes: Node[]; @@ -12,6 +13,7 @@ export type DeleteElementsOptions = { nodes?: (Partial & { id: Node['id'] })[]; edges?: (Partial & { id: Edge['id'] })[]; }; + export namespace Instance { export type GetNodes = () => Node[]; export type SetNodes = ( diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts new file mode 100644 index 00000000..9ecf93ab --- /dev/null +++ b/packages/core/src/types/nodes.ts @@ -0,0 +1,46 @@ +import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; +import type { BaseNode } from '@reactflow/system'; + +export type Node = BaseNode< + NodeData, + NodeType +> & { + style?: CSSProperties; + className?: string; + resizing?: boolean; +}; + +export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void; +export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void; +export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void; + +export type WrapNodeProps = Pick< + Node, + 'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel' +> & + Required, 'selected' | 'type' | 'zIndex'>> & { + isConnectable: boolean; + xPos: number; + yPos: number; + xPosOrigin: number; + yPosOrigin: number; + initialized: boolean; + isSelectable: boolean; + isDraggable: boolean; + isFocusable: boolean; + selectNodesOnDrag: boolean; + onClick?: NodeMouseHandler; + onDoubleClick?: NodeMouseHandler; + onMouseEnter?: NodeMouseHandler; + onMouseMove?: NodeMouseHandler; + onMouseLeave?: NodeMouseHandler; + onContextMenu?: NodeMouseHandler; + resizeObserver: ResizeObserver | null; + isParent: boolean; + noDragClassName: string; + noPanClassName: string; + rfId: string; + disableKeyboardA11y: boolean; + }; + +export type NodeInternals = Map; diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts new file mode 100644 index 00000000..b4277137 --- /dev/null +++ b/packages/core/src/types/store.ts @@ -0,0 +1,149 @@ +import { + ConnectionMode, + ConnectionStatus, + CoordinateExtent, + D3SelectionInstance, + D3ZoomInstance, + HandleType, + NodeDimensionUpdate, + NodeDragItem, + NodeOrigin, + OnConnect, + OnError, + OnViewportChange, + SelectionRect, + SnapGrid, + StartHandle, + Transform, + XYPosition, +} from '@reactflow/system'; + +import type { + NodeDragHandler, + Edge, + Node, + NodeChange, + OnNodesChange, + OnEdgesChange, + NodeInternals, + OnConnectStart, + OnConnectEnd, + SelectionDragHandler, + DefaultEdgeOptions, + FitViewOptions, + OnNodesDelete, + OnEdgesDelete, + OnSelectionChangeFunc, + UnselectNodesAndEdgesParams, +} from '.'; + +export type ReactFlowStore = { + rfId: string; + width: number; + height: number; + transform: Transform; + nodeInternals: NodeInternals; + edges: Edge[]; + onNodesChange: OnNodesChange | null; + onEdgesChange: OnEdgesChange | null; + hasDefaultNodes: boolean; + hasDefaultEdges: boolean; + domNode: HTMLDivElement | null; + paneDragging: boolean; + noPanClassName: string; + + d3Zoom: D3ZoomInstance | null; + d3Selection: D3SelectionInstance | null; + d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined; + minZoom: number; + maxZoom: number; + translateExtent: CoordinateExtent; + nodeExtent: CoordinateExtent; + nodeOrigin: NodeOrigin; + + nodesSelectionActive: boolean; + userSelectionActive: boolean; + userSelectionRect: SelectionRect | null; + + connectionNodeId: string | null; + connectionHandleId: string | null; + connectionHandleType: HandleType | null; + connectionPosition: XYPosition; + connectionStatus: ConnectionStatus | null; + connectionMode: ConnectionMode; + + snapToGrid: boolean; + snapGrid: SnapGrid; + + nodesDraggable: boolean; + nodesConnectable: boolean; + nodesFocusable: boolean; + edgesFocusable: boolean; + elementsSelectable: boolean; + elevateNodesOnSelect: boolean; + + multiSelectionActive: boolean; + + connectionStartHandle: StartHandle | null; + + onNodeDragStart?: NodeDragHandler; + onNodeDrag?: NodeDragHandler; + onNodeDragStop?: NodeDragHandler; + + onSelectionDragStart?: SelectionDragHandler; + onSelectionDrag?: SelectionDragHandler; + onSelectionDragStop?: SelectionDragHandler; + + onConnect?: OnConnect; + onConnectStart?: OnConnectStart; + onConnectEnd?: OnConnectEnd; + + onClickConnectStart?: OnConnectStart; + onClickConnectEnd?: OnConnectEnd; + + connectOnClick: boolean; + defaultEdgeOptions?: DefaultEdgeOptions; + + fitViewOnInit: boolean; + fitViewOnInitDone: boolean; + fitViewOnInitOptions: FitViewOptions | undefined; + + onNodesDelete?: OnNodesDelete; + onEdgesDelete?: OnEdgesDelete; + onError?: OnError; + + // event handlers + onViewportChangeStart?: OnViewportChange; + onViewportChange?: OnViewportChange; + onViewportChangeEnd?: OnViewportChange; + + onSelectionChange?: OnSelectionChangeFunc; + + ariaLiveMessage: string; + autoPanOnConnect: boolean; + autoPanOnNodeDrag: boolean; + connectionRadius: number; +}; + +export type ReactFlowActions = { + setNodes: (nodes: Node[]) => void; + getNodes: () => Node[]; + setEdges: (edges: Edge[]) => void; + setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void; + updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void; + updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged: boolean, dragging: boolean) => void; + resetSelectedElements: () => void; + unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => void; + addSelectedNodes: (nodeIds: string[]) => void; + addSelectedEdges: (edgeIds: string[]) => void; + setMinZoom: (minZoom: number) => void; + setMaxZoom: (maxZoom: number) => void; + setTranslateExtent: (translateExtent: CoordinateExtent) => void; + setNodeExtent: (nodeExtent: CoordinateExtent) => void; + cancelConnection: () => void; + reset: () => void; + triggerNodeChanges: (changes: NodeChange[]) => void; + panBy: (delta: XYPosition) => void; +}; + +export type ReactFlowState = ReactFlowStore & ReactFlowActions; diff --git a/packages/core/src/utils/changes.ts b/packages/core/src/utils/changes.ts index 65ed6b9c..5deb3fdc 100644 --- a/packages/core/src/utils/changes.ts +++ b/packages/core/src/utils/changes.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { Node, Edge, EdgeChange, NodeChange } from '@reactflow/system'; +import type { Node, Edge, EdgeChange, NodeChange } from '../types'; function handleParentExpand(res: any[], updateItem: any) { const parent = res.find((e) => e.id === updateItem.parentNode); diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts new file mode 100644 index 00000000..ff323a44 --- /dev/null +++ b/packages/core/src/utils/general.ts @@ -0,0 +1,18 @@ +import { + isNodeBase, + isEdgeBase, + addEdgeBase, + getOutgoersBase, + getIncomersBase, + updateEdgeBase, + getConnectedEdgesBase, +} from '@reactflow/utils'; +import type { Edge, Node } from '../types'; + +export const isNode = isNodeBase; +export const isEdge = isEdgeBase; +export const getOutgoers = getOutgoersBase; +export const getIncomers = getIncomersBase; +export const addEdge = addEdgeBase; +export const updateEdge = updateEdgeBase; +export const getConnectedEdges = getConnectedEdgesBase; diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts new file mode 100644 index 00000000..dc64d926 --- /dev/null +++ b/packages/core/src/utils/index.ts @@ -0,0 +1,2 @@ +export * from './changes'; +export * from './general'; diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts index 35e7cfbe..777d1f11 100644 --- a/packages/svelte/src/lib/actions/drag/index.ts +++ b/packages/svelte/src/lib/actions/drag/index.ts @@ -1,7 +1,7 @@ import { get, type Writable } from 'svelte/store'; import { drag as d3Drag, type D3DragEvent, type SubjectPosition } from 'd3-drag'; import { select } from 'd3-selection'; -import type { XYPosition, CoordinateExtent, Transform, Node as RFNode } from '@reactflow/system'; +import type { XYPosition, CoordinateExtent, Transform } from '@reactflow/system'; import { getDragItems, hasSelector, calcNextPosition } from './utils'; import type { Node } from '$lib/types'; @@ -62,7 +62,7 @@ export default function drag( dragItems = dragItems.map((n) => { const nextPosition = { x: x - n.distance.x, y: y - n.distance.y }; - const updatedPos = calcNextPosition(n, nextPosition, get(nodes) as RFNode[]); + const updatedPos = calcNextPosition(n, nextPosition, get(nodes)); // we want to make sure that we only fire a change event when there is a changes hasChange = @@ -89,7 +89,7 @@ export default function drag( const pointerPos = getPointerPosition(event); console.log(pointerPos); lastPos = pointerPos; - dragItems = getDragItems(get(nodes) as RFNode[], pointerPos, nodeId); + dragItems = getDragItems(get(nodes), pointerPos, nodeId); }) .on('drag', (event: UseDragEvent) => { const pointerPos = getPointerPosition(event); diff --git a/packages/svelte/src/lib/actions/drag/utils.ts b/packages/svelte/src/lib/actions/drag/utils.ts index 03843556..da2e436f 100644 --- a/packages/svelte/src/lib/actions/drag/utils.ts +++ b/packages/svelte/src/lib/actions/drag/utils.ts @@ -1,13 +1,7 @@ -import type { - CoordinateExtent, - Node, - NodeDragItem, - NodeInternals, - NodeOrigin, - XYPosition -} from '@reactflow/system'; +import type { CoordinateExtent, NodeDragItem, NodeOrigin, XYPosition } from '@reactflow/system'; +import { clampPosition, isNumeric } from '@reactflow/utils'; -import { clampPosition, isNumeric } from '../../../utils'; +import type { Node } from '$lib/types'; export function isParentSelected(node: Node, nodes: Node[]): boolean { if (!node.parentNode) { @@ -122,31 +116,3 @@ export function calcNextPosition( positionAbsolute }; } - -// returns two params: -// 1. the dragged node (or the first of the list, if we are dragging a node selection) -// 2. array of selected nodes (for multi selections) -export function getEventHandlerParams({ - nodeId, - dragItems, - nodeInternals -}: { - nodeId?: string; - dragItems: NodeDragItem[]; - nodeInternals: NodeInternals; -}): [Node, Node[]] { - const extentedDragItems: Node[] = dragItems.map((n) => { - const node = nodeInternals.get(n.id)!; - - return { - ...node, - position: n.position, - positionAbsolute: n.positionAbsolute - }; - }); - - return [ - nodeId ? extentedDragItems.find((n) => n.id === nodeId)! : extentedDragItems[0], - extentedDragItems - ]; -} diff --git a/packages/svelte/src/lib/actions/zoom/index.ts b/packages/svelte/src/lib/actions/zoom/index.ts index 32827a82..d4c49244 100644 --- a/packages/svelte/src/lib/actions/zoom/index.ts +++ b/packages/svelte/src/lib/actions/zoom/index.ts @@ -1,8 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { Writable } from 'svelte/store'; import { select } from 'd3-selection'; -import { zoom as d3Zoom, zoomIdentity } from 'd3-zoom'; -import type { D3ZoomEvent } from 'd3-zoom'; +import { zoom as d3Zoom, zoomIdentity, type D3ZoomEvent } from 'd3-zoom'; import type { D3SelectionInstance, D3ZoomInstance, Transform } from '@reactflow/system'; const isWrappedWithClass = (event: any, className: string | undefined) => diff --git a/packages/svelte/src/lib/components/Handle/handler.ts b/packages/svelte/src/lib/components/Handle/handler.ts index d9da352f..56d71b8f 100644 --- a/packages/svelte/src/lib/components/Handle/handler.ts +++ b/packages/svelte/src/lib/components/Handle/handler.ts @@ -1,3 +1,4 @@ +import { get, type Writable } from 'svelte/store'; import { getHostForElement, calcAutoPan, @@ -10,7 +11,6 @@ import type { HandleType, Connection, ConnectionMode, - Node, XYPosition, Transform } from '@reactflow/system'; @@ -25,8 +25,7 @@ import { type ConnectionHandle, type ValidConnectionFunc } from './utils'; -import { get, type Writable } from 'svelte/store'; -import type { ConnectionData } from '$lib/types'; +import type { ConnectionData, Node } from '$lib/types'; export function handlePointerDown({ event, diff --git a/packages/svelte/src/lib/components/Handle/index.svelte b/packages/svelte/src/lib/components/Handle/index.svelte index b722e3f8..4ce9f57a 100644 --- a/packages/svelte/src/lib/components/Handle/index.svelte +++ b/packages/svelte/src/lib/components/Handle/index.svelte @@ -9,9 +9,9 @@ type $$Props = HandleProps; + export let id: $$Props['id'] = undefined; export let type: $$Props['type'] = 'source'; export let position: $$Props['position'] = Position.Top; - export let id: $$Props['id'] = undefined; export let isConnectable: $$Props['isConnectable'] = true; export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true; let className: string | null = null; diff --git a/packages/svelte/src/lib/components/Handle/utils.ts b/packages/svelte/src/lib/components/Handle/utils.ts index 6029dac0..7294f2e5 100644 --- a/packages/svelte/src/lib/components/Handle/utils.ts +++ b/packages/svelte/src/lib/components/Handle/utils.ts @@ -1,7 +1,9 @@ import { internalsSymbol, ConnectionMode, type ConnectionStatus } from '@reactflow/system'; -import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '@reactflow/system'; +import type { Connection, HandleType, XYPosition, NodeHandleBounds } from '@reactflow/system'; import { getEventPosition } from '@reactflow/utils'; +import type { Node } from '$lib/types'; + export type ConnectionHandle = { id: string | null; type: HandleType; diff --git a/packages/svelte/src/lib/components/edges/BaseEdge.svelte b/packages/svelte/src/lib/components/edges/BaseEdge.svelte index 59129684..2a8c54fc 100644 --- a/packages/svelte/src/lib/components/edges/BaseEdge.svelte +++ b/packages/svelte/src/lib/components/edges/BaseEdge.svelte @@ -1,13 +1,13 @@ diff --git a/packages/svelte/src/lib/components/edges/EdgeWrapper.svelte b/packages/svelte/src/lib/components/edges/EdgeWrapper.svelte index 8f24ab5e..1bcb6b4b 100644 --- a/packages/svelte/src/lib/components/edges/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/edges/EdgeWrapper.svelte @@ -4,9 +4,9 @@ import { useStore } from '$lib/store'; import BezierEdge from '$lib/components/edges/StraightEdge.svelte'; - import type { EdgeProps, WrapEdgeProps } from '$lib/types'; + import type { EdgeProps, EdgeLayouted } from '$lib/types'; - type $$Props = WrapEdgeProps; + type $$Props = EdgeLayouted; export let id: $$Props['id']; export let type: $$Props['type'] = 'default'; @@ -16,6 +16,8 @@ export let sourceY: $$Props['sourceY'] = 0; export let targetX: $$Props['targetX'] = 0; export let targetY: $$Props['targetY'] = 0; + export let sourceHandleId: $$Props['sourceHandleId'] = undefined; + export let targetHandleId: $$Props['targetHandleId'] = undefined; export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom; export let targetPosition: $$Props['targetPosition'] = Position.Top; export let animated: $$Props['animated'] = false; diff --git a/packages/svelte/src/lib/container/Pane/index.svelte b/packages/svelte/src/lib/container/Pane/index.svelte index 2ca1b5df..996501cf 100644 --- a/packages/svelte/src/lib/container/Pane/index.svelte +++ b/packages/svelte/src/lib/container/Pane/index.svelte @@ -30,8 +30,11 @@