note-node.tsx

Overview

note-node.tsx defines a React functional component called NoteNode that represents a "note" node within a flowchart or diagram editor interface. This component is designed to be used with the @xyflow/react library for flow nodes and integrates UI elements from Ant Design (antd).

The purpose of NoteNode is to provide an interactive, resizable node where users can edit a note’s title and text content. It supports theming (light/dark modes), internationalization, and node resizing. The component connects to application state and logic through custom hooks to handle node name changes and form value updates.

Detailed Description

Component: NoteNode

Description

NoteNode is a React component that renders a resizable flow node with an editable title (name) and a textarea for note content. It includes UI controls for resizing, displaying an icon, and a dropdown menu for node options.

Props

NoteNode receives props from the @xyflow/react library's NodeProps generic type, specialized with the interface INoteNode:

• data: INoteNode — The data object for this node, includes at least:

  • name (string | undefined) — The node’s title/name.

  • label (string) — Used for labeling the dropdown menu.

  • form (object) — The form state containing the note's text.

• id: string — The unique identifier for this node instance.

Internal Hooks and State

• useTranslation() — Provides the t function for internationalized strings.

• Form.useForm() — Ant Design form instance used to manage the note text.

• useTheme() — Custom hook to get the current UI theme (light or dark).

• useHandleNodeNameChange({ id, data }) — Custom hook returning handlers for name input changes and blur events.

• useHandleFormValuesChange(id) — Custom hook returning handler for form field value changes.

Behavior and Usage

• The component initializes the form fields with data.form via a useEffect hook that runs whenever data.form changes.

• The node can be resized with minimum dimensions (width: 190px, height: 128px) via the NodeResizeControl component.

• The top bar contains:

  • A note icon (SvgIcon named "note").

  • An editable input field for the node's name, with fallback default text from i18n key flow.note.

  • A dropdown menu (NodeDropdown) labeled with data.label.

• The main content area contains an Ant Design Form with a TextArea for editing the note text.

• Styling is applied conditionally based on the current theme (dark or light) and scoped CSS modules (index.less).

Return Value

The component returns a JSX element representing the fully interactive note node UI.

Usage Example

import NoteNode from './note-node';

function FlowCanvas() {
  const noteNodeData = {
    name: 'Meeting Notes',
    label: 'Note Options',
    form: { text: 'Discuss project timeline...' },
  };
  return <NoteNode id="node-1" data={noteNodeData} />;
}

Implementation Details

• Resizing: Uses NodeResizeControl from @xyflow/react with custom transparent styling and minimum size constraints.

• Icons: Uses a shared SvgIcon component for consistent iconography.

• Theming: Applies CSS classes conditionally via the useTheme hook to support dark mode styling.

• Internationalization: Uses react-i18next for localized placeholders and default note names.

• Form Management: Leverages Ant Design's Form API to handle form state and validation.

• Custom Hooks:

  • useHandleNodeNameChange: Manages controlled input state and events for the note’s name.

  • useHandleFormValuesChange: Handles changes to the note text area and propagates them to a central store or state manager.

This modular approach cleanly separates UI rendering from state management and side effects.

Interaction with Other System Parts

• @xyflow/react: Provides the NodeProps typing and the NodeResizeControl component, integrating NoteNode into a flow editor system.

• NodeDropdown: A sibling component imported and rendered to provide node-specific options.

• SvgIcon: Shared icon component used for consistent UI icons.

• Theme Provider: Retrieves current theme to adjust styles dynamically.

• Hooks Directory: Custom hooks handle state changes and synchronize node data with the broader application state/store.

• Styles: Uses CSS modules (index.less) for scoped styling.

• Localization: Integration with react-i18next for multi-language support.

Mermaid Component Diagram

componentDiagram
    component NoteNode {
      +id: string
      +data: INoteNode
      +render()
    }
    component NodeResizeControl
    component SvgIcon
    component NodeDropdown
    component Form
    component Input(TextArea)
    component useHandleNodeNameChange
    component useHandleFormValuesChange
    component useTheme
    component useTranslation

    NoteNode --> NodeResizeControl : contains
    NoteNode --> SvgIcon : uses (note, resize icons)
    NoteNode --> NodeDropdown : contains
    NoteNode --> Form : renders
    NoteNode --> Input(TextArea) : renders inside Form
    NoteNode --> useHandleNodeNameChange : hooks into
    NoteNode --> useHandleFormValuesChange : hooks into
    NoteNode --> useTheme : hooks into
    NoteNode --> useTranslation : hooks into

Summary

note-node.tsx is a React component file defining a resizable, editable note node UI element for a flowchart application. It integrates with a flow node library, uses Ant Design for forms and inputs, supports dark mode and internationalization, and leverages custom hooks to handle state changes. The file provides a clean, modular, and reusable component designed for interactive note-taking within a diagramming context.