From da973da1ce5c454a881d9fc5227f432b2560aef3 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Wed, 26 Feb 2025 16:23:32 +0100 Subject: [PATCH] add touch support for interactive 360 --- public/site/config/config.php | 22 ++--- .../project/virtual-sample/Interactive360.vue | 92 +++++++++++-------- 2 files changed, 66 insertions(+), 48 deletions(-) diff --git a/public/site/config/config.php b/public/site/config/config.php index c05e2bf..00a6aa9 100644 --- a/public/site/config/config.php +++ b/public/site/config/config.php @@ -1,23 +1,23 @@ true, + 'debug' => true, 'smartypants' => true, - 'locale' => 'fr_FR.utf-8', - 'date' => [ - 'handler' => 'intl' + 'locale' => 'fr_FR.utf-8', + 'date' => [ + 'handler' => 'intl', ], 'api' => [ 'basicAuth' => true, // Enable api access without SSL. To disable in production. - 'allowInsecure' => true + 'allowInsecure' => true, ], 'panel' => [ 'language' => 'fr', - 'css' => 'assets/css/panel.css', - 'js' => 'assets/js/panel.js', - 'favicon' => 'favicon.svg', - 'menu' => require(__DIR__ . '/menu.php'), + 'css' => 'assets/css/panel.css', + 'js' => 'assets/js/panel.js', + 'favicon' => 'favicon.svg', + 'menu' => require(__DIR__ . '/menu.php'), ], 'routes' => [ require(__DIR__ . '/routes/logout.php'), @@ -32,7 +32,7 @@ return [ require(__DIR__ . '/routes/request-optimization-appointment.php'), ], 'hooks' => [ - 'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'), + 'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'), 'page.delete:before' => require_once(__DIR__ . '/hooks/delete-steps.php'), - ] + ], ]; diff --git a/src/components/project/virtual-sample/Interactive360.vue b/src/components/project/virtual-sample/Interactive360.vue index 5b2b725..b07441d 100644 --- a/src/components/project/virtual-sample/Interactive360.vue +++ b/src/components/project/virtual-sample/Interactive360.vue @@ -2,6 +2,7 @@
@@ -48,18 +49,16 @@ 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] - ); -}); -const xMax = computed(() => { - return parseInt( +const yMax = computed(() => + parseInt(activeTrack.files[activeTrack.files.length - 1].name.split('_')[0]) +); +const xMax = computed(() => + parseInt( activeTrack.files[activeTrack.files.length - 1].name .split('_')[1] .split('.')[0] - ); -}); + ) +); const frontXView = (xMax.value + 1) / 2; const currentX = ref(frontXView); @@ -68,74 +67,86 @@ const currentFileIndex = computed(() => currentY.value + '_' + currentX.value); const currentFile = computed(() => activeTrack.files.find((file) => file.name.includes(currentFileIndex.value)) ); + watch( currentFile, () => { virtualSampleStore.currentFile = currentFile.value; openedFile.value = currentFile.value; }, - { - immediate: true, - } + { immediate: true } ); +// Rotation function rotateX(direction) { - if (direction == 'left') { + if (direction === 'left') { currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1; - } - if (direction == 'right') { + } else if (direction === 'right') { 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 enableDragToRotate(event) { + if (event.type.startsWith('touch')) event.preventDefault(); + const isTouch = event.type.startsWith('touch'); + + isDragToRotateEnabled.value = true; + const clientX = isTouch ? event.touches[0].clientX : event.clientX; + const clientY = isTouch ? event.touches[0].clientY : event.clientY; + + previousMouseXPos = clientX; + previousMouseYPos = clientY; +} + +function disableDragToRotate() { + isDragToRotateEnabled.value = false; +} + function dragToRotate(event) { - handleHorizontalRotation(event); - handleVerticalRotation(event); + if (event.type.startsWith('touch')) event.preventDefault(); + const isTouch = event.type.startsWith('touch'); + const clientX = isTouch ? event.touches[0].clientX : event.clientX; + const clientY = isTouch ? event.touches[0].clientY : event.clientY; + + handleHorizontalRotation(clientX); + handleVerticalRotation(clientY); } -function handleHorizontalRotation(event) { +function handleHorizontalRotation(clientX) { if (previousMouseXPos === undefined) { - previousMouseXPos = event.clientX; + previousMouseXPos = clientX; return; } - if (event.clientX > previousMouseXPos + DRAG_STEP) { + if (clientX > previousMouseXPos + DRAG_STEP) { rotateX('left'); - previousMouseXPos = event.clientX; - } else if (event.clientX < previousMouseXPos - DRAG_STEP) { + previousMouseXPos = clientX; + } else if (clientX < previousMouseXPos - DRAG_STEP) { rotateX('right'); - previousMouseXPos = event.clientX; + previousMouseXPos = clientX; } } -function handleVerticalRotation(event) { +function handleVerticalRotation(clientY) { if (previousMouseYPos === undefined) { - previousMouseYPos = event.clientY; + previousMouseYPos = clientY; return; } - if (event.clientY > previousMouseYPos + DRAG_STEP) { + if (clientY > previousMouseYPos + DRAG_STEP) { if (currentY.value < yMax.value) { currentY.value++; - previousMouseYPos = event.clientY; + previousMouseYPos = clientY; } - } else if (event.clientY < previousMouseYPos - DRAG_STEP) { + } else if (clientY < previousMouseYPos - DRAG_STEP) { if (currentY.value > 0) { currentY.value--; - previousMouseYPos = event.clientY; + previousMouseYPos = clientY; } } } @@ -150,13 +161,20 @@ const throttledDragToRotate = throttle(dragToRotate, 50); watch(isDragToRotateEnabled, (newValue) => { if (newValue) { window.addEventListener('mousemove', throttledDragToRotate); + window.addEventListener('touchmove', throttledDragToRotate, { + passive: false, + }); } else { window.removeEventListener('mousemove', throttledDragToRotate); + window.removeEventListener('touchmove', throttledDragToRotate); previousMouseXPos = undefined; previousMouseYPos = undefined; } }); +window.addEventListener('mouseup', disableDragToRotate); +window.addEventListener('touchend', disableDragToRotate); + const { isLoopAnimationEnabled } = storeToRefs(useVirtualSampleStore()); function loopAnimation() {