フローチャートや組織図など複雑なチャートを描くのは大変です。特に、インタラクティブな操作や編集が必要な場合は、専用のライブラリを使わないと実現が難しいでしょう。

今回はReactアプリの中で使えるReact Flowを試してみました。

Monacaアプリのベース

今回はFramework7 × Reactのテンプレートを使っています。

そして、追加でReact Flowを使うためのライブラリをインストールします。

コマンドラインで以下のように入力します。

npm install reactflow

次に、React Flowを使うためのセットアップです。ライブラリとCSSをインポートする必要があります。以下のようにインポートします。

import ReactFlow from "reactflow";
import "reactflow/dist/style.css";

あとは、ノードとエッジ（線）を定義して、React Flowコンポーネントに渡すだけです。

例えば、以下のようにノードとエッジを定義します。

これを React Flow コンポーネントに渡せば、あっという間にフローチャートが描画されます。

const initialNodes = [
        { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
        { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
];
const initialEdges = [{ id: "e1-2", source: "1", target: "2" }];

ここで、initialNodesはフローチャートのノード（頂点）を表しています。各ノードには、一意のid、画面上の位置を指定するposition、そしてノードに表示するラベルを含むdataオブジェクトを指定します。

一方、initialEdgesはノード間を結ぶエッジ（線）を表しています。各エッジには、一意のid、エッジの始点となるノードのidを指定するsource、エッジの終点となるノードのidを指定するtargetを指定します。

以下のコードは、React FlowをReactアプリに組み込む例です。

import React from "react";
import { Page } from "framework7-react";
import ReactFlow from "reactflow";
import "reactflow/dist/style.css";

const initialNodes = [
        { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
        { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
];
const initialEdges = [{ id: "e1-2", source: "1", target: "2" }];

const HomePage = () => {

  return (
  <Page name="home">
    <div style={{ width: "100vw", height: "100vh" }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  </Page>
  );
};

export default HomePage;

このコードでは、まず必要なモジュールをインポートしています。ReactはReactライブラリ自体、PageはFramework7のページコンポーネント、ReactFlowはReact Flowライブラリ、そしてreactflow/dist/style.cssはReact Flowのスタイルシートです。

次に、initialNodesとinitialEdgesを定義しています。これらは、前の例と同じようにノードとエッジの初期設定です。

そして、HomePageコンポーネントを定義しています。このコンポーネントは、Framework7のPageコンポーネントを使用し、その中にdiv要素を配置しています。このdiv要素のスタイルは、幅と高さを100vw（ビューポート幅）と100vh（ビューポート高さ）に設定し、フローチャートが画面全体に表示されるようにしています。

div要素の中には、ReactFlowコンポーネントが配置されており、nodesとedgesのプロパティに、先ほど定義したinitialNodesとinitialEdgesを渡しています。これにより、定義したノードとエッジに基づいてフローチャートが描画されます。

最後に、HomePageコンポーネントをエクスポートしています。これにより、他のファイルからこのコンポーネントを使用できるようになります。

線をつなげる、ノードを動かす

React Flowでは、ノードを動かしたり、ノード同士を線で結んだりするために、useNodesState と useEdgesState という特別な関数を使います。これらの関数は、ノードと線の状態を管理してくれます。

以下のコードを見てみましょう。

import React, { useCallback } from "react";
import { Page } from "framework7-react";
import ReactFlow, { useNodesState, useEdgesState, addEdge } from "reactflow";

import "reactflow/dist/style.css";

const HomePage = () => {
    const initialNodes = [
        { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
        { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
    ];
    const initialEdges = [{ id: "e1-2", source: "1", target: "2" }];

    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

    const onConnect = useCallback(
        (params) => setEdges((eds) => addEdge(params, eds)),
        [setEdges],
    );
  return (
  <Page name="home">
    <div style={{ width: "100vw", height: "100vh" }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  </Page>
  );
};

export default HomePage;

まず、initialNodesとinitialEdgesで、最初のノードと線を定義しています。これは前の例と同じですね。

次に、useNodesStateとuseEdgesStateを使って、ノードと線の状態を管理します。これらの関数は、現在のノードと線の状態（nodesとedges）、それらを更新するための関数（setNodesとsetEdges）、そしてノードや線が変更されたときに呼ばれるコールバック関数（onNodesChangeとonEdgesChange）を返します。

onConnect関数は、新しい線が引かれたときに呼び出されます。この関数は、新しい線の情報をparamsとして受け取ります。

setEdges関数は、現在の線の状態を更新するための関数です。この関数は、現在の線の状態edsを受け取ります。

onConnect関数の中では、setEdges関数を使って、現在の線の状態edsに新しい線の情報paramsを追加しています。これは、addEdge関数を使って行われます。

最後に、ReactFlowコンポーネントに、nodes、edges、onNodesChange、onEdgesChange、onConnectを渡しています。これにより、React Flowは現在のノードと線の状態を知ることができ、ノードや線が変更されたときに適切に反応することができます。

このようにして、React Flowでノードを動かしたり、線で結んだりすることができるのです。少しコードが複雑に見えるかもしれませんが、基本的なアイデアは簡単です。ノードと線の状態を管理し、それらが変更されたときに適切に反応するだけなのです。

より複雑な例

ノードとエッジを追加すれば、より複雑なフローチャートを描くことができます。以下のコードを見てみましょう。

import React, { useCallback } from "react";
import { Page } from "framework7-react";
import ReactFlow, { useNodesState, useEdgesState, addEdge } from "reactflow";
import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "horizontal-1",
    sourcePosition: "right",
    type: "input",
    data: { label: "Input" },
    position: { x: 0, y: 80 },
  },
  {
    id: "horizontal-2",
    sourcePosition: "right",
    targetPosition: "left",
    data: { label: "A Node" },
    position: { x: 250, y: 0 },
  },
  {
    id: "horizontal-3",
    sourcePosition: "right",
    targetPosition: "left",
    data: { label: "Node 3" },
    position: { x: 250, y: 160 },
  },
  {
    id: "horizontal-4",
    sourcePosition: "right",
    targetPosition: "left",
    data: { label: "Node 4" },
    position: { x: 500, y: 0 },
  },
  {
    id: "horizontal-5",
    sourcePosition: "top",
    targetPosition: "bottom",
    data: { label: "Node 5" },
    position: { x: 500, y: 100 },
  },
  {
    id: "horizontal-6",
    sourcePosition: "bottom",
    targetPosition: "top",
    data: { label: "Node 6" },
    position: { x: 500, y: 230 },
  },
  {
    id: "horizontal-7",
    sourcePosition: "right",
    targetPosition: "left",
    data: { label: "Node 7" },
    position: { x: 750, y: 50 },
  },
  {
    id: "horizontal-8",
    sourcePosition: "right",
    targetPosition: "left",
    data: { label: "Node 8" },
    position: { x: 750, y: 300 },
  },
];

const initialEdges = [
  {
    id: "horizontal-e1-2",
    source: "horizontal-1",
    type: "smoothstep",
    target: "horizontal-2",
    animated: true,
  },
  {
    id: "horizontal-e1-3",
    source: "horizontal-1",
    type: "smoothstep",
    target: "horizontal-3",
    animated: true,
  },
  {
    id: "horizontal-e1-4",
    source: "horizontal-2",
    type: "smoothstep",
    target: "horizontal-4",
    label: "edge label",
  },
  {
    id: "horizontal-e3-5",
    source: "horizontal-3",
    type: "smoothstep",
    target: "horizontal-5",
    animated: true,
  },
  {
    id: "horizontal-e3-6",
    source: "horizontal-3",
    type: "smoothstep",
    target: "horizontal-6",
    animated: true,
  },
  {
    id: "horizontal-e5-7",
    source: "horizontal-5",
    type: "smoothstep",
    target: "horizontal-7",
    animated: true,
  },
  {
    id: "horizontal-e6-8",
    source: "horizontal-6",
    type: "smoothstep",
    target: "horizontal-8",
    animated: true,
  },
];

const HomePage = () => {
    const [nodes, _, onNodesChange] = useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
    const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);

  return (
    <Page name="home">
        <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        attributionPosition="bottom-left"
        ></ReactFlow>
    </Page>
  );
};

export default HomePage;

このコードでは、まずinitialNodesとinitialEdgesで複数のノードとエッジを定義しています。各ノードはid、sourcePosition（エッジの出る位置）、targetPosition（エッジの入る位置）、data（ノードに表示するデータ）、position（ノードの位置）などのプロパティを持っています。

エッジはid、source（始点のノードID）、target（終点のノードID）、animated（アニメーションの有無）などのプロパティを持っています。

HomePageコンポーネントの中では、前の例と同様にuseNodesStateとuseEdgesStateを使ってノードとエッジの状態を管理しています。onConnect関数も同様に定義されています。

ReactFlowコンポーネントには、nodes、edges、onNodesChange、onEdgesChange、onConnectに加えて、fitView（全てのノードが画面内に収まるようにズームとパンを調整する）とattributionPosition（帰属情報の位置）が指定されています。

このコードを実行すると、initialNodesとinitialEdgesで定義されたノードとエッジを持つ、より複雑なフローチャートが表示されます。ユーザーはノードをドラッグしたり、ノード間に新しいエッジを引いたりすることができます。

このように、React Flowを使うと、複数のノードとエッジを定義することで、より複雑で対話的なフローチャートを簡単に作成することができるのです。

他の機能

React Flowには、他にもミニマップの表示や拡大・縮小などのコントロールを表示する機能があります。

fitViewプロパティを追加すると、フローチャートが画面内に収まるように自動的にサイズが調整されます。これは、フローチャートが画面からはみ出ることを防ぎ、常に全体が見えるようにしてくれます。

これらの機能を使うことで、フローチャートをより見やすく、操作しやすくすることができます。

import ReactFlow, {
  addEdge,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
} from "reactflow";

// 描画する際の指定
<ReactFlow
    nodes={nodes}
    edges={edgesWithUpdatedTypes}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
    onInit={onInit}
    fitView
    attributionPosition="top-right"
    nodeTypes={nodeTypes}
>
    <MiniMap style={minimapStyle} zoomable pannable />
    <Controls />
    <Background color="#aaa" gap={16} />
</ReactFlow>

まとめ

React Flowを使うと、複雑な表示のフローチャートをコードで簡単に描けます。さらにドラッグ&ドロップやノード同士の連結なども管理が容易です。編集結果をデータベースに保存すれば、ユーザーが自由にフローチャートを作成・共有できるアプリケーションも作れるでしょう。

ぜひReact Flowを使って、MonacaアプリのUIを充実させてみてください。