Advertisement
Shaco74

react-flow problem

May 16th, 2022
711
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* eslint-disable no-unused-vars */
  2. /* eslint-disable import/no-anonymous-default-export */
  3. /* eslint-disable @typescript-eslint/no-unused-vars */
  4. import { useCallback, useMemo, useState } from "react";
  5. import ReactFlow, {
  6.   useNodesState,
  7.   useEdgesState,
  8.   useReactFlow,
  9.   addEdge,
  10.   ReactFlowProvider,
  11. } from "react-flow-renderer";
  12.  
  13. import { Controls, Background } from "react-flow-renderer";
  14. import TextUpdaterNode from "./TextUpdaterNode.js";
  15. import {
  16.   Connection,
  17.   Edge,
  18.   Node,
  19.   NodeTypes,
  20.   ReactFlowInstance,
  21.   ReactFlowJsonObject,
  22.   Viewport,
  23. } from "react-flow-renderer/dist/esm/types/index.js";
  24.  
  25. const initialNodes: Node[] = [
  26.   {
  27.     id: "1",
  28.     type: "input",
  29.     data: { label: "Input Node" },
  30.     position: { x: 250, y: 25 },
  31.   },
  32.   {
  33.     id: "2",
  34.     // you can also pass a React component as a label
  35.     data: { label: <div>Default Node</div> },
  36.     position: { x: 100, y: 125 },
  37.   },
  38.   {
  39.     id: "3",
  40.     type: "output",
  41.     data: { label: "Output Node" },
  42.     position: { x: 250, y: 250 },
  43.   },
  44.   {
  45.     id: "4",
  46.     type: "textUpdater",
  47.     position: { x: 500, y: 10 },
  48.     data: { placeholderText: "1223" },
  49.   },
  50. ];
  51.  
  52. const initialEdges: Edge[] = [
  53.   { id: "e1-2", source: "1", target: "2" },
  54.   { id: "e2-3", source: "2", target: "3", animated: true },
  55. ];
  56.  
  57. const flowKey: string = "example-flow";
  58.  
  59. const getNodeId = () => `randomnode_${+new Date()}`;
  60.  
  61. const SaveRestore = () => {
  62.   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  63.   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  64.   const { setViewport } = useReactFlow();
  65.  
  66.   const reactFlowInstanceD = useReactFlow();
  67.   const [rfInstance, setRfInstance] = useState(reactFlowInstanceD);
  68.  
  69.   const onConnect = useCallback(
  70.     (params: any) => setEdges((eds) => addEdge(params, eds)),
  71.     [setEdges]
  72.   );
  73.  
  74.   type myType = {
  75.     edges: Edge[];
  76.     nodes: Node[];
  77.     viewport: Viewport;
  78.   };
  79.  
  80.   const onSaveD = () => {
  81.     let e = reactFlowInstanceD.toObject();
  82.     localStorage.setItem(flowKey, JSON.stringify(e));
  83.   };
  84.  
  85.   const onRestore = () => {
  86.     console.log(localStorage.getItem(flowKey));
  87.  
  88.     const restoreFlow = async () => {
  89.       let storage = localStorage.getItem(flowKey);
  90.       let flow: myType | null = null;
  91.  
  92.       if (storage) {
  93.         flow = JSON.parse(storage);
  94.       }
  95.  
  96.       if (flow !== null) {
  97.         console.log("Restoring flow");
  98.         console.log(flow);
  99.         console.log(flow.edges);
  100.         console.log(flow.nodes);
  101.         console.log(flow.viewport);
  102.  
  103.         const { x = 0, y = 0, zoom = 1 } = flow.viewport;
  104.         setNodes(flow.nodes);
  105.         setEdges(flow.edges);
  106.         setViewport({ x, y, zoom });
  107.         console.log("end");
  108.       }
  109.     };
  110.  
  111.     restoreFlow();
  112.     console.log("restore fin");
  113.   };
  114.  
  115.   const onAdd = useCallback(() => {
  116.     const newNode = {
  117.       id: getNodeId(),
  118.       data: { label: "Added node" },
  119.       position: {
  120.         x: Math.random() * window.innerWidth - 100,
  121.         y: Math.random() * window.innerHeight,
  122.       },
  123.     };
  124.     setNodes((nds: any) => nds.concat(newNode));
  125.   }, [setNodes]);
  126.  
  127.   const nodeTypes = useMemo(() => ({ textUpdater: TextUpdaterNode }), []);
  128.  
  129.   return (
  130.     <ReactFlow
  131.       nodes={nodes}
  132.       edges={edges}
  133.       onNodesChange={onNodesChange}
  134.       onEdgesChange={onEdgesChange}
  135.       onConnect={onConnect}
  136.       nodeTypes={nodeTypes}
  137.       fitView
  138.     >
  139.       <div className="save__controls">
  140.         <button onClick={onRestore}>restore</button>
  141.         <button onClick={onSaveD}>saveDebug</button>
  142.       </div>
  143.     </ReactFlow>
  144.   );
  145. };
  146.  
  147. export default () => (
  148.   <ReactFlowProvider>
  149.     <SaveRestore />
  150.   </ReactFlowProvider>
  151. );
  152.  
Advertisement
RAW Paste Data Copied
Advertisement