diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx index 79c19f9..c6dd917 100644 --- a/lama_cleaner/app/src/components/Editor/Editor.tsx +++ b/lama_cleaner/app/src/components/Editor/Editor.tsx @@ -287,20 +287,30 @@ export default function Editor(props: EditorProps) { // Zoom reset const resetZoom = useCallback(() => { - if (!minScale || !original || !windowSize) { + if (!minScale) { return } const viewport = viewportRef.current if (!viewport) { - throw new Error('no viewport') + return } const offsetX = (windowSize.width - original.width * minScale) / 2 const offsetY = (windowSize.height - original.height * minScale) / 2 - viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad') + viewport.setTransform(offsetX, offsetY, minScale, 0, 'easeOutQuad') viewport.state.scale = minScale + setScale(minScale) setPanned(false) - }, [viewportRef, minScale, original, windowSize]) + }, [viewportRef, windowSize, original.width, windowSize.height, minScale]) + + useEffect(() => { + setLineGroups([]) + setCurLineGroup([]) + setRenders([]) + resetZoom() + const imageSizeLimit = Math.max(original.width, original.height) + setSizeLimit(imageSizeLimit) + }, [resetZoom, file, original]) useEffect(() => { window.addEventListener('resize', () => { diff --git a/lama_cleaner/app/src/components/Editor/SizeSelector.tsx b/lama_cleaner/app/src/components/Editor/SizeSelector.tsx index 20ea4b6..933c1b5 100644 --- a/lama_cleaner/app/src/components/Editor/SizeSelector.tsx +++ b/lama_cleaner/app/src/components/Editor/SizeSelector.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import Selector from '../shared/Selector' const sizes = ['720', '1080', '2000', 'Original'] @@ -14,6 +14,10 @@ export default function SizeSelector(props: SizeSelectorProps) { const [activeSize, setActiveSize] = useState('Original') const longSide: number = Math.max(originalWidth, originalHeight) + useEffect(() => { + setActiveSize('Original') + }, [originalHeight, originalWidth]) + const getSizeShowName = useCallback( (size: string) => { if (size === 'Original') { diff --git a/lama_cleaner/app/src/components/Header/Header.tsx b/lama_cleaner/app/src/components/Header/Header.tsx index 58fb600..4d62259 100644 --- a/lama_cleaner/app/src/components/Header/Header.tsx +++ b/lama_cleaner/app/src/components/Header/Header.tsx @@ -1,5 +1,5 @@ -import { ArrowLeftIcon } from '@heroicons/react/outline' -import React from 'react' +import { ArrowLeftIcon, UploadIcon } from '@heroicons/react/outline' +import React, { useState } from 'react' import { useRecoilState } from 'recoil' import { fileState } from '../../store/Atoms' import Button from '../shared/Button' @@ -11,20 +11,30 @@ import SettingIcon from '../Settings/SettingIcon' const Header = () => { const [file, setFile] = useRecoilState(fileState) const resolution = useResolution() + const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`) const renderHeader = () => { return (
- +