categorize-handle.tsx

Overview

categorize-handle.tsx defines a React functional component CategorizeHandle that renders a styled connection handle for use within flow or node-based diagrams built with the @xyflow/react library. The component customizes the position, appearance, and identifier of each handle, facilitating the creation of connectable anchor points on the right side of nodes.

This file primarily serves as a reusable UI element in a larger flow diagram or graph editor system, enabling users to visually and functionally connect different elements via these handles.

Detailed Explanation

Imports

• Handle, Position from @xyflow/react: Core components and enums for creating handles on nodes in flow diagrams.

• React for JSX and component definition.

• styles imported from index.less for scoped CSS styling of handle content.

Constants

DEFAULT_HANDLE_STYLE

const DEFAULT_HANDLE_STYLE = {
  width: 6,
  height: 6,
  bottom: -5,
  fontSize: 8,
};

• Defines base CSS styles for the handle element.

• Ensures consistent size (6x6 pixels) and positioning offset (bottom: -5 pixels).

• Sets the font size for any text inside the handle to 8 pixels.

Interface: IProps

interface IProps extends React.PropsWithChildren {
  top: number;
  right: number;
  id: string;
  idx?: number;
}

• top (number): Vertical position of the handle relative to the parent node, expressed as a percentage.

• right (number): Horizontal offset from the right edge of the parent node, also as a percentage.

• id (string): Unique identifier for the handle instance, used in connection logic.

• idx (number, optional): An optional index that can be used for ordering or identification, though not used internally here.

• children (React.ReactNode): Optional children elements to display as label/text inside the handle. Defaults to id if not provided.

Component: CategorizeHandle

const CategorizeHandle = ({ top, right, id, children }: IProps) => {
  return (
    <Handle
      type="source"
      position={Position.Right}
      id={id}
      isConnectable
      style={{
        ...DEFAULT_HANDLE_STYLE,
        top: `${top}%`,
        right: `${right}%`,
        background: 'red',
        color: 'black',
      }}
    >
      <span className={styles.categorizeAnchorPointText}>{children || id}</span>
    </Handle>
  );
};

Description

CategorizeHandle is a stateless React functional component that wraps the Handle component from @xyflow/react with custom styles and positioning.

Parameters

• top: Determines vertical placement as percentage from the top of the node.

• right: Determines horizontal placement as percentage from the right side of the node.

• id: A string identifier assigned to the handle, crucial for connection logic.

• children: Optional React nodes displayed inside the handle; if missing, the id string is shown.

Behavior and Styling

• The handle is always a "source" type, meaning it acts as an origin point for connections.

• Positioned on the right side of the parent node (Position.Right).

• Styled with a red background and black text for good visual contrast.

• The style merges the default handle style with dynamic top and right positioning.

• The handle can be connected to other nodes (isConnectable is true).

Usage Example

<CategorizeHandle top={50} right={10} id="handle-1">
  Custom Label
</CategorizeHandle>

This renders a red handle positioned halfway down (50% from the top) and slightly inset from the right (10%) of the parent node, labeled "Custom Label".

If no children are passed:

<CategorizeHandle top={25} right={5} id="handle-2" />

This renders the handle with "handle-2" as the label text.

Important Implementation Details

• The component uses inline styles combined with a CSS module (index.less) for styling the label text (categorizeAnchorPointText).

• The handle size and position are carefully tuned for a compact but visible interactive element.

• The id prop is critical for the @xyflow/react framework to identify and manage connections between handles.

• The hardcoded background: 'red' and color: 'black' suggest these handles are visually distinct and possibly categorized by color for easier recognition.

Interaction with Other System Parts

• This component is designed to be used within nodes rendered in a flow or graph editor built on the @xyflow/react framework.

• It relies on Handle from @xyflow/react which manages connection logic, drag-and-drop, and interaction.

• The id prop interacts with the flow system’s connection state, allowing edges to be drawn from this handle to others.

• The top and right props allow dynamic placement on nodes, enabling flexible UI layouts.

• Likely used within node components to represent output or branching connection points categorized by the label or id.

Mermaid Component Diagram

componentDiagram
    component CategorizeHandle {
      +top: number
      +right: number
      +id: string
      +children?: ReactNode
      +Render Handle (type="source", position=Right)
      +Apply styles (default + dynamic top/right + red background)
      +Display label (children or id)
    }
    CategorizeHandle --> Handle : uses
    Handle --> Position : uses enum Position.Right

Summary

categorize-handle.tsx provides a customizable, reusable connection handle component for flow diagrams, enabling nodes to expose connection points on their right side. It leverages the @xyflow/react library's Handle component with added styling and labeling to support intuitive graph editing interfaces. This component is a building block within a node-based UI system, facilitating visually distinct and interactable anchor points for edges.