diff --git a/locales/en.json b/locales/en.json index 2f91f566..741106f5 100644 --- a/locales/en.json +++ b/locales/en.json @@ -109,6 +109,7 @@ "abreast_duplicate": "Column duplicates ratio", "abreast_mode": "Abreast scroll mode", "always_load_all_img": "Always load all images", + "auto_switch_page_mode": "Auto switch single/double page mode", "background_color": "Background Color", "click_page_turn_area": "Touch area", "click_page_turn_enabled": "Click to turn page", diff --git a/locales/ru.json b/locales/ru.json index a46a50f4..1eaf033a 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -109,6 +109,7 @@ "abreast_duplicate": "Коэффициент дублирования столбцов", "abreast_mode": "Режим прокрутки в ряд", "always_load_all_img": "Всегда загружать все изображения", + "auto_switch_page_mode": "Автоматическое переключение режима одиночной/двойной страницы", "background_color": "Цвет фона", "click_page_turn_area": "Область нажатия", "click_page_turn_enabled": "Перелистывать по клику", diff --git a/locales/zh.json b/locales/zh.json index b523323b..e45a7b62 100644 --- a/locales/zh.json +++ b/locales/zh.json @@ -109,6 +109,7 @@ "abreast_duplicate": "每列重复比例", "abreast_mode": "并排卷轴模式", "always_load_all_img": "始终加载所有图片", + "auto_switch_page_mode": "自动切换单双页模式", "background_color": "背景颜色", "click_page_turn_area": "点击区域", "click_page_turn_enabled": "点击翻页", diff --git a/src/components/Manga/actions/image.ts b/src/components/Manga/actions/image.ts index 3d5f8144..a31b732e 100644 --- a/src/components/Manga/actions/image.ts +++ b/src/components/Manga/actions/image.ts @@ -1,9 +1,10 @@ import { isEqual, throttle } from 'helper'; +import { createEffectOn } from 'helper/solidJs'; import { autoCloseFill, handleComicData } from '../handleComicData'; import { setState, type State } from '../store'; -import { activeImgIndex, isOnePageMode } from './memo/common'; +import { activeImgIndex, isOnePageMode, pageNum } from './memo/common'; /** 重新计算图片排列 */ export const updatePageData = (state: State) => { @@ -41,3 +42,5 @@ export const resetImgState = (state: State) => { state.fillEffect['-1'] = state.option.firstPageFill && state.imgList.length > 3; }; + +createEffectOn([pageNum, isOnePageMode], () => setState(updatePageData)); diff --git a/src/components/Manga/actions/imageType.ts b/src/components/Manga/actions/imageType.ts index 6536227a..75e5e4c6 100644 --- a/src/components/Manga/actions/imageType.ts +++ b/src/components/Manga/actions/imageType.ts @@ -56,7 +56,6 @@ createRootEffect((prevIsWide) => { ) { state.option.scrollMode.enabled = true; autoScrollMode = true; - updatePageData(state); return; } diff --git a/src/components/Manga/actions/memo/common.ts b/src/components/Manga/actions/memo/common.ts index 8ad43e6b..e8a0cc46 100644 --- a/src/components/Manga/actions/memo/common.ts +++ b/src/components/Manga/actions/memo/common.ts @@ -1,4 +1,5 @@ import { createRootMemo, createThrottleMemo } from 'helper/solidJs'; +import { createMemo } from 'solid-js'; import { store } from '../../store'; import { findFillIndex } from '../../handleComicData'; @@ -13,15 +14,6 @@ export const isScrollMode = createRootMemo( () => store.option.scrollMode.enabled && !store.option.scrollMode.abreastMode, ); -/** 是否为单页模式 */ -export const isOnePageMode = createRootMemo( - () => - store.option.onePageMode || - store.option.scrollMode.enabled || - store.isMobile || - store.imgList.length <= 1, -); - /** 当前显示页面 */ export const activePage = createRootMemo( () => store.pageList[store.activePageIndex] ?? [], @@ -69,3 +61,18 @@ export const abreastColumnWidth = createRootMemo(() => ? placeholderSize().width * store.option.scrollMode.imgScale : 0, ); + +export const autoPageNum = createThrottleMemo(() => + store.rootSize.width >= store.rootSize.height ? 2 : 1, +); + +export const pageNum = createMemo(() => store.option.pageNum || autoPageNum()); + +/** 是否为单页模式 */ +export const isOnePageMode = createRootMemo( + () => + pageNum() === 1 || + store.option.scrollMode.enabled || + store.isMobile || + store.imgList.length <= 1, +); diff --git a/src/components/Manga/actions/switch.ts b/src/components/Manga/actions/switch.ts index 15132445..db90d8c4 100644 --- a/src/components/Manga/actions/switch.ts +++ b/src/components/Manga/actions/switch.ts @@ -6,7 +6,13 @@ import { zoom } from './zoom'; import { setOption } from './helper'; import { updatePageData } from './image'; import { setImgTranslationEnbale } from './translation'; -import { activeImgIndex, nowFillIndex, activePage } from './memo'; +import { + activeImgIndex, + nowFillIndex, + activePage, + pageNum, + autoPageNum, +} from './memo'; import { saveScrollProgress, scrollViewImg } from './scroll'; /** 切换页面填充 */ @@ -27,10 +33,8 @@ export const switchScrollMode = () => { zoom(100); setOption((draftOption, state) => { draftOption.scrollMode.enabled = !draftOption.scrollMode.enabled; - draftOption.onePageMode = draftOption.scrollMode.enabled; state.page.offset.x.px = 0; state.page.offset.y.px = 0; - updatePageData(state); }); // 切换到卷轴模式后自动定位到对应页 scrollViewImg(store.activePageIndex); @@ -39,8 +43,11 @@ export const switchScrollMode = () => { /** 切换单双页模式 */ export const switchOnePageMode = () => { setOption((draftOption, state) => { - draftOption.onePageMode = !draftOption.onePageMode; - updatePageData(state); + const newPageNum = pageNum() === 1 ? 2 : 1; + draftOption.pageNum = + state.option.autoSwitchPageMode && newPageNum === autoPageNum() + ? 0 + : newPageNum; }); }; diff --git a/src/components/Manga/components/ScrollbarPageStatus.tsx b/src/components/Manga/components/ScrollbarPageStatus.tsx index 43c45290..80665b05 100644 --- a/src/components/Manga/components/ScrollbarPageStatus.tsx +++ b/src/components/Manga/components/ScrollbarPageStatus.tsx @@ -3,7 +3,7 @@ import { boolDataVal } from 'helper'; import { createThrottleMemo } from 'helper/solidJs'; import { store } from '../store'; -import { contentHeight } from '../actions'; +import { contentHeight, isOnePageMode } from '../actions'; import classes from '../index.module.css'; interface ScrollbarPageItem { @@ -85,7 +85,7 @@ export const ScrollbarPageStatus = () => { for (let i = 0; i < store.pageList.length; i++) { const [a, b] = store.pageList[i]; - if (b === undefined) handleImg(a, !store.option.onePageMode); + if (b === undefined) handleImg(a, !isOnePageMode()); else if (a === -1) { handleImg(b); handleImg(b); diff --git a/src/components/Manga/defaultButtonList.tsx b/src/components/Manga/defaultButtonList.tsx index 5815c5de..014a2946 100644 --- a/src/components/Manga/defaultButtonList.tsx +++ b/src/components/Manga/defaultButtonList.tsx @@ -57,13 +57,13 @@ export const defaultButtonList: ToolbarButtonList = [ () => (