chore(web): passive events (#19179)

This commit is contained in:
Mert 2025-06-16 11:03:23 -04:00 committed by GitHub
parent 3d0c851636
commit 5fc448bc97
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 68 additions and 58 deletions

View file

@ -53,12 +53,10 @@
img.src = getAssetOriginalUrl({ id: asset.id, cacheKey: asset.thumbhash });
img.addEventListener('load', () => onImageLoad(true));
img.addEventListener('error', (error) => {
handleError(error, $t('error_loading_image'));
});
img.addEventListener('load', () => onImageLoad(true), { passive: true });
img.addEventListener('error', (error) => handleError(error, $t('error_loading_image')), { passive: true });
globalThis.addEventListener('mousemove', handleMouseMove);
globalThis.addEventListener('mousemove', handleMouseMove, { passive: true });
});
onDestroy(() => {

View file

@ -31,8 +31,8 @@ export function onImageLoad(resetSize: boolean = false) {
cropFrameEl?.classList.add('transition');
cropSettings.update((crop) => normalizeCropArea(crop, img, scale));
cropFrameEl?.classList.add('transition');
cropFrameEl?.addEventListener('transitionend', () => {
cropFrameEl?.classList.remove('transition');
cropFrameEl?.addEventListener('transitionend', () => cropFrameEl?.classList.remove('transition'), {
passive: true,
});
}
cropImageScale.set(scale);

View file

@ -58,7 +58,7 @@ export function handleMouseDown(e: MouseEvent) {
}
document.body.style.userSelect = 'none';
globalThis.addEventListener('mouseup', handleMouseUp);
globalThis.addEventListener('mouseup', handleMouseUp, { passive: true });
}
export function handleMouseMove(e: MouseEvent) {

View file

@ -7,9 +7,9 @@
type AdapterConstructor,
type PluginConstructor,
} from '@photo-sphere-viewer/core';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
import '@photo-sphere-viewer/core/index.css';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
import '@photo-sphere-viewer/settings-plugin/index.css';
import { onDestroy, onMount } from 'svelte';
@ -68,18 +68,20 @@
fisheye: false,
});
const resolutionPlugin = viewer.getPlugin(ResolutionPlugin) as ResolutionPlugin;
const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
// zoomLevel range: [0, 100]
if (Math.round(zoomLevel) >= 75) {
// Replace the preview with the original
void resolutionPlugin.setResolution('original');
viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
}
};
if (originalPanorama && !$alwaysLoadOriginalFile) {
const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
// zoomLevel range: [0, 100]
if (Math.round(zoomLevel) >= 75) {
// Replace the preview with the original
void resolutionPlugin.setResolution('original');
viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
}
};
viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler, { passive: true });
}
return () => viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
});
onDestroy(() => {

View file

@ -193,8 +193,8 @@
if (loader?.complete) {
onload();
}
loader?.addEventListener('load', onload);
loader?.addEventListener('error', onerror);
loader?.addEventListener('load', onload, { passive: true });
loader?.addEventListener('error', onerror, { passive: true });
return () => {
loader?.removeEventListener('load', onload);
loader?.removeEventListener('error', onerror);