enhance(view):去除双页展示的功能。

This commit is contained in:
徐涛 2023-03-08 19:03:29 +08:00
parent 51c0e1afa7
commit 12962e3b56
4 changed files with 19 additions and 33 deletions

View File

@ -4,7 +4,6 @@ import { FC, useLayoutEffect } from 'react';
import { useMeasure } from 'react-use';
import { useZoomState } from '../states/zoom';
import { ContinuationView } from './ContinuationView';
import { DoubleView } from './DoubleView';
import { SingleView } from './SingleView';
export const ComicView: FC = () => {
@ -19,7 +18,6 @@ export const ComicView: FC = () => {
return (
<Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}>
{equals(viewMode, 'single') && <SingleView />}
{equals(viewMode, 'double') && <DoubleView />}
{equals(viewMode, 'continuation') && <ContinuationView />}
</Box>
);

View File

@ -1,5 +0,0 @@
import { FC } from 'react';
export const DoubleView: FC = () => {
return <div></div>;
};

View File

@ -9,7 +9,6 @@ import {
} from '@mantine/core';
import {
IconArrowAutofitWidth,
IconLock,
IconPercentage,
IconZoomIn,
IconZoomOut
@ -18,22 +17,17 @@ import { FC, useRef } from 'react';
import { useZoomState } from '../states/zoom';
export const PicToolbar: FC = () => {
const { lock, autoFit, currentZoom, viewMode, zoom, switchViewMode } = useZoomState();
const { autoFit, currentZoom, viewMode, zoom, switchViewMode } = useZoomState();
const zoomHandlers = useRef<NumberInputHandlers>();
return (
<Group w="100%" position="right" spacing={8} px={4} py={4}>
<Tooltip label="锁定缩放">
<ActionIcon variant={lock ? 'filled' : 'subtle'} color="grape">
<IconLock stroke={1.5} size={24} />
</ActionIcon>
</Tooltip>
<Tooltip label="适应窗口宽度">
<ActionIcon variant={autoFit ? 'filled' : 'subtle'} color="grape">
<IconArrowAutofitWidth stroke={1.5} size={24} />
</ActionIcon>
</Tooltip>
<Tooltip label="缩小">
<Tooltip label="缩小占据比例">
<ActionIcon
variant="subtle"
color="grape"
@ -42,19 +36,21 @@ export const PicToolbar: FC = () => {
<IconZoomOut stroke={1.5} size={24} />
</ActionIcon>
</Tooltip>
<NumberInput
hideControls
size="xs"
min={20}
max={100}
step={5}
value={currentZoom}
onChange={value => zoom(value)}
handlersRef={zoomHandlers}
styles={{ input: { width: rem(58), textAlign: 'center' } }}
rightSection={<IconPercentage stroke={1.5} size={16} />}
/>
<Tooltip label="放大">
<Tooltip label="图片宽度占视图宽度比例">
<NumberInput
hideControls
size="xs"
min={20}
max={100}
step={5}
value={currentZoom}
onChange={value => zoom(value)}
handlersRef={zoomHandlers}
styles={{ input: { width: rem(58), textAlign: 'center' } }}
rightSection={<IconPercentage stroke={1.5} size={16} />}
/>
</Tooltip>
<Tooltip label="放大占据比例">
<ActionIcon
variant="subtle"
color="grape"
@ -71,7 +67,6 @@ export const PicToolbar: FC = () => {
color="grape"
data={[
{ label: '单页', value: 'single' },
{ label: '双页', value: 'double' },
{ label: '连续', value: 'continuation' }
]}
/>

View File

@ -2,21 +2,19 @@ import { SyncObjectCallback } from '../types';
import { createStoreHook } from '../utils/store_creator';
interface ZoomState {
lock: boolean;
autoFit: boolean;
currentZoom: number;
viewMode: 'single' | 'double' | 'continuation';
viewMode: 'single' | 'continuation';
viewHeight: number;
}
type ZoomActions = {
zoom: SyncObjectCallback<number>;
updateViewHeight: SyncObjectCallback<number>;
switchViewMode: SyncObjectCallback<'single' | 'double' | 'continuation'>;
switchViewMode: SyncObjectCallback<'single' | 'continuation'>;
};
const initialState: ZoomState = {
lock: true,
autoFit: false,
currentZoom: 80,
viewMode: 'continuation',