Replitのようなペイン分割できてDnD可能なUIを達成するやり方案について

こんにちわ。nap5です。

Replitのようなペイン分割できてDnD可能なUIを達成するやり方案について考えてみたので、紹介したいと思います。

Replit

実現するために入れるライブラリは以下になります。ラフに考えてみました。

• Multiple Droppables

  • https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/core-droppable-usedroppable--multiple-droppables#multiple-droppables

• Splitter

  • https://github.com/DevbookHQ/splitter

分割対象ペインの直交座標系上のどこにDnDしているカーソルポインタが内包されているかでQuadTreeみたいに分割していく挙動が達成できれば良さそうです。

以下がラフなステップになります。

1. DnDのコンテキストでラップする

2. Sortableなドラッグ対象ペインを定義する

3. ドロップ可能なペインを定義する

4. ドラッグ時にオーバーレイでドロップ可能な領域をIndicateする

   1. DnDオーバーされているペインにおける直交座標系の当たり判定に基づき短形領域をオーバーレイする

   2. 最大で4つの領域

5. ドロップしてタブ化する

   1. タブ領域を同様にDnD化

その他に参考にしたスレになります。

We open-sourced a React component for building split views like in VS Code

OSSで他に参考になりそうなリンクなど

簡単ですが、以上です。