Update static/canvas.js

static/canvas.js

@@ -99,26 +99,29 @@ function clearCanvas() {
 function createNodesFromParsedData(parsedNodes, parsedConnections) {
     const scopePositions = {}; // Track x-position per scope
     parsedNodes.forEach(nodeData => {
-        const scope = nodeData.parent_path.split(' -> ')[0] || 'global';
+        // Fallback for parent_path to prevent undefined error
+        const parentPath = nodeData.parent_path || 'global';
+        const scope = parentPath.split(' -> ')[0] || 'global';
         if (!scopePositions[scope]) {
             scopePositions[scope] = { x: 50, count: 0 };
         }
         // Stack left to right: increment x based on level and scope
-        const x = 50 + nodeData.level * 150 + scopePositions[scope].count * 200;
+        const level = nodeData.level || 0;
+        const x = 50 + level * 150 + scopePositions[scope].count * 200;
         const y = scopePositions[scope].count * 80 + 50; // Slight y offset for readability
         scopePositions[scope].count += 1;
 
         const node = createNode(
             x,
             y,
-            nodeData.label,
-            nodeData.type,
-            nodeData.inputs,
-            nodeData.outputs,
-            nodeData.id,
-            nodeData.source,
-            nodeData.parent_path,
-            nodeData.level
+            nodeData.label || 'Unnamed',
+            nodeData.type || 'other',
+            nodeData.inputs || [],
+            nodeData.outputs || [],
+            nodeData.id || `node_${nodes.length}`,
+            nodeData.source || '',
+            parentPath,
+            level
         );
         nodes.push(node);
         layer.add(node);
@@ -129,7 +132,7 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
 }
 
 // Create a node with inputs, outputs, and code segment
-function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '', parent_path = '', level = 0) {
+function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '', parent_path = 'global', level = 0) {
     const node = new Konva.Group({
         x: x,
         y: y,
@@ -314,7 +317,6 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '
         // Create textarea for editing
         codeTextarea = document.createElement('textarea');
         codeTextarea.style.position = 'absolute';
-        // Calculate position relative to canvas
         const canvasRect = stage.container().getBoundingClientRect();
         const textareaX = (nodePos.x + stage.x()) / scale + canvasRect.left;
         const textareaY = (nodePos.y + height + 10 + stage.y()) / scale + canvasRect.top;
@@ -439,7 +441,7 @@ function autoConnect() {
 
     const sortedNodes = [...nodes].sort((a, b) => {
         if (a.data.level !== b.data.level) return a.data.level - b.data.level;
-        return a.data.x - b.data.x; // Sort by x for left-to-right order
+        return a.data.x - b.data.x;
     });
 
     const hierarchy = {};
@@ -537,7 +539,7 @@ function updateProgram() {
 function reconstructProgram() {
     const sortedNodes = [...nodes].sort((a, b) => {
         if (a.data.level !== b.data.level) return a.data.level - b.data.level;
-        return a.data.x - b.data.x; // Sort by x for left-to-right order
+        return a.data.x - b.data.x;
     });
 
     let program = '';
@@ -626,9 +628,10 @@ function saveNodes() {
             })),
             connections: connections
         })
-    }).then(response => response.json)
-      .then(data => console.log('Saved:', data))
-      .catch(error => console.error('Error:', error));
+    })
+    .then(response => response.json())
+    .then(data => console.log('Saved:', data))
+    .catch(error => console.error('Error:', error));
 }
 
 // Initial draw