以前難しくてできなかったグループへの出し入れができるようになった！

最後に動かしたものが上に来る重ね順もバッチリ。

教訓は「Reactの『破壊的更新をしてはいけない縛り』でツリーの更新をするのは辛すぎるからimmerを使って縛りから解放されよう」って感じ。

この後、グループの背景が半透明でないのを直した。

あと自分自身にドロップできることがわかったので不整合にならないための処理を追加。

選択範囲をグループにドロップしたらどうなるか？

各付箋をグループに追加したら良いと考えた

追加した後の表示がおかしい、なぜか

「選択範囲の移動後に選択範囲が解除されない」と「選択されるのはトップレベル要素だけ」が両立しない

グループの中の付箋と、選択範囲の中の付箋が両方描画される

グループにドロップした時には選択を解除するようにした

一見自然には見えるが、この不整合にユーザが引っかからないか？

この操作はやり直しが難しいのでUndoできる必要がありそう

図に加筆する

Cをやるだけのつもりだった

Aのバグ

DragDropAPIは自分自身へのドロップもできてしまう

グループもドラッグできて、グループがドロップ対象になれるなら、当然「自分自身へのドロップ」が発生しうる、これは困る

そこで自分自身へのドロップがあった時はキャンバスへのドロップに処理を移譲する

Bの仕様

選択範囲をグループにドラッグした場合、その他の場合と異なり選択範囲は解除される

グループに入れたり出したりのテスト

「グループの中にグループが入ってる場合」を試してみて、厄介な問題を見つけてしまった

ズームアウトしてる時でもドラッグ中の要素が原寸表示されちゃう…

cloneNodeして event.dataTransfer.setDragImage することを試してみたがtransform: scaleの効果がなさそう

これは仕様に明記されてないブラウザの実装依存の挙動

Firefoxは5ヶ月前に修正されてるけどChromeは修正されてない状況かな

妻「最適ではないかも知れないがこのプログラムで実現したいことに対して深刻なダメージがあるというほどでもない、なんならズームしないでも長押しで拡大表示確認できて便利という可能性もある」

そうか…じゃあとりあえず保留するか

それはさておきそもそも割とバグがある

タイトルがある時のバウンディングボックスも少しずれてるな

直した

この結果を肉眼で見てズレてるように思ったけどメニューバーやグループのタイトルのせいでそう感じるだけで、付箋は中央にあるのね

座標値をテストケースに書いて確認した

FUSEN_BORDERの分だけバウンディングボックスがズレてるな

fixed

次にやること

付箋追加ダイアログでボタンを押したら付箋を追加する