todo: s/l nodes <-> json

Author: HomunMage

src/lib/io/json.ts

@@ -0,0 +1,63 @@
+// lib/io/json.ts
+
+export const saveJsonToFile = (filename: string, JsonData: any): void => {
+try {
+const blob = new Blob([JSON.stringify(JsonData, null, 2)], {
+type: 'application/json'
+});
+const url = URL.createObjectURL(blob);
+const a = document.createElement('a');
+a.href = url;
+a.download = filename;
+document.body.appendChild(a);
+a.click();
+document.body.removeChild(a);
+URL.revokeObjectURL(url);
+alert('File saving!');
+} catch (error) {
+console.error('Error saving JSON:', error);
+alert('Failed to save file.');
+}
+};
+
+export const loadJsonFromFile = (): Promise<any> => {
+return new Promise((resolve, reject) => {
+const fileInput = document.createElement('input');
+fileInput.type = 'file';
+fileInput.accept = '.json';
+fileInput.style.display = 'none';
+document.body.appendChild(fileInput);
+
+fileInput.addEventListener('change', async (event) => {
+try {
+const file = (event.target as HTMLInputElement).files?.[0];
+if (!file) {
+reject(new Error('No file selected.'));
+return;
+}
+const reader = new FileReader();
+reader.onload = async (e) => {
+try {
+const contents = e.target?.result;
+if (typeof contents === 'string') {
+const parsedData = JSON.parse(contents);
+resolve(parsedData);
+} else {
+reject(new Error('File contents are not a string.'));
+}
+} catch (error) {
+reject(new Error('Error parsing JSON.' + error));
+}
+};
+reader.onerror = () => reject(new Error('Error reading file.'));
+reader.readAsText(file);
+} catch (error) {
+console.error('Error during file handling:', error);
+reject(new Error('Error loading JSON:' + error));
+} finally {
+document.body.removeChild(fileInput);
+}
+});
+fileInput.click();
+});
+};

src/routes/graph/menu/json-io.svelte

@@ -0,0 +1,16 @@
+<!-- routes/graph/menu/json-io.svelte -->
+<script context="module" lang="ts">
+// now these really are module‐level exports
+export async function saveGraph(): Promise<void> {
+// TODO: implement saving
+}
+
+export async function loadGraph(): Promise<void> {
+// TODO: implement loading
+}
+</script>
+
+<!-- if you have instance‐level script, you can still have it -->
+<script lang="ts">
+// component props / local state, etc.
+</script>

src/routes/graph/menu/sidebar.svelte

@@ -4,6 +4,7 @@
 export let open: boolean;
 export let onToggle: () => void;
 import { usingSubgraph } from '../flow/graph-store.svelte'; // Import the store
+import { saveGraph, loadGraph } from './json-io.svelte';
 </script>
 
 <div class="sidebar {open ? 'open' : ''}">
@@ -14,10 +15,16 @@
 <li><a href="#item2">Menu item 2</a></li>
 <li><a href="#item3">Menu item 3</a></li>
 <li>
-<button on:click={() => usingSubgraph.set('default')}> Default Graph </button>
+<button on:click={() => usingSubgraph.set('default')}>Default Graph</button>
 </li>
 <li>
-<button on:click={() => usingSubgraph.set('anotherKey')}> Another Graph </button>
+<button on:click={() => usingSubgraph.set('anotherKey')}>Another Graph</button>
+</li>
+<li>
+<button on:click={saveGraph}>Save Graph</button>
+</li>
+<li>
+<button on:click={loadGraph}>Load Graph</button>
 </li>
 </ul>
 </nav>
@@ -59,4 +66,11 @@
 nav li + li {
 margin-top: 0.5rem;
 }
+button {
+cursor: pointer; /* Makes the button appear clickable */
+padding: 0.5rem 1rem; /* Adds some padding for better appearance */
+border: 1px solid #ccc; /* Optional: Adds a border */
+border-radius: 4px; /* Optional: Rounds the corners */
+background-color: #f0f0f0; /* Optional: A subtle background color */
+}
 </style>