fix: switch label for column width/height for vertical layout and fix column size calculation (#520)

* fix: scroll mode should be updated when calculating column size * fix: switch label for column width/height for vertical layout, closes #517
2025-03-07 23:42:40 +08:00
parent 80a3861816
commit de1e396f6e
21 changed files with 82 additions and 60 deletions
@@ -64,8 +64,6 @@
  "Match Case": "مطابقة حالة الأحرف",
  "Match Diacritics": "مطابقة التشكيل",
  "Match Whole Words": "مطابقة الكلمات الكاملة",
-  "Maximum Block Size": "أقصى مساحة رأسية",
-  "Maximum Inline Size": "أقصى مساحة أفقية",
  "Maximum Number of Columns": "العدد الأقصى للأعمدة",
  "Minimum Font Size": "الحد الأدنى لحجم الخط",
  "Misc": "أخرى",
@@ -230,5 +228,8 @@
  "Delete Permanently": "حذف نهائي",
  "Free Tier": "الفئة المجانية",
  "Plus Tier": "فئة Plus",
-  "Pro Tier": "فئة Pro"
+  "Pro Tier": "فئة Pro",
+  "RTL Direction": "الاتجاه من اليمين إلى اليسار",
+  "Maximum Column Height": "الارتفاع الأقصى للعمود",
+  "Maximum Column Width": "العرض الأقصى للعمود"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Groß-/Kleinschreibung beachten",
  "Match Diacritics": "Akzente beachten",
  "Match Whole Words": "Ganze Wörter",
-  "Maximum Block Size": "Maximale Blockgröße",
-  "Maximum Inline Size": "Maximale Zeilengröße",
  "Maximum Number of Columns": "Maximale Spaltenanzahl",
  "Minimum Font Size": "Minimale Schriftgröße",
  "Misc": "Sonstiges",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Dauerhaft löschen",
  "Free Tier": "Kostenlose Stufe",
  "Plus Tier": "Plus-Stufe",
-  "Pro Tier": "Pro-Stufe"
+  "Pro Tier": "Pro-Stufe",
+  "RTL Direction": "RTL-Richtung",
+  "Maximum Column Height": "Maximale Spaltenhöhe",
+  "Maximum Column Width": "Maximale Spaltenbreite"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Ταίριασμα πεζών-κεφαλαίων",
  "Match Diacritics": "Ταίριασμα διακριτικών σημείων",
  "Match Whole Words": "Ταίριασμα ολόκληρων λέξεων",
-  "Maximum Block Size": "Μέγιστο μέγεθος μπλοκ",
-  "Maximum Inline Size": "Μέγιστο μέγεθος γραμμής",
  "Maximum Number of Columns": "Μέγιστος αριθμός στηλών",
  "Minimum Font Size": "Ελάχιστο μέγεθος γραμματοσειράς",
  "Misc": "Διάφορα",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Μόνιμη διαγραφή",
  "Free Tier": "Δωρεάν βαθμίδα",
  "Plus Tier": "Βαθμίδα Plus",
-  "Pro Tier": "Βαθμίδα Pro"
+  "Pro Tier": "Βαθμίδα Pro",
+  "RTL Direction": "Κατεύθυνση RTL",
+  "Maximum Column Height": "Μέγιστο ύψος στήλης",
+  "Maximum Column Width": "Μέγιστο πλάτος στήλης"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Coincidir mayúsculas y minúsculas",
  "Match Diacritics": "Coincidir diacríticos",
  "Match Whole Words": "Coincidir palabras completas",
-  "Maximum Block Size": "Tamaño máximo de bloque",
-  "Maximum Inline Size": "Tamaño máximo en línea",
  "Maximum Number of Columns": "Número máximo de columnas",
  "Minimum Font Size": "Tamaño de fuente mínimo",
  "Misc": "Varios",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Eliminar permanentemente",
  "Free Tier": "Nivel gratuito",
  "Plus Tier": "Nivel Plus",
-  "Pro Tier": "Nivel Pro"
+  "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"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Respecter la casse",
  "Match Diacritics": "Respecter les accents",
  "Match Whole Words": "Mots entiers",
-  "Maximum Block Size": "Taille maximale du bloc",
-  "Maximum Inline Size": "Taille maximale en ligne",
  "Maximum Number of Columns": "Nombre maximal de colonnes",
  "Minimum Font Size": "Taille minimale de police",
  "Misc": "Divers",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Supprimer définitivement",
  "Free Tier": "Niveau gratuit",
  "Plus Tier": "Niveau Plus",
-  "Pro Tier": "Niveau Pro"
+  "Pro Tier": "Niveau Pro",
+  "RTL Direction": "Direction RTL",
+  "Maximum Column Height": "Hauteur maximale de colonne",
+  "Maximum Column Width": "Largeur maximale de colonne"
 }
@@ -64,8 +64,6 @@
  "Match Case": "केस मैच करें",
  "Match Diacritics": "डायाक्रिटिक्स मैच करें",
  "Match Whole Words": "पूरे शब्द मैच करें",
-  "Maximum Block Size": "अधिकतम ब्लॉक साइज़",
-  "Maximum Inline Size": "अधिकतम इनलाइन साइज़",
  "Maximum Number of Columns": "कॉलम की अधिकतम संख्या",
  "Minimum Font Size": "न्यूनतम फ़ॉन्ट साइज़",
  "Misc": "विविध",
@@ -230,5 +228,8 @@
  "Delete Permanently": "स्थायी रूप से हटाएं",
  "Free Tier": "फ्री टियर",
  "Plus Tier": "प्लस टियर",
-  "Pro Tier": "प्रो टियर"
+  "Pro Tier": "प्रो टियर",
+  "RTL Direction": "RTL दिशा",
+  "Maximum Column Height": "कॉलम की अधिकतम ऊँचाई",
+  "Maximum Column Width": "कॉलम की अधिकतम चौड़ाई"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Cocokkan Huruf Besar/Kecil",
  "Match Diacritics": "Cocokkan Diakritik",
  "Match Whole Words": "Cocokkan Kata Utuh",
-  "Maximum Block Size": "Ukuran Blok Maksimum",
-  "Maximum Inline Size": "Ukuran Sebaris Maksimum",
  "Maximum Number of Columns": "Jumlah Kolom Maksimum",
  "Minimum Font Size": "Ukuran Font Minimum",
  "Misc": "Lain-lain",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Hapus Secara Permanen",
  "Free Tier": "Tingkat Gratis",
  "Plus Tier": "Tingkat Plus",
-  "Pro Tier": "Tingkat Pro"
+  "Pro Tier": "Tingkat Pro",
+  "RTL Direction": "Arah RTL",
+  "Maximum Column Height": "Tinggi Kolom Maksimum",
+  "Maximum Column Width": "Lebar Kolom Maksimum"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Maiuscole/minuscole",
  "Match Diacritics": "Corrispondenza diacritici",
  "Match Whole Words": "Parole intere",
-  "Maximum Block Size": "Dimensione massima blocco",
-  "Maximum Inline Size": "Dimensione massima in linea",
  "Maximum Number of Columns": "Numero massimo di colonne",
  "Minimum Font Size": "Dimensione minima font",
  "Misc": "Varie",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Elimina definitivamente",
  "Free Tier": "Piano gratuito",
  "Plus Tier": "Piano Plus",
-  "Pro Tier": "Piano Pro"
+  "Pro Tier": "Piano Pro",
+  "RTL Direction": "Direzione RTL",
+  "Maximum Column Height": "Altezza massima colonna",
+  "Maximum Column Width": "Larghezza massima colonna"
 }
@@ -64,8 +64,6 @@
  "Match Case": "大文字・小文字を区別",
  "Match Diacritics": "アクセント記号を区別",
  "Match Whole Words": "単語全体を一致",
-  "Maximum Block Size": "最大ブロックサイズ",
-  "Maximum Inline Size": "最大インラインサイズ",
  "Maximum Number of Columns": "最大列数",
  "Minimum Font Size": "最小フォントサイズ",
  "Misc": "その他",
@@ -230,5 +228,8 @@
  "Delete Permanently": "完全に削除",
  "Free Tier": "無料プラン",
  "Plus Tier": "Plusプラン",
-  "Pro Tier": "Proプラン"
+  "Pro Tier": "Proプラン",
+  "RTL Direction": "RTL方向",
+  "Maximum Column Height": "最大列高",
+  "Maximum Column Width": "最大列幅"
 }
@@ -64,8 +64,6 @@
  "Match Case": "대소문자 구분",
  "Match Diacritics": "발음 구별 부호 구분",
  "Match Whole Words": "전체 단어 일치",
-  "Maximum Block Size": "최대 블록 크기",
-  "Maximum Inline Size": "최대 인라인 크기",
  "Maximum Number of Columns": "최대 열 수",
  "Minimum Font Size": "최소 글꼴 크기",
  "Misc": "기타",
@@ -230,5 +228,8 @@
  "Delete Permanently": "영구 삭제",
  "Free Tier": "무료 등급",
  "Plus Tier": "플러스 등급",
-  "Pro Tier": "프로 등급"
+  "Pro Tier": "프로 등급",
+  "RTL Direction": "RTL 방향",
+  "Maximum Column Height": "최대 열 높이",
+  "Maximum Column Width": "최대 열 너비"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Uwzględnij wielkość liter",
  "Match Diacritics": "Uwzględnij znaki diakrytyczne",
  "Match Whole Words": "Uwzględnij całe słowa",
-  "Maximum Block Size": "Maksymalny rozmiar bloku",
-  "Maximum Inline Size": "Maksymalny rozmiar linii",
  "Maximum Number of Columns": "Maksymalna liczba kolumn",
  "Minimum Font Size": "Minimalny rozmiar czcionki",
  "Misc": "Różne",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Usuń trwale",
  "Free Tier": "Plan darmowy",
  "Plus Tier": "Plan Plus",
-  "Pro Tier": "Plan Pro"
+  "Pro Tier": "Plan Pro",
+  "RTL Direction": "Kierunek RTL",
+  "Maximum Column Height": "Maksymalna wysokość kolumny",
+  "Maximum Column Width": "Maksymalna szerokość kolumny"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Diferenciar Maiúsculas e Minúsculas",
  "Match Diacritics": "Corresponder Acentos",
  "Match Whole Words": "Corresponder Palavras Inteiras",
-  "Maximum Block Size": "Tamanho Máximo do Bloco",
-  "Maximum Inline Size": "Tamanho Máximo em Linha",
  "Maximum Number of Columns": "Número Máximo de Colunas",
  "Minimum Font Size": "Tamanho Mínimo da Fonte",
  "Misc": "Diversos",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Excluir permanentemente",
  "Free Tier": "Plano gratuito",
  "Plus Tier": "Plano Plus",
-  "Pro Tier": "Plano Pro"
+  "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"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Учитывать регистр",
  "Match Diacritics": "Учитывать диакритические знаки",
  "Match Whole Words": "Только целые слова",
-  "Maximum Block Size": "Максимальный размер блока",
-  "Maximum Inline Size": "Максимальный размер строки",
  "Maximum Number of Columns": "Максимальное количество колонок",
  "Minimum Font Size": "Минимальный размер шрифта",
  "Misc": "Разное",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Удалить навсегда",
  "Free Tier": "Бесплатный тариф",
  "Plus Tier": "Тариф Plus",
-  "Pro Tier": "Тариф Pro"
+  "Pro Tier": "Тариф Pro",
+  "RTL Direction": "Направление RTL",
+  "Maximum Column Height": "Максимальная высота колонки",
+  "Maximum Column Width": "Максимальная ширина колонки"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Büyük/Küçük Harf Eşleştir",
  "Match Diacritics": "Aksan İşaretlerini Eşleştir",
  "Match Whole Words": "Tam Kelimeleri Eşleştir",
-  "Maximum Block Size": "Maksimum Blok Boyutu",
-  "Maximum Inline Size": "Maksimum Satır İçi Boyut",
  "Maximum Number of Columns": "Maksimum Sütun Sayısı",
  "Minimum Font Size": "Minimum Yazı Boyutu",
  "Misc": "Diğer",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Kalıcı Olarak Sil",
  "Free Tier": "Ücretsiz Paket",
  "Plus Tier": "Plus Paket",
-  "Pro Tier": "Pro Paket"
+  "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"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Враховувати регістр",
  "Match Diacritics": "Враховувати діакритичні знаки",
  "Match Whole Words": "Шукати цілі слова",
-  "Maximum Block Size": "Максимальний розмір блоку",
-  "Maximum Inline Size": "Максимальний розмір рядка",
  "Maximum Number of Columns": "Максимальна кількість колонок",
  "Minimum Font Size": "Мінімальний розмір шрифту",
  "Misc": "Різне",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Видалити назавжди",
  "Free Tier": "Безкоштовний тариф",
  "Plus Tier": "Тариф Plus",
-  "Pro Tier": "Тариф Pro"
+  "Pro Tier": "Тариф Pro",
+  "RTL Direction": "Напрямок RTL",
+  "Maximum Column Height": "Максимальна висота колонки",
+  "Maximum Column Width": "Максимальна ширина колонки"
 }
@@ -64,8 +64,6 @@
  "Match Case": "Phân biệt chữ hoa/thường",
  "Match Diacritics": "Phân biệt dấu",
  "Match Whole Words": "Khớp toàn bộ từ",
-  "Maximum Block Size": "Kích thước khối tối đa",
-  "Maximum Inline Size": "Kích thước nội tuyến tối đa",
  "Maximum Number of Columns": "Số cột tối đa",
  "Minimum Font Size": "Cỡ chữ tối thiểu",
  "Misc": "Khác",
@@ -230,5 +228,8 @@
  "Delete Permanently": "Xóa vĩnh viễn",
  "Free Tier": "Gói miễn phí",
  "Plus Tier": "Gói Plus",
-  "Pro Tier": "Gói Pro"
+  "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"
 }
@@ -64,8 +64,6 @@
  "Match Case": "匹配大小写",
  "Match Diacritics": "匹配重音符号",
  "Match Whole Words": "匹配整个单词",
-  "Maximum Block Size": "内容最大高度",
-  "Maximum Inline Size": "每栏最大宽度",
  "Maximum Number of Columns": "分栏数",
  "Minimum Font Size": "最小字号",
  "Misc": "杂项",
@@ -230,5 +228,8 @@
  "Delete Permanently": "永久删除",
  "Free Tier": "免费版",
  "Plus Tier": "增强版",
-  "Pro Tier": "专业版"
+  "Pro Tier": "专业版",
+  "RTL Direction": "从右向左",
+  "Maximum Column Height": "最大列高",
+  "Maximum Column Width": "最大列宽"
 }
@@ -64,8 +64,6 @@
  "Match Case": "匹配大小寫",
  "Match Diacritics": "匹配重音符號",
  "Match Whole Words": "匹配整個單詞",
-  "Maximum Block Size": "內容最大高度",
-  "Maximum Inline Size": "每欄最大寬度",
  "Maximum Number of Columns": "分欄數",
  "Minimum Font Size": "最小字號",
  "Misc": "雜項",
@@ -230,5 +228,8 @@
  "Delete Permanently": "永久刪除",
  "Free Tier": "免費方案",
  "Plus Tier": "Plus方案",
-  "Pro Tier": "專業方案"
+  "Pro Tier": "專業方案",
+  "RTL Direction": "從右向左",
+  "Maximum Column Height": "最大列高",
+  "Maximum Column Width": "最大列寬"
 }
@@ -58,13 +58,13 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
  }, [themeCode]);

  useEffect(() => {
+    viewSettings!.scrolled = isScrolledMode;
    getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
    getView(bookKey)?.renderer.setAttribute(
      'max-inline-size',
      `${getMaxInlineSize(viewSettings)}px`,
    );
    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
-    viewSettings!.scrolled = isScrolledMode;
    setViewSettings(bookKey, viewSettings!);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isScrolledMode]);
@@ -358,19 +358,20 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              max={4}
            />
            <NumberInput
-              label={_('Maximum Inline Size')}
+              label={viewSettings.vertical ? _('Maximum Column Height') : _('Maximum Column Width')}
              value={maxInlineSize}
              onChange={setMaxInlineSize}
              disabled={maxColumnCount === 1 || viewSettings.scrolled}
-              min={500}
+              min={400}
              max={9999}
              step={100}
            />
            <NumberInput
-              label={_('Maximum Block Size')}
+              label={viewSettings.vertical ? _('Maximum Column Width') : _('Maximum Column Height')}
              value={maxBlockSize}
              onChange={setMaxBlockSize}
-              min={500}
+              disabled={maxColumnCount === 1 || viewSettings.scrolled}
+              min={400}
              max={9999}
              step={100}
            />
@@ -4,8 +4,11 @@ export const getMaxInlineSize = (viewSettings: ViewSettings) => {
  const isScrolled = viewSettings.scrolled!;
  const maxColumnCount = viewSettings.maxColumnCount!;
  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;

-  return maxColumnCount === 1 || isScrolled ? screenWidth : viewSettings.maxInlineSize!;
+  return maxColumnCount === 1 || isScrolled
+    ? Math.max(screenWidth, screenHeight, 720)
+    : viewSettings.maxInlineSize!;
 };

 export const getDefaultMaxInlineSize = () => {