go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/nodeHandle.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  import { Handle, HandleProps, Position } from "reactflow";
     6  import { NodePort } from "../refdata/nodeTypes";
     7  import { Key } from "react";
     8  
     9  export interface NodeHandleProps {
    10    nodePort: NodePort;
    11    portType: 'input' | 'output';
    12    inferredType?: string;
    13    isConnectable?: boolean;
    14  }
    15  
    16  export function NodeHandle({ nodePort, portType, inferredType, isConnectable }: NodeHandleProps) {
    17    const nodePortToHandleProps = (): HandleProps => {
    18      return {
    19        id: nodePort.id,
    20        type: portType === 'input' ? 'target' : 'source',
    21        position: portType === 'input' ? Position.Left : Position.Right,
    22        isConnectable
    23      }
    24    }
    25    return (
    26      <div className={`node-handle ${portType === 'input' ? 'node-handle-input' : 'node-handle-output'}`}>
    27        {portType === 'input' && (
    28          <Handle draggable={false} {...nodePortToHandleProps()} />
    29        )}
    30        <div className={`node-handle-inner`}>
    31          <div className="node-handle-name">{nodePort.name}</div>
    32          <div className="node-handle-type">{nodePort.type || inferredType || 'unknown'}</div>
    33          <div className="node-handle-description">{nodePort.description}</div>
    34        </div>
    35        {portType === 'output' && (
    36          <Handle draggable={false} {...nodePortToHandleProps()} />
    37        )}
    38      </div>
    39    )
    40  }