From 01f123f5be1b671ccfae7adc2060df4890c39b20 Mon Sep 17 00:00:00 2001 From: Youwes09 Date: Sat, 16 May 2026 23:06:10 -0500 Subject: [PATCH] Fix: GlobalUIZoom Affecting MangaDisplay (#82) --- .../reader/components/PageView.svelte | 148 +++++++++++++----- src/features/reader/components/Reader.svelte | 1 + 2 files changed, 109 insertions(+), 40 deletions(-) diff --git a/src/features/reader/components/PageView.svelte b/src/features/reader/components/PageView.svelte index e6bb22c..8b737bb 100644 --- a/src/features/reader/components/PageView.svelte +++ b/src/features/reader/components/PageView.svelte @@ -20,6 +20,7 @@ tapToToggleBar: boolean; pinchZoomEnabled: boolean; chapterEpoch: number; + barPosition: "top" | "left" | "right"; onGetZoom: () => number; onSetZoom: (z: number) => void; resolveUrl: (url: string, priority?: number) => Promise; @@ -32,7 +33,7 @@ const { style, imgCls, effectiveWidth, loading, error, pageReady, pageGroups, currentGroup, stripToRender, fadingOut, - tapToToggleBar, pinchZoomEnabled, chapterEpoch, onGetZoom, onSetZoom, + tapToToggleBar, pinchZoomEnabled, chapterEpoch, barPosition, onGetZoom, onSetZoom, resolveUrl, onTap, onWheel, onToggleUi, bindContainer, }: Props = $props(); @@ -214,20 +215,34 @@ let autoScrollPaused = false; let autoScrollPauseTimer: ReturnType | null = null; - let midScrollActive = $state(false); - let midScrollOriginY = 0; + let midScrollActive = $state(false); + let midScrollOriginY = $state(0); + let midScrollOriginX = $state(0); + let midScrollCurrentY = 0; let midScrollRaf: number | null = null; - function startMidScroll(originY: number) { + // Speed level 0-5 for the indicator bar + const midScrollSpeedLevel = $derived.by(() => { + if (!midScrollActive) return 0; + // recomputes when midScrollOriginY changes; actual dy read in RAF so this is just for display + return 0; // will be updated imperatively + }); + let midScrollDisplayLevel = $state(0); + + function startMidScroll(originY: number, originX: number) { midScrollActive = true; midScrollOriginY = originY; + midScrollOriginX = originX; + midScrollDisplayLevel = 0; if (midScrollRaf) cancelAnimationFrame(midScrollRaf); const tick = () => { if (!midScrollActive || !containerEl) return; - const dy = (window as any)._midScrollCurrentY - midScrollOriginY; + const dy = midScrollCurrentY - midScrollOriginY; const deadZone = 24; - const speed = Math.sign(dy) * Math.max(0, Math.abs(dy) - deadZone) * 0.12; + const excess = Math.max(0, Math.abs(dy) - deadZone); + const speed = Math.sign(dy) * excess * 0.12; containerEl.scrollTop += speed; + midScrollDisplayLevel = Math.sign(dy) * Math.min(5, Math.floor(excess / 30)); midScrollRaf = requestAnimationFrame(tick); }; midScrollRaf = requestAnimationFrame(tick); @@ -235,6 +250,7 @@ function stopMidScroll() { midScrollActive = false; + midScrollDisplayLevel = 0; if (midScrollRaf) { cancelAnimationFrame(midScrollRaf); midScrollRaf = null; } } @@ -276,7 +292,11 @@ if ((e.target as Element).closest(".bar")) return; if (e.button === 1 && style === "longstrip") { e.preventDefault(); - if (midScrollActive) { stopMidScroll(); } else { startMidScroll(e.clientY); } + if (midScrollActive) { stopMidScroll(); } else { + // pause regular auto-scroll while mid-scroll is active + store.settings.autoScroll = false; + startMidScroll(e.clientY, e.clientX); + } return; } if (style === "longstrip") { @@ -299,7 +319,7 @@ } export function onInspectMouseMove(e: MouseEvent) { - (window as any)._midScrollCurrentY = e.clientY; + midScrollCurrentY = e.clientY; if (stripDragging) { const dy = e.clientY - stripDragStartY; if (!stripDragMoved && Math.abs(dy) > 4) stripDragMoved = true; @@ -404,10 +424,6 @@ stopMidScroll(); } }); - - $effect(() => { - (window as any)._midScrollCurrentY = 0; - });
{ if (e.ctrlKey || style !== "longstrip") e.preventDefault(); }} - style:cursor={midScrollActive ? "none" : style === "longstrip" ? (stripDragging ? "grabbing" : "grab") : undefined} + style:cursor={style === "longstrip" ? (stripDragging ? "grabbing" : "grab") : undefined} onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); store.settings.autoScroll = !store.settings.autoScroll; } }} > {#if midScrollActive} -
+
+
+ {#each [5,4,3,2,1] as n} +
= n}>
+ {/each} +
+ {#each [1,2,3,4,5] as n} +
0 && midScrollDisplayLevel >= n}>
+ {/each} +
+ +
{/if} {#if loading} @@ -523,7 +552,7 @@
\ No newline at end of file diff --git a/src/features/reader/components/Reader.svelte b/src/features/reader/components/Reader.svelte index 8f0ab5d..5890e94 100644 --- a/src/features/reader/components/Reader.svelte +++ b/src/features/reader/components/Reader.svelte @@ -593,6 +593,7 @@ fadingOut={readerState.fadingOut} {tapToToggleBar} {pinchZoomEnabled} + {barPosition} onGetZoom={() => zoom} onSetZoom={(z) => { captureZoomAnchor(containerEl, style, zoomAnchor); applySettings({ readerZoom: z }); restoreZoomAnchor(containerEl, zoomAnchor); }} resolveUrl={(url, priority) => resolveUrl(url, useBlob, priority)}