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