Reactで点と点をドラッグして繋げたらデータベースにリレーション情報が書き込まれるようにしたい

Question

前提・実現したいこと

簡単なBPM(ビジネスプロセスマネジメント)用のフロントアプリケーションを
Reactで作りたいと考えています。

画面イメージとしては上記のようにタスクが複数のカラム上に並んでいて
ドラッグで左から右へ順番に繋いでいくと、それがそのままプロセスになるような仕組みを考えています。

これを実現するためのReactの参考資料、サンプルアプリケーションはございませんか？

調べたこと

• Angularによる実装例をみつけましたが、すでにメンテされていません

https://github.com/atlasmap-attic/atlasmap-ui

• react drag,drop, and connect arrow(or anything else) with animation between elements というStackOverflowに簡単な実装例が紹介されていたのですが、つないだ四角をどうやってデータに落とし込めばいいのかなどいまいち要領がわかりませんでした。

Answer 1

stackoverflowの実装例ではreact-xarrowsというライブラリを使用してるようですね。

https://www.npmjs.com/package/react-xarrows

rpmのページにも実装デモが載っています。こちらの方が機能としてどのようなものがあるか分かりやすいです。
Element同士を接続するのでスクショのようなリレーションの接続は簡単にできそうな感じだと思います。

stackoverflowの実装例は「矢印をつなぐ」ところまででのデモです。
Xpathを引くパラメータがElementなので、接続に使用したElementをstateに記録しておけばデータ上の接続も問題なく行えるでしょう。