add touch support for interactive 360

src/components/project/virtual-sample/Interactive360.vue

@@ -2,6 +2,7 @@
   <figure>
     <div
       @mousedown="enableDragToRotate"
+      @touchstart="enableDragToRotate"
       class="drag-zone"
       :class="{ grabbing: isDragToRotateEnabled }"
     ></div>
@@ -48,18 +49,16 @@ const isHelperHidden = ref(localStorage.getItem('isHelperHidden'));
 localStorage.setItem('isHelperHidden', true);
 
 // Grab interaction
-const yMax = computed(() => {
-  return parseInt(
-    activeTrack.files[activeTrack.files.length - 1].name.split('_')[0]
-  );
-});
-const xMax = computed(() => {
-  return parseInt(
+const yMax = computed(() =>
+  parseInt(activeTrack.files[activeTrack.files.length - 1].name.split('_')[0])
+);
+const xMax = computed(() =>
+  parseInt(
     activeTrack.files[activeTrack.files.length - 1].name
       .split('_')[1]
       .split('.')[0]
-  );
-});
+  )
+);
 
 const frontXView = (xMax.value + 1) / 2;
 const currentX = ref(frontXView);
@@ -68,74 +67,86 @@ const currentFileIndex = computed(() => currentY.value + '_' + currentX.value);
 const currentFile = computed(() =>
   activeTrack.files.find((file) => file.name.includes(currentFileIndex.value))
 );
+
 watch(
   currentFile,
   () => {
     virtualSampleStore.currentFile = currentFile.value;
     openedFile.value = currentFile.value;
   },
-  {
-    immediate: true,
-  }
+  { immediate: true }
 );
 
+// Rotation
 function rotateX(direction) {
-  if (direction == 'left') {
+  if (direction === 'left') {
     currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1;
-  }
-  if (direction == 'right') {
+  } else if (direction === 'right') {
     currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1;
   }
 }
 
 const isDragToRotateEnabled = ref(false);
-window.addEventListener('mouseup', disableDragToRotate);
-function enableDragToRotate() {
-  isDragToRotateEnabled.value = true;
-}
-function disableDragToRotate() {
-  isDragToRotateEnabled.value = false;
-}
-
 let previousMouseXPos;
 let previousMouseYPos;
 const DRAG_STEP = 20;
 
+function enableDragToRotate(event) {
+  if (event.type.startsWith('touch')) event.preventDefault();
+  const isTouch = event.type.startsWith('touch');
+
+  isDragToRotateEnabled.value = true;
+  const clientX = isTouch ? event.touches[0].clientX : event.clientX;
+  const clientY = isTouch ? event.touches[0].clientY : event.clientY;
+
+  previousMouseXPos = clientX;
+  previousMouseYPos = clientY;
+}
+
+function disableDragToRotate() {
+  isDragToRotateEnabled.value = false;
+}
+
 function dragToRotate(event) {
-  handleHorizontalRotation(event);
-  handleVerticalRotation(event);
+  if (event.type.startsWith('touch')) event.preventDefault();
+  const isTouch = event.type.startsWith('touch');
+  const clientX = isTouch ? event.touches[0].clientX : event.clientX;
+  const clientY = isTouch ? event.touches[0].clientY : event.clientY;
+
+  handleHorizontalRotation(clientX);
+  handleVerticalRotation(clientY);
 }
 
-function handleHorizontalRotation(event) {
+function handleHorizontalRotation(clientX) {
   if (previousMouseXPos === undefined) {
-    previousMouseXPos = event.clientX;
+    previousMouseXPos = clientX;
     return;
   }
 
-  if (event.clientX > previousMouseXPos + DRAG_STEP) {
+  if (clientX > previousMouseXPos + DRAG_STEP) {
     rotateX('left');
-    previousMouseXPos = event.clientX;
-  } else if (event.clientX < previousMouseXPos - DRAG_STEP) {
+    previousMouseXPos = clientX;
+  } else if (clientX < previousMouseXPos - DRAG_STEP) {
     rotateX('right');
-    previousMouseXPos = event.clientX;
+    previousMouseXPos = clientX;
   }
 }
 
-function handleVerticalRotation(event) {
+function handleVerticalRotation(clientY) {
   if (previousMouseYPos === undefined) {
-    previousMouseYPos = event.clientY;
+    previousMouseYPos = clientY;
     return;
   }
 
-  if (event.clientY > previousMouseYPos + DRAG_STEP) {
+  if (clientY > previousMouseYPos + DRAG_STEP) {
     if (currentY.value < yMax.value) {
       currentY.value++;
-      previousMouseYPos = event.clientY;
+      previousMouseYPos = clientY;
     }
-  } else if (event.clientY < previousMouseYPos - DRAG_STEP) {
+  } else if (clientY < previousMouseYPos - DRAG_STEP) {
     if (currentY.value > 0) {
       currentY.value--;
-      previousMouseYPos = event.clientY;
+      previousMouseYPos = clientY;
     }
   }
 }
@@ -150,13 +161,20 @@ const throttledDragToRotate = throttle(dragToRotate, 50);
 watch(isDragToRotateEnabled, (newValue) => {
   if (newValue) {
     window.addEventListener('mousemove', throttledDragToRotate);
+    window.addEventListener('touchmove', throttledDragToRotate, {
+      passive: false,
+    });
   } else {
     window.removeEventListener('mousemove', throttledDragToRotate);
+    window.removeEventListener('touchmove', throttledDragToRotate);
     previousMouseXPos = undefined;
     previousMouseYPos = undefined;
   }
 });
 
+window.addEventListener('mouseup', disableDragToRotate);
+window.addEventListener('touchend', disableDragToRotate);
+
 const { isLoopAnimationEnabled } = storeToRefs(useVirtualSampleStore());
 
 function loopAnimation() {