press Alt + mouse move, change brush size

This commit is contained in:
Qing 2022-10-09 13:01:35 +08:00
parent 75162712c3
commit 521a1e2858

View File

@ -48,6 +48,8 @@ import emitter, { EVENT_PROMPT } from '../../event'
import FileSelect from '../FileSelect/FileSelect' import FileSelect from '../FileSelect/FileSelect'
const TOOLBAR_SIZE = 200 const TOOLBAR_SIZE = 200
const MIN_BRUSH_SIZE = 10
const MAX_BRUSH_SIZE = 200
const BRUSH_COLOR = '#ffcc00bb' const BRUSH_COLOR = '#ffcc00bb'
interface Line { interface Line {
@ -108,6 +110,14 @@ export default function Editor() {
const [showBrush, setShowBrush] = useState(false) const [showBrush, setShowBrush] = useState(false)
const [showRefBrush, setShowRefBrush] = useState(false) const [showRefBrush, setShowRefBrush] = useState(false)
const [isPanning, setIsPanning] = useState<boolean>(false) const [isPanning, setIsPanning] = useState<boolean>(false)
const [isChangingBrushSizeByMouse, setIsChangingBrushSizeByMouse] =
useState<boolean>(false)
const [changeBrushSizeByMouseInit, setChangeBrushSizeByMouseInit] = useState({
x: -1,
y: -1,
brushSize: 20,
})
const [showOriginal, setShowOriginal] = useState(false) const [showOriginal, setShowOriginal] = useState(false)
const [scale, setScale] = useState<number>(1) const [scale, setScale] = useState<number>(1)
const [panned, setPanned] = useState<boolean>(false) const [panned, setPanned] = useState<boolean>(false)
@ -486,6 +496,15 @@ export default function Editor() {
} }
const onMouseDrag = (ev: SyntheticEvent) => { const onMouseDrag = (ev: SyntheticEvent) => {
if (isChangingBrushSizeByMouse) {
const initX = changeBrushSizeByMouseInit.x
// move right: increase brush size
const newSize = changeBrushSizeByMouseInit.brushSize + (x - initX)
if (newSize <= MAX_BRUSH_SIZE && newSize >= MIN_BRUSH_SIZE) {
setBrushSize(newSize)
}
return
}
if (isPanning) { if (isPanning) {
return return
} }
@ -552,6 +571,9 @@ export default function Editor() {
} }
const onMouseDown = (ev: SyntheticEvent) => { const onMouseDown = (ev: SyntheticEvent) => {
if (isChangingBrushSizeByMouse) {
return
}
if (isPanning) { if (isPanning) {
return return
} }
@ -892,6 +914,21 @@ export default function Editor() {
} }
) )
useKeyPressEvent(
'Alt',
ev => {
ev?.preventDefault()
ev?.stopPropagation()
setIsChangingBrushSizeByMouse(true)
setChangeBrushSizeByMouseInit({ x, y, brushSize })
},
ev => {
ev?.preventDefault()
ev?.stopPropagation()
setIsChangingBrushSizeByMouse(false)
}
)
const getCurScale = (): number => { const getCurScale = (): number => {
let s = minScale let s = minScale
if (viewportRef.current?.state.scale !== undefined) { if (viewportRef.current?.state.scale !== undefined) {
@ -1070,8 +1107,8 @@ export default function Editor() {
)} )}
<Slider <Slider
label="Brush" label="Brush"
min={10} min={MIN_BRUSH_SIZE}
max={150} max={MAX_BRUSH_SIZE}
value={brushSize} value={brushSize}
onChange={handleSliderChange} onChange={handleSliderChange}
onClick={() => setShowRefBrush(false)} onClick={() => setShowRefBrush(false)}