xt/comic_viewer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance(view):加入视图切换功能。

Browse Source
This commit is contained in:
徐涛 2023-03-08 18:50:20 +08:00
parent 8b5b714d70
commit 6e5c9c5c5f
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/PicToolbar.tsx
View File

@ -18,7 +18,7 @@ import { FC, useRef } from 'react';
import { useZoomState } from '../states/zoom'; import { useZoomState } from '../states/zoom';
export const PicToolbar: FC = () => { export const PicToolbar: FC = () => {
const { lock, autoFit, currentZoom, viewMode, zoom } = useZoomState(); const { lock, autoFit, currentZoom, viewMode, zoom, switchViewMode } = useZoomState();
const zoomHandlers = useRef<NumberInputHandlers>(); const zoomHandlers = useRef<NumberInputHandlers>();
return ( return (
@ -67,6 +67,7 @@ export const PicToolbar: FC = () => {
<SegmentedControl <SegmentedControl
size="xs" size="xs"
value={viewMode} value={viewMode}
onChange={value => switchViewMode(value)}
color="grape" color="grape"
data={[ data={[
{ label: '单页', value: 'single' }, { label: '单页', value: 'single' },

6
src/states/zoom.ts
View File

@ -12,6 +12,7 @@ interface ZoomState {
type ZoomActions = { type ZoomActions = {
zoom: SyncObjectCallback<number>; zoom: SyncObjectCallback<number>;
updateViewHeight: SyncObjectCallback<number>; updateViewHeight: SyncObjectCallback<number>;
switchViewMode: SyncObjectCallback<'single' | 'double' | 'continuation'>;
}; };
const initialState: ZoomState = { const initialState: ZoomState = {
@ -33,5 +34,10 @@ export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({
set(df => { set(df => {
df.viewHeight = height; df.viewHeight = height;
}); });
},
switchViewMode(mode) {
set(df => {
df.viewMode = mode;
});
} }
})); }));