Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* eslint-disable no-unused-vars */
- /* eslint-disable import/no-anonymous-default-export */
- /* eslint-disable @typescript-eslint/no-unused-vars */
- import { useCallback, useMemo, useState } from "react";
- import ReactFlow, {
- useNodesState,
- useEdgesState,
- useReactFlow,
- addEdge,
- ReactFlowProvider,
- } from "react-flow-renderer";
- import { Controls, Background } from "react-flow-renderer";
- import TextUpdaterNode from "./TextUpdaterNode.js";
- import {
- Connection,
- Edge,
- Node,
- NodeTypes,
- ReactFlowInstance,
- ReactFlowJsonObject,
- Viewport,
- } from "react-flow-renderer/dist/esm/types/index.js";
- const initialNodes: Node[] = [
- {
- id: "1",
- type: "input",
- data: { label: "Input Node" },
- position: { x: 250, y: 25 },
- },
- {
- id: "2",
- // you can also pass a React component as a label
- data: { label: <div>Default Node</div> },
- position: { x: 100, y: 125 },
- },
- {
- id: "3",
- type: "output",
- data: { label: "Output Node" },
- position: { x: 250, y: 250 },
- },
- {
- id: "4",
- type: "textUpdater",
- position: { x: 500, y: 10 },
- data: { placeholderText: "1223" },
- },
- ];
- const initialEdges: Edge[] = [
- { id: "e1-2", source: "1", target: "2" },
- { id: "e2-3", source: "2", target: "3", animated: true },
- ];
- const flowKey: string = "example-flow";
- const getNodeId = () => `randomnode_${+new Date()}`;
- const SaveRestore = () => {
- const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
- const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
- const { setViewport } = useReactFlow();
- const reactFlowInstanceD = useReactFlow();
- const [rfInstance, setRfInstance] = useState(reactFlowInstanceD);
- const onConnect = useCallback(
- (params: any) => setEdges((eds) => addEdge(params, eds)),
- [setEdges]
- );
- type myType = {
- edges: Edge[];
- nodes: Node[];
- viewport: Viewport;
- };
- const onSaveD = () => {
- let e = reactFlowInstanceD.toObject();
- localStorage.setItem(flowKey, JSON.stringify(e));
- };
- const onRestore = () => {
- console.log(localStorage.getItem(flowKey));
- const restoreFlow = async () => {
- let storage = localStorage.getItem(flowKey);
- let flow: myType | null = null;
- if (storage) {
- flow = JSON.parse(storage);
- }
- if (flow !== null) {
- console.log("Restoring flow");
- console.log(flow);
- console.log(flow.edges);
- console.log(flow.nodes);
- console.log(flow.viewport);
- const { x = 0, y = 0, zoom = 1 } = flow.viewport;
- setNodes(flow.nodes);
- setEdges(flow.edges);
- setViewport({ x, y, zoom });
- console.log("end");
- }
- };
- restoreFlow();
- console.log("restore fin");
- };
- const onAdd = useCallback(() => {
- const newNode = {
- id: getNodeId(),
- data: { label: "Added node" },
- position: {
- x: Math.random() * window.innerWidth - 100,
- y: Math.random() * window.innerHeight,
- },
- };
- setNodes((nds: any) => nds.concat(newNode));
- }, [setNodes]);
- const nodeTypes = useMemo(() => ({ textUpdater: TextUpdaterNode }), []);
- return (
- <ReactFlow
- nodes={nodes}
- edges={edges}
- onNodesChange={onNodesChange}
- onEdgesChange={onEdgesChange}
- onConnect={onConnect}
- nodeTypes={nodeTypes}
- fitView
- >
- <div className="save__controls">
- <button onClick={onRestore}>restore</button>
- <button onClick={onSaveD}>saveDebug</button>
- </div>
- </ReactFlow>
- );
- };
- export default () => (
- <ReactFlowProvider>
- <SaveRestore />
- </ReactFlowProvider>
- );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement