動機

頭の中のサル が邪魔でとっ散らかっている状態なので、マインドマップで整理したい。

したいが、MindMeisterは有料だし、XMindは便利で頻繁に使ってるけど一回使ったマインドマップは放置で見返すことがなく、自分レビューが出来てない。

この状況を鑑みて、兼ねてからマインドマップ作りたいと思ってた矢先、React Flowというのが便利と聞いたのでいじくっていく。

ひとまず人に見せられるものになったら、記事化したい。

▼ 引用
「同じこと」でイライラしがちな人は、頭の中に「サル」を飼っている | ダイヤモンド・オンライン

スプリント1要件

• ノードを表示
• ノードはテキスト修正可能
• ノードをクリックするとフォーカス
• フォーカスした状態でTabを押すと子ノードを追加
• Tabで子ノードを追加した場合は、フォーカスを子ノードに移動してテキスト入力状態にする
• 追加された子ノードと親ノードはエッジで結ぶ
• 子ノードの追加先は親の親ノードと反対方向。親の親ノードが無い場合は右方向を優先
• 子ノードはいくらでも追加できる
• ノードはDeleteキーで削除できる
• 削除されたノードの子孫ノードはすべて削除する