react-konvaのTouchとDragの違い

react-konvaを触っている時、
👨「onDragMove..onTouchMove..onTouchEnd..なんかいっぱいあるけどなんだこれ。」
👨「onTouchMoveはデベロッパーツールの開閉で挙動変わるの二重スリットみたい」
疑問に思ったので調べてみました。

Touch、Dragの違い

onTouchStart, onTouchMove, onTouchEndはPCだと動かないです。
onDragStart, onDragMove, onDragEndはPCでもスマホでも動きます。

Touchは指で端末をタッチするのに対してDragはマウスでドラッグする意味の違いですね。
デベロッパーツールを開いていると、onTouch~がPC上でも動くのはブラウザがスマホ等で認識しているからだと思います。

onTouchMove, onDragMoveの中身を見てみよう

onTouchMove

{evt: TouchEvent, target: Stage, currentTarget: Stage, pointerId: 0, type: 'touchmove'}
currentTarget: Stage {_id: 105, eventListeners: {…}, attrs: {…}, index: 0, _allEventListeners: null, …}
evt: TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
pointerId: 0
target: Stage {_id: 105, eventListeners: {…}, attrs: {…}, index: 0, _allEventListeners: null, …}
type: "touchmove"
[[Prototype]]: Object
}

onDragMove

{type: 'dragmove', target: Stage, evt: TouchEvent, currentTarget: Stage}
currentTarget: Stage {_id: 105, eventListeners: {…}, attrs: {…}, index: 0, _allEventListeners: null, …}
evt: TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
target: Stage {_id: 105, eventListeners: {…}, attrs: {…}, index: 0, _allEventListeners: null, …}
type: "dragmove"
[[Prototype]]: Object

中身はほぼ一緒で、onDragMoveに対してonTouchMoveにはpointerId: 0があるくらいですね。
詳細を調べてみましたが、「特定のポインターのイベントに割り当てられた識別子です。」と書いてありますね。

その他で言うと、onDrag系でも2本の指の座標が変数に入ることも詳しく見てみるとわかりました。
大きな違いはないので複雑なことをしないのであればonDragを使うのがいいでしょう。

draggableとの関係

onDrag~が発火するにはタグのdraggableにtrueを指定してあげる必要があります。
その反面、onTouch~はdraggableがfalseになっていても発火します。

そのため例えばピンチインピンチアウトを実装する時のコードでは二本指でタッチしている間はdraggableをfalseにして、onTouchmoveのイベント発火を止めずにドラッグを停止しています。こうすることで拡大縮小中に不自然な画面移動がしないように実装されています。