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 (
<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 ? (
<Button
icon={<ArrowLeftIcon className="w-6 h-6" />}
@ -29,9 +29,7 @@ function App() {
<main
className={[
'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',
'pb-20',
].join(' ')}
>
{file ? (

View File

@ -11,7 +11,12 @@ import {
TransformComponent,
TransformWrapper,
} 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 Button from './components/Button'
import Slider from './components/Slider'
@ -211,7 +216,10 @@ export default function Editor(props: EditorProps) {
const offsetX = (windowSize.width - original.width * minScale) / 2
const offsetY = (windowSize.height - original.height * minScale) / 2
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 currShowLine = lines4Show[lines4Show.length - 1]
@ -343,7 +351,6 @@ export default function Editor(props: EditorProps) {
<div
className="flex flex-col items-center"
style={{
// height: minScale !== 1 ? original.naturalHeight * minScale : undefined,
height: '100%',
width: '100%',
}}
@ -373,7 +380,6 @@ export default function Editor(props: EditorProps) {
wrapperStyle={{
width: '100%',
height: '100%',
marginBottom: '36px',
}}
contentClass={
isInpaintingLoading