From f570eeb3deb6d770a54df2d4fdc93ba6f9e919aa Mon Sep 17 00:00:00 2001 From: chrox Date: Fri, 8 Nov 2024 09:12:44 +0100 Subject: [PATCH] Set maximum column width in one-column layout --- .../app/reader/components/FoliateViewer.tsx | 4 ++- .../reader/components/settings/FontPanel.tsx | 15 +++++------ .../components/settings/LayoutPanel.tsx | 25 +++++++++++++------ apps/readest-app/src/services/constants.ts | 2 ++ 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index b64af81d..76c6d578 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -4,6 +4,7 @@ import { BookDoc } from '@/libs/document'; import { BookConfig, BookNote } from '@/types/book'; import { useReaderStore } from '@/store/readerStore'; import { getStyles } from '@/utils/style'; +import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; export interface FoliateView extends HTMLElement { open: (book: BookDoc) => Promise; @@ -121,7 +122,8 @@ const FoliateViewer: React.FC<{ const gapPercent = viewSettings.gapPercent!; const animated = viewSettings.animated!; const maxColumnCount = viewSettings.maxColumnCount!; - const maxInlineSize = viewSettings.maxInlineSize!; + const maxInlineSize = + maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : viewSettings.maxInlineSize!; const maxBlockSize = viewSettings.maxBlockSize!; if (animated) { view.renderer.setAttribute('animated', ''); 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 b3b3213e..a86e6246 100644 --- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx @@ -40,6 +40,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const { isFontLayoutSettingsGlobal } = useReaderStore(); const bookState = books[bookKey]!; const config = bookState.config!; + const view = getFoliateView(bookKey); const [defaultFontSize, setDefaultFontSize] = useState(config.viewSettings!.defaultFontSize!); const [minFontSize, setMinFontSize] = useState(config.viewSettings!.minimumFontSize!); @@ -56,7 +57,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.defaultFont = defaultFont; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [defaultFont]); useEffect(() => { @@ -66,7 +67,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.defaultFontSize = defaultFontSize; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [defaultFontSize]); useEffect(() => { @@ -76,7 +77,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.minimumFontSize = minFontSize; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [minFontSize]); useEffect(() => { @@ -86,7 +87,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.serifFont = serifFont; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [serifFont]); useEffect(() => { @@ -96,7 +97,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.sansSerifFont = sansSerifFont; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [sansSerifFont]); useEffect(() => { @@ -106,7 +107,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.monospaceFont = monospaceFont; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [monospaceFont]); useEffect(() => { @@ -116,7 +117,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.overrideFont = overrideFont; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [overrideFont]); const handleFontFamilyFont = (option: string) => { 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 e0ecfd7b..782c93a4 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -1,13 +1,15 @@ import React, { useEffect, useState } from 'react'; -import NumberInput from './NumberInput'; import { useReaderStore } from '@/store/readerStore'; import { getStyles } from '@/utils/style'; +import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; +import NumberInput from './NumberInput'; const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const { books, settings, setSettings, setConfig, getFoliateView } = useReaderStore(); const { isFontLayoutSettingsGlobal } = useReaderStore(); const bookState = books[bookKey]!; const config = bookState.config!; + const view = getFoliateView(bookKey); const [lineHeight, setLineHeight] = useState(config.viewSettings!.lineHeight!); const [fullJustification, setFullJustification] = useState( @@ -27,7 +29,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.lineHeight = lineHeight; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [lineHeight]); useEffect(() => { @@ -37,7 +39,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.fullJustification = fullJustification; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [fullJustification]); useEffect(() => { @@ -47,7 +49,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.hyphenation = hyphenation; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setStyles?.(getStyles(config)); + view?.renderer.setStyles?.(getStyles(config)); }, [hyphenation]); useEffect(() => { @@ -57,7 +59,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.marginPx = marginPx; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setAttribute('margin', `${marginPx}px`); + view?.renderer.setAttribute('margin', `${marginPx}px`); }, [marginPx]); useEffect(() => { @@ -67,7 +69,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.gapPercent = gapPercent; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setAttribute('gap', `${gapPercent}%`); + view?.renderer.setAttribute('gap', `${gapPercent}%`); }, [gapPercent]); useEffect(() => { @@ -77,7 +79,11 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.maxColumnCount = maxColumnCount; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setAttribute('max-column-count', maxColumnCount); + view?.renderer.setAttribute('max-column-count', maxColumnCount); + view?.renderer.setAttribute( + 'max-inline-size', + `${maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`, + ); }, [maxColumnCount]); useEffect(() => { @@ -87,7 +93,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.maxInlineSize = maxInlineSize; setSettings(settings); } - getFoliateView(bookKey)?.renderer.setAttribute('max-inline-size', `${maxInlineSize}px`); + view?.renderer.setAttribute( + 'max-inline-size', + `${maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`, + ); }, [maxInlineSize]); return ( diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts index 930c65aa..0b358664 100644 --- a/apps/readest-app/src/services/constants.ts +++ b/apps/readest-app/src/services/constants.ts @@ -62,3 +62,5 @@ export const SERIF_FONTS = [ export const SANS_SERIF_FONTS = ['Roboto', 'Noto Sans', 'Open Sans', 'Helvetica', 'Arial']; export const MONOSPACE_FONTS = ['Fira Code', 'Lucida Console', 'Consolas', 'Courier New']; + +export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;