fix #11

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

@@ -24,48 +24,14 @@
 
     <div class="track">
       <figure>
+        <div @mousedown="enableDragToRotate" class="drag-zone"></div>
         <img :src="currentFile.url" alt="" width="500" height="500" />
       </figure>
-      <fieldset>
-        <button
-          class="y-up | btn btn--icon"
-          @click="currentY++"
-          :disabled="currentY === yMax"
-          data-icon="chevron-single-left"
-          title="Pivoter vers le haut"
-        >
-          <span class="sr-only">Top</span>
-        </button>
-        <button
-          class="x-down | btn btn--icon"
-          @click="rotateX('left')"
-          data-icon="chevron-single-left"
-          title="Pivoter vers la gauche"
-        >
-          <span class="sr-only">Left</span>
-        </button>
-        <button
-          class="x-up | btn btn--icon"
-          @click="rotateX('right')"
-          data-icon="chevron-single-left"
-          title="Pivoter vers la droite"
-        >
-          <span class="sr-only">Right</span>
-        </button>
-        <button
-          class="y-down | btn btn--icon"
-          @click="currentY--"
-          :disabled="currentY === 0"
-          data-icon="chevron-single-left"
-          title="Pivoter vers le bas"
-        >
-          <span class="sr-only">Bottom</span>
-        </button>
-      </fieldset>
     </div>
   </div>
 </template>
 <script setup>
+import throttle from "lodash/throttle";
 import { ref, computed, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../../stores/page";
@@ -113,4 +79,80 @@ function rotateX(direction) {
     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>
+
+<style>
+.track figure {
+  position: relative;
+}
+
+.track .drag-zone {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+</style>

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

@@ -22,7 +22,7 @@
           aria-controls="dynamic"
           @click="activeTab = 'dynamic'"
         >
-          <span>Vue Dynamique</span>
+          <span>Présentation dynamique</span>
         </button>
         <button
           v-if="step.files.static"