refactor: 删除无用的 React Flow 测试代码
parent
9190be57cc
commit
94afaea70a
@ -1,14 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Handle, Position } from '@xyflow/react';
|
|
||||||
|
|
||||||
export const CustomNode = ({ data }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div style={{ padding: '10px 20px' }}>
|
|
||||||
{data.label}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
.text-updater-node {
|
|
||||||
//width: 150px;
|
|
||||||
//height: 80px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 15px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import React, { useCallback } from 'react';
|
|
||||||
import style from './TextUpdaterNode.module.less';
|
|
||||||
import { Handle, Position } from '@xyflow/react';
|
|
||||||
|
|
||||||
export function TextUpdaterNode(props) {
|
|
||||||
const onChange = useCallback((evt) => {
|
|
||||||
console.log(evt.target.value);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style['text-updater-node']}>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="text">Text:</label>
|
|
||||||
<input id="text" name="text" onChange={onChange} className="nodrag" />
|
|
||||||
</div>
|
|
||||||
<Handle type="target" position={Position.Left} id="a" />
|
|
||||||
<Handle type="target" position={Position.Bottom} id="a1" />
|
|
||||||
<Handle type="target" position={Position.Top} id="a2" />
|
|
||||||
<Handle type="source" position={Position.Right} id="b" />
|
|
||||||
<Handle type="source" position={Position.Right} style={{ top: 10 }} id="b1" />
|
|
||||||
<Handle type="source" position={Position.Right} style={{ top: 20 }} id="b2" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
import React, { useState, useCallback } from 'react';
|
|
||||||
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge, Background, Controls } from '@xyflow/react';
|
|
||||||
import '@xyflow/react/dist/style.css';
|
|
||||||
import { TextUpdaterNode } from './components/textUpdateNode/TextUpdaterNode';
|
|
||||||
|
|
||||||
const nodeTypes = {
|
|
||||||
textUpdater: TextUpdaterNode
|
|
||||||
};
|
|
||||||
|
|
||||||
const initialNodes = [
|
|
||||||
{
|
|
||||||
id: 'n1',
|
|
||||||
position: { x: 0, y: 0 },
|
|
||||||
data: { label: 'Node 1' },
|
|
||||||
type: 'input'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'node-1',
|
|
||||||
type: 'textUpdater',
|
|
||||||
position: { x: 150, y: 0 },
|
|
||||||
data: { value: 123 }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'n2',
|
|
||||||
position: { x: 100, y: 100 },
|
|
||||||
data: { label: 'Custom Node' }
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const initialEdges = [
|
|
||||||
{
|
|
||||||
id: 'n1-n2',
|
|
||||||
source: 'n1',
|
|
||||||
target: 'n2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'n1-node-1',
|
|
||||||
source: 'n1',
|
|
||||||
target: 'node-1',
|
|
||||||
targetHandle: 'a'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'n2-node-1',
|
|
||||||
source: 'n2',
|
|
||||||
target: 'node-1',
|
|
||||||
targetHandle: 'a1'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const [nodes, setNodes] = useState(initialNodes);
|
|
||||||
const [edges, setEdges] = useState(initialEdges);
|
|
||||||
|
|
||||||
const onNodesChange = useCallback(
|
|
||||||
(changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
const onEdgesChange = useCallback(
|
|
||||||
(changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
const onConnect = useCallback(
|
|
||||||
(params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ width: '90vw', height: '91vh' }}>
|
|
||||||
<ReactFlow
|
|
||||||
nodes={nodes}
|
|
||||||
edges={edges}
|
|
||||||
nodeTypes={nodeTypes}
|
|
||||||
onNodesChange={onNodesChange}
|
|
||||||
onEdgesChange={onEdgesChange}
|
|
||||||
onConnect={onConnect}
|
|
||||||
fitView
|
|
||||||
>
|
|
||||||
<Background />
|
|
||||||
<Controls />
|
|
||||||
</ReactFlow>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue