89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from 'reactflow';
|
|
|
|
import styles from './updatenode.module.css';
|
|
|
|
const initialNodes: Node[] = [
|
|
{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
|
|
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
|
|
];
|
|
|
|
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
|
|
|
|
const UpdateNode = () => {
|
|
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
|
|
|
|
const [nodeName, setNodeName] = useState<string>('Node 1');
|
|
const [nodeBg, setNodeBg] = useState<string>('#eee');
|
|
const [nodeHidden, setNodeHidden] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
setNodes((nds) =>
|
|
nds.map((n) => {
|
|
if (n.id === '1') {
|
|
// it's important that you create a new object here in order to notify react flow about the change
|
|
n.data = {
|
|
...n.data,
|
|
label: nodeName,
|
|
};
|
|
}
|
|
|
|
return n;
|
|
})
|
|
);
|
|
}, [nodeName]);
|
|
|
|
useEffect(() => {
|
|
setNodes((nds) =>
|
|
nds.map((n) => {
|
|
if (n.id === '1') {
|
|
// it's important that you create a new object here in order to notify react flow about the change
|
|
n.style = { ...n.style, backgroundColor: nodeBg };
|
|
}
|
|
|
|
return n;
|
|
})
|
|
);
|
|
}, [nodeBg]);
|
|
|
|
useEffect(() => {
|
|
setNodes((nds) =>
|
|
nds.map((n) => {
|
|
if (n.id === '1' || n.id === 'e1-2') {
|
|
// when you update a simple type you can just update the value
|
|
n.hidden = nodeHidden;
|
|
}
|
|
|
|
return n;
|
|
})
|
|
);
|
|
}, [nodeHidden]);
|
|
|
|
return (
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
minZoom={0.2}
|
|
maxZoom={4}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
>
|
|
<div className={styles.controls}>
|
|
<label>label:</label>
|
|
<input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
|
|
|
|
<label className={styles.bgLabel}>background:</label>
|
|
<input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
|
|
|
|
<div className="updatenode__checkboxwrapper">
|
|
<label>hidden:</label>
|
|
<input type="checkbox" checked={nodeHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
|
|
</div>
|
|
</div>
|
|
</ReactFlow>
|
|
);
|
|
};
|
|
|
|
export default UpdateNode;
|