enable resetZoom after panning

This commit is contained in:
Sanster 2022-04-23 20:26:45 +08:00
parent 2797d2aca7
commit 1bc3f06190

View File

@ -82,6 +82,7 @@ export default function Editor(props: EditorProps) {
const [showOriginal, setShowOriginal] = useState(false) const [showOriginal, setShowOriginal] = useState(false)
const [isInpaintingLoading, setIsInpaintingLoading] = useState(false) const [isInpaintingLoading, setIsInpaintingLoading] = useState(false)
const [scale, setScale] = useState<number>(1) const [scale, setScale] = useState<number>(1)
const [panned, setPanned] = useState<boolean>(false)
const [minScale, setMinScale] = useState<number>(1.0) const [minScale, setMinScale] = useState<number>(1.0)
const [sizeLimit, setSizeLimit] = useState<number>(1080) const [sizeLimit, setSizeLimit] = useState<number>(1080)
const windowSize = useWindowSize() const windowSize = useWindowSize()
@ -286,7 +287,8 @@ export default function Editor(props: EditorProps) {
viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad') viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad')
viewport.state.scale = minScale viewport.state.scale = minScale
setScale(minScale) setScale(minScale)
}, [viewportRef, minScale, original, windowSize]) setPanned(false)
}, [viewportRef, minScale, original, windowSize, panned])
useEffect(() => { useEffect(() => {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
@ -596,6 +598,11 @@ export default function Editor(props: EditorProps) {
doubleClick={{ disabled: true }} doubleClick={{ disabled: true }}
initialScale={minScale} initialScale={minScale}
minScale={minScale} minScale={minScale}
onPanning={ref => {
if (!panned) {
setPanned(true)
}
}}
onZoom={ref => { onZoom={ref => {
setScale(ref.state.scale) setScale(ref.state.scale)
}} }}
@ -681,7 +688,7 @@ export default function Editor(props: EditorProps) {
<div className="editor-toolkit-btns"> <div className="editor-toolkit-btns">
<Button <Button
icon={<ArrowsExpandIcon />} icon={<ArrowsExpandIcon />}
disabled={scale === minScale} disabled={scale === minScale && panned === false}
onClick={resetZoom} onClick={resetZoom}
/> />
<Button <Button