#137 - create single image component and add download image function

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

@@ -35,9 +35,7 @@
           v-if="activeTrack.files.length > 1"
           :activeTrack="activeTrack"
         />
-        <figure v-else>
-          <img :src="activeTrack.files[0].url" alt="" />
-        </figure>
+        <SingleImage v-else :file="activeTrack.files[0]" />
       </template>
       <div
         v-if="isCompareModeEnabled && activeTracks.length < 2"
@@ -52,10 +50,11 @@
 import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
-import Interactive360 from './Interactive360.vue';
 import { useDialogStore } from '../../../stores/dialog';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useRoute } from 'vue-router';
+import Interactive360 from './Interactive360.vue';
+import SingleImage from './SingleImage.vue';
 
 const route = useRoute();
 

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

@@ -30,11 +30,11 @@
 </template>
 
 <script setup>
-import throttle from "lodash/throttle";
-import { ref, computed, watch } from "vue";
-import { useVirtualSampleStore } from "../../../stores/virtualSample";
-import { storeToRefs } from "pinia";
-import { useDialogStore } from "../../../stores/dialog";
+import throttle from 'lodash/throttle';
+import { ref, computed, watch } from 'vue';
+import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { storeToRefs } from 'pinia';
+import { useDialogStore } from '../../../stores/dialog';
 
 const { activeTrack } = defineProps({
   activeTrack: Object,
@@ -44,27 +44,27 @@ const { activeTrack } = defineProps({
 const { openedFile } = storeToRefs(useDialogStore());
 const virtualSampleStore = useVirtualSampleStore();
 const { isDownloadTriggered } = storeToRefs(useVirtualSampleStore());
-const isHelperHidden = ref(localStorage.getItem("isHelperHidden"));
-localStorage.setItem("isHelperHidden", true);
+const isHelperHidden = ref(localStorage.getItem('isHelperHidden'));
+localStorage.setItem('isHelperHidden', true);
 
 // Grab interaction
 const yMax = computed(() => {
   return parseInt(
-    activeTrack.files[activeTrack.files.length - 1].name.split("_")[0]
+    activeTrack.files[activeTrack.files.length - 1].name.split('_')[0]
   );
 });
 const xMax = computed(() => {
   return parseInt(
     activeTrack.files[activeTrack.files.length - 1].name
-      .split("_")[1]
-      .split(".")[0]
+      .split('_')[1]
+      .split('.')[0]
   );
 });
 
 const frontXView = (xMax.value + 1) / 2;
 const currentX = ref(frontXView);
 const currentY = ref(0);
-const currentFileIndex = computed(() => currentY.value + "_" + currentX.value);
+const currentFileIndex = computed(() => currentY.value + '_' + currentX.value);
 const currentFile = computed(() =>
   activeTrack.files.find((file) => file.name.includes(currentFileIndex.value))
 );
@@ -80,16 +80,16 @@ watch(
 );
 
 function rotateX(direction) {
-  if (direction == "left") {
+  if (direction == 'left') {
     currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1;
   }
-  if (direction == "right") {
+  if (direction == 'right') {
     currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1;
   }
 }
 
 const isDragToRotateEnabled = ref(false);
-window.addEventListener("mouseup", disableDragToRotate);
+window.addEventListener('mouseup', disableDragToRotate);
 function enableDragToRotate() {
   isDragToRotateEnabled.value = true;
 }
@@ -113,10 +113,10 @@ function handleHorizontalRotation(event) {
   }
 
   if (event.clientX > previousMouseXPos + DRAG_STEP) {
-    rotateX("left");
+    rotateX('left');
     previousMouseXPos = event.clientX;
   } else if (event.clientX < previousMouseXPos - DRAG_STEP) {
-    rotateX("right");
+    rotateX('right');
     previousMouseXPos = event.clientX;
   }
 }
@@ -149,9 +149,9 @@ const throttledDragToRotate = throttle(dragToRotate, 50);
 
 watch(isDragToRotateEnabled, (newValue) => {
   if (newValue) {
-    window.addEventListener("mousemove", throttledDragToRotate);
+    window.addEventListener('mousemove', throttledDragToRotate);
   } else {
-    window.removeEventListener("mousemove", throttledDragToRotate);
+    window.removeEventListener('mousemove', throttledDragToRotate);
     previousMouseXPos = undefined;
     previousMouseYPos = undefined;
   }
@@ -160,7 +160,7 @@ watch(isDragToRotateEnabled, (newValue) => {
 const { isLoopAnimationEnabled } = storeToRefs(useVirtualSampleStore());
 
 function loopAnimation() {
-  rotateX("right");
+  rotateX('right');
 }
 
 let animationIntervalId;
@@ -193,9 +193,9 @@ function preloadImages() {
 watch(isDownloadTriggered, (newValue) => {
   if (!newValue) return;
 
-  const downloadNode = document.createElement("a");
-  downloadNode.setAttribute("href", currentFile.value.source);
-  downloadNode.setAttribute("download", "");
+  const downloadNode = document.createElement('a');
+  downloadNode.setAttribute('href', currentFile.value.source);
+  downloadNode.setAttribute('download', '');
   document.body.appendChild(downloadNode);
   downloadNode.click();
   document.body.removeChild(downloadNode);

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

@@ -0,0 +1,29 @@
+<template>
+  <figure>
+    <img :src="file.url" alt="" />
+  </figure>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia';
+import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { watch } from 'vue';
+
+const { file } = defineProps({
+  file: Object,
+});
+
+const { isDownloadTriggered } = storeToRefs(useVirtualSampleStore());
+
+// Download image
+watch(isDownloadTriggered, (newValue) => {
+  if (!newValue) return;
+  const downloadNode = document.createElement('a');
+  downloadNode.setAttribute('href', file.source);
+  downloadNode.setAttribute('download', '');
+  document.body.appendChild(downloadNode);
+  console.log(downloadNode);
+  downloadNode.click();
+  document.body.removeChild(downloadNode);
+});
+</script>

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

@@ -49,7 +49,7 @@
 
     <template #footer>
       <button
-        v-if="currentFile"
+        v-if="openedFile"
         id="download-image"
         class="btn btn--white-10"
         data-icon="download"

src/stores/virtualSample.js

@@ -1,13 +1,15 @@
-import { defineStore } from "pinia";
-import { ref, watch } from "vue";
-import { usePageStore } from "./page";
+import { defineStore, storeToRefs } from 'pinia';
+import { ref, watch } from 'vue';
+import { usePageStore } from './page';
+import { useDialogStore } from './dialog';
 
-export const useVirtualSampleStore = defineStore("virtual-sample", () => {
+export const useVirtualSampleStore = defineStore('virtual-sample', () => {
   const { page } = usePageStore();
-  const step = page.steps.find((step) => step.id === "virtualSample");
+  const { openedFile } = storeToRefs(useDialogStore());
+  const step = page.steps.find((step) => step.id === 'virtualSample');
   const isCompareModeEnabled = ref(false);
 
-  const activeTab = ref(step.files.dynamic ? "dynamic" : "static");
+  const activeTab = ref(step.files.dynamic ? 'dynamic' : 'static');
   const currentFile = ref(null);
   const isLoopAnimationEnabled = ref(false);
   const isDownloadTriggered = ref(false);