fix #37

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

@@ -9,6 +9,7 @@
 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,
@@ -111,4 +112,27 @@ watch(isDragToRotateEnabled, (newValue) => {
     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>

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

@@ -60,6 +60,7 @@
         id="loop-animation"
         class="btn btn--transparent btn--outline"
         data-icon="loop"
+        @click="isLoopAnimationEnabled = !isLoopAnimationEnabled"
       >
         <span>Animation en boucle</span>
       </button>
@@ -91,7 +92,9 @@ const { file } = defineProps({
   file: Object,
 });
 
-const { activeTab, currentFile, step } = storeToRefs(useVirtualSampleStore());
+const { activeTab, currentFile, step, isLoopAnimationEnabled } = storeToRefs(
+  useVirtualSampleStore()
+);
 const { isCommentsOpen } = storeToRefs(useDialogStore());
 
 // Variables

src/stores/virtualSample.js

@@ -5,11 +5,12 @@ import { usePageStore } from "./page";
 export const useVirtualSampleStore = defineStore("virtual-sample", () => {
   const activeTab = ref("dynamic");
   const currentFile = ref(null);
+  const isLoopAnimationEnabled = ref(false);
 
   const { page } = usePageStore();
   const step = page.steps.find((step) => step.id === "virtualSample");
 
   watch(activeTab, () => (currentFile.value = null));
 
-  return { activeTab, currentFile, step };
+  return { activeTab, currentFile, step, isLoopAnimationEnabled };
 });