alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into v11

Browse Source
This commit is contained in:
moklick
2022-07-18 18:08:00 +02:00
parent 1bb32c8eb7 a2c22168a3
commit 6baf325b24
39 changed files with 7344 additions and 5892 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/example/package.json
+1 -1
View File
@@ -10,7 +10,7 @@
"react-flow-renderer": "file:../",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.6.4"
"typescript": "^4.7.4"
},
"scripts": {
"start": "react-scripts start",
packages/core/example/src/Basic/index.tsx
+2
View File
@@ -9,6 +9,7 @@ import ReactFlow, {
useReactFlow,
} from 'react-flow-renderer';
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -61,6 +62,7 @@ const BasicFlow = () => {
defaultEdges={initialEdges}
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDrag={onNodeDrag}
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}
packages/core/example/src/CustomConnectionLine/ConnectionLine.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import { ConnectionLineComponentProps } from 'react-flow-renderer';
const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY }) => {
const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY, toX, toY }) => {
return (
<g>
<path
@@ -11,7 +11,7 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, ta
className="animated"
d={`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`}
/>
<circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
<circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
</g>
);
};
packages/core/example/src/CustomConnectionLine/index.tsx
+3 -2
View File
@@ -1,3 +1,4 @@
import { useCallback } from 'react';
import ReactFlow, {
Node,
addEdge,
@@ -11,13 +12,13 @@ import ReactFlow, {
import ConnectionLine from './ConnectionLine';
const initialNodes: Node[] = [{ id: '1', type: 'input', 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 = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow
packages/core/example/src/SaveRestore/Controls.tsx
+7 -9
View File
@@ -1,5 +1,5 @@
import React, { memo, useCallback, Dispatch, FC } from 'react';
import { useReactFlow, ReactFlowInstance, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
import localforage from 'localforage';
localforage.config({
@@ -12,20 +12,17 @@ const flowKey = 'example-flow';
const getNodeId = () => `randomnode_${+new Date()}`;
type ControlsProps = {
rfInstance?: ReactFlowInstance;
setNodes: Dispatch<React.SetStateAction<Node<any>[]>>;
setEdges: Dispatch<React.SetStateAction<Edge<any>[]>>;
};
const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
const { setViewport } = useReactFlow();
const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
const { setViewport, toObject } = useReactFlow();
const onSave = useCallback(() => {
if (rfInstance) {
const flow = rfInstance.toObject();
localforage.setItem(flowKey, flow);
}
}, [rfInstance]);
const flow = toObject();
localforage.setItem(flowKey, flow);
}, [toObject]);
const onRestore = useCallback(() => {
const restoreFlow = async () => {
@@ -33,6 +30,7 @@ const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
if (flow) {
const { x, y, zoom } = flow.viewport;
setNodes(flow.nodes || []);
setEdges(flow.edges || []);
setViewport({ x, y, zoom: zoom || 0 });
packages/core/example/src/SaveRestore/index.tsx
+3 -6
View File
@@ -1,11 +1,10 @@
import { useState } from 'react';
import { useCallback } from 'react';
import ReactFlow, {
ReactFlowProvider,
Node,
addEdge,
Connection,
Edge,
ReactFlowInstance,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
@@ -22,10 +21,9 @@ const initialNodes: Node[] = [
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
const SaveRestore = () => {
const [rfInstance, setRfInstance] = useState<ReactFlowInstance>();
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlowProvider>
@@ -35,9 +33,8 @@ const SaveRestore = () => {
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
onInit={setRfInstance}
>
<Controls rfInstance={rfInstance} setNodes={setNodes} setEdges={setEdges} />
<Controls setNodes={setNodes} setEdges={setEdges} />
</ReactFlow>
</ReactFlowProvider>
);
packages/core/example/src/Subflow/DebugNode.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ const idStyle: CSSProperties = {
left: 2,
};
const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
return (
<>
<Handle type="target" position={Position.Top} />
@@ -24,4 +24,4 @@ const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
);
};
export default memo(ColorSelectorNode);
export default memo(DebugNode);
packages/core/example/src/Subflow/index.tsx
+4
View File
@@ -15,6 +15,7 @@ import ReactFlow, {
} from 'react-flow-renderer';
import DebugNode from './DebugNode';
const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
@@ -82,6 +83,7 @@ const initialNodes: Node[] = [
position: { x: 25, y: 50 },
className: 'light',
parentNode: '5',
extent: 'parent',
},
{
id: '5b',
@@ -89,6 +91,7 @@ const initialNodes: Node[] = [
position: { x: 225, y: 50 },
className: 'light',
parentNode: '5',
expandParent: true,
},
{ 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' },
@@ -167,6 +170,7 @@ const Subflow = () => {
onNodeClick={onNodeClick}
onEdgeClick={onEdgeClick}
onConnect={onConnect}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop}
className="react-flow-basic-example"
defaultZoom={1.5}
packages/core/example/src/Validation/index.tsx
+26 -11
View File
@@ -1,4 +1,4 @@
import { MouseEvent as ReactMouseEvent, FC } from 'react';
import { FC, useCallback, useState } from 'react';
import ReactFlow, {
addEdge,
Handle,
@@ -6,11 +6,11 @@ import ReactFlow, {
Position,
Node,
Edge,
OnConnectStartParams,
NodeProps,
NodeTypes,
useNodesState,
useEdgesState,
OnConnectStartParams,
} from 'react-flow-renderer';
import './validation.css';
@@ -23,10 +23,6 @@ const initialNodes: Node[] = [
];
const isValidConnection = (connection: Connection) => connection.target === 'B';
const onConnectStart = (_: ReactMouseEvent, { nodeId, handleType }: OnConnectStartParams) =>
console.log('on connect start', { nodeId, handleType });
const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event);
const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event);
const CustomInput: FC<NodeProps> = () => (
<>
@@ -49,13 +45,33 @@ const nodeTypes: NodeTypes = {
};
const ValidationFlow = () => {
const [value, setValue] = useState(0);
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = (params: Connection | Edge) => {
console.log('on connect', params);
setEdges((eds) => addEdge(params, eds));
};
const onConnectStart = useCallback(
(event: React.MouseEvent, params: OnConnectStartParams) => {
console.log('on connect start', params, event, value);
setValue(1);
},
[value]
);
const onConnect = useCallback(
(params: Connection | Edge) => {
console.log('on connect', params);
setEdges((eds) => addEdge(params, eds));
},
[setEdges]
);
const onConnectEnd = useCallback(
(event: MouseEvent) => {
console.log('on connect end', event, value);
setValue(0);
},
[value]
);
return (
<ReactFlow
@@ -68,7 +84,6 @@ const ValidationFlow = () => {
className="validationflow"
nodeTypes={nodeTypes}
onConnectStart={onConnectStart}
onConnectStop={onConnectStop}
onConnectEnd={onConnectEnd}
fitView
/>