fix(web): зум в просмотре — контейнер прокрутки и центрирование

Прокручиваемый контейнер просмотра не имел min-w-0, поэтому в зуме он
раздувался до ширины картинки вместо того, чтобы прокручиваться: фото
нельзя было двигать влево-вправо. Та же правка применена к обёрткам просмотра.

Пробел теперь зумит к центру фото: 100% от оригинала с центрированием
изображения в просмотре.
This commit is contained in:
iu
2026-10-21 00:41:08 +03:00
parent b2a509fc38
commit f8ee93777d
+7 -8
View File
@@ -423,15 +423,14 @@
scheduleViewport(); scheduleViewport();
return; return;
} }
// 100% от оригинала. // 100% от оригинала, по центру фото.
zoomed = true; zoomed = true;
scale = 1; scale = 1;
tick().then(() => { tick().then(() => {
const natW = baseWidth(); const natW = baseWidth();
const natH = baseHeight(); const natH = baseHeight();
const offset = imageOffset(natW, natH); el.scrollLeft = Math.max(0, (natW - el.clientWidth) / 2);
el.scrollLeft = offset.x; el.scrollTop = Math.max(0, (natH - el.clientHeight) / 2);
el.scrollTop = offset.y;
scheduleViewport(); scheduleViewport();
}); });
} }
@@ -625,7 +624,7 @@
<div <div
bind:this={viewerEl} bind:this={viewerEl}
class="bg-canvas relative flex h-full flex-col overflow-hidden" class="bg-canvas relative flex h-full min-w-0 flex-col overflow-hidden"
data-pano={panoTag ? '1' : '0'} data-pano={panoTag ? '1' : '0'}
> >
<div bind:this={topEl} class={topClass}> <div bind:this={topEl} class={topClass}>
@@ -654,7 +653,7 @@
</div> </div>
</div> </div>
<div class="relative flex min-h-0 flex-1 items-stretch"> <div class="relative flex min-h-0 min-w-0 flex-1 items-stretch">
<button <button
type="button" type="button"
class={leftBtnClass} class={leftBtnClass}
@@ -716,10 +715,10 @@
{/if} {/if}
</div> </div>
{:else} {:else}
<div class="relative flex min-h-0 flex-1"> <div class="relative flex min-h-0 min-w-0 flex-1">
<div <div
bind:this={scroller} bind:this={scroller}
class="bg-canvas flex min-h-0 flex-1 overscroll-contain {zoomed class="bg-canvas flex min-h-0 min-w-0 flex-1 overscroll-contain {zoomed
? 'cursor-grab overflow-auto' ? 'cursor-grab overflow-auto'
: 'overflow-hidden'}" : 'overflow-hidden'}"
role="group" role="group"