From 79ccd94cedc8e77dc36272789db3dd86c0caf3d4 Mon Sep 17 00:00:00 2001 From: Sanster Date: Sun, 6 Feb 2022 10:37:22 +0800 Subject: [PATCH] make zoom work --- lama_cleaner/app/package.json | 1 + lama_cleaner/app/src/Editor.tsx | 200 +- .../app/src/components/SizeSelector.tsx | 2 +- lama_cleaner/app/yarn.lock | 3203 +++++++++-------- 4 files changed, 1735 insertions(+), 1671 deletions(-) diff --git a/lama_cleaner/app/package.json b/lama_cleaner/app/package.json index 0cad681..b5865c6 100644 --- a/lama_cleaner/app/package.json +++ b/lama_cleaner/app/package.json @@ -24,6 +24,7 @@ "react-dom": "^17.0.2", "react-scripts": "4.0.3", "react-use": "^17.3.1", + "react-zoom-pan-pinch": "^2.1.3", "tailwindcss": "2.x", "typescript": "4.x" }, diff --git a/lama_cleaner/app/src/Editor.tsx b/lama_cleaner/app/src/Editor.tsx index 6817cd5..af8e088 100644 --- a/lama_cleaner/app/src/Editor.tsx +++ b/lama_cleaner/app/src/Editor.tsx @@ -1,5 +1,16 @@ import { DownloadIcon, EyeIcon } from '@heroicons/react/outline' -import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react' +import React, { + SyntheticEvent, + useCallback, + useEffect, + useRef, + useState, +} from 'react' +import { + ReactZoomPanPinchRef, + TransformComponent, + TransformWrapper, +} from 'react-zoom-pan-pinch' import { useWindowSize, useLocalStorage, useKey } from 'react-use' import inpaint from './adapters/inpainting' import Button from './components/Button' @@ -58,10 +69,12 @@ export default function Editor(props: EditorProps) { const [showOriginal, setShowOriginal] = useState(false) const [isInpaintingLoading, setIsInpaintingLoading] = useState(false) const [showSeparator, setShowSeparator] = useState(false) - const [scale, setScale] = useState(1) + const [scale, setScale] = useState(1) + const [minScale, setMinScale] = useState() // ['1080', '2000', 'Original'] const [sizeLimit, setSizeLimit] = useLocalStorage('sizeLimit', '1080') const windowSize = useWindowSize() + const viewportRef = useRef() const [isDraging, setIsDraging] = useState(false) const [isMultiStrokeKeyPressed, setIsMultiStrokeKeyPressed] = useState(false) @@ -163,23 +176,43 @@ export default function Editor(props: EditorProps) { // Draw once the original image is loaded useEffect(() => { - if (!context?.canvas) { + if (!original) { return } + if (isOriginalLoaded) { - context.canvas.width = original.naturalWidth - context.canvas.height = original.naturalHeight const rW = windowSize.width / original.naturalWidth const rH = (windowSize.height - TOOLBAR_SIZE) / original.naturalHeight if (rW < 1 || rH < 1) { - setScale(Math.min(rW, rH)) + const s = Math.min(rW, rH) + setMinScale(s) + setScale(s) } else { - setScale(1) + setMinScale(1) + } + + if (context?.canvas) { + context.canvas.width = original.naturalWidth + context.canvas.height = original.naturalHeight } draw() } }, [context?.canvas, draw, original, isOriginalLoaded, windowSize]) + // Zoom reset + const resetZoom = useCallback(() => { + if (!minScale || !original || !windowSize) { + return + } + const viewport = viewportRef.current + if (!viewport) { + throw new Error('no viewport') + } + 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]) + const onPaint = (px: number, py: number) => { const currShowLine = lines4Show[lines4Show.length - 1] currShowLine.pts.push({ x: px, y: py }) @@ -302,81 +335,106 @@ export default function Editor(props: EditorProps) { } } + if (!original || !scale || !minScale) { + return <> + } + return (