Update static/canvas.js

static/canvas.js

@@ -16,6 +16,7 @@ let parsedConnections = [];
 let selectedPort = null;
 let disconnectMode = false;
 let codeWindow = null; // Track open code window
+let codeTextarea = null; // Track textarea element
 
 // Zoom functionality
 let scale = 1;
@@ -87,15 +88,29 @@ function clearCanvas() {
         codeWindow.destroy();
         codeWindow = null;
     }
+    if (codeTextarea) {
+        codeTextarea.remove();
+        codeTextarea = null;
+    }
     layer.draw();
 }
 
 // Create nodes and connections from parsed data
 function createNodesFromParsedData(parsedNodes, parsedConnections) {
+    const scopePositions = {}; // Track x-position per scope
     parsedNodes.forEach(nodeData => {
+        const scope = nodeData.parent_path.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 y = scopePositions[scope].count * 80 + 50; // Slight y offset for readability
+        scopePositions[scope].count += 1;
+
         const node = createNode(
-            nodeData.x,
-            nodeData.y,
+            x,
+            y,
             nodeData.label,
             nodeData.type,
             nodeData.inputs,
@@ -109,7 +124,7 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
         layer.add(node);
     });
     layer.draw();
-    autoConnect(); // Call autoConnect after nodes are created
+    autoConnect();
     saveNodes();
 }
 
@@ -260,11 +275,15 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '
             codeWindow.destroy();
             codeWindow = null;
         }
+        if (codeTextarea) {
+            codeTextarea.remove();
+            codeTextarea = null;
+        }
 
         const nodePos = node.getAbsolutePosition();
         codeWindow = new Konva.Group({
-            x: nodePos.x,
-            y: nodePos.y + height + 10
+            x: node.x(),
+            y: node.y() + height + 10
         });
 
         const codeBox = new Konva.Rect({
@@ -276,20 +295,46 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '
             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);
+        // Display source in Konva Text for visual containment
+        const codeText = new Konva.Text({
+            x: 5,
+            y: 5,
+            text: source || '',
+            fontSize: 12,
+            fontFamily: 'monospace',
+            fill: 'black',
+            width: 290,
+            padding: 5
+        });
+
+        codeWindow.add(codeBox);
+        codeWindow.add(codeText);
+        layer.add(codeWindow);
+
+        // 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;
+        codeTextarea.style.left = `${textareaX}px`;
+        codeTextarea.style.top = `${textareaY}px`;
+        codeTextarea.style.width = `${300 / scale}px`;
+        codeTextarea.style.height = `${100 / scale}px`;
+        codeTextarea.style.fontFamily = 'monospace';
+        codeTextarea.style.fontSize = `${12 / scale}px`;
+        codeTextarea.style.background = 'transparent';
+        codeTextarea.style.border = 'none';
+        codeTextarea.style.resize = 'none';
+        codeTextarea.value = source || '';
+        document.body.appendChild(codeTextarea);
 
         // Update code on change
-        textarea.addEventListener('change', () => {
-            const newSource = textarea.value;
+        codeTextarea.addEventListener('change', () => {
+            const newSource = codeTextarea.value;
             node.data.source = newSource;
+            codeText.text(newSource);
             fetch('/update_node', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -314,14 +359,15 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '
         stage.on('click', (e) => {
             if (e.target !== box && codeWindow) {
                 codeWindow.destroy();
-                document.body.removeChild(textarea);
                 codeWindow = null;
+                if (codeTextarea) {
+                    codeTextarea.remove();
+                    codeTextarea = null;
+                }
                 stage.off('click');
             }
         });
 
-        codeWindow.add(codeBox);
-        layer.add(codeWindow);
         layer.draw();
     });
 
@@ -329,14 +375,14 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, source = '
     node.on('dragmove', () => {
         node.data.x = node.x();
         node.data.y = node.y();
-        if (codeWindow) {
+        if (codeWindow && codeTextarea) {
             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`;
-            }
+            codeWindow.position({ x: node.x(), y: node.y() + height + 10 });
+            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;
+            codeTextarea.style.left = `${textareaX}px`;
+            codeTextarea.style.top = `${textareaY}px`;
         }
         updateConnections();
         saveNodes();
@@ -384,7 +430,6 @@ function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
 
 // Enhanced auto-connect based on hierarchy, position, and role
 function autoConnect() {
-    // Clear existing connections
     layer.find('Shape').forEach(shape => {
         if (shape.data && shape.data.fromNodeId !== undefined) {
             shape.destroy();
@@ -392,13 +437,11 @@ function autoConnect() {
     });
     connections = [];
 
-    // 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;
+        return a.data.x - b.data.x; // Sort by x for left-to-right order
     });
 
-    // Build hierarchy map
     const hierarchy = {};
     sortedNodes.forEach(node => {
         const parent = node.data.parent_path.split(' -> ')[0] || 'global';
@@ -406,7 +449,6 @@ function autoConnect() {
         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);
@@ -425,13 +467,11 @@ 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) {
@@ -449,7 +489,6 @@ function autoConnect() {
             }
         }
 
-        // Connect variables to their uses
         if (role.includes('variable')) {
             const varName = node.data.label;
             sortedNodes.forEach(otherNode => {
@@ -498,7 +537,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.y - b.data.y;
+        return a.data.x - b.data.x; // Sort by x for left-to-right order
     });
 
     let program = '';
@@ -587,7 +626,7 @@ function saveNodes() {
             })),
             connections: connections
         })
-    }).then(response => response.json())
+    }).then(response => response.json золото
       .then(data => console.log('Saved:', data))
       .catch(error => console.error('Error:', error));
 }