make Esc reset zoom work
This commit is contained in:
parent
79ccd94ced
commit
31a00813e0
@ -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 ? (
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user