logic-node.tsx

Overview

The logic-node.tsx file defines a React functional component named InnerLogicNode that represents a visual "logic node" within a flow or graph editor interface. This node component is designed to be used with the @xyflow/react library, which likely manages flowchart or node-graph rendering and interactions.

The component displays a logic node with connection handles on the left and right sides, a header section with the node’s name and label, and a toolbar that appears when the node is selected. The file exports a memoized version of InnerLogicNode called LogicNode for performance optimization by avoiding unnecessary re-renders.

Detailed Explanation

Imports

• ILogicNode — Interface describing the node's data structure (imported from the project's database flow interfaces).

• NodeProps, Position — Types and enums from @xyflow/react used for typing and positioning handles.

• memo — React's memoization function to optimize rendering.

• CommonHandle — A reusable handle component representing connection points.

• LeftHandleStyle, RightHandleStyle — CSS style objects applied to left and right handles.

• NodeHeader — Component rendering the node's header information.

• NodeWrapper — Styling/container component wrapping the node content.

• ToolBar — Component rendering contextual toolbar UI when the node is selected.

InnerLogicNode Component

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

Description

InnerLogicNode is a React functional component representing an individual logic node in a flowchart. It renders the node UI, including connection handles, header, and a toolbar for node-specific actions.

Parameters

• id: string
  Unique identifier for the node instance.

• data: ILogicNode
  Contains node-specific data. Typical properties include name and label which are displayed in the header.

• isConnectable?: boolean (optional, default: true)
  Whether the node’s connection handles are active and can be used to create edges between nodes.

• selected?: boolean
  Indicates if the node is currently selected, which affects UI presentation (e.g., highlighting, toolbar visibility).

Returns

• JSX.Element representing the logic node component tree.

Usage Example

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

LogicNode Component

export const LogicNode = memo(InnerLogicNode);

• This exports a memoized version of InnerLogicNode to optimize rendering performance by preventing unnecessary updates when props have not changed.

Implementation Details and Algorithms

• The component uses composition of smaller UI elements (ToolBar, NodeWrapper, CommonHandle, NodeHeader) to build a reusable and modular logic node UI.

• Two CommonHandle components are rendered:

  • One on the left side (Position.Left) with id "c" and styled by LeftHandleStyle.

  • One on the right side (Position.Right) with id "b" and styled by RightHandleStyle.

• The handles are typed as "source", indicating these are output connection points. (Depending on the flow library, "source" usually means an edge originates from this handle.)

• The ToolBar component wraps the entire node and receives the selected, id, and label props to conditionally render controls when the node is selected.

• NodeWrapper applies visual styling and state handling (highlighting) depending on whether the node is selected.

• NodeHeader displays the node's name and label, providing key identification information in the UI.

Interaction with Other Parts of the System

• @xyflow/react:
  The node uses types and enums from this library, indicating it integrates into a flowchart or node graph system that manages node positioning, connections, and user interactions.

• Interfaces (ILogicNode):
  The node data shape is defined elsewhere (likely includes properties like name and label).

• Handle Components (CommonHandle):
  These represent the draggable connection points that other nodes or edges can attach to.

• UI Components (ToolBar, NodeWrapper, NodeHeader):
  These provide reusable UI elements consistent across nodes, possibly shared with other node types.

• The logic node component likely participates in a larger flow editor interface allowing users to create, connect, and configure logic nodes visually.

Component Structure Diagram

componentDiagram
    component LogicNode {
        InnerLogicNode
        - id: string
        - data: ILogicNode
        - isConnectable: boolean
        - selected: boolean
    }
    component ToolBar
    component NodeWrapper
    component CommonHandle_Left
    component CommonHandle_Right
    component NodeHeader

    LogicNode --> ToolBar
    ToolBar --> NodeWrapper
    NodeWrapper --> CommonHandle_Left
    NodeWrapper --> CommonHandle_Right
    NodeWrapper --> NodeHeader

Summary

The logic-node.tsx file defines a React component that visually represents a logic node in a flowchart or graph-based UI. It composes connection handles, a header, and a toolbar inside styled containers to provide an interactive and visually coherent node element. The component integrates tightly with the @xyflow/react flow system and uses project-specific UI and style components to maintain consistency across the application. Memoization is used to optimize rendering performance.

This component is a fundamental building block for creating logic flows, enabling users to visually program or configure logical operations within the application.