fix #58

public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/2_image-seule/perfume-1042715_1280.jpg.txt

@@ -0,0 +1 @@
+Uuid: WoOis1FYYuQXAd1q

public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/2_image-seule/track.txt

@@ -0,0 +1,9 @@
+Title: Image seule
+
+----
+
+Views: - file://WoOis1FYYuQXAd1q
+
+----
+
+Uuid: TCtEmVnwDSBWTeax

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

@@ -7,7 +7,7 @@
           class="btn btn--image"
           :aria-pressed="activeTrack === track ? true : false"
           :aria-controls="track.slug"
-          :style="`--btn-image: url(${track.files[7].url});`"
+          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
           @click="
             activeTrack = track;
             currentX = 0;
@@ -23,22 +23,23 @@
     </header>
 
     <div class="track">
+      <Interactive360
+        v-if="activeTrack.files.length > 1"
+        :activeTrack="activeTrack"
+      />
       <figure>
-        <div @mousedown="enableDragToRotate" class="drag-zone"></div>
-        <img :src="currentFile.url" alt="" width="500" height="500" />
+        <img :src="activeTrack.files[0].url" alt="" />
       </figure>
     </div>
   </div>
 </template>
 <script setup>
-import throttle from "lodash/throttle";
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../../stores/page";
-import { useVirtualSampleStore } from "../../../stores/virtualSample";
+import Interactive360 from "./Interactive360.vue";
 
 const { page } = storeToRefs(usePageStore());
-const virtualSampleStore = useVirtualSampleStore();
 
 const tracks = computed(
   () => page.value.steps[page.value.steps.length - 1].files.dynamic
@@ -46,103 +47,13 @@ const tracks = computed(
 
 const activeTrack = ref(tracks.value[0]);
 
-const yMax = computed(() => {
-  return parseInt(
-    activeTrack.value.files[activeTrack.value.files.length - 1].name.charAt(0)
-  );
-});
-const xMax = computed(() => {
-  return parseInt(
-    activeTrack.value.files[activeTrack.value.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.value.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);
+function getFrontViewUrl(track) {
+  if (track.files.length > 1) {
+    return track.files[7].url;
   } else {
-    window.removeEventListener("mousemove", throttledDragToRotate);
-    previousMouseXPos = undefined;
-    previousMouseYPos = undefined;
+    return track.files[0].url;
   }
-});
+}
 </script>
 
 <style>

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>