Editar desde el diagrama

script.js

@@ -56,10 +56,24 @@ function populateLinkForm(link) {
         editLinkTarget.appendChild(sourceOption);
     });
 
-    // Set current values
-    editLinkSource.value = sankeyData.nodes[link.source].name;
-    editLinkTarget.value = sankeyData.nodes[link.target].name;
-    editLinkValue.value = link.value;
+    // Handle different link data structures
+    let sourceName, targetName, linkValue;
+    
+    if (link.originalSource) {
+        // Case: clicked from diagram
+        sourceName = typeof link.originalSource === 'object' ? link.originalSource.name : sankeyData.nodes[link.originalSource].name;
+        targetName = typeof link.originalTarget === 'object' ? link.originalTarget.name : sankeyData.nodes[link.originalTarget].name;
+        linkValue = link.originalValue;
+    } else {
+        // Case: clicked from list
+        sourceName = typeof link.source === 'object' ? link.source.name : sankeyData.nodes[link.source].name;
+        targetName = typeof link.target === 'object' ? link.target.name : sankeyData.nodes[link.target].name;
+        linkValue = link.value;
+    }
+    
+    editLinkSource.value = sourceName;
+    editLinkTarget.value = targetName;
+    editLinkValue.value = linkValue;
 }
 
 // Event Handlers for Modal
@@ -469,15 +483,27 @@ saveEditBtn.addEventListener('click', () => {
             const targetNode = editLinkTarget.value;
             const value = parseInt(editLinkValue.value);
             
-            if (sourceNode && targetNode && value > 0) {
-                sankeyData.links[currentEditItem.index] = {
-                    source: sankeyData.nodes.findIndex(n => n.name === sourceNode),
-                    target: sankeyData.nodes.findIndex(n => n.name === targetNode),
-                    value: value
-                };
+            // Validate the index exists
+            if (currentEditItem.index >= 0 && currentEditItem.index < sankeyData.links.length) {
+                // Find the indices of source and target nodes
+                const sourceIndex = sankeyData.nodes.findIndex(n => n.name === sourceNode);
+                const targetIndex = sankeyData.nodes.findIndex(n => n.name === targetNode);
+                
+                if (sourceIndex !== -1 && targetIndex !== -1 && value > 0) {
+                    // Update the link data
+                    sankeyData.links[currentEditItem.index] = {
+                        source: sourceIndex,
+                        target: targetIndex,
+                        value: value
+                    };
+                }
             }
         }
         
+        // Clear diagram cache to force complete redraw
+        nodePositions = {};
+        
+        // Update everything
         updateLists();
         initDiagram();
         saveData();
@@ -591,11 +617,39 @@ function initDiagram() {
         })
         .attr("stroke-width", d => Math.max(1, d.dy))
         .style("mix-blend-mode", "multiply")
+        .attr("cursor", "pointer")
         .on("mouseover", function() {
             d3.select(this).attr("stroke-opacity", 0.8);
         })
         .on("mouseout", function() {
             d3.select(this).attr("stroke-opacity", linkAlpha);
+        })
+        .on("dblclick", function(event, d) {
+            // Find the link index by matching source name and target name
+            const index = sankeyData.links.findIndex(link => {
+                const sourceName = typeof d.source === 'object' ? d.source.name : sankeyData.nodes[d.source].name;
+                const targetName = typeof d.target === 'object' ? d.target.name : sankeyData.nodes[d.target].name;
+                
+                const linkSourceName = typeof link.source === 'object' ? 
+                    link.source.name : sankeyData.nodes[link.source].name;
+                const linkTargetName = typeof link.target === 'object' ? 
+                    link.target.name : sankeyData.nodes[link.target].name;
+                
+                return sourceName === linkSourceName && 
+                       targetName === linkTargetName && 
+                       link.value === d.value;
+            });
+            
+            // Store the link data for the modal
+            const linkData = {
+                source: sankeyData.links[index].source,
+                target: sankeyData.links[index].target,
+                value: sankeyData.links[index].value,
+                sourceName: typeof d.source === 'object' ? d.source.name : sankeyData.nodes[d.source].name,
+                targetName: typeof d.target === 'object' ? d.target.name : sankeyData.nodes[d.target].name
+            };
+            
+            handleEditLink(linkData, index);
         });
 
     // Filter out nodes that have no connections
@@ -623,6 +677,7 @@ function initDiagram() {
 
     const nodeEdgeColor = document.getElementById('node-edge-color').value;
     
+    // Add node rectangles with click interaction
     node.append("rect")
         .attr("height", d => Math.max(d.dy, 1)) // Ensure minimum height of 1px
         .attr("width", d => d.dx)
@@ -630,7 +685,11 @@ function initDiagram() {
         .attr("stroke", nodeEdgeColor)
         .attr("stroke-width", 1)
         .attr("rx", 3) // Rounded corners
-        .attr("ry", 3);
+        .attr("ry", 3)
+        .attr("cursor", "pointer")
+        .on("dblclick", function(event, d) {
+            handleEditNode(d, sankeyData.nodes.findIndex(node => node.name === d.name));
+        });
 
     // Add drag behavior
     node.call(d3.drag()