feature: added saving graph to json

src/App.tsx

@@ -5,8 +5,10 @@ import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useKeysdownStore } from './stores/ArrayStore';
 import {
   MenuFoldOutlined,
-  MenuUnfoldOutlined
+  MenuUnfoldOutlined,
+  SaveOutlined,
 } from '@ant-design/icons';
+import { saveConceptSketch } from './utils/saveGraph';
 import { useGraphLayersTreeStore } from './stores/TreeStore';
 
 const { Header, Content, Sider } = Layout;
@@ -67,6 +69,18 @@ const App: React.FC = () => {
                   color: colorBgContainer,
                 }}
               />
+              <Button
+                type="text"
+                icon={<SaveOutlined />}
+                onClick={saveConceptSketch}
+                title="Save as JSON"
+                style={{
+                  fontSize: '16px',
+                  width: 32,
+                  height: 32,
+                  color: colorBgContainer,
+                }}
+              />
             </div>
             <Breadcrumb items={graphLevel} />
           </Space>

src/utils/saveGraph.ts

@@ -0,0 +1,53 @@
+import type { GraphModel } from '../components/Graph';
+import { useGraphsStore } from '../stores/GraphsStore';
+
+interface SerializedEdge {
+  id: string;
+  from: string;
+  to: string;
+}
+
+interface SerializedNode {
+  id: string;
+  label?: string;
+  subgraph?: SerializedGraph;
+}
+
+interface SerializedGraph {
+  id: string;
+  nodes: SerializedNode[];
+  edges: SerializedEdge[];
+}
+
+function serializeGraph(graphId: string, graphsById: Map<string, GraphModel>): SerializedGraph | null {
+  const graph = graphsById.get(graphId);
+  if (!graph) return null;
+
+  return {
+    id: graphId,
+    nodes: graph.nodes.map(node => {
+      const serialized: SerializedNode = { id: node.id, label: node.label };
+      if (graphsById.has(node.id)) {
+        serialized.subgraph = serializeGraph(node.id, graphsById) ?? undefined;
+      }
+      return serialized;
+    }),
+    edges: graph.edges.map(edge => ({ id: edge.id, from: edge.from, to: edge.to })),
+  };
+}
+
+export function saveConceptSketch(): void {
+  const state = useGraphsStore.getState() as { graphsById: Map<string, GraphModel> };
+  const data = serializeGraph('main', state.graphsById);
+
+  const json = JSON.stringify(data, null, 2);
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'concept-sketch.json';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}