Feature/graph positioning

src/electron/lib/ai/ai-cookbook.ts

@@ -128,7 +128,7 @@
  * */
 
 export function cookUnsafeResponse(data: any) {
   return responseSchema.parse(data);
 }
 
 // All the LLM methods should return some JS object which can be stringified
@@ -151,22 +151,24 @@
   graphId: UUID,
   args: AddNodeConfig["args"]
 ) {
   try {
     const node = registry[args.signature];
     if (!node) return errorResponse("The provided signature is invalid :  node does not exist");
 
-    const response = graphManager.addNode(graphId, node, CoreGraphUpdateParticipant.ai);
+    // TODO: Calculate at what position to add node then set pos
+    const pos = { x: 0, y: 0 };
+    const response = graphManager.addNode(graphId, node, pos, CoreGraphUpdateParticipant.ai);
 
     if (response.status === "success" && response.data) {
       // Truncate ids
       response.data.inputs = truncId(response.data.inputs);
       response.data.outputs = truncId(response.data.outputs);
       response.data.nodeId = truncId([response.data.nodeId])[0];
     }
 
     return response;
   } catch (error) {
     return errorResponse(error as string);
   }
 }
 
@@ -186,18 +188,18 @@
   graphId: UUID,
   args: RemoveNodeConfig["args"]
 ) {
   try {
     const graph = _exporter.export(graphManager.getGraph(graphId));
     const { nodeMap } = graph;
 
     const fullId = nodeMap[args.id];
     if (fullId === undefined)
       return errorResponse("The provided id is invalid :  id does not exist");
 
     const response = graphManager.removeNode(graphId, fullId, CoreGraphUpdateParticipant.ai);
     return response;
   } catch (error) {
     return errorResponse(error as string);
   }
 }
 
@@ -220,20 +222,20 @@
   graphId: UUID,
   args: AddEdgeConfig["args"]
 ) {
   try {
     const graph = _exporter.export(graphManager.getGraph(graphId));
     const { anchorMap } = graph;
     const output = anchorMap[args.output];
     const input = anchorMap[args.input];
     if (output === undefined)
       return errorResponse("Output anchor" + args.output + "does not exist");
     if (input === undefined) return errorResponse("Input anchor" + args.input + "does not exist");
 
     const response = graphManager.addEdge(graphId, input, output, CoreGraphUpdateParticipant.ai);
     return response;
   } catch (error) {
     // Manual error to give ai
     return errorResponse(error as string);
   }
 }
 
@@ -255,24 +257,24 @@
   graphId: UUID,
   args: RemoveEdgeConfig["args"]
 ) {
   try {
     const graph = getGraph(graphManager, graphId);
 
     const edge = findEdgeById(graph.graph.edges, args.id);
 
     if (edge === undefined) return errorResponse("The provided id is invalid :  id does not exist");
 
     const { anchorMap } = graph;
     const anchor = anchorMap[edge?.input];
 
     if (anchor === undefined)
       return errorResponse("The provided id is invalid :  id does not exist");
 
     const response = graphManager.removeEdge(graphId, anchor, CoreGraphUpdateParticipant.ai);
     return response;
   } catch (error) {
     // Manual error to give ai
     return errorResponse(error as string);
   }
 }
 
@@ -284,7 +286,7 @@
   // const graph = _exporter.export(graphManager.getGraph(graphId));
   // const { nodeMap } = graph;
   // return graphManager.updateUIInputsTest(graphId, nodeMap[args.nodeId], args.changedInputValues);
   return { status: "error", message: "Not implemented" } satisfies QueryResponse;
 }
 
 export function updateInputValue(
@@ -292,26 +294,26 @@
   graphId: string,
   args: UpdateInputValueConfig["args"]
 ) {
   const graph = graphManager.getGraph(graphId);
 
   if (!graph) {
     return {
       status: "error",
       message: "Graph does not exist",
     };
   }
 
   const llmGraph = _exporter.export(graph);
   const { nodeMap } = llmGraph;
   const { inputValueId, newInputValue, nodeId } = args;
   const changedUIInputs = { [inputValueId]: newInputValue };
   const updatedInputValues = graph.getUpdatedUIInputs(nodeMap[nodeId], changedUIInputs);
 
   if (updatedInputValues.status === "error") {
     return updatedInputValues;
   }
 
   return graphManager.updateUIInputs(
     graphId,
     nodeMap[nodeId],
     updatedInputValues.data,
@@ -338,7 +340,7 @@
  * */
 
 export function findEdgeById(edges: Edge[], id: string): Edge | undefined {
   return edges.find((edge) => edge.id === id);
 }
 
 /**
@@ -348,11 +350,11 @@
  * */
 
 export function errorResponse(message: string) {
   const response: QueryResponse = {
     status: "error",
     message,
   };
   return response;
 }
 
 /**
@@ -362,7 +364,7 @@
  * */
 
 export function getGraph(graphManager: CoreGraphManager, id: UUID): LLMGraph {
   return _exporter.export(graphManager.getGraph(id));
 }
 
 /**
@@ -372,31 +374,31 @@
  * */
 
 export function truncId(arr: string[]): string[] {
   return arr.map((str) => str.slice(0, 6));
 }
 
 export function splitStringIntoJSONObjects(input: string) {
   if (input.trim() === "") {
     return [];
   }
 
   const jsonObjects = [];
   let currentIndex = 0;
   let openBrackets = 0;
 
   for (let i = 0; i < input.length; i++) {
     if (input[i] === "{") {
       openBrackets++;
     } else if (input[i] === "}") {
       openBrackets--;
     }
 
     if (openBrackets === 0 && input[i] === "}") {
       const substring = input.substring(currentIndex, i + 1);
       jsonObjects.push(substring);
       currentIndex = i + 1;
     }
   }
 
   return jsonObjects;
 }

src/electron/lib/api/apis/GraphApi.ts

@@ -4,7 +4,7 @@ import { type UUID } from "../../../../shared/utils/UniqueEntity";
 import { type NodeSignature } from "../../../../shared/ui/ToolboxTypes";
 import { type INodeUIInputs } from "../../../../shared/types";
 import { CoreGraphUpdateParticipant } from "../../core-graph/CoreGraphInteractors";
-import type { GraphMetadata } from "../../../../shared/ui/UIGraph";
+import type { GraphMetadata, SvelvetCanvasPos } from "../../../../shared/ui/UIGraph";
 
 // Graphs across projects are stored homogeneously and referenced by UUID
 export class GraphApi implements ElectronMainApi<GraphApi> {
@@ -15,10 +15,11 @@ export class GraphApi implements ElectronMainApi<GraphApi> {
   }
 
   // TODO: Implement these properly
-  async addNode(graphUUID: UUID, nodeSignature: NodeSignature) {
+  async addNode(graphUUID: UUID, nodeSignature: NodeSignature, pos: SvelvetCanvasPos) {
     return this._blix.graphManager.addNode(
       graphUUID,
       this._blix.toolbox.getNodeInstance(nodeSignature),
+      pos,
       CoreGraphUpdateParticipant.user
     );
   }

src/electron/lib/core-graph/CoreGraph.ts

@@ -9,7 +9,7 @@
 import type { EdgeToJSON, GraphToJSON, NodeToJSON } from "./CoreGraphExporter";
 import { type NodeSignature } from "../../../shared/ui/ToolboxTypes";
 import type { INodeUIInputs, QueryResponse, UIValue } from "../../../shared/types";
-import { type GraphMetadata } from "../../../shared/ui/UIGraph";
+import { type GraphMetadata, type SvelvetCanvasPos } from "../../../shared/ui/UIGraph";
 import { type MediaOutputId } from "../../../shared/types/media";
 
 // =========================================
@@ -51,6 +51,9 @@
   // Maps a node UUID to a list of UI inputs
   private uiInputs: { [key: UUID]: CoreNodeUIInputs };
 
+  // Maps a node UUID to a UI canvas position
+  private uiPositions: { [key: UUID]: SvelvetCanvasPos };
+
   // private subscribers: CoreGraphSubscriber[];
   private static nodeTracker = 0;
   constructor() {
@@ -61,6 +64,7 @@
     this.edgeSrc = {};
     this.outputNodes = {};
     this.uiInputs = {};
+    this.uiPositions = {};
     this.metadata = {
       displayName: "Graph",
     };
@@ -145,7 +149,7 @@
   }
 
   public get getAllUIInputs() {
     return this.uiInputs;
   }
 
   public get getMetadata() {
@@ -156,8 +160,15 @@
     return this.uiInputs[nodeUUID]?.getInputs || null;
   }
 
+  public get getUIPositions() {
+    return this.uiPositions;
+  }
+
   // We need to pass in node name and plugin name
-  public addNode(node: NodeInstance): QueryResponse<{
+  public addNode(
+    node: NodeInstance,
+    pos: SvelvetCanvasPos
+  ): QueryResponse<{
     nodeId: UUID;
     inputs: string[];
     outputs: string[];
@@ -185,6 +196,8 @@
 
       // console.log(QueryResponseStatus.success)
       const anchors: AiAnchors = n.returnAnchors();
+      // Add position of node to graph
+      this.uiPositions[n.uuid] = pos;
       return {
         status: "success",
         message: "Node added succesfully",
@@ -196,7 +209,7 @@
         },
       };
     } catch (error) {
       return { status: "error", message: error as string };
     }
     // TODO: Add Node Styling
   }
@@ -264,38 +277,38 @@
   }
 
   public updateUIInputs(nodeUUID: UUID, nodeUIInputs: INodeUIInputs): QueryResponse {
     this.uiInputs[nodeUUID] = new CoreNodeUIInputs(nodeUIInputs);
 
     // If output node, update output node id
     if (this.outputNodes[nodeUUID]) {
       this.outputNodes[nodeUUID] = nodeUIInputs.inputs.outputId as MediaOutputId;
     }
 
     return { status: "success" };
   }
 
   public getUpdatedUIInputs(nodeUUID: UUID, changedUIInputs: Record<string, unknown>) {
     const currentInputValues = this.uiInputs[nodeUUID];
 
     if (!currentInputValues) {
       return {
         status: "error",
         message: "Node does not exist",
       } satisfies QueryResponse;
     }
 
     const nodeUIInputs: INodeUIInputs = {
       inputs: currentInputValues.getInputs,
       changes: [],
     };
 
     for (const key in changedUIInputs) {
       if (key in changedUIInputs) {
         if (key in currentInputValues.getInputs) {
           nodeUIInputs.inputs[key] = changedUIInputs[key];
           nodeUIInputs.changes.push(key);
         } else {
           return {
             status: "error",
             message: `Input value with id ${key} does not exist`,
           } satisfies QueryResponse;
@@ -303,7 +316,7 @@
       }
     }
 
     return {
       status: "success",
       data: nodeUIInputs,
     } satisfies QueryResponse;
@@ -343,7 +356,7 @@
     if (!node) return { status: "error", message: "Node to be deleted does not exist" };
 
     if (this.outputNodes[nodeToDelete]) {
       delete this.outputNodes[nodeToDelete];
     }
 
     try {
@@ -372,7 +385,7 @@
       delete this.nodes[node.uuid];
       return { status: "success" };
     } catch (error) {
       return { status: "error", message: error as string };
     }
   }
 
@@ -401,7 +414,7 @@
 
       return { status: "success" };
     } catch (error) {
       return { status: "error", message: error as string };
     }
   }
 
@@ -413,21 +426,21 @@
 
   public updateMetadata(updatedMetadata: Partial<GraphMetadata>) {
     if (!updatedMetadata) {
       return {
         status: "error",
         message: "No metadata provided",
       } satisfies QueryResponse;
     }
 
     const { displayName } = updatedMetadata;
 
     const newMetadata: GraphMetadata = {
       displayName: displayName ? displayName : this.metadata.displayName,
     };
 
     this.metadata = newMetadata;
 
     return {
       status: "success",
       message: "Metadata updated",
     } satisfies QueryResponse;
@@ -560,7 +573,7 @@
   }
 
   public exportJSON(): NodeToJSON {
     return {
       signature: `${this.plugin}.${this.name}`,
       styling: this.styling!,
     };
@@ -619,11 +632,11 @@
 export class CoreNodeUIInputs {
   private readonly inputs: { [key: string]: UIValue };
   constructor(nodeUIInpust: INodeUIInputs) {
     this.inputs = nodeUIInpust.inputs;
   }
 
   public get getInputs() {
     return this.inputs;
   }
 }
 

src/electron/lib/core-graph/CoreGraphImporter.ts

@@ -56,7 +56,8 @@ export class CoreGraphImporter {
     const nodes: { [key: number]: UUID } = {};
     for (const node of json.nodes) {
       const nodeInstance: NodeInstance = this._toolbox.getNodeInstance(node.signature);
-      const res = graph.addNode(nodeInstance);
+      // TODO: fix importer to use imported node positions
+      const res = graph.addNode(nodeInstance, { x: 0, y: 0 });
       if (res.status === "success" && res.data) {
         nodes[cnt++] = res.data?.nodeId;
       }

src/electron/lib/core-graph/CoreGraphInteractors.ts

@@ -44,7 +44,7 @@
   }
 
   public addListenParticipants(participants: CoreGraphUpdateParticipant[]) {
     this.listenParticipants = new Set([...this.listenParticipants, ...participants]);
   }
 
   public setListenParticipants(participants: CoreGraphUpdateParticipant[]) {
@@ -56,7 +56,7 @@
   }
 
   public addListenEvents(events: CoreGraphUpdateEvent[]) {
     this.listenEvents = new Set([...this.listenEvents, ...events]);
   }
 
   public setListenEvents(events: CoreGraphUpdateEvent[]) {
@@ -78,16 +78,16 @@
 
 export class UIInputsGraphSubscriber extends CoreGraphSubscriber<IGraphUIInputs> {
   onGraphChanged(graphId: UUID, graphData: CoreGraph): void {
     const coreUIInputs = graphData.getAllUIInputs;
     const graphUIInputs: IGraphUIInputs = {};
 
     // Convert core UI inputs to graph UI inputs
     for (const node in coreUIInputs) {
       if (!coreUIInputs.hasOwnProperty(node)) continue;
 
       graphUIInputs[node] = {} as INodeUIInputs;
       graphUIInputs[node].inputs = coreUIInputs[node].getInputs;
       graphUIInputs[node].changes = []; // TODO: Potentially tell the frontend exactly what changed
     }
 
     if (this._notifyee) this._notifyee(graphId, graphUIInputs);
@@ -98,6 +98,7 @@
   onGraphChanged(graphId: UUID, graphData: CoreGraph): void {
     const uiGraph: UIGraph = new UIGraph(graphId);
     uiGraph.metadata = graphData.getMetadata;
+    uiGraph.uiPositions = graphData.getUIPositions;
     const nodesAndEdges: NodesAndEdgesGraph = graphData.exportNodesAndEdges();
 
     for (const node in nodesAndEdges.nodes) {
@@ -118,9 +119,9 @@
 
       for (const anchor in nodesAndEdges.nodes[node].outputs) {
         if (!nodesAndEdges.nodes[node].outputs.hasOwnProperty(anchor)) continue;
         const reducedAnchor = nodesAndEdges.nodes[node].outputs[anchor];
 
         uiGraph.nodes[node].anchorUUIDs[reducedAnchor.id] = anchor;
       }
 
       // for (const anchor in nodesAndEdges.nodes[node].anchorUUIDs) {
@@ -131,9 +132,9 @@
 
     for (const edge in nodesAndEdges.edges) {
       if (!nodesAndEdges.edges.hasOwnProperty(edge)) continue;
       const edgeData = nodesAndEdges.edges[edge];
 
       uiGraph.edges[edge] = new GraphEdge(
         edge,
         edgeData.nodeUUIDFrom,
         edgeData.nodeUUIDTo,

src/electron/lib/core-graph/CoreGraphManager.ts

@@ -13,7 +13,7 @@
 import { Blix } from "../Blix";
 import type { INodeUIInputs, QueryResponse } from "../../../shared/types";
 import type { MediaOutputId } from "../../../shared/types/media";
-import { type GraphMetadata } from "../../../shared/ui/UIGraph";
+import { type GraphMetadata, type SvelvetCanvasPos } from "../../../shared/ui/UIGraph";
 
 const GRAPH_UPDATED_EVENT = new Set([CoreGraphUpdateEvent.graphUpdated]);
 
@@ -47,11 +47,12 @@
   addNode(
     graphUUID: UUID,
     node: NodeInstance,
+    pos: SvelvetCanvasPos,
     participant: CoreGraphUpdateParticipant
   ): QueryResponse<{ nodeId: UUID; inputs: string[]; outputs: string[] }> {
     if (this._graphs[graphUUID] === undefined)
       return { status: "error", message: "Graph does not exist" };
-    const res = this._graphs[graphUUID].addNode(node);
+    const res = this._graphs[graphUUID].addNode(node, pos);
     if (res.status === "success") this.onGraphUpdated(graphUUID, GRAPH_UPDATED_EVENT, participant);
     return res;
   }
@@ -108,40 +109,40 @@
     participant: CoreGraphUpdateParticipant
   ): QueryResponse {
     if (this._graphs[graphUUID] === undefined)
       return { status: "error", message: "Graph does not exist" };
 
     if (!nodeUIInputs) return { status: "error", message: "No node UI inputs provided" };
 
     const res = this._graphs[graphUUID].updateUIInputs(nodeUUID, nodeUIInputs);
 
     const signature = this._graphs[graphUUID].getNodes[nodeUUID].getSignature;
 
     if (res.status === "success") {
       // Determine whether the update should trigger the graph to recompute
       const uiConfigs = this._toolbox.getNodeInstance(signature).uiConfigs;
       const changes = nodeUIInputs.changes;
 
       if (signature === "blix.output") {
         this._outputIds[nodeUUID] = nodeUIInputs.inputs.outputId as string;
         this._mainWindow?.apis.mediaClientApi.onMediaOutputIdsChanged(
           new Set(Object.values(this._outputIds))
         );
       }
 
       let shouldUpdate = false;
       for (const change of changes) {
         if (uiConfigs[change].updatesBackend) {
           shouldUpdate = true;
           break;
         }
       }
 
       if (shouldUpdate) {
         const updateEvents = new Set([CoreGraphUpdateEvent.uiInputsUpdated]);
         this.onGraphUpdated(graphUUID, updateEvents, participant);
       }
     }
     return res;
   }
 
   setPos(
@@ -205,20 +206,20 @@
     updatedMetadata: Partial<GraphMetadata>,
     participant: CoreGraphUpdateParticipant
   ) {
     const graph = this._graphs[graphUUID];
 
     if (!graph) {
       return {
         status: "error",
         message: "Graph does not exist",
       } satisfies QueryResponse;
     }
 
     const res = graph.updateMetadata(updatedMetadata);
     if (res.status === "success") {
       this.onGraphUpdated(graphUUID, new Set([CoreGraphUpdateEvent.metadataUpdated]), participant);
     }
     return res;
   }
 
   // Notify all subscribers of change

src/electron/lib/core-graph/CoreGraphTesting.ts

@@ -192,10 +192,12 @@ export class TestGraph {
 
     const g2: CoreGraph = new CoreGraph();
 
-    g2.addNode(tempNodesInt[0]);
-    g2.addNode(tempNodesInt[1]);
-    g2.addNode(tempNodesInt[2]);
-    g2.addNode(tempNodesInt[3]);
+    const pos = { x: 0, y: 0 };
+    g2.addNode(this.tempNodes[0], pos);
+    g2.addNode(this.tempNodes[1], pos);
+    g2.addNode(this.tempNodes[2], pos);
+    g2.addNode(this.tempNodes[3], pos);
+
     // g2.addNode(tempNodesInt[4]);
     // g2.addNode(tempNodesInt[5]);
 
@@ -267,10 +269,10 @@ export class TestGraph {
     // =====================================
 
     const g1: CoreGraph = new CoreGraph();
-
-    g1.addNode(this.tempNodes[0]);
-    g1.addNode(this.tempNodes[1]);
-    g1.addNode(this.tempNodes[2]);
+    const pos = { x: 0, y: 0 };
+    g1.addNode(this.tempNodes[0], pos);
+    g1.addNode(this.tempNodes[1], pos);
+    g1.addNode(this.tempNodes[2], pos);
 
     const nodes = g1.getNodes;
     const actualNode1 = Object.values(nodes)[0];
@@ -325,12 +327,13 @@ export class TestGraph {
 
     const g2: CoreGraph = new CoreGraph();
 
-    g2.addNode(this.tempNodes[0]);
-    g2.addNode(this.tempNodes[1]);
-    g2.addNode(this.tempNodes[2]);
-    g2.addNode(this.tempNodes[3]);
-    g2.addNode(this.tempNodes[4]);
-    g2.addNode(this.tempNodes[5]);
+    const pos = { x: 0, y: 0 };
+    g2.addNode(this.tempNodes[0], pos);
+    g2.addNode(this.tempNodes[1], pos);
+    g2.addNode(this.tempNodes[2], pos);
+    g2.addNode(this.tempNodes[3], pos);
+    g2.addNode(this.tempNodes[4], pos);
+    g2.addNode(this.tempNodes[5], pos);
 
     const g2Nodes = g2.getNodes;
     const g2Node1 = Object.values(g2Nodes)[0];
@@ -408,8 +411,9 @@ export class TestGraph {
 
     const g3: CoreGraph = new CoreGraph();
 
-    g3.addNode(this.tempNodes[0]);
-    g3.addNode(this.tempNodes[1]);
+    const pos = { x: 0, y: 0 };
+    g3.addNode(this.tempNodes[0], pos);
+    g3.addNode(this.tempNodes[1], pos);
 
     const g3Nodes = g3.getNodes;
     const g3Node1 = Object.values(g3Nodes)[0];
@@ -456,9 +460,9 @@ export class TestGraph {
     // =====================================
 
     const g4: CoreGraph = new CoreGraph();
-
-    g4.addNode(this.tempNodes[0]);
-    g4.addNode(this.tempNodes[1]);
+    const pos = { x: 0, y: 0 };
+    g4.addNode(this.tempNodes[0], pos);
+    g4.addNode(this.tempNodes[1], pos);
 
     const g4Nodes = g4.getNodes;
     const g4Node1 = Object.values(g4Nodes)[0];
@@ -504,7 +508,7 @@ export class TestGraph {
 
     const g5: CoreGraph = new CoreGraph();
 
-    g5.addNode(this.tempNodes[0]);
+    g5.addNode(this.tempNodes[0], { x: 0, y: 0 });
 
     const g5Nodes = g5.getNodes;
     const g5Node1 = Object.values(g5Nodes)[0];
@@ -538,11 +542,12 @@ export class TestGraph {
 
     const g6: CoreGraph = new CoreGraph();
 
-    g6.addNode(this.tempNodes[0]);
-    g6.addNode(this.tempNodes[1]);
-    g6.addNode(this.tempNodes[2]);
-    g6.addNode(this.tempNodes[3]);
-    g6.addNode(this.tempNodes[4]);
+    const pos = { x: 0, y: 0 };
+    g6.addNode(this.tempNodes[0], pos);
+    g6.addNode(this.tempNodes[1], pos);
+    g6.addNode(this.tempNodes[2], pos);
+    g6.addNode(this.tempNodes[3], pos);
+    g6.addNode(this.tempNodes[4], pos);
 
     const g6Nodes = g6.getNodes;
     const g6Node1 = Object.values(g6Nodes)[0];
@@ -621,11 +626,12 @@ export class TestGraph {
 
     const g6: CoreGraph = new CoreGraph();
 
-    g6.addNode(this.tempNodes[0]);
-    g6.addNode(this.tempNodes[1]);
-    g6.addNode(this.tempNodes[2]);
-    g6.addNode(this.tempNodes[3]);
-    g6.addNode(this.tempNodes[4]);
+    const pos = { x: 0, y: 0 };
+    g6.addNode(this.tempNodes[0], pos);
+    g6.addNode(this.tempNodes[1], pos);
+    g6.addNode(this.tempNodes[2], pos);
+    g6.addNode(this.tempNodes[3], pos);
+    g6.addNode(this.tempNodes[4], pos);
 
     const g6Nodes = g6.getNodes;
     const g6Node1 = Object.values(g6Nodes)[0];
@@ -706,12 +712,12 @@ export class TestGraph {
     // =====================================
 
     const g6: CoreGraph = new CoreGraph();
-
-    g6.addNode(this.tempNodes[0]);
-    g6.addNode(this.tempNodes[1]);
-    g6.addNode(this.tempNodes[2]);
-    g6.addNode(this.tempNodes[3]);
-    g6.addNode(this.tempNodes[4]);
+    const pos = { x: 0, y: 0 };
+    g6.addNode(this.tempNodes[0], pos);
+    g6.addNode(this.tempNodes[1], pos);
+    g6.addNode(this.tempNodes[2], pos);
+    g6.addNode(this.tempNodes[3], pos);
+    g6.addNode(this.tempNodes[4], pos);
 
     const g6Nodes = g6.getNodes;
     const g6Node1 = Object.values(g6Nodes)[0];
@@ -919,8 +925,8 @@ export function testStuffies(blix: Blix) {
   const graph = blix.graphManager.createGraph();
   project.addGraph(graph);
   const g = blix.graphManager.getGraph(graph);
-  g.addNode(tempNodes[0]);
-  g.addNode(tempNodes[1]);
+  g.addNode(tempNodes[0], { x: 0, y: 0 });
+  g.addNode(tempNodes[1], { x: 0, y: 0 });
 
   const nodes = g.getNodes;
   const node1 = Object.values(nodes)[0];

src/electron/lib/projects/ProjectCommands.ts

@@ -18,6 +18,7 @@
   CoreGraphUpdateParticipant,
 } from "../core-graph/CoreGraphInteractors";
 import sharp from "sharp";
+import type { SvelvetCanvasPos } from "../../../shared/ui/UIGraph";
 
 export type SaveProjectArgs = {
   projectId: UUID;
@@ -108,12 +109,12 @@
     name: "Export Media As...",
     description: "Save media to file system",
   },
   handler: async (ctx: CommandContext, args: ExportMedia) => {
     const result = await exportMedia(ctx, args);
     if (result?.success && result.message) {
       ctx.sendSuccessMessage(result?.message);
     } else if (result?.error && result.error) {
       ctx.sendErrorMessage(result.error);
     }
   },
 };
@@ -262,20 +263,20 @@
 
 export async function exportMedia(ctx: CommandContext, args: ExportMedia) {
   if (!args) {
     return { success: false, error: "No media selected to export" };
   }
 
   const { type, data } = args;
 
   if (!data) {
     return { success: false, error: "No data was provided" };
   }
 
   if (type === "Image") {
     const base64Data = data.split(";base64, ");
     const imgBuffer = Buffer.from(base64Data[1], "base64");
 
     const path = await showSaveDialog({
       title: "Export media as",
       defaultPath: "blix.png",
       // filters: [{ name: "Images", extensions: ["png, jpg", "jpeg"] }],
@@ -284,14 +285,14 @@
 
     if (!path) return;
 
     sharp(imgBuffer).toFile(path);
 
     return { success: true, message: "Media exported successfully" };
   } else if (type === "Number" || type === "color" || type === "string") {
     const fileData = {
       OutputData: data,
     };
     const path = await showSaveDialog({
       title: "Export media as",
       defaultPath: "blix.json",
       filters: [{ name: "Data", extensions: ["json"] }],
@@ -300,14 +301,14 @@
 
     if (!path) return;
 
     try {
       writeFile(path, JSON.stringify(fileData));
     } catch (err) {
       logger.error(err);
     }
 
     return { success: true, message: "Media exported successfully" };
   } else {
     return { success: false, error: "Unsupported media type" };
   }
 }

src/frontend/lib/stores/CommandStore.ts

@@ -17,7 +17,7 @@
     set({ commands: results });
   }
 
   async function addCommands(cmds: any[]) {
     // window.apis.pluginApi.addCommand(cmds);
   }
 
@@ -50,6 +50,7 @@
 const blixCommandParams: Record<string, () => any> = {
   "blix.projects.save": () => {
     const project = get(projectsStore).activeProject;
+    // await window.apis.graphApi.updateUIPositions(project?.graphs);
     return {
       projectId: project?.id,
       layout: project?.layout.saveLayout(),

src/frontend/lib/stores/GraphStore.ts

@@ -9,6 +9,7 @@
   type SvelvetCanvasPos,
   constructUIValueStore,
   type GraphMetadata,
+  NodeStylingStore,
 } from "@shared/ui/UIGraph";
 import { writable, get, derived, type Writable, type Readable } from "svelte/store";
 import { toolboxStore } from "./ToolboxStore";
@@ -31,14 +32,21 @@
 // type Connections = (string | number | [string | number, string | number] | null)[];
 
 // TODO: Return a GraphStore in createGraphStore for typing
+export type GraphView = {
+  translation: { x: number; y: number };
+  dimensions: { width: number; height: number };
+  zoom: number;
+};
 export class GraphStore {
+  view: Writable<GraphView>;
   graphStore: Writable<UIGraph>;
   uiInputUnsubscribers: { [key: GraphNodeUUID]: (() => void)[] } = {};
   uiInputSubscribers: { [key: GraphNodeUUID]: () => void } = {};
 
   constructor(public uuid: GraphUUID) {
     // Starts with empty graph
     this.graphStore = writable<UIGraph>(new UIGraph(uuid));
+    this.view = writable<GraphView>();
   }
 
   public refreshUIInputs(newUIInputs: IGraphUIInputs) {
@@ -75,10 +83,13 @@
         if (oldNodes[node]) {
           // Node carried over from old graph, maintain its styling / UI inputs
           graph.nodes[node].styling = oldNodes[node].styling;
+          // graph.nodes[node].styling.pos =
           graph.nodes[node].inputUIValues = oldNodes[node].inputUIValues;
         } else {
           // If node has a UI input, create a store and subscribe to it
           const toolboxNode = toolboxStore.getNode(graph.nodes[node].signature);
+          graph.nodes[node].styling = new NodeStylingStore();
+          graph.nodes[node].styling!.pos.set(newGraph.uiPositions[node]);
 
           if (toolboxNode.ui) {
             graph.nodes[node].inputUIValues = constructUIValueStore(
@@ -98,7 +109,7 @@
                   this.uiInputUnsubscribers[node].push(
                     inputs[input].subscribe(() => {
                       // console.log("UPDATE UI INPUTS", node, "->", input);
                       this.updateUIInputs(node, input).catch((err) => {
                         return;
                       });
                     })
@@ -128,9 +139,9 @@
     });
   }
 
-  async addNode(nodeSignature: NodeSignature, pos?: SvelvetCanvasPos) {
+  async addNode(nodeSignature: NodeSignature, pos: SvelvetCanvasPos) {
     const thisUUID = get(this.graphStore).uuid;
-    const res = await window.apis.graphApi.addNode(thisUUID, nodeSignature);
+    const res = await window.apis.graphApi.addNode(thisUUID, nodeSignature, pos);
 
     // if (pos) {
     //   console.log("SET NODE POS", pos);
@@ -159,20 +170,20 @@
       payload.inputs[input] = get(nodeInputs.inputs[input]);
     }
 
     const res = await window.apis.graphApi.updateUIInputs(thisUUID, nodeUUID, payload);
 
     // Notify our UI subscribers
   }
 
   async removeNode(nodeUUID: GraphNodeUUID) {
     const thisUUID = get(this.graphStore).uuid;
     const res = await window.apis.graphApi.removeNode(thisUUID, nodeUUID);
     return false;
   }
 
   async removeEdge(anchorTo: AnchorUUID) {
     const thisUUID = get(this.graphStore).uuid;
     const res = await window.apis.graphApi.removeEdge(thisUUID, anchorTo);
     return false;
   }
 
@@ -184,7 +195,7 @@
     return this.graphStore.subscribe;
   }
 
   public addUISubscriber(callback: () => null) {
     // TODO
     return;
   }
@@ -234,7 +245,7 @@
       return stores;
     });
 
     const val = get(this.mall);
   }
 
   public refreshGraphUIInputs(graphUUID: GraphUUID, newUIInputs: IGraphUIInputs) {
@@ -246,7 +257,7 @@
       return stores;
     });
 
     const val = get(this.mall);
   }
 
   public refreshGraphMetadata(graphUUID: GraphUUID, newMetadata: GraphMetadata) {

src/frontend/ui/tiles/Graph.svelte

@@ -87,6 +87,17 @@
   $: zoom = graphData?.transforms?.scale;
   $: dimensions = graphData?.dimensions;
 
+  $: $thisGraphStore?.view?.set({
+    translation: $translation,
+    dimensions: $dimensions,
+    zoom: $zoom,
+  });
+  // $: if($thisGraphStore?.view) {
+  //     console.log(get($thisGraphStore.view));
+  //   }
+
+  $: console.log($zoom);
+
   // Hooks exposed by <Svelvet />
   let connectAnchorIds: (
     sourceNode: NodeKey,

src/frontend/ui/utils/ContextMenu.svelte

@@ -69,9 +69,12 @@
       if (!graphStore) return;
 
       if (action.type === "addNode") {
+        const view = get(graphStore.view);
+        console.log(view);
+        console.log(graphMenuState.canvasPos);
         graphStore.addNode(action.signature, {
-          x: graphMenuState.canvasPos.x,
-          y: graphMenuState.canvasPos.y,
+          x: view.dimensions.width / 2 - view.translation.x / view.zoom,
+          y: view.dimensions.height / 2 - view.translation.y / view.zoom,
         });
       }
     },

src/shared/ui/UIGraph.ts

@@ -16,6 +16,7 @@
 export class UIGraph {
   public nodes: { [key: GraphNodeUUID]: GraphNode } = {};
   public edges: { [key: GraphAnchorUUID]: GraphEdge } = {};
+  public uiPositions: { [key: GraphNodeUUID]: SvelvetCanvasPos } = {};
   public metadata: GraphMetadata = {
     displayName: "Graph",
   };
@@ -75,17 +76,17 @@
 }
 
 export function constructUIValueStore(ui: NodeUI, uiConfigs: { [key: string]: UIComponentConfig }) {
   let res = new UIValueStore();
   if (ui.type === "parent") {
     for (const child of ui.params) {
       res = { ...res, ...constructUIValueStore(child, uiConfigs) };
     }
   } else if (ui.type === "leaf") {
     const leaf = ui as NodeUILeaf;
     res.inputs[ui.label] = writable<UIValue>(uiConfigs[leaf.label].defaultValue);
   }
 
   return res;
 }
 
 export class GraphAnchor {