Various improvements

connections.js

@@ -124,6 +124,7 @@ export const connections = function(superClass) {
         
         // If not an input port, cancel the connection
         if (!isInputPort) {
+          this._dispatchConnectionDragEnd();
           this.draggingConnection = null;
           this.requestUpdate();
         }
@@ -371,10 +372,10 @@ export const connections = function(superClass) {
     _handlePortClick(e) {
       if (this.readonly) return;
 
-      const { node, port } = e.detail;
+      const { node, port, dataTypes } = e.detail;
       const nodeId = node.id;
       const { portType, portId, portName } = port;
-      
+
       if (!this.draggingConnection) {
         if (portType === 'output') {
           this.draggingConnection = {
@@ -382,8 +383,12 @@ export const connections = function(superClass) {
             sourcePortId: portId,
             sourcePortName: portName,
             sourcePortType: portType,
-            sourceNode: node
+            sourceNode: node,
+            sourceDataTypes: dataTypes || []
           };
+
+          // Notify all nodes that a drag has started — they evaluate their ports.
+          this._dispatchConnectionDragStart();
         }
       } else {
         if (portType === 'input' && nodeId !== this.draggingConnection.sourceNodeId) {
@@ -397,8 +402,8 @@ export const connections = function(superClass) {
             return;
           }
 
-          const connectionExists = this.connections.some(conn => 
-            conn.sourceNodeId === this.draggingConnection.sourceNodeId && 
+          const connectionExists = this.connections.some(conn =>
+            conn.sourceNodeId === this.draggingConnection.sourceNodeId &&
             conn.sourcePortId === this.draggingConnection.sourcePortId &&
             conn.targetNodeId === nodeId &&
             conn.targetPortId === portId
@@ -414,7 +419,7 @@ export const connections = function(superClass) {
               targetPortId: portId,
               targetPortName: portName
             };
-            
+
             this.connections = [...this.connections, connection];
 
             this._dispatchChangeEvent({
@@ -423,11 +428,32 @@ export const connections = function(superClass) {
             });
           }
         }
+
+        this._dispatchConnectionDragEnd();
         this.draggingConnection = null;
         this.requestUpdate();
       }
     }
 
+    _dispatchConnectionDragStart() {
+      const detail = {
+        sourceNode: this.draggingConnection.sourceNode,
+        sourcePortId: this.draggingConnection.sourcePortId,
+        sourceDataTypes: this.draggingConnection.sourceDataTypes
+      };
+
+      // Dispatch on each node directly — bubbling from canvas doesn't reach children.
+      this.nodes.forEach(node => {
+        node.dispatchEvent(new CustomEvent('connection-drag-start', { detail, bubbles: false, composed: false }));
+      });
+    }
+
+    _dispatchConnectionDragEnd() {
+      this.nodes.forEach(node => {
+        node.dispatchEvent(new CustomEvent('connection-drag-end', { detail: {}, bubbles: false, composed: false }));
+      });
+    }
+
     _calculateSVGBounds() {
       // If canvas is not ready yet, return default bounds
       if (!this.canvas) {