fix #58

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

@@ -0,0 +1,114 @@
+<template>
+  <figure>
+    <div @mousedown="enableDragToRotate" class="drag-zone"></div>
+    <img :src="currentFile.url" alt="" width="500" height="500" />
+  </figure>
+</template>
+
+<script setup>
+import throttle from "lodash/throttle";
+import { ref, computed, watch } from "vue";
+import { useVirtualSampleStore } from "../../../stores/virtualSample";
+
+const { activeTrack } = defineProps({
+  activeTrack: Object,
+});
+
+const virtualSampleStore = useVirtualSampleStore();
+
+const yMax = computed(() => {
+  return parseInt(
+    activeTrack.files[activeTrack.files.length - 1].name.charAt(0)
+  );
+});
+const xMax = computed(() => {
+  return parseInt(
+    activeTrack.files[activeTrack.files.length - 1].name
+      .split("_")[1]
+      .split(".")[0]
+  );
+});
+
+const currentX = ref(0);
+const currentY = ref(0);
+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), {
+  immediate: true,
+});
+
+function rotateX(direction) {
+  if (direction == "left") {
+    currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1;
+  }
+  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 dragToRotate(event) {
+  handleHorizontalRotation(event);
+  handleVerticalRotation(event);
+}
+
+function handleHorizontalRotation(event) {
+  if (previousMouseXPos === undefined) {
+    previousMouseXPos = event.clientX;
+    return;
+  }
+
+  if (event.clientX > previousMouseXPos + DRAG_STEP) {
+    rotateX("left");
+    previousMouseXPos = event.clientX;
+  } else if (event.clientX < previousMouseXPos - DRAG_STEP) {
+    rotateX("right");
+    previousMouseXPos = event.clientX;
+  }
+}
+
+function handleVerticalRotation(event) {
+  if (previousMouseYPos === undefined) {
+    previousMouseYPos = event.clientY;
+    return;
+  }
+
+  if (event.clientY > previousMouseYPos + DRAG_STEP) {
+    if (currentY.value < yMax.value) {
+      currentY.value++;
+      previousMouseYPos = event.clientY;
+    }
+  } else if (event.clientY < previousMouseYPos - DRAG_STEP) {
+    if (currentY.value > 0) {
+      currentY.value--;
+      previousMouseYPos = event.clientY;
+    }
+  }
+}
+
+const throttledDragToRotate = throttle(dragToRotate, 50);
+
+watch(isDragToRotateEnabled, (newValue) => {
+  if (newValue) {
+    window.addEventListener("mousemove", throttledDragToRotate);
+  } else {
+    window.removeEventListener("mousemove", throttledDragToRotate);
+    previousMouseXPos = undefined;
+    previousMouseYPos = undefined;
+  }
+});
+</script>