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

<template>
  <figure>
    <div
      @mousedown="enableDragToRotate"
      class="drag-zone"
      :class="{ grabbing: isDragToRotateEnabled }"
    ></div>
    <img :src="currentFile.url" alt="" width="500" height="500" />
  </figure>
  <div
    id="helper"
    class="flex flex-col | bg-black-50"
    :hidden="isHelperHidden ? true : undefined"
  >
    <p class="rounded-lg | text-white bg-grey-800 | p-16">
      Vous pouvez visualiser l’échantillon sous différents angles en cliquant et
      en déplaçant la souris de gauche à droite ou de bas en haut.
    </p>
    <button class="btn" @click="isHelperHidden = true">J’ai compris</button>
  </div>
</template>

<script setup>
import throttle from "lodash/throttle";
import { ref, computed, watch } from "vue";
import { useVirtualSampleStore } from "../../../stores/virtualSample";
import { storeToRefs } from "pinia";

const { activeTrack } = defineProps({
  activeTrack: Object,
});

const virtualSampleStore = useVirtualSampleStore();

const isHelperHidden = ref(localStorage.getItem("isHelperHidden"));
localStorage.setItem("isHelperHidden", true);

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;
  }
});

const { isLoopAnimationEnabled } = storeToRefs(useVirtualSampleStore());

function loopAnimation() {
  rotateX("right");

  if (currentX.value < xMax.value / 2) {
    if (currentY.value < yMax.value - 1) currentY.value++;
  } else {
    if (currentY.value > 0) currentY.value--;
  }
}

let animationIntervalId;
watch(isLoopAnimationEnabled, (newValue) => {
  if (newValue) {
    currentX.value = 0;
    currentY.value = 0;
    animationIntervalId = setInterval(loopAnimation, 300);
  } else {
    clearInterval(animationIntervalId);
  }
});
</script>