fix: make continuous scroll an option and disabled by default, closes #516, #373 (#522)

2025-03-08 00:24:01 +08:00
parent de1e396f6e
commit c25f2a7abc
22 changed files with 61 additions and 20 deletions
@@ -231,5 +231,6 @@
  "Pro Tier": "فئة Pro",
  "RTL Direction": "الاتجاه من اليمين إلى اليسار",
  "Maximum Column Height": "الارتفاع الأقصى للعمود",
-  "Maximum Column Width": "العرض الأقصى للعمود"
+  "Maximum Column Width": "العرض الأقصى للعمود",
+  "Continuous Scroll": "التمرير المستمر"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Pro-Stufe",
  "RTL Direction": "RTL-Richtung",
  "Maximum Column Height": "Maximale Spaltenhöhe",
-  "Maximum Column Width": "Maximale Spaltenbreite"
+  "Maximum Column Width": "Maximale Spaltenbreite",
+  "Continuous Scroll": "Kontinuierliches Scrollen"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Βαθμίδα Pro",
  "RTL Direction": "Κατεύθυνση RTL",
  "Maximum Column Height": "Μέγιστο ύψος στήλης",
-  "Maximum Column Width": "Μέγιστο πλάτος στήλης"
+  "Maximum Column Width": "Μέγιστο πλάτος στήλης",
+  "Continuous Scroll": "Συνεχής κύλιση"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Nivel Pro",
  "RTL Direction": "Dirección RTL",
  "Maximum Column Height": "Altura máxima de columna",
-  "Maximum Column Width": "Ancho máximo de columna"
+  "Maximum Column Width": "Ancho máximo de columna",
+  "Continuous Scroll": "Desplazamiento continuo"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Niveau Pro",
  "RTL Direction": "Direction RTL",
  "Maximum Column Height": "Hauteur maximale de colonne",
-  "Maximum Column Width": "Largeur maximale de colonne"
+  "Maximum Column Width": "Largeur maximale de colonne",
+  "Continuous Scroll": "Défilement continu"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "प्रो टियर",
  "RTL Direction": "RTL दिशा",
  "Maximum Column Height": "कॉलम की अधिकतम ऊँचाई",
-  "Maximum Column Width": "कॉलम की अधिकतम चौड़ाई"
+  "Maximum Column Width": "कॉलम की अधिकतम चौड़ाई",
+  "Continuous Scroll": "निरंतर स्क्रॉल"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Tingkat Pro",
  "RTL Direction": "Arah RTL",
  "Maximum Column Height": "Tinggi Kolom Maksimum",
-  "Maximum Column Width": "Lebar Kolom Maksimum"
+  "Maximum Column Width": "Lebar Kolom Maksimum",
+  "Continuous Scroll": "Gulir Terus"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Piano Pro",
  "RTL Direction": "Direzione RTL",
  "Maximum Column Height": "Altezza massima colonna",
-  "Maximum Column Width": "Larghezza massima colonna"
+  "Maximum Column Width": "Larghezza massima colonna",
+  "Continuous Scroll": "Scorrimento continuo"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Proプラン",
  "RTL Direction": "RTL方向",
  "Maximum Column Height": "最大列高",
-  "Maximum Column Width": "最大列幅"
+  "Maximum Column Width": "最大列幅",
+  "Continuous Scroll": "連続スクロール"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "프로 등급",
  "RTL Direction": "RTL 방향",
  "Maximum Column Height": "최대 열 높이",
-  "Maximum Column Width": "최대 열 너비"
+  "Maximum Column Width": "최대 열 너비",
+  "Continuous Scroll": "연속 스크롤"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Plan Pro",
  "RTL Direction": "Kierunek RTL",
  "Maximum Column Height": "Maksymalna wysokość kolumny",
-  "Maximum Column Width": "Maksymalna szerokość kolumny"
+  "Maximum Column Width": "Maksymalna szerokość kolumny",
+  "Continuous Scroll": "Przewijanie ciągłe"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Plano Pro",
  "RTL Direction": "Direção RTL",
  "Maximum Column Height": "Altura Máxima da Coluna",
-  "Maximum Column Width": "Largura Máxima da Coluna"
+  "Maximum Column Width": "Largura Máxima da Coluna",
+  "Continuous Scroll": "Rolagem Contínua"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Тариф Pro",
  "RTL Direction": "Направление RTL",
  "Maximum Column Height": "Максимальная высота колонки",
-  "Maximum Column Width": "Максимальная ширина колонки"
+  "Maximum Column Width": "Максимальная ширина колонки",
+  "Continuous Scroll": "Непрерывная прокрутка"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Pro Paket",
  "RTL Direction": "RTL Yönü",
  "Maximum Column Height": "Maksimum Sütun Yüksekliği",
-  "Maximum Column Width": "Maksimum Sütun Genişliği"
+  "Maximum Column Width": "Maksimum Sütun Genişliği",
+  "Continuous Scroll": "Sürekli Kaydırma"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Тариф Pro",
  "RTL Direction": "Напрямок RTL",
  "Maximum Column Height": "Максимальна висота колонки",
-  "Maximum Column Width": "Максимальна ширина колонки"
+  "Maximum Column Width": "Максимальна ширина колонки",
+  "Continuous Scroll": "Постійна прокрутка"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "Gói Pro",
  "RTL Direction": "Hướng RTL",
  "Maximum Column Height": "Chiều cao cột tối đa",
-  "Maximum Column Width": "Chiều rộng cột tối đa"
+  "Maximum Column Width": "Chiều rộng cột tối đa",
+  "Continuous Scroll": "Cuộn liên tục"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "专业版",
  "RTL Direction": "从右向左",
  "Maximum Column Height": "最大列高",
-  "Maximum Column Width": "最大列宽"
+  "Maximum Column Width": "最大列宽",
+  "Continuous Scroll": "连续滚动"
 }
@@ -231,5 +231,6 @@
  "Pro Tier": "專業方案",
  "RTL Direction": "從右向左",
  "Maximum Column Height": "最大列高",
-  "Maximum Column Width": "最大列寬"
+  "Maximum Column Width": "最大列寬",
+  "Continuous Scroll": "連續滾動"
 }
@@ -91,7 +91,8 @@ const FoliateViewer: React.FC<{

    if (detail.reason === 'scroll') {
      const renderer = viewRef.current?.renderer;
-      if (renderer) {
+      const viewSettings = getViewSettings(bookKey)!;
+      if (renderer && viewSettings.continuousScroll) {
        if (renderer.start <= 0) {
          viewRef.current?.prev(1);
          // sometimes viewSize has subpixel value that the end never reaches
@@ -17,6 +17,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {

  const [animated, setAnimated] = useState(viewSettings.animated!);
  const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
+  const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
  const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
  const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
  const [error, setError] = useState<string | null>(null);
@@ -92,6 +93,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDisableClick]);

+  useEffect(() => {
+    viewSettings.continuousScroll = isContinuousScroll;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.continuousScroll = isContinuousScroll;
+      setSettings(settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isContinuousScroll]);
+
  return (
    <div className='my-4 w-full space-y-6'>
      <div className='w-full'>
@@ -115,7 +126,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
        <div className='card border-base-200 bg-base-100 border shadow'>
          <div className='divide-y'>
-            <div className='config-item config-item-top config-item-bottom'>
+            <div className='config-item config-item-top'>
+              <span className=''>{_('Continuous Scroll')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isContinuousScroll}
+                onChange={() => setIsContinuousScroll(!isContinuousScroll)}
+              />
+            </div>
+            <div className='config-item config-item-bottom'>
              <span className=''>{_('Disable Click-to-Flip')}</span>
              <input
                type='checkbox'
@@ -62,6 +62,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
  gapPercent: 5,
  scrolled: false,
  disableClick: false,
+  continuousScroll: false,
  maxColumnCount: 2,
  maxInlineSize: getDefaultMaxInlineSize(),
  maxBlockSize: getDefaultMaxBlockSize(),
@@ -60,6 +60,7 @@ export interface BookLayout {
  gapPercent: number;
  scrolled: boolean;
  disableClick: boolean;
+  continuousScroll: boolean;
  maxColumnCount: number;
  maxInlineSize: number;
  maxBlockSize: number;