colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(reader): virtual rendering avec IntersectionObserver en mode scroll #16

Merged
colgora merged 1 commits from perf/reader-virtual-rendering into main 2026-03-15 18:51:26 +01:00
Conversation 0 Commits 1 Files Changed 2 +97 -93
2 changed files with 97 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
View File

@@ -1,15 +1,26 @@
<template>
<div class="infinite-reader" ref="containerRef">
<div v-for="(page, index) in pages" :key="index" class="page-wrapper" :data-page-index="index">
<ReaderPage
v-if="isPageInWindow(index) && page?.url"
<div v-for="(page, index) in pages" :key="index"
class="page-wrapper" :data-page-index="index">
<!-- Pas d'URL : spinner de chargement -->
<div v-if="!page?.url" class="loading">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
</div>
<!-- Hors de la zone de rendu : placeholder dimensionné -->
<div v-else-if="!mountedPageIndices.has(index)"
class="page-placeholder"
:style="{ height: getPlaceholderHeight(page) + 'px' }" />
<!-- Dans la zone : composant complet -->
<ReaderPage v-else
:page-data="page"
:page-number="index + 1"
:zoom="zoom"
:double-page-mode="doublePageMode"
loading="eager"
/>
<div v-else class="page-placeholder" :style="getPlaceholderStyle(page)" />
:window-width="windowWidth"
loading="lazy" />
</div>
<!-- Bouton flottant pour revenir en haut -->
@@ -38,29 +49,10 @@
</template>
<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { useHeaderStore } from '../../../../shared/stores/headerStore';
import ReaderPage from './ReaderPage.vue';
const WINDOW_SIZE = 3;
const currentVisibleIndex = ref(0); // initialisé via prop initialPage dans onMounted
const isPageInWindow = (index) => Math.abs(index - currentVisibleIndex.value) <= WINDOW_SIZE;
const getPlaceholderStyle = (page) => {
if (page?.dimensions?.width && page?.dimensions?.height) {
const maxW = windowWidth.value < 1200
? windowWidth.value * 0.95
: 1200;
return {
aspectRatio: `${page.dimensions.width} / ${page.dimensions.height}`,
width: '100%',
maxWidth: `${Math.min(page.dimensions.width, maxW)}px`,
};
}
return { height: '800px', width: '100%' };
};
const props = defineProps({
pages: {
type: Array,
@@ -73,10 +65,6 @@ import ReaderPage from './ReaderPage.vue';
doublePageMode: {
type: String,
required: true
},
initialPage: {
type: Number,
default: 0
}
});
@@ -85,6 +73,8 @@ import ReaderPage from './ReaderPage.vue';
const headerStore = useHeaderStore();
const containerRef = ref(null);
const observer = ref(null);
const visibilityObserver = ref(null);
const mountedPageIndices = reactive(new Set());
const windowWidth = ref(window.innerWidth);
// État unique pour tous les boutons flottants avec timer de 3 secondes
@@ -96,35 +86,55 @@ import ReaderPage from './ReaderPage.vue';
let scrollDirection = 'down';
const observeIntersection = entries => {
const intersectingIndices = entries
.filter(e => e.isIntersecting)
.map(e => parseInt(e.target.getAttribute('data-page-index')));
if (intersectingIndices.length > 0) {
const minIdx = Math.min(...intersectingIndices);
currentVisibleIndex.value = minIdx;
emit('pageVisible', minIdx);
entries.forEach(entry => {
if (entry.isIntersecting) {
const pageIndex = parseInt(entry.target.getAttribute('data-page-index'));
emit('pageVisible', pageIndex);
}
});
};
const setupIntersectionObserver = () => {
if (observer.value) {
observer.value.disconnect();
}
// Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage
const getPlaceholderHeight = (page) => {
const dims = page?.dimensions;
if (!dims?.width || !dims?.height) return 800;
const displayWidth = windowWidth.value < 1200
? Math.min(dims.width, windowWidth.value * 0.95)
: Math.min(dims.width, 1200);
return Math.round((dims.height / dims.width) * displayWidth);
};
const setupObservers = () => {
observer.value?.disconnect();
visibilityObserver.value?.disconnect();
observer.value = new IntersectionObserver(observeIntersection, {
root: null,
threshold: 0.5
});
nextTick(() => {
const pageElements = containerRef.value?.querySelectorAll('.page-wrapper');
if (pageElements) {
pageElements.forEach(element => {
observer.value.observe(element);
});
visibilityObserver.value = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
const idx = parseInt(entry.target.getAttribute('data-page-index'));
if (entry.isIntersecting) {
mountedPageIndices.add(idx);
} else {
mountedPageIndices.delete(idx);
}
});
},
{ root: null, rootMargin: '1000px 0px', threshold: 0 }
);
nextTick(() => {
const els = containerRef.value?.querySelectorAll('.page-wrapper');
els?.forEach((el, i) => {
el.setAttribute('data-page-index', i);
observer.value.observe(el);
visibilityObserver.value.observe(el);
});
});
};
// Fonction unique pour gérer la visibilité de tous les boutons flottants
@@ -207,21 +217,16 @@ import ReaderPage from './ReaderPage.vue';
// Fonction pour revenir en haut de la page
const scrollToTop = () => {
console.log('scrollToTop appelée'); // Debug
// Réinitialiser le timer lors du clic
resetButtonsTimer();
// Stratégie 1: Scroll sur le conteneur direct
if (containerRef.value) {
console.log('containerRef trouvé, scrollTop actuel:', containerRef.value.scrollTop); // Debug
if (containerRef.value.scrollTop > 0) {
containerRef.value.scrollTo({
top: 0,
behavior: 'smooth'
});
console.log('Scroll sur containerRef effectué'); // Debug
return;
}
}
@@ -231,7 +236,6 @@ import ReaderPage from './ReaderPage.vue';
while (currentElement) {
const styles = window.getComputedStyle(currentElement);
if (styles.overflowY === 'auto' || styles.overflowY === 'scroll' || currentElement.scrollTop > 0) {
console.log('Conteneur avec scroll trouvé:', currentElement.className, 'scrollTop:', currentElement.scrollTop); // Debug
currentElement.scrollTo({
top: 0,
behavior: 'smooth'
@@ -242,7 +246,6 @@ import ReaderPage from './ReaderPage.vue';
}
// Stratégie 3: Scroll sur la fenêtre entière
console.log('Scroll sur window, scrollY actuel:', window.scrollY); // Debug
window.scrollTo({
top: 0,
behavior: 'smooth'
@@ -258,7 +261,8 @@ import ReaderPage from './ReaderPage.vue';
watch(
() => props.pages,
() => {
setupIntersectionObserver();
mountedPageIndices.clear();
setupObservers();
},
{ immediate: true }
);
@@ -277,8 +281,7 @@ import ReaderPage from './ReaderPage.vue';
};
onMounted(() => {
currentVisibleIndex.value = props.initialPage;
setupIntersectionObserver();
setupObservers();
// Activer l'auto-hide du header si la largeur < 1200px
if (windowWidth.value < 1200) {
@@ -298,9 +301,8 @@ import ReaderPage from './ReaderPage.vue';
});
onUnmounted(() => {
if (observer.value) {
observer.value.disconnect();
}
observer.value?.disconnect();
visibilityObserver.value?.disconnect();
// Désactiver l'auto-hide du header en quittant
headerStore.disableAutoHide();
@@ -335,25 +337,34 @@ import ReaderPage from './ReaderPage.vue';
}
.page-placeholder {
@apply flex justify-center;
background: transparent;
@apply w-full;
max-width: 1200px;
min-height: 400px;
}
.loading,
.error {
@apply text-red-500 text-xl bg-red-500/10 rounded-lg flex items-center justify-center min-h-[400px];
width: 95vw;
@apply flex items-center justify-center min-h-[400px];
/* Largeur adaptative selon la taille d'écran */
width: 95vw; /* Mobile : 95% de la largeur */
}
@screen sm {
.loading,
.error {
width: 80vw;
width: 80vw; /* Tablette : 80% de la largeur */
}
}
@screen lg {
.loading,
.error {
width: 70vw;
width: 70vw; /* Desktop : 70% de la largeur */
}
}
.error {
@apply text-red-500 text-xl bg-red-500/10 rounded-lg;
}
</style>

43
assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
View File

@@ -15,7 +15,6 @@
:alt="`Page ${pageNumber} (Double page)`"
class="page-image rotated"
:style="doublePageRotatedStyle"
:loading="loading"
@load="handleImageLoad"
ref="imageRef" />
<div class="rotation-hint">
@@ -34,7 +33,6 @@
:alt="`Page ${pageNumber} (Double page)`"
class="page-image scrollable"
:style="doublePageScrollStyle"
:loading="loading"
@load="handleImageLoad"
ref="imageRef" />
</div>
@@ -54,7 +52,6 @@
:alt="`Page ${pageNumber}`"
class="page-image"
:style="imageStyle"
:loading="loading"
@load="handleImageLoad"
ref="imageRef" />
</div>
@@ -82,9 +79,9 @@ import { useReaderStore } from '../../application/store/readerStore';
default: 'rotate', // 'rotate', 'scroll', 'normal'
validator: (value) => ['rotate', 'scroll', 'normal'].includes(value)
},
loading: {
type: String,
default: 'lazy',
windowWidth: {
type: Number,
default: null
}
});
@@ -103,8 +100,11 @@ import { useReaderStore } from '../../application/store/readerStore';
const scrollContainerRef = ref(null);
const naturalWidth = ref(0);
const naturalHeight = ref(0);
const windowWidth = ref(window.innerWidth);
const isMobile = computed(() => windowWidth.value < 768);
const localWindowWidth = ref(window.innerWidth);
const effectiveWindowWidth = computed(() =>
props.windowWidth !== null ? props.windowWidth : localWindowWidth.value
);
const isMobile = computed(() => effectiveWindowWidth.value < 768);
const imageLoaded = ref(false);
const imageSource = computed(() => {
@@ -123,17 +123,13 @@ import { useReaderStore } from '../../application/store/readerStore';
// Utiliser d'abord les dimensions de l'API si disponibles
if (props.pageData?.dimensions?.width && props.pageData?.dimensions?.height) {
const ratio = props.pageData.dimensions.width / props.pageData.dimensions.height;
const isDouble = ratio > threshold;
console.log(`API Dimensions - Page ${props.pageNumber}: ${props.pageData.dimensions.width}x${props.pageData.dimensions.height}, ratio: ${ratio.toFixed(2)}, isDouble: ${isDouble}`);
return isDouble;
return ratio > threshold;
}
// Fallback sur les dimensions naturelles de l'image (seulement si l'image est chargée)
if (imageLoaded.value && naturalWidth.value && naturalHeight.value) {
const ratio = naturalWidth.value / naturalHeight.value;
const isDouble = ratio > threshold;
console.log(`Natural Dimensions - Page ${props.pageNumber}: ${naturalWidth.value}x${naturalHeight.value}, ratio: ${ratio.toFixed(2)}, isDouble: ${isDouble}`);
return isDouble;
return ratio > threshold;
}
return false;
@@ -144,7 +140,6 @@ import { useReaderStore } from '../../application/store/readerStore';
naturalWidth.value = imageRef.value.naturalWidth;
naturalHeight.value = imageRef.value.naturalHeight;
imageLoaded.value = true;
console.log(`Image loaded - Page ${props.pageNumber}: ${naturalWidth.value}x${naturalHeight.value}`);
// Positionner le scroll à droite si c'est le mode scroll
if (props.doublePageMode === 'scroll' && scrollContainerRef.value) {
@@ -195,7 +190,7 @@ import { useReaderStore } from '../../application/store/readerStore';
if (!width || !height) return null;
const availableWidth = windowWidth.value;
const availableWidth = effectiveWindowWidth.value;
// Si la largeur disponible est < 1200px : utiliser 95% de la largeur
if (availableWidth < 1200) {
@@ -244,7 +239,7 @@ import { useReaderStore } from '../../application/store/readerStore';
if (!width || !height) return {};
// En mode rotation : maximiser l'utilisation de l'espace
const availableWidth = windowWidth.value;
const availableWidth = effectiveWindowWidth.value;
const availableHeight = window.innerHeight - 100; // Laisser un peu d'espace pour les contrôles
// Après rotation, la largeur originale devient la hauteur affichée
@@ -294,20 +289,18 @@ import { useReaderStore } from '../../application/store/readerStore';
};
});
// Gestion du redimensionnement de la fenêtre
const handleResize = () => {
windowWidth.value = window.innerWidth;
};
let ownResizeHandler = null;
onMounted(() => {
if (imageRef.value && imageRef.value.complete) {
handleImageLoad();
if (props.windowWidth === null) {
ownResizeHandler = () => { localWindowWidth.value = window.innerWidth; };
window.addEventListener('resize', ownResizeHandler, { passive: true });
}
window.addEventListener('resize', handleResize);
if (imageRef.value?.complete) handleImageLoad();
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (ownResizeHandler) window.removeEventListener('resize', ownResizeHandler);
});
</script>