From 6ca96be9173e0b1e10bb7972d74b05ab94b592fb Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Tue, 4 Feb 2025 23:03:20 +0100 Subject: [PATCH] fix: swap paging keys when writing direction is set in config (#295) --- .../src/app/reader/components/FoliateViewer.tsx | 6 ++++++ .../app/reader/components/settings/FontPanel.tsx | 3 ++- .../app/reader/components/settings/LayoutPanel.tsx | 7 +++++-- apps/readest-app/src/libs/document.ts | 1 + apps/readest-app/src/types/book.ts | 4 +++- apps/readest-app/src/types/view.ts | 1 + apps/readest-app/src/utils/book.ts | 14 +++++++++++++- 7 files changed, 31 insertions(+), 5 deletions(-) diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index 7d53b7ec..4dcb8ff9 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -9,6 +9,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents'; import { useProgressSync } from '../hooks/useProgressSync'; import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar'; import { getStyles, mountAdditionalFonts } from '@/utils/style'; +import { getBookDirFromWritingMode } from '@/utils/book'; import { useTheme } from '@/hooks/useTheme'; import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; import { @@ -141,6 +142,11 @@ const FoliateViewer: React.FC<{ const viewSettings = getViewSettings(bookKey)!; view.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + const writingMode = viewSettings.writingMode; + if (writingMode) { + view.book.dir = getBookDirFromWritingMode(writingMode); + } + const isScrolled = viewSettings.scrolled!; const marginPx = viewSettings.marginPx!; const gapPercent = viewSettings.gapPercent!; diff --git a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx index bfc4ae2c..6edd7901 100644 --- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx @@ -20,6 +20,7 @@ import { useTheme } from '@/hooks/useTheme'; import { getStyles } from '@/utils/style'; import { getOSPlatform } from '@/utils/misc'; import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font'; +import { isTauriAppPlatform } from '@/services/environment'; interface FontFaceProps { className?: string; @@ -98,7 +99,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!); useEffect(() => { - if (FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) { + if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) { getSysFontsList().then((fonts) => { setSysFonts(fonts); }); diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index c2a18ecb..3100151a 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -9,7 +9,7 @@ import { useBookDataStore } from '@/store/bookDataStore'; import { useTranslation } from '@/hooks/useTranslation'; import { useTheme } from '@/hooks/useTheme'; import { getStyles } from '@/utils/style'; -import { getBookLangCode } from '@/utils/book'; +import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book'; import NumberInput from './NumberInput'; const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { @@ -134,7 +134,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { // global settings are not supported for writing mode viewSettings.writingMode = writingMode; setViewSettings(bookKey, viewSettings); - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + if (view) { + view.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view.book.dir = getBookDirFromWritingMode(writingMode); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [writingMode]); diff --git a/apps/readest-app/src/libs/document.ts b/apps/readest-app/src/libs/document.ts index f87725fa..a8d0d990 100644 --- a/apps/readest-app/src/libs/document.ts +++ b/apps/readest-app/src/libs/document.ts @@ -63,6 +63,7 @@ export interface BookDoc { subject?: string[]; identifier?: string; }; + dir: string; toc?: Array; sections?: Array; splitTOCHref(href: string): Array; diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts index 1f7a004d..e8532ede 100644 --- a/apps/readest-app/src/types/book.ts +++ b/apps/readest-app/src/types/book.ts @@ -46,6 +46,8 @@ export interface BookNote { deletedAt?: number | null; } +export type WritingMode = 'auto' | 'horizontal-tb' | 'horizontal-rl' | 'vertical-rl'; + export interface BookLayout { marginPx: number; gapPercent: number; @@ -55,7 +57,7 @@ export interface BookLayout { maxInlineSize: number; maxBlockSize: number; animated: boolean; - writingMode: string; + writingMode: WritingMode; vertical: boolean; } diff --git a/apps/readest-app/src/types/view.ts b/apps/readest-app/src/types/view.ts index 2f76443e..01226636 100644 --- a/apps/readest-app/src/types/view.ts +++ b/apps/readest-app/src/types/view.ts @@ -21,6 +21,7 @@ export interface FoliateView extends HTMLElement { select: (target: string | number | { fraction: number }) => void; deselect: () => void; initTTS: (granularity?: TTSGranularity) => Promise; + book: BookDoc; tts: TTS | null; language: { locale?: string; diff --git a/apps/readest-app/src/utils/book.ts b/apps/readest-app/src/utils/book.ts index 4cf67e57..84b4f641 100644 --- a/apps/readest-app/src/utils/book.ts +++ b/apps/readest-app/src/utils/book.ts @@ -1,5 +1,5 @@ import { EXTS } from '@/libs/document'; -import { Book, BookConfig, BookProgress } from '@/types/book'; +import { Book, BookConfig, BookProgress, WritingMode } from '@/types/book'; import { getUserLang, makeSafeFilename } from './misc'; export const getDir = (book: Book) => { @@ -119,3 +119,15 @@ export const getCurrentPage = (book: Book, progress: BookProgress) => { ? pageinfo.current + 1 : 0; }; + +export const getBookDirFromWritingMode = (writingMode: WritingMode) => { + switch (writingMode) { + case 'horizontal-tb': + return 'ltr'; + case 'horizontal-rl': + case 'vertical-rl': + return 'rtl'; + default: + return 'auto'; + } +};