enhance(view):去除双页展示的功能。
This commit is contained in:
parent
51c0e1afa7
commit
12962e3b56
@ -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>
|
||||
);
|
||||
|
@ -1,5 +0,0 @@
|
||||
import { FC } from 'react';
|
||||
|
||||
export const DoubleView: FC = () => {
|
||||
return <div></div>;
|
||||
};
|
@ -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' }
|
||||
]}
|
||||
/>
|
||||
|
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user