support multitouch

Author: xnimorz

src/components/common/Interactive.tsx

@@ -10,12 +10,25 @@ export interface Interaction {
 // Check if an event was triggered by touch
 const isTouch = (event: MouseEvent | TouchEvent): event is TouchEvent => "touches" in event;
 
+const getPoint = (touches: TouchList, touchId: null | number): Touch => {
+  for (let i = 0; i < touches.length; i++) {
+    if (touches[i].identifier === touchId) {
+      return touches[i];
+    }
+  }
+  return touches[0];
+};
+
 // Returns a relative position of the pointer inside the node's bounding box
-const getRelativePosition = (node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction => {
+const getRelativePosition = (
+  node: HTMLDivElement,
+  event: MouseEvent | TouchEvent,
+  touchId: null | number
+): Interaction => {
   const rect = node.getBoundingClientRect();
 
   // Get user's pointer position from `touches` array if it's a `TouchEvent`
-  const pointer = isTouch(event) ? event.touches[0] : (event as MouseEvent);
+  const pointer = isTouch(event) ? getPoint(event.touches, touchId) : (event as MouseEvent);
 
   return {
     left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
@@ -46,6 +59,7 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
   const container = useRef<HTMLDivElement>(null);
   const onMoveCallback = useEventCallback<Interaction>(onMove);
   const onKeyCallback = useEventCallback<Interaction>(onKey);
+  const touchId = useRef<null | number>(null);
   const hasTouch = useRef(false);
 
   const [handleMoveStart, handleKeyDown, toggleDocumentEvents] = useMemo(() => {
@@ -57,12 +71,15 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
       preventDefaultMove(nativeEvent);
 
       if (isInvalid(nativeEvent, hasTouch.current) || !el) return;
-      hasTouch.current = isTouch(nativeEvent);
+      if (isTouch(nativeEvent)) {
+        hasTouch.current = true;
+        touchId.current = nativeEvent.changedTouches[0].identifier;
+      }
 
       // The node/ref must actually exist when user start an interaction.
       // We won't suppress the ESLint warning though, as it should probably be something to be aware of.
       el.focus();
-      onMoveCallback(getRelativePosition(el, nativeEvent));
+      onMoveCallback(getRelativePosition(el, nativeEvent, touchId.current));
       toggleDocumentEvents(true);
     };
 
@@ -78,7 +95,7 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
       const isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
 
       if (isDown && container.current) {
-        onMoveCallback(getRelativePosition(container.current, event));
+        onMoveCallback(getRelativePosition(container.current, event, touchId.current));
       } else {
         toggleDocumentEvents(false);
       }

tests/components.test.js

@@ -92,6 +92,7 @@ it("Doesn't call `onChange` when user changes a hue of a grayscale color", () =>
   const hue = container.querySelector(".react-colorful__hue .react-colorful__interactive");
 
   fireEvent.touchStart(hue, {
+    changedTouches: [{ pageX: 0, pageY: 0 }],
     touches: [{ pageX: 0, pageY: 0 }],
   });
   fireEvent.touchMove(hue, { touches: [{ pageX: 100, pageY: 0 }] });
@@ -119,6 +120,7 @@ it("Triggers `onChange` after a touch interaction", async () => {
   const hue = result.container.querySelector(".react-colorful__hue .react-colorful__interactive");
 
   fireEvent.touchStart(hue, {
+    changedTouches: [{ pageX: 0, pageY: 0 }],
     touches: [{ pageX: 0, pageY: 0, bubbles: true }],
   });
   fireEvent.touchMove(hue, { touches: [{ pageX: 55, pageY: 0, bubbles: true }] });
@@ -166,6 +168,7 @@ it("Doesn't react on mouse events after a touch interaction", () => {
   const hue = result.container.querySelector(".react-colorful__hue .react-colorful__interactive");
 
   fireEvent.touchStart(hue, {
+    changedTouches: [{ pageX: 0, pageY: 0 }],
     touches: [{ pageX: 0, pageY: 0, bubbles: true }],
   }); // 1
   fireEvent.touchMove(hue, { touches: [{ pageX: 55, pageY: 0, bubbles: true }] }); // 2