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

fix(view):修复单页浏览时缩放计算布局错误的问题。

Browse Source
This commit is contained in:
徐涛 2023-03-21 10:49:02 +08:00
parent 39accb3cb7
commit a80e8eb74f
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ComicView.tsx
View File

@ -13,12 +13,16 @@ export const ComicView: FC = () => {
const files = useFileListStore(sortedFilesSelector()); const files = useFileListStore(sortedFilesSelector());
const viewMode = useZoomState.use.viewMode(); const viewMode = useZoomState.use.viewMode();
const updateViewHeight = useZoomState.use.updateViewHeight(); const updateViewHeight = useZoomState.use.updateViewHeight();
const [containerRef, { height }] = useMeasure(); const updateViewWidth = useZoomState.use.updateViewWidth();
const [containerRef, { height, width }] = useMeasure();
const firstFileId = useMemo(() => head(files)?.id ?? '', [files, files.length]); const firstFileId = useMemo(() => head(files)?.id ?? '', [files, files.length]);
useLayoutEffect(() => { useLayoutEffect(() => {
updateViewHeight(height); updateViewHeight(height);
}, [height]); }, [height]);
useLayoutEffect(() => {
updateViewWidth(width);
}, [width]);
return ( return (
<Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}> <Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}>

10
src/components/SingleView.tsx
View File

@ -10,8 +10,8 @@ import { useZoomState } from '../states/zoom';
export const SingleView: FC = () => { export const SingleView: FC = () => {
const files = useFileListStore.use.files(); const files = useFileListStore.use.files();
const actives = useFileListStore.use.actives(); const actives = useFileListStore.use.actives();
const zoom = useZoomState.use.currentZoom(); const { currentZoom: zoom, viewHeight, viewWidth } = useZoomState();
const viewHeight = useZoomState.use.viewHeight(); const maxImageWidth = useMemo(() => viewWidth * (zoom / 100), [viewWidth, zoom]);
const updateActives = useFileListStore.use.updateActiveFiles(); const updateActives = useFileListStore.use.updateActiveFiles();
const ebus = useContext<EventEmitter>(EventBusContext); const ebus = useContext<EventEmitter>(EventBusContext);
const [pageConRef, { width: pageConWidth }] = useMeasure(); const [pageConRef, { width: pageConWidth }] = useMeasure();
@ -21,9 +21,9 @@ export const SingleView: FC = () => {
}, [files, actives]); }, [files, actives]);
const largerThanView = useMemo(() => { const largerThanView = useMemo(() => {
if (isNil(activeFile)) return false; if (isNil(activeFile)) return false;
let imageHeightAfterZoom = activeFile?.height * (zoom / 100); let imageHeightAfterZoom = activeFile?.height * (maxImageWidth / activeFile?.width);
return gt(imageHeightAfterZoom, viewHeight); return gt(imageHeightAfterZoom, viewHeight);
}, [activeFile, viewHeight, zoom]); }, [activeFile, viewHeight, maxImageWidth]);
const handlePaginationAction = useCallback( const handlePaginationAction = useCallback(
(event: BaseSyntheticEvent) => { (event: BaseSyntheticEvent) => {
let middle = pageConWidth / 2; let middle = pageConWidth / 2;
@ -62,7 +62,7 @@ export const SingleView: FC = () => {
height: largerThanView ? '100%' : viewHeight height: largerThanView ? '100%' : viewHeight
}} }}
> >
<img src={activeFile.path} style={{ width: `${zoom}%` }} /> <img src={activeFile.path} style={{ width: maxImageWidth }} />
</div> </div>
)} )}
</div> </div>

10
src/states/zoom.ts
View File

@ -6,11 +6,13 @@ interface ZoomState {
currentZoom: number; currentZoom: number;
viewMode: 'single' | 'continuation'; viewMode: 'single' | 'continuation';
viewHeight: number; viewHeight: number;
viewWidth: number;
} }
type ZoomActions = { type ZoomActions = {
zoom: SyncObjectCallback<number>; zoom: SyncObjectCallback<number>;
updateViewHeight: SyncObjectCallback<number>; updateViewHeight: SyncObjectCallback<number>;
updateViewWidth: SyncObjectCallback<number>;
switchViewMode: SyncObjectCallback<'single' | 'continuation'>; switchViewMode: SyncObjectCallback<'single' | 'continuation'>;
}; };
@ -18,7 +20,8 @@ const initialState: ZoomState = {
autoFit: false, autoFit: false,
currentZoom: 80, currentZoom: 80,
viewMode: 'continuation', viewMode: 'continuation',
viewHeight: 0 viewHeight: 0,
viewWidth: 0
}; };
export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({ export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({
@ -33,6 +36,11 @@ export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({
df.viewHeight = height; df.viewHeight = height;
}); });
}, },
updateViewWidth(width) {
set(df => {
df.viewWidth = width;
});
},
switchViewMode(mode) { switchViewMode(mode) {
set(df => { set(df => {
df.viewMode = mode; df.viewMode = mode;