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

add touch support for interactive 360

Browse source
This commit is contained in:
isUnknown 2025-02-26 16:23:32 +01:00
parent 1ed7aa9c5b
commit da973da1ce
2 changed files with 66 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

22
public/site/config/config.php
View file

@ -1,23 +1,23 @@
<?php
return [
'debug' => 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'),
]
],
];

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

@ -2,6 +2,7 @@
<figure>
<div
@mousedown="enableDragToRotate"
@touchstart="enableDragToRotate"
class="drag-zone"
:class="{ grabbing: isDragToRotateEnabled }"
></div>
@ -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() {