logic-node.tsx

Overview

The logic-node.tsx file defines a React functional component named LogicNode that represents a visual node element within a flowchart or diagramming interface. This component is designed to work within a node-based flow system, rendering a node with connection handles on its left and right sides to facilitate linking with other nodes. It incorporates theming support (light/dark modes), selection styling, and displays a header with node information.

This component is intended to be used within a larger flow or graph rendering framework, likely powered by @xyflow/react, where users can visually create or manipulate logical nodes as part of a flow design or logic modeling tool.

Detailed Explanation

Imports and Dependencies

• useTheme: Custom hook from the application's theme provider for accessing the current theme (dark or light).

• ILogicNode: Interface describing the shape of the node data, imported from the database flow interfaces.

• Handle, NodeProps, Position: Components and types from @xyflow/react for rendering connection points and typing the node props.

• classNames: Utility to conditionally combine CSS class names.

• LeftHandleStyle, RightHandleStyle: Predefined styles for the connection handles.

• styles: CSS module styles scoped for this component.

• NodeHeader: Child component to render the node's header information.

LogicNode Component

export function LogicNode({
  id,
  data,
  isConnectable = true,
  selected,
}: NodeProps<ILogicNode>) { ... }

Description

LogicNode is a React functional component that renders a styled node element with two connection handles and a header displaying the node's name and label.

Parameters

• props (NodeProps<ILogicNode>): The component receives props typed by NodeProps generic on ILogicNode interface. This includes:

  • id (string): Unique identifier for this node instance.

  • data (ILogicNode): An object containing node-specific data, expected to have at least name and label properties.

  • isConnectable (boolean, optional): Indicates whether the connection handles should be enabled for linking. Defaults to true.

  • selected (boolean, optional): Indicates if this node is currently selected, affecting styling.

Return Value

• Returns a JSX element representing the node:

  • A <section> container with dynamic classes based on theme and selection state.

  • Two <Handle> components positioned left and right for outgoing connections.

  • A <NodeHeader> component displaying the node's name and label.

Usage Example

<LogicNode
  id="node-1"
  data={{ name: 'Logic A', label: 'AND Gate' }}
  isConnectable={true}
  selected={false}
/>

This renders a logic node labeled "AND Gate" with two handles for connections, styled according to the current theme and not selected.

Implementation Details

• Theming: Uses useTheme() to detect if the current theme is dark, then applies the corresponding CSS class (styles.dark).

• Styling: Uses CSS modules (styles.logicNode, styles.selectedNode, etc.) for scoped styling. The classNames library conditionally applies classes based on props.

• Connection Handles:

  • The left handle is a source type at the left position with style LeftHandleStyle.

  • The right handle is also a source type at the right position with style RightHandleStyle.

  • Both handles use the isConnectable prop to enable/disable connections.

• Node Header: The NodeHeader component receives the node's id, name, and label to render the title area of the node.

• Accessibility & Identification: Handles have unique ids ("c" and "b") used internally by the flow system to identify connection points.

Interaction with Other Parts of the System

• @xyflow/react: The Handle components come from this library, which manages the flow's interactive graph, drag-and-drop, and connection logic.

• Theme Provider: Uses the useTheme hook from the app's theme provider to adapt styles dynamically.

• NodeHeader Component: This file depends on NodeHeader for rendering node-specific text, implying a modular design where node UI is split into logical subcomponents.

• Styles: Uses CSS modules imported from index.less for styling, ensuring scoped styles that do not leak globally.

• Interfaces: The ILogicNode interface defines the expected data shape, linking this component to the app's data model layer.

Visual Diagram

classDiagram
    class LogicNode {
        +id: string
        +data: ILogicNode
        +isConnectable: boolean
        +selected: boolean
        +LogicNode(props: NodeProps<ILogicNode>)
    }

    class NodeHeader {
        +id: string
        +name: string
        +label: string
    }

    class Handle {
        +id: string
        +type: "source" | "target"
        +position: Position
        +isConnectable: boolean
        +className: string
        +style: React.CSSProperties
    }

    LogicNode --> NodeHeader : renders
    LogicNode --> Handle : renders (2 instances)

Summary

The logic-node.tsx file provides a reusable React component that visually represents a logic node within a graphical flow editor UI. It integrates connection handles to link nodes, supports theming and selection styling, and cleanly separates node header rendering to a dedicated component. It leverages external libraries for flow management and theming and is styled with CSS modules for maintainability.

This component plays a crucial role in enabling users to create and manipulate logical nodes visually, forming part of a larger system for flow-based programming, workflow design, or logic modeling.