diff --git a/src/components/Manga/actions/scrollbar.ts b/src/components/Manga/actions/scrollbar.ts index f240a150..5e959257 100644 --- a/src/components/Manga/actions/scrollbar.ts +++ b/src/components/Manga/actions/scrollbar.ts @@ -3,7 +3,7 @@ import { createEffect, createRoot, on } from 'solid-js'; import { t } from 'helper/i18n'; import type { PointerState, UseDrag } from '../hooks/useDrag'; import type { State } from '../store'; -import { store, setState, refs } from '../store'; +import { store, setState, refs, _setState } from '../store'; import { resetUI } from './helper'; /** 漫画流的总高度 */ @@ -136,11 +136,8 @@ export const handleScrollbarDrag: UseDrag = ({ type, xy, initial }, e) => { else if (newPageIndex >= store.pageList.length) newPageIndex = store.pageList.length - 1; - if (newPageIndex !== store.activePageIndex) { - setState((state) => { - state.activePageIndex = newPageIndex; - }); - } + if (newPageIndex !== store.activePageIndex) + _setState('activePageIndex', newPageIndex); } }; @@ -178,9 +175,7 @@ createRoot(() => { () => store.show.toolbar, () => { if (store.show.scrollbar && !store.show.toolbar) - setState((state) => { - state.show.scrollbar = false; - }); + _setState('show', 'scrollbar', false); }, { defer: true }, ), diff --git a/src/components/Manga/actions/show.ts b/src/components/Manga/actions/show.ts index 4f670372..a0aec20e 100644 --- a/src/components/Manga/actions/show.ts +++ b/src/components/Manga/actions/show.ts @@ -1,6 +1,6 @@ import { createRoot, createEffect, on } from 'solid-js'; import type { State } from '../store'; -import { setState, store } from '../store'; +import { _setState, setState, store } from '../store'; import { updateImgLoadType, activePage } from './image'; /** 更新渲染页面相关变量 */ @@ -42,9 +42,7 @@ createRoot(() => { // 如果当前显示页面有出错的图片,就重新加载一次 page?.forEach((i) => { if (store.imgList[i]?.loadType !== 'error') return; - setState((state) => { - state.imgList[i].loadType = 'wait'; - }); + _setState('imgList', i, 'loadType', 'wait'); }); if (store.option.scrollMode) return; diff --git a/src/components/Manga/actions/translation/index.ts b/src/components/Manga/actions/translation/index.ts index 581a1138..0c1aec0d 100644 --- a/src/components/Manga/actions/translation/index.ts +++ b/src/components/Manga/actions/translation/index.ts @@ -6,7 +6,7 @@ import { createMemo, } from 'solid-js'; import { lang, t } from 'helper/i18n'; -import { store, setState } from '../../store'; +import { store, setState, _setState } from '../../store'; import { createOptions, setMessage } from './helper'; import { getValidTranslators, selfhostedTranslation } from './selfhosted'; import { cotransTranslation, cotransTranslators } from './cotrans'; @@ -29,9 +29,7 @@ export const translationImage = async (i: number) => { if (img.translationType !== 'wait') return; if (img.translationUrl) - return setState((state) => { - state.imgList[i].translationType = 'show'; - }); + return _setState('imgList', i, 'translationType', 'show'); if (img.loadType !== 'loaded') return setMessage(i, t('translation.tip.img_not_fully_loaded')); diff --git a/src/components/Manga/actions/zoom.ts b/src/components/Manga/actions/zoom.ts index 399ea3cf..88467dc4 100644 --- a/src/components/Manga/actions/zoom.ts +++ b/src/components/Manga/actions/zoom.ts @@ -3,7 +3,7 @@ import { clamp, isEqual } from 'helper'; import { debounce } from 'throttle-debounce'; import type { PointerState, UseDrag } from '../hooks/useDrag'; import type { State } from '../store'; -import { store, setState, refs } from '../store'; +import { store, setState, refs, _setState } from '../store'; import { resetUI } from './helper'; export const touches = new Map(); @@ -26,9 +26,7 @@ const checkBound = (state: State) => { }; const closeScrollLock = debounce(200, () => - setState((state) => { - state.flag.scrollLock = false; - }), + _setState('flag', 'scrollLock', false), ); export const zoom = ( diff --git a/src/components/Manga/components/EndPage.tsx b/src/components/Manga/components/EndPage.tsx index f7686bcd..5f66283f 100644 --- a/src/components/Manga/components/EndPage.tsx +++ b/src/components/Manga/components/EndPage.tsx @@ -9,7 +9,7 @@ import { } from 'solid-js'; import { t } from 'helper/i18n'; -import { setState, store } from '../store'; +import { _setState, store } from '../store'; import { bindRef, focus, turnPage } from '../actions'; import classes from '../index.module.css'; @@ -21,9 +21,7 @@ export const EndPage: Component = () => { const handleClick: EventHandler['onClick'] = (e) => { e.stopPropagation(); if (e.target?.nodeName !== 'BUTTON') - setState((state) => { - state.show.endPage = undefined; - }); + _setState('show', 'endPage', undefined); focus(); }; diff --git a/src/components/Manga/defaultButtonList.tsx b/src/components/Manga/defaultButtonList.tsx index 5cff218e..15600da2 100644 --- a/src/components/Manga/defaultButtonList.tsx +++ b/src/components/Manga/defaultButtonList.tsx @@ -9,7 +9,7 @@ import MdGrid from '@material-design-icons/svg/round/grid_4x4.svg'; import { createMemo, type Component, createSignal } from 'solid-js'; import { t } from 'helper/i18n'; -import { setState, store } from './store'; +import { _setState, store } from './store'; import { IconButton } from '../IconButton'; import { SettingPanel } from './components/SettingPanel'; @@ -133,9 +133,7 @@ export const defaultButtonList: ToolbarButtonList = [ const handleClick = () => { const _showPanel = !showPanel(); - setState((state) => { - state.show.toolbar = _showPanel; - }); + _setState('show', 'toolbar', _showPanel); setShowPanel(_showPanel); }; diff --git a/src/components/Manga/defaultSettingList.tsx b/src/components/Manga/defaultSettingList.tsx index b45326d7..4005e982 100644 --- a/src/components/Manga/defaultSettingList.tsx +++ b/src/components/Manga/defaultSettingList.tsx @@ -19,7 +19,7 @@ import { updateImgLoadType, zoomScrollModeImg, } from './actions'; -import { setState, store } from './store'; +import { _setState, setState, store } from './store'; import classes from './index.module.css'; import { SettingsItemNumber } from './components/SettingsItemNumber'; @@ -107,11 +107,7 @@ export const defaultSettingList: () => SettingList = () => [ { - setState((state) => { - state.show.touchArea = !state.show.touchArea; - }); - }} + onChange={() => _setState('show', 'touchArea', !store.show.touchArea)} /> /** 重置 toast 的 update 属性 */ const resetToastUpdate = (id: string) => - setState((state) => { - Reflect.deleteProperty(state.map[id], 'update'); - }); + _setState('map', id, 'update', undefined); export const ToastItem: Component = (props) => { /** 是否要显示进度 */ diff --git a/src/components/Toast/store.tsx b/src/components/Toast/store.tsx index 3265ed6e..a8cee5d1 100644 --- a/src/components/Toast/store.tsx +++ b/src/components/Toast/store.tsx @@ -1,7 +1,7 @@ import { createStore, produce } from 'solid-js/store'; import type { Toast } from '.'; -const [_state, _setState] = createStore({ +export const [_state, _setState] = createStore({ list: [] as Toast['id'][], map: {} as Record, }); diff --git a/src/components/Toast/toast.tsx b/src/components/Toast/toast.tsx index f7b10933..39cacfeb 100644 --- a/src/components/Toast/toast.tsx +++ b/src/components/Toast/toast.tsx @@ -1,6 +1,6 @@ import { log } from 'helper/logger'; import type { Message, Toast } from '.'; -import { creatId, setState, store } from './store'; +import { creatId, setState, _setState, store } from './store'; export const toast = (msg: Message, options?: Partial) => { if (!msg) return; @@ -40,9 +40,7 @@ export const toast = (msg: Message, options?: Partial) => { toast.dismiss = (id: string) => { if (!Reflect.has(store.map, id)) return; - setState((state) => { - state.map[id].exit = true; - }); + _setState('map', id, 'exit', true); }; toast.set = (id: string, options: Partial) => { if (!Reflect.has(store.map, id)) return; diff --git a/src/pwa/src/handleDrag.ts b/src/pwa/src/handleDrag.ts index f2b3b08f..24a45b67 100644 --- a/src/pwa/src/handleDrag.ts +++ b/src/pwa/src/handleDrag.ts @@ -1,13 +1,10 @@ import { getFilesFromDataTransferItems } from '@placemarkio/flat-drop-files'; -import { setState, loadNewImglist } from './store'; +import { loadNewImglist, _setState } from './store'; import classes from './index.module.css'; -const setDragging = (v: boolean) => - setState((state) => { - state.dragging = v; - }); +const setDragging = (v: boolean) => _setState('dragging', v); export const handleDrag = (ref: HTMLElement) => { ref.addEventListener('drop', async (e: DragEvent) => { diff --git a/src/pwa/src/index.tsx b/src/pwa/src/index.tsx index baef0f9a..a22dfb5c 100644 --- a/src/pwa/src/index.tsx +++ b/src/pwa/src/index.tsx @@ -12,7 +12,7 @@ import { Manga, buttonListDivider } from '../../components/Manga'; import { IconButton } from '../../components/IconButton'; import { Toaster, toast } from '../../components/Toast'; -import { store, setState, handleExit, loadNewImglist } from './store'; +import { store, handleExit, loadNewImglist, _setState } from './store'; import { FileSystemToFile, imgExtension } from './helper'; import { handleDrag } from './handleDrag'; import { DownloadButton } from './DownloadButton'; @@ -90,14 +90,7 @@ export const Root: Component = () => ( - @@ -112,13 +105,7 @@ export const Root: Component = () => ( - - setState((state) => { - state.hiddenInstallTip = 'TD'; - }) - } - > + _setState('hiddenInstallTip', 'TD')}> {t('pwa.button.no_more_prompt')} diff --git a/src/pwa/src/store.ts b/src/pwa/src/store.ts index 8b95983d..b16c2f67 100644 --- a/src/pwa/src/store.ts +++ b/src/pwa/src/store.ts @@ -11,7 +11,7 @@ export interface ImgFile { name: string; url: string; } -export const { store, setState, _state } = useStore({ +export const { store, setState, _state, _setState } = useStore({ /** 图片文件数据列表 */ imgList: [] as ImgFile[], /** 是否显示漫画 */ @@ -39,10 +39,7 @@ const getImgData = async (file: File): Promise => { } }; -export const handleExit = () => - setState((state) => { - state.show = false; - }); +export const handleExit = () => _setState('show', false); /** 加载新的文件列表 */ export const loadNewImglist = async (files: File[], errorTip?: string) => { @@ -53,9 +50,7 @@ export const loadNewImglist = async (files: File[], errorTip?: string) => { return; } - setState((state) => { - state.loading = true; - }); + _setState('loading', true); try { const newImglist = (await Promise.all(files.map(getImgData))).flat(); @@ -82,9 +77,7 @@ export const loadNewImglist = async (files: File[], errorTip?: string) => { } catch (error) { toast.error((error as Error).message, { throw: error as Error }); } finally { - setState((state) => { - state.loading = false; - }); + _setState('loading', false); } };