saving / loading node graphs maybe working?

src-tauri/src/frontend_calls/mod.rs

···
-pub mod get_addresses;
+pub mod get_addresses;
+pub mod save_graph;

src-tauri/src/frontend_calls/save_graph.rs

···
+use std::{ fs::File, io::Write };
+
+use flate2::{ write::GzEncoder, Compression };
+
+#[tauri::command]
+pub fn save_graph( graph: String ) {
+  dbg!(&graph);
+
+  let path = dirs::config_dir().unwrap().join("VRCMacros").join("graph");
+
+  let file = File::create(&path).unwrap();
+  let mut encoder = GzEncoder::new(file, Compression::default());
+
+  encoder.write_all(graph.as_bytes()).unwrap();
+  encoder.finish().unwrap();
+}

src-tauri/src/lib.rs

···
     .plugin(tauri_plugin_opener::init())
     .invoke_handler(tauri::generate_handler![
       get_addresses::get_addresses,
+
+      save_graph::save_graph
     ])
     .manage(conf)
     .manage(&ADDRESSES)

src/App.tsx

···
         movingNode.y = movingNode.y - (mouseStartPos[1] - e.clientY) / scale;
 
         mouseStartPos = [ e.clientX, e.clientY ];
+        NodeManager.Instance.UpdateConfig();
       } else{
         offsetTarget = [ offsetTarget[0] - (mouseStartPos[0] - e.clientX) / scale, offsetTarget[1] - (mouseStartPos[1] - e.clientY) / scale ];
         mouseStartPos = [ e.clientX, e.clientY ];
···
             ){
               drawingFrom!.connections.push(input);
               input.connections.push(drawingFrom!);
+
+              NodeManager.Instance.UpdateConfig();
             }
           }
         }

src/ContextMenu/Canvas.tsx

···
 
       let node: Node = {
         name: 'OSC Trigger',
-        id: 'trigger',
+        id: NodeManager.Instance.GetNewNodeId(),
         x: pos[0],
         y: pos[1],
         w: 200,
···
             });
 
             node.h = 60 + (parameters.length + 1) * 30;
+            NodeManager.Instance.UpdateConfig();
           })();
         }
       };
···
 
             let node: Node = {
               name: 'If Equals',
-              id: 'ifeq',
+              id: NodeManager.Instance.GetNewNodeId(),
               x: pos[0],
               y: pos[1],
               w: 220,
···
 
             let node: Node = {
               name: 'String',
-              id: 'static-string',
+              id: NodeManager.Instance.GetNewNodeId(),
               x: pos[0],
               y: pos[1],
               w: 200,
···
 
             let node: Node = {
               name: 'Int',
-              id: 'static-int',
+              id: NodeManager.Instance.GetNewNodeId(),
               x: pos[0],
               y: pos[1],
               w: 200,
···
 
             let node: Node = {
               name: 'Send Chatbox',
-              id: 'send-chatbox',
+              id: NodeManager.Instance.GetNewNodeId(),
               x: pos[0],
               y: pos[1],
               w: 200,

src/ControlBar.tsx

···
 import { invoke } from '@tauri-apps/api/core';
 import { OSCMessage } from './structs/OscMessage';
 import { ParameterList } from './components/ParameterList';
+import { NodeManager } from './Mangers/NodeManager';
 
 export interface ControlBarProps{
   node: Accessor<Node | null>,
···
 
                         item.value = text;
                         node.onStaticsUpdate(node);
+                        
+                        NodeManager.Instance.UpdateConfig();
                       }} />
                   </div>
                 </Match>
···
 
                         item.value = value;
                         node.onStaticsUpdate(node);
+
+                        NodeManager.Instance.UpdateConfig();
                       }} />
                   </Show>
                 </Match>

src/Mangers/NodeManager.tsx

···
+import { invoke } from "@tauri-apps/api/core";
 import { Node } from "../structs/node";
 
 export class NodeManager{
   public static Instance: NodeManager;
 
   private _nodes: Node[] = [];
+  private _newestNodeId = 0;
+  private _needsSave = false;
 
   constructor(){
     NodeManager.Instance = this;
+
+    setInterval(() => {
+      // Save config every 1 second
+      if(this._needsSave)this._saveConfigToDisk();
+    }, 1_000);
   }
 
   public AddNode( node: Node ){
     this._nodes.push(node);
+    this.UpdateConfig();
   }
 
   public RemoveNode( node: Node ){
     this._nodes = this._nodes.filter(x => x !== node);
+    this.UpdateConfig();
   }
 
   public GetNodes(): Node[]{
     return this._nodes;
+  }
+
+  public GetNewNodeId(){
+    return this._newestNodeId++; // TODO: really need a better solution than this, but it'll work for now
+  }
+
+  public UpdateConfig(){
+    this._needsSave = true;
+  }
+
+  private _loadFromConfig( config: string ){
+    let json = JSON.parse(config);
+
+    this._nodes = [];
+
+    // Populate nodes
+    for (let i = 0; i < json.length; i++) {
+      let node = json[i];
+
+      this._nodes.push({
+        name: node.name,
+        id: node.id,
+        x: node.x, y: node.y,
+        w: node.w, h: node.h,
+        inputs: [],
+        outputs: [],
+        selected: false,
+        statics: node.statics,
+        onStaticsUpdate: ( _node ) => {} // TODO: Make a seperate setup for node logic so we can load from that
+      })
+
+      this._newestNodeId = node.id
+    }
+
+    // Populate node outputs
+    for (let i = 0; i < json.length; i++) {
+      let configNode = json[i];
+      let node = this._nodes[i];
+
+      for (let j = 0; j < configNode.outputs.length; j++) {
+        let output = configNode.outputs[j];
+        node.outputs.push({
+          name: output.name,
+          type: output.type,
+          connections: [],
+          parent: node,
+          index: j
+        })
+      }
+    }
+
+    // Populate node inputs
+    for (let i = 0; i < json.length; i++) {
+      let configNode = json[i];
+      let outputParentNode = this._nodes[i];
+
+      for (let j = 0; j < configNode.outputs.length; j++) {
+        let output = configNode.outputs[j];
+
+        for (let k = 0; k < output.connections.length; k++) {
+          let input = output.connections[k];
+          let node = this._nodes[input.node];
+
+          let realInput = node.inputs.find(x => x.index === input.index);
+          let realOutput = outputParentNode.outputs[j];
+
+          if(realInput){
+            realInput.connections.push(realOutput);
+          } else{
+            node.inputs.push({
+              name: input.name,
+              type: input.type,
+              parent: node,
+              connections: [ realOutput ],
+              index: input.index
+            })
+          }
+        }
+      }
+    }
+  }
+
+  private _saveConfigToDisk(){
+    this._needsSave = false;
+    // Convert it into a structure we can actually save...
+
+    let nodesToSave = [];
+
+    for (let i = 0; i < this._nodes.length; i++) {
+      let node = this._nodes[i];
+
+      let nodeOutputs = [];
+
+      for (let j = 0; j < node.outputs.length; j++) {
+        let output = node.outputs[j];
+
+        nodeOutputs.push({
+          name: output.name,
+          type: output.type,
+          connections: output.connections.map(x => { return {
+            name: x.name,
+            node: x.parent.id,
+            index: x.index,
+            type: x.type
+          }})
+        })
+      }
+
+      nodesToSave.push({
+        name: node.name,
+        id: node.id,
+        x: node.x, y: node.y,
+        w: node.w, h: node.h,
+        statics: node.statics,
+        outputs: nodeOutputs
+      })
+    }
+
+    invoke('save_graph', { graph: JSON.stringify(nodesToSave) });
   }
 }

src/renderer.ts

···
   ctx.textBaseline = 'top';
 
   nodes.map(node => {
+    let nodeX = Math.round(node.x / 10) * 10;
+    let nodeY = Math.round(node.y / 10) * 10;
+
     ctx.fillStyle = '#1f2129';
     ctx.strokeStyle = node.selected ? '#004696ff' : '#fff5';
     ctx.lineWidth = 5 * position.scale;
 
     // Draw Node Box
     drawRoundedRect(ctx,
-      (node.x + startX + position.x) * position.scale,
-      (node.y + startY + position.y) * position.scale,
+      (nodeX + startX + position.x) * position.scale,
+      (nodeY + startY + position.y) * position.scale,
       node.w * position.scale,
       node.h * position.scale,
       10 * position.scale);
···
     ctx.textAlign = 'center';
 
     ctx.fillText(node.name,
-      (node.x + (node.w * 0.5) + startX + position.x) * position.scale,
-      (node.y + 10 + startY + position.y) * position.scale
+      (nodeX + (node.w * 0.5) + startX + position.x) * position.scale,
+      (nodeY + 10 + startY + position.y) * position.scale
     );
 
     // Draw Inputs
···
     node.inputs.map(( input, i ) => {
       ctx.fillStyle = NodeIOLinkColours(input);
       ctx.fillRect(
-        (node.x + 10 + startX + position.x) * position.scale,
-        (node.y + 50 + (30 * i) + startY + position.y) * position.scale,
+        (nodeX + 10 + startX + position.x) * position.scale,
+        (nodeY + 50 + (30 * i) + startY + position.y) * position.scale,
         20 * position.scale, 20 * position.scale
       )
 
       ctx.fillText(input.name,
-        (node.x + 35 + startX + position.x) * position.scale,
-        (node.y + 53 + (30 * i) + startY + position.y) * position.scale,
+        (nodeX + 35 + startX + position.x) * position.scale,
+        (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
       )
     })
 
···
     node.outputs.map(( output, i ) => {
       ctx.fillStyle = NodeIOLinkColours(output);
       ctx.fillRect(
-        (node.x + (node.w - 30) + startX + position.x) * position.scale,
-        (node.y + 50 + (30 * i) + startY + position.y) * position.scale,
+        (nodeX + (node.w - 30) + startX + position.x) * position.scale,
+        (nodeY + 50 + (30 * i) + startY + position.y) * position.scale,
         20 * position.scale, 20 * position.scale
       )
 
       ctx.fillText(output.name,
-        (node.x + (node.w - 35) + startX + position.x) * position.scale,
-        (node.y + 53 + (30 * i) + startY + position.y) * position.scale,
+        (nodeX + (node.w - 35) + startX + position.x) * position.scale,
+        (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
       )
     })
   })
 
   nodes.map(node => {
+    let nodeX = Math.round(node.x / 10) * 10;
+    let nodeY = Math.round(node.y / 10) * 10;
+
     node.outputs.map(( output, i ) => {
       output.connections.map(partner => {
         ctx.strokeStyle = NodeIOLinkColours(output);
         drawCurve(ctx,
-          (node.x + (node.w - 30) + 10 + startX + position.x) * position.scale,
-          (node.y + 50 + (30 * i) + 10 + startY + position.y) * position.scale,
-          (partner.parent.x + 20 + startX + position.x) * position.scale,
-          (partner.parent.y + 60 + (30 * partner.index) + startY + position.y) * position.scale,
+          (nodeX + (node.w - 30) + 10 + startX + position.x) * position.scale,
+          (nodeY + 50 + (30 * i) + 10 + startY + position.y) * position.scale,
+          ((Math.round(partner.parent.x / 10) * 10) + 20 + startX + position.x) * position.scale,
+          ((Math.round(partner.parent.y / 10) * 10) + 60 + (30 * partner.index) + startY + position.y) * position.scale,
         );
         ctx.stroke();
       })

src/structs/node.ts

···
 export interface Node{
   name: string,
-  id: string,
+  id: number,
   x: number,
   y: number,
   w: number,
···
 }
 
 export enum NodeType{
-  Label,
+  Label = 0,
 
   String = 1,
   Float = 2,
···
   AnyTypeB = 7,
   AnyTypeC = 8,
 
-  OSCAddress,
-  ParameterList
+  OSCAddress = 9,
+  ParameterList = 10
 }
 
 export let NodeIOResolveAnyTypes = ( nodeio: NodeIO ): NodeType | null => {