From 3206d49c155e22d943dee36c9db3ce1b2f93d861 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 17 Dec 2021 10:43:53 +0100 Subject: [PATCH] chore(examples): add overview, cleanup --- .../{src_oldapi => src}/Overview/index.tsx | 41 +++--- example/src/TouchDevice/index.tsx | 1 + example/src/TouchDevice/touch-device.css | 4 +- example/src/index.tsx | 5 + example/src_oldapi/Basic/index.tsx | 98 ------------- .../CustomNode/ColorSelectorNode.tsx | 25 ---- example/src_oldapi/CustomNode/index.tsx | 135 ------------------ example/src_oldapi/Stress/index.tsx | 70 --------- example/src_oldapi/Stress/utils.ts | 30 ---- src/types/general.ts | 7 +- 10 files changed, 36 insertions(+), 380 deletions(-) rename example/{src_oldapi => src}/Overview/index.tsx (86%) delete mode 100644 example/src_oldapi/Basic/index.tsx delete mode 100644 example/src_oldapi/CustomNode/ColorSelectorNode.tsx delete mode 100644 example/src_oldapi/CustomNode/index.tsx delete mode 100644 example/src_oldapi/Stress/index.tsx delete mode 100644 example/src_oldapi/Stress/utils.ts diff --git a/example/src_oldapi/Overview/index.tsx b/example/src/Overview/index.tsx similarity index 86% rename from example/src_oldapi/Overview/index.tsx rename to example/src/Overview/index.tsx index 17e0c9b5..4cb1e045 100644 --- a/example/src_oldapi/Overview/index.tsx +++ b/example/src/Overview/index.tsx @@ -1,20 +1,18 @@ -import React, { useState, MouseEvent, CSSProperties } from 'react'; - +import { MouseEvent, CSSProperties } from 'react'; import ReactFlow, { - removeElements, addEdge, MiniMap, Controls, Background, - isNode, Node, - Elements, - FlowElement, - OnLoadParams, FlowTransform, SnapGrid, Connection, Edge, + ReactFlowInstance, + useNodesState, + useEdgesState, + OnSelectionChangeParams, } from 'react-flow-renderer'; const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node); @@ -31,10 +29,10 @@ const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => { event.preventDefault(); console.log('selection context menu', nodes); }; -const onElementClick = (_: MouseEvent, element: FlowElement) => - console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element); -const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements); -const onLoad = (reactFlowInstance: OnLoadParams) => { +const onNodeClick = (_: MouseEvent, node: Node) => console.log('node click:', node); + +const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges); +const onPaneReady = (reactFlowInstance: ReactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); reactFlowInstance.fitView(); }; @@ -47,7 +45,7 @@ const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse m const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge); const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge); -const initialElements: Elements = [ +const initialNodes: Node[] = [ { id: '1', type: 'input', @@ -121,6 +119,9 @@ const initialElements: Elements = [ position: { x: 100, y: 480 }, }, { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } }, +]; + +const initialEdges: Edge[] = [ { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' }, { id: 'e1-3', source: '1', target: '3' }, { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' }, @@ -157,15 +158,17 @@ const nodeColor = (n: Node): string => { }; const OverviewFlow = () => { - const [elements, setElements] = useState(initialElements); - const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); - const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els)); + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); return ( { onSelectionChange={onSelectionChange} onMoveStart={onMoveStart} onMoveEnd={onMoveEnd} - onLoad={onLoad} + onPaneReady={onPaneReady} connectionLineStyle={connectionLineStyle} snapToGrid={true} snapGrid={snapGrid} diff --git a/example/src/TouchDevice/index.tsx b/example/src/TouchDevice/index.tsx index 3a3b11fd..1a75e7d4 100644 --- a/example/src/TouchDevice/index.tsx +++ b/example/src/TouchDevice/index.tsx @@ -42,6 +42,7 @@ const TouchDeviceFlow = () => { onConnect={onConnect} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + className="touchdevice-flow" /> ); }; diff --git a/example/src/TouchDevice/touch-device.css b/example/src/TouchDevice/touch-device.css index c1f8d4bf..ac3f372d 100644 --- a/example/src/TouchDevice/touch-device.css +++ b/example/src/TouchDevice/touch-device.css @@ -1,11 +1,11 @@ -.react-flow .react-flow__handle { +.touchdevice-flow .react-flow__handle { width: 20px; height: 20px; border-radius: 3px; background-color: #9f7aea; } -.react-flow__handle.connecting { +.touchdevice-flow .react-flow__handle.connecting { animation: bounce 1600ms infinite ease-out; } diff --git a/example/src/index.tsx b/example/src/index.tsx index ef35a97e..5588eee0 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -2,6 +2,7 @@ import { ChangeEvent } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom'; +import Overview from './Overview'; import Basic from './Basic'; import UpdateNode from './UpdateNode'; import Stress from './Stress'; @@ -18,6 +19,10 @@ import './index.css'; const routes = [ { path: '/', + component: Overview, + }, + { + path: '/basic', component: Basic, }, { diff --git a/example/src_oldapi/Basic/index.tsx b/example/src_oldapi/Basic/index.tsx deleted file mode 100644 index 19523f9b..00000000 --- a/example/src_oldapi/Basic/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useState, MouseEvent } from 'react'; - -import ReactFlow, { - removeElements, - addEdge, - isNode, - Background, - Elements, - BackgroundVariant, - FlowElement, - Node, - Edge, - Connection, - OnLoadParams, -} from 'react-flow-renderer'; - -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); -const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element); - -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' }, -]; - -const initialEdges: Edge[] = [ - { id: 'e1-2', source: '1', target: '2', animated: true }, - { id: 'e1-3', source: '1', target: '3' }, -]; - -const BasicFlow = () => { - const [rfInstance, setRfInstance] = useState(null); - const [nodes, setNodes] = useState(initialNodes); - const [edges, setEdges] = useState(initialEdges); - // const onElementsRemove = (elementsToRemove: Elements) => setNodes((els) => removeElements(elementsToRemove, els)); - // const onConnect = (params: Edge | Connection) => setNodes((els) => addEdge(params, els)); - const onLoad = (reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance); - - const updatePos = () => { - setNodes((nds) => { - return nds.map((n) => { - n.position = { - x: Math.random() * 400, - y: Math.random() * 400, - }; - - return n; - }); - }); - }; - - const logToObject = () => console.log(rfInstance?.toObject()); - const resetTransform = () => rfInstance?.setTransform({ x: 0, y: 0, zoom: 1 }); - - const toggleClassnames = () => { - setNodes((nds) => { - return nds.map((n) => { - n.className = n.className === 'light' ? 'dark' : 'light'; - - return n; - }); - }); - }; - - return ( - - - -
- - - - -
- - ); -}; - -export default BasicFlow; diff --git a/example/src_oldapi/CustomNode/ColorSelectorNode.tsx b/example/src_oldapi/CustomNode/ColorSelectorNode.tsx deleted file mode 100644 index 7ad20340..00000000 --- a/example/src_oldapi/CustomNode/ColorSelectorNode.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { memo, FC, CSSProperties } from 'react'; - -import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer'; - -const targetHandleStyle: CSSProperties = { background: '#555' }; -const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 }; -const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' }; - -const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params); - -const ColorSelectorNode: FC = ({ data, isConnectable }) => { - return ( - <> - -
- Custom Color Picker Node: {data.color} -
- - - - - ); -}; - -export default memo(ColorSelectorNode); diff --git a/example/src_oldapi/CustomNode/index.tsx b/example/src_oldapi/CustomNode/index.tsx deleted file mode 100644 index 804aabea..00000000 --- a/example/src_oldapi/CustomNode/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React, { useState, useEffect, MouseEvent } from 'react'; -import { ChangeEvent } from 'react'; - -import ReactFlow, { - isEdge, - removeElements, - addEdge, - MiniMap, - Controls, - Node, - FlowElement, - OnLoadParams, - Elements, - Position, - SnapGrid, - Connection, - Edge, -} from 'react-flow-renderer'; - -import ColorSelectorNode from './ColorSelectorNode'; - -const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance); -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); -const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element); - -const initBgColor = '#1A192B'; - -const connectionLineStyle = { stroke: '#fff' }; -const snapGrid: SnapGrid = [16, 16]; -const nodeTypes = { - selectorNode: ColorSelectorNode, -}; - -const CustomNodeFlow = () => { - const [elements, setElements] = useState([]); - const [bgColor, setBgColor] = useState(initBgColor); - - useEffect(() => { - const onChange = (event: ChangeEvent) => { - setElements((els) => - els.map((e) => { - if (isEdge(e) || e.id !== '2') { - return e; - } - - const color = event.target.value; - - setBgColor(color); - - return { - ...e, - data: { - ...e.data, - color, - }, - }; - }) - ); - }; - - setElements([ - { - id: '1', - type: 'input', - data: { label: 'An input node' }, - position: { x: 0, y: 50 }, - sourcePosition: Position.Right, - }, - { - id: '2', - type: 'selectorNode', - data: { onChange: onChange, color: initBgColor }, - style: { border: '1px solid #777', padding: 10 }, - position: { x: 250, y: 50 }, - }, - { - id: '3', - type: 'output', - data: { label: 'Output A' }, - position: { x: 550, y: 25 }, - targetPosition: Position.Left, - }, - { - id: '4', - type: 'output', - data: { label: 'Output B' }, - position: { x: 550, y: 100 }, - targetPosition: Position.Left, - }, - - { 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 onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); - const onConnect = (params: Connection | Edge) => - setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els)); - - return ( - - { - if (n.type === 'input') return '#0041d0'; - if (n.type === 'selectorNode') return bgColor; - if (n.type === 'output') return '#ff0072'; - - return '#eee'; - }} - nodeColor={(n: Node): string => { - if (n.type === 'selectorNode') return bgColor; - - return '#fff'; - }} - /> - - - ); -}; - -export default CustomNodeFlow; diff --git a/example/src_oldapi/Stress/index.tsx b/example/src_oldapi/Stress/index.tsx deleted file mode 100644 index b734c6b6..00000000 --- a/example/src_oldapi/Stress/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useState, CSSProperties } from 'react'; -import ReactFlow, { - removeElements, - addEdge, - MiniMap, - isNode, - Controls, - Background, - OnLoadParams, - Elements, - Connection, - Edge, -} from 'react-flow-renderer'; - -import { getElements } from './utils'; - -const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 }; - -const onLoad = (reactFlowInstance: OnLoadParams) => { - reactFlowInstance.fitView(); - console.log(reactFlowInstance.getElements()); -}; - -const initialElements: Elements = getElements(30, 30); - -const StressFlow = () => { - const [elements, setElements] = useState(initialElements); - const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); - const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els)); - - const updatePos = () => { - setElements((elms) => { - return elms.map((el) => { - if (isNode(el)) { - return { - ...el, - position: { - x: Math.random() * window.innerWidth, - y: Math.random() * window.innerHeight, - }, - }; - } - - return el; - }); - }); - }; - - const updateElements = () => { - const grid = Math.ceil(Math.random() * 10); - setElements(getElements(grid, grid)); - }; - - return ( - - - - - -
- - -
- - ); -}; - -export default StressFlow; diff --git a/example/src_oldapi/Stress/utils.ts b/example/src_oldapi/Stress/utils.ts deleted file mode 100644 index a37eb8de..00000000 --- a/example/src_oldapi/Stress/utils.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Elements } from 'react-flow-renderer'; - -export function getElements(xElements: number = 10, yElements: number = 10): Elements { - const initialElements = []; - let nodeId = 1; - let recentNodeId = null; - - for (let y = 0; y < yElements; y++) { - for (let x = 0; x < xElements; x++) { - const position = { x: x * 100, y: y * 50 }; - const data = { label: `Node ${nodeId}` }; - const node = { - id: nodeId.toString(), - style: { width: 50, fontSize: 11 }, - data, - position, - }; - initialElements.push(node); - - if (recentNodeId && nodeId <= xElements * yElements) { - initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() }); - } - - recentNodeId = nodeId; - nodeId++; - } - } - - return initialElements; -} diff --git a/src/types/general.ts b/src/types/general.ts index 0c6a5a7f..318f2472 100644 --- a/src/types/general.ts +++ b/src/types/general.ts @@ -206,4 +206,9 @@ export type ReactFlowState = ReactFlowStore & ReactFlowActions; export type UpdateNodeInternals = (nodeId: string) => void; -export type OnSelectionChangeFunc = (params: { nodes: Node[]; edges: Edge[] }) => void; +export type OnSelectionChangeParams = { + nodes: Node[]; + edges: Edge[]; +}; + +export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;