原因が面白いのでメモ
- 描画に使っているPaper.jsは、Shapeなどのインスタンスを作成したタイミングで現在アクティブなレイヤーにそれが追加される
- 最近まで付箋などのアイテムはReactの状態として管理しており、変更があればキャンバスを消して描き直す仕組みになっていた
- 付箋のドラッグ中のマウスムーブイベントですべてを再描画するとカクカクが気になるので、2枚のキャンバスを重ねて、ドラッグ中には半透明のオブジェクトを上のキャンバスだけで更新している
- 「キャンバスを描き直す」ときには、下のキャンバスをアクティブにしていた
この状況で
- 付箋の追加時にReactの状態を更新することPaper.jsのオブジェクトを作成するのを両方やっていたバグ
- いままでは「Reactの状態を更新」が、「キャンバスを描き直す」を引き起こしてたので問題が起きなかった
- 設計を変えたことで、このタイミングで追加されたオブジェクトが生き残るようになった
- しかもそれが上のキャンバスに描かれた
これによって
- ドラッグしていたが更新された後、新しい位置の付箋が下のレイヤーに描かれる
- 古い付箋は上のレイヤーに描かれているので消えない
- そこには実際には付箋がないので、古い付箋をドラッグしようとすると全体平行移動になる という現象が起きた