fix(web): зум в просмотре — контейнер прокрутки и центрирование
Прокручиваемый контейнер просмотра не имел min-w-0, поэтому в зуме он раздувался до ширины картинки вместо того, чтобы прокручиваться: фото нельзя было двигать влево-вправо. Та же правка применена к обёрткам просмотра. Пробел теперь зумит к центру фото: 100% от оригинала с центрированием изображения в просмотре.
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user