2021-07-27Movidea開発日記

https://gyazo.com/eef32a81fb1ce4968435b142ea186569

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

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

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

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

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

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

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

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

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

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

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

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

図に加筆する

https://gyazo.com/6a0a42a36fde5cddbfedf72d05c6b487

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

Aのバグ

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

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

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

Bの仕様

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

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

https://gyazo.com/e0c8f415236881280aba892e04de5033

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

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

https://gyazo.com/7db474bb252d1697f0830a570bc63610

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

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

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

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

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

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

直した

https://gyazo.com/9f2fb2546b2e6feb0d79d935bf6c4461

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

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

https://gyazo.com/1aebfcfa006e28f8a2dbd915a86be17e

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

https://gyazo.com/56c895d33935467414840489cad708d0

fixed

次にやること

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