この後、グループの背景が半透明でないのを直した。 あと自分自身にドロップできることがわかったので不整合にならないための処理を追加。
選択範囲をグループにドロップしたらどうなるか？
- 各付箋をグループに追加したら良いと考えた
- 追加した後の表示がおかしい、なぜか
- 「選択範囲の移動後に選択範囲が解除されない」と「選択されるのはトップレベル要素だけ」が両立しない
- グループの中の付箋と、選択範囲の中の付箋が両方描画される
- グループにドロップした時には選択を解除するようにした
- 一見自然には見えるが、この不整合にユーザが引っかからないか？
- この操作はやり直しが難しいのでUndoできる必要がありそう
図に加筆する
- Cをやるだけのつもりだった
- Aのバグ
- DragDropAPIは自分自身へのドロップもできてしまう
- グループもドラッグできて、グループがドロップ対象になれるなら、当然「自分自身へのドロップ」が発生しうる、これは困る
- そこで自分自身へのドロップがあった時はキャンバスへのドロップに処理を移譲する
- Bの仕様
- 選択範囲をグループにドラッグした場合、その他の場合と異なり選択範囲は解除される
グループに入れたり出したりのテスト
「グループの中にグループが入ってる場合」を試してみて、厄介な問題を見つけてしまった
- ズームアウトしてる時でもドラッグ中の要素が原寸表示されちゃう…
- cloneNodeして
event.dataTransfer.setDragImageすることを試してみたがtransform: scaleの効果がなさそう - これは仕様に明記されてないブラウザの実装依存の挙動
- Firefoxは5ヶ月前に修正されてるけどChromeは修正されてない状況かな
- 941356 - drag image not correctly created when parent has css transform
- 妻「最適ではないかも知れないがこのプログラムで実現したいことに対して深刻なダメージがあるというほどでもない、なんならズームしないでも長押しで拡大表示確認できて便利という可能性もある」
- そうか…じゃあとりあえず保留するか
それはさておきそもそも割とバグがある
- タイトルがある時のバウンディングボックスも少しずれてるな
- 直した
- この結果を肉眼で見てズレてるように思ったけどメニューバーやグループのタイトルのせいでそう感じるだけで、付箋は中央にあるのね
- 座標値をテストケースに書いて確認した
FUSEN_BORDERの分だけバウンディングボックスがズレてるな
- fixed
次にやること
- 付箋追加ダイアログでボタンを押したら付箋を追加する