diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 65430d75..bafc5537 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -3,18 +3,15 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "yarn run copystyles && next dev", - "copystyles": "cp ../../packages/core/src/styles/theme-default.css ./styles/theme-default.css", + "dev": "next dev", + "copystyles": "cp ../../node_modules/@react-flow/renderer/dist/style.css ./styles/rf-style.css", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@preconstruct/next": "^4.0.0", - "@react-flow/background": "11.0.0", - "@react-flow/controls": "11.0.0", - "@react-flow/core": "11.0.0", - "@react-flow/minimap": "11.0.0", + "@react-flow/bundle": "11.0.0", "dagre": "^0.8.5", "localforage": "^1.10.0", "next": "12.2.2", @@ -27,6 +24,7 @@ "eslint-config-next": "12.2.2", "postcss": "^8.4.16", "postcss-flexbugs-fixes": "^5.0.2", + "postcss-import": "^14.1.0", "postcss-nested": "^5.0.6", "postcss-preset-env": "^7.7.2" } diff --git a/examples/nextjs/pages/Backgrounds/index.tsx b/examples/nextjs/pages/Backgrounds/index.tsx index 9af3cbde..fa3eaec6 100644 --- a/examples/nextjs/pages/Backgrounds/index.tsx +++ b/examples/nextjs/pages/Backgrounds/index.tsx @@ -5,13 +5,10 @@ import { Node, ReactFlowProvider, useNodesState, -} from '@react-flow/core'; - -import { Background, BackgroundProps, BackgroundVariant, -} from '@react-flow/background'; +} from '@react-flow/bundle'; import styles from './style.module.css'; @@ -23,10 +20,7 @@ const initialNodes: Node[] = [ }, ]; -const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ - id, - bgProps, -}) => { +const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => { const [nodes, , onNodesChange] = useNodesState(initialNodes); return ( @@ -41,14 +35,8 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ const Backgrounds: FC = () => (
- - + +
); diff --git a/examples/nextjs/pages/ControlledUncontrolled/index.tsx b/examples/nextjs/pages/ControlledUncontrolled/index.tsx index 1f3871ad..37b68d3f 100644 --- a/examples/nextjs/pages/ControlledUncontrolled/index.tsx +++ b/examples/nextjs/pages/ControlledUncontrolled/index.tsx @@ -7,8 +7,9 @@ import { ReactFlowProvider, useNodesState, useEdgesState, -} from '@react-flow/core'; -import { Background, BackgroundVariant } from '@react-flow/background'; + Background, + BackgroundVariant, +} from '@react-flow/bunde'; const defaultNodes: Node[] = [ { diff --git a/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx b/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx index fb14ef1a..8a552f44 100644 --- a/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx +++ b/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx @@ -1,12 +1,7 @@ import React, { FC } from 'react'; -import { ConnectionLineComponentProps } from '@react-flow/core'; +import { ConnectionLineComponentProps } from '@react-flow/bundle'; -const ConnectionLine: FC = ({ - fromX, - fromY, - toX, - toY, -}) => { +const ConnectionLine: FC = ({ fromX, fromY, toX, toY }) => { return ( = ({ className="animated" d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`} /> - + ); }; diff --git a/examples/nextjs/pages/CustomConnectionLine/index.tsx b/examples/nextjs/pages/CustomConnectionLine/index.tsx index aa430f2f..360aa6d4 100644 --- a/examples/nextjs/pages/CustomConnectionLine/index.tsx +++ b/examples/nextjs/pages/CustomConnectionLine/index.tsx @@ -7,8 +7,9 @@ import { Edge, useNodesState, useEdgesState, -} from '@react-flow/core'; -import { Background, BackgroundVariant } from '@react-flow/background'; + Background, + BackgroundVariant, +} from '@react-flow/bundle'; import ConnectionLine from './ConnectionLine'; @@ -25,10 +26,7 @@ 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 onConnect = (params: Connection | Edge) => console.log('handle onConnect', params); const ColorSelectorNode: FC = ({ data, isConnectable }) => { return ( <> - +
Custom Color Picker Node: {data.color}
- + = ({ data, isConnectable }) => { console.log('You trigger mousedown event', e); }} /> - + ); }; diff --git a/examples/nextjs/pages/CustomNode/index.tsx b/examples/nextjs/pages/CustomNode/index.tsx index 43bfaedf..84e7894f 100644 --- a/examples/nextjs/pages/CustomNode/index.tsx +++ b/examples/nextjs/pages/CustomNode/index.tsx @@ -11,7 +11,7 @@ import { Connection, useNodesState, useEdgesState, -} from '@react-flow/renderer'; +} from '@react-flow/bundle'; import ColorSelectorNode from './ColorSelectorNode'; @@ -120,9 +120,7 @@ const CustomNodeFlow = () => { }, []); 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/examples/nextjs/pages/DragHandle/DragHandleNode.tsx b/examples/nextjs/pages/DragHandle/DragHandleNode.tsx index 716ab781..5343f437 100644 --- a/examples/nextjs/pages/DragHandle/DragHandleNode.tsx +++ b/examples/nextjs/pages/DragHandle/DragHandleNode.tsx @@ -1,15 +1,8 @@ import React, { memo, FC } from 'react'; -import { - Handle, - Position, - NodeProps, - Connection, - Edge, -} from '@react-flow/core'; +import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle'; -const onConnect = (params: Connection | Edge) => - console.log('handle onConnect', params); +const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params); const labelStyle = { display: 'flex', @@ -28,12 +21,11 @@ const dragHandleStyle = { const ColorSelectorNode: FC = () => { return ( <> - +
- Only draggable here →{' '} - + Only draggable here →
- + ); }; diff --git a/examples/nextjs/pages/DragNDrop/index.tsx b/examples/nextjs/pages/DragNDrop/index.tsx index cd9b4b89..b1b6a048 100644 --- a/examples/nextjs/pages/DragNDrop/index.tsx +++ b/examples/nextjs/pages/DragNDrop/index.tsx @@ -9,8 +9,8 @@ import { Node, useNodesState, useEdgesState, -} from '@react-flow/core'; -import { Controls } from '@react-flow/controls'; + Controls, +} from '@react-flow/bundle'; import Sidebar from './Sidebar'; @@ -34,13 +34,11 @@ 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) => { diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx index 5f020ca4..2877239a 100644 --- a/examples/nextjs/pages/EdgeTypes/index.tsx +++ b/examples/nextjs/pages/EdgeTypes/index.tsx @@ -14,7 +14,7 @@ import { Edge, useNodesState, useEdgesState, -} from '@react-flow/renderer'; +} from '@react-flow/bundle'; import { getElements } from './utils'; @@ -31,8 +31,7 @@ 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 ( (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++) { diff --git a/examples/nextjs/pages/Edges/CustomEdge.tsx b/examples/nextjs/pages/Edges/CustomEdge.tsx index e2ec0cb5..a51c86af 100644 --- a/examples/nextjs/pages/Edges/CustomEdge.tsx +++ b/examples/nextjs/pages/Edges/CustomEdge.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { EdgeProps, getBezierPath } from '@react-flow/core'; +import { EdgeProps, getBezierPath } from '@react-flow/bundle'; const CustomEdge: FC = ({ id, @@ -22,14 +22,9 @@ const CustomEdge: FC = ({ return ( <> - + - + {data.text} diff --git a/examples/nextjs/pages/Edges/CustomEdge2.tsx b/examples/nextjs/pages/Edges/CustomEdge2.tsx index cd1f810a..cb446f07 100644 --- a/examples/nextjs/pages/Edges/CustomEdge2.tsx +++ b/examples/nextjs/pages/Edges/CustomEdge2.tsx @@ -1,10 +1,5 @@ import React, { FC } from 'react'; -import { - EdgeProps, - getBezierPath, - EdgeText, - getBezierEdgeCenter, -} from '@react-flow/core'; +import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from '@react-flow/bundle'; const CustomEdge: FC = ({ id, @@ -33,7 +28,7 @@ const CustomEdge: FC = ({ return ( <> - + - 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 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[] = [ { @@ -189,10 +184,7 @@ const defaultViewport = { const EdgesFlow = () => { 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('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', @@ -31,10 +29,7 @@ const EmptyFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); - const onConnect = useCallback( - (params: Connection | Edge) => setEdges((els) => addEdge(params, els)), - [setEdges] - ); + const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]); const addRandomNode = () => { const nodeId = (nodes.length + 1).toString(); const newNode: Node = { diff --git a/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx b/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx index 3bd4d562..1930bf73 100644 --- a/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx +++ b/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx @@ -1,9 +1,5 @@ import React, { FC } from 'react'; -import { - getBezierPath, - ConnectionLineComponentProps, - Node, -} from '@react-flow/core'; +import { getBezierPath, ConnectionLineComponentProps, Node } from '@react-flow/bundle'; import { getEdgeParams } from './utils'; @@ -37,21 +33,8 @@ const FloatingConnectionLine: FC = ({ return ( - - + + ); }; diff --git a/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx b/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx index e0a3a432..1187d70c 100644 --- a/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx +++ b/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx @@ -1,10 +1,5 @@ import React, { FC, useMemo, CSSProperties } from 'react'; -import { - EdgeProps, - useStore, - getBezierPath, - ReactFlowState, -} from '@react-flow/core'; +import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@react-flow/bundle'; import { getEdgeParams } from './utils'; @@ -13,23 +8,14 @@ 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, @@ -41,13 +27,8 @@ const FloatingEdge: FC = ({ id, source, target, style }) => { }); return ( - - + + ); }; diff --git a/examples/nextjs/pages/FloatingEdges/index.tsx b/examples/nextjs/pages/FloatingEdges/index.tsx index d24b7ca0..11f7ae38 100644 --- a/examples/nextjs/pages/FloatingEdges/index.tsx +++ b/examples/nextjs/pages/FloatingEdges/index.tsx @@ -9,7 +9,7 @@ import { Connection, useNodesState, useEdgesState, -} from '@react-flow/renderer'; +} from '@react-flow/bundle'; import styles from './style.module.css'; @@ -17,8 +17,7 @@ import FloatingConnectionLine from './FloatingConnectionLine'; import FloatingEdge from './FloatingEdge'; import { createElements } from './utils'; -const onInit = (reactFlowInstance: ReactFlowInstance) => - reactFlowInstance.fitView(); +const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView(); const { nodes: initialNodes, edges: initialEdges } = typeof window !== 'undefined' ? createElements() : { nodes: [], edges: [] }; diff --git a/examples/nextjs/pages/FloatingEdges/utils.ts b/examples/nextjs/pages/FloatingEdges/utils.ts index 5e8f50b9..9f12d22a 100644 --- a/examples/nextjs/pages/FloatingEdges/utils.ts +++ b/examples/nextjs/pages/FloatingEdges/utils.ts @@ -1,11 +1,8 @@ -import React, { Position, XYPosition, Node, Edge } from '@react-flow/core'; +import { Position, XYPosition, Node, Edge } from '@react-flow/bundle'; // this helper function returns the intersection point // of the line between the center of the intersectionNode and the target node -function getNodeIntersection( - intersectionNode: Node, - targetNode: Node -): XYPosition { +function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition { // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a const { diff --git a/examples/nextjs/pages/Hidden/index.tsx b/examples/nextjs/pages/Hidden/index.tsx index 1e860359..c11b28ec 100644 --- a/examples/nextjs/pages/Hidden/index.tsx +++ b/examples/nextjs/pages/Hidden/index.tsx @@ -8,10 +8,9 @@ import { Node, useNodesState, useEdgesState, -} from '@react-flow/core'; - -import { Controls } from '@react-flow/controls'; -import { MiniMap } from '@react-flow/minimap'; + MiniMap, + Controls, +} from '@react-flow/bundle'; const initialNodes: Node[] = [ { diff --git a/examples/nextjs/pages/Interaction/index.tsx b/examples/nextjs/pages/Interaction/index.tsx index 26e12a73..efff90b6 100644 --- a/examples/nextjs/pages/Interaction/index.tsx +++ b/examples/nextjs/pages/Interaction/index.tsx @@ -1,8 +1,4 @@ -import React, { - useState, - MouseEvent as ReactMouseEvent, - WheelEvent, -} from 'react'; +import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; import { ReactFlow, addEdge, @@ -13,10 +9,9 @@ import { Viewport, useNodesState, useEdgesState, -} from '@react-flow/core'; - -import { Controls } from '@react-flow/controls'; -import { MiniMap } from '@react-flow/minimap'; + Controls, + MiniMap, +} from '@react-flow/bundle'; const initialNodes: Node[] = [ { @@ -35,27 +30,19 @@ const initialEdges: Edge[] = [ { id: 'e1-3', source: '1', target: '3' }, ]; -const onNodeDragStart = (_: ReactMouseEvent, node: Node) => - console.log('drag start', node); -const onNodeDragStop = (_: ReactMouseEvent, node: Node) => - console.log('drag stop', node); -const onNodeClick = (_: ReactMouseEvent, node: Node) => - console.log('click', node); -const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => - console.log('click', edge); -const onPaneClick = (event: ReactMouseEvent) => - console.log('onPaneClick', event); +const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node); +const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node); +const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node); +const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge); +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 onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event); +const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport); const InteractionFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const onConnect = (params: Connection | Edge) => - setEdges((els) => addEdge(params, els)); + const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els)); const [isSelectable, setIsSelectable] = useState(false); const [isDraggable, setIsDraggable] = useState(false); @@ -63,15 +50,12 @@ const InteractionFlow = () => { const [zoomOnScroll, setZoomOnScroll] = useState(false); const [zoomOnPinch, setZoomOnPinch] = useState(false); const [panOnScroll, setPanOnScroll] = useState(false); - const [panOnScrollMode, setPanOnScrollMode] = useState( - PanOnScrollMode.Free - ); + const [panOnScrollMode, setPanOnScrollMode] = useState(PanOnScrollMode.Free); const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false); const [panOnDrag, setPanOnDrag] = useState(true); const [captureZoomClick, setCaptureZoomClick] = useState(false); const [captureZoomScroll, setCaptureZoomScroll] = useState(false); - const [captureElementClick, setCaptureElementClick] = - useState(false); + const [captureElementClick, setCaptureElementClick] = useState(false); return ( { setNodeName(evt.target.value)} - /> + setNodeName(evt.target.value)} /> setNodeBg(evt.target.value)} />
- setNodeHidden(evt.target.checked)} - /> + setNodeHidden(evt.target.checked)} />
diff --git a/examples/nextjs/pages/UseKeyPress/index.tsx b/examples/nextjs/pages/UseKeyPress/index.tsx index f279a4bc..b61dad2e 100644 --- a/examples/nextjs/pages/UseKeyPress/index.tsx +++ b/examples/nextjs/pages/UseKeyPress/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useKeyPress } from '@react-flow/core'; +import { useKeyPress } from '@react-flow/bundle'; const UseKeyPressComponent = () => { const metaPressed = useKeyPress(['Meta']); diff --git a/examples/nextjs/pages/UseReactFlow/index.tsx b/examples/nextjs/pages/UseReactFlow/index.tsx index 0a7f6c0a..e60428d4 100644 --- a/examples/nextjs/pages/UseReactFlow/index.tsx +++ b/examples/nextjs/pages/UseReactFlow/index.tsx @@ -11,7 +11,7 @@ import { Edge, useNodesState, useEdgesState, -} from '@react-flow/renderer'; +} from '@react-flow/bundle'; const initialNodes: Node[] = [ { @@ -53,8 +53,7 @@ const getId = () => `${id++}`; const UseZoomPanHelperFlow = () => { const [nodes, setNodes, 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)); const { project, setCenter, @@ -117,10 +116,7 @@ const UseZoomPanHelperFlow = () => { addEdges({ id: 'e3-4', source: '3', target: '4' }); }, [addEdges]); - const onResetNodes = useCallback( - () => setNodesHook(initialNodes), - [setNodesHook] - ); + const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]); return ( {
- + diff --git a/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx b/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx index f93ebc3d..38ee4af1 100644 --- a/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx +++ b/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx @@ -1,5 +1,5 @@ import React, { memo, FC, useMemo, CSSProperties } from 'react'; -import { Handle, Position, NodeProps } from '@react-flow/core'; +import { Handle, Position, NodeProps } from '@react-flow/bundle'; const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }; @@ -11,7 +11,7 @@ const CustomNode: FC = ({ data }) => { return ( = ({ data }) => { return (
- +
output handle count: {data.handleCount}
{handles}
diff --git a/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx b/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx index 511d6aaf..2598665e 100644 --- a/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx +++ b/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx @@ -12,7 +12,7 @@ import { Position, useNodesState, useEdgesState, -} from '@react-flow/core'; +} from '@react-flow/bundle'; import CustomNode from './CustomNode'; @@ -48,10 +48,7 @@ const getId = (): string => `${id++}`; const UpdateNodeInternalsFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); - const onConnect = useCallback( - (params: Edge | Connection) => setEdges((els) => addEdge(params, els)), - [setEdges] - ); + const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]); const updateNodeInternals = useUpdateNodeInternals(); const { project } = useReactFlow(); @@ -98,10 +95,7 @@ const UpdateNodeInternalsFlow = () => { ); }, [setNodes]); - const updateNode = useCallback( - () => updateNodeInternals('1'), - [updateNodeInternals] - ); + const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]); return ( connection.target === 'B'; const CustomInput: FC = () => ( <>
Only connectable with B
- + ); const CustomNode: FC = ({ id }) => ( <> - +
{id}
- + ); diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx index 6abeae0a..ce2b55b9 100755 --- a/examples/nextjs/pages/_app.tsx +++ b/examples/nextjs/pages/_app.tsx @@ -7,7 +7,7 @@ import '../styles/globals.css'; // import '@react-flow/core/dist/theme-default.css'; // this is a workaround for testing the theme. See explanation above. -// import '../styles/theme-default.css'; +import '../styles/rf-style.css'; const routes = [ '/', diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx index b7d70cf7..bd8f0248 100755 --- a/examples/nextjs/pages/index.tsx +++ b/examples/nextjs/pages/index.tsx @@ -1,20 +1,19 @@ import React, { MouseEvent } from 'react'; import { + MiniMap, ReactFlow, + Background, + BackgroundVariant, + Controls, ReactFlowProvider, Node, Edge, useReactFlow, -} from '@react-flow/core'; - -import { MiniMap } from '@react-flow/minimap'; -import { Background, BackgroundVariant } from '@react-flow/background'; -import { Controls } from '@react-flow/controls'; +} from '@react-flow/bundle'; 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[] = [ diff --git a/examples/nextjs/pages/theme-default.css b/examples/nextjs/pages/theme-default.css deleted file mode 100644 index ec788aa7..00000000 --- a/examples/nextjs/pages/theme-default.css +++ /dev/null @@ -1,111 +0,0 @@ -.react-flow__edge { - &.selected, - &:focus, - &:focus-visible { - outline: none; - - .react-flow__edge-path { - stroke: #555; - } - } - - &.animated path { - stroke-dasharray: 5; - animation: dashdraw 0.5s linear infinite; - } - - &.updating { - .react-flow__edge-path { - stroke: #777; - } - } -} - -.react-flow__edge-path { - stroke: #b1b1b7; - stroke-width: 1; -} - -.react-flow__edge-text { - font-size: 10px; -} - -.react-flow__connection-path { - stroke: #b1b1b7; - stroke-width: 1; -} - -.react-flow__node { - cursor: grab; -} - -.react-flow__node-default, -.react-flow__node-input, -.react-flow__node-output, -.react-flow__node-group { - padding: 10px; - border-radius: 3px; - width: 150px; - font-size: 12px; - color: #222; - text-align: center; - border-width: 1px; - border-style: solid; - background: #fff; - border-color: #1a192b; - - &.selected, - &:focus, - &:focus-visible { - box-shadow: 0 0 0 0.5px #1a192b; - outline: none; - } - - .react-flow__handle { - background: #1a192b; - } -} - -.react-flow__node-default.selectable, -.react-flow__node-input.selectable, -.react-flow__node-output.selectable, -.react-flow__node-group.selectable { - &:hover { - box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); - } - - &.selected, - &:focus, - &:focus-visible { - outline: none; - box-shadow: 0 0 0 0.5px #1a192b; - } -} - -.react-flow__node-group { - background: rgba(240, 240, 240, 0.25); - border-color: #1a192b; -} - -.react-flow__nodesselection-rect, -.react-flow__selection { - background: rgba(0, 89, 220, 0.08); - border: 1px dotted rgba(0, 89, 220, 0.8); - - &:focus, - &:focus-visible { - outline: none; - } -} - -.react-flow__handle { - width: 6px; - height: 6px; - background: #555; - border: 1px solid white; - border-radius: 100%; - - &.connectable { - cursor: crosshair; - } -} diff --git a/examples/nextjs/postcss.config.json b/examples/nextjs/postcss.config.json index 314c7555..e3efa910 100644 --- a/examples/nextjs/postcss.config.json +++ b/examples/nextjs/postcss.config.json @@ -1,6 +1,7 @@ { "plugins": [ "postcss-nested", + "postcss-import", "postcss-flexbugs-fixes", [ "postcss-preset-env", diff --git a/packages/core/src/styles/base.ts b/examples/nextjs/styles/rf-base.css similarity index 69% rename from packages/core/src/styles/base.ts rename to examples/nextjs/styles/rf-base.css index e1abe38e..7546dc30 100644 --- a/packages/core/src/styles/base.ts +++ b/examples/nextjs/styles/rf-base.css @@ -1,4 +1,5 @@ -const style = ` +/* these are very simple styles so that it doesnt look broken */ +/* these are the necessary styles for React Flow */ .react-flow__container { position: absolute; width: 100%; @@ -6,221 +7,222 @@ const style = ` top: 0; left: 0; } - .react-flow__pane { z-index: 1; } - .react-flow__viewport { transform-origin: 0 0; z-index: 2; pointer-events: none; } - .react-flow__renderer { z-index: 4; } - .react-flow__selectionpane { z-index: 5; } - -.react-flow__nodesselection-rect, -.react-flow__selection { - background: rgba(150, 150, 180, 0.1); - border: 1px dotted rgba(155, 155, 155, 0.8); -} - .react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible { outline: none; } - .react-flow .react-flow__edges { pointer-events: none; overflow: visible; } - -.react-flow__connection { - pointer-events: none; -} - -.react-flow__connection.animated { - stroke-dasharray: 5; - animation: dashdraw 0.5s linear infinite; -} - -.react-flow .react-flow__connectionline { - z-index: 1001; -} - -.react-flow__connectionline path, .react-flow__edge path { - fill: none; -} - -.react-flow__edge-path, .react-flow__connection-path { +.react-flow__edge-path, +.react-flow__connection-path { stroke: #b1b1b7; stroke-width: 1; } - .react-flow__edge { pointer-events: visibleStroke; } - .react-flow__edge.animated path { stroke-dasharray: 5; + -webkit-animation: dashdraw 0.5s linear infinite; animation: dashdraw 0.5s linear infinite; } - .react-flow__edge.inactive { pointer-events: none; } - -.react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible { +.react-flow__edge.selected, +.react-flow__edge:focus, +.react-flow__edge:focus-visible { outline: none; } - .react-flow__edge.selected .react-flow__edge-path, .react-flow__edge:focus .react-flow__edge-path, .react-flow__edge:focus-visible .react-flow__edge-path { stroke: #555; } - -@keyframes dashdraw { - from { - stroke-dashoffset: 10; - } -} - .react-flow__edge-textwrapper { pointer-events: all; } - -.react-flow__edge-text { - pointer-events: none; - user-select: none; -} - .react-flow__edge-textbg { fill: white; } - +.react-flow__edge .react-flow__edge-text { + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.react-flow__connection { + pointer-events: none; +} +.react-flow__connection.animated { + stroke-dasharray: 5; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; +} +.react-flow__connectionline { + z-index: 1001; +} .react-flow__nodes { pointer-events: none; transform-origin: 0 0; } - .react-flow__node { position: absolute; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; pointer-events: all; transform-origin: 0 0; box-sizing: border-box; background-color: white; + cursor: -webkit-grab; cursor: grab; - border: 1px solid #bbb; } - -.react-flow__node.selected, -.react-flow__node:focus, -.react-flow__node:focus-visible { - outline: none; - border: 1px solid #555; -} - .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; } - .react-flow__nodesselection-rect { position: absolute; pointer-events: all; + cursor: -webkit-grab; cursor: grab; } - .react-flow__handle { position: absolute; pointer-events: none; min-width: 5px; min-height: 5px; - background-color: #333; } - .react-flow__handle.connectable { pointer-events: all; } - .react-flow__handle-bottom { top: auto; left: 50%; bottom: -4px; transform: translate(-50%, 0); } - .react-flow__handle-top { left: 50%; top: -4px; transform: translate(-50%, 0); } - .react-flow__handle-left { top: 50%; left: -4px; transform: translate(0, -50%); } - .react-flow__handle-right { right: -4px; top: 50%; transform: translate(0, -50%); } - .react-flow__edgeupdater { cursor: move; pointer-events: all; } - .react-flow__panel { position: absolute; z-index: 1000; margin: 15px; } - .react-flow__panel.top { top: 0; } - .react-flow__panel.bottom { bottom: 0; } - .react-flow__panel.left { left: 0; } - .react-flow__panel.right { right: 0; } - .react-flow__panel.center { left: 50%; transform: translateX(-50%); } - .react-flow__attribution { font-size: 10px; background: rgba(255, 255, 255, 0.5); padding: 2px 3px; - color: #999; margin: 0; } - .react-flow__attribution a { - color: #555; text-decoration: none; + color: #999; +} +@-webkit-keyframes dashdraw { + from { + stroke-dashoffset: 10; + } +} +@keyframes dashdraw { + from { + stroke-dashoffset: 10; + } +} +.react-flow__node { + border-width: 1px; + border-style: solid; + border-color: #bbb; +} +.react-flow__node.selected, +.react-flow__node:focus, +.react-flow__node:focus-visible { + outline: none; + border: 1px solid #555; +} +.react-flow__nodesselection-rect, +.react-flow__selection { + background: rgba(150, 150, 180, 0.1); + border: 1px dotted rgba(155, 155, 155, 0.8); +} +.react-flow__controls { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); +} +.react-flow__controls-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; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + padding: 5px; +} +.react-flow__controls-button:hover { + background: #f4f4f4; +} +.react-flow__controls-button svg { + width: 100%; + max-width: 12px; + max-height: 12px; +} +.react-flow__minimap { + background-color: #fff; } -`; - -export default style; diff --git a/examples/nextjs/styles/rf-style.css b/examples/nextjs/styles/rf-style.css new file mode 100644 index 00000000..101daba1 --- /dev/null +++ b/examples/nextjs/styles/rf-style.css @@ -0,0 +1,267 @@ +/* these are the necessary styles for React Flow */ +.react-flow__container { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.react-flow__pane { + z-index: 1; + cursor: -webkit-grab; + cursor: grab; +} +.react-flow__pane.dragging { + cursor: -webkit-grabbing; + cursor: grabbing; + } +.react-flow__viewport { + transform-origin: 0 0; + z-index: 2; + pointer-events: none; +} +.react-flow__renderer { + z-index: 4; +} +.react-flow__selectionpane { + z-index: 5; +} +.react-flow__nodesselection-rect:focus, +.react-flow__nodesselection-rect:focus-visible { + outline: none; +} +.react-flow .react-flow__edges { + pointer-events: none; + overflow: visible; +} +.react-flow__edge-path, +.react-flow__connection-path { + stroke: #b1b1b7; + stroke-width: 1; +} +.react-flow__edge { + pointer-events: visibleStroke; + cursor: pointer; +} +.react-flow__edge.animated path { + stroke-dasharray: 5; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; + } +.react-flow__edge.inactive { + pointer-events: none; + } +.react-flow__edge.selected, + .react-flow__edge:focus, + .react-flow__edge:focus-visible { + outline: none; + } +.react-flow__edge.selected .react-flow__edge-path, + .react-flow__edge:focus .react-flow__edge-path, + .react-flow__edge:focus-visible .react-flow__edge-path { + stroke: #555; + } +.react-flow__edge-textwrapper { + pointer-events: all; + } +.react-flow__edge-textbg { + fill: white; + } +.react-flow__edge .react-flow__edge-text { + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } +.react-flow__connection { + pointer-events: none; +} +.react-flow__connection.animated { + stroke-dasharray: 5; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; + } +.react-flow__connectionline { + z-index: 1001; +} +.react-flow__nodes { + pointer-events: none; + transform-origin: 0 0; +} +.react-flow__node { + position: absolute; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + pointer-events: all; + transform-origin: 0 0; + box-sizing: border-box; + background-color: white; + cursor: -webkit-grab; + cursor: grab; + padding: 10px; + border-radius: 3px; + width: 150px; + font-size: 12px; + color: #222; + text-align: center; + border-width: 1px; + border-style: solid; + border-color: #1a192b; +} +.react-flow__node.dragging { + cursor: -webkit-grabbing; + cursor: grabbing; + } +.react-flow__nodesselection { + z-index: 3; + transform-origin: left top; + pointer-events: none; +} +.react-flow__nodesselection-rect { + position: absolute; + pointer-events: all; + cursor: -webkit-grab; + cursor: grab; + } +.react-flow__handle { + position: absolute; + pointer-events: none; + min-width: 5px; + min-height: 5px; + width: 6px; + height: 6px; + background: #1a192b; + border: 1px solid white; + border-radius: 100%; +} +.react-flow__handle.connectable { + pointer-events: all; + cursor: crosshair; + } +.react-flow__handle-bottom { + top: auto; + left: 50%; + bottom: -4px; + transform: translate(-50%, 0); + } +.react-flow__handle-top { + left: 50%; + top: -4px; + transform: translate(-50%, 0); + } +.react-flow__handle-left { + top: 50%; + left: -4px; + transform: translate(0, -50%); + } +.react-flow__handle-right { + right: -4px; + top: 50%; + transform: translate(0, -50%); + } +.react-flow__edgeupdater { + cursor: move; + pointer-events: all; +} +.react-flow__panel { + position: absolute; + z-index: 1000; + margin: 15px; +} +.react-flow__panel.top { + top: 0; + } +.react-flow__panel.bottom { + bottom: 0; + } +.react-flow__panel.left { + left: 0; + } +.react-flow__panel.right { + right: 0; + } +.react-flow__panel.center { + left: 50%; + transform: translateX(-50%); + } +.react-flow__attribution { + font-size: 10px; + background: rgba(255, 255, 255, 0.5); + padding: 2px 3px; + margin: 0; +} +.react-flow__attribution a { + text-decoration: none; + color: #999; + } +@-webkit-keyframes dashdraw { + from { + stroke-dashoffset: 10; + } +} +@keyframes dashdraw { + from { + stroke-dashoffset: 10; + } +} +.react-flow__edge.updating .react-flow__edge-path { + stroke: #777; + } +.react-flow__edge-text { + font-size: 10px; + } +.react-flow__node.selectable:hover { + box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); + } +.react-flow__node.selectable.selected, + .react-flow__node.selectable:focus, + .react-flow__node.selectable:focus-visible { + box-shadow: 0 0 0 0.5px #1a192b; + outline: none; + } +.react-flow__node-group { + background: rgba(240, 240, 240, 0.25); + border-color: #1a192b; + } +.react-flow__nodesselection-rect, +.react-flow__selection { + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); +} +.react-flow__nodesselection-rect:focus, + .react-flow__nodesselection-rect:focus-visible, + .react-flow__selection:focus, + .react-flow__selection:focus-visible { + outline: none; + } +.react-flow__controls { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); +} +.react-flow__controls-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; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + padding: 5px; + } +.react-flow__controls-button:hover { + background: #f4f4f4; + } +.react-flow__controls-button svg { + width: 100%; + max-width: 12px; + max-height: 12px; + } +.react-flow__minimap { + background-color: #fff; +} diff --git a/examples/nextjs/styles/theme-default.css b/examples/nextjs/styles/theme-default.css deleted file mode 100644 index 27821037..00000000 --- a/examples/nextjs/styles/theme-default.css +++ /dev/null @@ -1,83 +0,0 @@ -.react-flow__edge { - &.updating { - .react-flow__edge-path { - stroke: #777; - } - } -} - -.react-flow__edge-text { - font-size: 10px; -} - -.react-flow__node-default, -.react-flow__node-input, -.react-flow__node-output, -.react-flow__node-group { - padding: 10px; - border-radius: 3px; - width: 150px; - font-size: 12px; - color: #222; - text-align: center; - border-width: 1px; - border-style: solid; - border-color: #1a192b; - - &.selected, - &:focus, - &:focus-visible { - border: none; - box-shadow: 0 0 0 0.5px #1a192b; - outline: none; - } - - .react-flow__handle { - background: #1a192b; - } -} - -.react-flow__node-default.selectable, -.react-flow__node-input.selectable, -.react-flow__node-output.selectable, -.react-flow__node-group.selectable { - &:hover { - box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); - } - - &.selected, - &:focus, - &:focus-visible { - border: none; - box-shadow: 0 0 0 0.5px #1a192b; - outline: none; - } -} - -.react-flow__node-group { - background: rgba(240, 240, 240, 0.25); - border-color: #1a192b; -} - -.react-flow__nodesselection-rect, -.react-flow__selection { - background: rgba(0, 89, 220, 0.08); - border: 1px dotted rgba(0, 89, 220, 0.8); - - &:focus, - &:focus-visible { - outline: none; - } -} - -.react-flow__handle { - width: 6px; - height: 6px; - background: #555; - border: 1px solid white; - border-radius: 100%; - - &.connectable { - cursor: crosshair; - } -} diff --git a/package.json b/package.json index e0ebb4d3..86c41241 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "latest", "postcss": "^8.4.16", + "postcss-combine-duplicated-selectors": "^10.0.3", "postcss-import": "^14.1.0", "postcss-nested": "^5.0.6", "prettier": "^2.7.1", diff --git a/packages/background/README.md b/packages/background/README.md new file mode 100644 index 00000000..0c664fa9 --- /dev/null +++ b/packages/background/README.md @@ -0,0 +1,10 @@ +# @react-flow/background + +Background component for React Flow. + +## Installation + +```sh +npm install @react-flow/background +``` + diff --git a/packages/bundle/README.md b/packages/bundle/README.md new file mode 100644 index 00000000..eab39176 --- /dev/null +++ b/packages/bundle/README.md @@ -0,0 +1,16 @@ +# @react-flow/bundle + +Bundles: + +* @react-flow/core +* @react-flow/background +* @react-flow/controls +* @react-flow/minimap + + +## Installation + +```sh +npm install @react-flow/bundle +``` + diff --git a/packages/renderer/package.json b/packages/bundle/package.json similarity index 68% rename from packages/renderer/package.json rename to packages/bundle/package.json index 9c81cc0b..7cc0acd6 100644 --- a/packages/renderer/package.json +++ b/packages/bundle/package.json @@ -1,9 +1,9 @@ { - "name": "@react-flow/renderer", + "name": "@react-flow/bundle", "version": "11.0.0", - "description": "The main React Flow package that comes with all the essentials.", - "main": "dist/react-flow-renderer.cjs.js", - "module": "dist/react-flow-renderer.esm.js", + "description": "The bundled React Flow package that comes with all the essentials.", + "main": "dist/react-flow-bundle.cjs.js", + "module": "dist/react-flow-bundle.esm.js", "license": "MIT", "scripts": { "build": "postcss src/*.css --config ../../postcss.config.json --dir dist" @@ -22,6 +22,7 @@ "autoprefixer": "^10.4.8", "postcss": "^8.4.14", "postcss-cli": "^10.0.0", + "postcss-combine-duplicated-selectors": "^10.0.3", "postcss-import": "^14.1.0", "postcss-nested": "^5.0.6" } diff --git a/packages/bundle/src/base.css b/packages/bundle/src/base.css new file mode 100644 index 00000000..5e12a875 --- /dev/null +++ b/packages/bundle/src/base.css @@ -0,0 +1,3 @@ +@import '../../core/src/styles/base.css'; +@import '../../controls/src/style.css'; +@import '../../minimap/src/style.css'; diff --git a/packages/renderer/src/index.ts b/packages/bundle/src/index.ts similarity index 100% rename from packages/renderer/src/index.ts rename to packages/bundle/src/index.ts diff --git a/packages/bundle/src/style.css b/packages/bundle/src/style.css new file mode 100644 index 00000000..1532e747 --- /dev/null +++ b/packages/bundle/src/style.css @@ -0,0 +1,3 @@ +@import '../../core/src/styles/style.css'; +@import '../../controls/src/style.css'; +@import '../../minimap/src/style.css'; diff --git a/packages/controls/README.md b/packages/controls/README.md new file mode 100644 index 00000000..23deb61f --- /dev/null +++ b/packages/controls/README.md @@ -0,0 +1,10 @@ +# @react-flow/controls + +Controls component for React Flow. + +## Installation + +```sh +npm install @react-flow/controls +``` + diff --git a/packages/controls/package.json b/packages/controls/package.json index f4662873..567ada2f 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -5,13 +5,23 @@ "main": "dist/react-flow-controls.cjs.js", "module": "dist/react-flow-controls.esm.js", "license": "MIT", + "scripts": { + "build": "postcss src/*.css --config ../../postcss.config.json --dir dist" + }, "dependencies": { "@react-flow/core": "^11.0.0", - "@react-flow/css-utils": "^11.0.0", "classcat": "^5.0.3" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" + }, + "devDependencies": { + "autoprefixer": "^10.4.8", + "postcss": "^8.4.16", + "postcss-cli": "^10.0.0", + "postcss-combine-duplicated-selectors": "^10.0.3", + "postcss-import": "^14.1.0", + "postcss-nested": "^5.0.6" } } diff --git a/packages/controls/src/Controls.tsx b/packages/controls/src/Controls.tsx index ebf4d5e4..124a6ca1 100644 --- a/packages/controls/src/Controls.tsx +++ b/packages/controls/src/Controls.tsx @@ -1,13 +1,6 @@ import { memo, FC, useEffect, useState, PropsWithChildren } from 'react'; import cc from 'classcat'; -import { - useStore, - useStoreApi, - useReactFlow, - ReactFlowState, - Panel, -} from '@react-flow/core'; -import { injectStyle } from '@react-flow/css-utils'; +import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@react-flow/core'; import PlusIcon from './Icons/Plus'; import MinusIcon from './Icons/Minus'; @@ -15,14 +8,10 @@ import FitviewIcon from './Icons/FitView'; import LockIcon from './Icons/Lock'; import UnlockIcon from './Icons/Unlock'; import ControlButton from './ControlButton'; -import baseStyle from './style'; import { ControlProps } from './types'; -injectStyle(baseStyle); - -const isInteractiveSelector = (s: ReactFlowState) => - s.nodesDraggable && s.nodesConnectable && s.elementsSelectable; +const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable; const Controls: FC> = ({ style, @@ -77,11 +66,7 @@ const Controls: FC> = ({ }; return ( - + {showZoom && ( <> ) => { selected, selectable: isSelectable, parent: isParent, + dragging, }, ])} ref={nodeRef} diff --git a/packages/core/src/container/FlowRenderer/Pane.tsx b/packages/core/src/container/FlowRenderer/Pane.tsx new file mode 100644 index 00000000..113945bf --- /dev/null +++ b/packages/core/src/container/FlowRenderer/Pane.tsx @@ -0,0 +1,34 @@ +import { MouseEvent } from 'react'; +import cc from 'classcat'; + +import { useStore } from '../../hooks/useStore'; +import { containerStyle } from '../../styles'; +import type { ReactFlowState } from '../../types'; +import type { FlowRendererProps } from '.'; + +type PaneProps = Pick & { + onMouseEnter?: (event: MouseEvent) => void; + onMouseMove?: (event: MouseEvent) => void; + onMouseLeave?: (event: MouseEvent) => void; +}; + +const selector = (s: ReactFlowState) => s.paneDragging; + +function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) { + const dragging = useStore(selector); + + return ( +
+ ); +} + +export default Pane; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index d5f65014..99725dfe 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -7,9 +7,9 @@ import { GraphViewProps } from '../GraphView'; import ZoomPane from '../ZoomPane'; import UserSelection from '../../components/UserSelection'; import NodesSelection from '../../components/NodesSelection'; +import Pane from './Pane'; import { ReactFlowState } from '../../types'; -import { containerStyle } from '../../styles'; export type FlowRendererProps = Omit< GraphViewProps, @@ -110,15 +110,13 @@ const FlowRenderer = ({ disableKeyboardA11y={disableKeyboardA11y} /> )} -
); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index fdce46cc..4af5484f 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -1,6 +1,5 @@ import { CSSProperties, forwardRef, useId } from 'react'; import cc from 'classcat'; -import { injectStyle } from '@react-flow/css-utils'; import Attribution from '../../components/Attribution'; import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; @@ -9,9 +8,6 @@ import InputNode from '../../components/Nodes/InputNode'; import OutputNode from '../../components/Nodes/OutputNode'; import SelectionListener from '../../components/SelectionListener'; import StoreUpdater from '../../components/StoreUpdater'; -import baseStyle from '../../styles/base'; - -injectStyle(baseStyle); import { ConnectionLineType, diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 3c3f7352..6f4f2a40 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -169,7 +169,9 @@ const ZoomPane = ({ if (d3Zoom) { d3Zoom.on('start', (event: D3ZoomEvent) => { isZoomingOrPanning.current = true; - + if (event.sourceEvent?.type === 'mousedown') { + store.setState({ paneDragging: true }); + } if (onMoveStart) { const flowTransform = eventToFlowTransform(event.transform); prevTransform.current = flowTransform; @@ -184,6 +186,7 @@ const ZoomPane = ({ if (d3Zoom) { d3Zoom.on('end', (event: D3ZoomEvent) => { isZoomingOrPanning.current = false; + store.setState({ paneDragging: false }); if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) { const flowTransform = eventToFlowTransform(event.transform); diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 151c8475..a40093de 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -30,6 +30,7 @@ const initialState: ReactFlowStore = { connectionPosition: { x: 0, y: 0 }, connectionMode: ConnectionMode.Strict, domNode: null, + paneDragging: false, snapGrid: [15, 15], snapToGrid: false, diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css new file mode 100644 index 00000000..b32c2e23 --- /dev/null +++ b/packages/core/src/styles/base.css @@ -0,0 +1,25 @@ +/* these are very simple styles so that it doesnt look broken */ +@import './init.css'; + +.react-flow__handle { + background-color: #333; +} + +.react-flow__node { + border-width: 1px; + border-style: solid; + border-color: #bbb; + + &.selected, + &:focus, + &:focus-visible { + outline: none; + border: 1px solid #555; + } +} + +.react-flow__nodesselection-rect, +.react-flow__selection { + background: rgba(150, 150, 180, 0.1); + border: 1px dotted rgba(155, 155, 155, 0.8); +} diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css new file mode 100644 index 00000000..3536691d --- /dev/null +++ b/packages/core/src/styles/init.css @@ -0,0 +1,216 @@ +/* these are the necessary styles for React Flow */ +.react-flow__container { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.react-flow__pane { + z-index: 1; + cursor: grab; + + &.dragging { + cursor: grabbing; + } +} + +.react-flow__viewport { + transform-origin: 0 0; + z-index: 2; + pointer-events: none; +} + +.react-flow__renderer { + z-index: 4; +} + +.react-flow__selectionpane { + z-index: 5; +} + +.react-flow__nodesselection-rect:focus, +.react-flow__nodesselection-rect:focus-visible { + outline: none; +} + +.react-flow .react-flow__edges { + pointer-events: none; + overflow: visible; +} + +.react-flow__edge-path, +.react-flow__connection-path { + stroke: #b1b1b7; + stroke-width: 1; +} + +.react-flow__edge { + pointer-events: visibleStroke; + cursor: pointer; + + &.animated path { + stroke-dasharray: 5; + animation: dashdraw 0.5s linear infinite; + } + + &.inactive { + pointer-events: none; + } + + &.selected, + &:focus, + &:focus-visible { + outline: none; + } + + &.selected .react-flow__edge-path, + &:focus .react-flow__edge-path, + &:focus-visible .react-flow__edge-path { + stroke: #555; + } + + &-textwrapper { + pointer-events: all; + } + + &-textbg { + fill: white; + } + + .react-flow__edge-text { + pointer-events: none; + user-select: none; + } +} + +.react-flow__connection { + pointer-events: none; + + &.animated { + stroke-dasharray: 5; + animation: dashdraw 0.5s linear infinite; + } +} + +.react-flow__connectionline { + z-index: 1001; +} + +.react-flow__nodes { + pointer-events: none; + transform-origin: 0 0; +} + +.react-flow__node { + position: absolute; + user-select: none; + pointer-events: all; + transform-origin: 0 0; + box-sizing: border-box; + background-color: white; + cursor: grab; + + &.dragging { + cursor: grabbing; + } +} + +.react-flow__nodesselection { + z-index: 3; + transform-origin: left top; + pointer-events: none; + + &-rect { + position: absolute; + pointer-events: all; + cursor: grab; + } +} + +.react-flow__handle { + position: absolute; + pointer-events: none; + min-width: 5px; + min-height: 5px; + + &.connectable { + pointer-events: all; + } + + &-bottom { + top: auto; + left: 50%; + bottom: -4px; + transform: translate(-50%, 0); + } + + &-top { + left: 50%; + top: -4px; + transform: translate(-50%, 0); + } + + &-left { + top: 50%; + left: -4px; + transform: translate(0, -50%); + } + + &-right { + right: -4px; + top: 50%; + transform: translate(0, -50%); + } +} + +.react-flow__edgeupdater { + cursor: move; + pointer-events: all; +} + +.react-flow__panel { + position: absolute; + z-index: 1000; + margin: 15px; + + &.top { + top: 0; + } + + &.bottom { + bottom: 0; + } + + &.left { + left: 0; + } + + &.right { + right: 0; + } + + &.center { + left: 50%; + transform: translateX(-50%); + } +} + +.react-flow__attribution { + font-size: 10px; + background: rgba(255, 255, 255, 0.5); + padding: 2px 3px; + margin: 0; + + a { + text-decoration: none; + color: #999; + } +} + +@keyframes dashdraw { + from { + stroke-dashoffset: 10; + } +} diff --git a/packages/core/src/styles/style.css b/packages/core/src/styles/style.css new file mode 100644 index 00000000..7d1f8daf --- /dev/null +++ b/packages/core/src/styles/style.css @@ -0,0 +1,66 @@ +@import './init.css'; + +.react-flow__edge { + &.updating { + .react-flow__edge-path { + stroke: #777; + } + } + + &-text { + font-size: 10px; + } +} + +.react-flow__node { + padding: 10px; + border-radius: 3px; + width: 150px; + font-size: 12px; + color: #222; + text-align: center; + border-width: 1px; + border-style: solid; + border-color: #1a192b; + + &.selectable { + &:hover { + box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); + } + + &.selected, + &:focus, + &:focus-visible { + box-shadow: 0 0 0 0.5px #1a192b; + outline: none; + } + } + + &-group { + background: rgba(240, 240, 240, 0.25); + border-color: #1a192b; + } +} + +.react-flow__nodesselection-rect, +.react-flow__selection { + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); + + &:focus, + &:focus-visible { + outline: none; + } +} + +.react-flow__handle { + width: 6px; + height: 6px; + background: #1a192b; + border: 1px solid white; + border-radius: 100%; + + &.connectable { + cursor: crosshair; + } +} diff --git a/packages/core/src/styles/theme-default.css b/packages/core/src/styles/theme-default.css deleted file mode 100644 index 27821037..00000000 --- a/packages/core/src/styles/theme-default.css +++ /dev/null @@ -1,83 +0,0 @@ -.react-flow__edge { - &.updating { - .react-flow__edge-path { - stroke: #777; - } - } -} - -.react-flow__edge-text { - font-size: 10px; -} - -.react-flow__node-default, -.react-flow__node-input, -.react-flow__node-output, -.react-flow__node-group { - padding: 10px; - border-radius: 3px; - width: 150px; - font-size: 12px; - color: #222; - text-align: center; - border-width: 1px; - border-style: solid; - border-color: #1a192b; - - &.selected, - &:focus, - &:focus-visible { - border: none; - box-shadow: 0 0 0 0.5px #1a192b; - outline: none; - } - - .react-flow__handle { - background: #1a192b; - } -} - -.react-flow__node-default.selectable, -.react-flow__node-input.selectable, -.react-flow__node-output.selectable, -.react-flow__node-group.selectable { - &:hover { - box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); - } - - &.selected, - &:focus, - &:focus-visible { - border: none; - box-shadow: 0 0 0 0.5px #1a192b; - outline: none; - } -} - -.react-flow__node-group { - background: rgba(240, 240, 240, 0.25); - border-color: #1a192b; -} - -.react-flow__nodesselection-rect, -.react-flow__selection { - background: rgba(0, 89, 220, 0.08); - border: 1px dotted rgba(0, 89, 220, 0.8); - - &:focus, - &:focus-visible { - outline: none; - } -} - -.react-flow__handle { - width: 6px; - height: 6px; - background: #555; - border: 1px solid white; - border-radius: 100%; - - &.connectable { - cursor: crosshair; - } -} diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 83802ca5..0f124405 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -137,6 +137,7 @@ export type ReactFlowStore = { hasDefaultNodes: boolean; hasDefaultEdges: boolean; domNode: HTMLDivElement | null; + paneDragging: boolean; d3Zoom: ZoomBehavior | null; d3Selection: D3Selection | null; diff --git a/packages/css-utils/package.json b/packages/css-utils/package.json deleted file mode 100644 index df9a7f60..00000000 --- a/packages/css-utils/package.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "@react-flow/css-utils", - "version": "11.0.0", - "description": "Utils for handling styles.", - "main": "dist/react-flow-css-utils.cjs.js", - "module": "dist/react-flow-css-utils.esm.js", - "license": "MIT" -} diff --git a/packages/css-utils/src/index.ts b/packages/css-utils/src/index.ts deleted file mode 100644 index 52c704ca..00000000 --- a/packages/css-utils/src/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export function injectStyle(css: string) { - if (typeof document === 'undefined') return; - - const head = document.head || document.getElementsByTagName('head')[0]; - const style = document.createElement('style'); - - head.prepend(style); - - style.appendChild(document.createTextNode(css)); -} diff --git a/packages/minimap/README.md b/packages/minimap/README.md new file mode 100644 index 00000000..76dafe39 --- /dev/null +++ b/packages/minimap/README.md @@ -0,0 +1,10 @@ +# @react-flow/minimap + +Mini map component for React Flow. + +## Installation + +```sh +npm install @react-flow/minimap +``` + diff --git a/packages/minimap/package.json b/packages/minimap/package.json index a352aaec..25907948 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -5,14 +5,24 @@ "main": "dist/react-flow-minimap.cjs.js", "module": "dist/react-flow-minimap.esm.js", "license": "MIT", + "scripts": { + "build": "postcss src/*.css --config ../../postcss.config.json --dir dist" + }, "dependencies": { "@react-flow/core": "^11.0.0", - "@react-flow/css-utils": "^11.0.0", "classcat": "^5.0.3", "zustand": "^4.0.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" + }, + "devDependencies": { + "autoprefixer": "^10.4.8", + "postcss": "^8.4.16", + "postcss-cli": "^10.0.0", + "postcss-combine-duplicated-selectors": "^10.0.3", + "postcss-import": "^14.1.0", + "postcss-nested": "^5.0.6" } } diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index f56452a3..6e390b1d 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -2,22 +2,11 @@ import { memo, useId } from 'react'; import cc from 'classcat'; import shallow from 'zustand/shallow'; -import { - useStore, - getRectOfNodes, - ReactFlowState, - Rect, - Panel, - getBoundsOfRects, -} from '@react-flow/core'; -import { injectStyle } from '@react-flow/css-utils'; +import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@react-flow/core'; import MiniMapNode from './MiniMapNode'; -import baseStyle from './style'; import { MiniMapProps, GetMiniMapNodeAttribute } from './types'; -injectStyle(baseStyle); - declare const window: any; const defaultWidth = 200; @@ -35,15 +24,11 @@ const selector = (s: ReactFlowState) => { return { nodes: nodes.filter((node) => !node.hidden && node.width && node.height), viewBB, - boundingRect: - nodes.length > 0 - ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) - : viewBB, + boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB, }; }; -const getAttrFunction = (func: any): GetMiniMapNodeAttribute => - func instanceof Function ? func : () => func; +const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func); const ARIA_LABEL_KEY = 'react-flow__minimap-desc'; @@ -75,18 +60,11 @@ function MiniMap({ const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset; const width = viewWidth + offset * 2; const height = viewHeight + offset * 2; - const shapeRendering = - typeof window === 'undefined' || !!window.chrome - ? 'crispEdges' - : 'geometricPrecision'; + const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'; const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`; return ( - + diff --git a/packages/minimap/src/style.ts b/packages/minimap/src/style.css similarity index 53% rename from packages/minimap/src/style.ts rename to packages/minimap/src/style.css index c1650df2..dbb9a931 100644 --- a/packages/minimap/src/style.ts +++ b/packages/minimap/src/style.css @@ -1,6 +1,3 @@ -const style = ` .react-flow__minimap { background-color: #fff; -}`; - -export default style; +} diff --git a/packages/renderer/src/theme-default.css b/packages/renderer/src/theme-default.css deleted file mode 100644 index 8271aae5..00000000 --- a/packages/renderer/src/theme-default.css +++ /dev/null @@ -1 +0,0 @@ -@import '@react-flow/core/dist/theme-default.css'; diff --git a/postcss.config.js b/postcss.config.js index e0a03cdb..92aba0ac 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,7 @@ module.exports = { plugins: [ require('postcss-nested'), + require('postcss-combine-duplicated-selectors'), require('autoprefixer'), require('postcss-import'), ], diff --git a/yarn.lock b/yarn.lock index 4faa1b08..b347e9d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2187,13 +2187,38 @@ __metadata: languageName: unknown linkType: soft +"@react-flow/bundle@11.0.0, @react-flow/bundle@workspace:packages/bundle": + version: 0.0.0-use.local + resolution: "@react-flow/bundle@workspace:packages/bundle" + dependencies: + "@react-flow/background": 11.0.0 + "@react-flow/controls": 11.0.0 + "@react-flow/core": 11.0.0 + "@react-flow/minimap": 11.0.0 + autoprefixer: ^10.4.8 + postcss: ^8.4.14 + postcss-cli: ^10.0.0 + postcss-combine-duplicated-selectors: ^10.0.3 + postcss-import: ^14.1.0 + postcss-nested: ^5.0.6 + peerDependencies: + react: ">=18" + react-dom: ">=18" + languageName: unknown + linkType: soft + "@react-flow/controls@11.0.0, @react-flow/controls@workspace:packages/controls": version: 0.0.0-use.local resolution: "@react-flow/controls@workspace:packages/controls" dependencies: "@react-flow/core": ^11.0.0 - "@react-flow/css-utils": ^11.0.0 + autoprefixer: ^10.4.8 classcat: ^5.0.3 + postcss: ^8.4.16 + postcss-cli: ^10.0.0 + postcss-combine-duplicated-selectors: ^10.0.3 + postcss-import: ^14.1.0 + postcss-nested: ^5.0.6 peerDependencies: react: ">=18" react-dom: ">=18" @@ -2205,7 +2230,6 @@ __metadata: resolution: "@react-flow/core@workspace:packages/core" dependencies: "@babel/runtime": ^7.18.0 - "@react-flow/css-utils": ^11.0.0 "@types/d3": ^7.4.0 "@types/react": ^18.0.15 autoprefixer: ^10.4.8 @@ -2215,6 +2239,7 @@ __metadata: d3-zoom: ^3.0.0 postcss: ^8.4.14 postcss-cli: ^10.0.0 + postcss-combine-duplicated-selectors: ^10.0.3 postcss-import: ^14.1.0 postcss-nested: ^5.0.6 zustand: ^4.0.0 @@ -2224,41 +2249,21 @@ __metadata: languageName: unknown linkType: soft -"@react-flow/css-utils@^11.0.0, @react-flow/css-utils@workspace:packages/css-utils": - version: 0.0.0-use.local - resolution: "@react-flow/css-utils@workspace:packages/css-utils" - languageName: unknown - linkType: soft - "@react-flow/minimap@11.0.0, @react-flow/minimap@workspace:packages/minimap": version: 0.0.0-use.local resolution: "@react-flow/minimap@workspace:packages/minimap" dependencies: "@react-flow/core": ^11.0.0 - "@react-flow/css-utils": ^11.0.0 - classcat: ^5.0.3 - zustand: ^4.0.0 - peerDependencies: - react: ^18.1.0 - react-dom: ">=18" - languageName: unknown - linkType: soft - -"@react-flow/renderer@workspace:packages/renderer": - version: 0.0.0-use.local - resolution: "@react-flow/renderer@workspace:packages/renderer" - dependencies: - "@react-flow/background": 11.0.0 - "@react-flow/controls": 11.0.0 - "@react-flow/core": 11.0.0 - "@react-flow/minimap": 11.0.0 autoprefixer: ^10.4.8 - postcss: ^8.4.14 + classcat: ^5.0.3 + postcss: ^8.4.16 postcss-cli: ^10.0.0 + postcss-combine-duplicated-selectors: ^10.0.3 postcss-import: ^14.1.0 postcss-nested: ^5.0.6 + zustand: ^4.0.0 peerDependencies: - react: ^18.1.0 + react: ">=18" react-dom: ">=18" languageName: unknown linkType: soft @@ -7460,6 +7465,17 @@ __metadata: languageName: node linkType: hard +"postcss-combine-duplicated-selectors@npm:^10.0.3": + version: 10.0.3 + resolution: "postcss-combine-duplicated-selectors@npm:10.0.3" + dependencies: + postcss-selector-parser: ^6.0.4 + peerDependencies: + postcss: ^8.1.0 + checksum: 45c3dff41d0cddb510752ed92fe8c7fc66e5cf88f4988314655419d3ecdf1dc66f484a25ee73f4f292da5da851a0fdba0ec4d59bdedeee935d05b26d31d997ed + languageName: node + linkType: hard + "postcss-custom-media@npm:^8.0.2": version: 8.0.2 resolution: "postcss-custom-media@npm:8.0.2" @@ -8050,10 +8066,7 @@ __metadata: resolution: "react-flow-examples@workspace:examples/nextjs" dependencies: "@preconstruct/next": ^4.0.0 - "@react-flow/background": 11.0.0 - "@react-flow/controls": 11.0.0 - "@react-flow/core": 11.0.0 - "@react-flow/minimap": 11.0.0 + "@react-flow/bundle": 11.0.0 "@types/dagre": ^0.7.47 dagre: ^0.8.5 eslint: 8.19.0 @@ -8062,6 +8075,7 @@ __metadata: next: 12.2.2 postcss: ^8.4.16 postcss-flexbugs-fixes: ^5.0.2 + postcss-import: ^14.1.0 postcss-nested: ^5.0.6 postcss-preset-env: ^7.7.2 react: 18.2.0 @@ -8088,6 +8102,7 @@ __metadata: eslint-plugin-prettier: ^4.2.1 eslint-plugin-react: latest postcss: ^8.4.16 + postcss-combine-duplicated-selectors: ^10.0.3 postcss-import: ^14.1.0 postcss-nested: ^5.0.6 prettier: ^2.7.1