akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

Set maximum column width in one-column layout

Browse Source
This commit is contained in:
chrox
2024-11-08 09:12:44 +01:00
parent 956ae47acf
commit f570eeb3de
4 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+3 -1
View File
@@ -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<void>;
@@ -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', '');
apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
+8 -7
View File
@@ -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) => {
apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
+17 -8
View File
@@ -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 (
apps/readest-app/src/services/constants.ts
+2
View File
@@ -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;