make Esc reset zoom work

This commit is contained in:
Sanster 2022-02-06 11:00:53 +08:00
parent 79ccd94ced
commit 31a00813e0
2 changed files with 11 additions and 7 deletions

View File

@ -11,7 +11,7 @@ function App() {
return ( return (
<div className="h-full full-visible-h-safari flex flex-col"> <div className="h-full full-visible-h-safari flex flex-col">
<header className="relative z-10 flex px-5 pt-3 justify-center sm:justify-between items-center sm:items-start"> <header className="absolute z-10 flex px-5 pt-3 justify-center sm:justify-between items-center sm:items-start">
{file ? ( {file ? (
<Button <Button
icon={<ArrowLeftIcon className="w-6 h-6" />} icon={<ArrowLeftIcon className="w-6 h-6" />}
@ -29,9 +29,7 @@ function App() {
<main <main
className={[ className={[
'h-full flex flex-1 flex-col sm:items-center sm:justify-center overflow-hidden', 'h-full flex flex-1 flex-col sm:items-center sm:justify-center overflow-hidden',
// file ? 'items-center justify-center' : '', // center on mobile
'items-center justify-center', 'items-center justify-center',
'pb-20',
].join(' ')} ].join(' ')}
> >
{file ? ( {file ? (

View File

@ -11,7 +11,12 @@ import {
TransformComponent, TransformComponent,
TransformWrapper, TransformWrapper,
} from 'react-zoom-pan-pinch' } from 'react-zoom-pan-pinch'
import { useWindowSize, useLocalStorage, useKey } from 'react-use' import {
useWindowSize,
useLocalStorage,
useKey,
useKeyPressEvent,
} from 'react-use'
import inpaint from './adapters/inpainting' import inpaint from './adapters/inpainting'
import Button from './components/Button' import Button from './components/Button'
import Slider from './components/Slider' import Slider from './components/Slider'
@ -211,7 +216,10 @@ export default function Editor(props: EditorProps) {
const offsetX = (windowSize.width - original.width * minScale) / 2 const offsetX = (windowSize.width - original.width * minScale) / 2
const offsetY = (windowSize.height - original.height * minScale) / 2 const offsetY = (windowSize.height - original.height * minScale) / 2
viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad') viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad')
}, [minScale, original, windowSize, isOriginalLoaded]) setScale(minScale)
}, [minScale, original, windowSize])
useKeyPressEvent('Escape', resetZoom)
const onPaint = (px: number, py: number) => { const onPaint = (px: number, py: number) => {
const currShowLine = lines4Show[lines4Show.length - 1] const currShowLine = lines4Show[lines4Show.length - 1]
@ -343,7 +351,6 @@ export default function Editor(props: EditorProps) {
<div <div
className="flex flex-col items-center" className="flex flex-col items-center"
style={{ style={{
// height: minScale !== 1 ? original.naturalHeight * minScale : undefined,
height: '100%', height: '100%',
width: '100%', width: '100%',
}} }}
@ -373,7 +380,6 @@ export default function Editor(props: EditorProps) {
wrapperStyle={{ wrapperStyle={{
width: '100%', width: '100%',
height: '100%', height: '100%',
marginBottom: '36px',
}} }}
contentClass={ contentClass={
isInpaintingLoading isInpaintingLoading