UnitPrint/app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Перенос предпросмотра PrintMenu в модули

Browse Source
This commit is contained in:
TraceLumen
2026-09-02 16:41:36 +03:00
parent 8dac91215f
commit f03c321c38
3 changed files with 348 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
src/lib/PrintMenu.svelte
View File

@ -1,5 +1,7 @@
<script>
import { onDestroy, tick } from 'svelte';
import SelectionPage from './preview/SelectionPage.svelte';
import PreviewPage from './preview/PreviewPage.svelte';
let { onBack = () => {}, onPrint = () => {} } = $props();
@ -22,11 +24,7 @@
// ── Данные для превью (чтение) ──
/** Кэшированные URL больших страниц для превью */
let previewPagesCache = $state({});
let previewScrollContainer;
let isPreviewRendering = $state(false);
// Флаг для предотвращения множественных вызовов preload во время одного тика скролла
let preloadScheduled = false;
let uid = 0;
@ -41,7 +39,7 @@
{ id: 'color', label: 'Цвет' }
];
// ── PDF.js Core ──
// ── PDF.js Core (Остается в родителе для управления памятью) ──
async function loadPdfDocument(entry) {
if (entry.pdfDoc) return entry.pdfDoc;
try {
@ -61,9 +59,6 @@
}
}
/**
* Рендерит страницу в DataURL
*/
async function renderPageToImage(pdfDoc, pageNum, scale = 1.0) {
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale });
@ -88,7 +83,7 @@
return canvas.toDataURL('image/jpeg', 0.85);
}
// ── Логика Галереи (Выбор страниц) ──
// ── Логика Галереи ──
async function openPageGallery(entry) {
activeFile = entry;
viewMode = 'gallery';
@ -118,7 +113,7 @@
galleryLoading = false;
}
// ── Логика Превью (Просмотр) ──
// ── Логика Превью ──
async function openPreview(entry) {
activeFile = entry;
viewMode = 'preview';
@ -129,18 +124,10 @@
if (entry.fileType === 'pdf') {
if (!entry.pdfDoc) await loadPdfDocument(entry);
// Загружаем первые страницы сразу с большим буфером
preloadPreviewPages(entry, 1, 5);
}
}
/**
* Ленивая подгрузка страниц для режима Preview
* @param {FileEntry} entry
* @param {number} startPage - Страница, от которой начинаем загрузку
* @param {number} count - Сколько страниц грузим
* @param {'forward' | 'around'} direction - Направление загрузки
*/
async function preloadPreviewPages(entry, startPage, count, direction = 'forward') {
if (!entry.pdfDoc || isPreviewRendering) return;
isPreviewRendering = true;
@ -148,22 +135,18 @@
let pagesToLoad = [];
if (direction === 'around') {
// Загружаем окно вокруг текущей страницы
const half = Math.floor(count / 2);
const from = Math.max(1, startPage - half);
const to = Math.min(entry.totalPages, startPage + half);
for(let i = from; i <= to; i++) pagesToLoad.push(i);
} else {
// Загружаем вперед от startPage
const endPage = Math.min(startPage + count - 1, entry.totalPages);
for (let i = startPage; i <= endPage; i++) pagesToLoad.push(i);
}
// Фильтруем уже загруженные
pagesToLoad = pagesToLoad.filter(p => !previewPagesCache[p]);
if (pagesToLoad.length > 0) {
// Создаем локальную копию, чтобы не триггерить реактивность на каждой итерации
const newCacheEntries = {};
for (const pageNum of pagesToLoad) {
@ -175,7 +158,6 @@
}
}
// Одноразовое обновление стейта
if (Object.keys(newCacheEntries).length > 0) {
previewPagesCache = { ...previewPagesCache, ...newCacheEntries };
}
@ -184,65 +166,9 @@
isPreviewRendering = false;
}
// Обработчик скролла для ленивой загрузки в превью
function handlePreviewScroll() {
if (!activeFile || viewMode !== 'preview' || !previewScrollContainer) return;
// Debounce/Throttle через requestAnimationFrame
if (preloadScheduled) return;
preloadScheduled = true;
requestAnimationFrame(() => {
preloadScheduled = false;
const container = previewScrollContainer;
// Ищем ВСЕ элементы страниц: и загруженные картинки, и плейсхолдеры
const pageElements = container.querySelectorAll('[data-page]');
const buffer = window.innerHeight * 1.5; // Увеличенный буфер предзагрузки
let closestVisiblePage = 0;
let minDistance = Infinity;
let needsPreload = false;
let firstUnloadedInView = null;
const viewportCenter = window.innerHeight / 2;
pageElements.forEach((el) => {
const rect = el.getBoundingClientRect();
const pageNum = parseInt(el.dataset.page);
// Элемент находится в зоне видимости + буфер
const inView = rect.bottom > -buffer && rect.top < window.innerHeight + buffer;
if (inView) {
// Определяем ближайшую к центру экрана страницу для контекста
const elCenter = rect.top + rect.height / 2;
const dist = Math.abs(elCenter - viewportCenter);
if (dist < minDistance) {
minDistance = dist;
closestVisiblePage = pageNum;
}
// Если это плейсхолдер (нет картинки в кэше), запоминаем первую такую
if (!previewPagesCache[pageNum] && firstUnloadedInView === null) {
firstUnloadedInView = pageNum;
needsPreload = true;
}
}
});
if (needsPreload && firstUnloadedInView) {
// Загружаем пакет страниц начиная с первой ненайденной
preloadPreviewPages(activeFile, firstUnloadedInView, 4, 'forward');
} else if (closestVisiblePage > 0 && !isPreviewRendering) {
// Фоновая догрузка вокруг текущей просматриваемой страницы
// Проверяем, есть ли следующие страницы в кэше
const nextPage = closestVisiblePage + 2;
if (nextPage <= activeFile.totalPages && !previewPagesCache[nextPage]) {
preloadPreviewPages(activeFile, closestVisiblePage, 3, 'around');
}
}
});
// Обработчик запроса страниц от дочернего PreviewPage
function handlePreviewRequestPages(start, count, direction) {
if (activeFile) preloadPreviewPages(activeFile, start, count, direction);
}
// ── Общие функции закрытия ──
@ -252,25 +178,26 @@
previewPagesCache = {};
}
// ── Управление выбором страниц (для Gallery) ──
function togglePageSelection(entry, pageNum) {
if (!entry.selectedPages) return;
const newSet = new Set(entry.selectedPages);
// ── Управление выбором страниц ──
function togglePageSelection(pageNum) {
if (!activeFile?.selectedPages) return;
const newSet = new Set(activeFile.selectedPages);
if (newSet.has(pageNum)) {
if (newSet.size > 1) newSet.delete(pageNum);
} else {
newSet.add(pageNum);
}
entry.selectedPages = newSet;
activeFile.selectedPages = newSet;
}
function selectAllPages(entry) {
if (!entry.totalPages) return;
entry.selectedPages = new Set(Array.from({ length: entry.totalPages }, (_, i) => i + 1));
function selectAllPages() {
if (!activeFile?.totalPages) return;
activeFile.selectedPages = new Set(Array.from({ length: activeFile.totalPages }, (_, i) => i + 1));
}
function deselectAllPages(entry) {
entry.selectedPages = new Set([1]);
function deselectAllPages() {
if (!activeFile) return;
activeFile.selectedPages = new Set([1]);
}
function pagesLabel(entry) {
@ -354,7 +281,6 @@
}
const plFiles = (n) => pluralize(n, ['файл', 'файла', 'файлов']);
const plCopies = (n) => pluralize(n, ['копия', 'копии', 'копий']);
const plPages = (n) => pluralize(n, ['страница', 'страницы', 'страниц']);
function handlePagesClick(file) {
if (file.fileType === 'pdf') openPageGallery(file);
@ -453,130 +379,45 @@
<span class="summary-price">{totalPrice}</span>
</div>
<button type="button" class="action-btn secondary" onclick={onPrint}>Печать</button>
<!-- Input можно оставить здесь, он скрыт через display:none и не влияет на верстку -->
<input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} style="display:none" />
</footer>
</div>
{/if}
<!-- ═══════════════════════════════════════════════════════════ -->
<!-- УНИВЕРСАЛЬНЫЙ ОВЕРЛЕЙ (Галерея выбора ИЛИ Просмотр) -->
<!-- ДЕЛЕГИРОВАНИЕ В ДОЧЕРНИЕ КОМПОНЕНТЫ -->
<!-- ═══════════════════════════════════════════════════════════ -->
{#if activeFile}
<div class="overlay-backdrop" onclick={closeOverlay} role="dialog" aria-modal="true">
<div class="overlay-window" class:is-preview-mode={viewMode === 'preview'} onclick={(e) => e.stopPropagation()}>
<!-- stopPropagation чтобы клики внутри окна не закрывали его -->
<div class="overlay-window-wrapper" onclick={(e) => e.stopPropagation()}>
<!-- Шапка -->
<div class="overlay-header">
<div class="overlay-header-info">
<h2 class="overlay-title">
{#if viewMode === 'gallery'}Выбор страниц{:else}Просмотр{/if}
</h2>
{#if viewMode === 'gallery' && activeFile.selectedPages}
<span class="overlay-subtitle">
{activeFile.selectedPages.size} из {activeFile.totalPages} {plPages(activeFile.selectedPages.size)}
</span>
{/if}
</div>
<button type="button" class="overlay-close" onclick={closeOverlay} aria-label="Закрыть">✕</button>
</div>
<!-- Панель действий (только для галереи) -->
{#if viewMode === 'gallery'}
<div class="gallery-actions-bar">
<button type="button" class="gallery-quick-btn" class:active-quick={activeFile.selectedPages?.size === activeFile.totalPages} onclick={() => selectAllPages(activeFile)}>Выбрать все</button>
<button type="button" class="gallery-quick-btn" onclick={() => deselectAllPages(activeFile)}>Снять все</button>
</div>
<SelectionPage
file={activeFile}
thumbnails={galleryThumbnails}
loading={galleryLoading}
onTogglePage={togglePageSelection}
onSelectAll={selectAllPages}
onDeselectAll={deselectAllPages}
onClose={closeOverlay}
/>
{:else}
<PreviewPage
file={activeFile}
pagesCache={previewPagesCache}
isRendering={isPreviewRendering}
onRequestPages={handlePreviewRequestPages}
onClose={closeOverlay}
/>
{/if}
<!-- КОНТЕНТ: ГАЛЕРЕЯ (Сетка 3 колонки) -->
{#if viewMode === 'gallery'}
<div class="gallery-grid">
{#if galleryLoading && galleryThumbnails.length === 0}
<div class="gallery-loading"><div class="spinner"></div><span>Загрузка…</span></div>
{/if}
{#each galleryThumbnails as thumb, i}
{@const pageNum = i + 1}
{@const isSelected = activeFile.selectedPages?.has(pageNum)}
<button type="button" class="gallery-thumb" class:selected={isSelected} onclick={() => togglePageSelection(activeFile, pageNum)}>
<div class="thumb-image-wrap">
{#if thumb}
<img src={thumb} alt="Стр. {pageNum}" class="thumb-img" loading="lazy" />
{:else}
<div class="thumb-placeholder">?</div>
{/if}
{#if isSelected}
<div class="thumb-check">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
{/if}
</div>
<span class="thumb-label">{pageNum}</span>
</button>
{/each}
{#if galleryLoading && galleryThumbnails.length > 0}
<div class="gallery-thumb loading-placeholder"><div class="thumb-image-wrap"><div class="thumb-placeholder"><div class="spinner small"></div></div></div></div>
{/if}
</div>
{/if}
<!-- КОНТЕНТ: ПРЕВЬЮ (Вертикальный скролл, одна страница в строке) -->
{#if viewMode === 'preview'}
<!-- passive: true улучшает производительность скролла -->
<div class="preview-scroll-area" bind:this={previewScrollContainer} onscroll={handlePreviewScroll} onscrollcapture={handlePreviewScroll}>
{#if activeFile.fileType === 'image'}
<div class="preview-single-item">
<img src={activeFile.previewUrl} alt={activeFile.file.name} class="preview-full-img" />
</div>
{:else if activeFile.fileType === 'pdf'}
{#each Array(activeFile.totalPages) as _, i}
{@const pageNum = i + 1}
<div class="preview-page-item" data-page={pageNum}>
{#if previewPagesCache[pageNum]}
<img
src={previewPagesCache[pageNum]}
class="preview-page-img"
data-page={pageNum}
alt="Страница {pageNum}"
/>
{:else}
<!-- ВАЖНО: data-page должен быть и на плейсхолдере, чтобы скролл-хендлер мог его найти -->
<div class="preview-page-placeholder" data-page={pageNum}>
<div class="placeholder-content">
{#if pageNum <= 5 || isPreviewRendering}
<div class="spinner"></div>
{:else}
<span class="placeholder-text">Стр. {pageNum}</span>
{/if}
</div>
</div>
{/if}
</div>
{/each}
<div class="preview-end-marker">
Конец документа ({activeFile.totalPages} {plPages(activeFile.totalPages)})
</div>
{:else}
<div class="preview-fallback">Предпросмотр недоступен</div>
{/if}
</div>
{/if}
<!-- Подвал оверлея -->
<div class="overlay-footer">
<button type="button" class="action-btn primary" onclick={closeOverlay}>
{#if viewMode === 'gallery'}Готово{:else}Закрыть{/if}
</button>
</div>
</div>
</div>
{/if}
<style>
/* Стили основного меню остались без изменений */
.page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
.header { padding: 24px 20px 8px; }
.back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 12px; }
@ -623,153 +464,25 @@
.summary-itogo { font-size: 30px; font-weight: 700; color: #8b93a1; }
.summary-price { font-size: 38px; font-weight: 800; color: #fff; }
/* ═══════════════════════════════════════ */
/* ОБЩИЙ ОВЕРЛЕЙ */
/* ═══════════════════════════════════════ */
/* Обертка оверлея */
.overlay-backdrop {
position: fixed; inset: 0; z-index: 1000;
background: rgba(10, 12, 18, 0.92); backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center; padding: 0;
}
.overlay-window {
.overlay-window-wrapper {
width: 100%; height: 100%;
background: #13151b;
display: flex; flex-direction: column;
overflow: hidden;
animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.overlay-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; flex-shrink: 0;
background: rgba(19, 21, 27, 0.95);
border-bottom: 1px solid rgba(255,255,255,0.06);
z-index: 10;
}
.overlay-title { margin: 0; font-size: 18px; font-weight: 700; color: #f5f7fa; }
.overlay-subtitle { font-size: 13px; color: #8b93a1; font-weight: 500; margin-top: 2px; display: block;}
.overlay-close {
width: 36px; height: 36px; border-radius: 50%; border: none;
background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.overlay-footer {
padding: 16px 20px; flex-shrink: 0;
background: rgba(19, 21, 27, 0.95);
border-top: 1px solid rgba(255,255,255,0.06);
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
/* ═══════════════════════════════════════ */
/* РЕЖИМ: ГАЛЕРЕЯ (Выбор страниц) */
/* ═══════════════════════════════════════ */
.gallery-actions-bar { display: flex; gap: 8px; padding: 12px 20px; flex-shrink: 0; }
.gallery-quick-btn {
flex: 1; padding: 10px 12px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05);
color: #c0c5d0; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
}
.gallery-quick-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.gallery-quick-btn.active-quick { background: rgba(99, 102, 241, 0.2); border-color: #6366f1; color: #a5b4fc; }
.gallery-grid {
flex: 1; overflow-y: auto; padding: 12px 16px 20px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
-webkit-overflow-scrolling: touch;
}
.gallery-thumb {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 0; border: none; background: none; cursor: pointer;
}
.thumb-image-wrap {
position: relative; width: 100%; aspect-ratio: 210 / 297;
border-radius: 8px; overflow: hidden;
background: rgba(255, 255, 255, 0.06);
border: 2px solid transparent; transition: all 0.2s ease;
}
.gallery-thumb.selected .thumb-image-wrap { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); }
.gallery-thumb:not(.selected) .thumb-image-wrap { opacity: 0.5; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #555; font-size: 20px; }
.thumb-check {
position: absolute; top: 4px; right: 4px;
width: 20px; height: 20px; border-radius: 50%;
background: #6366f1; display: flex; align-items: center; justify-content: center;
}
.thumb-check svg { width: 12px; height: 12px; color: #fff; }
.thumb-label { font-size: 11px; font-weight: 600; color: #8b93a1; }
.gallery-thumb.selected .thumb-label { color: #a5b4fc; }
.gallery-loading { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 0; color: #8b93a1; }
/* ═══════════════════════════════════════ */
/* РЕЖИМ: ПРЕВЬЮ (Вертикальный скролл) */
/* ═══════════════════════════════════════ */
.preview-scroll-area {
flex: 1; overflow-y: auto; overflow-x: hidden;
background: #0d0f14;
padding: 20px 0;
display: flex; flex-direction: column; align-items: center; gap: 16px;
-webkit-overflow-scrolling: touch;
}
.preview-single-item {
width: 100%; display: flex; justify-content: center; padding: 0 16px; box-sizing: border-box;
}
.preview-full-img {
max-width: 100%; max-height: 80vh; border-radius: 4px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.preview-page-item {
width: 100%; max-width: 600px;
padding: 0 16px; box-sizing: border-box;
flex-shrink: 0;
}
.preview-page-img {
width: 100%; height: auto; display: block;
border-radius: 4px;
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
background: #fff;
}
.preview-page-placeholder {
width: 100%; aspect-ratio: 210 / 297;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
}
.placeholder-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.placeholder-text { color: #444; font-size: 14px; font-weight: 600; }
.preview-end-marker {
padding: 40px 0; color: #555; font-size: 13px; text-align: center;
}
.preview-fallback { padding: 40px; color: #8b93a1; text-align: center; }
.spinner {
width: 32px; height: 32px;
border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: #6366f1;
border-radius: 50%; animation: spin 0.8s linear infinite;
}
.spinner.small { width: 20px; height: 20px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
.overlay-window {
.overlay-window-wrapper {
max-width: 800px; max-height: 90vh;
border-radius: 20px; height: auto;
border: 1px solid rgba(255,255,255,0.1);
background: #13151b; /* Fallback bg for wrapper on desktop */
}
.gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
</style>