diff --git a/packages/core/example/.gitignore b/examples/demo/.gitignore similarity index 100% rename from packages/core/example/.gitignore rename to examples/demo/.gitignore diff --git a/packages/core/example/README.md b/examples/demo/README.md similarity index 100% rename from packages/core/example/README.md rename to examples/demo/README.md diff --git a/packages/core/example/package-lock.json b/examples/demo/package-lock.json similarity index 100% rename from packages/core/example/package-lock.json rename to examples/demo/package-lock.json diff --git a/packages/core/example/package.json b/examples/demo/package.json similarity index 75% rename from packages/core/example/package.json rename to examples/demo/package.json index dbe87643..afaabee2 100644 --- a/packages/core/example/package.json +++ b/examples/demo/package.json @@ -3,11 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { + "@react-flow/core": "11.0.0", "dagre": "^0.8.5", "localforage": "^1.10.0", - "react": "file:../node_modules/react", - "react-dom": "file:../node_modules/react-dom", - "react-flow-renderer": "file:../", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "typescript": "^4.7.4" @@ -36,8 +36,7 @@ "devDependencies": { "@types/dagre": "^0.7.47", "@types/localforage": "0.0.34", - "@types/react": "file:../node_modules/@types/react", - "@types/react-dom": "file:../node_modules/@types/react-dom", + "@types/react-dom": "^18.0.6", "@types/react-router-dom": "^5.3.3" } } diff --git a/packages/core/example/public/_redirects b/examples/demo/public/_redirects similarity index 100% rename from packages/core/example/public/_redirects rename to examples/demo/public/_redirects diff --git a/packages/core/example/public/index.html b/examples/demo/public/index.html similarity index 100% rename from packages/core/example/public/index.html rename to examples/demo/public/index.html diff --git a/packages/core/example/public/robots.txt b/examples/demo/public/robots.txt similarity index 100% rename from packages/core/example/public/robots.txt rename to examples/demo/public/robots.txt diff --git a/packages/core/example/src/Basic/index.tsx b/examples/demo/src/Basic/index.tsx similarity index 77% rename from packages/core/example/src/Basic/index.tsx rename to examples/demo/src/Basic/index.tsx index 74d0f69b..52539588 100644 --- a/packages/core/example/src/Basic/index.tsx +++ b/examples/demo/src/Basic/index.tsx @@ -7,17 +7,39 @@ import ReactFlow, { Node, Edge, useReactFlow, -} from 'react-flow-renderer'; +} from '@react-flow/core'; const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); +const onNodeDragStop = (_: MouseEvent, node: Node) => + console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); const initialNodes: Node[] = [ - { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' }, - { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' }, - { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' }, - { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' }, + { + id: '1', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + className: 'light', + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + className: 'light', + }, + { + id: '4', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + className: 'light', + }, ]; const initialEdges: Edge[] = [ @@ -63,7 +85,7 @@ const BasicFlow = () => { onNodeClick={onNodeClick} onNodeDragStop={onNodeDragStop} onNodeDrag={onNodeDrag} - className="react-flow-basic-example" + className='react-flow-basic-example' minZoom={0.2} maxZoom={4} fitView diff --git a/packages/core/example/src/ControlledUncontrolled/index.tsx b/examples/demo/src/ControlledUncontrolled/index.tsx similarity index 82% rename from packages/core/example/src/ControlledUncontrolled/index.tsx rename to examples/demo/src/ControlledUncontrolled/index.tsx index 75a6b87c..ce5c8fa8 100644 --- a/packages/core/example/src/ControlledUncontrolled/index.tsx +++ b/examples/demo/src/ControlledUncontrolled/index.tsx @@ -7,13 +7,34 @@ import ReactFlow, { ReactFlowProvider, useNodesState, useEdgesState, -} from 'react-flow-renderer'; +} from '@react-flow/core'; const defaultNodes: Node[] = [ - { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' }, - { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' }, - { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' }, - { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' }, + { + id: '1', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + className: 'light', + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + className: 'light', + }, + { + id: '4', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + className: 'light', + }, ]; const defaultEdges: Edge[] = [ diff --git a/examples/demo/src/CustomConnectionLine/ConnectionLine.tsx b/examples/demo/src/CustomConnectionLine/ConnectionLine.tsx new file mode 100644 index 00000000..42d8c99f --- /dev/null +++ b/examples/demo/src/CustomConnectionLine/ConnectionLine.tsx @@ -0,0 +1,31 @@ +import React, { FC } from 'react'; +import { ConnectionLineComponentProps } from '@react-flow/core'; + +const ConnectionLine: FC = ({ + sourceX, + sourceY, + targetX, + targetY, +}) => { + return ( + + + + + ); +}; + +export default ConnectionLine; diff --git a/packages/core/example/src/CustomConnectionLine/index.tsx b/examples/demo/src/CustomConnectionLine/index.tsx similarity index 71% rename from packages/core/example/src/CustomConnectionLine/index.tsx rename to examples/demo/src/CustomConnectionLine/index.tsx index 70c754f8..65d37a0f 100644 --- a/packages/core/example/src/CustomConnectionLine/index.tsx +++ b/examples/demo/src/CustomConnectionLine/index.tsx @@ -8,17 +8,27 @@ import ReactFlow, { Edge, useNodesState, useEdgesState, -} from 'react-flow-renderer'; +} from '@react-flow/core'; import ConnectionLine from './ConnectionLine'; -const initialNodes: Node[] = [{ id: '1', type: 'default', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }]; +const initialNodes: Node[] = [ + { + id: '1', + type: 'default', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + }, +]; const initialEdges: Edge[] = []; const ConnectionLineFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]); + const onConnect = useCallback( + (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), + [setEdges] + ); return ( + console.log('handle onConnect', params); + +const ColorSelectorNode: FC = ({ data, isConnectable }) => { + return ( + <> + +
+ Custom Color Picker Node: {data.color} +
+ + { + console.log('You trigger mousedown event', e); + }} + /> + + + ); +}; + +export default memo(ColorSelectorNode); diff --git a/packages/core/example/src/CustomNode/index.tsx b/examples/demo/src/CustomNode/index.tsx similarity index 81% rename from packages/core/example/src/CustomNode/index.tsx rename to examples/demo/src/CustomNode/index.tsx index 8169dc52..0b1427d8 100644 --- a/packages/core/example/src/CustomNode/index.tsx +++ b/examples/demo/src/CustomNode/index.tsx @@ -12,7 +12,7 @@ import ReactFlow, { Connection, useNodesState, useEdgesState, -} from 'react-flow-renderer'; +} from '@react-flow/core'; import ColorSelectorNode from './ColorSelectorNode'; @@ -20,7 +20,8 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); reactFlowInstance.fitView(); }; -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); +const onNodeDragStop = (_: MouseEvent, node: Node) => + console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); const initBgColor = '#1A192B'; @@ -93,14 +94,36 @@ const CustomNodeFlow = () => { ]); setEdges([ - { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } }, - { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } }, - { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }, + { + id: 'e1-2', + source: '1', + target: '2', + animated: true, + style: { stroke: '#fff' }, + }, + { + id: 'e2a-3', + source: '2', + sourceHandle: 'a', + target: '3', + animated: true, + style: { stroke: '#fff' }, + }, + { + id: 'e2b-4', + source: '2', + sourceHandle: 'b', + target: '4', + animated: true, + style: { stroke: '#fff' }, + }, ]); }, []); const onConnect = (connection: Connection) => - setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)); + setEdges((eds) => + addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds) + ); return ( { }; return ( - +
diff --git a/packages/core/example/src/DragHandle/DragHandleNode.tsx b/examples/demo/src/DragHandle/DragHandleNode.tsx similarity index 51% rename from packages/core/example/src/DragHandle/DragHandleNode.tsx rename to examples/demo/src/DragHandle/DragHandleNode.tsx index 377e45de..be05277a 100644 --- a/packages/core/example/src/DragHandle/DragHandleNode.tsx +++ b/examples/demo/src/DragHandle/DragHandleNode.tsx @@ -1,8 +1,15 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer'; +import { + Handle, + Position, + NodeProps, + Connection, + Edge, +} from '@react-flow/core'; -const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params); +const onConnect = (params: Connection | Edge) => + console.log('handle onConnect', params); const labelStyle = { display: 'flex', @@ -21,11 +28,12 @@ const dragHandleStyle = { const ColorSelectorNode: FC = () => { return ( <> - +
- Only draggable here → + Only draggable here →{' '} +
- + ); }; diff --git a/packages/core/example/src/DragHandle/index.tsx b/examples/demo/src/DragHandle/index.tsx similarity index 89% rename from packages/core/example/src/DragHandle/index.tsx rename to examples/demo/src/DragHandle/index.tsx index caade7e8..0b6c0f91 100644 --- a/packages/core/example/src/DragHandle/index.tsx +++ b/examples/demo/src/DragHandle/index.tsx @@ -1,5 +1,10 @@ import { MouseEvent } from 'react'; -import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer'; +import ReactFlow, { + Node, + Edge, + useNodesState, + useEdgesState, +} from '@react-flow/core'; import DragHandleNode from './DragHandleNode'; diff --git a/packages/core/example/src/DragNDrop/Sidebar.tsx b/examples/demo/src/DragNDrop/Sidebar.tsx similarity index 100% rename from packages/core/example/src/DragNDrop/Sidebar.tsx rename to examples/demo/src/DragNDrop/Sidebar.tsx diff --git a/packages/core/example/src/DragNDrop/dnd.css b/examples/demo/src/DragNDrop/dnd.css similarity index 100% rename from packages/core/example/src/DragNDrop/dnd.css rename to examples/demo/src/DragNDrop/dnd.css diff --git a/packages/core/example/src/DragNDrop/index.tsx b/examples/demo/src/DragNDrop/index.tsx similarity index 73% rename from packages/core/example/src/DragNDrop/index.tsx rename to examples/demo/src/DragNDrop/index.tsx index 1c8f9ddb..0ec97f2a 100644 --- a/packages/core/example/src/DragNDrop/index.tsx +++ b/examples/demo/src/DragNDrop/index.tsx @@ -9,13 +9,20 @@ import ReactFlow, { Node, useNodesState, useEdgesState, -} from 'react-flow-renderer'; +} from '@react-flow/core'; import Sidebar from './Sidebar'; import './dnd.css'; -const initialNodes: Node[] = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }]; +const initialNodes: Node[] = [ + { + id: '1', + type: 'input', + data: { label: 'input node' }, + position: { x: 250, y: 5 }, + }, +]; const onDragOver = (event: DragEvent) => { event.preventDefault(); @@ -26,11 +33,13 @@ let id = 0; const getId = () => `dndnode_${id++}`; const DnDFlow = () => { - const [reactFlowInstance, setReactFlowInstance] = useState(); + const [reactFlowInstance, setReactFlowInstance] = + useState(); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); - const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); + const onConnect = (params: Connection | Edge) => + setEdges((eds) => addEdge(params, eds)); const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi); const onDrop = (event: DragEvent) => { @@ -38,7 +47,10 @@ const DnDFlow = () => { if (reactFlowInstance) { const type = event.dataTransfer.getData('application/reactflow'); - const position = reactFlowInstance.project({ x: event.clientX, y: event.clientY - 40 }); + const position = reactFlowInstance.project({ + x: event.clientX, + y: event.clientY - 40, + }); const newNode: Node = { id: getId(), type, @@ -51,9 +63,9 @@ const DnDFlow = () => { }; return ( -
+
-
+
{ @@ -28,7 +28,8 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace']; const EdgeTypesFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); + const onConnect = (params: Connection | Edge) => + setEdges((eds) => addEdge(params, eds)); return ( { onConnect={onConnect} minZoom={0.2} zoomOnScroll={false} - selectionKeyCode="a+s" + selectionKeyCode='a+s' multiSelectionKeyCode={multiSelectionKeyCode} deleteKeyCode={deleteKeyCode} - zoomActivationKeyCode="z" + zoomActivationKeyCode='z' > diff --git a/packages/core/example/src/EdgeTypes/utils.ts b/examples/demo/src/EdgeTypes/utils.ts similarity index 86% rename from packages/core/example/src/EdgeTypes/utils.ts rename to examples/demo/src/EdgeTypes/utils.ts index b4eedab5..bb4dc6ad 100644 --- a/packages/core/example/src/EdgeTypes/utils.ts +++ b/examples/demo/src/EdgeTypes/utils.ts @@ -1,4 +1,4 @@ -import { Edge, Node, Position } from 'react-flow-renderer'; +import { Edge, Node, Position } from '@react-flow/core'; const nodeWidth = 80; const nodeGapWidth = nodeWidth * 2; @@ -54,16 +54,27 @@ const getNodeId = (): string => (id++).toString(); export function getElements(): { nodes: Node[]; edges: Edge[] } { const initialElements = { nodes: [] as Node[], edges: [] as Edge[] }; - for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) { + for ( + let sourceTargetIndex = 0; + sourceTargetIndex < sourceTargetPositions.length; + sourceTargetIndex++ + ) { const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex]; - for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) { + for ( + let edgeTypeIndex = 0; + edgeTypeIndex < edgeTypes.length; + edgeTypeIndex++ + ) { const currEdgeType = edgeTypes[edgeTypeIndex]; for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) { const currOffset = offsets[offsetIndex]; - const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] }; + const style = { + ...nodeStyle, + background: nodeColors[sourceTargetIndex][edgeTypeIndex], + }; const sourcePosition = { x: offsetIndex * nodeWidth * 4, y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300, diff --git a/examples/demo/src/Edges/CustomEdge.tsx b/examples/demo/src/Edges/CustomEdge.tsx new file mode 100644 index 00000000..8265008e --- /dev/null +++ b/examples/demo/src/Edges/CustomEdge.tsx @@ -0,0 +1,40 @@ +import { FC } from 'react'; +import { EdgeProps, getBezierPath } from '@react-flow/core'; + +const CustomEdge: FC = ({ + id, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + data, +}) => { + const edgePath = getBezierPath({ + sourceX, + sourceY, + sourcePosition, + targetX, + targetY, + targetPosition, + }); + + return ( + <> + + + + {data.text} + + + + ); +}; + +export default CustomEdge; diff --git a/packages/core/example/src/Edges/CustomEdge2.tsx b/examples/demo/src/Edges/CustomEdge2.tsx similarity index 68% rename from packages/core/example/src/Edges/CustomEdge2.tsx rename to examples/demo/src/Edges/CustomEdge2.tsx index f5f7e68d..b38bf0f6 100644 --- a/packages/core/example/src/Edges/CustomEdge2.tsx +++ b/examples/demo/src/Edges/CustomEdge2.tsx @@ -1,5 +1,10 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from 'react-flow-renderer'; +import { + EdgeProps, + getBezierPath, + EdgeText, + getBezierEdgeCenter, +} from '@react-flow/core'; const CustomEdge: FC = ({ id, @@ -11,7 +16,14 @@ const CustomEdge: FC = ({ targetPosition, data, }) => { - const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }); + const edgePath = getBezierPath({ + sourceX, + sourceY, + sourcePosition, + targetX, + targetY, + targetPosition, + }); const [centerX, centerY] = getBezierEdgeCenter({ sourceX, sourceY, @@ -21,7 +33,7 @@ const CustomEdge: FC = ({ return ( <> - + reactFlowInstance.fitView(); -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); +const onInit = (reactFlowInstance: ReactFlowInstance) => + reactFlowInstance.fitView(); +const onNodeDragStop = (_: MouseEvent, node: Node) => + console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge); -const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge); -const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge); -const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge); -const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge); +const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => + console.log('dblclick', edge); +const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => + console.log('enter', edge); +const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => + console.log('move', edge); +const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => + console.log('leave', edge); const initialNodes: Node[] = [ - { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } }, + { + id: '1', + type: 'input', + data: { label: 'Input 1' }, + position: { x: 250, y: 0 }, + }, { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } }, { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } }, { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } }, @@ -34,15 +45,47 @@ const initialNodes: Node[] = [ { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } }, { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } }, { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } }, - { id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } }, - { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } }, - { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } }, - { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } }, + { + id: '6', + type: 'output', + data: { label: 'Output 6' }, + position: { x: 50, y: 550 }, + }, + { + id: '7', + type: 'output', + data: { label: 'Output 7' }, + position: { x: 250, y: 550 }, + }, + { + id: '8', + type: 'output', + data: { label: 'Output 8' }, + position: { x: 525, y: 600 }, + }, + { + id: '9', + type: 'output', + data: { label: 'Output 9' }, + position: { x: 675, y: 500 }, + }, ]; const initialEdges: Edge[] = [ - { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' }, - { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' }, + { + id: 'e1-2', + source: '1', + target: '2', + label: 'bezier edge (default)', + className: 'normal-edge', + }, + { + id: 'e2-2a', + source: '2', + target: '2a', + type: 'smoothstep', + label: 'smoothstep edge', + }, { id: 'e2a-2b', source: '2a', @@ -51,9 +94,29 @@ const initialEdges: Edge[] = [ label: 'simple bezier edge', }, { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' }, - { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' }, - { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } }, - { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } }, + { + id: 'e3-4', + source: '3', + target: '4', + type: 'straight', + label: 'straight edge', + }, + { + id: 'e3-3a', + source: '3', + target: '3a', + type: 'straight', + label: 'label only edge', + style: { stroke: 'none' }, + }, + { + id: 'e3-5', + source: '4', + target: '5', + animated: true, + label: 'animated styled edge', + style: { stroke: 'red' }, + }, { id: 'e5-7', source: '5', @@ -121,7 +184,8 @@ const edgeTypes: EdgeTypes = { const EdgesFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); + const onConnect = (params: Connection | Edge) => + setEdges((eds) => addEdge(params, eds)); return ( console.log('flow loaded:', reactFlowInstance); +const onInit = (reactFlowInstance: ReactFlowInstance) => + console.log('flow loaded:', reactFlowInstance); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); +const onNodeDragStop = (_: MouseEvent, node: Node) => + console.log('drag stop', node); -const buttonStyle: CSSProperties = { position: 'absolute', left: 10, top: 10, zIndex: 4 }; +const buttonStyle: CSSProperties = { + position: 'absolute', + left: 10, + top: 10, + zIndex: 4, +}; const EmptyFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); - const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els)); + const onConnect = (params: Connection | Edge) => + setEdges((els) => addEdge(params, els)); const addRandomNode = () => { const nodeId = (nodes.length + 1).toString(); const newNode: Node = { id: nodeId, data: { label: `Node: ${nodeId}` }, - position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }, + position: { + x: Math.random() * window.innerWidth, + y: Math.random() * window.innerHeight, + }, }; setNodes((nds) => nds.concat(newNode)); }; @@ -49,7 +60,7 @@ const EmptyFlow = () => { - diff --git a/packages/core/example/src/FloatingEdges/FloatingConnectionLine.tsx b/examples/demo/src/FloatingEdges/FloatingConnectionLine.tsx similarity index 64% rename from packages/core/example/src/FloatingEdges/FloatingConnectionLine.tsx rename to examples/demo/src/FloatingEdges/FloatingConnectionLine.tsx index ef202589..e9c94b0b 100644 --- a/packages/core/example/src/FloatingEdges/FloatingConnectionLine.tsx +++ b/examples/demo/src/FloatingEdges/FloatingConnectionLine.tsx @@ -1,5 +1,9 @@ import { FC } from 'react'; -import { getBezierPath, ConnectionLineComponentProps, Node } from 'react-flow-renderer'; +import { + getBezierPath, + ConnectionLineComponentProps, + Node, +} from '@react-flow/core'; import { getEdgeParams } from './utils'; @@ -33,8 +37,21 @@ const FloatingConnectionLine: FC = ({ return ( - - + + ); }; diff --git a/packages/core/example/src/FloatingEdges/FloatingEdge.tsx b/examples/demo/src/FloatingEdges/FloatingEdge.tsx similarity index 55% rename from packages/core/example/src/FloatingEdges/FloatingEdge.tsx rename to examples/demo/src/FloatingEdges/FloatingEdge.tsx index 1812ee2b..8d33c053 100644 --- a/packages/core/example/src/FloatingEdges/FloatingEdge.tsx +++ b/examples/demo/src/FloatingEdges/FloatingEdge.tsx @@ -1,5 +1,10 @@ import { FC, useMemo, CSSProperties } from 'react'; -import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'react-flow-renderer'; +import { + EdgeProps, + useStore, + getBezierPath, + ReactFlowState, +} from '@react-flow/core'; import { getEdgeParams } from './utils'; @@ -8,14 +13,23 @@ const nodeSelector = (s: ReactFlowState) => s.nodeInternals; const FloatingEdge: FC = ({ id, source, target, style }) => { const nodeInternals = useStore(nodeSelector); - const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]); - const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]); + const sourceNode = useMemo( + () => nodeInternals.get(source), + [source, nodeInternals] + ); + const targetNode = useMemo( + () => nodeInternals.get(target), + [target, nodeInternals] + ); if (!sourceNode || !targetNode) { return null; } - const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode); + const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams( + sourceNode, + targetNode + ); const d = getBezierPath({ sourceX: sx, @@ -27,8 +41,13 @@ const FloatingEdge: FC = ({ id, source, target, style }) => { }); return ( - - + + ); }; diff --git a/packages/core/example/src/FloatingEdges/index.tsx b/examples/demo/src/FloatingEdges/index.tsx similarity index 88% rename from packages/core/example/src/FloatingEdges/index.tsx rename to examples/demo/src/FloatingEdges/index.tsx index 5a5fddbf..72a31bc3 100644 --- a/packages/core/example/src/FloatingEdges/index.tsx +++ b/examples/demo/src/FloatingEdges/index.tsx @@ -8,7 +8,7 @@ import ReactFlow, { Connection, useNodesState, useEdgesState, -} from 'react-flow-renderer'; +} from '@react-flow/core'; import './style.css'; @@ -16,7 +16,8 @@ import FloatingEdge from './FloatingEdge'; import FloatingConnectionLine from './FloatingConnectionLine'; import { createElements } from './utils'; -const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView(); +const onInit = (reactFlowInstance: ReactFlowInstance) => + reactFlowInstance.fitView(); const { nodes: initialNodes, edges: initialEdges } = createElements(); @@ -33,7 +34,7 @@ const FloatingEdges = () => { }, []); return ( -
+