fix brush size after zoom
This commit is contained in:
parent
4e213e64e1
commit
c5f4accbff
@ -246,8 +246,9 @@ 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')
|
||||||
|
viewport.state.scale = minScale
|
||||||
setScale(minScale)
|
setScale(minScale)
|
||||||
}, [minScale, original, windowSize])
|
}, [viewportRef, minScale, original, windowSize])
|
||||||
|
|
||||||
const handleEscPressed = () => {
|
const handleEscPressed = () => {
|
||||||
if (isInpaintingLoading) {
|
if (isInpaintingLoading) {
|
||||||
@ -461,6 +462,25 @@ export default function Editor(props: EditorProps) {
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const getCurScale = (): number => {
|
||||||
|
let s = minScale
|
||||||
|
if (viewportRef.current?.state.scale !== undefined) {
|
||||||
|
s = viewportRef.current?.state.scale
|
||||||
|
}
|
||||||
|
return s!
|
||||||
|
}
|
||||||
|
|
||||||
|
const getBrushStyle = () => {
|
||||||
|
const curScale = getCurScale()
|
||||||
|
return {
|
||||||
|
width: `${brushSize * curScale}px`,
|
||||||
|
height: `${brushSize * curScale}px`,
|
||||||
|
left: `${x}px`,
|
||||||
|
top: `${y}px`,
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!original || !scale || !minScale) {
|
if (!original || !scale || !minScale) {
|
||||||
return <></>
|
return <></>
|
||||||
}
|
}
|
||||||
@ -564,13 +584,7 @@ export default function Editor(props: EditorProps) {
|
|||||||
{showBrush && !isInpaintingLoading && !isPanning && (
|
{showBrush && !isInpaintingLoading && !isPanning && (
|
||||||
<div
|
<div
|
||||||
className="hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none"
|
className="hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none"
|
||||||
style={{
|
style={getBrushStyle()}
|
||||||
width: `${brushSize * scale}px`,
|
|
||||||
height: `${brushSize * scale}px`,
|
|
||||||
left: `${x}px`,
|
|
||||||
top: `${y}px`,
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@ import React, { FocusEvent, useCallback, useEffect } from 'react'
|
|||||||
import { Listbox } from '@headlessui/react'
|
import { Listbox } from '@headlessui/react'
|
||||||
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
|
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
|
||||||
|
|
||||||
const sizes = ['1080', '2000', 'Original']
|
const sizes = ['720', '1080', '2000', 'Original']
|
||||||
|
|
||||||
type SizeSelectorProps = {
|
type SizeSelectorProps = {
|
||||||
value: string
|
value: string
|
||||||
|
Loading…
Reference in New Issue
Block a user