75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
// This program has been developed by students from the bachelor Computer Science at Utrecht
|
|
// University within the Software Project course.
|
|
// © Copyright Utrecht University (Department of Information and Computing Sciences)
|
|
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");
|
|
const {nodes, unregisterWarningsForId} = useFlowStore.getState();
|
|
nodes.forEach((node) => {unregisterWarningsForId(node.id);});
|
|
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>
|
|
);
|
|
}
|