tp-flow-nodes/connections.js

import { html, css, svg } from 'lit';

export const connectionStyles = css`
  .connections {
    pointer-events: none;
  }

  .connections path {
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
    pointer-events: all;
    cursor: pointer;
  }

  .connections path:hover {
    stroke: #999;
    stroke-width: 3;
  }

  .connections path.selected {
    stroke: #3498db;
    stroke-width: 3;
  }

  .delete-button-group {
    pointer-events: all;
    cursor: pointer;
  }

  .delete-button-group:hover .delete-button-circle {
    fill: #c0392b;
  }

  .delete-button-circle {
    fill: #e74c3c;
    transition: fill 0.2s ease;
  }

  .delete-button-x {
    stroke: white;
    stroke-width: 2;
  }

  .delete-button-group {
    pointer-events: all;
    cursor: pointer;
    /* Ensure buttons are always on top of nodes */
    z-index: 1000;
  }
`;

export const connections = function(superClass) {
  return class extends superClass {
    constructor() {
      super();
      this.connections = [];
      this.draggingConnection = null;
      this.mousePosition = { x: 0, y: 0 };
    }

    firstUpdated() {
      this.addEventListener('port-click', this._handlePortClick);
      document.addEventListener('mousemove', this._updatePreviewConnection.bind(this));
      this.canvas.addEventListener('click', (e) => {
        if (e.target === this.canvas) {
          this.selectedConnection = null;
          this.requestUpdate();
        }
      });
      super.firstUpdated();
    }

    _updatePreviewConnection(e) {
      if (this.draggingConnection) {
        this.mousePosition = {
          x: e.clientX,
          y: e.clientY
        };
        this.requestUpdate();
      }
    }

    _renderConnections() {
      return html`
        <svg class="connections" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;">
          ${this.connections.map(conn => this._renderConnection(conn))}
          ${this.draggingConnection ? this._renderPreviewConnection() : null}
        </svg>
      `;
    }

    _renderPreviewConnection() {
      const sourceNode = this.nodes.find(node => node.id === this.draggingConnection.sourceNodeId);
      if (!sourceNode) return '';

      const sourcePort = sourceNode.shadowRoot.querySelector(
        `.output-ports [data-port-id="${this.draggingConnection.sourcePortId}"]`
      );
      if (!sourcePort) return '';

      const sourceRect = sourcePort.getBoundingClientRect();
      const canvasRect = this.canvas.getBoundingClientRect();

      const start = {
        x: sourceRect.left + sourceRect.width/2 - canvasRect.left,
        y: sourceRect.top + sourceRect.height/2 - canvasRect.top
      };
      
      const end = {
        x: this.mousePosition.x - canvasRect.left,
        y: this.mousePosition.y - canvasRect.top
      };

      const controlPoint1 = {
        x: start.x + Math.min(100, Math.abs(end.x - start.x) / 2),
        y: start.y
      };
      
      const controlPoint2 = {
        x: end.x - Math.min(100, Math.abs(end.x - start.x) / 2),
        y: end.y
      };

      const path = `M${start.x},${start.y} C${controlPoint1.x},${controlPoint1.y} ${controlPoint2.x},${controlPoint2.y} ${end.x},${end.y}`;

      return svg`
        <path 
          d="${path}"
          fill="none"
          stroke="#666"
          stroke-width="2"
          stroke-dasharray="5,5"
          id="preview-connection"
        />
      `;
    }

    _renderConnection(conn) {
      const sourceNode = this.nodes.find(node => node.id === conn.sourceNodeId);
      const targetNode = this.nodes.find(node => node.id === conn.targetNodeId);
      
      if (!sourceNode || !targetNode) return '';

      const sourcePort = sourceNode.shadowRoot.querySelector(`.output-ports [data-port-id="${conn.sourcePortId}"]`);
      const targetPort = targetNode.shadowRoot.querySelector(`.input-ports [data-port-id="${conn.targetPortId}"]`);
      
      if (!sourcePort || !targetPort) return '';

      const sourceRect = sourcePort.getBoundingClientRect();
      const targetRect = targetPort.getBoundingClientRect();
      const canvasRect = this.canvas.getBoundingClientRect();

      const start = {
        x: sourceRect.left + sourceRect.width/2 - canvasRect.left,
        y: sourceRect.top + sourceRect.height/2 - canvasRect.top
      };
      
      const end = {
        x: targetRect.left + targetRect.width/2 - canvasRect.left,
        y: targetRect.top + targetRect.height/2 - canvasRect.top
      };

      const controlPoint1 = {
        x: start.x + Math.min(100, Math.abs(end.x - start.x) / 2),
        y: start.y
      };
      
      const controlPoint2 = {
        x: end.x - Math.min(100, Math.abs(end.x - start.x) / 2),
        y: end.y
      };

      // Helper function to get point on cubic bezier curve at t (0-1)
      const getPointOnCurve = (t) => {
        const t1 = 1 - t;
        return {
          x: Math.pow(t1, 3) * start.x +
            3 * Math.pow(t1, 2) * t * controlPoint1.x +
            3 * t1 * Math.pow(t, 2) * controlPoint2.x +
            Math.pow(t, 3) * end.x,
          y: Math.pow(t1, 3) * start.y +
            3 * Math.pow(t1, 2) * t * controlPoint1.y +
            3 * t1 * Math.pow(t, 2) * controlPoint2.y +
            Math.pow(t, 3) * end.y
        };
      };

      // Get points at 15% and 85% along the curve
      const startButton = getPointOnCurve(0.15);
      const endButton = getPointOnCurve(0.85);

      const path = `M${start.x},${start.y} C${controlPoint1.x},${controlPoint1.y} ${controlPoint2.x},${controlPoint2.y} ${end.x},${end.y}`;
      const isSelected = this.selectedConnection === conn.id;

      return svg`
        <g>
          <path 
            d="${path}"
            fill="none"
            stroke="#666"
            stroke-width="2"
            id="${conn.id}"
            class="${isSelected ? 'selected' : ''}"
            @click="${() => this._handleConnectionClick(conn.id)}"
          />
          ${isSelected ? svg`
            <g>
              <!-- Source delete button -->
              <g class="delete-button-group" @click="${() => this._deleteConnection(conn.id)}">
                <circle 
                  class="delete-button-circle"
                  cx="${startButton.x}" 
                  cy="${startButton.y}" 
                  r="8"
                />
                <path
                  class="delete-button-x"
                  d="M ${startButton.x-4},${startButton.y-4} L ${startButton.x+4},${startButton.y+4} M ${startButton.x-4},${startButton.y+4} L ${startButton.x+4},${startButton.y-4}"
                />
              </g>
              <!-- Target delete button -->
              <g class="delete-button-group" @click="${() => this._deleteConnection(conn.id)}">
                <circle 
                  class="delete-button-circle"
                  cx="${endButton.x}" 
                  cy="${endButton.y}" 
                  r="8"
                />
                <path
                  class="delete-button-x"
                  d="M ${endButton.x-4},${endButton.y-4} L ${endButton.x+4},${endButton.y+4} M ${endButton.x-4},${endButton.y+4} L ${endButton.x+4},${endButton.y-4}"
                />
              </g>
            </g>
          ` : ''}
        </g>
      `;
    }

    _handleConnectionClick(connectionId) {
      // Deselect if clicking the same connection
      if (this.selectedConnection === connectionId) {
        this.selectedConnection = null;
      } else {
        this.selectedConnection = connectionId;
      }
      this.requestUpdate();
    }

    _deleteConnection(connectionId) {
      this.connections = this.connections.filter(conn => conn.id !== connectionId);
      this.selectedConnection = null;
      this.requestUpdate();
    }

    _handlePortClick(e) {
      const { nodeId, portType, portId, portName } = e.detail;
      
      if (!this.draggingConnection) {
        if (portType === 'output') {
          this.draggingConnection = {
            sourceNodeId: nodeId,
            sourcePortId: portId,
            sourcePortType: portType
          };
        }
      } else {
        if (portType === 'input' && nodeId !== 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
          );

          if (!connectionExists) {
            const connection = {
              id: `conn_${Date.now()}`,
              sourceNodeId: this.draggingConnection.sourceNodeId,
              sourcePortId: this.draggingConnection.sourcePortId,
              targetNodeId: nodeId,
              targetPortId: portId
            };
            
            this.connections = [...this.connections, connection];
          }
        }
        this.draggingConnection = null;
        this.requestUpdate();
      }
    }
  };
}