studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
isUnknown 2025-02-26 15:12:15 +01:00
parent 1cd55b98d6
commit 1ed7aa9c5b
5 changed files with 63 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/project/virtual-sample/Interactive360.vue
View file

@ -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);