Merge branch 'next' into feat/multiple-on-selection-change
This commit is contained in:
moklick
@@ -0,0 +1,34 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import routes from './routes';
|
||||
|
||||
export default function Header() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentPath, setCurrentPath] = useState(location.pathname);
|
||||
|
||||
useEffect(() => {
|
||||
const name = routes.find((route) => route.path === currentPath)?.name;
|
||||
document.title = `React Flow Examples${name ? ' - ' + name : ''}`;
|
||||
navigate(currentPath);
|
||||
}, [currentPath]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<a className="logo" href="https://github.com/xyflow/xyflow">
|
||||
React Flow Dev
|
||||
</a>
|
||||
<select value={currentPath} onChange={(event) => setCurrentPath(event.target.value)}>
|
||||
{routes.map((route) => (
|
||||
<option value={route.path} key={route.path}>
|
||||
{route.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</header>
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,326 +1,21 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import routes from './routes';
|
||||
import GenericTestRoutes from '../generic-tests';
|
||||
import Basic from '../examples/Basic';
|
||||
import Backgrounds from '../examples/Backgrounds';
|
||||
import ControlledUncontrolled from '../examples/ControlledUncontrolled';
|
||||
import ControlledViewport from '../examples/ControlledViewport';
|
||||
import CustomConnectionLine from '../examples/CustomConnectionLine';
|
||||
import CustomMiniMapNode from '../examples/CustomMiniMapNode';
|
||||
import CustomNode from '../examples/CustomNode';
|
||||
import DefaultNodes from '../examples/DefaultNodes';
|
||||
import DragHandle from '../examples/DragHandle';
|
||||
import DragNDrop from '../examples/DragNDrop';
|
||||
import EasyConnect from '../examples/EasyConnect';
|
||||
import Edges from '../examples/Edges';
|
||||
import EdgeRenderer from '../examples/EdgeRenderer';
|
||||
import EdgeTypes from '../examples/EdgeTypes';
|
||||
import Empty from '../examples/Empty';
|
||||
import Figma from '../examples/Figma';
|
||||
import FloatingEdges from '../examples/FloatingEdges';
|
||||
import Hidden from '../examples/Hidden';
|
||||
import Interaction from '../examples/Interaction';
|
||||
import Intersection from '../examples/Intersection';
|
||||
import Layouting from '../examples/Layouting';
|
||||
import MultiFlows from '../examples/MultiFlows';
|
||||
import NestedNodes from '../examples/NestedNodes';
|
||||
import NodeResizer from '../examples/NodeResizer';
|
||||
import NodeTypeChange from '../examples/NodeTypeChange';
|
||||
import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
|
||||
import Overview from '../examples/Overview';
|
||||
import Provider from '../examples/Provider';
|
||||
import SaveRestore from '../examples/SaveRestore';
|
||||
import Stress from '../examples/Stress';
|
||||
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 UpdateNode from '../examples/UpdateNode';
|
||||
import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
|
||||
import UseReactFlow from '../examples/UseReactFlow';
|
||||
import Validation from '../examples/Validation';
|
||||
import UseKeyPress from '../examples/UseKeyPress';
|
||||
import EdgeRouting from '../examples/EdgeRouting';
|
||||
import CancelConnection from '../examples/CancelConnection';
|
||||
import InteractiveMinimap from '../examples/InteractiveMinimap';
|
||||
import UseOnSelectionChange from '../examples/UseOnSelectionChange';
|
||||
import NodeToolbar from '../examples/NodeToolbar';
|
||||
import useNodesInitialized from '../examples/UseNodesInit';
|
||||
|
||||
interface IRoute {
|
||||
name: string;
|
||||
path: string;
|
||||
component: React.ComponentType;
|
||||
}
|
||||
|
||||
const routes: IRoute[] = [
|
||||
{
|
||||
name: 'Basic',
|
||||
path: '/',
|
||||
component: Basic,
|
||||
},
|
||||
{
|
||||
name: 'Backgrounds',
|
||||
path: '/backgrounds',
|
||||
component: Backgrounds,
|
||||
},
|
||||
{
|
||||
name: 'Cancel Connection',
|
||||
path: '/cancel-connection',
|
||||
component: CancelConnection,
|
||||
},
|
||||
{
|
||||
name: 'Controlled/Uncontrolled',
|
||||
path: '/controlled-uncontrolled',
|
||||
component: ControlledUncontrolled,
|
||||
},
|
||||
{
|
||||
name: 'Controlled Viewport',
|
||||
path: '/controlled-viewport',
|
||||
component: ControlledViewport,
|
||||
},
|
||||
{
|
||||
name: 'Custom Connection Line',
|
||||
path: '/custom-connectionline',
|
||||
component: CustomConnectionLine,
|
||||
},
|
||||
{
|
||||
name: 'Custom Minimap Node',
|
||||
path: '/custom-minimap-node',
|
||||
component: CustomMiniMapNode,
|
||||
},
|
||||
{
|
||||
name: 'Custom Node',
|
||||
path: '/custom-node',
|
||||
component: CustomNode,
|
||||
},
|
||||
{
|
||||
name: 'Default Nodes',
|
||||
path: '/default-nodes',
|
||||
component: DefaultNodes,
|
||||
},
|
||||
{
|
||||
name: 'Drag Handle',
|
||||
path: '/draghandle',
|
||||
component: DragHandle,
|
||||
},
|
||||
{
|
||||
name: 'Drag and Drop',
|
||||
path: '/dragndrop',
|
||||
component: DragNDrop,
|
||||
},
|
||||
{
|
||||
name: 'EasyConnect',
|
||||
path: '/easy-connect',
|
||||
component: EasyConnect,
|
||||
},
|
||||
{
|
||||
name: 'Edges',
|
||||
path: '/edges',
|
||||
component: Edges,
|
||||
},
|
||||
{
|
||||
name: 'Edge Renderer',
|
||||
path: '/edge-renderer',
|
||||
component: EdgeRenderer,
|
||||
},
|
||||
{
|
||||
name: 'Edge Types',
|
||||
path: '/edge-types',
|
||||
component: EdgeTypes,
|
||||
},
|
||||
{
|
||||
name: 'Edge Routing',
|
||||
path: '/edge-routing',
|
||||
component: EdgeRouting,
|
||||
},
|
||||
{
|
||||
name: 'Empty',
|
||||
path: '/empty',
|
||||
component: Empty,
|
||||
},
|
||||
{
|
||||
name: 'Figma',
|
||||
path: '/figma',
|
||||
component: Figma,
|
||||
},
|
||||
{
|
||||
name: 'Floating Edges',
|
||||
path: '/floating-edges',
|
||||
component: FloatingEdges,
|
||||
},
|
||||
{
|
||||
name: 'Hidden',
|
||||
path: '/hidden',
|
||||
component: Hidden,
|
||||
},
|
||||
{
|
||||
name: 'Interaction',
|
||||
path: '/interaction',
|
||||
component: Interaction,
|
||||
},
|
||||
{
|
||||
name: 'Intersection',
|
||||
path: '/intersection',
|
||||
component: Intersection,
|
||||
},
|
||||
{
|
||||
name: 'Interactive Minimap',
|
||||
path: '/interactive-minimap',
|
||||
component: InteractiveMinimap,
|
||||
},
|
||||
{
|
||||
name: 'Layouting',
|
||||
path: '/layouting',
|
||||
component: Layouting,
|
||||
},
|
||||
{
|
||||
name: 'Multi Flows',
|
||||
path: '/multiflows',
|
||||
component: MultiFlows,
|
||||
},
|
||||
{
|
||||
name: 'Nested Nodes',
|
||||
path: '/nested-nodes',
|
||||
component: NestedNodes,
|
||||
},
|
||||
{
|
||||
name: 'Node Type Change',
|
||||
path: '/nodetype-change',
|
||||
component: NodeTypeChange,
|
||||
},
|
||||
{
|
||||
name: 'nodeTypes Object Change',
|
||||
path: '/nodetypesobject-change',
|
||||
component: NodeTypesObjectChange,
|
||||
},
|
||||
{
|
||||
name: 'NodeToolbar',
|
||||
path: '/node-toolbar',
|
||||
component: NodeToolbar,
|
||||
},
|
||||
{
|
||||
name: 'NodeResizer',
|
||||
path: '/node-resizer',
|
||||
component: NodeResizer,
|
||||
},
|
||||
{
|
||||
name: 'Overview',
|
||||
path: '/overview',
|
||||
component: Overview,
|
||||
},
|
||||
{
|
||||
name: 'Provider',
|
||||
path: '/provider',
|
||||
component: Provider,
|
||||
},
|
||||
{
|
||||
name: 'Save/Restore',
|
||||
path: '/save-restore',
|
||||
component: SaveRestore,
|
||||
},
|
||||
{
|
||||
name: 'Stress',
|
||||
path: '/stress',
|
||||
component: Stress,
|
||||
},
|
||||
{
|
||||
name: 'Subflow',
|
||||
path: '/subflow',
|
||||
component: Subflow,
|
||||
},
|
||||
{
|
||||
name: 'Switch Flow',
|
||||
path: '/switch',
|
||||
component: SwitchFlow,
|
||||
},
|
||||
{
|
||||
name: 'Touch Device',
|
||||
path: '/touch-device',
|
||||
component: TouchDevice,
|
||||
},
|
||||
{
|
||||
name: 'Undirectional',
|
||||
path: '/undirectional',
|
||||
component: Undirectional,
|
||||
},
|
||||
{
|
||||
name: 'Updatable Edge',
|
||||
path: '/updatable-edge',
|
||||
component: UpdatableEdge,
|
||||
},
|
||||
{
|
||||
name: 'Update Node',
|
||||
path: '/update-node',
|
||||
component: UpdateNode,
|
||||
},
|
||||
{
|
||||
name: 'useNodesInitialized',
|
||||
path: '/use-nodes-initialized',
|
||||
component: useNodesInitialized,
|
||||
},
|
||||
{
|
||||
name: 'useOnSelectionChange',
|
||||
path: '/use-on-selection-change',
|
||||
component: UseOnSelectionChange,
|
||||
},
|
||||
{
|
||||
name: 'useReactFlow',
|
||||
path: '/usereactflow',
|
||||
component: UseReactFlow,
|
||||
},
|
||||
{
|
||||
name: 'useUpdateNodeInternals',
|
||||
path: '/useupdatenodeinternals',
|
||||
component: UseUpdateNodeInternals,
|
||||
},
|
||||
{
|
||||
name: 'Validation',
|
||||
path: '/validation',
|
||||
component: Validation,
|
||||
},
|
||||
{
|
||||
name: 'useKeyPress',
|
||||
path: '/use-key-press',
|
||||
component: UseKeyPress,
|
||||
},
|
||||
];
|
||||
|
||||
const Header = () => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentPath, setCurrentPath] = useState(location.pathname);
|
||||
|
||||
useEffect(() => {
|
||||
const name = routes.find((route) => route.path === currentPath)?.name;
|
||||
document.title = `React Flow Examples${name ? ' - ' + name : ''}`;
|
||||
navigate(currentPath);
|
||||
}, [currentPath]);
|
||||
|
||||
return (
|
||||
<header>
|
||||
<a className="logo" href="https://github.com/wbkd/react-flow">
|
||||
React Flow Dev
|
||||
</a>
|
||||
<select value={currentPath} onChange={(event) => setCurrentPath(event.target.value)}>
|
||||
{routes.map((route) => (
|
||||
<option value={route.path} key={route.path}>
|
||||
{route.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
import Header from './header';
|
||||
|
||||
export default () => (
|
||||
<BrowserRouter>
|
||||
<Header />
|
||||
<Routes>
|
||||
{routes.map((route) => (
|
||||
<Route path={route.path} key={route.path} element={<route.component />} />
|
||||
))}
|
||||
<Route path="/" element={<Navigate to="/examples" />} />
|
||||
<Route path="examples" element={<Header />}>
|
||||
<Route index element={<Basic />} />
|
||||
{routes.map((route) => (
|
||||
<Route path={route.path} key={route.path} element={<route.component />} />
|
||||
))}
|
||||
</Route>
|
||||
<Route path="tests/generic/*" element={<GenericTestRoutes />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,287 @@
|
||||
import Basic from '../examples/Basic';
|
||||
import Backgrounds from '../examples/Backgrounds';
|
||||
import ControlledUncontrolled from '../examples/ControlledUncontrolled';
|
||||
import ControlledViewport from '../examples/ControlledViewport';
|
||||
import CustomConnectionLine from '../examples/CustomConnectionLine';
|
||||
import CustomMiniMapNode from '../examples/CustomMiniMapNode';
|
||||
import CustomNode from '../examples/CustomNode';
|
||||
import DefaultNodes from '../examples/DefaultNodes';
|
||||
import DragHandle from '../examples/DragHandle';
|
||||
import DragNDrop from '../examples/DragNDrop';
|
||||
import EasyConnect from '../examples/EasyConnect';
|
||||
import Edges from '../examples/Edges';
|
||||
import EdgeRenderer from '../examples/EdgeRenderer';
|
||||
import EdgeTypes from '../examples/EdgeTypes';
|
||||
import Empty from '../examples/Empty';
|
||||
import Figma from '../examples/Figma';
|
||||
import FloatingEdges from '../examples/FloatingEdges';
|
||||
import Hidden from '../examples/Hidden';
|
||||
import Interaction from '../examples/Interaction';
|
||||
import Intersection from '../examples/Intersection';
|
||||
import Layouting from '../examples/Layouting';
|
||||
import MultiFlows from '../examples/MultiFlows';
|
||||
import NestedNodes from '../examples/NestedNodes';
|
||||
import NodeResizer from '../examples/NodeResizer';
|
||||
import NodeTypeChange from '../examples/NodeTypeChange';
|
||||
import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
|
||||
import Overview from '../examples/Overview';
|
||||
import Provider from '../examples/Provider';
|
||||
import SaveRestore from '../examples/SaveRestore';
|
||||
import Stress from '../examples/Stress';
|
||||
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 UpdateNode from '../examples/UpdateNode';
|
||||
import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
|
||||
import UseReactFlow from '../examples/UseReactFlow';
|
||||
import Validation from '../examples/Validation';
|
||||
import UseKeyPress from '../examples/UseKeyPress';
|
||||
import EdgeRouting from '../examples/EdgeRouting';
|
||||
import CancelConnection from '../examples/CancelConnection';
|
||||
import InteractiveMinimap from '../examples/InteractiveMinimap';
|
||||
import UseOnSelectionChange from '../examples/UseOnSelectionChange';
|
||||
import NodeToolbar from '../examples/NodeToolbar';
|
||||
import useNodesInitialized from '../examples/UseNodesInit';
|
||||
|
||||
export interface IRoute {
|
||||
name: string;
|
||||
path: string;
|
||||
component: React.ComponentType;
|
||||
}
|
||||
|
||||
const routes: IRoute[] = [
|
||||
{
|
||||
name: 'Basic',
|
||||
path: 'basic',
|
||||
component: Basic,
|
||||
},
|
||||
{
|
||||
name: 'Backgrounds',
|
||||
path: 'backgrounds',
|
||||
component: Backgrounds,
|
||||
},
|
||||
{
|
||||
name: 'Cancel Connection',
|
||||
path: 'cancel-connection',
|
||||
component: CancelConnection,
|
||||
},
|
||||
{
|
||||
name: 'Controlled/Uncontrolled',
|
||||
path: 'controlled-uncontrolled',
|
||||
component: ControlledUncontrolled,
|
||||
},
|
||||
{
|
||||
name: 'Controlled Viewport',
|
||||
path: 'controlled-viewport',
|
||||
component: ControlledViewport,
|
||||
},
|
||||
{
|
||||
name: 'Custom Connection Line',
|
||||
path: 'custom-connectionline',
|
||||
component: CustomConnectionLine,
|
||||
},
|
||||
{
|
||||
name: 'Custom Minimap Node',
|
||||
path: 'custom-minimap-node',
|
||||
component: CustomMiniMapNode,
|
||||
},
|
||||
{
|
||||
name: 'Custom Node',
|
||||
path: 'custom-node',
|
||||
component: CustomNode,
|
||||
},
|
||||
{
|
||||
name: 'Default Nodes',
|
||||
path: 'default-nodes',
|
||||
component: DefaultNodes,
|
||||
},
|
||||
{
|
||||
name: 'Drag Handle',
|
||||
path: 'draghandle',
|
||||
component: DragHandle,
|
||||
},
|
||||
{
|
||||
name: 'Drag and Drop',
|
||||
path: 'dragndrop',
|
||||
component: DragNDrop,
|
||||
},
|
||||
{
|
||||
name: 'EasyConnect',
|
||||
path: 'easy-connect',
|
||||
component: EasyConnect,
|
||||
},
|
||||
{
|
||||
name: 'Edges',
|
||||
path: 'edges',
|
||||
component: Edges,
|
||||
},
|
||||
{
|
||||
name: 'Edge Renderer',
|
||||
path: 'edge-renderer',
|
||||
component: EdgeRenderer,
|
||||
},
|
||||
{
|
||||
name: 'Edge Types',
|
||||
path: 'edge-types',
|
||||
component: EdgeTypes,
|
||||
},
|
||||
{
|
||||
name: 'Edge Routing',
|
||||
path: 'edge-routing',
|
||||
component: EdgeRouting,
|
||||
},
|
||||
{
|
||||
name: 'Empty',
|
||||
path: 'empty',
|
||||
component: Empty,
|
||||
},
|
||||
{
|
||||
name: 'Figma',
|
||||
path: 'figma',
|
||||
component: Figma,
|
||||
},
|
||||
{
|
||||
name: 'Floating Edges',
|
||||
path: 'floating-edges',
|
||||
component: FloatingEdges,
|
||||
},
|
||||
{
|
||||
name: 'Hidden',
|
||||
path: 'hidden',
|
||||
component: Hidden,
|
||||
},
|
||||
{
|
||||
name: 'Interaction',
|
||||
path: 'interaction',
|
||||
component: Interaction,
|
||||
},
|
||||
{
|
||||
name: 'Intersection',
|
||||
path: 'intersection',
|
||||
component: Intersection,
|
||||
},
|
||||
{
|
||||
name: 'Interactive Minimap',
|
||||
path: 'interactive-minimap',
|
||||
component: InteractiveMinimap,
|
||||
},
|
||||
{
|
||||
name: 'Layouting',
|
||||
path: 'layouting',
|
||||
component: Layouting,
|
||||
},
|
||||
{
|
||||
name: 'Multi Flows',
|
||||
path: 'multiflows',
|
||||
component: MultiFlows,
|
||||
},
|
||||
{
|
||||
name: 'Nested Nodes',
|
||||
path: 'nested-nodes',
|
||||
component: NestedNodes,
|
||||
},
|
||||
{
|
||||
name: 'Node Type Change',
|
||||
path: 'nodetype-change',
|
||||
component: NodeTypeChange,
|
||||
},
|
||||
{
|
||||
name: 'nodeTypes Object Change',
|
||||
path: 'nodetypesobject-change',
|
||||
component: NodeTypesObjectChange,
|
||||
},
|
||||
{
|
||||
name: 'NodeToolbar',
|
||||
path: 'node-toolbar',
|
||||
component: NodeToolbar,
|
||||
},
|
||||
{
|
||||
name: 'NodeResizer',
|
||||
path: 'node-resizer',
|
||||
component: NodeResizer,
|
||||
},
|
||||
{
|
||||
name: 'Overview',
|
||||
path: 'overview',
|
||||
component: Overview,
|
||||
},
|
||||
{
|
||||
name: 'Provider',
|
||||
path: 'provider',
|
||||
component: Provider,
|
||||
},
|
||||
{
|
||||
name: 'Save/Restore',
|
||||
path: 'save-restore',
|
||||
component: SaveRestore,
|
||||
},
|
||||
{
|
||||
name: 'Stress',
|
||||
path: 'stress',
|
||||
component: Stress,
|
||||
},
|
||||
{
|
||||
name: 'Subflow',
|
||||
path: 'subflow',
|
||||
component: Subflow,
|
||||
},
|
||||
{
|
||||
name: 'Switch Flow',
|
||||
path: 'switch',
|
||||
component: SwitchFlow,
|
||||
},
|
||||
{
|
||||
name: 'Touch Device',
|
||||
path: 'touch-device',
|
||||
component: TouchDevice,
|
||||
},
|
||||
{
|
||||
name: 'Undirectional',
|
||||
path: 'undirectional',
|
||||
component: Undirectional,
|
||||
},
|
||||
{
|
||||
name: 'Updatable Edge',
|
||||
path: 'updatable-edge',
|
||||
component: UpdatableEdge,
|
||||
},
|
||||
{
|
||||
name: 'Update Node',
|
||||
path: 'update-node',
|
||||
component: UpdateNode,
|
||||
},
|
||||
{
|
||||
name: 'useNodesInitialized',
|
||||
path: 'use-nodes-initialized',
|
||||
component: useNodesInitialized,
|
||||
},
|
||||
{
|
||||
name: 'useOnSelectionChange',
|
||||
path: 'use-on-selection-change',
|
||||
component: UseOnSelectionChange,
|
||||
},
|
||||
{
|
||||
name: 'useReactFlow',
|
||||
path: 'usereactflow',
|
||||
component: UseReactFlow,
|
||||
},
|
||||
{
|
||||
name: 'useUpdateNodeInternals',
|
||||
path: 'useupdatenodeinternals',
|
||||
component: UseUpdateNodeInternals,
|
||||
},
|
||||
{
|
||||
name: 'Validation',
|
||||
path: 'validation',
|
||||
component: Validation,
|
||||
},
|
||||
{
|
||||
name: 'useKeyPress',
|
||||
path: 'use-key-press',
|
||||
component: UseKeyPress,
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import { Edge, Node, ReactFlowProps } from '@xyflow/react';
|
||||
|
||||
declare global {
|
||||
interface FlowConfig {
|
||||
flowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
|
||||
}
|
||||
}
|
||||
@@ -41,6 +41,7 @@ const initialNodes: Node[] = [
|
||||
data: { label: 'Node 4' },
|
||||
position: { x: 400, y: 200 },
|
||||
className: 'light',
|
||||
connectable: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import {
|
||||
import {
|
||||
ReactFlow,
|
||||
addEdge,
|
||||
ReactFlowProvider,
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
useEdgesState,
|
||||
useOnSelectionChange,
|
||||
OnSelectionChangeParams,
|
||||
OnSelectionChangeFunc,
|
||||
} from '@xyflow/react';
|
||||
|
||||
const initialNodes: Node[] = [
|
||||
@@ -64,7 +65,7 @@ const Flow = () => {
|
||||
};
|
||||
|
||||
const WrappedFlow = () => {
|
||||
const [secondLoggerActive, setSecondLoggerActive] = useState<boolean>(false);
|
||||
const [secondLoggerActive, setSecondLoggerActive] = useState<boolean>(true);
|
||||
|
||||
const toggleSecondLogger = () => {
|
||||
setSecondLoggerActive(!secondLoggerActive);
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import {
|
||||
ReactFlow,
|
||||
applyNodeChanges,
|
||||
applyEdgeChanges,
|
||||
addEdge,
|
||||
OnNodesChange,
|
||||
OnEdgesChange,
|
||||
OnConnect,
|
||||
} from '@xyflow/react';
|
||||
|
||||
type FlowProps = {
|
||||
flowConfig: FlowConfig;
|
||||
};
|
||||
|
||||
export default ({ flowConfig }: FlowProps) => {
|
||||
const [nodes, setNodes] = useState(flowConfig.flowProps.nodes);
|
||||
const [edges, setEdges] = useState(flowConfig.flowProps.edges);
|
||||
const props = { ...flowConfig.flowProps, nodes, edges };
|
||||
|
||||
const onNodesChange: OnNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
|
||||
const onEdgesChange: OnEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
|
||||
const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
<ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,163 @@
|
||||
import { MarkerType } from '@xyflow/react';
|
||||
|
||||
export default {
|
||||
flowProps: {
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
data: { label: '4' },
|
||||
position: { x: -100, y: 200 },
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
data: { label: '5' },
|
||||
position: { x: 100, y: 200 },
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
data: { label: '6' },
|
||||
position: { x: -100, y: 300 },
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
data: { label: '7' },
|
||||
position: { x: 100, y: 300 },
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
data: { label: '8' },
|
||||
position: { x: -100, y: 400 },
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
data: { label: '9' },
|
||||
position: { x: 100, y: 400 },
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
data: { label: '10' },
|
||||
position: { x: -100, y: 500 },
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
data: { label: '11' },
|
||||
position: { x: 100, y: 500 },
|
||||
},
|
||||
// {
|
||||
// id: '12',
|
||||
// data: { label: '12' },
|
||||
// position: { x: -100, y: 600 }
|
||||
// },
|
||||
// {
|
||||
// id: '13',
|
||||
// data: { label: '13' },
|
||||
// position: { x: 100, y: 600 }
|
||||
// }
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'edge-with-class',
|
||||
source: '1',
|
||||
target: '2',
|
||||
className: 'edge-class-test',
|
||||
},
|
||||
{
|
||||
id: 'edge-with-style',
|
||||
source: '1',
|
||||
target: '3',
|
||||
style: {
|
||||
stroke: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'hidden-edge',
|
||||
source: '2',
|
||||
target: '4',
|
||||
label: 'hidden',
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
id: 'animated-edge',
|
||||
source: '3',
|
||||
target: '5',
|
||||
label: 'animated',
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: 'not-selectable-edge',
|
||||
source: '4',
|
||||
target: '6',
|
||||
label: 'not-selectable',
|
||||
selectable: false,
|
||||
},
|
||||
{
|
||||
id: 'not-deletable',
|
||||
source: '5',
|
||||
target: '7',
|
||||
label: 'not-deletable',
|
||||
deletable: false,
|
||||
},
|
||||
{
|
||||
id: 'z-index',
|
||||
source: '6',
|
||||
target: '8',
|
||||
label: 'z-index',
|
||||
zIndex: 3141592,
|
||||
},
|
||||
{
|
||||
id: 'aria-label',
|
||||
source: '7',
|
||||
target: '9',
|
||||
label: 'aria-label',
|
||||
ariaLabel: 'aria-label-test',
|
||||
},
|
||||
{
|
||||
id: 'interaction-width',
|
||||
source: '8',
|
||||
target: '10',
|
||||
label: 'interaction-width',
|
||||
interactionWidth: 42,
|
||||
},
|
||||
{
|
||||
id: 'markers',
|
||||
source: '9',
|
||||
target: '11',
|
||||
label: 'markers',
|
||||
markerEnd: { type: MarkerType.Arrow },
|
||||
markerStart: { type: MarkerType.ArrowClosed },
|
||||
},
|
||||
// {
|
||||
// id: 'updatable',
|
||||
// source: '9',
|
||||
// target: '11',
|
||||
// label: 'focusable',
|
||||
// updatable: true
|
||||
// },
|
||||
// {
|
||||
// id: 'not-focusable',
|
||||
//
|
||||
// source: '5',
|
||||
// target: '7',
|
||||
// label: 'not-focusable',
|
||||
// focusable: false
|
||||
// },
|
||||
],
|
||||
},
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import Flow from './Flow';
|
||||
|
||||
const flowConfigs = import.meta.glob<FlowConfig>('./**/*.ts', { eager: true, import: 'default' });
|
||||
|
||||
export default () => {
|
||||
const location = useLocation();
|
||||
const path = `.${location.pathname.replace('/tests/generic', '')}.ts`;
|
||||
const flowConfig = flowConfigs[path];
|
||||
|
||||
if (!flowConfig) {
|
||||
return `404: This route doesn't exists.`;
|
||||
}
|
||||
|
||||
return <Flow flowConfig={flowConfig} />;
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
export default () => {
|
||||
return (
|
||||
<div
|
||||
className="container"
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '50px',
|
||||
background: 'red',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="drag-handle custom-drag-handle"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '25px',
|
||||
height: '25px',
|
||||
backgroundColor: 'green',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,91 @@
|
||||
import DragHandleNode from './components/DragHandleNode';
|
||||
|
||||
export default {
|
||||
flowProps: {
|
||||
fitView: true,
|
||||
nodeTypes: {
|
||||
DragHandleNode,
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
id: 'Node-1',
|
||||
data: { label: 'Node-1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
className: 'playwright-test-class-123',
|
||||
style: { backgroundColor: 'red' },
|
||||
},
|
||||
{
|
||||
id: 'Node-2',
|
||||
type: 'output',
|
||||
data: { label: 'Node-2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: 'Node-3',
|
||||
data: { label: 'Node-3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: 'Node-4',
|
||||
data: { label: 'Node-4' },
|
||||
position: { x: 0, y: 200 },
|
||||
type: 'output',
|
||||
},
|
||||
{
|
||||
id: 'drag-handle',
|
||||
data: { label: 'Drag Handle' },
|
||||
position: { x: 200, y: 0 },
|
||||
type: 'DragHandleNode',
|
||||
dragHandle: '.custom-drag-handle',
|
||||
},
|
||||
{
|
||||
id: 'notConnectable',
|
||||
type: 'output',
|
||||
data: { label: 'notConnectable' },
|
||||
position: { x: 0, y: 300 },
|
||||
connectable: false,
|
||||
},
|
||||
{
|
||||
id: 'notDraggable',
|
||||
data: { label: 'notDraggable' },
|
||||
position: { x: 0, y: 400 },
|
||||
draggable: false,
|
||||
},
|
||||
{
|
||||
id: 'notSelectable',
|
||||
data: { label: 'notSelectable' },
|
||||
position: { x: 0, y: 500 },
|
||||
selectable: false,
|
||||
},
|
||||
{
|
||||
id: 'notDeletable',
|
||||
data: { label: 'notDeletable' },
|
||||
position: { x: 0, y: 600 },
|
||||
deletable: false,
|
||||
},
|
||||
{
|
||||
id: 'hidden',
|
||||
data: { label: 'hidden' },
|
||||
position: { x: 0, y: 700 },
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: 'Node-1',
|
||||
target: 'Node-2',
|
||||
label: 'edge',
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'default',
|
||||
source: 'Node-1',
|
||||
target: 'Node-3',
|
||||
label: 'edge',
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,37 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
minZoom: 0.25,
|
||||
maxZoom: 4,
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2',
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,38 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
panOnScroll: true,
|
||||
defaultViewport: { x: 1.23, y: 9.87, zoom: 1.234 },
|
||||
autoPanOnConnect: false,
|
||||
autoPanOnNodeDrag: false,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2',
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies FlowConfig;
|
||||
@@ -1,9 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import App from './App';
|
||||
|
||||
import './index.css';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<StrictMode>
|
||||
|
||||
Reference in New Issue
Block a user