fix #79

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

@@ -51,19 +51,21 @@ import { storeToRefs } from "pinia";
 import { usePageStore } from "../../../stores/page";
 import Interactive360 from "./Interactive360.vue";
 import { useDialogStore } from "../../../stores/dialog";
+import { useVirtualSampleStore } from "../../../stores/virtualSample";
 
 const { page } = storeToRefs(usePageStore());
 const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
   useDialogStore()
 );
 
+const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
+
 const tracks = computed(
   () =>
     page.value.steps.find((step) => step.slug === "virtual-sample").files
       .dynamic
 );
 
-const isCompareModeEnabled = ref(false);
 watch(isCompareModeEnabled, (newValue) => {
   if (newValue) {
     isCommentsOpen.value = false;

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

@@ -5,7 +5,16 @@
       class="drag-zone"
       :class="{ grabbing: isDragToRotateEnabled }"
     ></div>
-    <img :src="openedFile.url" alt="" width="500" height="500" />
+    <img
+      :src="
+        virtualSampleStore.isCompareModeEnabled
+          ? currentFile.url
+          : openedFile.url
+      "
+      alt=""
+      width="500"
+      height="500"
+    />
   </figure>
   <div
     id="helper"

src/stores/virtualSample.js

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