diff --git a/packages/core/package.json b/packages/core/package.json index 99bb8c3e..e47b565e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -38,7 +38,8 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@reactflow/system": "workspace:11.5.5", + "@reactflow/system": "workspace:*", + "@reactflow/utils": "workspace:*", "@types/d3": "^7.4.0", "@types/d3-drag": "^3.0.1", "@types/d3-selection": "^3.0.3", diff --git a/packages/core/src/components/A11yDescriptions/index.tsx b/packages/core/src/components/A11yDescriptions/index.tsx index ae9c3a0b..481a6aeb 100644 --- a/packages/core/src/components/A11yDescriptions/index.tsx +++ b/packages/core/src/components/A11yDescriptions/index.tsx @@ -1,6 +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/Attribution/index.tsx b/packages/core/src/components/Attribution/index.tsx index ad4ed22b..641dc8c7 100644 --- a/packages/core/src/components/Attribution/index.tsx +++ b/packages/core/src/components/Attribution/index.tsx @@ -1,5 +1,6 @@ +import type { PanelPosition, ProOptions } from '@reactflow/system'; + import Panel from '../Panel'; -import type { PanelPosition, ProOptions } from '../../types'; type AttributionProps = { proOptions?: ProOptions; diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx index cb813589..990ccbe1 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/core/src/components/ConnectionLine/index.tsx @@ -1,20 +1,22 @@ import { CSSProperties, useCallback } from 'react'; import { shallow } from 'zustand/shallow'; import cc from 'classcat'; -import { internalsSymbol } from '@reactflow/system'; +import { + internalsSymbol, + Position, + ConnectionLineType, + ConnectionMode, + type ConnectionLineComponent, + type ConnectionStatus, + type HandleType, + type ReactFlowState, + type ReactFlowStore, +} from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; import { getBezierPath } from '../Edges/BezierEdge'; import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; -import type { - ConnectionLineComponent, - ConnectionStatus, - HandleType, - ReactFlowState, - ReactFlowStore, -} from '../../types'; -import { Position, ConnectionLineType, ConnectionMode } 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 46311f26..07d06688 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 { 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 dc60493c..f365175d 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -1,6 +1,7 @@ +import { isNumeric } from '@reactflow/utils'; +import type { BaseEdgeProps } from '@reactflow/system'; + import EdgeText from './EdgeText'; -import { isNumeric } from '../../utils'; -import type { BaseEdgeProps } from '../../types'; const BaseEdge = ({ path, diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx index d7a02534..11fca8eb 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/core/src/components/Edges/BezierEdge.tsx @@ -1,9 +1,8 @@ import { memo } from 'react'; +import { Position, type BezierEdgeProps } from '@reactflow/system'; import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; -import { Position } from '../../types'; -import type { BezierEdgeProps } from '../../types'; export interface GetBezierPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/EdgeAnchor.tsx b/packages/core/src/components/Edges/EdgeAnchor.tsx index baf83cdd..3ea97546 100644 --- a/packages/core/src/components/Edges/EdgeAnchor.tsx +++ b/packages/core/src/components/Edges/EdgeAnchor.tsx @@ -1,7 +1,6 @@ import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react'; import cc from 'classcat'; - -import { Position } from '../../types'; +import { Position } from '@reactflow/system'; const shiftX = (x: number, shift: number, position: Position): number => { if (position === Position.Left) return x - shift; diff --git a/packages/core/src/components/Edges/EdgeText.tsx b/packages/core/src/components/Edges/EdgeText.tsx index 10a17be5..40db33ec 100644 --- a/packages/core/src/components/Edges/EdgeText.tsx +++ b/packages/core/src/components/Edges/EdgeText.tsx @@ -1,8 +1,7 @@ import { memo, useRef, useState, useEffect } from 'react'; import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; - -import { EdgeTextProps, Rect } from '../../types'; +import { EdgeTextProps, Rect } from '@reactflow/system'; const EdgeText: FC> = ({ x, diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index e549be58..f2de142f 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -1,9 +1,8 @@ import { memo } from 'react'; +import { Position, type EdgeProps } from '@reactflow/system'; import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; -import { Position } from '../../types'; -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 e61f8e46..79687148 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -1,9 +1,8 @@ import { memo } from 'react'; +import { Position, type SmoothStepEdgeProps, type XYPosition } from '@reactflow/system'; import BaseEdge from './BaseEdge'; import { getEdgeCenter } from './utils'; -import { Position } from '../../types'; -import type { SmoothStepEdgeProps, XYPosition } from '../../types'; export interface GetSmoothStepPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/StepEdge.tsx b/packages/core/src/components/Edges/StepEdge.tsx index df2646a7..6d802eae 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) => ( { if (typeof markerEndId !== 'undefined' && markerEndId) { diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 80a6be7d..eaa0c401 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -1,15 +1,14 @@ import { memo, useState, useMemo, useRef } from 'react'; import type { ComponentType, KeyboardEvent } from 'react'; import cc from 'classcat'; +import { getMarkerId, elementSelectionKeys } from '@reactflow/utils'; +import type { EdgeProps, WrapEdgeProps, Connection } from '@reactflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions'; import { handlePointerDown } from '../Handle/handler'; import { EdgeAnchor } from './EdgeAnchor'; -import { getMarkerId } from '../../utils/graph'; import { getMouseHandler } from './utils'; -import { elementSelectionKeys } from '../../utils'; -import type { EdgeProps, WrapEdgeProps, Connection } from '../../types'; export default (EdgeComponent: ComponentType) => { const EdgeWrapper = ({ diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 46cc64e9..e9cff290 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -1,9 +1,14 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; import { StoreApi } from 'zustand'; +import { + getHostForElement, + calcAutoPan, + getEventPosition, + pointToRendererPoint, + rendererPointToPoint, +} from '@reactflow/utils'; +import type { OnConnect, HandleType, ReactFlowState, Connection } from '@reactflow/system'; -import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils'; -import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types'; -import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph'; import { ConnectionHandle, getClosestHandle, diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index dab16653..1ae7be91 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -1,16 +1,13 @@ 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 { useStore, useStoreApi } from '../../hooks/useStore'; import { useNodeId } from '../../contexts/NodeIdContext'; import { handlePointerDown } from './handler'; -import { getHostForElement, isMouseEvent } from '../../utils'; -import { addEdge } from '../../utils/graph'; -import { Position } from '../../types'; -import type { HandleProps, Connection, ReactFlowState } from '../../types'; import { isValidHandle } from './utils'; -import { errorMessages } from '../../contants'; const alwaysValid = () => true; diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 7287022e..c7839bb1 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -1,9 +1,7 @@ import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; -import { internalsSymbol } from '@reactflow/system'; - -import { ConnectionMode, ConnectionStatus } from '../../types'; -import { getEventPosition } from '../../utils'; -import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types'; +import { internalsSymbol, ConnectionMode, ConnectionStatus } from '@reactflow/system'; +import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '@reactflow/system'; +import { getEventPosition } from '@reactflow/utils'; export type ConnectionHandle = { id: string | null; diff --git a/packages/core/src/components/Nodes/DefaultNode.tsx b/packages/core/src/components/Nodes/DefaultNode.tsx index 99835a3c..e82bd112 100644 --- a/packages/core/src/components/Nodes/DefaultNode.tsx +++ b/packages/core/src/components/Nodes/DefaultNode.tsx @@ -1,8 +1,7 @@ import { memo } from 'react'; +import { Position, type NodeProps } from '@reactflow/system'; import Handle from '../../components/Handle'; -import { Position } from '../../types'; -import type { NodeProps } from '../../types'; const DefaultNode = ({ data, diff --git a/packages/core/src/components/Nodes/InputNode.tsx b/packages/core/src/components/Nodes/InputNode.tsx index e6983317..21e4ba5d 100644 --- a/packages/core/src/components/Nodes/InputNode.tsx +++ b/packages/core/src/components/Nodes/InputNode.tsx @@ -1,8 +1,7 @@ import { memo } from 'react'; +import { Position, type NodeProps } from '@reactflow/system'; import Handle from '../../components/Handle'; -import { Position } from '../../types'; -import type { NodeProps } from '../../types'; const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => ( <> diff --git a/packages/core/src/components/Nodes/OutputNode.tsx b/packages/core/src/components/Nodes/OutputNode.tsx index fdcb5add..360c1113 100644 --- a/packages/core/src/components/Nodes/OutputNode.tsx +++ b/packages/core/src/components/Nodes/OutputNode.tsx @@ -1,8 +1,7 @@ import { memo } from 'react'; +import { Position, type NodeProps } from '@reactflow/system'; import Handle from '../../components/Handle'; -import { Position } from '../../types'; -import type { NodeProps } from '../../types'; const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => ( <> diff --git a/packages/core/src/components/Nodes/utils.ts b/packages/core/src/components/Nodes/utils.ts index dca9f297..2390102b 100644 --- a/packages/core/src/components/Nodes/utils.ts +++ b/packages/core/src/components/Nodes/utils.ts @@ -1,9 +1,7 @@ import { MouseEvent } from 'react'; import { StoreApi } from 'zustand'; - -import { getDimensions } from '../../utils'; -import { Position } from '../../types'; -import type { HandleElement, Node, NodeOrigin, ReactFlowState } from '../../types'; +import { getDimensions } from '@reactflow/utils'; +import { Position, type HandleElement, type Node, type NodeOrigin, type ReactFlowState } from '@reactflow/system'; export const getHandleBounds = ( selector: string, diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index f56f117b..f8b249be 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -1,6 +1,8 @@ import { useEffect, useRef, memo } from 'react'; import type { ComponentType, MouseEvent, KeyboardEvent } from 'react'; import cc from 'classcat'; +import { elementSelectionKeys, isInputDOMNode } from '@reactflow/utils'; +import type { NodeProps, WrapNodeProps, XYPosition } from '@reactflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { Provider } from '../../contexts/NodeIdContext'; @@ -8,8 +10,6 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions'; import useDrag from '../../hooks/useDrag'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; import { getMouseHandler, handleNodeClick } from './utils'; -import { elementSelectionKeys, isInputDOMNode } from '../../utils'; -import type { NodeProps, WrapNodeProps, XYPosition } 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 be4ecf59..e5a1da89 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -7,13 +7,13 @@ import { memo, useRef, useEffect } from 'react'; 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 { getRectOfNodes } from '../../utils/graph'; 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 7228f1a7..d9aefd36 100644 --- a/packages/core/src/components/Panel/index.tsx +++ b/packages/core/src/components/Panel/index.tsx @@ -1,8 +1,8 @@ import type { HTMLAttributes, ReactNode } from 'react'; import cc from 'classcat'; +import type { PanelPosition, ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; -import type { PanelPosition, 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 7004ddaf..f3ad453c 100644 --- a/packages/core/src/components/ReactFlowProvider/index.tsx +++ b/packages/core/src/components/ReactFlowProvider/index.tsx @@ -1,10 +1,10 @@ import { useRef } from 'react'; import type { FC, 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 556d7ce8..de7612d6 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 febd3b0c..7bdaac3e 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -1,9 +1,9 @@ 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 { useStore, useStoreApi } from '../../hooks/useStore'; -import type { Node, Edge, ReactFlowState, CoordinateExtent, 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 00bbcd63..09fafbd4 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 d718c65f..cc630ddb 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -1,9 +1,9 @@ import { memo, useCallback } from 'react'; +import type { EdgeMarker, ReactFlowState } from '@reactflow/system'; +import { getMarkerId } from '@reactflow/utils'; import { useStore } from '../../hooks/useStore'; -import { getMarkerId } from '../../utils/graph'; import { useMarkerSymbol } from './MarkerSymbols'; -import type { EdgeMarker, ReactFlowState } from '../../types'; type MarkerProps = EdgeMarker & { id: string; diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index aa561242..6cf6bae2 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -1,9 +1,7 @@ import { useMemo } from 'react'; +import { errorMessages, MarkerType, type EdgeMarker } from '@reactflow/system'; -import { MarkerType } from '../../types'; -import type { EdgeMarker } from '../../types'; import { useStoreApi } from '../../hooks/useStore'; -import { errorMessages } from '../../contants'; type SymbolProps = Omit; diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index ddc4aa4d..51f3f2d6 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -1,6 +1,7 @@ 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 { useStore } from '../../hooks/useStore'; import useVisibleEdges from '../../hooks/useVisibleEdges'; @@ -8,9 +9,6 @@ import MarkerDefinitions from './MarkerDefinitions'; import { getEdgePositions, getHandle, getNodeData } from './utils'; import { GraphViewProps } from '../GraphView'; -import { ConnectionMode, Position } from '../../types'; -import type { Edge, ReactFlowState } from '../../types'; -import { errorMessages } from '../../contants'; type EdgeRendererProps = Pick< GraphViewProps, diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts index b3c3a802..b4329238 100644 --- a/packages/core/src/container/EdgeRenderer/utils.ts +++ b/packages/core/src/container/EdgeRenderer/utils.ts @@ -1,21 +1,21 @@ import type { ComponentType } from 'react'; -import { internalsSymbol } from '@reactflow/system'; +import { + internalsSymbol, + Position, + type EdgeProps, + type EdgeTypes, + type EdgeTypesWrapped, + type HandleElement, + type NodeHandleBounds, + type Node, + type Rect, + type Transform, + type XYPosition, +} from '@reactflow/system'; +import { rectToBox } from '@reactflow/utils'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; -import { rectToBox } from '../../utils'; -import { Position } from '../../types'; -import type { - EdgeProps, - EdgeTypes, - EdgeTypesWrapped, - HandleElement, - NodeHandleBounds, - Node, - Rect, - Transform, - XYPosition, -} 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 a8e9dc69..2c47f9c5 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -1,5 +1,5 @@ -import { memo } from 'react'; -import type { ReactNode } from 'react'; +import { memo, type ReactNode } from 'react'; +import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../../hooks/useStore'; import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; @@ -8,7 +8,6 @@ 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 e489b1e9..0408fcd3 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -1,4 +1,5 @@ import { memo } from 'react'; +import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '@reactflow/system'; import FlowRenderer from '../FlowRenderer'; import NodeRenderer from '../NodeRenderer'; @@ -6,7 +7,6 @@ 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 b2d03613..30654861 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -1,17 +1,14 @@ import { memo, useMemo, useEffect, useRef } from 'react'; import type { ComponentType } from 'react'; import { shallow } from 'zustand/shallow'; -import { internalsSymbol } from '@reactflow/system'; +import { internalsSymbol, errorMessages, Position, type ReactFlowState, type WrapNodeProps } from '@reactflow/system'; +import { clampPosition } from '@reactflow/utils'; import useVisibleNodes from '../../hooks/useVisibleNodes'; import { useStore } from '../../hooks/useStore'; -import { clampPosition } from '../../utils'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; import { getPositionWithOrigin } from './utils'; -import { Position } from '../../types'; -import type { ReactFlowState, WrapNodeProps } from '../../types'; -import { errorMessages } from '../../contants'; type NodeRendererProps = Pick< GraphViewProps, diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/core/src/container/NodeRenderer/utils.ts index 6abc695d..221aaccc 100644 --- a/packages/core/src/container/NodeRenderer/utils.ts +++ b/packages/core/src/container/NodeRenderer/utils.ts @@ -1,11 +1,11 @@ import type { ComponentType } from 'react'; +import type { NodeTypes, NodeProps, NodeTypesWrapped, 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, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } 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 bb9e3615..06eceb48 100644 --- a/packages/core/src/container/Pane/index.tsx +++ b/packages/core/src/container/Pane/index.tsx @@ -5,15 +5,19 @@ import { memo, useRef, MouseEvent as ReactMouseEvent, 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 UserSelection from '../../components/UserSelection'; import { containerStyle } from '../../styles'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; -import { getConnectedEdges, getNodesInside } from '../../utils/graph'; -import { getEventPosition } from '../../utils'; -import { SelectionMode } from '../../types'; -import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types'; type PaneProps = { isSelecting: boolean; diff --git a/packages/core/src/container/ReactFlow/Wrapper.tsx b/packages/core/src/container/ReactFlow/Wrapper.tsx index 71241f69..b497b97f 100644 --- a/packages/core/src/container/ReactFlow/Wrapper.tsx +++ b/packages/core/src/container/ReactFlow/Wrapper.tsx @@ -1,5 +1,4 @@ -import { useContext } from 'react'; -import type { FC, PropsWithChildren } from 'react'; +import { useContext, type FC, type PropsWithChildren } from 'react'; import StoreContext from '../../contexts/RFStoreContext'; import ReactFlowProvider from '../../components/ReactFlowProvider'; diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 9e7b7a49..1ded2de0 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -1,6 +1,20 @@ import { forwardRef } from 'react'; import 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 Attribution from '../../components/Attribution'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; @@ -17,17 +31,6 @@ import GraphView from '../GraphView'; import Wrapper from './Wrapper'; import { infiniteExtent } from '../../store/initialState'; import { useNodeOrEdgeTypes } from './utils'; -import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../../types'; -import type { - EdgeTypes, - EdgeTypesWrapped, - NodeOrigin, - NodeTypes, - NodeTypesWrapped, - ReactFlowProps, - ReactFlowRefType, - Viewport, -} 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 cc5ab36d..d2a441e4 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -1,11 +1,16 @@ import { useMemo, useRef } from 'react'; import { shallow } from 'zustand/shallow'; +import { + errorMessages, + type EdgeTypes, + type EdgeTypesWrapped, + type NodeTypes, + type NodeTypesWrapped, +} from '@reactflow/system'; +import { devWarn } from '@reactflow/utils'; -import { devWarn } from '../../utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; -import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; -import { errorMessages } from '../../contants'; 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 64ed99d5..f786d5ed 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 7163cd35..effe658c 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -4,15 +4,14 @@ import { zoom, zoomIdentity } from 'd3-zoom'; import 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 useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { containerStyle } from '../../styles'; -import { clamp } from '../../utils'; -import { CoordinateExtent, PanOnScrollMode } from '../../types'; import type { FlowRendererProps } from '../FlowRenderer'; -import type { Viewport, 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 22d06daf..eb88e34e 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -2,13 +2,13 @@ import { useEffect, useRef, useState } from 'react'; import type { RefObject, 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 { useStoreApi } from '../../hooks/useStore'; import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils'; import { handleNodeClick } from '../../components/Nodes/utils'; import useGetPointerPosition from '../useGetPointerPosition'; -import { calcAutoPan, getEventPosition } from '../../utils'; -import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } 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 5ef3b3b2..3ad6e6d5 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -1,9 +1,15 @@ import type { RefObject } from 'react'; - -import { clampPosition, isNumeric } from '../../utils'; -import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types'; -import { getNodePositionWithOrigin } from '../../utils/graph'; -import { errorMessages } from '../../contants'; +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'; export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean { if (!node.parentNode) { diff --git a/packages/core/src/hooks/useEdges.ts b/packages/core/src/hooks/useEdges.ts index 78c0e36a..3426aacb 100644 --- a/packages/core/src/hooks/useEdges.ts +++ b/packages/core/src/hooks/useEdges.ts @@ -1,5 +1,6 @@ +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/useGetPointerPosition.ts b/packages/core/src/hooks/useGetPointerPosition.ts index 38c12470..67fdab5b 100644 --- a/packages/core/src/hooks/useGetPointerPosition.ts +++ b/packages/core/src/hooks/useGetPointerPosition.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; +import type { UseDragEvent } from '@reactflow/system'; import { useStoreApi } from './useStore'; -import type { UseDragEvent } from '../types'; function useGetPointerPosition() { const store = useStoreApi(); diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/core/src/hooks/useGlobalKeyHandler.ts index 8665f6d0..fff9a4f4 100644 --- a/packages/core/src/hooks/useGlobalKeyHandler.ts +++ b/packages/core/src/hooks/useGlobalKeyHandler.ts @@ -1,8 +1,8 @@ import { useEffect } from 'react'; +import type { KeyCode } from '@reactflow/system'; import { useStoreApi } from '../hooks/useStore'; import useKeyPress from './useKeyPress'; -import type { KeyCode } from '../types'; import useReactFlow from './useReactFlow'; interface HookParams { deleteKeyCode: KeyCode | null; diff --git a/packages/core/src/hooks/useKeyPress.ts b/packages/core/src/hooks/useKeyPress.ts index 20dcf37e..6209ff11 100644 --- a/packages/core/src/hooks/useKeyPress.ts +++ b/packages/core/src/hooks/useKeyPress.ts @@ -1,7 +1,6 @@ import { useState, useEffect, useRef, useMemo } from 'react'; - -import { isInputDOMNode } from '../utils'; -import type { KeyCode } from '../types'; +import { isInputDOMNode } from '@reactflow/utils'; +import type { KeyCode } from '@reactflow/system'; type Keys = Array; type PressedKeys = Set; diff --git a/packages/core/src/hooks/useNodes.ts b/packages/core/src/hooks/useNodes.ts index 8681b4fd..8aad017d 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/core/src/hooks/useNodes.ts @@ -1,5 +1,5 @@ import { useStore } from '../hooks/useStore'; -import type { Node, ReactFlowState } from '../types'; +import type { Node, ReactFlowState } from '@reactflow/system'; const nodesSelector = (state: ReactFlowState) => state.getNodes(); diff --git a/packages/core/src/hooks/useNodesEdgesState.ts b/packages/core/src/hooks/useNodesEdgesState.ts index 31c16354..90348d38 100644 --- a/packages/core/src/hooks/useNodesEdgesState.ts +++ b/packages/core/src/hooks/useNodesEdgesState.ts @@ -1,9 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useCallback } from 'react'; -import type { SetStateAction, Dispatch } from 'react'; +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 0a1e851a..dea87f33 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/core/src/hooks/useNodesInitialized.ts @@ -1,7 +1,6 @@ -import { internalsSymbol } from '@reactflow/system'; +import { internalsSymbol, type ReactFlowState } 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 27de912b..ab9ecd6f 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 323f23a8..653c4e47 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/useOnViewportChange.ts b/packages/core/src/hooks/useOnViewportChange.ts index 25727a59..46516a31 100644 --- a/packages/core/src/hooks/useOnViewportChange.ts +++ b/packages/core/src/hooks/useOnViewportChange.ts @@ -1,7 +1,7 @@ import { useEffect } from 'react'; +import type { OnViewportChange } from '@reactflow/system'; import { useStoreApi } from './useStore'; -import type { OnViewportChange } from '../types'; export type UseOnViewportChangeOptions = { onStart?: OnViewportChange; diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts index 32666212..fcba29a2 100644 --- a/packages/core/src/hooks/useReactFlow.ts +++ b/packages/core/src/hooks/useReactFlow.ts @@ -1,7 +1,5 @@ import { useCallback, useMemo } from 'react'; - -import useViewportHelper from './useViewportHelper'; -import { useStoreApi } from '../hooks/useStore'; +import { getConnectedEdges, getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils'; import type { ReactFlowInstance, Instance, @@ -14,9 +12,10 @@ import type { NodeChange, Node, Rect, -} from '../types'; -import { getConnectedEdges } from '../utils/graph'; -import { getOverlappingArea, isRectObject, nodeToRect } from '../utils'; +} from '@reactflow/system'; + +import useViewportHelper from './useViewportHelper'; +import { useStoreApi } from '../hooks/useStore'; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ export default function useReactFlow(): ReactFlowInstance { diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index a6d6d921..cc752034 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -1,9 +1,8 @@ -import { useEffect } from 'react'; -import type { MutableRefObject } from 'react'; +import { useEffect, type MutableRefObject } from 'react'; +import { errorMessages } from '@reactflow/system'; +import { getDimensions } from '@reactflow/utils'; import { useStoreApi } from '../hooks/useStore'; -import { getDimensions } from '../utils'; -import { errorMessages } from '../contants'; function useResizeHandler(rendererNode: MutableRefObject): void { const store = useStoreApi(); diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts index 3983579d..ca077cbf 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/core/src/hooks/useStore.ts @@ -1,10 +1,8 @@ import { useContext, useMemo } from 'react'; -import { useStore as useZustandStore } from 'zustand'; -import type { StoreApi } from 'zustand'; +import { useStore as useZustandStore, type StoreApi } from 'zustand'; +import { errorMessages, type ReactFlowState } from '@reactflow/system'; import StoreContext from '../contexts/RFStoreContext'; -import { errorMessages } from '../contants'; -import type { ReactFlowState } from '../types'; const zustandErrorMessage = errorMessages['001'](); diff --git a/packages/core/src/hooks/useUpdateNodeInternals.ts b/packages/core/src/hooks/useUpdateNodeInternals.ts index 849d76b6..d13175d9 100644 --- a/packages/core/src/hooks/useUpdateNodeInternals.ts +++ b/packages/core/src/hooks/useUpdateNodeInternals.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; +import type { UpdateNodeInternals } from '@reactflow/system'; import { useStoreApi } from '../hooks/useStore'; -import type { UpdateNodeInternals } from '../types'; function useUpdateNodeInternals(): UpdateNodeInternals { const store = useStoreApi(); diff --git a/packages/core/src/hooks/useViewport.ts b/packages/core/src/hooks/useViewport.ts index eef15cdc..d188b15e 100644 --- a/packages/core/src/hooks/useViewport.ts +++ b/packages/core/src/hooks/useViewport.ts @@ -1,7 +1,7 @@ import { shallow } from 'zustand/shallow'; +import type { Viewport, ReactFlowState } from '@reactflow/system'; import { useStore } from '../hooks/useStore'; -import type { Viewport, 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 522d6ac8..10e2b677 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/core/src/hooks/useViewportHelper.ts @@ -1,11 +1,11 @@ import { useMemo } from 'react'; import { zoomIdentity } from 'd3-zoom'; import { shallow } from 'zustand/shallow'; +import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '@reactflow/utils'; +import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '@reactflow/system'; import { useStoreApi, useStore } from '../hooks/useStore'; -import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph'; import { fitView } from '../store/utils'; -import type { ViewportHelperFunctions, ReactFlowState, XYPosition } 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 3944697b..fe8d14d0 100644 --- a/packages/core/src/hooks/useVisibleEdges.ts +++ b/packages/core/src/hooks/useVisibleEdges.ts @@ -1,10 +1,9 @@ import { useCallback } from 'react'; -import { internalsSymbol } from '@reactflow/system'; +import { internalsSymbol, type ReactFlowState, type NodeInternals, type Edge } from '@reactflow/system'; +import { isNumeric } from '@reactflow/utils'; import { useStore } from '../hooks/useStore'; import { isEdgeVisible } from '../container/EdgeRenderer/utils'; -import { isNumeric } from '../utils'; -import type { ReactFlowState, NodeInternals, 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 b076b126..19be6b3b 100644 --- a/packages/core/src/hooks/useVisibleNodes.ts +++ b/packages/core/src/hooks/useVisibleNodes.ts @@ -1,8 +1,8 @@ import { useCallback } from 'react'; +import { getNodesInside } from '@reactflow/utils'; +import type { ReactFlowState } from '@reactflow/system'; import { useStore } from '../hooks/useStore'; -import { getNodesInside } from '../utils/graph'; -import type { ReactFlowState } from '../types'; function useVisibleNodes(onlyRenderVisible: boolean) { const nodes = useStore( diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 140bcfcb..ae58a6c1 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -8,7 +8,6 @@ export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/E export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge'; export { default as BaseEdge } from './components/Edges/BaseEdge'; -export { rectToBox, boxToRect, getBoundsOfRects } from './utils'; export { isNode, isEdge, @@ -20,7 +19,10 @@ export { getTransformForBounds, getRectOfNodes, getNodePositionWithOrigin, -} from './utils/graph'; + rectToBox, + boxToRect, + getBoundsOfRects, +} from '@reactflow/utils'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { getMarkerEnd } from './components/Edges/utils'; export { default as ReactFlowProvider } from './components/ReactFlowProvider'; diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 21b04c28..c6f3dff9 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -1,27 +1,27 @@ import { createStore } from 'zustand'; import { zoomIdentity } from 'd3-zoom'; -import { internalsSymbol } from '@reactflow/system'; +import { clampPosition, getDimensions } 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'; -import { clampPosition, getDimensions } from '../utils'; import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; import { getHandleBounds } from '../components/Nodes/utils'; import { createNodeInternals, fitView, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils'; import initialState from './initialState'; -import type { - ReactFlowState, - Node, - Edge, - NodeDimensionUpdate, - CoordinateExtent, - NodeDimensionChange, - EdgeSelectionChange, - NodeSelectionChange, - NodePositionChange, - NodeDragItem, - UnselectNodesAndEdgesParams, - NodeChange, - XYPosition, -} from '../types'; const createRFStore = () => createStore((set, get) => ({ diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 99e9d298..f00b02ed 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -1,6 +1,5 @@ -import { devWarn } from '../utils'; -import { ConnectionMode } from '../types'; -import type { CoordinateExtent, ReactFlowStore } from '../types'; +import { devWarn } from '@reactflow/utils'; +import { ConnectionMode, type CoordinateExtent, type ReactFlowStore } from '@reactflow/system'; export const infiniteExtent: CoordinateExtent = [ [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index b58b7e1d..d55f8a39 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -1,20 +1,24 @@ import { zoomIdentity } from 'd3-zoom'; import type { StoreApi } from 'zustand'; -import { internalsSymbol } from '@reactflow/system'; - -import { isNumeric } from '../utils'; -import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph'; -import type { - Edge, - EdgeSelectionChange, - Node, - NodeInternals, - NodeSelectionChange, - ReactFlowState, - XYZPosition, - FitViewOptions, - NodeOrigin, -} from '../types'; +import { + internalsSymbol, + type Edge, + type EdgeSelectionChange, + type Node, + type NodeInternals, + type NodeSelectionChange, + type ReactFlowState, + type XYZPosition, + type FitViewOptions, + type NodeOrigin, +} from '@reactflow/system'; +import { + isNumeric, + getD3Transition, + getRectOfNodes, + getTransformForBounds, + getNodePositionWithOrigin, +} from '@reactflow/utils'; type ParentNodes = Record; diff --git a/packages/core/src/types/changes.ts b/packages/core/src/types/changes.ts deleted file mode 100644 index 375c8bf2..00000000 --- a/packages/core/src/types/changes.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ - -import type { XYPosition, Dimensions } from './utils'; -import type { Node } from './nodes'; -import type { Edge } from './edges'; - -export type NodeDimensionChange = { - id: string; - type: 'dimensions'; - dimensions?: Dimensions; - updateStyle?: boolean; - resizing?: boolean; -}; - -export type NodePositionChange = { - id: string; - type: 'position'; - position?: XYPosition; - positionAbsolute?: XYPosition; - dragging?: boolean; -}; - -export type NodeSelectionChange = { - id: string; - type: 'select'; - selected: boolean; -}; - -export type NodeRemoveChange = { - id: string; - type: 'remove'; -}; - -export type NodeAddChange = { - item: Node; - type: 'add'; -}; - -export type NodeResetChange = { - item: Node; - type: 'reset'; -}; - -export type NodeChange = - | NodeDimensionChange - | NodePositionChange - | NodeSelectionChange - | NodeRemoveChange - | NodeAddChange - | NodeResetChange; - -export type EdgeSelectionChange = NodeSelectionChange; -export type EdgeRemoveChange = NodeRemoveChange; -export type EdgeAddChange = { - item: Edge; - type: 'add'; -}; -export type EdgeResetChange = { - item: Edge; - type: 'reset'; -}; -export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange; diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts deleted file mode 100644 index 1614805a..00000000 --- a/packages/core/src/types/component-props.ts +++ /dev/null @@ -1,149 +0,0 @@ -import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; - -import type { - OnSelectionChangeFunc, - NodeTypes, - 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 & { - nodes?: Node[]; - edges?: Edge[]; - defaultNodes?: Node[]; - defaultEdges?: Edge[]; - defaultEdgeOptions?: DefaultEdgeOptions; - onNodeClick?: NodeMouseHandler; - onNodeDoubleClick?: NodeMouseHandler; - onNodeMouseEnter?: NodeMouseHandler; - onNodeMouseMove?: NodeMouseHandler; - onNodeMouseLeave?: NodeMouseHandler; - onNodeContextMenu?: NodeMouseHandler; - onNodeDragStart?: NodeDragHandler; - onNodeDrag?: NodeDragHandler; - onNodeDragStop?: NodeDragHandler; - onEdgeClick?: (event: ReactMouseEvent, node: Edge) => void; - onEdgeUpdate?: OnEdgeUpdateFunc; - onEdgeContextMenu?: EdgeMouseHandler; - onEdgeMouseEnter?: EdgeMouseHandler; - onEdgeMouseMove?: EdgeMouseHandler; - onEdgeMouseLeave?: EdgeMouseHandler; - onEdgeDoubleClick?: EdgeMouseHandler; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void; - onNodesChange?: OnNodesChange; - onEdgesChange?: OnEdgesChange; - onNodesDelete?: OnNodesDelete; - onEdgesDelete?: OnEdgesDelete; - onSelectionDragStart?: SelectionDragHandler; - onSelectionDrag?: SelectionDragHandler; - onSelectionDragStop?: SelectionDragHandler; - onSelectionStart?: (event: ReactMouseEvent) => void; - onSelectionEnd?: (event: ReactMouseEvent) => void; - onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; - onConnect?: OnConnect; - onConnectStart?: OnConnectStart; - onConnectEnd?: OnConnectEnd; - onClickConnectStart?: OnConnectStart; - onClickConnectEnd?: OnConnectEnd; - onInit?: OnInit; - onMove?: OnMove; - onMoveStart?: OnMoveStart; - onMoveEnd?: OnMoveEnd; - onSelectionChange?: OnSelectionChangeFunc; - onPaneScroll?: (event?: WheelEvent) => void; - onPaneClick?: (event: ReactMouseEvent) => void; - onPaneContextMenu?: (event: ReactMouseEvent) => void; - onPaneMouseEnter?: (event: ReactMouseEvent) => void; - onPaneMouseMove?: (event: ReactMouseEvent) => void; - onPaneMouseLeave?: (event: ReactMouseEvent) => void; - nodeTypes?: NodeTypes; - edgeTypes?: EdgeTypes; - connectionLineType?: ConnectionLineType; - connectionLineStyle?: CSSProperties; - connectionLineComponent?: ConnectionLineComponent; - connectionLineContainerStyle?: CSSProperties; - connectionMode?: ConnectionMode; - deleteKeyCode?: KeyCode | null; - selectionKeyCode?: KeyCode | null; - selectionOnDrag?: boolean; - selectionMode?: SelectionMode; - panActivationKeyCode?: KeyCode | null; - multiSelectionKeyCode?: KeyCode | null; - zoomActivationKeyCode?: KeyCode | null; - snapToGrid?: boolean; - snapGrid?: [number, number]; - onlyRenderVisibleElements?: boolean; - nodesDraggable?: boolean; - nodesConnectable?: boolean; - nodesFocusable?: boolean; - nodeOrigin?: NodeOrigin; - edgesFocusable?: boolean; - initNodeOrigin?: NodeOrigin; - elementsSelectable?: boolean; - selectNodesOnDrag?: boolean; - panOnDrag?: boolean | number[]; - minZoom?: number; - maxZoom?: number; - defaultViewport?: Viewport; - translateExtent?: CoordinateExtent; - preventScrolling?: boolean; - nodeExtent?: CoordinateExtent; - defaultMarkerColor?: string; - zoomOnScroll?: boolean; - zoomOnPinch?: boolean; - panOnScroll?: boolean; - panOnScrollSpeed?: number; - panOnScrollMode?: PanOnScrollMode; - zoomOnDoubleClick?: boolean; - edgeUpdaterRadius?: number; - noDragClassName?: string; - noWheelClassName?: string; - noPanClassName?: string; - fitView?: boolean; - fitViewOptions?: FitViewOptions; - connectOnClick?: boolean; - attributionPosition?: PanelPosition; - proOptions?: ProOptions; - elevateNodesOnSelect?: boolean; - elevateEdgesOnSelect?: boolean; - disableKeyboardA11y?: boolean; - autoPanOnNodeDrag?: boolean; - autoPanOnConnect?: boolean; - connectionRadius?: number; - onError?: OnError; -}; - -export type ReactFlowRefType = HTMLDivElement; diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts deleted file mode 100644 index 143c7fa6..00000000 --- a/packages/core/src/types/edges.ts +++ /dev/null @@ -1,180 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react'; - -import { ConnectionStatus, Position } from '.'; -import type { Connection, HandleElement, HandleType, Node } from '.'; - -type EdgeLabelOptions = { - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; -}; - -// interface for the user edge items -type DefaultEdge = { - id: string; - type?: string; - source: string; - target: string; - sourceHandle?: string | null; - targetHandle?: string | null; - style?: CSSProperties; - animated?: boolean; - hidden?: boolean; - deletable?: boolean; - data?: T; - className?: string; - sourceNode?: Node; - targetNode?: Node; - selected?: boolean; - markerStart?: EdgeMarkerType; - markerEnd?: EdgeMarkerType; - zIndex?: number; - ariaLabel?: string; - interactionWidth?: number; - focusable?: boolean; -} & EdgeLabelOptions; - -export type SmoothStepPathOptions = { - offset?: number; - borderRadius?: number; -}; - -type SmoothStepEdgeType = DefaultEdge & { - type: 'smoothstep'; - pathOptions?: SmoothStepPathOptions; -}; - -export type BezierPathOptions = { - curvature?: number; -}; - -type BezierEdgeType = DefaultEdge & { - type: 'default'; - pathOptions?: BezierPathOptions; -}; - -export type Edge = DefaultEdge | SmoothStepEdgeType | BezierEdgeType; - -export type DefaultEdgeOptions = Omit< - Edge, - 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode' ->; - -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; -}; - -// 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 EdgeTextProps = HTMLAttributes & - EdgeLabelOptions & { - x: number; - y: number; - }; - -export enum ConnectionLineType { - Bezier = 'default', - Straight = 'straight', - Step = 'step', - SmoothStep = 'smoothstep', - SimpleBezier = 'simplebezier', -} - -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; - -export type OnEdgeUpdateFunc = (oldEdge: Edge, newConnection: Connection) => void; - -export type EdgeMarker = { - type: MarkerType; - color?: string; - width?: number; - height?: number; - markerUnits?: string; - orient?: string; - strokeWidth?: number; -}; - -export type EdgeMarkerType = string | EdgeMarker; - -export enum MarkerType { - Arrow = 'arrow', - ArrowClosed = 'arrowclosed', -} diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts deleted file mode 100644 index f628727e..00000000 --- a/packages/core/src/types/general.ts +++ /dev/null @@ -1,279 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import type { - MouseEvent as ReactMouseEvent, - TouchEvent as ReactTouchEvent, - ComponentType, - MemoExoticComponent, -} from 'react'; -import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3'; - -import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; -import type { NodeChange, EdgeChange } from './changes'; -import type { - Node, - NodeInternals, - NodeDimensionUpdate, - NodeProps, - WrapNodeProps, - NodeDragItem, - NodeDragHandler, - SelectionDragHandler, - NodeOrigin, -} from './nodes'; -import type { Edge, EdgeProps, WrapEdgeProps } from './edges'; -import type { HandleType, StartHandle } from './handles'; -import type { DefaultEdgeOptions } from '.'; -import type { ReactFlowInstance } from './instance'; - -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 FitView = (fitViewOptions?: FitViewOptions) => boolean; - -export type Project = (position: XYPosition) => XYPosition; - -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 OnMove = (event: MouseEvent | TouchEvent, viewport: Viewport) => void; -export type OnMoveStart = OnMove; -export type OnMoveEnd = OnMove; - -export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void; -export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; -export type GetZoom = () => number; -export type GetViewport = () => Viewport; -export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void; -export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void; -export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void; - -export type OnInit = (reactFlowInstance: ReactFlowInstance) => void; - -export interface Connection { - source: string | null; - target: string | null; - sourceHandle: string | null; - targetHandle: string | null; -} - -export type ConnectionStatus = 'valid' | 'invalid'; - -export enum ConnectionMode { - Strict = 'strict', - Loose = 'loose', -} - -export type OnConnect = (connection: Connection) => void; - -export type FitViewOptions = { - padding?: number; - includeHiddenNodes?: boolean; - minZoom?: number; - maxZoom?: number; - duration?: number; - nodes?: (Partial & { id: Node['id'] })[]; -}; - -export type OnConnectStartParams = { - nodeId: string | null; - handleId: string | null; - handleType: HandleType | null; -}; - -export type OnConnectStart = (event: ReactMouseEvent | ReactTouchEvent, params: OnConnectStartParams) => void; -export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void; - -export type Viewport = { - x: number; - y: number; - zoom: number; -}; - -export type KeyCode = string | Array; - -export type SnapGrid = [number, number]; - -export enum PanOnScrollMode { - Free = 'free', - Vertical = 'vertical', - Horizontal = 'horizontal', -} - -export type ViewportHelperFunctionOptions = { - duration?: number; -}; - -export type SetCenterOptions = ViewportHelperFunctionOptions & { - zoom?: number; -}; - -export type FitBoundsOptions = ViewportHelperFunctionOptions & { - padding?: number; -}; - -export type UnselectNodesAndEdgesParams = { - nodes?: Node[]; - edges?: Edge[]; -}; - -export type OnViewportChange = (viewport: Viewport) => 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; -}; - -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: ZoomBehavior | null; - d3Selection: D3Selection | 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; - -export type UpdateNodeInternals = (nodeId: string) => void; - -export type OnSelectionChangeParams = { - nodes: Node[]; - edges: Edge[]; -}; - -export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void; - -export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; - -export type ProOptions = { - account?: string; - hideAttribution: boolean; -}; - -export type UseDragEvent = D3DragEvent; - -export enum SelectionMode { - Partial = 'partial', - Full = 'full', -} - -export type SelectionRect = Rect & { - startX: number; - startY: number; -}; - -export type OnError = (id: string, message: string) => void; diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts deleted file mode 100644 index 0850526c..00000000 --- a/packages/core/src/types/handles.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.'; - -export type HandleType = 'source' | 'target'; - -export interface HandleElement extends XYPosition, Dimensions { - id?: string | null; - position: Position; -} - -export interface StartHandle { - nodeId: string; - type: HandleType; - handleId?: string | null; -} - -export interface HandleProps { - type: HandleType; - position: Position; - isConnectable?: boolean; - onConnect?: OnConnect; - isValidConnection?: (connection: Connection) => boolean; - id?: string; -} diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts deleted file mode 100644 index 01cb0b69..00000000 --- a/packages/core/src/types/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export * from './general'; -export * from './nodes'; -export * from './edges'; -export * from './handles'; -export * from './changes'; -export * from './utils'; -export * from './instance'; -export * from './component-props'; diff --git a/packages/core/src/types/instance.ts b/packages/core/src/types/instance.ts deleted file mode 100644 index 7ff85606..00000000 --- a/packages/core/src/types/instance.ts +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-namespace */ -import { ViewportHelperFunctions, Viewport, Node, Edge, Rect } from '.'; - -export type ReactFlowJsonObject = { - nodes: Node[]; - edges: Edge[]; - viewport: Viewport; -}; - -export type DeleteElementsOptions = { - nodes?: (Partial & { id: Node['id'] })[]; - edges?: (Partial & { id: Edge['id'] })[]; -}; -export namespace Instance { - export type GetNodes = () => Node[]; - export type SetNodes = ( - payload: Node[] | ((nodes: Node[]) => Node[]) - ) => void; - export type AddNodes = (payload: Node[] | Node) => void; - export type GetNode = (id: string) => Node | undefined; - export type GetEdges = () => Edge[]; - export type SetEdges = ( - payload: Edge[] | ((edges: Edge[]) => Edge[]) - ) => void; - export type GetEdge = (id: string) => Edge | undefined; - export type AddEdges = (payload: Edge[] | Edge) => void; - export type ToObject = () => ReactFlowJsonObject; - export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void; - export type GetIntersectingNodes = ( - node: (Partial> & { id: Node['id'] }) | Rect, - partially?: boolean, - nodes?: Node[] - ) => Node[]; - export type IsNodeIntersecting = ( - node: (Partial> & { id: Node['id'] }) | Rect, - area: Rect, - partially?: boolean - ) => boolean; -} - -export type ReactFlowInstance = { - getNodes: Instance.GetNodes; - setNodes: Instance.SetNodes; - addNodes: Instance.AddNodes; - getNode: Instance.GetNode; - getEdges: Instance.GetEdges; - setEdges: Instance.SetEdges; - addEdges: Instance.AddEdges; - getEdge: Instance.GetEdge; - toObject: Instance.ToObject; - deleteElements: Instance.DeleteElements; - getIntersectingNodes: Instance.GetIntersectingNodes; - isNodeIntersecting: Instance.IsNodeIntersecting; - viewportInitialized: boolean; -} & Omit; diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts deleted file mode 100644 index 1494b0cd..00000000 --- a/packages/core/src/types/nodes.ts +++ /dev/null @@ -1,118 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; -import { internalsSymbol } from '@reactflow/system'; - -import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.'; - -// interface for the user node items -export type Node = { - id: string; - position: XYPosition; - data: T; - type?: U; - style?: CSSProperties; - className?: string; - sourcePosition?: Position; - targetPosition?: Position; - hidden?: boolean; - selected?: boolean; - dragging?: boolean; - draggable?: boolean; - selectable?: boolean; - connectable?: boolean; - deletable?: boolean; - dragHandle?: string; - width?: number | null; - height?: number | null; - parentNode?: string; - zIndex?: number; - extent?: 'parent' | CoordinateExtent; - expandParent?: boolean; - positionAbsolute?: XYPosition; - ariaLabel?: string; - focusable?: boolean; - resizing?: boolean; - - // only used internally - [internalsSymbol]?: { - z?: number; - handleBounds?: NodeHandleBounds; - isParent?: 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; - }; - -// props that get passed to a custom node -export type NodeProps = Pick< - WrapNodeProps, - 'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex' -> & { - dragging: boolean; - targetPosition?: Position; - sourcePosition?: Position; -}; - -export type NodeHandleBounds = { - source: HandleElement[] | null; - target: HandleElement[] | null; -}; - -export type NodeDimensionUpdate = { - id: string; - nodeElement: HTMLDivElement; - forceUpdate?: boolean; -}; - -export type NodeInternals = Map; - -export type NodeBounds = XYPosition & { - width: number | null; - height: number | null; -}; - -export type NodeDragItem = { - id: string; - position: XYPosition; - positionAbsolute: XYPosition; - // distance from the mouse cursor to the node when start dragging - distance: XYPosition; - width?: number | null; - height?: number | null; - extent?: 'parent' | CoordinateExtent; - parentNode?: string; - dragging?: boolean; -}; - -export type NodeOrigin = [number, number]; diff --git a/packages/core/src/types/utils.ts b/packages/core/src/types/utils.ts deleted file mode 100644 index eadce743..00000000 --- a/packages/core/src/types/utils.ts +++ /dev/null @@ -1,29 +0,0 @@ -export enum Position { - Left = 'left', - Top = 'top', - Right = 'right', - Bottom = 'bottom', -} - -export interface XYPosition { - x: number; - y: number; -} - -export type XYZPosition = XYPosition & { z: number }; - -export interface Dimensions { - width: number; - height: number; -} - -export interface Rect extends Dimensions, XYPosition {} - -export interface Box extends XYPosition { - x2: number; - y2: number; -} - -export type Transform = [number, number, number]; - -export type CoordinateExtent = [[number, number], [number, number]]; diff --git a/packages/core/src/utils/changes.ts b/packages/core/src/utils/changes.ts index 5deb3fdc..65ed6b9c 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 '../types'; +import type { Node, Edge, EdgeChange, NodeChange } from '@reactflow/system'; function handleParentExpand(res: any[], updateItem: any) { const parent = res.find((e) => e.id === updateItem.parentNode); diff --git a/packages/svelte/src/lib/container/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow.svelte index b2a85db0..67b265a8 100644 --- a/packages/svelte/src/lib/container/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow.svelte @@ -10,6 +10,7 @@ export let nodes: Node[]; export let edges: Edge[]; + export let fitView: boolean; export let className: string | null = null; export let id: string = '1'; @@ -20,6 +21,7 @@ const store = createStore({ nodes, edges, + fitView }); setContext(key, { diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index d8093111..865a6f14 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -1,5 +1,5 @@ import { getContext } from 'svelte'; -import { derived, writable, type Readable, type Writable } from 'svelte/store'; +import { derived, get, writable, type Readable, type Writable } from 'svelte/store'; import { type Node, type Transform, @@ -23,6 +23,7 @@ export const key = Symbol(); type CreateStoreProps = { nodes: Node[]; edges: Edge[]; + fitView: boolean; transform?: Transform; }; @@ -49,13 +50,16 @@ type SvelteFlowStore = { export function createStore({ nodes = [], edges = [], - transform = [0, 0, 1] + transform = [0, 0, 1], + fitView: fitViewOnInit = false }: CreateStoreProps): SvelteFlowStore { const nodesStore = writable(nodes.map((n) => ({ ...n, positionAbsolute: n.position }))); const edgesStore = writable(edges); const heightStore = writable(500); const widthStore = writable(500); + let fitViewOnInitDone = false; + const edgesWithDataStore = derived([edgesStore, nodesStore], ([$edges, $nodes]) => { return $edges .map((edge) => { @@ -132,39 +136,42 @@ export function createStore({ const style = window.getComputedStyle(viewportNode); const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform); - nodesStore.update((nds) => { - const nextNodes = nds.map((node) => { - const update = updates.find((u) => u.id === node.id); + const nextNodes = get(nodesStore).map((node) => { + const update = updates.find((u) => u.id === node.id); - if (update) { - const dimensions = getDimensions(update.nodeElement); + if (update) { + const dimensions = getDimensions(update.nodeElement); - const doUpdate = !!( - dimensions.width && - dimensions.height && - (node.width !== dimensions.width || - node.height !== dimensions.height || - update.forceUpdate) - ); + const doUpdate = !!( + dimensions.width && + dimensions.height && + (node.width !== dimensions.width || + node.height !== dimensions.height || + update.forceUpdate) + ); - if (doUpdate) { - node[internalsSymbol] = { - ...node[internalsSymbol], - handleBounds: { - source: getHandleBounds('.source', update.nodeElement, zoom), - target: getHandleBounds('.target', update.nodeElement, zoom) - } - }; - node.width = dimensions.width; - node.height = dimensions.height; - } + if (doUpdate) { + node[internalsSymbol] = { + ...node[internalsSymbol], + handleBounds: { + source: getHandleBounds('.source', update.nodeElement, zoom), + target: getHandleBounds('.target', update.nodeElement, zoom) + } + }; + node.width = dimensions.width; + node.height = dimensions.height; } + } - return node; - }); - - return nextNodes; + return node; }); + + // const nextFitViewOnInitDone = + // fitViewOnInitDone || (fitViewOnInit && !fitViewOnInitDone && fitView(get, { initial: true })); + + // fitViewOnInitDone = nextFitViewOnInitDone; + + nodesStore.set(nextNodes); } return { diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte index 2d4a25a7..5afcd3b8 100644 --- a/packages/svelte/src/routes/+page.svelte +++ b/packages/svelte/src/routes/+page.svelte @@ -57,7 +57,7 @@ // }] - +