Improved port hitboxes and edge rendering with consistent positioning

Author: scar17off

TODO.md

@@ -1,7 +1,3 @@
 # TODO
 
-- [ ] Add node context menu
-  - [ ] Copy node
-  - [ ] Delete node
-
 - [ ] Node labeling

src/VisualScripting.js

@@ -251,16 +251,43 @@ const VisualScripting = () => {
       const nodeType = nodeTypes[node.type];
       const dimensions = renderer.getNodeDimensions(node, canvasRef.current.getContext('2d'));
 
+      // Port icon dimensions (from Renderer.drawPortIcon)
+      const portIconWidth = 6 * 1.5; // Base width of triangle * scale
+      const portIconHeight = 10 * 1.5; // Base height of triangle * scale
+      const portOffset = 5; // Distance from node border
+      
+      // Calculate port Y position using the same logic as in drawEdges
+      const getPortY = (index) => {
+        const titleHeight = 25;
+        const portSpacing = 14;
+        const portVerticalGap = 5;
+        return node.y + titleHeight + portVerticalGap + (index * portSpacing) + 4;
+      };
+      
       // Check input ports
       for (let i = 0; i < nodeType.inputs.length; i++) {
-        if (node.isPortClicked(x, y, i, true, dimensions)) {
+        const portY = getPortY(i);
+        const portX = node.x - portOffset;
+        
+        // Create a square hitbox around the port
+        if (x >= portX - portIconWidth && 
+            x <= portX + portIconWidth && 
+            y >= portY - portIconHeight/2 && 
+            y <= portY + portIconHeight/2) {
           return node.getPortPosition(i, true, dimensions);
         }
       }
 
       // Check output ports
       for (let i = 0; i < nodeType.outputs.length; i++) {
-        if (node.isPortClicked(x, y, i, false, dimensions)) {
+        const portY = getPortY(i);
+        const portX = node.x + dimensions.width + portOffset;
+        
+        // Create a square hitbox around the port
+        if (x >= portX - portIconWidth && 
+            x <= portX + portIconWidth && 
+            y >= portY - portIconHeight/2 && 
+            y <= portY + portIconHeight/2) {
           return node.getPortPosition(i, false, dimensions);
         }
       }
@@ -357,8 +384,34 @@ const VisualScripting = () => {
           const exampleNodes = examples[param].nodes.map(node => 
             Node.createFromExample(node, nodeTypes)
           );
+          
+          // Reconstruct edges with proper port positions
+          const reconstructedEdges = examples[param].edges.map(edge => {
+            const startNode = exampleNodes.find(n => n.id === edge.start.nodeId);
+            const endNode = exampleNodes.find(n => n.id === edge.end.nodeId);
+            
+            if (startNode && endNode) {
+              const startDimensions = renderer.getNodeDimensions(startNode, canvasRef.current.getContext('2d'));
+              const endDimensions = renderer.getNodeDimensions(endNode, canvasRef.current.getContext('2d'));
+              
+              return {
+                start: {
+                  ...edge.start,
+                  x: edge.start.isInput ? startNode.x : startNode.x + startDimensions.width,
+                  y: startNode.y + startDimensions.portStartY + (edge.start.index * 20)
+                },
+                end: {
+                  ...edge.end,
+                  x: edge.end.isInput ? endNode.x : endNode.x + endDimensions.width,
+                  y: endNode.y + endDimensions.portStartY + (edge.end.index * 20)
+                }
+              };
+            }
+            return null;
+          }).filter(edge => edge !== null);
+
           setNodes(exampleNodes);
-          setEdges(examples[param].edges);
+          setEdges(reconstructedEdges);
           setUndoStack([]);
           setRedoStack([]);
         }

src/engine/Renderer.js

@@ -144,21 +144,46 @@ class Renderer {
         return;
       }
 
-      const startPort = startNode.getPortPosition(edge.start.index, edge.start.isInput, startDims);
-      const endPort = endNode.getPortPosition(edge.end.index, edge.end.isInput, endDims);
+      const getPortY = (node, dims, index) => {
+        const titleHeight = 25;
+        const portSpacing = 14;
+        const portVerticalGap = 5;
+        return node.y + titleHeight + portVerticalGap + (index * portSpacing) + 4;
+      };
+
+      const startPort = {
+        x: edge.start.isInput ? startNode.x : startNode.x + startDims.width,
+        y: getPortY(startNode, startDims, edge.start.index)
+      };
+
+      const endPort = {
+        x: edge.end.isInput ? endNode.x : endNode.x + endDims.width,
+        y: getPortY(endNode, endDims, edge.end.index)
+      };
 
       const dx = endPort.x - startPort.x;
       const controlPoint1 = { x: startPort.x + dx * 0.5, y: startPort.y };
       const controlPoint2 = { x: endPort.x - dx * 0.5, y: endPort.y };
 
+      // Draw the connection line
       ctx.beginPath();
       ctx.moveTo(startPort.x, startPort.y);
       ctx.bezierCurveTo(controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, endPort.x, endPort.y);
       ctx.strokeStyle = '#666';
       ctx.lineWidth = 2;
       ctx.stroke();
 
-      if (nodeTypes[startNode.type].outputs[edge.start.index].type === 'control') {
+      // Get the port types
+      const startPortType = edge.start.isInput 
+        ? nodeTypes[startNode.type].inputs[edge.start.index].type
+        : nodeTypes[startNode.type].outputs[edge.start.index].type;
+      
+      const endPortType = edge.end.isInput
+        ? nodeTypes[endNode.type].inputs[edge.end.index].type
+        : nodeTypes[endNode.type].outputs[edge.end.index].type;
+
+      // Draw arrow if either port is a control type or if it's a data connection
+      if (startPortType === 'control' || endPortType === 'control' || startPortType === 'data' || endPortType === 'data') {
         this.drawArrow(ctx, endPort.x, endPort.y, Math.atan2(endPort.y - controlPoint2.y, endPort.x - controlPoint2.x));
       }
     });