Update static/canvas.js

static/canvas.js

@@ -97,19 +97,60 @@ function clearCanvas() {
 
 // Create nodes and connections from parsed data
 function createNodesFromParsedData(parsedNodes, parsedConnections) {
-    const scopePositions = {}; // Track x-position per scope
+    const columns = {
+        imports: { x: 50, y: 50, count: 0 }, // Column for imports
+        global: { x: 250, y: 50, count: 0 }, // Column for global scope
+        functions: {} // Columns for functions
+    };
+
+    // First pass: Assign function nodes to columns
     parsedNodes.forEach(nodeData => {
-        // 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 };
+        if (nodeData.type === 'function') {
+            const functionId = nodeData.id || `Function_${Object.keys(columns.functions).length + 1}`;
+            columns.functions[functionId] = {
+                x: 450 + Object.keys(columns.functions).length * 200,
+                y: 50,
+                count: 0
+            };
         }
-        // Stack left to right: increment x based on level and scope
+    });
+
+    // Second pass: Create nodes with column-based positioning
+    parsedNodes.forEach(nodeData => {
+        const parentPath = nodeData.parent_path || 'global';
         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;
+        let x, y;
+
+        if (nodeData.type === 'import') {
+            // Imports column
+            x = columns.imports.x;
+            y = columns.imports.y + columns.imports.count * 80;
+            columns.imports.count++;
+        } else if (nodeData.type === 'function') {
+            // Function column
+            const functionId = nodeData.id;
+            x = columns.functions[functionId].x;
+            y = columns.functions[functionId].y + columns.functions[functionId].count * 80;
+            columns.functions[functionId].count++;
+        } else if (parentPath !== 'global' && parentPath.includes('Function')) {
+            // Child of a function
+            const functionId = parentPath.split(' -> ')[0];
+            if (columns.functions[functionId]) {
+                x = columns.functions[functionId].x;
+                y = columns.functions[functionId].y + columns.functions[functionId].count * 80;
+                columns.functions[functionId].count++;
+            } else {
+                // Fallback to global if function not found
+                x = columns.global.x;
+                y = columns.global.y + columns.global.count * 80;
+                columns.global.count++;
+            }
+        } else {
+            // Global scope (non-import, non-function)
+            x = columns.global.x;
+            y = columns.global.y + columns.global.count * 80;
+            columns.global.count++;
+        }
 
         const node = createNode(
             x,
@@ -126,6 +167,7 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
         nodes.push(node);
         layer.add(node);
     });
+
     layer.draw();
     autoConnect();
     saveNodes();
@@ -441,7 +483,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;
+        return a.data.y - b.data.y; // Sort by y within columns
     });
 
     const hierarchy = {};
@@ -539,7 +581,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;
+        return a.data.y - b.data.y; // Sort by y within columns
     });
 
     let program = '';
@@ -556,8 +598,8 @@ function reconstructProgram() {
 // Add a manual node
 function addNode() {
     const node = createNode(
-        Math.random() * (stage.width() - 100),
-        Math.random() * (stage.height() - 100),
+        250, // Add to global column
+        50 + nodes.filter(n => n.data.parent_path === 'global').length * 80,
         'Function',
         'function',
         ['in1'],
@@ -573,6 +615,43 @@ function addNode() {
     saveNodes();
 }
 
+// Update spline connections when nodes move
+function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
+    const fromPort = fromNode.data.outputs.find(p => p.id === fromPortId);
+    const toPort = toNode.data.inputs.find(p => p.id === toPortId);
+    if (!fromPort || !toPort) return;
+
+    const startX = fromNode.x() + fromPort.circle.x();
+    const startY = fromNode.y() + fromPort.circle.y();
+    const endX = toNode.x() + toPort.circle.x();
+    const endY = toNode.y() + toPort.circle.y();
+
+    const control1X = startX + (endX - startX) / 3;
+    const control1Y = startY;
+    const control2X = startX + 2 * (endX - startX) / 3;
+    const control2Y = endY;
+
+    const spline = new Konva.Shape({
+        sceneFunc: function(context, shape) {
+            context.beginPath();
+            context.moveTo(startX, startY);
+            context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
+            context.fillStrokeShape(shape);
+        },
+        stroke: 'black',
+        strokeWidth: 2
+    });
+
+    spline.data = {
+        fromNodeId: fromNode.data.id,
+        fromPortId: fromPortId,
+        toNodeId: toNode.data.id,
+        toPortId: toPortId
+    };
+    layer.add(spline);
+    layer.draw();
+}
+
 // Update spline connections when nodes move
 function updateConnections() {
     layer.find('Shape').forEach(shape => {