Update static/canvas.js

static/canvas.js

@@ -3,7 +3,7 @@ const stage = new Konva.Stage({
     container: 'container',
     width: 1000,
     height: 600,
-    draggable: true // Enable stage dragging for panning
+    draggable: true
 });
 
 const layer = new Konva.Layer();
@@ -11,10 +11,11 @@ stage.add(layer);
 
 // Store nodes, connections, and parsed data
 let nodes = [];
-let connections = []; // { fromNodeId, fromPortId, toNodeId, toPortId }
+let connections = [];
 let parsedConnections = [];
-let selectedPort = null; // { node, portId, type: 'input'|'output' }
+let selectedPort = null;
 let disconnectMode = false;
+let codeWindow = null; // Track open code window
 
 // Zoom functionality
 let scale = 1;
@@ -23,28 +24,18 @@ const minScale = 0.5;
 const maxScale = 2.0;
 
 stage.on('wheel', (e) => {
-    e.evt.preventDefault(); // Prevent default browser scrolling
-
+    e.evt.preventDefault();
     const oldScale = scale;
     const pointer = stage.getPointerPosition();
-
-    // Determine zoom direction
     const delta = e.evt.deltaY > 0 ? 1 / scaleFactor : scaleFactor;
     const newScale = Math.max(minScale, Math.min(maxScale, oldScale * delta));
-
-    if (newScale === scale) return; // No change in scale
+    if (newScale === scale) return;
     scale = newScale;
-
-    // Calculate mouse position relative to stage
     const mousePointTo = {
         x: (pointer.x - stage.x()) / oldScale,
         y: (pointer.y - stage.y()) / oldScale
     };
-
-    // Apply new scale
     stage.scale({ x: scale, y: scale });
-
-    // Adjust stage position to keep the zoom centered on the mouse
     const newPos = {
         x: pointer.x - mousePointTo.x * scale,
         y: pointer.y - mousePointTo.y * scale
@@ -79,7 +70,7 @@ function submitCode() {
             return;
         }
         clearCanvas();
-        parsedConnections = data.connections; // Store for auto-connect
+        parsedConnections = data.connections;
         createNodesFromParsedData(data.nodes, data.connections);
     })
     .catch(error => console.error('Error:', error));
@@ -92,6 +83,10 @@ function clearCanvas() {
     nodes = [];
     connections = [];
     parsedConnections = [];
+    if (codeWindow) {
+        codeWindow.destroy();
+        codeWindow = null;
+    }
     layer.draw();
 }
 
@@ -105,17 +100,21 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
             nodeData.type,
             nodeData.inputs,
             nodeData.outputs,
-            nodeData.id
+            nodeData.id,
+            nodeData.source,
+            nodeData.parent_path,
+            nodeData.level
         );
         nodes.push(node);
         layer.add(node);
     });
     layer.draw();
+    autoConnect(); // Call autoConnect after nodes are created
     saveNodes();
 }
 
-// Create a node with inputs and outputs
-function createNode(x, y, label, type, inputs = [], outputs = [], id) {
+// Create a node with inputs, outputs, and code segment
+function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '', parent_path = '', level = 0) {
     const node = new Konva.Group({
         x: x,
         y: y,
@@ -123,10 +122,14 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     });
 
     // Node rectangle
-    const color = type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : type === 'import' ? '#a5d6a7' : '#ccc';
+    const isNumberBox = type === 'number_box';
+    const color = isNumberBox ? '#ffcccb' : type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : type === 'import' ? '#a5d6a7' : '#ccc';
+    const width = isNumberBox ? 80 : 100;
+    const height = isNumberBox ? 40 : 50;
+
     const box = new Konva.Rect({
-        width: 100,
-        height: 50,
+        width: width,
+        height: height,
         fill: color,
         stroke: 'black',
         strokeWidth: 2,
@@ -139,15 +142,15 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         fontSize: 12,
         fontFamily: 'Arial',
         fill: 'black',
-        width: 100,
+        width: width,
         align: 'center',
-        y: 20
+        y: isNumberBox ? 14 : 20
     });
 
     node.add(box);
     node.add(text);
 
-    // Add input/output ports with unique IDs
+    // Input/output ports
     const inputPorts = inputs.map((input, i) => ({
         id: `input-${id}-${i}`,
         name: input,
@@ -163,7 +166,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         id: `output-${id}-${i}`,
         name: output,
         circle: new Konva.Circle({
-            x: 100,
+            x: width,
             y: 10 + i * 20,
             radius: 5,
             fill: 'green'
@@ -176,9 +179,8 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         port.circle.on('click', () => {
             if (!selectedPort) {
                 selectedPort = { node, portId: port.id, type: 'input' };
-                disconnectMode = true; // First click on input enables disconnect mode
+                disconnectMode = true;
             } else if (selectedPort.type === 'output' && selectedPort.node !== node) {
-                // Connect output to input
                 createSplineConnection(
                     selectedPort.node,
                     selectedPort.portId,
@@ -195,8 +197,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
                 disconnectMode = false;
                 saveNodes();
             } else if (disconnectMode && selectedPort.type === 'input' && selectedPort.node === node) {
-                // Select output to disconnect
-                selectedPort = { node, portId: port.id, type: 'input' }; // Keep input selected
+                selectedPort = { node, portId: port.id, type: 'input' };
             } else {
                 selectedPort = null;
                 disconnectMode = false;
@@ -211,7 +212,6 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
                 selectedPort = { node, portId: port.id, type: 'output' };
                 disconnectMode = false;
             } else if (disconnectMode && selectedPort.type === 'input') {
-                // Disconnect input from output
                 const connIndex = connections.findIndex(
                     c => c.toNodeId === selectedPort.node.data.id &&
                          c.toPortId === selectedPort.portId &&
@@ -220,7 +220,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
                 );
                 if (connIndex !== -1) {
                     const conn = connections[connIndex];
-                    const spline = layer.find('Shape').find(s => 
+                    const spline = layer.find('Shape').find(s =>
                         s.data.fromNodeId === conn.fromNodeId &&
                         s.data.fromPortId === conn.fromPortId &&
                         s.data.toNodeId === conn.toNodeId &&
@@ -241,20 +241,103 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     });
 
     // Node data
-    node.data = {
+    nodeintersectionObserver.data = {
         id: id,
         type: type,
         label: label,
         inputs: inputPorts,
         outputs: outputPorts,
         x: x,
-        y: y
+        y: y,
+        source: source,
+        parent_path: parent_path,
+        level: level
     };
 
+    // Click handler to show code window
+    box.on('click', () => {
+        if (codeWindow) {
+            codeWindow.destroy();
+            codeWindow = null;
+        }
+
+        const nodePos = node.getAbsolutePosition();
+        codeWindow = new Konva.Group({
+            x: nodePos.x,
+            y: nodePos.y + height + 10
+        });
+
+        const codeBox = new Konva.Rect({
+            width: 300,
+            height: 100,
+            fill: '#f0f0f0',
+            stroke: 'black',
+            strokeWidth: 1,
+            cornerRadius: 5
+        });
+
+        const textarea = document.createElement('textarea');
+        textarea.style.position = 'absolute';
+        textarea.style.left = `${nodePos.x / scale + stage.x() / scale}px`;
+        textarea.style.top = `${(nodePos.y + height + 10) / scale + stage.y() / scale}px`;
+        textarea.style.width = '300px';
+        textarea.style.height = '100px';
+        textarea.style.fontFamily = 'monospace';
+        textarea.value = source || '';
+        document.body.appendChild(textarea);
+
+        // Update code on change
+        textarea.addEventListener('change', () => {
+            const newSource = textarea.value;
+            node.data.source = newSource;
+            fetch('/update_node', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: node.data.id,
+                    source: newSource
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    alert(data.error);
+                } else {
+                    console.log('Node updated:', data);
+                    updateProgram();
+                }
+            })
+            .catch(error => console.error('Error:', error));
+        });
+
+        // Close window on click outside
+        stage.on('click', (e) => {
+            if (e.target !== box && codeWindow) {
+                codeWindow.destroy();
+                document.body.removeChild(textarea);
+                codeWindow = null;
+                stage.off('click');
+            }
+        });
+
+        codeWindow.add(codeBox);
+        layer.add(codeWindow);
+        layer.draw();
+    });
+
     // Update position and connections on drag
     node.on('dragmove', () => {
         node.data.x = node.x();
         node.data.y = node.y();
+        if (codeWindow) {
+            const nodePos = node.getAbsolutePosition();
+            codeWindow.position({ x: nodePos.x, y: nodePos.y + height + 10 });
+            const textarea = document.querySelector(`textarea`);
+            if (textarea) {
+                textarea.style.left = `${nodePos.x / scale + stage.x() / scale}px`;
+                textarea.style.top = `${(nodePos.y + height + 10) / scale + stage.y() / scale}px`;
+            }
+        }
         updateConnections();
         saveNodes();
     });
@@ -262,7 +345,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     return node;
 }
 
-// Create a spline (Bezier curve) connection
+// Create a spline connection
 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);
@@ -273,7 +356,6 @@ function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
     const endX = toNode.x() + toPort.circle.x();
     const endY = toNode.y() + toPort.circle.y();
 
-    // Control points for Bezier curve
     const control1X = startX + (endX - startX) / 3;
     const control1Y = startY;
     const control2X = startX + 2 * (endX - startX) / 3;
@@ -300,7 +382,7 @@ function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
     layer.draw();
 }
 
-// Auto-connect nodes based on parsed connections
+// Enhanced auto-connect based on hierarchy, position, and role
 function autoConnect() {
     // Clear existing connections
     layer.find('Shape').forEach(shape => {
@@ -310,12 +392,25 @@ function autoConnect() {
     });
     connections = [];
 
-    // Create spline connections for parsed data
+    // Sort nodes by level and y-position to approximate program order
+    const sortedNodes = [...nodes].sort((a, b) => {
+        if (a.data.level !== b.data.level) return a.data.level - b.data.level;
+        return a.data.y - b.data.y;
+    });
+
+    // Build hierarchy map
+    const hierarchy = {};
+    sortedNodes.forEach(node => {
+        const parent = node.data.parent_path.split(' -> ')[0] || 'global';
+        if (!hierarchy[parent]) hierarchy[parent] = [];
+        hierarchy[parent].push(node);
+    });
+
+    // Create connections based on parsed connections and hierarchy
     parsedConnections.forEach(conn => {
         const fromNode = nodes.find(n => n.data.id === conn.from);
         const toNode = nodes.find(n => n.data.id === conn.to);
         if (fromNode && toNode) {
-            // Find first available output and input ports
             const fromPort = fromNode.data.outputs[0];
             const toPort = toNode.data.inputs[0];
             if (fromPort && toPort) {
@@ -330,10 +425,93 @@ function autoConnect() {
         }
     });
 
+    // Additional connections based on hierarchy and role
+    sortedNodes.forEach(node => {
+        const nodeId = node.data.id;
+        const parent = node.data.parent_path.split(' -> ')[0] || 'global';
+        const role = node.data.type;
+
+        // Connect to parent if applicable
+        if (parent !== 'global') {
+            const parentNode = nodes.find(n => n.data.id === parent || n.data.label === parent.split('[')[0]);
+            if (parentNode && parentNode.data.outputs.length > 0 && node.data.inputs.length > 0) {
+                const fromPort = parentNode.data.outputs[0];
+                const toPort = node.data.inputs[0];
+                if (!connections.some(c => c.fromNodeId === parentNode.data.id && c.toNodeId === nodeId)) {
+                    createSplineConnection(parentNode, fromPort.id, node, toPort.id);
+                    connections.push({
+                        fromNodeId: parentNode.data.id,
+                        fromPortId: fromPort.id,
+                        toNodeId: nodeId,
+                        toPortId: toPort.id
+                    });
+                }
+            }
+        }
+
+        // Connect variables to their uses
+        if (role.includes('variable')) {
+            const varName = node.data.label;
+            sortedNodes.forEach(otherNode => {
+                if (otherNode !== node && otherNode.data.source.includes(varName)) {
+                    const fromPort = node.data.outputs[0];
+                    const toPort = otherNode.data.inputs[0];
+                    if (fromPort && toPort && !connections.some(c => c.fromNodeId === nodeId && c.toNodeId === otherNode.data.id)) {
+                        createSplineConnection(node, fromPort.id, otherNode, toPort.id);
+                        connections.push({
+                            fromNodeId: nodeId,
+                            fromPortId: fromPort.id,
+                            toNodeId: otherNode.data.id,
+                            toPortId: toPort.id
+                        });
+                    }
+                }
+            });
+        }
+    });
+
     layer.draw();
     saveNodes();
 }
 
+// Update full program
+function updateProgram() {
+    const program = reconstructProgram();
+    document.getElementById('codeInput').value = program;
+    fetch('/update_program', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: program })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            alert(data.error);
+        } else {
+            console.log('Program updated:', data);
+        }
+    })
+    .catch(error => console.error('Error:', error));
+}
+
+// Reconstruct the original program
+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.y - b.data.y;
+    });
+
+    let program = '';
+    sortedNodes.forEach(node => {
+        const source = node.data.source || '';
+        const level = node.data.level || 0;
+        const indent = '    '.repeat(level);
+        program += indent + source.trim() + '\n';
+    });
+
+    return program.trim();
+}
+
 // Add a manual node
 function addNode() {
     const node = createNode(
@@ -343,7 +521,10 @@ function addNode() {
         'function',
         ['in1'],
         ['out1'],
-        nodes.length
+        nodes.length,
+        'def new_function(): pass',
+        'global',
+        0
     );
     nodes.push(node);
     layer.add(node);
@@ -399,7 +580,10 @@ function saveNodes() {
                 x: n.data.x,
                 y: n.data.y,
                 inputs: n.data.inputs.map(p => p.name),
-                outputs: n.data.outputs.map(p => p.name)
+                outputs: n.data.outputs.map(p => p.name),
+                source: n.data.source,
+                parent_path: n.data.parent_path,
+                level: n.data.level
             })),
             connections: connections
         })