ドラッグ可能なウィンドウを実装し、エディタのレイアウトを自由に変更できるようにした。
作ったもの
これまでBootstrapのアコーディオンを使っていた箇所を
ドラッグ可能なウィンドウに変更した。
ただし、ブラウザのウィンドウサイズの変更には対応していないため、
他のパーツと異なる動きをしてしまい、気持ち悪い。
クラス図
ドラッグ可能なウィンドウを実装するDraggableWindowを追加。
ライブラリは使わずに自分で実装してみた。
汎用的に利用できるようにしたかったので、他のクラスとは切り離した実装にしている。
つまづきポイント
ドラッグ中のmousemoveイベントはdocumentをターゲットに
mousedownイベントやmouseupイベントはHTMLElementをターゲットにすればよいが、
mousemoveイベントも同様の設定にしてしまうと、
素早くマウスを動かしたときに、挙動がおかしくなることがある。
その対策としてmousemoveイベントはdocumentをターゲットにする。
CSSでマウスカーソルを変更
グラブ（ドラッグ）できることを示すカーソル
cursor : grab;グラブ（ドラッグ）していることを示すカーソル
cursor : grabbing;前回設定したレイヤーパネルの移動カーソルもついでに変更しておいた。
参考：cursor – CSS: カスケーディングスタイルシート | MDN
各ウィンドウを管理するシングルトンパターンのManagerクラス
他のウィンドウの真下や右真横にスナップ（吸着）するようになっているが、
これらの管理は、DraggableWindow.ts内のManagerクラスが行っている。
Managerクラスはexportしていないためクラス図に表示されない。
このManagerクラスはシングルトンパターンで作られており、
DraggableWindowクラスのコンストラクタで、そのインスタンスを
Managerクラスが取り込むようにしている。
こうすることで、DraggableWindowクラスのインスタンス同士の位置を
Managerクラスが管理し、スナップ機能を実現している。
参考：【TypeScript】「シングルトンクラス」を作るには – プログラミングマガジン
追加したイシュー
ひとこと
ライブラリっぽい作りにして、
いい感じならこれだけを別で公開することも考えていたが
現実はそんなにあまくなかった。
粗だらけなので気が向いたら調整していくつもり。
