react-flow-node-ts

同梱された上流サポート

サポートファイルは、スキルからの相対パスに含まれています。固定されたソース、ライセンス、ハッシュ、インポートの変更については、UPSTREAM-NOTICE.md を参照してください。

React Flow ノード

確立されたパターンに従い、適切な TypeScript 型とストアとの連携を備えた React Flow ノードコンポーネントを作成します。

クイックスタート

assets/ からテンプレートをコピーし、プレースホルダーを置き換えます。

• {{NodeName}} → PascalCase のコンポーネント名（例：VideoNode）
• {{nodeType}} → ケバブケースの型識別子（例：video-node）
• {{NodeData}} → データインターフェース名（例：VideoNodeData）

テンプレート

• assets/template.tsx - ノードコンポーネント
• assets/types.template.ts - TypeScript の型定義

ノードコンポーネントのパターン

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

型定義のパターン

export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

テンプレートの統合チェック

これらのテンプレートは、プロジェクト固有の @/types、@/store、ユーティリティのエイリアス、CSS 変数を必要とします。このバンドルにはアプリケーションやストアは含まれていません。プレースホルダーを置き換え、インストール済みの @xyflow/react に対して NodeProps を確認し、updateNode が兄弟フィールドを破棄せずにノードデータをマージすることを確認してください。編集可能な入力には適切なアクセシブルなラベルを付け、必要に応じて nodrag／nowheel の動作を設定し、キーボードでの編集、サイズ変更、接続状態をテストしてください。編集モードでの UI の表示制御は、サーバー側の認可境界にはなりません。

統合手順

1. src/frontend/src/types/index.ts に型を追加します
2. src/frontend/src/components/nodes/ にコンポーネントを作成します
3. src/frontend/src/components/nodes/index.ts からエクスポートします
4. src/frontend/src/store/app-store.ts にデフォルト値を追加します
5. キャンバスの nodeTypes に登録します
6. AddBlockMenu と ConnectMenu に追加します

使用する場面

このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用できます。

制限事項

• このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。