logic-node.tsx

Overview

logic-node.tsx defines a React functional component representing a "Logic Node" in a flow-based or node-based editor UI. This component visually renders a node with handles for connections on the left and right sides, a header displaying the node's information, and an interactive toolbar. It leverages a combination of reusable UI components and styles to ensure consistency and modularity. The component is memoized to optimize rendering performance by preventing unnecessary re-renders when props do not change.

This file primarily serves the purpose of rendering and managing the visual and interactive aspects of a logic node within a flow or graph editor, likely part of a larger system for building workflows, data pipelines, or logic flows.

Detailed Explanation

Imports

• Interfaces and Types

  • ILogicNode: Interface describing the shape of the node's data.

  • NodeProps, Position: Types from @xyflow/react that define the expected props and positioning constants for node handles.

• React

  • memo: React utility for memoizing components.

• Local Components and Styles

  • CommonHandle: Reusable handle component for connection points.

  • LeftHandleStyle, RightHandleStyle: Style objects for the left and right handles.

  • NodeHeader: Component rendering the node's title and label.

  • NodeWrapper: Wrapper component applying styles and selected state to the node.

  • ToolBar: Component providing node-level action buttons or controls.

Component: InnerLogicNode

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

Description

InnerLogicNode is a React functional component that renders a logic node UI element with interactive connection handles, a header, and a toolbar container.

Parameters

• id: string
  Unique identifier for this node instance.

• data: ILogicNode
  Data object conforming to the ILogicNode interface. Contains node-specific data such as name and label.

• isConnectable?: boolean (default = true)
  Flag indicating whether the node’s handles can be connected to other nodes.

• selected?: boolean
  Flag indicating whether the node is currently selected (e.g., clicked or active in the UI).

Return Value

Returns a JSX element representing the full node UI with:

• A ToolBar container wrapping the node and providing contextual actions.

• A NodeWrapper that applies styles based on the selected state.

• Two CommonHandle components:

  • Left handle (id="c", type="source", positioned on the left).

  • Right handle (id="b", type="source", positioned on the right).

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

Usage Example

<InnerLogicNode
  id="node-1"
  data={{ name: "My Logic Node", label: "Process" }}
  isConnectable={true}
  selected={false}
/>

This renders a logic node with connection handles on both sides, a header, and a toolbar, ready to be integrated into a node-based editor canvas.

Component: LogicNode

export const LogicNode = memo(InnerLogicNode);

Description

LogicNode is a memoized version of InnerLogicNode. React's memo is used to optimize performance by memoizing the component output and preventing re-renders unless props change.

Usage

Use LogicNode when rendering nodes in the editor to benefit from memoization.

Implementation Details and Algorithms

• Handles

  The node has two handles implemented using the CommonHandle component:

  • Both handles are of type="source", indicating they are sources for connections (outgoing edges).

  • Positioned on the left and right edges using the Position.Left and Position.Right constants.

  • Custom styles are applied (LeftHandleStyle and RightHandleStyle) to visually distinguish them.

  • Each handle has an id ("c" for left, "b" for right) and is associated with the node via nodeId.

• Selection State

  The selected prop controls visual styling through NodeWrapper and ToolBar, providing UI feedback to users about the active node.

• Composition

  The component composition pattern (wrapping handles, header, and toolbar inside a wrapper) promotes separation of concerns and reuse.

• Memoization

  The use of React.memo prevents unnecessary re-renders, which is critical in complex node editors where many nodes may exist simultaneously.

Interaction with Other Parts of the System

• Data Interface (ILogicNode)

  The component consumes node data shaped by the ILogicNode interface, which likely includes properties such as name and label. This interface presumably comes from the database or application state layer.

• Node Handles (CommonHandle)

  Handles are part of the connection system, interacting with the flow editor's interaction logic to enable linking nodes.

• Node Header and Toolbar

  These child components provide UI elements for displaying node details and managing node-specific actions, such as editing or deleting.

• React Flow Library

  The use of NodeProps and Position from @xyflow/react indicates integration with a React-based flow or graph rendering library that manages node positioning and connections.

Visual Diagram

classDiagram
    class InnerLogicNode {
        +id: string
        +data: ILogicNode
        +isConnectable: boolean
        +selected: boolean
        +render(): JSX.Element
    }
    class LogicNode {
        +memoizedComponent: React.MemoExoticComponent
    }
    class ToolBar {
        +selected: boolean
        +id: string
        +label: string
    }
    class NodeWrapper {
        +selected: boolean
    }
    class CommonHandle {
        +id: string
        +type: string
        +position: Position
        +isConnectable: boolean
        +style: object
        +nodeId: string
    }
    class NodeHeader {
        +id: string
        +name: string
        +label: string
    }

    InnerLogicNode *-- ToolBar : wraps
    InnerLogicNode *-- NodeWrapper : contains
    NodeWrapper *-- CommonHandle : has (left and right)
    NodeWrapper *-- NodeHeader : has
    LogicNode o-- InnerLogicNode : memoizes

Summary

The logic-node.tsx file provides a key UI component in a node-based editor, rendering a logic node with interactive connection points, a header, and a toolbar. It is designed for modularity, performance (memoization), and integration into a React flow environment. The component composes multiple smaller UI pieces to build a cohesive and interactive node element, facilitating user interaction and flow editing capabilities.

End of Documentation for logic-node.tsx