chore(examples): add old api examples

example/src_oldapi/SaveRestore/Controls.tsx

@@ -0,0 +1,61 @@
+import React, { memo, useCallback, Dispatch, FC } from 'react';
+import { useZoomPanHelper, OnLoadParams, Elements, FlowExportObject } from 'react-flow-renderer';
+import localforage from 'localforage';
+
+localforage.config({
+  name: 'react-flow',
+  storeName: 'flows',
+});
+
+const flowKey = 'example-flow';
+
+const getNodeId = () => `randomnode_${+new Date()}`;
+
+type ControlsProps = {
+  rfInstance?: OnLoadParams;
+  setElements: Dispatch<React.SetStateAction<Elements<any>>>;
+};
+
+const Controls: FC<ControlsProps> = ({ rfInstance, setElements }) => {
+  const { transform } = useZoomPanHelper();
+
+  const onSave = useCallback(() => {
+    if (rfInstance) {
+      const flow = rfInstance.toObject();
+      localforage.setItem(flowKey, flow);
+    }
+  }, [rfInstance]);
+
+  const onRestore = useCallback(() => {
+    const restoreFlow = async () => {
+      const flow: FlowExportObject | null = await localforage.getItem(flowKey);
+
+      if (flow) {
+        const [x = 0, y = 0] = flow.position;
+        setElements(flow.elements || []);
+        transform({ x, y, zoom: flow.zoom || 0 });
+      }
+    };
+
+    restoreFlow();
+  }, [setElements, transform]);
+
+  const onAdd = useCallback(() => {
+    const newNode = {
+      id: `random_node-${getNodeId()}`,
+      data: { label: 'Added node' },
+      position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
+    };
+    setElements((els) => els.concat(newNode));
+  }, [setElements]);
+
+  return (
+    <div className="save__controls">
+      <button onClick={onSave}>save</button>
+      <button onClick={onRestore}>restore</button>
+      <button onClick={onAdd}>add node</button>
+    </div>
+  );
+};
+
+export default memo(Controls);

example/src_oldapi/SaveRestore/index.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  removeElements,
+  addEdge,
+  Elements,
+  Connection,
+  Edge,
+  OnLoadParams,
+} from 'react-flow-renderer';
+
+import Controls from './Controls';
+
+import './save.css';
+
+const initialElements: Elements = [
+  { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+];
+
+const SaveRestore = () => {
+  const [rfInstance, setRfInstance] = useState<OnLoadParams>();
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+
+  return (
+    <ReactFlowProvider>
+      <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect} onLoad={setRfInstance}>
+        <Controls rfInstance={rfInstance} setElements={setElements} />
+      </ReactFlow>
+    </ReactFlowProvider>
+  );
+};
+
+export default SaveRestore;

example/src_oldapi/SaveRestore/save.css

@@ -0,0 +1,11 @@
+.save__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.save__controls button {
+  margin-left: 5px;
+}