diff --git a/README.md b/README.md index 6962878c..bd25d0f9 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ import ReactFlow, { useNodesState, useEdgesState, addEdge, -} from 'reactflow'; +} from '@xyflow/react'; import 'reactflow/dist/style.css'; diff --git a/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx b/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx index 021dc420..d64d9dfd 100644 --- a/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import ReactFlow, { Edge, useEdges } from 'reactflow'; +import ReactFlow, { Edge, useEdges } from '@xyflow/react'; import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx b/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx index e80947dc..43b7c071 100644 --- a/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import ReactFlow, { Node, useNodes } from 'reactflow'; +import ReactFlow, { Node, useNodes } from '@xyflow/react'; import { nodes } from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx index d7082b1f..e70a68c8 100644 --- a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { useNodesInitialized } from 'reactflow'; +import ReactFlow, { useNodesInitialized } from '@xyflow/react'; import { nodes } from '../../fixtures/simpleflow'; import ControlledFlow from '../../support/ControlledFlow'; diff --git a/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx b/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx index 2f6edd8e..22da0e8e 100644 --- a/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { useOnViewportChange, Viewport } from 'reactflow'; +import ReactFlow, { useOnViewportChange, Viewport } from '@xyflow/react'; describe('useOnViewportChange.cy.tsx', () => { it('listen to viewport drag', () => { diff --git a/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx b/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx index cf57f7c5..7e2c8b6b 100644 --- a/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { useViewport, Viewport } from 'reactflow'; +import ReactFlow, { useViewport, Viewport } from '@xyflow/react'; describe('useViewport.cy.tsx', () => { it('handles drag', () => { diff --git a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx index d777531e..30bf86b9 100644 --- a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { EdgeProps } from 'reactflow'; +import ReactFlow, { EdgeProps } from '@xyflow/react'; import ControlledFlow from '../../support/ControlledFlow'; import * as simpleflow from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx index b1b354a0..a2fbef35 100644 --- a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow'; +import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react'; import * as simpleflow from '../../fixtures/simpleflow'; function CustomEdge(props: EdgeProps) { diff --git a/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx b/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx index 5a5a264a..4b1eb0cf 100644 --- a/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow from 'reactflow'; +import ReactFlow from '@xyflow/react'; import { nodes, edges } from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx b/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx index c73c94d1..dd1377ba 100644 --- a/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from 'reactflow'; +import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react'; import ControlledFlow from '../../support/ControlledFlow'; import * as simpleflow from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/utils/graph-utils.cy.ts b/examples/vite-app/cypress/components/utils/graph-utils.cy.ts index 74119444..7457f5ab 100644 --- a/examples/vite-app/cypress/components/utils/graph-utils.cy.ts +++ b/examples/vite-app/cypress/components/utils/graph-utils.cy.ts @@ -1,4 +1,4 @@ -import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from 'reactflow'; +import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from '@xyflow/react'; const nodes: Node[] = [ { diff --git a/examples/vite-app/cypress/fixtures/simpleflow.ts b/examples/vite-app/cypress/fixtures/simpleflow.ts index ede9ac5c..350688ad 100644 --- a/examples/vite-app/cypress/fixtures/simpleflow.ts +++ b/examples/vite-app/cypress/fixtures/simpleflow.ts @@ -1,4 +1,4 @@ -import { Node, Edge } from 'reactflow'; +import { Node, Edge } from '@xyflow/react'; export const nodes: Node[] = [ { diff --git a/examples/vite-app/cypress/support/ControlledFlow.tsx b/examples/vite-app/cypress/support/ControlledFlow.tsx index 6181f113..eaa560bf 100644 --- a/examples/vite-app/cypress/support/ControlledFlow.tsx +++ b/examples/vite-app/cypress/support/ControlledFlow.tsx @@ -10,7 +10,7 @@ import { Connection, addEdge, ReactFlowProps, -} from 'reactflow'; +} from '@xyflow/react'; function ControlledFlow({ addOnNodeChangeHandler = true, diff --git a/examples/vite-app/cypress/support/component.ts b/examples/vite-app/cypress/support/component.ts index f065b036..94d859fe 100644 --- a/examples/vite-app/cypress/support/component.ts +++ b/examples/vite-app/cypress/support/component.ts @@ -6,9 +6,9 @@ import './commands'; import 'cypress-real-events/support'; import { mount } from 'cypress/react18'; -import { XYPosition } from 'reactflow'; +import { XYPosition } from '@xyflow/react'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; declare global { // eslint-disable-next-line @typescript-eslint/no-namespace diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index 6226fda0..16a01a02 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -1,10 +1,10 @@ { - "name": "@reactflow/examples", + "name": "@xyflow/react-examples", "private": true, "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite --port 3000 --open --host --force", + "dev": "vite --port 3000 --open --host", "serve": "vite serve --port 3000", "build": "vite build", "test:dev": "cypress open", @@ -14,13 +14,13 @@ "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'" }, "dependencies": { + "@xyflow/react": "workspace:*", "classcat": "^5.0.3", "dagre": "^0.8.5", "localforage": "^1.10.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", - "reactflow": "workspace:*", "zustand": "^4.3.1" }, "devDependencies": { @@ -29,6 +29,7 @@ "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "4.0.0", + "@vitejs/plugin-react-swc": "^3.3.2", "cypress": "^10.6.0", "cypress-real-events": "^1.7.1", "start-server-and-test": "^1.14.0", diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx index 0cbabf0a..d9486ffe 100644 --- a/examples/vite-app/src/examples/Backgrounds/index.tsx +++ b/examples/vite-app/src/examples/Backgrounds/index.tsx @@ -1,13 +1,14 @@ import { FC } from 'react'; -import ReactFlow, { +import { + ReactFlow, Node, ReactFlowProvider, useNodesState, Background, BackgroundProps, BackgroundVariant, -} from 'reactflow'; +} from '@xyflow/react'; import styles from './style.module.css'; diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index 76ce801b..21f48ec5 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent } from 'react'; -import ReactFlow, { +import { + ReactFlow, MiniMap, Background, BackgroundVariant, @@ -9,7 +10,7 @@ import ReactFlow, { Edge, useReactFlow, Panel, -} from 'reactflow'; +} from '@xyflow/react'; const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); diff --git a/examples/vite-app/src/examples/CancelConnection/data.ts b/examples/vite-app/src/examples/CancelConnection/data.ts index 821b79fe..b8a436f9 100644 --- a/examples/vite-app/src/examples/CancelConnection/data.ts +++ b/examples/vite-app/src/examples/CancelConnection/data.ts @@ -1,4 +1,4 @@ -import { Edge, Node } from 'reactflow'; +import { Edge, Node } from '@xyflow/react'; export const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/CancelConnection/index.tsx b/examples/vite-app/src/examples/CancelConnection/index.tsx index 689ededf..56c8b412 100644 --- a/examples/vite-app/src/examples/CancelConnection/index.tsx +++ b/examples/vite-app/src/examples/CancelConnection/index.tsx @@ -1,4 +1,5 @@ -import ReactFlow, { +import { + ReactFlow, Background, MiniMap, addEdge, @@ -10,7 +11,7 @@ import ReactFlow, { OnConnectStart, OnConnectEnd, useStore, -} from 'reactflow'; +} from '@xyflow/react'; import useCountdown from './hooks/useCountdown'; import { initialEdges, initialNodes } from './data'; @@ -21,7 +22,7 @@ const CANCEL_AFTER = 5; // seconds const CancelConnection = () => { const [nodes, _, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const cancelConnection = useStore(state => state.cancelConnection) + const cancelConnection = useStore((state) => state.cancelConnection); // Cancels connection after 5 seconds const countdown = useCountdown(() => cancelConnection()); @@ -32,11 +33,7 @@ const CancelConnection = () => { return ( <> - + { ); -} +}; export default () => ( diff --git a/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx b/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx index 1d6ed299..170df3a4 100644 --- a/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx +++ b/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx @@ -1,4 +1,5 @@ -import ReactFlow, { +import { + ReactFlow, useReactFlow, Node, Edge, @@ -7,7 +8,7 @@ import ReactFlow, { useEdgesState, Background, BackgroundVariant, -} from 'reactflow'; +} from '@xyflow/react'; const defaultNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx b/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx index b27306dd..ddba960b 100644 --- a/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx +++ b/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx @@ -1,4 +1,4 @@ -import { ConnectionLineComponentProps } from 'reactflow'; +import { ConnectionLineComponentProps } from '@xyflow/react'; function ConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) { return ( diff --git a/examples/vite-app/src/examples/CustomConnectionLine/index.tsx b/examples/vite-app/src/examples/CustomConnectionLine/index.tsx index 669ec17b..2e5e2969 100644 --- a/examples/vite-app/src/examples/CustomConnectionLine/index.tsx +++ b/examples/vite-app/src/examples/CustomConnectionLine/index.tsx @@ -1,5 +1,6 @@ import { useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Node, addEdge, Connection, @@ -8,7 +9,7 @@ import ReactFlow, { useEdgesState, Background, BackgroundVariant, -} from 'reactflow'; +} from '@xyflow/react'; import ConnectionLine from './ConnectionLine'; diff --git a/examples/vite-app/src/examples/CustomMiniMapNode/index.tsx b/examples/vite-app/src/examples/CustomMiniMapNode/index.tsx index 6a8e5807..d8f584b6 100644 --- a/examples/vite-app/src/examples/CustomMiniMapNode/index.tsx +++ b/examples/vite-app/src/examples/CustomMiniMapNode/index.tsx @@ -1,6 +1,7 @@ import { MouseEvent, CSSProperties, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, Background, BackgroundVariant, @@ -13,7 +14,7 @@ import ReactFlow, { ReactFlowInstance, useEdgesState, useNodesState, -} from 'reactflow'; +} from '@xyflow/react'; const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/examples/vite-app/src/examples/CustomNode/ColorSelectorNode.tsx b/examples/vite-app/src/examples/CustomNode/ColorSelectorNode.tsx index 2387e0e4..aebc8e0e 100644 --- a/examples/vite-app/src/examples/CustomNode/ColorSelectorNode.tsx +++ b/examples/vite-app/src/examples/CustomNode/ColorSelectorNode.tsx @@ -1,5 +1,5 @@ import React, { memo, FC, CSSProperties, useCallback } from 'react'; -import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from 'reactflow'; +import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react'; const targetHandleStyle: CSSProperties = { background: '#555' }; const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 }; diff --git a/examples/vite-app/src/examples/CustomNode/index.tsx b/examples/vite-app/src/examples/CustomNode/index.tsx index 27fab297..72c58126 100644 --- a/examples/vite-app/src/examples/CustomNode/index.tsx +++ b/examples/vite-app/src/examples/CustomNode/index.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, MiniMap, Controls, addEdge, @@ -10,7 +11,7 @@ import ReactFlow, { Connection, useNodesState, useEdgesState, -} from 'reactflow'; +} from '@xyflow/react'; import ColorSelectorNode from './ColorSelectorNode'; diff --git a/examples/vite-app/src/examples/DefaultNodes/index.tsx b/examples/vite-app/src/examples/DefaultNodes/index.tsx index affd4ce7..46ef8e0c 100644 --- a/examples/vite-app/src/examples/DefaultNodes/index.tsx +++ b/examples/vite-app/src/examples/DefaultNodes/index.tsx @@ -1,4 +1,5 @@ -import ReactFlow, { +import { + ReactFlow, useReactFlow, Node, Edge, @@ -6,7 +7,7 @@ import ReactFlow, { Background, BackgroundVariant, Panel, -} from 'reactflow'; +} from '@xyflow/react'; const defaultNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/DragHandle/DragHandleNode.tsx b/examples/vite-app/src/examples/DragHandle/DragHandleNode.tsx index 91ae44e8..56de576b 100644 --- a/examples/vite-app/src/examples/DragHandle/DragHandleNode.tsx +++ b/examples/vite-app/src/examples/DragHandle/DragHandleNode.tsx @@ -1,6 +1,5 @@ -import React, { memo, FC } from 'react'; - -import { Handle, Position, NodeProps, Connection, Edge } from 'reactflow'; +import { memo, FC } from 'react'; +import { Handle, Position, NodeProps, Connection, Edge } from '@xyflow/react'; const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params); diff --git a/examples/vite-app/src/examples/DragHandle/index.tsx b/examples/vite-app/src/examples/DragHandle/index.tsx index 8e6bbf98..b76d8ae7 100644 --- a/examples/vite-app/src/examples/DragHandle/index.tsx +++ b/examples/vite-app/src/examples/DragHandle/index.tsx @@ -1,5 +1,5 @@ import { MouseEvent } from 'react'; -import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow'; +import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react'; import DragHandleNode from './DragHandleNode'; diff --git a/examples/vite-app/src/examples/DragNDrop/index.tsx b/examples/vite-app/src/examples/DragNDrop/index.tsx index d59ee687..16e9737e 100644 --- a/examples/vite-app/src/examples/DragNDrop/index.tsx +++ b/examples/vite-app/src/examples/DragNDrop/index.tsx @@ -1,5 +1,6 @@ import { useState, DragEvent } from 'react'; -import ReactFlow, { +import { + ReactFlow, ReactFlowProvider, addEdge, ReactFlowInstance, @@ -10,7 +11,7 @@ import ReactFlow, { useEdgesState, Controls, NodeOrigin, -} from 'reactflow'; +} from '@xyflow/react'; import Sidebar from './Sidebar'; diff --git a/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx b/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx index ea671570..8342d730 100644 --- a/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx +++ b/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx @@ -1,4 +1,4 @@ -import { ConnectionLineComponentProps, getStraightPath } from 'reactflow'; +import { ConnectionLineComponentProps, getStraightPath } from '@xyflow/react'; function CustomConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle }: ConnectionLineComponentProps) { const [edgePath] = getStraightPath({ diff --git a/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx b/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx index 3e489362..7d3d6d67 100644 --- a/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx +++ b/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx @@ -1,4 +1,4 @@ -import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow'; +import { Handle, NodeProps, Position, ReactFlowState, useStore } from '@xyflow/react'; const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionStartHandle?.nodeId; diff --git a/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx b/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx index 4b1038f0..55ed472b 100644 --- a/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx +++ b/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { useStore, getStraightPath, EdgeProps } from 'reactflow'; +import { useStore, getStraightPath, EdgeProps } from '@xyflow/react'; import { getEdgeParams } from './utils.js'; diff --git a/examples/vite-app/src/examples/EasyConnect/index.tsx b/examples/vite-app/src/examples/EasyConnect/index.tsx index 1e26ae3d..7e600848 100644 --- a/examples/vite-app/src/examples/EasyConnect/index.tsx +++ b/examples/vite-app/src/examples/EasyConnect/index.tsx @@ -1,11 +1,11 @@ import { useCallback } from 'react'; -import ReactFlow, { Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from 'reactflow'; +import { ReactFlow, Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from '@xyflow/react'; import CustomNode from './CustomNode'; import FloatingEdge from './FloatingEdge'; import CustomConnectionLine from './CustomConnectionLine'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; import './style.css'; const initialNodes: Node[] = [ diff --git a/examples/vite-app/src/examples/EasyConnect/utils.tsx b/examples/vite-app/src/examples/EasyConnect/utils.tsx index 02bf2eaf..cef818f5 100644 --- a/examples/vite-app/src/examples/EasyConnect/utils.tsx +++ b/examples/vite-app/src/examples/EasyConnect/utils.tsx @@ -1,4 +1,4 @@ -import { Node, Position, MarkerType, XYPosition } from 'reactflow'; +import { Node, Position, MarkerType, XYPosition } from '@xyflow/react'; // this helper function returns the intersection point // of the line between the center of the intersectionNode and the target node diff --git a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx index 05d893ca..ca9bb5f0 100644 --- a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx +++ b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx @@ -1,5 +1,5 @@ import { FC, MouseEvent } from 'react'; -import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow'; +import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from '@xyflow/react'; const CustomEdge: FC = ({ id, diff --git a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx index ebdb1641..d060a19d 100644 --- a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx +++ b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow'; +import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from '@xyflow/react'; const CustomEdge: FC = ({ id, diff --git a/examples/vite-app/src/examples/EdgeRenderer/index.tsx b/examples/vite-app/src/examples/EdgeRenderer/index.tsx index d80cea8b..b5b84fc6 100644 --- a/examples/vite-app/src/examples/EdgeRenderer/index.tsx +++ b/examples/vite-app/src/examples/EdgeRenderer/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Controls, Background, MiniMap, @@ -11,7 +12,7 @@ import ReactFlow, { Node, useEdgesState, useNodesState, -} from 'reactflow'; +} from '@xyflow/react'; import CustomEdge from './CustomEdge'; import CustomEdge2 from './CustomEdge2'; diff --git a/examples/vite-app/src/examples/EdgeRouting/index.tsx b/examples/vite-app/src/examples/EdgeRouting/index.tsx index 37bdb5cb..4e78212b 100644 --- a/examples/vite-app/src/examples/EdgeRouting/index.tsx +++ b/examples/vite-app/src/examples/EdgeRouting/index.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow'; +import { ReactFlow, Node, Edge, Position, MarkerType } from '@xyflow/react'; const nodes: Node[] = [ // LTR diff --git a/examples/vite-app/src/examples/EdgeTypes/index.tsx b/examples/vite-app/src/examples/EdgeTypes/index.tsx index 9c1eb39a..691eb36a 100644 --- a/examples/vite-app/src/examples/EdgeTypes/index.tsx +++ b/examples/vite-app/src/examples/EdgeTypes/index.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Background, Controls, MiniMap, @@ -10,7 +11,7 @@ import ReactFlow, { Edge, useNodesState, useEdgesState, -} from 'reactflow'; +} from '@xyflow/react'; import { getElements } from './utils'; diff --git a/examples/vite-app/src/examples/EdgeTypes/utils.ts b/examples/vite-app/src/examples/EdgeTypes/utils.ts index 4992bd6f..2a55d889 100644 --- a/examples/vite-app/src/examples/EdgeTypes/utils.ts +++ b/examples/vite-app/src/examples/EdgeTypes/utils.ts @@ -1,4 +1,4 @@ -import { Edge, Node, Position } from 'reactflow'; +import { Edge, Node, Position } from '@xyflow/react'; const nodeWidth = 80; const nodeGapWidth = nodeWidth * 2; diff --git a/examples/vite-app/src/examples/Edges/CustomEdge.tsx b/examples/vite-app/src/examples/Edges/CustomEdge.tsx index ff700413..f2fdc34c 100644 --- a/examples/vite-app/src/examples/Edges/CustomEdge.tsx +++ b/examples/vite-app/src/examples/Edges/CustomEdge.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { BaseEdge, EdgeProps, getBezierPath } from 'reactflow'; +import { BaseEdge, EdgeProps, getBezierPath } from '@xyflow/react'; const CustomEdge: FC = ({ id, diff --git a/examples/vite-app/src/examples/Edges/CustomEdge2.tsx b/examples/vite-app/src/examples/Edges/CustomEdge2.tsx index b40f12cb..02cfd791 100644 --- a/examples/vite-app/src/examples/Edges/CustomEdge2.tsx +++ b/examples/vite-app/src/examples/Edges/CustomEdge2.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from 'reactflow'; +import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from '@xyflow/react'; const CustomEdge: FC = ({ id, diff --git a/examples/vite-app/src/examples/Edges/index.tsx b/examples/vite-app/src/examples/Edges/index.tsx index d80cea8b..b5b84fc6 100644 --- a/examples/vite-app/src/examples/Edges/index.tsx +++ b/examples/vite-app/src/examples/Edges/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Controls, Background, MiniMap, @@ -11,7 +12,7 @@ import ReactFlow, { Node, useEdgesState, useNodesState, -} from 'reactflow'; +} from '@xyflow/react'; import CustomEdge from './CustomEdge'; import CustomEdge2 from './CustomEdge2'; diff --git a/examples/vite-app/src/examples/Empty/index.tsx b/examples/vite-app/src/examples/Empty/index.tsx index c7efeb14..e162daad 100644 --- a/examples/vite-app/src/examples/Empty/index.tsx +++ b/examples/vite-app/src/examples/Empty/index.tsx @@ -1,6 +1,7 @@ import { MouseEvent, CSSProperties, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Background, BackgroundVariant, Controls, @@ -11,7 +12,7 @@ import ReactFlow, { useNodesState, useEdgesState, ReactFlowInstance, -} from 'reactflow'; +} from '@xyflow/react'; const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 64cfb4bb..bccafa96 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow'; +import { ReactFlow, Background, BackgroundVariant, Node, Edge, SelectionMode } from '@xyflow/react'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; diff --git a/examples/vite-app/src/examples/FloatingEdges/FloatingConnectionLine.tsx b/examples/vite-app/src/examples/FloatingEdges/FloatingConnectionLine.tsx index 19fb70a7..3bac9d41 100644 --- a/examples/vite-app/src/examples/FloatingEdges/FloatingConnectionLine.tsx +++ b/examples/vite-app/src/examples/FloatingEdges/FloatingConnectionLine.tsx @@ -1,16 +1,10 @@ -import React, { FC } from 'react'; -import { getBezierPath, ConnectionLineComponentProps, Node } from 'reactflow'; +import { FC } from 'react'; +import { getBezierPath, ConnectionLineComponentProps, Node } from '@xyflow/react'; import { getEdgeParams } from './utils'; -const FloatingConnectionLine: FC = ({ - targetX, - targetY, - sourcePosition, - targetPosition, - sourceNode, -}) => { - if (!sourceNode) { +const FloatingConnectionLine: FC = ({ toX, toY, fromPosition, toPosition, fromNode }) => { + if (!fromNode) { return null; } @@ -18,23 +12,24 @@ const FloatingConnectionLine: FC = ({ id: 'connection-target', width: 1, height: 1, - position: { x: targetX, y: targetY }, + position: { x: toX, y: toY }, } as Node; - const { sx, sy } = getEdgeParams(sourceNode, targetNode); - const d = getBezierPath({ + const { sx, sy } = getEdgeParams(fromNode, targetNode); + + const [path] = getBezierPath({ sourceX: sx, sourceY: sy, - sourcePosition, - targetPosition, - targetX, - targetY, + sourcePosition: fromPosition, + targetPosition: toPosition, + targetX: toX, + targetY: toY, }); return ( - - + + ); }; diff --git a/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx b/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx index 5e50f35f..2dbd1050 100644 --- a/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx +++ b/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx @@ -1,5 +1,5 @@ import { FC, useMemo, CSSProperties } from 'react'; -import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'reactflow'; +import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@xyflow/react'; import { getEdgeParams } from './utils'; diff --git a/examples/vite-app/src/examples/FloatingEdges/index.tsx b/examples/vite-app/src/examples/FloatingEdges/index.tsx index 94913c0c..032f25f6 100644 --- a/examples/vite-app/src/examples/FloatingEdges/index.tsx +++ b/examples/vite-app/src/examples/FloatingEdges/index.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Background, addEdge, ReactFlowInstance, @@ -8,7 +9,7 @@ import ReactFlow, { Connection, useNodesState, useEdgesState, -} from 'reactflow'; +} from '@xyflow/react'; import styles from './style.module.css'; diff --git a/examples/vite-app/src/examples/FloatingEdges/utils.ts b/examples/vite-app/src/examples/FloatingEdges/utils.ts index 5c9b0068..543b0945 100644 --- a/examples/vite-app/src/examples/FloatingEdges/utils.ts +++ b/examples/vite-app/src/examples/FloatingEdges/utils.ts @@ -1,4 +1,4 @@ -import { Position, XYPosition, Node, Edge } from 'reactflow'; +import { Position, XYPosition, Node, Edge } from '@xyflow/react'; // this helper function returns the intersection point // of the line between the center of the intersectionNode and the target node diff --git a/examples/vite-app/src/examples/Hidden/index.tsx b/examples/vite-app/src/examples/Hidden/index.tsx index 65a07581..586f300f 100644 --- a/examples/vite-app/src/examples/Hidden/index.tsx +++ b/examples/vite-app/src/examples/Hidden/index.tsx @@ -1,6 +1,16 @@ import { useState, useEffect, useCallback } from 'react'; -import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow'; +import { + ReactFlow, + addEdge, + Connection, + Edge, + Node, + useNodesState, + useEdgesState, + MiniMap, + Controls, +} from '@xyflow/react'; const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/Interaction/index.tsx b/examples/vite-app/src/examples/Interaction/index.tsx index ced5d686..0dcee27b 100644 --- a/examples/vite-app/src/examples/Interaction/index.tsx +++ b/examples/vite-app/src/examples/Interaction/index.tsx @@ -1,5 +1,6 @@ import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, Node, Connection, @@ -10,7 +11,7 @@ import ReactFlow, { useEdgesState, Controls, MiniMap, -} from 'reactflow'; +} from '@xyflow/react'; const initialNodes: Node[] = [ { @@ -36,7 +37,7 @@ const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edg const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event); const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event); const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event); -const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport); +const onMoveEnd = (_: TouchEvent | MouseEvent | null, viewport: Viewport) => console.log('onMoveEnd', viewport); const InteractionFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index 450758d5..676f8dd0 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent, useCallback, useState } from 'react'; -import ReactFlow, { +import { + ReactFlow, MiniMap, Background, BackgroundVariant, @@ -9,7 +10,7 @@ import ReactFlow, { Edge, useReactFlow, XYPosition, -} from 'reactflow'; +} from '@xyflow/react'; const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); @@ -139,8 +140,7 @@ const BasicFlow = () => { fitView > - +
diff --git a/examples/vite-app/src/examples/Intersection/index.tsx b/examples/vite-app/src/examples/Intersection/index.tsx index 1f82b308..006ddc77 100644 --- a/examples/vite-app/src/examples/Intersection/index.tsx +++ b/examples/vite-app/src/examples/Intersection/index.tsx @@ -1,5 +1,6 @@ import { useCallback, MouseEvent } from 'react'; -import ReactFlow, { +import { + ReactFlow, MiniMap, Background, Controls, @@ -8,7 +9,7 @@ import ReactFlow, { Edge, useReactFlow, useNodesState, -} from 'reactflow'; +} from '@xyflow/react'; import './style.css'; diff --git a/examples/vite-app/src/examples/Layouting/index.tsx b/examples/vite-app/src/examples/Layouting/index.tsx index 2c031491..4ec3e14c 100644 --- a/examples/vite-app/src/examples/Layouting/index.tsx +++ b/examples/vite-app/src/examples/Layouting/index.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react'; import dagre from 'dagre'; -import ReactFlow, { +import { + ReactFlow, Controls, ReactFlowProvider, addEdge, @@ -13,7 +14,7 @@ import ReactFlow, { EdgeMarker, Panel, useReactFlow, -} from 'reactflow'; +} from '@xyflow/react'; import initialItems from './initial-elements'; diff --git a/examples/vite-app/src/examples/Layouting/initial-elements.ts b/examples/vite-app/src/examples/Layouting/initial-elements.ts index 8c88519e..aef03005 100644 --- a/examples/vite-app/src/examples/Layouting/initial-elements.ts +++ b/examples/vite-app/src/examples/Layouting/initial-elements.ts @@ -1,4 +1,4 @@ -import { Node, Edge, XYPosition, MarkerType } from 'reactflow'; +import { Node, Edge, XYPosition, MarkerType } from '@xyflow/react'; const position: XYPosition = { x: 0, y: 0 }; diff --git a/examples/vite-app/src/examples/MultiFlows/index.tsx b/examples/vite-app/src/examples/MultiFlows/index.tsx index 1f833900..901fd827 100644 --- a/examples/vite-app/src/examples/MultiFlows/index.tsx +++ b/examples/vite-app/src/examples/MultiFlows/index.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; - -import ReactFlow, { +import { + ReactFlow, Background, addEdge, Node, @@ -11,7 +11,7 @@ import ReactFlow, { useEdgesState, MarkerType, MiniMap, -} from 'reactflow'; +} from '@xyflow/react'; import styles from './multiflows.module.css'; diff --git a/examples/vite-app/src/examples/NestedNodes/index.tsx b/examples/vite-app/src/examples/NestedNodes/index.tsx index e699337e..56bc3ca8 100644 --- a/examples/vite-app/src/examples/NestedNodes/index.tsx +++ b/examples/vite-app/src/examples/NestedNodes/index.tsx @@ -1,5 +1,6 @@ import { useState, MouseEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Controls, MiniMap, Background, @@ -10,7 +11,7 @@ import ReactFlow, { Edge, ReactFlowInstance, Connection, -} from 'reactflow'; +} from '@xyflow/react'; const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx index a61b3c3c..374dc754 100644 --- a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx @@ -1,5 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow'; +import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react'; import ResizeIcon from './ResizeIcon'; diff --git a/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx b/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx index 6ccd655a..702b5c0f 100644 --- a/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx @@ -1,5 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, NodeResizer } from 'reactflow'; +import { Handle, Position, NodeProps, NodeResizer } from '@xyflow/react'; const DefaultResizerNode: FC = ({ data, selected }) => { return ( diff --git a/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx b/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx index 9e89d8c6..5d1574c5 100644 --- a/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx @@ -1,5 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow'; +import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react'; const HorizontalResizerNode: FC = ({ data }) => { return ( diff --git a/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx b/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx index f1230ce1..7b2e0211 100644 --- a/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx @@ -1,5 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow'; +import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react'; const CustomNode: FC = ({ id, data }) => { return ( diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx index 6eb61b3a..e276996c 100644 --- a/examples/vite-app/src/examples/NodeResizer/index.tsx +++ b/examples/vite-app/src/examples/NodeResizer/index.tsx @@ -1,12 +1,22 @@ import { useCallback, useState } from 'react'; -import ReactFlow, { Controls, addEdge, Connection, useNodesState, useEdgesState, Panel, Node, Edge } from 'reactflow'; +import { + ReactFlow, + Controls, + addEdge, + Connection, + useNodesState, + useEdgesState, + Panel, + Node, + Edge, +} from '@xyflow/react'; import DefaultResizer from './DefaultResizer'; import CustomResizer from './CustomResizer'; import VerticalResizer from './VerticalResizer'; import HorizontalResizer from './HorizontalResizer'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; const nodeTypes = { defaultResizer: DefaultResizer, diff --git a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx index 7d179b7e..30384445 100644 --- a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx @@ -1,5 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow'; +import { Handle, Position, NodeProps, NodeToolbar } from '@xyflow/react'; const CustomNode: FC = ({ id, data }) => { return ( diff --git a/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx b/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx index fa1697ae..d5ccded6 100644 --- a/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx @@ -1,4 +1,4 @@ -import { NodeToolbar, ReactFlowState, useStore } from 'reactflow'; +import { NodeToolbar, ReactFlowState, useStore } from '@xyflow/react'; const selectedNodesSelector = (state: ReactFlowState) => state diff --git a/examples/vite-app/src/examples/NodeToolbar/index.tsx b/examples/vite-app/src/examples/NodeToolbar/index.tsx index b4d3d1c5..0b148baf 100644 --- a/examples/vite-app/src/examples/NodeToolbar/index.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/index.tsx @@ -1,4 +1,5 @@ -import ReactFlow, { +import { + ReactFlow, MiniMap, Background, BackgroundVariant, @@ -8,7 +9,7 @@ import ReactFlow, { NodeTypes, Position, NodeOrigin, -} from 'reactflow'; +} from '@xyflow/react'; import CustomNode from './CustomNode'; import SelectedNodesToolbar from './SelectedNodesToolbar'; diff --git a/examples/vite-app/src/examples/NodeTypeChange/index.tsx b/examples/vite-app/src/examples/NodeTypeChange/index.tsx index 561ba66e..d1119010 100644 --- a/examples/vite-app/src/examples/NodeTypeChange/index.tsx +++ b/examples/vite-app/src/examples/NodeTypeChange/index.tsx @@ -1,5 +1,5 @@ import { CSSProperties, useCallback } from 'react'; -import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; +import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react'; const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx b/examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx index 66521aab..01a0d993 100644 --- a/examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx +++ b/examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx @@ -1,5 +1,6 @@ import { useState, CSSProperties, FC, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, Node, Position, @@ -9,7 +10,7 @@ import ReactFlow, { NodeTypes, useNodesState, useEdgesState, -} from 'reactflow'; +} from '@xyflow/react'; const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/Overview/index.tsx b/examples/vite-app/src/examples/Overview/index.tsx index 640e25f2..233aa76c 100644 --- a/examples/vite-app/src/examples/Overview/index.tsx +++ b/examples/vite-app/src/examples/Overview/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, Node, Viewport, @@ -13,7 +14,7 @@ import ReactFlow, { Controls, Background, MiniMap, -} from 'reactflow'; +} from '@xyflow/react'; const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes); const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes); @@ -36,8 +37,8 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => { console.log('pane ready:', reactFlowInstance); }; -const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport); -const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport); +const onMoveStart = (_: MouseEvent | TouchEvent | null, viewport: Viewport) => console.log('zoom/move start', viewport); +const onMoveEnd = (_: MouseEvent | TouchEvent | null, viewport: Viewport) => console.log('zoom/move end', viewport); const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge); const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge); const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge); diff --git a/examples/vite-app/src/examples/Provider/Sidebar.tsx b/examples/vite-app/src/examples/Provider/Sidebar.tsx index a5205642..67c2c8b9 100644 --- a/examples/vite-app/src/examples/Provider/Sidebar.tsx +++ b/examples/vite-app/src/examples/Provider/Sidebar.tsx @@ -1,4 +1,4 @@ -import { useReactFlow, useStore } from 'reactflow'; +import { useReactFlow, useStore } from '@xyflow/react'; import styles from './provider.module.css'; diff --git a/examples/vite-app/src/examples/Provider/index.tsx b/examples/vite-app/src/examples/Provider/index.tsx index 1e378ba3..320d85de 100644 --- a/examples/vite-app/src/examples/Provider/index.tsx +++ b/examples/vite-app/src/examples/Provider/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, Controls, ReactFlowProvider, addEdge, @@ -10,7 +11,7 @@ import ReactFlow, { useNodesState, useEdgesState, ReactFlowInstance, -} from 'reactflow'; +} from '@xyflow/react'; import Sidebar from './Sidebar'; diff --git a/examples/vite-app/src/examples/SaveRestore/Controls.tsx b/examples/vite-app/src/examples/SaveRestore/Controls.tsx index 61ca1a64..53aa209f 100644 --- a/examples/vite-app/src/examples/SaveRestore/Controls.tsx +++ b/examples/vite-app/src/examples/SaveRestore/Controls.tsx @@ -1,5 +1,5 @@ import React, { memo, useCallback, Dispatch, FC } from 'react'; -import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'reactflow'; +import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@xyflow/react'; import localforage from 'localforage'; import styles from './save.module.css'; diff --git a/examples/vite-app/src/examples/SaveRestore/index.tsx b/examples/vite-app/src/examples/SaveRestore/index.tsx index e84eaf34..fc2e1a38 100644 --- a/examples/vite-app/src/examples/SaveRestore/index.tsx +++ b/examples/vite-app/src/examples/SaveRestore/index.tsx @@ -1,5 +1,14 @@ import { useCallback } from 'react'; -import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; +import { + ReactFlow, + ReactFlowProvider, + Node, + addEdge, + Connection, + Edge, + useNodesState, + useEdgesState, +} from '@xyflow/react'; import Controls from './Controls'; diff --git a/examples/vite-app/src/examples/Stress/index.tsx b/examples/vite-app/src/examples/Stress/index.tsx index e8cf9f91..125c2764 100644 --- a/examples/vite-app/src/examples/Stress/index.tsx +++ b/examples/vite-app/src/examples/Stress/index.tsx @@ -1,5 +1,6 @@ import { useState, CSSProperties, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, ReactFlowInstance, Edge, Node, @@ -12,7 +13,7 @@ import ReactFlow, { Controls, Background, MiniMap, -} from 'reactflow'; +} from '@xyflow/react'; import { getNodesAndEdges } from './utils'; diff --git a/examples/vite-app/src/examples/Stress/utils.ts b/examples/vite-app/src/examples/Stress/utils.ts index 2c067d99..766b4bb7 100644 --- a/examples/vite-app/src/examples/Stress/utils.ts +++ b/examples/vite-app/src/examples/Stress/utils.ts @@ -1,4 +1,4 @@ -import { Node, Edge } from 'reactflow'; +import { Node, Edge } from '@xyflow/react'; type ElementsCollection = { nodes: Node[]; diff --git a/examples/vite-app/src/examples/Subflow/DebugNode.tsx b/examples/vite-app/src/examples/Subflow/DebugNode.tsx index 7b5f6b5b..9170ef65 100644 --- a/examples/vite-app/src/examples/Subflow/DebugNode.tsx +++ b/examples/vite-app/src/examples/Subflow/DebugNode.tsx @@ -1,6 +1,6 @@ import React, { memo, FC, CSSProperties } from 'react'; -import { Handle, NodeProps, Position } from 'reactflow'; +import { Handle, NodeProps, Position } from '@xyflow/react'; const infoStyle: CSSProperties = { fontSize: 11 }; const idStyle: CSSProperties = { diff --git a/examples/vite-app/src/examples/Subflow/index.tsx b/examples/vite-app/src/examples/Subflow/index.tsx index 397e4376..617b68ea 100644 --- a/examples/vite-app/src/examples/Subflow/index.tsx +++ b/examples/vite-app/src/examples/Subflow/index.tsx @@ -1,5 +1,6 @@ import { useState, MouseEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, Node, Edge, @@ -12,7 +13,7 @@ import ReactFlow, { MiniMap, Background, Panel, -} from 'reactflow'; +} from '@xyflow/react'; import DebugNode from './DebugNode'; diff --git a/examples/vite-app/src/examples/Switch/index.tsx b/examples/vite-app/src/examples/Switch/index.tsx index b6ae2278..d2b237c8 100644 --- a/examples/vite-app/src/examples/Switch/index.tsx +++ b/examples/vite-app/src/examples/Switch/index.tsx @@ -1,5 +1,5 @@ import { MouseEvent, useCallback } from 'react'; -import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; +import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react'; const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/examples/vite-app/src/examples/TouchDevice/index.tsx b/examples/vite-app/src/examples/TouchDevice/index.tsx index 130c15fd..636a36a4 100644 --- a/examples/vite-app/src/examples/TouchDevice/index.tsx +++ b/examples/vite-app/src/examples/TouchDevice/index.tsx @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow'; +import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react'; import styles from './touch-device.module.css'; diff --git a/examples/vite-app/src/examples/Undirectional/CustomNode.tsx b/examples/vite-app/src/examples/Undirectional/CustomNode.tsx index 0ede3317..f380b517 100644 --- a/examples/vite-app/src/examples/Undirectional/CustomNode.tsx +++ b/examples/vite-app/src/examples/Undirectional/CustomNode.tsx @@ -1,6 +1,5 @@ -import React, { memo, FC, CSSProperties } from 'react'; - -import { Handle, Position, NodeProps } from 'reactflow'; +import { memo, FC, CSSProperties } from 'react'; +import { Handle, Position, NodeProps } from '@xyflow/react'; const nodeStyles: CSSProperties = { padding: '10px 15px', diff --git a/examples/vite-app/src/examples/Undirectional/index.tsx b/examples/vite-app/src/examples/Undirectional/index.tsx index 00feda8e..d9391541 100644 --- a/examples/vite-app/src/examples/Undirectional/index.tsx +++ b/examples/vite-app/src/examples/Undirectional/index.tsx @@ -1,5 +1,6 @@ import { MouseEvent, useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, useReactFlow, NodeTypes, addEdge, @@ -12,7 +13,7 @@ import ReactFlow, { updateEdge, useNodesState, useEdgesState, -} from 'reactflow'; +} from '@xyflow/react'; import CustomNode from './CustomNode'; diff --git a/examples/vite-app/src/examples/UpdatableEdge/index.tsx b/examples/vite-app/src/examples/UpdatableEdge/index.tsx index f9a109d1..754efa56 100644 --- a/examples/vite-app/src/examples/UpdatableEdge/index.tsx +++ b/examples/vite-app/src/examples/UpdatableEdge/index.tsx @@ -1,5 +1,6 @@ import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react'; -import ReactFlow, { +import { + ReactFlow, Controls, updateEdge, addEdge, @@ -12,7 +13,7 @@ import ReactFlow, { NodeChange, EdgeChange, HandleType, -} from 'reactflow'; +} from '@xyflow/react'; const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/UpdateNode/index.tsx b/examples/vite-app/src/examples/UpdateNode/index.tsx index 23706e01..7c320606 100644 --- a/examples/vite-app/src/examples/UpdateNode/index.tsx +++ b/examples/vite-app/src/examples/UpdateNode/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow'; +import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react'; import styles from './updatenode.module.css'; diff --git a/examples/vite-app/src/examples/UseKeyPress/index.tsx b/examples/vite-app/src/examples/UseKeyPress/index.tsx index e95ae9bc..28a95090 100644 --- a/examples/vite-app/src/examples/UseKeyPress/index.tsx +++ b/examples/vite-app/src/examples/UseKeyPress/index.tsx @@ -1,4 +1,4 @@ -import { useKeyPress } from 'reactflow'; +import { useKeyPress } from '@xyflow/react'; const UseKeyPressComponent = () => { const metaPressed = useKeyPress(['Meta']); diff --git a/examples/vite-app/src/examples/UseNodesInit/index.tsx b/examples/vite-app/src/examples/UseNodesInit/index.tsx index f779738d..549315ca 100644 --- a/examples/vite-app/src/examples/UseNodesInit/index.tsx +++ b/examples/vite-app/src/examples/UseNodesInit/index.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect } from 'react'; -import ReactFlow, { +import { + ReactFlow, Background, MiniMap, Node, @@ -10,7 +11,7 @@ import ReactFlow, { useEdgesState, OnConnect, useNodesInitialized, -} from 'reactflow'; +} from '@xyflow/react'; const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx b/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx index 1684656b..e6e90d3d 100644 --- a/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx +++ b/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx @@ -1,5 +1,5 @@ -import React, { useState, memo, FC, useMemo, CSSProperties } from 'react'; -import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow'; +import { useState, memo, FC, useMemo, CSSProperties } from 'react'; +import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@xyflow/react'; const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }; diff --git a/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx b/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx index b6f5531f..a9f91adf 100644 --- a/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx +++ b/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx @@ -1,5 +1,6 @@ import { useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, ReactFlowProvider, Node, @@ -9,7 +10,7 @@ import ReactFlow, { useEdgesState, useOnSelectionChange, OnSelectionChangeParams, -} from 'reactflow'; +} from '@xyflow/react'; const initialNodes: Node[] = [ { @@ -67,8 +68,8 @@ const WrappedFlow = () => (
- -
+ +
); diff --git a/examples/vite-app/src/examples/UseReactFlow/index.tsx b/examples/vite-app/src/examples/UseReactFlow/index.tsx index ae97bc9b..584e6e7b 100644 --- a/examples/vite-app/src/examples/UseReactFlow/index.tsx +++ b/examples/vite-app/src/examples/UseReactFlow/index.tsx @@ -1,5 +1,6 @@ import { useCallback, MouseEvent, useEffect } from 'react'; -import ReactFlow, { +import { + ReactFlow, Background, MiniMap, Node, @@ -11,7 +12,7 @@ import ReactFlow, { useNodesState, useEdgesState, Panel, -} from 'reactflow'; +} from '@xyflow/react'; const initialNodes: Node[] = [ { diff --git a/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx b/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx index a11c68d0..7b6df002 100644 --- a/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx +++ b/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx @@ -1,5 +1,5 @@ import { useState, memo, FC, useMemo, CSSProperties } from 'react'; -import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow'; +import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@xyflow/react'; const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }; diff --git a/examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx b/examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx index 8a989b59..7de6cb9b 100644 --- a/examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx +++ b/examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx @@ -1,5 +1,6 @@ import { useCallback, MouseEvent } from 'react'; -import ReactFlow, { +import { + ReactFlow, NodeTypes, addEdge, useReactFlow, @@ -10,7 +11,7 @@ import ReactFlow, { Position, useNodesState, useEdgesState, -} from 'reactflow'; +} from '@xyflow/react'; import CustomNode from './CustomNode'; diff --git a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx index 43cdb5bf..c97a16d7 100644 --- a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx +++ b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx @@ -1,4 +1,4 @@ -import { ReactFlowState, useStore } from 'reactflow'; +import { ReactFlowState, useStore } from '@xyflow/react'; import { shallow } from 'zustand/shallow'; import styles from './validation.module.css'; diff --git a/examples/vite-app/src/examples/Validation/index.tsx b/examples/vite-app/src/examples/Validation/index.tsx index f385083b..864c3c08 100644 --- a/examples/vite-app/src/examples/Validation/index.tsx +++ b/examples/vite-app/src/examples/Validation/index.tsx @@ -1,5 +1,6 @@ import { FC, useCallback, useState } from 'react'; -import ReactFlow, { +import { + ReactFlow, addEdge, Handle, Connection, @@ -14,7 +15,8 @@ import ReactFlow, { OnConnect, updateEdge, Edge, -} from 'reactflow'; + IsValidConnection, +} from '@xyflow/react'; import ConnectionStatus from './ConnectionStatus'; @@ -27,7 +29,7 @@ const initialNodes: Node[] = [ { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null }, ]; -const isValidConnection = (connection: Connection) => connection.target === 'B'; +const isValidConnection: IsValidConnection = (connection) => connection.target === 'B'; const CustomInput: FC = () => ( <> diff --git a/examples/vite-app/src/main.tsx b/examples/vite-app/src/main.tsx index 4a3da3c1..34599efc 100644 --- a/examples/vite-app/src/main.tsx +++ b/examples/vite-app/src/main.tsx @@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'; import App from './App'; import './index.css'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/examples/vite-app/vite.config.ts b/examples/vite-app/vite.config.ts index 73b3bb61..442230f7 100644 --- a/examples/vite-app/vite.config.ts +++ b/examples/vite-app/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import react from '@vitejs/plugin-react-swc'; // https://vitejs.dev/config/ export default defineConfig({ diff --git a/package.json b/package.json index c462e3ca..b0ee43f8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@reactflow/monorepo", + "name": "@xyflow/monorepo", "version": "0.0.0", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "repository": "git@github.com:wbkd/react-flow.git", diff --git a/packages/background/.eslintrc.js b/packages/background/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/background/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md deleted file mode 100644 index 61735a34..00000000 --- a/packages/background/CHANGELOG.md +++ /dev/null @@ -1,216 +0,0 @@ -# @reactflow/background - -## 11.2.2 - -### Patch Changes - -- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]: - - @reactflow/core@11.7.2 - -## 11.2.1 - -### Patch Changes - -- Updated dependencies [[`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb), [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c), [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70), [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614)]: - - @reactflow/core@11.7.1 - -## 11.2.0 - -### Minor Changes - -- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - add `id` and `offset` props - -### Patch Changes - -- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: - - @reactflow/core@11.7.0 - -## 11.1.10 - -### Patch Changes - -- Updated dependencies - -## 11.1.9 - -### Patch Changes - -- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) Thanks [@moklick](https://github.com/moklick)! - add data-testid for controls, minimap and background - -- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]: - - @reactflow/core@11.6.0 - -## 11.1.8 - -### Patch Changes - -- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]: - - @reactflow/core@11.5.5 - -## 11.1.7 - -### Patch Changes - -- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: - - @reactflow/core@11.5.4 - -## 11.1.6 - -### Patch Changes - -- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: - - @reactflow/core@11.5.3 - -## 11.1.5 - -### Patch Changes - -- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency - -- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: - - @reactflow/core@11.5.2 - -## 11.1.4 - -### Patch Changes - -- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: - - @reactflow/core@11.5.1 - -## 11.1.3 - -### Patch Changes - -- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: - - @reactflow/core@11.5.0 - -## 11.1.2 - -### Patch Changes - -- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup - -- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]: - - @reactflow/core@11.4.2 - -## 11.1.1 - -### Patch Changes - -- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]: - - @reactflow/core@11.4.1 - -## 11.1.0 - -### Patch Changes - -- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0 - -## 11.1.0-next.1 - -### Minor Changes - -- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) -- selection: do not include hidden nodes -- minimap: fix onNodeClick for nodes outside the viewport -- keys: allow multi select when input is focused - -### Patch Changes - -- Updated dependencies []: - - @reactflow/core@11.4.0-next.1 - -## 11.0.8-next.0 - -### Patch Changes - -- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0-next.0 - -## 11.0.7 - -### Patch Changes - -- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]: - - @reactflow/core@11.3.2 - -## 11.0.6 - -### Patch Changes - -- Updated dependencies [[`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4), [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f), [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af)]: - - @reactflow/core@11.3.1 - -## 11.0.5 - -### Patch Changes - -- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]: - - @reactflow/core@11.3.0 - -## 11.0.4 - -### Patch Changes - -- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]: - - @reactflow/core@11.2.0 - -## 11.0.3 - -### Patch Changes - -- cleanup types -- cleanup rf id handling -- Updated dependencies: - - @reactflow/core@11.1.2 - -## 11.0.2 - -### Patch Changes - -- Updated dependencies: - - @reactflow/core@11.1.1 - -## 11.0.1 - -### Patch Changes - -- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - default gap = 20 - -- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: - - @reactflow/core@11.1.0 - -## 11.0.0 - -### Major Changes - -- **Better [Accessibility](/docs/guides/accessibility)** - - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. - - `aria-` default attributes for all elements and controllable via `ariaLabel` options - - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop -- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact -- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 -- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 -- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. -- **New background pattern**: `BackgroundVariant.Cross` variant -- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component -- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component -- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node -- **Deletable option** for Nodes and edges -- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` -- **Edge `pathOptions`** for `smoothstep` and `default` edges -- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning -- **Pane moveable** with middle mouse button -- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) -- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges -- **[Separately installable packages](/docs/overview/packages/)** - - @reactflow/core - - @reactflow/background - - @reactflow/controls - - @reactflow/minimap - -### Patch Changes - -- Updated dependencies: - - @reactflow/core@11.0.0 diff --git a/packages/background/README.md b/packages/background/README.md deleted file mode 100644 index a55c5bfb..00000000 --- a/packages/background/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# @reactflow/background - -Background component for React Flow. - -## Installation - -```sh -npm install @reactflow/background -``` - diff --git a/packages/background/package.json b/packages/background/package.json deleted file mode 100644 index 9f9bce1e..00000000 --- a/packages/background/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "@reactflow/background", - "version": "11.2.2", - "description": "Background component with different variants for React Flow", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.tsx", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "scripts": { - "dev": "rollup --config node:@reactflow/rollup-config --watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit", - "clean": "rimraf dist .turbo" - }, - "publishConfig": { - "access": "public" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/background" - }, - "dependencies": { - "@reactflow/core": "workspace:*", - "classcat": "^5.0.3", - "zustand": "^4.3.1" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "react": "^18.2.0", - "typescript": "^4.9.4" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "rollup": { - "globals": { - "zustand": "Zustand", - "zustand/shallow": "zustandShallow", - "classcat": "cc" - }, - "name": "ReactFlowBackground" - } -} diff --git a/packages/background/tsconfig.json b/packages/background/tsconfig.json deleted file mode 100644 index d5b6da78..00000000 --- a/packages/background/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/background", - "include": ["src"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/controls/.eslintrc.js b/packages/controls/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/controls/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md deleted file mode 100644 index b453b88c..00000000 --- a/packages/controls/CHANGELOG.md +++ /dev/null @@ -1,212 +0,0 @@ -# @reactflow/controls - -## 11.1.13 - -### Patch Changes - -- [#3063](https://github.com/wbkd/react-flow/pull/3063) [`33915b88`](https://github.com/wbkd/react-flow/commit/33915b88c2ae701847870346b381f9cfa86c6459) - disable zoom buttons when min/max is reached - -- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]: - - @reactflow/core@11.7.2 - -## 11.1.12 - -### Patch Changes - -- [#3054](https://github.com/wbkd/react-flow/pull/3054) [`46526b4e`](https://github.com/wbkd/react-flow/commit/46526b4e02b83d74726701e3ba73d0be8cf80787) - fix(icons): show correct lock icon - -- Updated dependencies [[`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb), [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c), [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70), [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614)]: - - @reactflow/core@11.7.1 - -## 11.1.11 - -### Patch Changes - -- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: - - @reactflow/core@11.7.0 - -## 11.1.10 - -### Patch Changes - -- Updated dependencies - -## 11.1.9 - -### Patch Changes - -- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) Thanks [@moklick](https://github.com/moklick)! - add data-testid for controls, minimap and background -- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]: - - @reactflow/core@11.6.0 - -## 11.1.8 - -### Patch Changes - -- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]: - - @reactflow/core@11.5.5 - -## 11.1.7 - -### Patch Changes - -- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: - - @reactflow/core@11.5.4 - -## 11.1.6 - -### Patch Changes - -- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: - - @reactflow/core@11.5.3 - -## 11.1.5 - -### Patch Changes - -- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency - -- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: - - @reactflow/core@11.5.2 - -## 11.1.4 - -### Patch Changes - -- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: - - @reactflow/core@11.5.1 - -## 11.1.3 - -### Patch Changes - -- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: - - @reactflow/core@11.5.0 - -## 11.1.2 - -### Patch Changes - -- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup - -- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]: - - @reactflow/core@11.4.2 - -## 11.1.1 - -### Patch Changes - -- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]: - - @reactflow/core@11.4.1 - -## 11.1.0 - -### Patch Changes - -- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0 - -## 11.1.0-next.1 - -### Minor Changes - -- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) -- selection: do not include hidden nodes -- minimap: fix onNodeClick for nodes outside the viewport -- keys: allow multi select when input is focused - -### Patch Changes - -- Updated dependencies []: - - @reactflow/core@11.4.0-next.1 - -## 11.0.8-next.0 - -### Patch Changes - -- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0-next.0 - -## 11.0.7 - -### Patch Changes - -- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]: - - @reactflow/core@11.3.2 - -## 11.0.6 - -### Patch Changes - -- Updated dependencies [[`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4), [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f), [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af)]: - - @reactflow/core@11.3.1 - -## 11.0.5 - -### Patch Changes - -- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]: - - @reactflow/core@11.3.0 - -## 11.0.4 - -### Patch Changes - -- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]: - - @reactflow/core@11.2.0 - -## 11.0.3 - -### Patch Changes - -- cleanup types -- Updated dependencies: - - @reactflow/core@11.1.2 - -## 11.0.2 - -### Patch Changes - -- Updated dependencies: - - @reactflow/core@11.1.1 - -## 11.0.1 - -### Patch Changes - -- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: - - @reactflow/core@11.1.0 - -## 11.0.0 - -### Major Changes - -- **Better [Accessibility](/docs/guides/accessibility)** - - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. - - `aria-` default attributes for all elements and controllable via `ariaLabel` options - - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop -- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact -- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 -- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 -- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. -- **New background pattern**: `BackgroundVariant.Cross` variant -- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component -- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component -- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node -- **Deletable option** for Nodes and edges -- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` -- **Edge `pathOptions`** for `smoothstep` and `default` edges -- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning -- **Pane moveable** with middle mouse button -- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) -- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges -- **[Separately installable packages](/docs/overview/packages/)** - - @reactflow/core - - @reactflow/background - - @reactflow/controls - - @reactflow/minimap - -### Patch Changes - -- Updated dependencies: - - @reactflow/core@11.0.0 diff --git a/packages/controls/README.md b/packages/controls/README.md deleted file mode 100644 index 48d07fa8..00000000 --- a/packages/controls/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# @reactflow/controls - -Controls component for React Flow. - -## Installation - -```sh -npm install @reactflow/controls -``` - diff --git a/packages/controls/package.json b/packages/controls/package.json deleted file mode 100644 index 4325403a..00000000 --- a/packages/controls/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "@reactflow/controls", - "version": "11.1.13", - "description": "Component to control the viewport of a React Flow instance", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.tsx", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/controls" - }, - "scripts": { - "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css", - "css": "postcss src/*.css --config ../../tooling/postcss-config/postcss.config.js --dir dist", - "css-watch": "pnpm css --watch", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit" - }, - "publishConfig": { - "access": "public" - }, - "dependencies": { - "@reactflow/core": "workspace:*", - "classcat": "^5.0.3", - "zustand": "^4.3.1" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "typescript": "^4.9.4" - }, - "rollup": { - "globals": { - "classcat": "cc", - "zustand": "Zustand", - "zustand/shallow": "zustandShallow" - }, - "name": "ReactFlowControls" - } -} diff --git a/packages/controls/src/style.css b/packages/controls/src/style.css deleted file mode 100644 index 92d55b1f..00000000 --- a/packages/controls/src/style.css +++ /dev/null @@ -1,36 +0,0 @@ -.react-flow__controls { - box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); - - &-button { - border: none; - background: #fefefe; - border-bottom: 1px solid #eee; - box-sizing: content-box; - display: flex; - justify-content: center; - align-items: center; - width: 16px; - height: 16px; - cursor: pointer; - user-select: none; - padding: 5px; - - &:hover { - background: #f4f4f4; - } - - svg { - width: 100%; - max-width: 12px; - max-height: 12px; - } - - &:disabled { - pointer-events: none; - - svg { - fill-opacity: 0.4; - } - } - } -} diff --git a/packages/controls/tsconfig.json b/packages/controls/tsconfig.json deleted file mode 100644 index 81fb9c46..00000000 --- a/packages/controls/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/background", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/core/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json deleted file mode 100644 index 5e1c9b9a..00000000 --- a/packages/core/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/core", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/edge-utils/.eslintrc.js b/packages/edge-utils/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/edge-utils/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/edge-utils/README.md b/packages/edge-utils/README.md deleted file mode 100644 index 941b215b..00000000 --- a/packages/edge-utils/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# @reactflow/edge-utils - -Edge util functions of React Flow. - -## Installation - -```sh -npm install @reactflow/edge-utils -``` - diff --git a/packages/edge-utils/package.json b/packages/edge-utils/package.json deleted file mode 100644 index 108ac79a..00000000 --- a/packages/edge-utils/package.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "name": "@reactflow/edge-utils", - "version": "11.5.5", - "description": "Core edge utils of React Flow for creating edge paths.", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.ts", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "license": "MIT", - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/edge-utils" - }, - "scripts": { - "dev": "rollup --config node:@reactflow/rollup-config --watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@reactflow/system": "workspace:*" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "@types/react-dom": ">=17", - "react": "^18.2.0", - "typescript": "^4.9.4" - }, - "rollup": { - "globals": {}, - "name": "ReactFlowEdgeUtils" - } -} diff --git a/packages/edge-utils/tsconfig.json b/packages/edge-utils/tsconfig.json deleted file mode 100644 index b61349bb..00000000 --- a/packages/edge-utils/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/utils", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/minimap/.eslintrc.js b/packages/minimap/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/minimap/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md deleted file mode 100644 index bc41bc94..00000000 --- a/packages/minimap/CHANGELOG.md +++ /dev/null @@ -1,255 +0,0 @@ -# @reactflow/minimap - -## 11.5.2 - -### Patch Changes - -- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]: - - @reactflow/core@11.7.2 - -## 11.5.1 - -### Patch Changes - -- Updated dependencies [[`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb), [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c), [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70), [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614)]: - - @reactflow/core@11.7.1 - -## 11.5.0 - -### Minor Changes - -- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props - -### Patch Changes - -- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: - - @reactflow/core@11.7.0 - -## 11.4.1 - -### Patch Changes - -- Updated dependencies - -## 11.4.0 - -### Minor Changes - -- [#2906](https://github.com/wbkd/react-flow/pull/2906) [`4a30185a`](https://github.com/wbkd/react-flow/commit/4a30185a12899691ff61259f0db84bc5494cb573) Thanks [@hayleigh-dot-dev](https://github.com/hayleigh-dot-dev)! - Add `nodeComponent` prop for passing custom component for the nodes - -### Patch Changes - -- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) - add data-testid for controls, minimap and background - -- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]: - - @reactflow/core@11.6.0 - -## 11.3.8 - -### Patch Changes - -- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]: - - @reactflow/core@11.5.5 - -## 11.3.7 - -### Patch Changes - -- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: - - @reactflow/core@11.5.4 - -## 11.3.6 - -### Patch Changes - -- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: - - @reactflow/core@11.5.3 - -## 11.3.5 - -### Patch Changes - -- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency - -- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: - - @reactflow/core@11.5.2 - -## 11.3.4 - -### Patch Changes - -- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: - - @reactflow/core@11.5.1 - -## 11.3.3 - -### Patch Changes - -- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: - - @reactflow/core@11.5.0 - -## 11.3.2 - -### Patch Changes - -- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup - -- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]: - - @reactflow/core@11.4.2 - -## 11.3.1 - -### Patch Changes - -- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]: - - @reactflow/core@11.4.1 - -## 11.3.0 - -### Patch Changes - -- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. -- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) - Use translateExtent correctly - -- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0 - -## 11.3.0-next.1 - -### Minor Changes - -- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) -- selection: do not include hidden nodes -- minimap: fix onNodeClick for nodes outside the viewport -- keys: allow multi select when input is focused - -### Patch Changes - -- Updated dependencies []: - - @reactflow/core@11.4.0-next.1 - -## 11.3.0-next.0 - -### Minor Changes - -- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features - - New props for the ReactFlow component to customize the controls of the viewport and the selection box better: - - 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) - 2. `panOnDrag="RightClick"` option - 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) - 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it - 5. `onSelectionStart` and `onSelectionEnd` events - -### Patch Changes - -- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. - -- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) Thanks [@moklick](https://github.com/moklick)! - Use translateExtent correctly - -- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0-next.0 - -## 11.2.3 - -### Patch Changes - -- [#2646](https://github.com/wbkd/react-flow/pull/2646) [`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a) - Cleanup get node position with origin usage - -- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]: - - @reactflow/core@11.3.2 - -## 11.2.2 - -### Patch Changes - -- [`7ece618d`](https://github.com/wbkd/react-flow/commit/7ece618d94b76183c1ecd45b16f6ab168168351b) Thanks [@lounsbrough](https://github.com/lounsbrough)! - Fix minimap node position - -## 11.2.1 - -### Patch Changes - -- [#2595](https://github.com/wbkd/react-flow/pull/2595) [`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4) Thanks [@chrtze](https://github.com/chrtze)! - Fix and improve the behaviour when using nodeOrigin in combination with subflows - -- Updated dependencies [[`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4), [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f), [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af)]: - - @reactflow/core@11.3.1 - -## 11.2.0 - -### Minor Changes - -- [#2562](https://github.com/wbkd/react-flow/pull/2562) [`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179) Thanks [@moklick](https://github.com/moklick)! - Add maskStrokeColor and maskStrokeWidth props -- [#2545](https://github.com/wbkd/react-flow/pull/2545) [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f) Thanks [@chrtze](https://github.com/chrtze)! - add a new property "ariaLabel" to configure or remove the aria-label of the minimap component - -### Patch Changes - -- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]: - - @reactflow/core@11.3.0 - -## 11.1.0 - -### Minor Changes - -- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map - -### Patch Changes - -- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]: - - @reactflow/core@11.2.0 - -## 11.0.3 - -### Patch Changes - -- cleanup types -- Updated dependencies: - - @reactflow/core@11.1.2 - -## 11.0.2 - -### Patch Changes - -- Updated dependencies: - - @reactflow/core@11.1.1 - -## 11.0.1 - -### Patch Changes - -- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: - - @reactflow/core@11.1.0 - -## 11.0.0 - -### Major Changes - -- **Better [Accessibility](/docs/guides/accessibility)** - - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. - - `aria-` default attributes for all elements and controllable via `ariaLabel` options - - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop -- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact -- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 -- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 -- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. -- **New background pattern**: `BackgroundVariant.Cross` variant -- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component -- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component -- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node -- **Deletable option** for Nodes and edges -- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` -- **Edge `pathOptions`** for `smoothstep` and `default` edges -- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning -- **Pane moveable** with middle mouse button -- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) -- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges -- **[Separately installable packages](/docs/overview/packages/)** - - @reactflow/core - - @reactflow/background - - @reactflow/controls - - @reactflow/minimap - -### Patch Changes - -- Updated dependencies: - - @reactflow/core@11.0.0 diff --git a/packages/minimap/README.md b/packages/minimap/README.md deleted file mode 100644 index 2dba17d9..00000000 --- a/packages/minimap/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# @reactflow/minimap - -Mini map component for React Flow. - -## Installation - -```sh -npm install @reactflow/minimap -``` - diff --git a/packages/minimap/package.json b/packages/minimap/package.json deleted file mode 100644 index 3f9904f4..00000000 --- a/packages/minimap/package.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "name": "@reactflow/minimap", - "version": "11.5.2", - "description": "Minimap component for React Flow.", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.tsx", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "publishConfig": { - "access": "public" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/minimap" - }, - "scripts": { - "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css", - "css": "postcss src/*.css --config ../../tooling/postcss-config/postcss.config.js --dir dist", - "css-watch": "pnpm css --watch", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@reactflow/core": "workspace:*", - "@types/d3-selection": "^3.0.3", - "@types/d3-zoom": "^3.0.1", - "classcat": "^5.0.3", - "d3-selection": "^3.0.0", - "d3-zoom": "^3.0.0", - "zustand": "^4.3.1" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "react": "^18.2.0", - "typescript": "^4.9.4" - }, - "rollup": { - "globals": { - "zustand": "Zustand", - "zustand/shallow": "zustandShallow", - "classcat": "cc" - }, - "name": "ReactFlowMinimap" - } -} diff --git a/packages/minimap/src/style.css b/packages/minimap/src/style.css deleted file mode 100644 index dbb9a931..00000000 --- a/packages/minimap/src/style.css +++ /dev/null @@ -1,3 +0,0 @@ -.react-flow__minimap { - background-color: #fff; -} diff --git a/packages/minimap/tsconfig.json b/packages/minimap/tsconfig.json deleted file mode 100644 index 8a8e74ce..00000000 --- a/packages/minimap/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/minimap", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/node-resizer/.eslintrc.js b/packages/node-resizer/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/node-resizer/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md deleted file mode 100644 index b8cfb5cb..00000000 --- a/packages/node-resizer/CHANGELOG.md +++ /dev/null @@ -1,123 +0,0 @@ -# @reactflow/node-resizer - -## 2.1.0 - -### Minor Changes - -- [#2900](https://github.com/wbkd/react-flow/pull/2900) [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798) Thanks [@stffabi](https://github.com/stffabi)! - add `maxWidth` and `maxHeight` props -- [#2900](https://github.com/wbkd/react-flow/pull/2900) [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798) - add `keepAspectRatio` prop - -### Patch Changes - -- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]: - - @reactflow/core@11.6.0 - -## 2.0.1 - -### Patch Changes - -- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency - -- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: - - @reactflow/core@11.5.2 - -## 2.0.0 - -After this update it should be easier to update the node resizer (no need to update the reactflow package anymore). - -New props: - -- `shouldResize`: user can pass a function that determines if resize should be executed -- `direction`: gets passed as an attribute on resize - -### Major Changes - -- [#2749](https://github.com/wbkd/react-flow/pull/2749) [`e347dd82`](https://github.com/wbkd/react-flow/commit/e347dd82d342bf9c4884ca667afaa5cf639283e5) - Add `shouldResize`, rename and cleanup types - `ResizeEventParams` is now `ResizeParams` - -### Patch Changes - -- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: - - @reactflow/core@11.5.0 - -## 1.2.2 - -### Patch Changes - -- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup - -- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]: - - @reactflow/core@11.4.2 - -## 1.2.1 - -### Patch Changes - -- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]: - - @reactflow/core@11.4.1 - -## 1.2.0 - -### Patch Changes - -- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0 - -## 1.2.0-next.1 - -### Minor Changes - -- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) -- selection: do not include hidden nodes -- minimap: fix onNodeClick for nodes outside the viewport -- keys: allow multi select when input is focused - -### Patch Changes - -- Updated dependencies []: - - @reactflow/core@11.4.0-next.1 - -## 1.1.1-next.0 - -### Patch Changes - -- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0-next.0 - -## 1.1.0 - -### Minor Changes - -- Add `onResizeStart`, `onResize`, `onResizeEnd` handlers -- Fix resizing flag -- Cleanup types - -## 1.0.3 - -### Patch Changes - -- cleanup - -## 1.0.2 - -### Patch Changes - -- fix `minWidth` and `minHeight` so that it can be used dynamically - -## 1.0.1 - -### Patch Changes - -- pass `minWidth` and `minHeight` from `NodeResizer` component to `NodeResizeControl` - -## 1.0.0 - -This is a new package that exports components to build a UI for resizing a node 🎉 It exports a [``](https://reactflow.dev/docs/api/nodes/node-resizer/) component and a [``](https://reactflow.dev/docs/api/nodes/node-resizer/#noderesizecontrol--component) component. - -### Major Changes - -- [#2626](https://github.com/wbkd/react-flow/pull/2626) [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18) - Add a node resizer component that can be used to resize a custom node - -### Patch Changes - -- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]: - - @reactflow/core@11.3.2 diff --git a/packages/node-resizer/README.md b/packages/node-resizer/README.md deleted file mode 100644 index d9ec14d4..00000000 --- a/packages/node-resizer/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# @reactflow/node-resizer - -A resizer component for React Flow that can be attached to a node. - -## Installation - -```sh -npm install @reactflow/node-resizer -``` diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json deleted file mode 100644 index 9c6d779e..00000000 --- a/packages/node-resizer/package.json +++ /dev/null @@ -1,72 +0,0 @@ -{ - "name": "@reactflow/node-resizer", - "version": "2.1.0", - "description": "A helper component for resizing nodes.", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.tsx", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "publishConfig": { - "access": "public" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/node-resizer" - }, - "scripts": { - "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css", - "css": "postcss src/*.css --config ../../tooling/postcss-config/postcss.config.js --dir dist", - "css-watch": "pnpm css --watch", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@reactflow/core": "workspace:^11.6.0", - "@reactflow/utils": "workspace:*", - "classcat": "^5.0.4", - "d3-drag": "^3.0.0", - "d3-selection": "^3.0.0", - "zustand": "^4.3.1" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/d3-drag": "^3.0.1", - "@types/d3-selection": "^3.0.3", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "@types/react-dom": ">=17", - "react": "^18.2.0", - "typescript": "^4.9.4" - }, - "rollup": { - "globals": { - "zustand": "Zustand", - "zustand/shallow": "zustandShallow", - "classcat": "cc" - }, - "name": "ReactFlowNodeResizer" - } -} diff --git a/packages/node-resizer/tsconfig.json b/packages/node-resizer/tsconfig.json deleted file mode 100644 index d0e5a1ce..00000000 --- a/packages/node-resizer/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/node-resizer", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/node-toolbar/.eslintrc.js b/packages/node-toolbar/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/node-toolbar/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md deleted file mode 100644 index f2f8c21a..00000000 --- a/packages/node-toolbar/CHANGELOG.md +++ /dev/null @@ -1,167 +0,0 @@ -# @reactflow/node-toolbar - -## 1.2.1 - -### Patch Changes - -- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]: - - @reactflow/core@11.7.2 - -## 1.2.0 - -### Minor Changes - -- [#3052](https://github.com/wbkd/react-flow/pull/3052) [`55e05cf7`](https://github.com/wbkd/react-flow/commit/55e05cf76ae21863691153e76dbd51d1eecd2c60) Thanks [@Noam3kCH](https://github.com/Noam3kCH)! - feat(align): add prop to align bar at start, center or end - -### Patch Changes - -- Updated dependencies [[`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb), [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c), [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70), [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614)]: - - @reactflow/core@11.7.1 - -## 1.1.11 - -### Patch Changes - -- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: - - @reactflow/core@11.7.0 - -## 1.1.10 - -### Patch Changes - -- Updated dependencies - -## 1.1.9 - -### Patch Changes - -- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]: - - @reactflow/core@11.6.0 - -## 1.1.8 - -### Patch Changes - -- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]: - - @reactflow/core@11.5.5 - -## 1.1.7 - -### Patch Changes - -- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: - - @reactflow/core@11.5.4 - -## 1.1.6 - -### Patch Changes - -- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: - - @reactflow/core@11.5.3 - -## 1.1.5 - -### Patch Changes - -- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency - -- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: - - @reactflow/core@11.5.2 - -## 1.1.4 - -### Patch Changes - -- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: - - @reactflow/core@11.5.1 - -## 1.1.3 - -### Patch Changes - -- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: - - @reactflow/core@11.5.0 - -## 1.1.2 - -### Patch Changes - -- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup - -- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]: - - @reactflow/core@11.4.2 - -## 1.1.1 - -### Patch Changes - -- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]: - - @reactflow/core@11.4.1 - -## 1.1.0 - -### Patch Changes - -- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. - -- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0 - -## 1.1.0-next.1 - -### Minor Changes - -- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused - -### Patch Changes - -- Updated dependencies []: - - @reactflow/core@11.4.0-next.1 - -## 1.1.0-next.0 - -### Minor Changes - -- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features - - New props for the ReactFlow component to customize the controls of the viewport and the selection box better: - - 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) - 2. `panOnDrag="RightClick"` option - 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) - 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it - 5. `onSelectionStart` and `onSelectionEnd` events - -### Patch Changes - -- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. - -- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0-next.0 - -## 1.0.2 - -### Patch Changes - -- [#2626](https://github.com/wbkd/react-flow/pull/2626) [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18) - Get nodeId from React Flow context if it is not passed explicitly as prop - -- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]: - - @reactflow/core@11.3.2 - -## 1.0.1 - -### Patch Changes - -- [#2594](https://github.com/wbkd/react-flow/pull/2594) [`ec94d9ec`](https://github.com/wbkd/react-flow/commit/ec94d9ecdc964d6d66c04e9242f195614bbfdbbe) Thanks [@chrtze](https://github.com/chrtze)! - Allow multiple node ids to be passed for enabling multi selection toolbars - -- Updated dependencies [[`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4), [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f), [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af)]: - - @reactflow/core@11.3.1 - -## 1.0.0 - -### Major Changes - -- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Export a new component "NodeToolbar" that renders a fixed element attached to a node diff --git a/packages/node-toolbar/README.md b/packages/node-toolbar/README.md deleted file mode 100644 index 210d62ac..00000000 --- a/packages/node-toolbar/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# @reactflow/node-toolbar - -A toolbar component for React Flow that can be attached to a node. - -## Installation - -```sh -npm install @reactflow/node-toolbar -``` - diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json deleted file mode 100644 index 53344f04..00000000 --- a/packages/node-toolbar/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "@reactflow/node-toolbar", - "version": "1.2.1", - "description": "A toolbar component for React Flow that can be attached to a node.", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.tsx", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "publishConfig": { - "access": "public" - }, - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/node-toolbar" - }, - "scripts": { - "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@reactflow/core": "workspace:*", - "classcat": "^5.0.3", - "zustand": "^4.3.1" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "@types/react-dom": ">=17", - "react": "^18.2.0", - "typescript": "^4.9.4" - }, - "rollup": { - "globals": { - "zustand": "Zustand", - "zustand/shallow": "zustandShallow", - "classcat": "cc" - }, - "name": "ReactFlowNodeToolbar" - } -} diff --git a/packages/node-toolbar/tsconfig.json b/packages/node-toolbar/tsconfig.json deleted file mode 100644 index 994d3bf0..00000000 --- a/packages/node-toolbar/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@reactflow/tsconfig/react.json", - "display": "@reactflow/node-toolbar", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js new file mode 100644 index 00000000..4e7ac354 --- /dev/null +++ b/packages/react/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ['@xyflow/eslint-config'], +}; diff --git a/packages/core/CHANGELOG.md b/packages/react/CHANGELOG.md similarity index 100% rename from packages/core/CHANGELOG.md rename to packages/react/CHANGELOG.md diff --git a/packages/core/README.md b/packages/react/README.md similarity index 100% rename from packages/core/README.md rename to packages/react/README.md diff --git a/packages/core/package.json b/packages/react/package.json similarity index 75% rename from packages/core/package.json rename to packages/react/package.json index 5faf0817..b3a0dc32 100644 --- a/packages/core/package.json +++ b/packages/react/package.json @@ -1,5 +1,5 @@ { - "name": "@reactflow/core", + "name": "@xyflow/react", "version": "11.7.2", "description": "Core components and util functions of React Flow.", "keywords": [ @@ -8,7 +8,8 @@ "graph", "diagram", "workflow", - "react-flow" + "react-flow", + "xyflow" ], "files": [ "dist" @@ -30,21 +31,19 @@ "directory": "packages/core" }, "scripts": { - "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css", + "dev": "concurrently \"rollup --config node:@xyflow/rollup-config --watch\" pnpm:css-watch", + "build": "rollup --config node:@xyflow/rollup-config --environment NODE_ENV:production && npm run css", "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/postcss.config.js --dir dist", "css-watch": "pnpm css --watch", "lint": "eslint --ext .js,.jsx,.ts,.tsx src", "typecheck": "tsc --noEmit" }, "dependencies": { - "@reactflow/edge-utils": "workspace:*", - "@reactflow/system": "workspace:*", - "@reactflow/utils": "workspace:*", "@types/d3": "^7.4.0", "@types/d3-drag": "^3.0.1", "@types/d3-selection": "^3.0.3", "@types/d3-zoom": "^3.0.1", + "@xyflow/system": "workspace:*", "classcat": "^5.0.3", "d3-drag": "^3.0.0", "d3-selection": "^3.0.0", @@ -56,9 +55,9 @@ "react-dom": ">=17" }, "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", + "@xyflow/eslint-config": "workspace:*", + "@xyflow/rollup-config": "workspace:*", + "@xyflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", "@types/react": ">=17", "@types/react-dom": ">=17", diff --git a/packages/background/src/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx similarity index 94% rename from packages/background/src/Background.tsx rename to packages/react/src/additional-components/Background/Background.tsx index e0efd77b..31a280d0 100644 --- a/packages/background/src/Background.tsx +++ b/packages/react/src/additional-components/Background/Background.tsx @@ -1,8 +1,9 @@ import { memo, useRef } from 'react'; import cc from 'classcat'; -import { useStore, ReactFlowState } from '@reactflow/core'; import { shallow } from 'zustand/shallow'; +import { useStore } from '../../hooks/useStore'; +import { type ReactFlowState } from '../../types'; import { BackgroundProps, BackgroundVariant } from './types'; import { DotPattern, LinePattern } from './Patterns'; @@ -64,7 +65,7 @@ function Background({ data-testid="rf__background" > )} - + ); } diff --git a/packages/background/src/Patterns.tsx b/packages/react/src/additional-components/Background/Patterns.tsx similarity index 100% rename from packages/background/src/Patterns.tsx rename to packages/react/src/additional-components/Background/Patterns.tsx diff --git a/packages/background/src/index.tsx b/packages/react/src/additional-components/Background/index.tsx similarity index 100% rename from packages/background/src/index.tsx rename to packages/react/src/additional-components/Background/index.tsx diff --git a/packages/background/src/types.ts b/packages/react/src/additional-components/Background/types.ts similarity index 100% rename from packages/background/src/types.ts rename to packages/react/src/additional-components/Background/types.ts diff --git a/packages/controls/src/ControlButton.tsx b/packages/react/src/additional-components/Controls/ControlButton.tsx similarity index 100% rename from packages/controls/src/ControlButton.tsx rename to packages/react/src/additional-components/Controls/ControlButton.tsx diff --git a/packages/controls/src/Controls.tsx b/packages/react/src/additional-components/Controls/Controls.tsx similarity index 93% rename from packages/controls/src/Controls.tsx rename to packages/react/src/additional-components/Controls/Controls.tsx index cf8a246f..99139b81 100644 --- a/packages/controls/src/Controls.tsx +++ b/packages/react/src/additional-components/Controls/Controls.tsx @@ -1,7 +1,11 @@ import { memo, useEffect, useState, type FC, type PropsWithChildren } from 'react'; import cc from 'classcat'; import { shallow } from 'zustand/shallow'; -import { useStore, useStoreApi, useReactFlow, Panel, type ReactFlowState } from '@reactflow/core'; + +import { useStore, useStoreApi } from '../../hooks/useStore'; +import useReactFlow from '../../hooks/useReactFlow'; +import Panel from '../../components/Panel'; +import { type ReactFlowState } from '../../types'; import PlusIcon from './Icons/Plus'; import MinusIcon from './Icons/Minus'; diff --git a/packages/controls/src/Icons/FitView.tsx b/packages/react/src/additional-components/Controls/Icons/FitView.tsx similarity index 100% rename from packages/controls/src/Icons/FitView.tsx rename to packages/react/src/additional-components/Controls/Icons/FitView.tsx diff --git a/packages/controls/src/Icons/Lock.tsx b/packages/react/src/additional-components/Controls/Icons/Lock.tsx similarity index 100% rename from packages/controls/src/Icons/Lock.tsx rename to packages/react/src/additional-components/Controls/Icons/Lock.tsx diff --git a/packages/controls/src/Icons/Minus.tsx b/packages/react/src/additional-components/Controls/Icons/Minus.tsx similarity index 100% rename from packages/controls/src/Icons/Minus.tsx rename to packages/react/src/additional-components/Controls/Icons/Minus.tsx diff --git a/packages/controls/src/Icons/Plus.tsx b/packages/react/src/additional-components/Controls/Icons/Plus.tsx similarity index 100% rename from packages/controls/src/Icons/Plus.tsx rename to packages/react/src/additional-components/Controls/Icons/Plus.tsx diff --git a/packages/controls/src/Icons/Unlock.tsx b/packages/react/src/additional-components/Controls/Icons/Unlock.tsx similarity index 100% rename from packages/controls/src/Icons/Unlock.tsx rename to packages/react/src/additional-components/Controls/Icons/Unlock.tsx diff --git a/packages/controls/src/index.tsx b/packages/react/src/additional-components/Controls/index.tsx similarity index 100% rename from packages/controls/src/index.tsx rename to packages/react/src/additional-components/Controls/index.tsx diff --git a/packages/react/src/additional-components/Controls/style.css b/packages/react/src/additional-components/Controls/style.css new file mode 100644 index 00000000..e69de29b diff --git a/packages/controls/src/types.ts b/packages/react/src/additional-components/Controls/types.ts similarity index 82% rename from packages/controls/src/types.ts rename to packages/react/src/additional-components/Controls/types.ts index 3cfcad29..2d93540c 100644 --- a/packages/controls/src/types.ts +++ b/packages/react/src/additional-components/Controls/types.ts @@ -1,5 +1,7 @@ import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'; -import type { FitViewOptions, PanelPosition } from '@reactflow/core'; +import type { PanelPosition } from '@xyflow/system'; + +import type { FitViewOptions } from '../../types'; export type ControlProps = HTMLAttributes & { showZoom?: boolean; diff --git a/packages/minimap/src/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx similarity index 97% rename from packages/minimap/src/MiniMap.tsx rename to packages/react/src/additional-components/MiniMap/MiniMap.tsx index dcefec43..125f40e9 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx @@ -6,16 +6,16 @@ import { shallow } from 'zustand/shallow'; import { type D3ZoomEvent, zoom } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import { - useStore, getRectOfNodes, - Panel, getBoundsOfRects, - useStoreApi, getNodePositionWithOrigin, CoordinateExtent, - type ReactFlowState, type Rect, -} from '@reactflow/core'; +} from '@xyflow/system'; + +import { useStore, useStoreApi } from '../../hooks/useStore'; +import Panel from '../../components/Panel'; +import type { ReactFlowState } from '../../types'; import MiniMapNode from './MiniMapNode'; import type { MiniMapProps, GetMiniMapNodeAttribute } from './types'; diff --git a/packages/minimap/src/MiniMapNode.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx similarity index 100% rename from packages/minimap/src/MiniMapNode.tsx rename to packages/react/src/additional-components/MiniMap/MiniMapNode.tsx diff --git a/packages/minimap/src/index.tsx b/packages/react/src/additional-components/MiniMap/index.tsx similarity index 100% rename from packages/minimap/src/index.tsx rename to packages/react/src/additional-components/MiniMap/index.tsx diff --git a/packages/minimap/src/types.ts b/packages/react/src/additional-components/MiniMap/types.ts similarity index 92% rename from packages/minimap/src/types.ts rename to packages/react/src/additional-components/MiniMap/types.ts index f86722ed..c51ca69c 100644 --- a/packages/minimap/src/types.ts +++ b/packages/react/src/additional-components/MiniMap/types.ts @@ -1,6 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react'; -import type { Node, PanelPosition, XYPosition } from '@reactflow/core'; +import type { PanelPosition, XYPosition } from '@xyflow/system'; + +import type { Node } from '../../types'; export type GetMiniMapNodeAttribute = (node: Node) => string; diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx similarity index 100% rename from packages/node-resizer/src/NodeResizer.tsx rename to packages/react/src/additional-components/NodeResizer/NodeResizer.tsx diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx similarity index 95% rename from packages/node-resizer/src/ResizeControl.tsx rename to packages/react/src/additional-components/NodeResizer/ResizeControl.tsx index 71518605..cbf75c67 100644 --- a/packages/node-resizer/src/ResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx @@ -2,10 +2,17 @@ import { useRef, useEffect, memo } from 'react'; import cc from 'classcat'; import { drag } from 'd3-drag'; import { select } from 'd3-selection'; -import { getPointerPosition } from '@reactflow/utils'; -import { useStoreApi, NodeChange, NodeDimensionChange, useNodeId, NodePositionChange, clamp } from '@reactflow/core'; +import { getPointerPosition, clamp } from '@xyflow/system'; -import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types'; +import { useStoreApi } from '../../hooks/useStore'; +import { useNodeId } from '../../contexts/NodeIdContext'; +import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types'; +import { + type ResizeDragEvent, + type ResizeControlProps, + type ResizeControlLineProps, + ResizeControlVariant, +} from './types'; import { getDirection } from './utils'; const initPrevValues = { width: 0, height: 0, x: 0, y: 0 }; diff --git a/packages/node-resizer/src/index.tsx b/packages/react/src/additional-components/NodeResizer/index.tsx similarity index 100% rename from packages/node-resizer/src/index.tsx rename to packages/react/src/additional-components/NodeResizer/index.tsx diff --git a/packages/node-resizer/src/types.ts b/packages/react/src/additional-components/NodeResizer/types.ts similarity index 100% rename from packages/node-resizer/src/types.ts rename to packages/react/src/additional-components/NodeResizer/types.ts diff --git a/packages/node-resizer/src/utils.ts b/packages/react/src/additional-components/NodeResizer/utils.ts similarity index 100% rename from packages/node-resizer/src/utils.ts rename to packages/react/src/additional-components/NodeResizer/utils.ts diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx similarity index 93% rename from packages/node-toolbar/src/NodeToolbar.tsx rename to packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx index 3b02b8bf..50d67f12 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx @@ -1,18 +1,11 @@ import { useCallback, CSSProperties } from 'react'; -import { - Node, - ReactFlowState, - useStore, - getRectOfNodes, - Transform, - Rect, - Position, - internalsSymbol, - useNodeId, -} from '@reactflow/core'; import cc from 'classcat'; import { shallow } from 'zustand/shallow'; +import { getRectOfNodes, Transform, Rect, Position, internalsSymbol } from '@xyflow/system'; +import { Node, ReactFlowState } from '../../types'; +import { useStore } from '../../hooks/useStore'; +import { useNodeId } from '../../contexts/NodeIdContext'; import NodeToolbarPortal from './NodeToolbarPortal'; import { Align, NodeToolbarProps } from './types'; diff --git a/packages/node-toolbar/src/NodeToolbarPortal.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbarPortal.tsx similarity index 80% rename from packages/node-toolbar/src/NodeToolbarPortal.tsx rename to packages/react/src/additional-components/NodeToolbar/NodeToolbarPortal.tsx index 732362e5..4b8d8d02 100644 --- a/packages/node-toolbar/src/NodeToolbarPortal.tsx +++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbarPortal.tsx @@ -1,6 +1,8 @@ import { ReactNode } from 'react'; import { createPortal } from 'react-dom'; -import { ReactFlowState, useStore } from '@reactflow/core'; + +import type { ReactFlowState } from '../../types'; +import { useStore } from '../../hooks/useStore'; const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer'); diff --git a/packages/node-toolbar/src/index.tsx b/packages/react/src/additional-components/NodeToolbar/index.tsx similarity index 100% rename from packages/node-toolbar/src/index.tsx rename to packages/react/src/additional-components/NodeToolbar/index.tsx diff --git a/packages/node-toolbar/src/types.ts b/packages/react/src/additional-components/NodeToolbar/types.ts similarity index 85% rename from packages/node-toolbar/src/types.ts rename to packages/react/src/additional-components/NodeToolbar/types.ts index 7ff2087b..29478576 100644 --- a/packages/node-toolbar/src/types.ts +++ b/packages/react/src/additional-components/NodeToolbar/types.ts @@ -1,5 +1,5 @@ -import { Position } from '@reactflow/core'; import type { HTMLAttributes } from 'react'; +import type { Position } from '@xyflow/system'; export type NodeToolbarProps = HTMLAttributes & { nodeId?: string | string[]; diff --git a/packages/react/src/additional-components/index.ts b/packages/react/src/additional-components/index.ts new file mode 100644 index 00000000..94a1595e --- /dev/null +++ b/packages/react/src/additional-components/index.ts @@ -0,0 +1,5 @@ +export * from './Background'; +export * from './Controls'; +export * from './MiniMap'; +export * from './NodeResizer'; +export * from './NodeToolbar'; diff --git a/packages/core/src/components/A11yDescriptions/index.tsx b/packages/react/src/components/A11yDescriptions/index.tsx similarity index 100% rename from packages/core/src/components/A11yDescriptions/index.tsx rename to packages/react/src/components/A11yDescriptions/index.tsx diff --git a/packages/core/src/components/Attribution/index.tsx b/packages/react/src/components/Attribution/index.tsx similarity index 90% rename from packages/core/src/components/Attribution/index.tsx rename to packages/react/src/components/Attribution/index.tsx index 641dc8c7..8c2aa484 100644 --- a/packages/core/src/components/Attribution/index.tsx +++ b/packages/react/src/components/Attribution/index.tsx @@ -1,4 +1,4 @@ -import type { PanelPosition, ProOptions } from '@reactflow/system'; +import type { PanelPosition, ProOptions } from '@xyflow/system'; import Panel from '../Panel'; diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx similarity index 98% rename from packages/core/src/components/ConnectionLine/index.tsx rename to packages/react/src/components/ConnectionLine/index.tsx index 0d083762..757e1fba 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/react/src/components/ConnectionLine/index.tsx @@ -6,10 +6,11 @@ import { Position, ConnectionLineType, ConnectionMode, + getBezierPath, + getSmoothStepPath, type ConnectionStatus, type HandleType, -} from '@reactflow/system'; -import { getBezierPath, getSmoothStepPath } from '@reactflow/edge-utils'; +} from '@xyflow/system'; import { useStore } from '../../hooks/useStore'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/react/src/components/EdgeLabelRenderer/index.tsx similarity index 100% rename from packages/core/src/components/EdgeLabelRenderer/index.tsx rename to packages/react/src/components/EdgeLabelRenderer/index.tsx diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx similarity index 96% rename from packages/core/src/components/Edges/BaseEdge.tsx rename to packages/react/src/components/Edges/BaseEdge.tsx index d658bb59..dd496f7e 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/react/src/components/Edges/BaseEdge.tsx @@ -1,4 +1,4 @@ -import { isNumeric } from '@reactflow/utils'; +import { isNumeric } from '@xyflow/system'; import type { BaseEdgeProps } from '../../types'; diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx similarity index 88% rename from packages/core/src/components/Edges/BezierEdge.tsx rename to packages/react/src/components/Edges/BezierEdge.tsx index fd04e1bd..8f446393 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/react/src/components/Edges/BezierEdge.tsx @@ -1,6 +1,5 @@ import { memo } from 'react'; -import { Position } from '@reactflow/system'; -import { getBezierPath } from '@reactflow/edge-utils'; +import { Position, getBezierPath } from '@xyflow/system'; import BaseEdge from './BaseEdge'; import type { BezierEdgeProps } from '../../types'; diff --git a/packages/core/src/components/Edges/EdgeAnchor.tsx b/packages/react/src/components/Edges/EdgeAnchor.tsx similarity index 96% rename from packages/core/src/components/Edges/EdgeAnchor.tsx rename to packages/react/src/components/Edges/EdgeAnchor.tsx index 3ea97546..575023b3 100644 --- a/packages/core/src/components/Edges/EdgeAnchor.tsx +++ b/packages/react/src/components/Edges/EdgeAnchor.tsx @@ -1,6 +1,6 @@ import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react'; import cc from 'classcat'; -import { Position } from '@reactflow/system'; +import { Position } from '@xyflow/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/react/src/components/Edges/EdgeText.tsx similarity index 97% rename from packages/core/src/components/Edges/EdgeText.tsx rename to packages/react/src/components/Edges/EdgeText.tsx index e1d71249..7926e81d 100644 --- a/packages/core/src/components/Edges/EdgeText.tsx +++ b/packages/react/src/components/Edges/EdgeText.tsx @@ -1,6 +1,6 @@ import { memo, useRef, useState, useEffect, type FC, type PropsWithChildren } from 'react'; import cc from 'classcat'; -import type { Rect } from '@reactflow/system'; +import type { Rect } from '@xyflow/system'; import type { EdgeTextProps } from '../../types'; diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx similarity index 96% rename from packages/core/src/components/Edges/SimpleBezierEdge.tsx rename to packages/react/src/components/Edges/SimpleBezierEdge.tsx index 548ae8da..d9fa50c4 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx @@ -1,6 +1,5 @@ import { memo } from 'react'; -import { Position } from '@reactflow/system'; -import { getBezierEdgeCenter } from '@reactflow/edge-utils'; +import { Position, getBezierEdgeCenter } from '@xyflow/system'; import BaseEdge from './BaseEdge'; import type { EdgeProps } from '../../types'; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx similarity index 92% rename from packages/core/src/components/Edges/SmoothStepEdge.tsx rename to packages/react/src/components/Edges/SmoothStepEdge.tsx index 048d8cac..be635a4e 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx @@ -1,6 +1,5 @@ import { memo } from 'react'; -import { Position } from '@reactflow/system'; -import { getSmoothStepPath } from '@reactflow/edge-utils'; +import { Position, getSmoothStepPath } from '@xyflow/system'; import BaseEdge from './BaseEdge'; import type { SmoothStepEdgeProps } from '../../types'; diff --git a/packages/core/src/components/Edges/StepEdge.tsx b/packages/react/src/components/Edges/StepEdge.tsx similarity index 100% rename from packages/core/src/components/Edges/StepEdge.tsx rename to packages/react/src/components/Edges/StepEdge.tsx diff --git a/packages/core/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx similarity index 94% rename from packages/core/src/components/Edges/StraightEdge.tsx rename to packages/react/src/components/Edges/StraightEdge.tsx index f9448d2e..06f4a161 100644 --- a/packages/core/src/components/Edges/StraightEdge.tsx +++ b/packages/react/src/components/Edges/StraightEdge.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { getStraightPath } from '@reactflow/edge-utils'; +import { getStraightPath } from '@xyflow/system'; import BaseEdge from './BaseEdge'; import type { EdgeProps } from '../../types'; diff --git a/packages/core/src/components/Edges/index.ts b/packages/react/src/components/Edges/index.ts similarity index 100% rename from packages/core/src/components/Edges/index.ts rename to packages/react/src/components/Edges/index.ts diff --git a/packages/core/src/components/Edges/utils.ts b/packages/react/src/components/Edges/utils.ts similarity index 82% rename from packages/core/src/components/Edges/utils.ts rename to packages/react/src/components/Edges/utils.ts index 222c975a..a51b7613 100644 --- a/packages/core/src/components/Edges/utils.ts +++ b/packages/react/src/components/Edges/utils.ts @@ -1,5 +1,5 @@ -import { MouseEvent as ReactMouseEvent } from 'react'; -import { StoreApi } from 'zustand'; +import type { MouseEvent as ReactMouseEvent } from 'react'; +import type { StoreApi } from 'zustand'; import type { Edge, ReactFlowState } from '../../types'; diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/react/src/components/Edges/wrapEdge.tsx similarity index 98% rename from packages/core/src/components/Edges/wrapEdge.tsx rename to packages/react/src/components/Edges/wrapEdge.tsx index 1c780a9b..8fd7db22 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/react/src/components/Edges/wrapEdge.tsx @@ -1,7 +1,6 @@ import { memo, useState, useMemo, useRef, type ComponentType, type KeyboardEvent } from 'react'; import cc from 'classcat'; -import { getMarkerId, elementSelectionKeys, XYHandle } from '@reactflow/utils'; -import type { Connection } from '@reactflow/system'; +import { getMarkerId, elementSelectionKeys, XYHandle, type Connection } from '@xyflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions'; diff --git a/packages/core/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx similarity index 96% rename from packages/core/src/components/Handle/index.tsx rename to packages/react/src/components/Handle/index.tsx index 2c7fe7d8..b2accaa8 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/react/src/components/Handle/index.tsx @@ -1,8 +1,16 @@ 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 HandleType } from '@reactflow/system'; -import { XYHandle, getHostForElement, isMouseEvent } from '@reactflow/utils'; +import { + errorMessages, + Position, + XYHandle, + getHostForElement, + isMouseEvent, + type HandleProps, + type Connection, + type HandleType, +} from '@xyflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { useNodeId } from '../../contexts/NodeIdContext'; @@ -99,7 +107,6 @@ const Handle = forwardRef( connectionRadius: currentStore.connectionRadius, domNode: currentStore.domNode, nodes: currentStore.getNodes(), - transform: currentStore.transform, lib: currentStore.lib, isTarget, handleId, @@ -111,6 +118,7 @@ const Handle = forwardRef( updateConnection: currentStore.updateConnection, onConnect: onConnectExtended, isValidConnection: isValidConnection || currentStore.isValidConnection, + getTransform: () => store.getState().transform, }); } diff --git a/packages/core/src/components/Nodes/DefaultNode.tsx b/packages/react/src/components/Nodes/DefaultNode.tsx similarity index 89% rename from packages/core/src/components/Nodes/DefaultNode.tsx rename to packages/react/src/components/Nodes/DefaultNode.tsx index e82bd112..611e6165 100644 --- a/packages/core/src/components/Nodes/DefaultNode.tsx +++ b/packages/react/src/components/Nodes/DefaultNode.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { Position, type NodeProps } from '@reactflow/system'; +import { Position, type NodeProps } from '@xyflow/system'; import Handle from '../../components/Handle'; diff --git a/packages/core/src/components/Nodes/GroupNode.tsx b/packages/react/src/components/Nodes/GroupNode.tsx similarity index 100% rename from packages/core/src/components/Nodes/GroupNode.tsx rename to packages/react/src/components/Nodes/GroupNode.tsx diff --git a/packages/core/src/components/Nodes/InputNode.tsx b/packages/react/src/components/Nodes/InputNode.tsx similarity index 85% rename from packages/core/src/components/Nodes/InputNode.tsx rename to packages/react/src/components/Nodes/InputNode.tsx index 21e4ba5d..354da2ce 100644 --- a/packages/core/src/components/Nodes/InputNode.tsx +++ b/packages/react/src/components/Nodes/InputNode.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { Position, type NodeProps } from '@reactflow/system'; +import { Position, type NodeProps } from '@xyflow/system'; import Handle from '../../components/Handle'; diff --git a/packages/core/src/components/Nodes/OutputNode.tsx b/packages/react/src/components/Nodes/OutputNode.tsx similarity index 85% rename from packages/core/src/components/Nodes/OutputNode.tsx rename to packages/react/src/components/Nodes/OutputNode.tsx index 360c1113..8d52ba1e 100644 --- a/packages/core/src/components/Nodes/OutputNode.tsx +++ b/packages/react/src/components/Nodes/OutputNode.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { Position, type NodeProps } from '@reactflow/system'; +import { Position, type NodeProps } from '@xyflow/system'; import Handle from '../../components/Handle'; diff --git a/packages/core/src/components/Nodes/utils.ts b/packages/react/src/components/Nodes/utils.ts similarity index 93% rename from packages/core/src/components/Nodes/utils.ts rename to packages/react/src/components/Nodes/utils.ts index 1d83c071..9fab47ac 100644 --- a/packages/core/src/components/Nodes/utils.ts +++ b/packages/react/src/components/Nodes/utils.ts @@ -1,5 +1,5 @@ -import { MouseEvent, RefObject } from 'react'; -import { StoreApi } from 'zustand'; +import type { MouseEvent, RefObject } from 'react'; +import type { StoreApi } from 'zustand'; import type { Node, ReactFlowState } from '../../types'; diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/react/src/components/Nodes/wrapNode.tsx similarity index 98% rename from packages/core/src/components/Nodes/wrapNode.tsx rename to packages/react/src/components/Nodes/wrapNode.tsx index 06abf386..4d8fb8a0 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/react/src/components/Nodes/wrapNode.tsx @@ -1,7 +1,6 @@ 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, XYPosition } from '@reactflow/system'; +import { elementSelectionKeys, isInputDOMNode, type NodeProps, type XYPosition } from '@xyflow/system'; import { useStoreApi } from '../../hooks/useStore'; import { Provider } from '../../contexts/NodeIdContext'; diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/react/src/components/NodesSelection/index.tsx similarity index 94% rename from packages/core/src/components/NodesSelection/index.tsx rename to packages/react/src/components/NodesSelection/index.tsx index d6888fa6..3765a2ca 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/react/src/components/NodesSelection/index.tsx @@ -3,11 +3,10 @@ * made a selection with on or several nodes */ -import { memo, useRef, useEffect } from 'react'; -import type { MouseEvent, KeyboardEvent } from 'react'; +import { memo, useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react'; import cc from 'classcat'; import { shallow } from 'zustand/shallow'; -import { getRectOfNodes } from '@reactflow/utils'; +import { getRectOfNodes } from '@xyflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; import useDrag from '../../hooks/useDrag'; diff --git a/packages/core/src/components/Panel/index.tsx b/packages/react/src/components/Panel/index.tsx similarity index 93% rename from packages/core/src/components/Panel/index.tsx rename to packages/react/src/components/Panel/index.tsx index db306331..7bcf6f97 100644 --- a/packages/core/src/components/Panel/index.tsx +++ b/packages/react/src/components/Panel/index.tsx @@ -1,6 +1,6 @@ import type { HTMLAttributes, ReactNode } from 'react'; import cc from 'classcat'; -import type { PanelPosition } from '@reactflow/system'; +import type { PanelPosition } from '@xyflow/system'; import { useStore } from '../../hooks/useStore'; import type { ReactFlowState } from '../../types'; diff --git a/packages/core/src/components/ReactFlowProvider/index.tsx b/packages/react/src/components/ReactFlowProvider/index.tsx similarity index 93% rename from packages/core/src/components/ReactFlowProvider/index.tsx rename to packages/react/src/components/ReactFlowProvider/index.tsx index 7f70e7b4..d3c283c2 100644 --- a/packages/core/src/components/ReactFlowProvider/index.tsx +++ b/packages/react/src/components/ReactFlowProvider/index.tsx @@ -1,5 +1,5 @@ import { useRef, type FC, type PropsWithChildren } from 'react'; -import { StoreApi } from 'zustand'; +import { type StoreApi } from 'zustand'; import { Provider } from '../../contexts/RFStoreContext'; import { createRFStore } from '../../store'; diff --git a/packages/core/src/components/SelectionListener/index.tsx b/packages/react/src/components/SelectionListener/index.tsx similarity index 100% rename from packages/core/src/components/SelectionListener/index.tsx rename to packages/react/src/components/SelectionListener/index.tsx diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx similarity index 99% rename from packages/core/src/components/StoreUpdater/index.tsx rename to packages/react/src/components/StoreUpdater/index.tsx index 6833f4c7..bd6e7e07 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { StoreApi } from 'zustand'; import { shallow } from 'zustand/shallow'; -import type { CoordinateExtent } from '@reactflow/system'; +import type { CoordinateExtent } from '@xyflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; import type { Node, Edge, ReactFlowState, ReactFlowProps, ReactFlowStore } from '../../types'; diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/react/src/components/UserSelection/index.tsx similarity index 100% rename from packages/core/src/components/UserSelection/index.tsx rename to packages/react/src/components/UserSelection/index.tsx diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx similarity index 95% rename from packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx rename to packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx index 2bfdd15d..8a0524ac 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -1,6 +1,5 @@ import { memo, useCallback } from 'react'; -import type { MarkerProps } from '@reactflow/system'; -import { createMarkerIds } from '@reactflow/utils'; +import { type MarkerProps, createMarkerIds } from '@xyflow/system'; import { useStore } from '../../hooks/useStore'; import { useMarkerSymbol } from './MarkerSymbols'; diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx similarity index 93% rename from packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx rename to packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx index 4c2f2079..8ae3bb52 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { errorMessages, MarkerType, type EdgeMarker } from '@reactflow/system'; +import { errorMessages, MarkerType, type EdgeMarker } from '@xyflow/system'; import { useStoreApi } from '../../hooks/useStore'; diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx similarity index 98% rename from packages/core/src/container/EdgeRenderer/index.tsx rename to packages/react/src/container/EdgeRenderer/index.tsx index 37aba2d0..c5ba2102 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/react/src/container/EdgeRenderer/index.tsx @@ -1,7 +1,7 @@ import { memo, ReactNode } from 'react'; import { shallow } from 'zustand/shallow'; import cc from 'classcat'; -import { errorMessages, ConnectionMode, Position } from '@reactflow/system'; +import { errorMessages, ConnectionMode, Position, getHandle } from '@xyflow/system'; import { useStore } from '../../hooks/useStore'; import useVisibleEdges from '../../hooks/useVisibleEdges'; @@ -9,7 +9,6 @@ import MarkerDefinitions from './MarkerDefinitions'; import { getEdgePositions, getNodeData } from './utils'; import { GraphViewProps } from '../GraphView'; import type { Edge, ReactFlowState } from '../../types'; -import { getHandle } from '@reactflow/edge-utils'; type EdgeRendererProps = Pick< GraphViewProps, diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/react/src/container/EdgeRenderer/utils.ts similarity index 96% rename from packages/core/src/container/EdgeRenderer/utils.ts rename to packages/react/src/container/EdgeRenderer/utils.ts index 1f87ec53..403e5f80 100644 --- a/packages/core/src/container/EdgeRenderer/utils.ts +++ b/packages/react/src/container/EdgeRenderer/utils.ts @@ -2,18 +2,18 @@ import type { ComponentType } from 'react'; import { internalsSymbol, Position, + rectToBox, + getHandlePosition, type HandleElement, type NodeHandleBounds, type Rect, type Transform, type XYPosition, -} from '@reactflow/system'; -import { rectToBox } from '@reactflow/utils'; +} from '@xyflow/system'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, Node } from '../../types'; -import { getHandlePosition } from '@reactflow/edge-utils'; export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx similarity index 100% rename from packages/core/src/container/FlowRenderer/index.tsx rename to packages/react/src/container/FlowRenderer/index.tsx diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx similarity index 100% rename from packages/core/src/container/GraphView/index.tsx rename to packages/react/src/container/GraphView/index.tsx diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx similarity index 97% rename from packages/core/src/container/NodeRenderer/index.tsx rename to packages/react/src/container/NodeRenderer/index.tsx index 85ce766e..66b9de29 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/react/src/container/NodeRenderer/index.tsx @@ -1,7 +1,6 @@ import { memo, useMemo, useEffect, useRef, type ComponentType } from 'react'; import { shallow } from 'zustand/shallow'; -import { internalsSymbol, errorMessages, Position } from '@reactflow/system'; -import { clampPosition, getPositionWithOrigin } from '@reactflow/utils'; +import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWithOrigin } from '@xyflow/system'; import useVisibleNodes from '../../hooks/useVisibleNodes'; import { useStore } from '../../hooks/useStore'; diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/react/src/container/NodeRenderer/utils.ts similarity index 96% rename from packages/core/src/container/NodeRenderer/utils.ts rename to packages/react/src/container/NodeRenderer/utils.ts index 5d3911e8..758d3908 100644 --- a/packages/core/src/container/NodeRenderer/utils.ts +++ b/packages/react/src/container/NodeRenderer/utils.ts @@ -1,5 +1,5 @@ import type { ComponentType } from 'react'; -import type { NodeProps } from '@reactflow/system'; +import type { NodeProps } from '@xyflow/system'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; diff --git a/packages/core/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx similarity index 98% rename from packages/core/src/container/Pane/index.tsx rename to packages/react/src/container/Pane/index.tsx index c89978d5..981a155b 100644 --- a/packages/core/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -5,8 +5,7 @@ import { memo, useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'; import { shallow } from 'zustand/shallow'; import cc from 'classcat'; -import { getNodesInside, getEventPosition } from '@reactflow/utils'; -import { SelectionMode } from '@reactflow/system'; +import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system'; import UserSelection from '../../components/UserSelection'; import { containerStyle } from '../../styles'; diff --git a/packages/core/src/container/ReactFlow/Wrapper.tsx b/packages/react/src/container/ReactFlow/Wrapper.tsx similarity index 100% rename from packages/core/src/container/ReactFlow/Wrapper.tsx rename to packages/react/src/container/ReactFlow/Wrapper.tsx diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx similarity index 99% rename from packages/core/src/container/ReactFlow/index.tsx rename to packages/react/src/container/ReactFlow/index.tsx index dd43c43c..db7ddbef 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/react/src/container/ReactFlow/index.tsx @@ -5,10 +5,10 @@ import { ConnectionMode, PanOnScrollMode, SelectionMode, + infiniteExtent, type NodeOrigin, type Viewport, -} from '@reactflow/system'; -import { infiniteExtent } from '@reactflow/utils'; +} from '@xyflow/system'; import Attribution from '../../components/Attribution'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/react/src/container/ReactFlow/utils.ts similarity index 92% rename from packages/core/src/container/ReactFlow/utils.ts rename to packages/react/src/container/ReactFlow/utils.ts index 305b05c2..3f49243f 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/react/src/container/ReactFlow/utils.ts @@ -1,7 +1,6 @@ import { useMemo, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { errorMessages } from '@reactflow/system'; -import { devWarn } from '@reactflow/utils'; +import { errorMessages, devWarn } from '@xyflow/system'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; diff --git a/packages/core/src/container/Viewport/index.tsx b/packages/react/src/container/Viewport/index.tsx similarity index 100% rename from packages/core/src/container/Viewport/index.tsx rename to packages/react/src/container/Viewport/index.tsx diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/react/src/container/ZoomPane/index.tsx similarity index 89% rename from packages/core/src/container/ZoomPane/index.tsx rename to packages/react/src/container/ZoomPane/index.tsx index 27f2888f..f04ed0f4 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/react/src/container/ZoomPane/index.tsx @@ -1,8 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { XYPanZoom } from '@reactflow/utils'; -import { PanOnScrollMode, type Transform, type PanZoomInstance } from '@reactflow/system'; +import { XYPanZoom, PanOnScrollMode, type Transform, type PanZoomInstance } from '@xyflow/system'; import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; @@ -23,9 +22,7 @@ type ZoomPaneProps = Omit< const selector = (s: ReactFlowState) => ({ userSelectionActive: s.userSelectionActive, - onViewportChangeStart: s.onViewportChangeStart, - onViewportChange: s.onViewportChange, - onViewportChangeEnd: s.onViewportChangeEnd, + lib: s.lib, }); const ZoomPane = ({ @@ -49,7 +46,7 @@ const ZoomPane = ({ }: ZoomPaneProps) => { const store = useStoreApi(); const zoomPane = useRef(null); - const { userSelectionActive } = useStore(selector, shallow); + const { userSelectionActive, lib } = useStore(selector, shallow); const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode); const panZoom = useRef(); @@ -82,7 +79,7 @@ const ZoomPane = ({ }, }); - const { x, y, zoom } = panZoom.current.getViewport(); + const { x, y, zoom } = panZoom.current!.getViewport(); store.setState({ panZoom: panZoom.current, @@ -111,6 +108,7 @@ const ZoomPane = ({ noPanClassName, userSelectionActive, noWheelClassName, + lib, }); }, [ onPaneContextMenu, @@ -126,6 +124,7 @@ const ZoomPane = ({ noPanClassName, userSelectionActive, noWheelClassName, + lib, ]); return ( diff --git a/packages/core/src/contexts/NodeIdContext.ts b/packages/react/src/contexts/NodeIdContext.ts similarity index 100% rename from packages/core/src/contexts/NodeIdContext.ts rename to packages/react/src/contexts/NodeIdContext.ts diff --git a/packages/core/src/contexts/RFStoreContext.ts b/packages/react/src/contexts/RFStoreContext.ts similarity index 100% rename from packages/core/src/contexts/RFStoreContext.ts rename to packages/react/src/contexts/RFStoreContext.ts diff --git a/packages/core/src/custom.d.ts b/packages/react/src/custom.d.ts similarity index 100% rename from packages/core/src/custom.d.ts rename to packages/react/src/custom.d.ts diff --git a/packages/core/src/hooks/useDrag.ts b/packages/react/src/hooks/useDrag.ts similarity index 96% rename from packages/core/src/hooks/useDrag.ts rename to packages/react/src/hooks/useDrag.ts index 49da1e2c..e5f6ebb9 100644 --- a/packages/core/src/hooks/useDrag.ts +++ b/packages/react/src/hooks/useDrag.ts @@ -1,5 +1,5 @@ import { useEffect, useRef, useState, type RefObject } from 'react'; -import { XYDrag, type XYDragInstance } from '@reactflow/utils'; +import { XYDrag, type XYDragInstance } from '@xyflow/system'; import { handleNodeClick } from '../components/Nodes/utils'; import { useStoreApi } from './useStore'; diff --git a/packages/core/src/hooks/useEdges.ts b/packages/react/src/hooks/useEdges.ts similarity index 100% rename from packages/core/src/hooks/useEdges.ts rename to packages/react/src/hooks/useEdges.ts diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/react/src/hooks/useGlobalKeyHandler.ts similarity index 86% rename from packages/core/src/hooks/useGlobalKeyHandler.ts rename to packages/react/src/hooks/useGlobalKeyHandler.ts index fff9a4f4..c592a34d 100644 --- a/packages/core/src/hooks/useGlobalKeyHandler.ts +++ b/packages/react/src/hooks/useGlobalKeyHandler.ts @@ -1,15 +1,17 @@ import { useEffect } from 'react'; -import type { KeyCode } from '@reactflow/system'; +import type { KeyCode } from '@xyflow/system'; import { useStoreApi } from '../hooks/useStore'; import useKeyPress from './useKeyPress'; import useReactFlow from './useReactFlow'; -interface HookParams { + +export default ({ + deleteKeyCode, + multiSelectionKeyCode, +}: { deleteKeyCode: KeyCode | null; multiSelectionKeyCode: KeyCode | null; -} - -export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => { +}): void => { const store = useStoreApi(); const { deleteElements } = useReactFlow(); diff --git a/packages/core/src/hooks/useKeyPress.ts b/packages/react/src/hooks/useKeyPress.ts similarity index 96% rename from packages/core/src/hooks/useKeyPress.ts rename to packages/react/src/hooks/useKeyPress.ts index efddc507..5259b19c 100644 --- a/packages/core/src/hooks/useKeyPress.ts +++ b/packages/react/src/hooks/useKeyPress.ts @@ -1,13 +1,13 @@ import { useState, useEffect, useRef, useMemo } from 'react'; -import { isInputDOMNode } from '@reactflow/utils'; -import type { KeyCode } from '@reactflow/system'; +import { isInputDOMNode, type KeyCode } from '@xyflow/system'; type Keys = Array; type PressedKeys = Set; type KeyOrCode = 'key' | 'code'; -export interface UseKeyPressOptions { + +export type UseKeyPressOptions = { target: Window | Document | HTMLElement | ShadowRoot | null; -} +}; const doc = typeof document !== 'undefined' ? document : null; @@ -45,7 +45,6 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { useEffect(() => { if (keyCode !== null) { const downHandler = (event: KeyboardEvent) => { - modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey; if (!modifierPressed.current && isInputDOMNode(event)) { diff --git a/packages/core/src/hooks/useNodes.ts b/packages/react/src/hooks/useNodes.ts similarity index 99% rename from packages/core/src/hooks/useNodes.ts rename to packages/react/src/hooks/useNodes.ts index 6f108745..8d71b435 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/react/src/hooks/useNodes.ts @@ -1,7 +1,6 @@ import { shallow } from 'zustand/shallow'; import { useStore } from '../hooks/useStore'; - import type { Node, ReactFlowState } from '../types'; const nodesSelector = (state: ReactFlowState) => state.getNodes(); diff --git a/packages/core/src/hooks/useNodesEdgesState.ts b/packages/react/src/hooks/useNodesEdgesState.ts similarity index 100% rename from packages/core/src/hooks/useNodesEdgesState.ts rename to packages/react/src/hooks/useNodesEdgesState.ts diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/react/src/hooks/useNodesInitialized.ts similarity index 93% rename from packages/core/src/hooks/useNodesInitialized.ts rename to packages/react/src/hooks/useNodesInitialized.ts index 16dd14a2..ea779fb6 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/react/src/hooks/useNodesInitialized.ts @@ -1,4 +1,4 @@ -import { internalsSymbol } from '@reactflow/system'; +import { internalsSymbol } from '@xyflow/system'; import { useStore } from './useStore'; import type { ReactFlowState } from '../types'; diff --git a/packages/core/src/hooks/useOnInitHandler.ts b/packages/react/src/hooks/useOnInitHandler.ts similarity index 100% rename from packages/core/src/hooks/useOnInitHandler.ts rename to packages/react/src/hooks/useOnInitHandler.ts diff --git a/packages/core/src/hooks/useOnSelectionChange.ts b/packages/react/src/hooks/useOnSelectionChange.ts similarity index 100% rename from packages/core/src/hooks/useOnSelectionChange.ts rename to packages/react/src/hooks/useOnSelectionChange.ts diff --git a/packages/core/src/hooks/useOnViewportChange.ts b/packages/react/src/hooks/useOnViewportChange.ts similarity index 91% rename from packages/core/src/hooks/useOnViewportChange.ts rename to packages/react/src/hooks/useOnViewportChange.ts index 46516a31..00ac15a7 100644 --- a/packages/core/src/hooks/useOnViewportChange.ts +++ b/packages/react/src/hooks/useOnViewportChange.ts @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import type { OnViewportChange } from '@reactflow/system'; +import type { OnViewportChange } from '@xyflow/system'; import { useStoreApi } from './useStore'; diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts similarity index 98% rename from packages/core/src/hooks/useReactFlow.ts rename to packages/react/src/hooks/useReactFlow.ts index 6f8a72f9..f5e15231 100644 --- a/packages/core/src/hooks/useReactFlow.ts +++ b/packages/react/src/hooks/useReactFlow.ts @@ -1,6 +1,5 @@ import { useCallback, useMemo } from 'react'; -import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils'; -import type { Rect } from '@reactflow/system'; +import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system'; import useViewportHelper from './useViewportHelper'; import { useStoreApi } from '../hooks/useStore'; diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/react/src/hooks/useResizeHandler.ts similarity index 91% rename from packages/core/src/hooks/useResizeHandler.ts rename to packages/react/src/hooks/useResizeHandler.ts index 3857d4f1..863ee261 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/react/src/hooks/useResizeHandler.ts @@ -1,6 +1,5 @@ import { useEffect, type MutableRefObject } from 'react'; -import { errorMessages } from '@reactflow/system'; -import { getDimensions } from '@reactflow/utils'; +import { errorMessages, getDimensions } from '@xyflow/system'; import { useStoreApi } from '../hooks/useStore'; diff --git a/packages/core/src/hooks/useStore.ts b/packages/react/src/hooks/useStore.ts similarity index 95% rename from packages/core/src/hooks/useStore.ts rename to packages/react/src/hooks/useStore.ts index 5159882d..e7fc934b 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/react/src/hooks/useStore.ts @@ -1,6 +1,6 @@ import { useContext, useMemo } from 'react'; import { useStore as useZustandStore, type StoreApi } from 'zustand'; -import { errorMessages } from '@reactflow/system'; +import { errorMessages } from '@xyflow/system'; import StoreContext from '../contexts/RFStoreContext'; import type { ReactFlowState } from '../types'; diff --git a/packages/core/src/hooks/useUpdateNodeInternals.ts b/packages/react/src/hooks/useUpdateNodeInternals.ts similarity index 97% rename from packages/core/src/hooks/useUpdateNodeInternals.ts rename to packages/react/src/hooks/useUpdateNodeInternals.ts index c5971934..9b4bcf61 100644 --- a/packages/core/src/hooks/useUpdateNodeInternals.ts +++ b/packages/react/src/hooks/useUpdateNodeInternals.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import type { UpdateNodeInternals, NodeDimensionUpdate } from '@reactflow/system'; +import type { UpdateNodeInternals, NodeDimensionUpdate } from '@xyflow/system'; import { useStoreApi } from '../hooks/useStore'; diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/react/src/hooks/useUpdateNodePositions.ts similarity index 97% rename from packages/core/src/hooks/useUpdateNodePositions.ts rename to packages/react/src/hooks/useUpdateNodePositions.ts index 70e1a523..a65f14ee 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/react/src/hooks/useUpdateNodePositions.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { calcNextPosition } from '@reactflow/utils'; +import { calcNextPosition } from '@xyflow/system'; import { useStoreApi } from '../hooks/useStore'; diff --git a/packages/core/src/hooks/useViewport.ts b/packages/react/src/hooks/useViewport.ts similarity index 89% rename from packages/core/src/hooks/useViewport.ts rename to packages/react/src/hooks/useViewport.ts index 13b214c5..c7153fac 100644 --- a/packages/core/src/hooks/useViewport.ts +++ b/packages/react/src/hooks/useViewport.ts @@ -1,5 +1,5 @@ import { shallow } from 'zustand/shallow'; -import type { Viewport } from '@reactflow/system'; +import type { Viewport } from '@xyflow/system'; import { useStore } from '../hooks/useStore'; import type { ReactFlowState } from '../types'; diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts similarity index 95% rename from packages/core/src/hooks/useViewportHelper.ts rename to packages/react/src/hooks/useViewportHelper.ts index 96d47471..67301e04 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/react/src/hooks/useViewportHelper.ts @@ -1,6 +1,5 @@ import { useMemo } from 'react'; -import { pointToRendererPoint, getTransformForBounds, fitView } from '@reactflow/utils'; -import type { XYPosition } from '@reactflow/system'; +import { pointToRendererPoint, getTransformForBounds, fitView, type XYPosition } from '@xyflow/system'; import { useStoreApi, useStore } from '../hooks/useStore'; import type { ViewportHelperFunctions, ReactFlowState } from '../types'; diff --git a/packages/core/src/hooks/useVisibleEdges.ts b/packages/react/src/hooks/useVisibleEdges.ts similarity index 96% rename from packages/core/src/hooks/useVisibleEdges.ts rename to packages/react/src/hooks/useVisibleEdges.ts index ac888780..aa57ee2f 100644 --- a/packages/core/src/hooks/useVisibleEdges.ts +++ b/packages/react/src/hooks/useVisibleEdges.ts @@ -1,6 +1,5 @@ import { useCallback } from 'react'; -import { internalsSymbol } from '@reactflow/system'; -import { isNumeric } from '@reactflow/utils'; +import { internalsSymbol, isNumeric } from '@xyflow/system'; import { useStore } from '../hooks/useStore'; import { isEdgeVisible } from '../container/EdgeRenderer/utils'; diff --git a/packages/core/src/hooks/useVisibleNodes.ts b/packages/react/src/hooks/useVisibleNodes.ts similarity index 91% rename from packages/core/src/hooks/useVisibleNodes.ts rename to packages/react/src/hooks/useVisibleNodes.ts index 1a1d6c5d..c0fdb56a 100644 --- a/packages/core/src/hooks/useVisibleNodes.ts +++ b/packages/react/src/hooks/useVisibleNodes.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { getNodesInside } from '@reactflow/utils'; +import { getNodesInside } from '@xyflow/system'; import { useStore } from '../hooks/useStore'; import type { Node, ReactFlowState } from '../types'; diff --git a/packages/core/src/index.ts b/packages/react/src/index.ts similarity index 88% rename from packages/core/src/index.ts rename to packages/react/src/index.ts index a48b55e8..45f05f11 100644 --- a/packages/core/src/index.ts +++ b/packages/react/src/index.ts @@ -23,19 +23,20 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange'; export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized'; export { useNodeId } from './contexts/NodeIdContext'; -export * from '@reactflow/edge-utils'; -export * from '@reactflow/system'; -export { - getTransformForBounds, - getRectOfNodes, - getNodePositionWithOrigin, - rectToBox, - boxToRect, - getBoundsOfRects, - clamp, -} from '@reactflow/utils'; +export * from '@xyflow/system'; +// export { +// getTransformForBounds, +// getRectOfNodes, +// getNodePositionWithOrigin, +// rectToBox, +// boxToRect, +// getBoundsOfRects, +// clamp, +// } from '@xyflow/system'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general'; +export * from './additional-components'; + export * from './types'; diff --git a/packages/core/src/store/index.ts b/packages/react/src/store/index.ts similarity index 98% rename from packages/core/src/store/index.ts rename to packages/react/src/store/index.ts index 6aae84b0..c5cfbc65 100644 --- a/packages/core/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -1,6 +1,12 @@ import { createStore } from 'zustand'; -import { clampPosition, getDimensions, fitView, getHandleBounds } from '@reactflow/utils'; -import { internalsSymbol, type CoordinateExtent } from '@reactflow/system'; +import { + clampPosition, + getDimensions, + fitView, + getHandleBounds, + internalsSymbol, + type CoordinateExtent, +} from '@xyflow/system'; import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; import { createNodeInternals, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils'; diff --git a/packages/core/src/store/initialState.ts b/packages/react/src/store/initialState.ts similarity index 92% rename from packages/core/src/store/initialState.ts rename to packages/react/src/store/initialState.ts index 4a34de55..9bca96d2 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -1,5 +1,4 @@ -import { devWarn, infiniteExtent } from '@reactflow/utils'; -import { ConnectionMode } from '@reactflow/system'; +import { devWarn, infiniteExtent, ConnectionMode } from '@xyflow/system'; import type { ReactFlowStore } from '../types'; diff --git a/packages/core/src/store/utils.ts b/packages/react/src/store/utils.ts similarity index 96% rename from packages/core/src/store/utils.ts rename to packages/react/src/store/utils.ts index d6d69825..b78ed257 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/react/src/store/utils.ts @@ -1,6 +1,11 @@ import type { StoreApi } from 'zustand'; -import { internalsSymbol, type XYZPosition, type NodeOrigin } from '@reactflow/system'; -import { isNumeric, getNodePositionWithOrigin } from '@reactflow/utils'; +import { + internalsSymbol, + isNumeric, + getNodePositionWithOrigin, + type XYZPosition, + type NodeOrigin, +} from '@xyflow/system'; import type { Edge, EdgeSelectionChange, Node, NodeInternals, NodeSelectionChange, ReactFlowState } from '../types'; diff --git a/packages/core/src/styles/base.css b/packages/react/src/styles/base.css similarity index 100% rename from packages/core/src/styles/base.css rename to packages/react/src/styles/base.css diff --git a/packages/core/src/styles/index.ts b/packages/react/src/styles/index.ts similarity index 100% rename from packages/core/src/styles/index.ts rename to packages/react/src/styles/index.ts diff --git a/packages/core/src/styles/init.css b/packages/react/src/styles/init.css similarity index 98% rename from packages/core/src/styles/init.css rename to packages/react/src/styles/init.css index f676e445..6b4f5b87 100644 --- a/packages/core/src/styles/init.css +++ b/packages/react/src/styles/init.css @@ -232,3 +232,7 @@ pointer-events: none; user-select: none; } + +.react-flow__minimap { + background-color: #fff; +} diff --git a/packages/node-resizer/src/style.css b/packages/react/src/styles/node-resizer.css similarity index 99% rename from packages/node-resizer/src/style.css rename to packages/react/src/styles/node-resizer.css index 0df9c1fb..f0113a53 100644 --- a/packages/node-resizer/src/style.css +++ b/packages/react/src/styles/node-resizer.css @@ -80,6 +80,7 @@ left: 0; border-left-width: 1px; } + .react-flow__resize-control.line.right { left: 100%; border-right-width: 1px; @@ -97,6 +98,7 @@ top: 0; border-top-width: 1px; } + .react-flow__resize-control.line.bottom { border-bottom-width: 1px; top: 100%; diff --git a/packages/core/src/styles/style.css b/packages/react/src/styles/style.css similarity index 66% rename from packages/core/src/styles/style.css rename to packages/react/src/styles/style.css index 9850564d..4ac170c4 100644 --- a/packages/core/src/styles/style.css +++ b/packages/react/src/styles/style.css @@ -1,5 +1,6 @@ /* this gets exported as style.css and can be used for the default theming */ @import './init.css'; +@import './node-resizer.css'; .react-flow__edge { &.updating { @@ -70,3 +71,40 @@ border: 1px solid white; border-radius: 100%; } + +.react-flow__controls { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); + + &-button { + border: none; + background: #fefefe; + border-bottom: 1px solid #eee; + box-sizing: content-box; + display: flex; + justify-content: center; + align-items: center; + width: 16px; + height: 16px; + cursor: pointer; + user-select: none; + padding: 5px; + + &:hover { + background: #f4f4f4; + } + + svg { + width: 100%; + max-width: 12px; + max-height: 12px; + } + + &:disabled { + pointer-events: none; + + svg { + fill-opacity: 0.4; + } + } + } +} diff --git a/packages/core/src/types/changes.ts b/packages/react/src/types/changes.ts similarity index 95% rename from packages/core/src/types/changes.ts rename to packages/react/src/types/changes.ts index a486e7cf..69ee0f1f 100644 --- a/packages/core/src/types/changes.ts +++ b/packages/react/src/types/changes.ts @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ - -import type { XYPosition, Dimensions } from '@reactflow/system'; +import type { XYPosition, Dimensions } from '@xyflow/system'; import type { Node, Edge } from '.'; diff --git a/packages/core/src/types/component-props.ts b/packages/react/src/types/component-props.ts similarity index 99% rename from packages/core/src/types/component-props.ts rename to packages/react/src/types/component-props.ts index 760f1338..f49b5097 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -19,7 +19,7 @@ import type { SelectionMode, OnError, IsValidConnection, -} from '@reactflow/system'; +} from '@xyflow/system'; import type { OnSelectionChangeFunc, diff --git a/packages/core/src/types/edges.ts b/packages/react/src/types/edges.ts similarity index 99% rename from packages/core/src/types/edges.ts rename to packages/react/src/types/edges.ts index 4e524f4e..b071f42c 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -12,7 +12,7 @@ import type { ConnectionLineType, HandleElement, ConnectionStatus, -} from '@reactflow/system'; +} from '@xyflow/system'; import { Node } from '.'; diff --git a/packages/core/src/types/general.ts b/packages/react/src/types/general.ts similarity index 98% rename from packages/core/src/types/general.ts rename to packages/react/src/types/general.ts index b8bb015c..8108c3dd 100644 --- a/packages/core/src/types/general.ts +++ b/packages/react/src/types/general.ts @@ -12,7 +12,7 @@ import { SetCenter, FitBounds, Project, -} from '@reactflow/system'; +} from '@xyflow/system'; import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.'; diff --git a/packages/core/src/types/index.ts b/packages/react/src/types/index.ts similarity index 100% rename from packages/core/src/types/index.ts rename to packages/react/src/types/index.ts diff --git a/packages/core/src/types/instance.ts b/packages/react/src/types/instance.ts similarity index 97% rename from packages/core/src/types/instance.ts rename to packages/react/src/types/instance.ts index af83e1e3..239d339f 100644 --- a/packages/core/src/types/instance.ts +++ b/packages/react/src/types/instance.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-namespace */ -import type { Rect, Viewport } from '@reactflow/system'; +import type { Rect, Viewport } from '@xyflow/system'; import type { Node, Edge, ViewportHelperFunctions } from '.'; export type ReactFlowJsonObject = { diff --git a/packages/core/src/types/nodes.ts b/packages/react/src/types/nodes.ts similarity index 96% rename from packages/core/src/types/nodes.ts rename to packages/react/src/types/nodes.ts index 4f19ac31..ee948e54 100644 --- a/packages/core/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -1,5 +1,5 @@ import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; -import type { BaseNode } from '@reactflow/system'; +import type { BaseNode } from '@xyflow/system'; export type Node = BaseNode< NodeData, diff --git a/packages/core/src/types/store.ts b/packages/react/src/types/store.ts similarity index 99% rename from packages/core/src/types/store.ts rename to packages/react/src/types/store.ts index a0760329..12240ff9 100644 --- a/packages/core/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -24,7 +24,7 @@ import { type OnMoveEnd, type IsValidConnection, type UpdateConnection, -} from '@reactflow/system'; +} from '@xyflow/system'; import type { Edge, diff --git a/packages/core/src/utils/changes.ts b/packages/react/src/utils/changes.ts similarity index 100% rename from packages/core/src/utils/changes.ts rename to packages/react/src/utils/changes.ts diff --git a/packages/core/src/utils/general.ts b/packages/react/src/utils/general.ts similarity index 95% rename from packages/core/src/utils/general.ts rename to packages/react/src/utils/general.ts index ff323a44..e13247c1 100644 --- a/packages/core/src/utils/general.ts +++ b/packages/react/src/utils/general.ts @@ -6,7 +6,8 @@ import { getIncomersBase, updateEdgeBase, getConnectedEdgesBase, -} from '@reactflow/utils'; +} from '@xyflow/system'; + import type { Edge, Node } from '../types'; export const isNode = isNodeBase; diff --git a/packages/core/src/utils/index.ts b/packages/react/src/utils/index.ts similarity index 100% rename from packages/core/src/utils/index.ts rename to packages/react/src/utils/index.ts diff --git a/packages/reactflow/tsconfig.json b/packages/react/tsconfig.json similarity index 51% rename from packages/reactflow/tsconfig.json rename to packages/react/tsconfig.json index d04cdef5..85011689 100644 --- a/packages/reactflow/tsconfig.json +++ b/packages/react/tsconfig.json @@ -1,6 +1,6 @@ { - "extends": "@reactflow/tsconfig/react.json", - "display": "reactflow", + "extends": "@xyflow/tsconfig/react.json", + "display": "@xyflow/react", "include": ["**/*.ts", "**/*.tsx"], "exclude": ["node_modules", "dist"] } diff --git a/packages/reactflow/.eslintrc.js b/packages/reactflow/.eslintrc.js deleted file mode 100644 index 31cfbd11..00000000 --- a/packages/reactflow/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ['@reactflow/eslint-config'], -}; diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md deleted file mode 100644 index c29273dd..00000000 --- a/packages/reactflow/CHANGELOG.md +++ /dev/null @@ -1,496 +0,0 @@ -# reactflow - -## 11.7.2 - -### Patch Changes - -- [#3063](https://github.com/wbkd/react-flow/pull/3063) [`33915b88`](https://github.com/wbkd/react-flow/commit/33915b88c2ae701847870346b381f9cfa86c6459) - controls: disable zoom buttons when min/max is reached -- [#3060](https://github.com/wbkd/react-flow/pull/3060) [`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba) - fix useNodes and useEdges bug with infinite re-renderings -- [#3064](https://github.com/wbkd/react-flow/pull/3064) [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48) - refactor useUpdateNodeInternals: only call updateNodeDimensions once -- [#3059](https://github.com/wbkd/react-flow/pull/3059) [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b) - fix useUpdateNodeInternals: update type -- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`33915b88`](https://github.com/wbkd/react-flow/commit/33915b88c2ae701847870346b381f9cfa86c6459), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]: - - @reactflow/core@11.7.2 - - @reactflow/controls@11.1.13 - - @reactflow/background@11.2.2 - - @reactflow/minimap@11.5.2 - - @reactflow/node-toolbar@1.2.1 - -## 11.7.1 - -### Patch Changes - -- [#3043](https://github.com/wbkd/react-flow/pull/3043) [`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb) - handles: handles on top of each other, reduce re-renderings -- [#3046](https://github.com/wbkd/react-flow/pull/3046) [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c) - base-edge: pass id to base edge path -- [#3007](https://github.com/wbkd/react-flow/pull/3007) [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - allow array of ids as updateNodeInternals arg -- [#3029](https://github.com/wbkd/react-flow/pull/3029) [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - autopan: only update nodes when transform change happen -- [#3052](https://github.com/wbkd/react-flow/pull/3052) [`55e05cf7`](https://github.com/wbkd/react-flow/commit/55e05cf76ae21863691153e76dbd51d1eecd2c60) Thanks [@Noam3kCH](https://github.com/Noam3kCH)! - node-toolbar: add prop to align bar at start, center or end - -- Updated dependencies [[`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb), [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c), [`55e05cf7`](https://github.com/wbkd/react-flow/commit/55e05cf76ae21863691153e76dbd51d1eecd2c60), [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70), [`46526b4e`](https://github.com/wbkd/react-flow/commit/46526b4e02b83d74726701e3ba73d0be8cf80787), [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614)]: - - @reactflow/core@11.7.1 - - @reactflow/node-toolbar@1.2.0 - - @reactflow/controls@11.1.12 - - @reactflow/background@11.2.1 - - @reactflow/minimap@11.5.1 - -## 11.7.0 - -Most notable updates: - -- `@reactflow/node-resizer` is now part of this package. No need to install it separately anymore. -- Handles: `isConnectableStart` and `isConnectableEnd` props to configure if you can start or end a connection at a certain handle -- Edges: `updatable` option to enable updates for specific edges -- MiniMap: `inversePan` and `zoomStep` props -- Background: `id` and `offset` props - this enables you to combine different patterns (useful if you want a graph paper like background for example) -- useNodesInitialized: options to configure if hidden nodes should be included (false by default) - -Big thanks to [@Elringus](https://github.com/Elringus) and [@bcakmakoglu](https://github.com/bcakmakoglu)! - -### Minor Changes - -- [#2964](https://github.com/wbkd/react-flow/pull/2964) [`2fb4c2c8`](https://github.com/wbkd/react-flow/commit/2fb4c2c82343751ff536da262de74bd9080321b4) - add @reactflow/node-resizer package -- [#2960](https://github.com/wbkd/react-flow/pull/2960) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - edges: add `updatable` option -- [#2958](https://github.com/wbkd/react-flow/pull/2958) [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065) - handles: add `isConnectableStart` and `isConnectableEnd` props -- [#2956](https://github.com/wbkd/react-flow/pull/2956) [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38) - add options for `useNodesInitialized`, ignore hidden nodes by default -- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props -- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - background: add `id` and `offset` props - -### Patch Changes - -- [#2926](https://github.com/wbkd/react-flow/pull/2926) Thanks [@Elringus](https://github.com/Elringus)! - fix non-passive wheel event listener violation -- [#2933](https://github.com/wbkd/react-flow/pull/2933) [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb) - prefix error keys with "error" -- [#2939](https://github.com/wbkd/react-flow/pull/2939) [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402) - add connection result to store - -### Patch Changes - -- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`c1448c2f`](https://github.com/wbkd/react-flow/commit/c1448c2f7415dd3b4b2c54e05404c5ab24e8978d), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`771c7a5d`](https://github.com/wbkd/react-flow/commit/771c7a5d133ce96e9f7471394c15189e0657ce01), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: - - @reactflow/core@11.7.0 - - @reactflow/minimap@11.5.0 - - @reactflow/background@11.2.0 - - @reactflow/controls@11.1.11 - - @reactflow/node-toolbar@1.1.11 - -## 11.6.1 - -### Patch Changes - -- Always create new edge object (fixes an issue with Redux toolkit and other immutable helper libs) - -## 11.6.0 - -This release introduces a new `isValidConnection` prop for the ReactFlow component. You no longer need to pass it to all your Handle components but can pass it once. We also added a new option for the `updateEdge` function that allows you to specify if you want to replace an id when updating it. More over the `MiniMap` got a new `nodeComponent` prop to pass a custom component for the mini map nodes. - -### Minor Changes - -- [#2877](https://github.com/wbkd/react-flow/pull/2877) [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7) - add `isValidConnection` prop for ReactFlow component -- [#2847](https://github.com/wbkd/react-flow/pull/2847) [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add option to enable/disable replacing edge id when using `updateEdge` -- [#2906](https://github.com/wbkd/react-flow/pull/2906) [`4a30185a`](https://github.com/wbkd/react-flow/commit/4a30185a12899691ff61259f0db84bc5494cb573) Thanks [@hayleigh-dot-dev](https://github.com/hayleigh-dot-dev)! - Minimap: add nodeComponent prop for passing custom component - -### Patch Changes - -- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) - add data-testid for controls, minimap and background -- [#2894](https://github.com/wbkd/react-flow/pull/2894) [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b) - fix(nodes): blur when node gets unselected -- [#2892](https://github.com/wbkd/react-flow/pull/2892) [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf) Thanks [@danielgek](https://github.com/danielgek) - track modifier keys on useKeypress -- [#2893](https://github.com/wbkd/react-flow/pull/2893) [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861) - fix: check if handle is connectable - -- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`4a30185a`](https://github.com/wbkd/react-flow/commit/4a30185a12899691ff61259f0db84bc5494cb573), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]: - - @reactflow/background@11.1.9 - - @reactflow/controls@11.1.9 - - @reactflow/core@11.6.0 - - @reactflow/minimap@11.4.0 - - @reactflow/node-toolbar@1.1.9 - -## 11.5.6 - -### Patch Changes - -- [#2834](https://github.com/wbkd/react-flow/pull/2834) [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `nodes` to fit view options to allow fitting view only around specified set of nodes -- [#2836](https://github.com/wbkd/react-flow/pull/2836) [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6) - Fix: connections for handles with bigger handles than connection radius -- [#2819](https://github.com/wbkd/react-flow/pull/2819) [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Avoid triggering edge update if not using left mouse button -- [#2832](https://github.com/wbkd/react-flow/pull/2832) [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5) - fitView: return type boolean -- [#2838](https://github.com/wbkd/react-flow/pull/2838) [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4) - refactor: use key press handle modifier keys + input -- [#2839](https://github.com/wbkd/react-flow/pull/2839) [`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6) - fix PropsWithChildren: pass default generic for v17 types - -- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]: - - @reactflow/core@11.5.5 - - @reactflow/background@11.1.8 - - @reactflow/controls@11.1.8 - - @reactflow/minimap@11.3.8 - - @reactflow/node-toolbar@1.1.8 - -## 11.5.5 - -### Patch Changes - -- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius - -- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: - - @reactflow/core@11.5.4 - - @reactflow/background@11.1.7 - - @reactflow/controls@11.1.7 - - @reactflow/minimap@11.3.7 - - @reactflow/node-toolbar@1.1.7 - -## 11.5.4 - -This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS. - -### Patch Changes - -- [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either -- [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius -- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius - -- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: - - @reactflow/core@11.5.3 - - @reactflow/background@11.1.6 - - @reactflow/controls@11.1.6 - - @reactflow/minimap@11.3.6 - - @reactflow/node-toolbar@1.1.6 - -## 11.5.3 - -### Patch Changes - -- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency - -- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: - - @reactflow/background@11.1.5 - - @reactflow/controls@11.1.5 - - @reactflow/core@11.5.2 - - @reactflow/minimap@11.3.5 - - @reactflow/node-toolbar@1.1.5 - -## 11.5.2 - -### Patch Changes - -- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius - -- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: - - @reactflow/core@11.5.1 - - @reactflow/background@11.1.4 - - @reactflow/controls@11.1.4 - - @reactflow/minimap@11.3.4 - - @reactflow/node-toolbar@1.1.4 - -## 11.5.1 - -### Minor Changes - -- use latest node-toolbar package to prevent dependency issues - -## 11.5.0 - -Lot's of improvements are coming with this release! - -- **Connecting radius**: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the `connectionRadius` prop. -- **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false. -- **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better. -- **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example. -- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: - -```ts -type MyCustomNode = Node; -``` - -This makes it easier to work with different custom nodes and data types. - -### Minor Changes - -- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius` -- [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens - -### Patch Changes - -- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices -- [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type - -- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: - - @reactflow/core@11.5.0 - - @reactflow/background@11.1.3 - - @reactflow/controls@11.1.3 - - @reactflow/minimap@11.3.3 - -## 11.4.2 - -### Patch Changes - -- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup - -- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]: - - @reactflow/background@11.1.2 - - @reactflow/core@11.4.2 - - @reactflow/minimap@11.3.2 - - @reactflow/node-toolbar@1.1.2 - - @reactflow/controls@11.1.2 - -## 11.4.1 - -### Patch Changes - -- [#2738](https://github.com/wbkd/react-flow/pull/2738) [`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba) - fix: fitView for subflows, context menu on right mouse pan -- [#2740](https://github.com/wbkd/react-flow/pull/2740) [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086) Thanks [@michaelspiss](https://github.com/michaelspiss)! - EdgeRenderer: check all handles for connection mode loose - -- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]: - - @reactflow/core@11.4.1 - - @reactflow/background@11.1.1 - - @reactflow/controls@11.1.1 - - @reactflow/minimap@11.3.1 - - @reactflow/node-toolbar@1.1.1 - -## 11.4.0 - -## 11.4.0 - -## New Features - -New props for the ReactFlow component to customize the controls of the viewport and the selection box better: - -1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false}` or `panOnDrag={[1, 2]}`) -2. `panOnDrag={[0, 1, 2]}` option to configure specific mouse buttons for panning -3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) -4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it -5. `onSelectionStart` and `onSelectionEnd` events -6. `elevateNodesOnSelect`: Defines if z-index should be increased when node is selected -7. New store function `getNodes`. You can now do `store.getState().getNodes()` instead of `Array.from(store.getNodes().nodeInternals.values())`. - -Thanks to @jackfishwick who helped a lot with the new panning and selection options. - -### Minor Changes - -- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) - - Add new props to configure viewport controls (`selectionOnDrag`, `panActivationKeyCode`, ..) -- [#2661](https://github.com/wbkd/react-flow/pull/2661) [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654) - - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - - selection: do not include hidden nodes - - minimap: fix onNodeClick for nodes outside the viewport - - keys: allow multi select when input is focused - -### Patch Changes - -- [#2695](https://github.com/wbkd/react-flow/pull/2695) [`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff) - Add elevateNodesOnSelect prop -- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. -- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) - Use translateExtent correctly -- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) - Only trigger drag event when change happened - -- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0 - - @reactflow/minimap@11.3.0 - - @reactflow/node-toolbar@1.1.0 - - @reactflow/background@11.1.0 - - @reactflow/controls@11.1.0 - -## 11.4.0-next.1 - -### Minor Changes - -- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused - -### Patch Changes - -- Updated dependencies []: - - @reactflow/background@11.1.0-next.1 - - @reactflow/controls@11.1.0-next.1 - - @reactflow/core@11.4.0-next.1 - - @reactflow/minimap@11.3.0-next.1 - - @reactflow/node-toolbar@1.1.0-next.1 - -## 11.4.0-next.0 - -### Minor Changes - -- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features - - New props for the ReactFlow component to customize the controls of the viewport and the selection box better: - - 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) - 2. `panOnDrag="RightClick"` option - 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) - 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it - 5. `onSelectionStart` and `onSelectionEnd` events - -### Patch Changes - -- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. - -- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) Thanks [@moklick](https://github.com/moklick)! - Use translateExtent correctly - -- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) Thanks [@moklick](https://github.com/moklick)! - Only trigger drag event when change happened - -- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: - - @reactflow/core@11.4.0-next.0 - - @reactflow/minimap@11.3.0-next.0 - - @reactflow/node-toolbar@1.1.0-next.0 - - @reactflow/background@11.0.8-next.0 - - @reactflow/controls@11.0.8-next.0 - -## 11.3.3 - -In this update we did some changes so that we could implement the new [``](https://reactflow.dev/docs/api/nodes/node-resizer/) component (not part of the `reactflow` package!) more smoothly. - -### Patch Changes - -- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]: - - @reactflow/core@11.3.2 - - @reactflow/minimap@11.2.3 - - @reactflow/node-toolbar@1.0.2 - - @reactflow/background@11.0.7 - - @reactflow/controls@11.0.7 - -## 11.3.2 - -### Patch Changes - -- [`7ece618d`](https://github.com/wbkd/react-flow/commit/7ece618d94b76183c1ecd45b16f6ab168168351b) Thanks [@lounsbrough](https://github.com/lounsbrough)! - Fix minimap node position - -- Updated dependencies [[`7ece618d`](https://github.com/wbkd/react-flow/commit/7ece618d94b76183c1ecd45b16f6ab168168351b)]: - - @reactflow/minimap@11.2.2 - -## 11.3.1 - -### Patch Changes - -- [#2595](https://github.com/wbkd/react-flow/pull/2595) [`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4) Thanks [@chrtze](https://github.com/chrtze)! - Fix and improve the behaviour when using nodeOrigin in combination with subflows -- [#2602](https://github.com/wbkd/react-flow/pull/2602) [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f) Thanks [@sdegueldre](https://github.com/sdegueldre)! - Don't use try catch in wrapper for checking if provider is available -- [#2601](https://github.com/wbkd/react-flow/pull/2601) [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af) Thanks [@hoondeveloper](https://github.com/hoondeveloper)! - fix isRectObject function -- [#2594](https://github.com/wbkd/react-flow/pull/2594) [`ec94d9ec`](https://github.com/wbkd/react-flow/commit/ec94d9ecdc964d6d66c04e9242f195614bbfdbbe) Thanks [@chrtze](https://github.com/chrtze)! - Allow multiple node ids to be passed for enabling multi selection toolbars - -- Updated dependencies [[`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4), [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f), [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af), [`ec94d9ec`](https://github.com/wbkd/react-flow/commit/ec94d9ecdc964d6d66c04e9242f195614bbfdbbe)]: - - @reactflow/core@11.3.1 - - @reactflow/minimap@11.2.1 - - @reactflow/node-toolbar@1.0.1 - - @reactflow/background@11.0.6 - - @reactflow/controls@11.0.6 - -## 11.3.0 - -### Minor Changes - -- [#2562](https://github.com/wbkd/react-flow/pull/2562) [`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179) Thanks [@moklick](https://github.com/moklick)! - Minimap: Add `maskStrokeColor` and `maskStrokeWidth` props -- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Core: Add `` component that renders a fixed element attached to a node -- [#2545](https://github.com/wbkd/react-flow/pull/2545) [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f) Thanks [@chrtze](https://github.com/chrtze)! - Minimap: Add `ariaLabel` prop to configure or remove the aria-label - -### Patch Changes - -- [#2561](https://github.com/wbkd/react-flow/pull/2561) [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940) Thanks [@moklick](https://github.com/moklick)! - Core: Fix multi selection and fitView when nodeOrigin is used -- [#2560](https://github.com/wbkd/react-flow/pull/2560) [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd) Thanks [@neo](https://github.com/neo)! - Core: Always elevate zIndex when node is selected -- [#2573](https://github.com/wbkd/react-flow/pull/2573) [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967) Thanks [@moklick](https://github.com/moklick)! - Core: Fix disappearing connection line for loose flows -- [#2558](https://github.com/wbkd/react-flow/pull/2558) [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7) Thanks [@moklick](https://github.com/moklick)! - Core: Handle multiple instances on a page for EdgeLabelRenderer - -- Updated dependencies [[`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179), [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7), [`c793433c`](https://github.com/wbkd/react-flow/commit/c793433cafc214281ae97c9a32f5ac2fe453c34f)]: - - @reactflow/minimap@11.2.0 - - @reactflow/core@11.3.0 - - @reactflow/node-toolbar@1.0.0 - - @reactflow/background@11.0.5 - - @reactflow/controls@11.0.5 - -## 11.2.0 - -### Minor Changes - -- [#2535](https://github.com/wbkd/react-flow/pull/2535) [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948) Thanks [@moklick](https://github.com/moklick)! - Feat: Add edge label renderer -- [#2536](https://github.com/wbkd/react-flow/pull/2536) [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e) Thanks [@pengfu](https://github.com/pengfu)! - Feat: add deleteElements helper function -- [#2539](https://github.com/wbkd/react-flow/pull/2539) [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931) Thanks [@moklick](https://github.com/moklick)! - Feat: add intersection helpers -- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map - -### Patch Changes - -- [#2538](https://github.com/wbkd/react-flow/pull/2538) [`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc) Thanks [@neo](https://github.com/neo)! - Refactor: put React Flow in isolated stacking context - -- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]: - - @reactflow/core@11.2.0 - - @reactflow/minimap@11.1.0 - - @reactflow/background@11.0.4 - - @reactflow/controls@11.0.4 - -## 11.1.2 - -Housekeeping release with some fixes and some cleanups for the types. - -### Patch Changes - -- make pro options acc type optional -- cleanup types -- fix rf id handling -- always render nodes when dragging=true -- don't apply animations to helper edge -- Updated dependencies: - - @reactflow/core@11.1.2 - - @reactflow/background@11.0.3 - - @reactflow/controls@11.0.3 - - @reactflow/minimap@11.0.3 - -## 11.1.1 - -### Patch Changes - -- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel -- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true -- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484 -- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects - -- Updated dependencies: - - @reactflow/background@11.0.2 - - @reactflow/core@11.1.1 - - @reactflow/controls@11.0.2 - - @reactflow/minimap@11.0.2 - -## 11.1.0 - -### Minor Changes - -- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - New props: nodesFocusable and edgesFocusable - -### Patch Changes - -- [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4) Thanks [@moklick](https://github.com/moklick)! - Make nopan class name overwritable with class name option - -- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: - - @reactflow/background@11.0.1 - - @reactflow/core@11.1.0 - - @reactflow/controls@11.0.1 - - @reactflow/minimap@11.0.1 - -## 11.0.0 - -Finally it's here! A new version that comes with lots of improvements and the new package name `reactflow`. -From now on you can install it via `npm install reactflow`. - -## Major Changes - -- Importing CSS via `reactflow/dist/style.css` is mandatory -- **Better [Accessibility](/docs/guides/accessibility)** - - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. - - `aria-` default attributes for all elements and controllable via `ariaLabel` options - - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop -- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact -- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 -- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 -- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. -- **New background pattern**: `BackgroundVariant.Cross` variant -- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component -- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component -- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node -- **Deletable option** for Nodes and edges -- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` -- **Edge `pathOptions`** for `smoothstep` and `default` edges -- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning -- **Pane moveable** with middle mouse button -- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) -- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges -- **[Separately installable packages](/docs/overview/packages/)** - - @reactflow/core - - @reactflow/background - - @reactflow/controls - - @reactflow/minimap - -### Patch Changes - -- Updated dependencies: - - @reactflow/background@11.0.0 - - @reactflow/controls@11.0.0 - - @reactflow/core@11.0.0 - - @reactflow/minimap@11.0.0 diff --git a/packages/reactflow/README.md b/packages/reactflow/README.md deleted file mode 100644 index c41f2e7e..00000000 --- a/packages/reactflow/README.md +++ /dev/null @@ -1,128 +0,0 @@ -![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only) - -
- -![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072) -![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads) -![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072) -![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072) - -A highly customizable React component for building interactive graphs and node-based editors. - -[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) - -
- ---- - -## Key Features - -- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box -- **Customizable:** Different [node](https://reactflow.dev/docs/api/nodes/node-types) and [edge types](https://reactflow.dev/docs/api/edges/edge-types) and support for custom nodes with multiple handles and custom edges -- **Fast rendering:** Only nodes that have changed are re-rendered and only those in the viewport are displayed -- **Hooks and Utils:** [Hooks](https://reactflow.dev/docs/api/hooks/use-react-flow) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/docs/api/graph-util-functions) -- **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) -- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) - -## Commercial Usage - -**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 - -**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd). - -You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). - -## Installation - -The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm: - -```bash -npm install reactflow -``` - -## Quick Start - -This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). - -```jsx -import { useCallback } from 'react'; -import ReactFlow, { - MiniMap, - Controls, - Background, - useNodesState, - useEdgesState, - addEdge, -} from 'reactflow'; - -import 'reactflow/dist/style.css'; - -const initialNodes = [ - { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, - { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, -]; - -const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; - -function Flow() { - const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); - const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - - const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); - - return ( - - - - - - ); -} -``` - -## Development - -Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`. - -For local development, you can use `pnpm dev`. - -## Testing - -Testing is done with cypress. You can find the tests in the [`examples/cypress`](/examples/cypress/) folder. In order to run the tests do: - -```sh -pnpm test -``` - -## Maintainers - -React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us: - -- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) -- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) - -You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs). - -## Community Packages - -- [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example -- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes -- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow - -## Credits - -React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in the browser. Under the hood, React Flow depends on these great libraries: - -- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas -- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable -- [zustand](https://github.com/pmndrs/zustand) - internal state management - -## License - -React Flow is [MIT licensed](https://github.com/wbkd/react-flow/blob/main/LICENSE). diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json deleted file mode 100644 index 1c3b47eb..00000000 --- a/packages/reactflow/package.json +++ /dev/null @@ -1,68 +0,0 @@ -{ - "name": "reactflow", - "version": "11.7.2", - "description": "A highly customizable React library for building node-based editors and interactive flow charts", - "keywords": [ - "react", - "node-based UI", - "graph", - "diagram", - "workflow", - "react-flow" - ], - "files": [ - "dist" - ], - "source": "src/index.ts", - "main": "dist/umd/index.js", - "module": "dist/esm/index.js", - "types": "dist/esm/index.d.ts", - "sideEffects": [ - "*.css" - ], - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/wbkd/react-flow.git", - "directory": "packages/reactflow" - }, - "scripts": { - "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch", - "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css", - "css": "postcss src/*.css --config ../../tooling/postcss-config/postcss.config.js --dir dist", - "css-watch": "pnpm css --watch", - "lint": "eslint --ext .js,.jsx,.ts,.tsx src", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@reactflow/background": "workspace:*", - "@reactflow/controls": "workspace:*", - "@reactflow/core": "workspace:*", - "@reactflow/minimap": "workspace:*", - "@reactflow/node-resizer": "workspace:*", - "@reactflow/node-toolbar": "workspace:*" - }, - "peerDependencies": { - "react": ">=17", - "react-dom": ">=17" - }, - "devDependencies": { - "@reactflow/eslint-config": "workspace:*", - "@reactflow/rollup-config": "workspace:*", - "@reactflow/tsconfig": "workspace:*", - "@types/node": "^18.7.16", - "@types/react": ">=17", - "react": "^18.2.0", - "typescript": "^4.9.4" - }, - "rollup": { - "globals": { - "@reactflow/background": "ReactFlowBackground", - "@reactflow/controls": "ReactFlowControls", - "@reactflow/core": "ReactFlowCore", - "@reactflow/minimap": "ReactFlowMinimap", - "@reactflow/node-toolbar": "ReactFlowNodeToolbar" - }, - "name": "ReactFlow" - } -} diff --git a/packages/reactflow/src/base.css b/packages/reactflow/src/base.css deleted file mode 100644 index 9c7489c9..00000000 --- a/packages/reactflow/src/base.css +++ /dev/null @@ -1,4 +0,0 @@ -@import '@reactflow/core/dist/base.css'; -@import '@reactflow/controls/dist/style.css'; -@import '@reactflow/minimap/dist/style.css'; -@import '@reactflow/node-resizer/dist/style.css'; diff --git a/packages/reactflow/src/index.ts b/packages/reactflow/src/index.ts deleted file mode 100644 index 9fefe1d5..00000000 --- a/packages/reactflow/src/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export * from '@reactflow/core'; -export * from '@reactflow/minimap'; -export * from '@reactflow/controls'; -export * from '@reactflow/background'; -export * from '@reactflow/node-toolbar'; -export * from '@reactflow/node-resizer'; - -export { ReactFlow as default } from '@reactflow/core'; diff --git a/packages/reactflow/src/style.css b/packages/reactflow/src/style.css deleted file mode 100644 index 38e265b7..00000000 --- a/packages/reactflow/src/style.css +++ /dev/null @@ -1,4 +0,0 @@ -@import '@reactflow/core/dist/style.css'; -@import '@reactflow/controls/dist/style.css'; -@import '@reactflow/minimap/dist/style.css'; -@import '@reactflow/node-resizer/dist/style.css'; diff --git a/packages/svelte/package.json b/packages/svelte/package.json index aa9f3d45..f1bc9779 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,5 +1,5 @@ { - "name": "svelteflow", + "name": "@xyflow/svelte", "version": "0.0.1", "scripts": { "dev": "vite dev", @@ -17,13 +17,11 @@ ".": "./package/index.js" }, "dependencies": { - "@reactflow/edge-utils": "workspace:*", - "@reactflow/system": "workspace:*", - "@reactflow/utils": "workspace:*", "@svelte-put/shortcut": "^2.0.0", "@types/d3-drag": "^3.0.1", "@types/d3-selection": "^3.0.3", "@types/d3-zoom": "^3.0.1", + "@xyflow/system": "workspace:*", "classcat": "^5.0.4", "d3-drag": "^3.0.0", "d3-selection": "^3.0.0", diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts index 0dd06d25..d0db3da7 100644 --- a/packages/svelte/src/lib/actions/drag/index.ts +++ b/packages/svelte/src/lib/actions/drag/index.ts @@ -1,5 +1,5 @@ import { get } from 'svelte/store'; -import { XYDrag } from '@reactflow/utils'; +import { XYDrag } from '@xyflow/system'; import type { SvelteFlowStore } from '$lib/store/types'; diff --git a/packages/svelte/src/lib/actions/zoom/index.ts b/packages/svelte/src/lib/actions/zoom/index.ts index ebd1f9bb..e553008e 100644 --- a/packages/svelte/src/lib/actions/zoom/index.ts +++ b/packages/svelte/src/lib/actions/zoom/index.ts @@ -6,8 +6,8 @@ import type { PanZoomInstance, Transform, Viewport -} from '@reactflow/system'; -import { XYPanZoom } from '@reactflow/utils'; +} from '@xyflow/system'; +import { XYPanZoom } from '@xyflow/system'; type ZoomParams = { transform: Writable; @@ -33,6 +33,7 @@ type ZoomParams = { noPanClassName: string; noWheelClassName: string; userSelectionActive: boolean; + lib: string; }; export default function zoom(domNode: Element, params: ZoomParams) { diff --git a/packages/svelte/src/lib/components/Attribution/types.ts b/packages/svelte/src/lib/components/Attribution/types.ts index 4a6052b4..e3cff681 100644 --- a/packages/svelte/src/lib/components/Attribution/types.ts +++ b/packages/svelte/src/lib/components/Attribution/types.ts @@ -1,4 +1,4 @@ -import type { PanelPosition, ProOptions } from '@reactflow/system'; +import type { PanelPosition, ProOptions } from '@xyflow/system'; export type AttributionProps = { proOptions?: ProOptions; diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index 957910b5..05835b06 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -1,7 +1,7 @@