enable resetZoom after panning
This commit is contained in:
parent
2797d2aca7
commit
1bc3f06190
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user