Improved port visualization with distinct control/data icons and better hit detection

Author: scar17off

TODO.md

@@ -7,9 +7,6 @@
   - [ ] Copy node
   - [ ] Delete node
 
-- [ ] Improve port appearance
-  - [ ] Add arrows to ports instead of circles
-
 - [ ] Node labeling
 
 - [ ] Add new node types:

src/VisualScripting.js

@@ -226,31 +226,33 @@ const VisualScripting = () => {
   };
 
   const findClickedPort = (x, y) => {
-    const PORT_RADIUS = 5;
-    const PORT_RADIUS_SQUARED = PORT_RADIUS * PORT_RADIUS;
+    const PORT_WIDTH = 6;  // Width of the gray arrow
+    const PORT_HEIGHT = 10; // Height of the gray arrow 
+    const PORT_OFFSET = 5;  // Distance from node border
+    const SCALE_MULTIPLIER = 1.5; // Scale multiplier for hit detection
 
     for (const node of nodes) {
       const nodeType = nodeTypes[node.type];
       const { width, portStartY } = renderer.getNodeDimensions(node, canvasRef.current.getContext('2d'));
 
       // Check input ports
       for (let i = 0; i < nodeType.inputs.length; i++) {
-        const portX = node.x;
-        const portY = node.y + portStartY + i * 20;
-        const dx = x - portX;
-        const dy = y - portY;
-        if (dx * dx + dy * dy <= PORT_RADIUS_SQUARED) {
+        const portX = node.x - PORT_OFFSET - PORT_WIDTH; // Position of gray arrow
+        const portY = node.y + portStartY + i * 20 - PORT_HEIGHT/2;
+        
+        if (x >= portX && x <= portX + PORT_WIDTH * SCALE_MULTIPLIER &&
+            y >= portY && y <= portY + PORT_HEIGHT * SCALE_MULTIPLIER) {
           return { nodeId: node.id, isInput: true, index: i };
         }
       }
 
       // Check output ports
       for (let i = 0; i < nodeType.outputs.length; i++) {
-        const portX = node.x + width;
-        const portY = node.y + portStartY + i * 20;
-        const dx = x - portX;
-        const dy = y - portY;
-        if (dx * dx + dy * dy <= PORT_RADIUS_SQUARED) {
+        const portX = node.x + width + PORT_OFFSET; // Position of gray arrow
+        const portY = node.y + portStartY + i * 20 - PORT_HEIGHT/2;
+        
+        if (x >= portX && x <= portX + PORT_WIDTH * SCALE_MULTIPLIER &&
+            y >= portY && y <= portY + PORT_HEIGHT * SCALE_MULTIPLIER) {
           return { nodeId: node.id, isInput: false, index: i };
         }
       }

src/components/GraphInspector.js

@@ -85,7 +85,7 @@ const GraphInspector = ({
         </div>
         {nodeType.inputs.map((input, index) => (
           <div key={index} className={`${styles.portContainer} ${config.isDarkTheme ? styles.portContainerDark : styles.portContainerLight}`}>
-            <div className={styles.portIcon} style={{ transform: 'rotate(180deg)' }} />
+            <div className={input.type === 'control' ? styles.portIconControl : styles.portIconData} />
             <span>"{input.name}"</span>
             <span className={styles.portType}>({input.type})</span>
           </div>
@@ -98,7 +98,7 @@ const GraphInspector = ({
         </div>
         {nodeType.outputs.map((output, index) => (
           <div key={index} className={`${styles.portContainer} ${config.isDarkTheme ? styles.portContainerDark : styles.portContainerLight}`}>
-            <div className={styles.portIcon} />
+            <div className={output.type === 'control' ? styles.portIconControl : styles.portIconData} />
             <span>"{output.name}"</span>
             <span className={styles.portType}>({output.type})</span>
           </div>

src/components/GraphInspector.module.css

@@ -156,7 +156,15 @@
   align-items: center;
 }
 
-.portIcon::before {
+.portIconControl {
+  position: relative;
+  width: 16px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.portIconControl::before {
   content: '';
   position: absolute;
   width: 10px;
@@ -165,7 +173,7 @@
   left: 0;
 }
 
-.portIcon::after {
+.portIconControl::after {
   content: '';
   position: absolute;
   right: 0;
@@ -176,6 +184,14 @@
   border-left: 6px solid #4CAF50;
 }
 
+.portIconData {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #FFA500;
+  margin: 0 4px;
+}
+
 .portType {
   opacity: 0.7;
   font-weight: 500;
@@ -194,4 +210,20 @@
 
 .emptyMessageLight {
   color: #666;
+}
+
+.portIconControlInput {
+  composes: portIconControl;
+}
+
+.portIconControlInput::before {
+  left: auto;
+  right: 0;
+}
+
+.portIconControlInput::after {
+  right: auto;
+  left: 0;
+  border-left: none;
+  border-right: 6px solid #4CAF50;
 } 

src/engine/Renderer.js

@@ -97,7 +97,7 @@ class Renderer {
     this.drawEdges(ctx, edges, nodes);
 
     // Draw nodes
-    this.drawNodes(ctx, nodes, selectedNodes);
+    this.drawNodes(ctx, nodes, edges, selectedNodes);
 
     // Draw connection line
     if (connecting) {
@@ -164,11 +164,59 @@ class Renderer {
     });
   }
 
-  drawNodes(ctx, nodes, selectedNodes) {
+  drawPortIcon(ctx, x, y, isInput) {
+    const offset = 5; // Distance from node border
+    const arrowX = isInput ? x - offset : x + offset;
+    
+    ctx.beginPath();
+    if (isInput) {
+      ctx.moveTo(arrowX - 6, y - 5);
+      ctx.lineTo(arrowX - 6, y + 5);
+      ctx.lineTo(arrowX, y);
+    } else {
+      ctx.moveTo(arrowX, y - 5);
+      ctx.lineTo(arrowX, y + 5);
+      ctx.lineTo(arrowX + 6, y);
+    }
+    ctx.closePath();
+    ctx.strokeStyle = '#999999';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+
+  drawLabelArrow(ctx, x, y, isControl) {
+    if (isControl) {
+      const lineLength = 10;
+      
+      // Draw line
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + lineLength, y);
+      ctx.strokeStyle = '#4CAF50';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      // Draw arrow
+      ctx.beginPath();
+      ctx.moveTo(x + lineLength, y - 5);
+      ctx.lineTo(x + lineLength, y + 5);
+      ctx.lineTo(x + lineLength + 6, y);
+      ctx.closePath();
+      ctx.fillStyle = '#4CAF50';
+      ctx.fill();
+    } else {
+      // Draw orange circle for data ports
+      ctx.beginPath();
+      ctx.arc(x + 5, y, 4, 0, Math.PI * 2);
+      ctx.fillStyle = '#FFA500';
+      ctx.fill();
+    }
+  }
+
+  drawNodes(ctx, nodes, edges, selectedNodes) {
     nodes.forEach(node => {
       const { width, height } = this.getNodeDimensions(node, ctx);
 
-      // Skip nodes that are completely outside the view
       if (!this.isRectInView(node.x, node.y, width, height, ctx.canvas.width, ctx.canvas.height)) {
         return;
       }
@@ -220,22 +268,44 @@ class Renderer {
 
       // Input ports
       nodeType.inputs.forEach((input, i) => {
-        ctx.fillStyle = '#FFA500';
-        ctx.beginPath();
-        ctx.arc(node.x, node.y + currentHeight + i * 20, 5, 0, 2 * Math.PI);
-        ctx.fill();
+        const portY = node.y + currentHeight + i * 20;
+        const isControl = input.type === 'control';
+        
+        // Check if port is connected
+        const isPortConnected = edges.some(edge => 
+          edge.end.nodeId === node.id && 
+          edge.end.index === i && 
+          edge.end.isInput
+        );
+        
+        if (!isPortConnected) {
+          this.drawPortIcon(ctx, node.x, portY, true);
+        }
+        
+        this.drawLabelArrow(ctx, node.x + 15, portY, isControl);
         ctx.fillStyle = 'white';
-        ctx.fillText(`${input.type === 'control' ? '▶' : '●'} ${input.name}`, node.x + 10, node.y + currentHeight + 5 + i * 20);
+        ctx.fillText(input.name, node.x + 35, portY + 5);
       });
 
       // Output ports
       nodeType.outputs.forEach((output, i) => {
-        ctx.fillStyle = '#FFA500';
-        ctx.beginPath();
-        ctx.arc(node.x + width, node.y + currentHeight + i * 20, 5, 0, 2 * Math.PI);
-        ctx.fill();
+        const portY = node.y + currentHeight + i * 20;
+        const isControl = output.type === 'control';
+        
+        const isPortConnected = edges.some(edge => 
+          edge.start.nodeId === node.id && 
+          edge.start.index === i && 
+          !edge.start.isInput
+        );
+        
+        if (!isPortConnected) {
+          this.drawPortIcon(ctx, node.x + width, portY, false);
+        }
+        
         ctx.fillStyle = 'white';
-        ctx.fillText(`${output.name} ${output.type === 'control' ? '▶' : '●'}`, node.x + width - 70, node.y + currentHeight + 5 + i * 20);
+        const textWidth = ctx.measureText(output.name).width;
+        ctx.fillText(output.name, node.x + width - textWidth - 35, portY + 5);
+        this.drawLabelArrow(ctx, node.x + width - 25, portY, isControl);
       });
 
       currentHeight += Math.max(nodeType.inputs.length, nodeType.outputs.length) * 15;