virtual sample : rotation x y working

src/components/project/VirtualSample.vue

@@ -28,21 +28,14 @@
       <header class="flex">
         <div class="options-selector">
           <button
+            v-for="(track, index) in tracks"
             class="btn btn--image"
-            aria-pressed="true"
-            style="
-              --btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D');
-            "
+            :aria-pressed="activeTrack === track ? true : false"
+            :aria-controls="track.slug"
+            :style="`--btn-image: url(${track.files[7].url});`"
+            @click="activeTrack = track"
           >
-            <span>Piste 1</span>
-          </button>
-          <button
-            class="btn btn--image"
-            style="
-              --btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D');
-            "
-          >
-            <span>Piste 2</span>
+            <span>{{ track.title }}</span>
           </button>
         </div>
         <button class="btn | ml-auto">
@@ -50,7 +43,51 @@
         </button>
       </header>
 
-      <ProductViewer />
+      <!--  -->
+      <div id="container">
+        <figure>
+          <img :src="currentFile.url" alt="" />
+        </figure>
+        <fieldset>
+          <input
+            id="x"
+            type="range"
+            min="0"
+            :max="xMax"
+            :steps="xMax + 1"
+            value="0"
+          />
+          <input
+            id="y"
+            type="range"
+            min="0"
+            :max="yMax"
+            :steps="yMax + 1"
+            orient="vertical"
+            value="0"
+          />
+          <button
+            id="y-up"
+            @click="currentY++"
+            :disabled="currentY === yMax.length"
+          >
+            Top
+          </button>
+          <button id="x-down" @click="currentX--" :disabled="currentX === 0">
+            Left
+          </button>
+          <button
+            id="x-up"
+            @click="currentX++"
+            :disabled="currentX === xMax.length"
+          >
+            Right
+          </button>
+          <button id="y-down" @click="currentY--" :disabled="currentY === 0">
+            Bottom
+          </button>
+        </fieldset>
+      </div>
     </div>
     <template #footer>
       <button
@@ -88,12 +125,44 @@
 </template>
 
 <script setup>
+import { storeToRefs } from "pinia";
 import Dialog from "primevue/dialog";
-import { ref, watch } from "vue";
+import { computed, ref } from "vue";
+import { usePageStore } from "../../stores/page";
+import { useDialogStore } from "../../stores/dialog";
 
 const { file } = defineProps({
   file: Object,
 });
+const { page } = storeToRefs(usePageStore());
+const { comments } = storeToRefs(useDialogStore());
+
+const tracks = computed(
+  () => page.value.steps[page.value.steps.length - 1].files
+);
+
+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)
+  )
+);
 
 // Variables
 const isOpen = ref(true);
@@ -104,4 +173,80 @@ const isCommentsOpen = ref(false);
 .dialog__inner {
   padding: var(--space-16);
 }
+
+#container {
+  --w: 500px;
+  --h: 500px;
+  --x-steps: 14;
+  --y-steps: 5;
+  width: var(--w);
+  height: var(--h);
+  background-color: dimgray;
+  position: relative;
+}
+
+#container figure {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+#container img {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: inherit;
+  height: inherit;
+}
+
+#container fieldset {
+  --p: 1rem;
+  margin: 0;
+  padding: 0;
+  width: var(--w);
+  height: var(--h);
+  border: none;
+}
+
+#container button,
+input {
+  position: absolute;
+}
+
+#x {
+  left: 0;
+  bottom: calc(-1 * var(--p));
+  right: 0;
+}
+#y {
+  top: 0;
+  bottom: 0;
+  right: calc(-1 * var(--p));
+}
+
+#y-up {
+  top: var(--p);
+}
+#y-down {
+  bottom: var(--p);
+}
+#y-up,
+#y-down {
+  text-align: center;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#x-down {
+  left: var(--p);
+}
+#x-up {
+  right: var(--p);
+}
+#x-down,
+#x-up {
+  top: 50%;
+  transform: translateY(-50%);
+}
 </style>