Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import {type ChangeEvent, useRef, useState} from "react";
import useFlowStore from "../VisProgStores";
import visProgStyles from "../../VisProg.module.css";
import styles from "./SaveLoadPanel.module.css";
import { makeProjectBlob, type SavedProject } from "../../../../utils/SaveLoad";
export default function SaveLoadPanel() {
const nodes = useFlowStore((s) => s.nodes);
const edges = useFlowStore((s) => s.edges);
const setNodes = useFlowStore((s) => s.setNodes);
const setEdges = useFlowStore((s) => s.setEdges);
const [saveUrl, setSaveUrl] = useState<string | null>(null);
// ref to the file input
const inputRef = useRef<HTMLInputElement | null>(null);
const onSave = async (nameGuess = "visual-program") => {
const blob = makeProjectBlob(nameGuess, nodes, edges);
const url = URL.createObjectURL(blob);
setSaveUrl(url);
};
// input change handler updates the graph with a parsed JSON file
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
try {
const text = await file.text();
const parsed = JSON.parse(text) as SavedProject;
if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
setNodes(parsed.nodes);
setEdges(parsed.edges);
} catch (e) {
console.error(e);
alert("Loading failed. See console.");
} finally {
// allow re-selecting same file next time
if (inputRef.current) inputRef.current.value = "";
}
};
const defaultName = "visual-program";
return (
<div className={`flex-col gap-lg padding-md border-lg ${styles.saveLoadPanel}`}>
<div className="description">You can save and load your graph here.</div>
<div className={`flex-row gap-lg justify-center`}>
<a
href={saveUrl ?? "#"}
onClick={() => onSave(defaultName)}
download={`${defaultName}.json`}
className={`${visProgStyles.draggableNode} ${styles.saveButton}`}
>
Save Graph
</a>
<label className={`${visProgStyles.draggableNode} ${styles.fileInputButton}`}>
<input
ref={inputRef}
type="file"
accept=".visprog.json,.json,.txt,application/json,text/plain"
onChange={handleFileChange}
/>
Load Graph
</label>
</div>
</div>
);
}
|