Get file saving working better

src/app/cpu/guide/01-riscv-basic/page.tsx

@@ -78,7 +78,7 @@ export default function Page() {
             we'll return the 32-bit (4 byte) value stored at that address. The blue highlight indicates that address.
         </Para>
 
-        <CpuPortal schematicId={"c-s1m3zs3x"} caption={"Fig 2: PC register looking up ROM contents"} height={16} width={50} />
+        <CpuPortal schematicId={"c-s1m3zs3x"} caption={"Fig 2: PC register looking up ROM contents"} height={30} width={70} />
 
         <Para>
             So as the PC advances, 4 bytes at a time, we get the next instruction from the ROM to execute. Currently,

src/cpu/CpuCanvas.tsx

@@ -88,7 +88,7 @@ export const CpuCanvas: React.FC<{
                     bb = new BoundingBox3d(new Vec3(0, 0), new Vec3(20, 20));
                 }
 
-                let mtx = computeZoomExtentMatrix(bb, new BoundingBox3d(new Vec3(readonly ? 0 : 330, 0), new Vec3(bcr.width, bcr.height)), 0.05);
+                let mtx = computeZoomExtentMatrix(bb, new BoundingBox3d(new Vec3(readonly ? 0 : 330, readonly ? 50 : 0), new Vec3(bcr.width, bcr.height)), 0.05);
                 return assignImm(a, { mtx, needsZoomExtent: false });
             });
         }

src/cpu/schematics/SchematicLibrary.tsx

@@ -3,7 +3,7 @@ import { iterLocalStorageEntries } from "@/src/utils/localstorage";
 import { Vec3 } from "@/src/utils/vector";
 import { CompLibrary, ISubLayoutPort } from "../comps/CompBuilder";
 import { IEditSnapshot, PortType } from "../CpuModel";
-import { createInitialEditSnapshot, ILSState, wiresFromLsState, schematicToLsState } from "../ImportExport";
+import { createInitialEditSnapshot, ILSState, wiresFromLsState, schematicToLsState, exportData } from "../ImportExport";
 import { regFileDemo, riscvBasicSchematic } from "./RiscvBasic";
 import { assignImm } from "@/src/utils/data";
 import { createSchematicCompDef } from "../comps/SchematicComp";
@@ -195,36 +195,36 @@ export class SchematicLibrary {
         }
     }
 
-    async saveToFile(id: string) {
-        let schematic = this.customSchematics.get(id);
+    async saveToFile(id: string, editSnapshot: IEditSnapshot) {
+        let lsSchematic: ILSSchematic = {
+            id: id,
+            name: editSnapshot.name,
+            model: schematicToLsState(editSnapshot),
+            compArgs: compArgsToLsState(editSnapshot),
+        };
 
-        if (schematic) {
-            let lsSchematic: ILSSchematic = {
-                id: schematic.id,
-                name: schematic.name,
-                model: schematicToLsState(schematic.model),
-                compArgs: compArgsToLsState(schematic.model),
-            };
+        let lsStr = JSON.stringify(lsSchematic);
 
-            let lsStr = JSON.stringify(lsSchematic);
+        let dataStr = exportData(editSnapshot);
 
-            let name = schematic.name.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+        let name = editSnapshot.name.replace(/[^a-z0-9]/gi, '_').toLowerCase();
 
-            let nameToCamel = name.replace(/[_ ^]([a-z])/g, (g) => g[1].toUpperCase());
+        let nameToCamel = name.replace(/[_ ^]([a-z])/g, (g) => g[1].toUpperCase());
 
-            let body = `
+        let body = `
 import { ILSSchematic } from "@/src/cpu/schematics/SchematicLibrary";
 export const ${nameToCamel}Schematic: ILSSchematic = ${lsStr};
+
+export const ${nameToCamel}SchematicStr = \`${dataStr}\`;
 `;
 
-            await fetch(`/cpu/api/save-schematic-to-file?filename=${nameToCamel}Schematic.tsx`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'text/plain',
-                },
-                body: body,
-            });
-        }
+        await fetch(`/cpu/api/save-schematic-to-file?filename=${nameToCamel}Schematic.tsx`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'text/plain',
+            },
+            body: body,
+        });
     }
 
     private schematicLocalStorageKey(id: string) {

src/cpu/schematics/romUsageSchematic.tsx

@@ -1,3 +1,15 @@
 
 import { ILSSchematic } from "@/src/cpu/schematics/SchematicLibrary";
-export const romUsageSchematic: ILSSchematic = {"id":"c-s1m3zs3x","name":"ROM Usage","model":{"wires":[{"id":"6","nodes":[{"id":0,"x":37,"y":11,"edges":[1],"ref":{"type":3,"id":"3","compNodeId":"a"}},{"id":1,"x":36,"y":11,"edges":[0,2]},{"id":2,"x":36,"y":4,"edges":[1,3]},{"id":3,"x":35,"y":4,"edges":[2],"ref":{"type":3,"id":"0","compNodeId":"data"}}]},{"id":"8","nodes":[{"id":0,"x":38,"y":5,"edges":[1,2]},{"id":1,"x":38,"y":5,"edges":[0,3]},{"id":2,"x":35,"y":5,"edges":[0],"ref":{"type":3,"id":"0","compNodeId":"addr"}},{"id":3,"x":41,"y":5,"edges":[1],"ref":{"type":3,"id":"2","compNodeId":"a"}}]}],"comps":[{"id":"0","defId":"core/mem/rom0","x":0,"y":3,"args":null},{"id":"2","defId":"core/comp/port","x":41,"y":3,"args":{"portId":"addr","name":"Addr","w":6,"h":4,"type":1,"portPos":2,"bitWidth":10,"signed":false,"valueMode":1,"inputOverride":true,"inputValueOverride":2}},{"id":"3","defId":"core/comp/port","x":37,"y":9,"args":{"portId":"data","name":"Data Out","w":14,"h":4,"type":2,"portPos":2,"bitWidth":32,"signed":true,"valueMode":0,"inputOverride":false,"inputValueOverride":0}}]}};
+export const romUsageSchematic: ILSSchematic = {"id":"c-s1m3zs3x","name":"ROM Usage","model":{"wires":[{"nodes":[{"id":0,"x":35,"y":5,"edges":[1],"ref":{"type":3,"id":"0","compNodeId":"addr"}},{"id":1,"x":37,"y":5,"edges":[0,2]},{"id":2,"x":37,"y":17,"edges":[1,3]},{"id":3,"x":82,"y":17,"edges":[2,4]},{"id":4,"x":82,"y":22,"edges":[3,6,7]},{"id":5,"x":79,"y":22,"edges":[7],"ref":{"type":3,"id":"4","compNodeId":"out"}},{"id":6,"x":88,"y":22,"edges":[4],"ref":{"type":3,"id":"5","compNodeId":"b"}},{"id":7,"x":82,"y":22,"edges":[5,4]}]},{"nodes":[{"id":0,"x":90,"y":22,"edges":[1],"ref":{"type":3,"id":"5","compNodeId":"out"}},{"id":1,"x":91,"y":22,"edges":[0,2]},{"id":2,"x":91,"y":29,"edges":[1,3]},{"id":3,"x":37,"y":29,"edges":[2,4]},{"id":4,"x":37,"y":22,"edges":[3,5]},{"id":5,"x":39,"y":22,"edges":[4],"ref":{"type":3,"id":"4","compNodeId":"in"}}]},{"nodes":[{"id":0,"x":86,"y":17,"edges":[1],"ref":{"type":3,"id":"6","compNodeId":"out"}},{"id":1,"x":86,"y":20,"edges":[0,2]},{"id":2,"x":88,"y":20,"edges":[1],"ref":{"type":3,"id":"5","compNodeId":"a"}}]},{"nodes":[{"id":0,"x":53,"y":9,"edges":[1],"ref":{"type":3,"id":"3","compNodeId":"a"}},{"id":1,"x":42,"y":9,"edges":[0,2]},{"id":2,"x":42,"y":4,"edges":[1,3]},{"id":3,"x":35,"y":4,"edges":[2],"ref":{"type":3,"id":"0","compNodeId":"data"}}]}],"comps":[{"id":"0","defId":"core/mem/rom0","x":0,"y":3,"args":null},{"id":"3","defId":"core/comp/port","x":53,"y":7,"args":{"portId":"data","name":"Data Out","w":14,"h":4,"type":2,"portPos":2,"bitWidth":32,"signed":true,"valueMode":0,"inputOverride":false,"inputValueOverride":0}},{"id":"4","defId":"core/flipflop/reg1","x":39,"y":19,"args":null},{"id":"5","defId":"core/math/adder","x":88,"y":19,"args":null},{"id":"6","defId":"core/io/const32","x":84,"y":13,"args":{"value":4,"valueMode":0,"bitWidth":32,"h":4,"w":4,"portPos":1,"signed":false}}]}};
+
+export const romUsageSchematicStr = `#wire-schema 1
+C 0 core/mem/rom0 p:0,3
+C 3 core/comp/port p:53,7 c:{"portId":"data","name":"Data Out","w":14,"h":4,"type":2,"portPos":2,"bitWidth":32,"signed":true,"valueMode":0,"inputOverride":false,"inputValueOverride":0}
+C 4 core/flipflop/reg1 p:39,19
+C 5 core/math/adder p:88,19
+C 6 core/io/const32 p:84,13 c:{"value":4,"valueMode":0,"bitWidth":32,"h":4,"w":4,"portPos":1,"signed":false}
+W 1 ns:[35,5 p:0/addr|37,5,0|37,17,1|82,17,2|82,22,3|79,22 p:4/out|88,22,4 p:5/b|82,22,5,4]
+W 4 ns:[90,22 p:5/out|91,22,0|91,29,1|37,29,2|37,22,3|39,22,4 p:4/in]
+W 5 ns:[86,17 p:6/out|86,20,0|88,20,1 p:5/a]
+W 9 ns:[53,9 p:3/a|42,9,0|42,4,1|35,4,2 p:0/data]
+`;

src/cpu/toolbars/CpuToolbars.tsx

@@ -41,7 +41,7 @@ export const MainToolbar: React.FC<{
 
     function saveToFile() {
         if (editorState.activeSchematicId) {
-            editorState.schematicLibrary.saveToFile(editorState.activeSchematicId);
+            editorState.schematicLibrary.saveToFile(editorState.activeSchematicId, editorState.snapshot);
         }
     }