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

Merge branch 'next' into absolute-origin

Browse Source
This commit is contained in:
Moritz Klack
2024-06-24 12:57:24 +02:00
committed by GitHub
parent c986471b43 bedd05663e
commit 67e29b6c25
91 changed files with 8822 additions and 7060 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/App/routes.ts
+4 -4
View File
@@ -34,7 +34,7 @@ import Subflow from '../examples/Subflow';
import SwitchFlow from '../examples/Switch';
import TouchDevice from '../examples/TouchDevice';
import Undirectional from '../examples/Undirectional';
import UpdatableEdge from '../examples/UpdatableEdge';
import ReconnectEdge from '../examples/ReconnectEdge';
import UpdateNode from '../examples/UpdateNode';
import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
import UseReactFlow from '../examples/UseReactFlow';
@@ -271,9 +271,9 @@ const routes: IRoute[] = [
component: Undirectional,
},
{
name: 'Updatable Edge',
path: 'updatable-edge',
component: UpdatableEdge,
name: 'Reconnect Edge',
path: 'reconnect-edge',
component: ReconnectEdge,
},
{
name: 'Update Node',
examples/react/src/examples/ControlledUncontrolled/index.tsx
+11 -9
View File
@@ -60,12 +60,13 @@ const ControlledUncontrolled = () => {
const updateNodePositions = () => {
instance.setNodes((nodes) =>
nodes.map((node) => {
node.position = {
x: Math.random() * 400,
y: Math.random() * 400,
return {
...node,
position: {
x: Math.random() * 400,
y: Math.random() * 400,
},
};
return node;
})
);
};
@@ -73,11 +74,12 @@ const ControlledUncontrolled = () => {
const updateEdgeColors = () => {
instance.setEdges((edges) =>
edges.map((edge) => {
edge.style = {
stroke: '#ff5050',
return {
...edge,
style: {
stroke: '#ff5050',
},
};
return edge;
})
);
};
examples/react/src/examples/DefaultNodes/index.tsx
+1
View File
@@ -25,6 +25,7 @@ const defaultNodes: Node[] = [
},
{
id: '3',
type: 'output',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
examples/react/src/examples/DragNDrop/index.tsx
+1
View File
@@ -77,6 +77,7 @@ const DnDFlow = () => {
onInit={onInit}
onDrop={onDrop}
onDragOver={onDragOver}
nodeOrigin={nodeOrigin}
>
<Controls />
</ReactFlow>
examples/react/src/examples/Hidden/index.tsx
+2
View File
@@ -73,6 +73,8 @@ const HiddenFlow = () => {
setEdges(setHidden(isHidden));
}, [isHidden, setEdges, setNodes]);
console.log(nodes);
return (
<ReactFlow
nodes={nodes}
examples/react/src/examples/MultiSetNodes/index.tsx
+12 -2
View File
@@ -28,10 +28,15 @@ for (let i = 0; i < 100; i++) {
});
}
const initEdges: Edge[] = [];
const initEdges: Edge[] = initNodes.reduce<Edge[]>((res, node, index) => {
if (index > 0) {
res.push({ id: `${index - 1}-${index}`, source: (index - 1).toString(), target: index.toString() });
}
return res;
}, []);
const CustomNodeFlow = () => {
const { setNodes, updateNodeData } = useReactFlow();
const { setNodes, updateNodeData, updateEdge } = useReactFlow();
const [nodes, , onNodesChange] = useNodesState(initNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
@@ -55,6 +60,10 @@ const CustomNodeFlow = () => {
nodes.forEach((node) => updateNodeData(node.id, { label: 'node update' }));
};
const multiUpdateEdges = () => {
edges.forEach((edge) => updateEdge(edge.id, { label: 'edge update' }));
};
return (
<ReactFlow
nodes={nodes}
@@ -70,6 +79,7 @@ const CustomNodeFlow = () => {
<Panel>
<button onClick={multiSetNodes}>set nodes</button>
<button onClick={multiUpdateNodes}>update nodes</button>
<button onClick={multiUpdateEdges}>update edges</button>
</Panel>
</ReactFlow>
);
examples/react/src/examples/NodeTypesObjectChange/index.tsx
+9
View File
@@ -28,6 +28,14 @@ const initialNodes: Node[] = [
data: { label: 'A Node' },
position: { x: 250, y: 0 },
},
{
id: '3',
type: 'b',
sourcePosition: Position.Right,
targetPosition: Position.Left,
data: { label: 'B Node' },
position: { x: 350, y: 0 },
},
];
const buttonStyle: CSSProperties = {
@@ -78,6 +86,7 @@ const NodeTypeChangeFlow = () => {
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypesObjects[nodeTypesId]}
fitView
>
<button onClick={changeType} style={buttonStyle}>
change type
examples/react/src/examples/UpdatableEdge/index.tsx → examples/react/src/examples/ReconnectEdge/index.tsx
+12 -12
View File
@@ -2,7 +2,7 @@ import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react';
import {
ReactFlow,
Controls,
updateEdge,
reconnectEdge,
addEdge,
applyNodeChanges,
applyEdgeChanges,
@@ -91,21 +91,21 @@ const initialNodes: Node[] = [
];
const initialEdges: Edge[] = [
{ id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', updatable: 'source' },
{ id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', updatable: 'target' },
{ id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', reconnectable: 'source' },
{ id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', reconnectable: 'target' },
{ id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' },
];
const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
const onReconnectStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
console.log(`start update ${handleType} handle`, edge);
const onEdgeUpdateEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
const onReconnectEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
console.log(`end update ${handleType} handle`, edge);
const UpdatableEdge = () => {
const ReconnectEdge = () => {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
setEdges((els) => updateEdge(oldEdge, newConnection, els));
const onReconnect = (oldEdge: Edge, newConnection: Connection) =>
setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
const onNodesChange = useCallback((changes: NodeChange[]) => {
@@ -123,10 +123,10 @@ const UpdatableEdge = () => {
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
snapToGrid={true}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
onConnect={onConnect}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
fitView
>
<Controls />
@@ -134,4 +134,4 @@ const UpdatableEdge = () => {
);
};
export default UpdatableEdge;
export default ReconnectEdge;
examples/react/src/examples/Undirectional/index.tsx
+13 -13
View File
@@ -10,7 +10,7 @@ import {
Edge,
ConnectionLineType,
ConnectionMode,
updateEdge,
reconnectEdge,
useNodesState,
useEdgesState,
} from '@xyflow/react';
@@ -22,55 +22,55 @@ const initialNodes: Node[] = [
id: '00',
type: 'custom',
position: { x: 300, y: 250 },
data: null,
data: {},
},
{
id: '01',
type: 'custom',
position: { x: 100, y: 50 },
data: null,
data: {},
},
{
id: '02',
type: 'custom',
position: { x: 500, y: 50 },
data: null,
data: {},
},
{
id: '03',
type: 'custom',
position: { x: 500, y: 500 },
data: null,
data: {},
},
{
id: '04',
type: 'custom',
position: { x: 100, y: 500 },
data: null,
data: {},
},
{
id: '10',
type: 'custom',
position: { x: 300, y: 5 },
data: null,
data: {},
},
{
id: '20',
type: 'custom',
position: { x: 600, y: 250 },
data: null,
data: {},
},
{
id: '30',
type: 'custom',
position: { x: 300, y: 600 },
data: null,
data: {},
},
{
id: '40',
type: 'custom',
position: { x: 5, y: 250 },
data: null,
data: {},
},
];
@@ -186,8 +186,8 @@ const UpdateNodeInternalsFlow = () => {
const { screenToFlowPosition } = useReactFlow();
const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
const onEdgeUpdate = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
const onReconnect = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
[]
);
@@ -215,7 +215,7 @@ const UpdateNodeInternalsFlow = () => {
onPaneClick={onPaneClick}
connectionLineType={ConnectionLineType.Bezier}
connectionMode={ConnectionMode.Loose}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
/>
);
};
examples/react/src/examples/UseKeyPress/index.tsx
+4 -1
View File
@@ -1,9 +1,12 @@
import { useKeyPress } from '@xyflow/react';
import { useEffect } from 'react';
const UseKeyPressComponent = () => {
const metaPressed = useKeyPress(['Meta']);
console.log({ metaPressed });
useEffect(() => {
console.log({ metaPressed });
}, [metaPressed]);
return <div />;
};
examples/react/src/examples/Validation/index.tsx
+9 -9
View File
@@ -13,7 +13,7 @@ import {
OnConnectStart,
OnConnectEnd,
OnConnect,
updateEdge,
reconnectEdge,
Edge,
IsValidConnection,
OnBeforeDelete,
@@ -24,10 +24,10 @@ import ConnectionStatus from './ConnectionStatus';
import styles from './validation.module.css';
const initialNodes: Node[] = [
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null },
{ id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: null },
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: null },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: {} },
{ id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: {} },
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: {} },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: {} },
];
const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
@@ -41,7 +41,7 @@ const CustomInput: FC<NodeProps> = () => (
const CustomNode: FC<NodeProps> = ({ id }) => (
<>
<Handle type="target" position={Position.Left} isConnectableStart={false} />
<Handle type="target" position={Position.Top} isConnectableStart={false} />
<div>{id}</div>
<Handle type="source" position={Position.Right} />
</>
@@ -81,8 +81,8 @@ const ValidationFlow = () => {
[value]
);
const onEdgeUpdate = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
const onReconnect = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
[setEdges]
);
@@ -102,7 +102,7 @@ const ValidationFlow = () => {
nodeTypes={nodeTypes}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
isValidConnection={isValidConnection}
onBeforeDelete={onBeforeDelete}
fitView
examples/react/src/generic-tests/edges/general.ts
+1 -1
View File
@@ -149,7 +149,7 @@ export default {
// source: '9',
// target: '11',
// label: 'focusable',
// updatable: true
// reconnectable: true
// },
// {
// id: 'not-focusable',