kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

fix undo redo draw

Browse Source
This commit is contained in:
Qing 2023-03-28 21:01:14 +08:00
parent c4968dd0a9
commit e444e55bcc
2 changed files with 85 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
lama_cleaner/app/src/components/Editor/Editor.tsx
View File

@ -187,8 +187,8 @@ export default function Editor() {
const enableFileManager = useRecoilValue(enableFileManagerState) const enableFileManager = useRecoilValue(enableFileManagerState)
const isEnableAutoSaving = useRecoilValue(isEnableAutoSavingState) const isEnableAutoSaving = useRecoilValue(isEnableAutoSavingState)
const setImageWidth = useSetRecoilState(imageWidthState) const [imageWidth, setImageWidth] = useRecoilState(imageWidthState)
const setImageHeight = useSetRecoilState(imageHeightState) const [imageHeight, setImageHeight] = useRecoilState(imageHeightState)
const app = useRecoilValue(appState) const app = useRecoilValue(appState)
const draw = useCallback( const draw = useCallback(
@ -196,40 +196,30 @@ export default function Editor() {
if (!context) { if (!context) {
return return
} }
context.clearRect(0, 0, context.canvas.width, context.canvas.height) console.log('-------------------------------')
context.drawImage( console.log(`render size: ${render.width}x${render.height}`)
render, console.log(`image size: ${imageWidth}x${imageHeight} `)
0, console.log(
0, `canvas size: ${context.canvas.width}x${context.canvas.height} `
original.naturalWidth,
original.naturalHeight
) )
context.clearRect(0, 0, context.canvas.width, context.canvas.height)
context.drawImage(render, 0, 0, imageWidth, imageHeight)
if (isInteractiveSeg && tmpInteractiveSegMask !== null) { if (isInteractiveSeg && tmpInteractiveSegMask !== null) {
context.drawImage( context.drawImage(tmpInteractiveSegMask, 0, 0, imageWidth, imageHeight)
tmpInteractiveSegMask,
0,
0,
original.naturalWidth,
original.naturalHeight
)
} }
if (!isInteractiveSeg && interactiveSegMask !== null) { if (!isInteractiveSeg && interactiveSegMask !== null) {
context.drawImage( context.drawImage(interactiveSegMask, 0, 0, imageWidth, imageHeight)
interactiveSegMask,
0,
0,
original.naturalWidth,
original.naturalHeight
)
} }
drawLines(context, lineGroup) drawLines(context, lineGroup)
}, },
[ [
context, context,
original,
isInteractiveSeg, isInteractiveSeg,
tmpInteractiveSegMask, tmpInteractiveSegMask,
interactiveSegMask, interactiveSegMask,
imageHeight,
imageWidth,
] ]
) )
@ -247,13 +237,7 @@ export default function Editor() {
if (maskImage !== undefined && maskImage !== null) { if (maskImage !== undefined && maskImage !== null) {
// TODO: check whether draw yellow mask works on backend // TODO: check whether draw yellow mask works on backend
ctx.drawImage( ctx.drawImage(maskImage, 0, 0, imageWidth, imageHeight)
maskImage,
0,
0,
original.naturalWidth,
original.naturalHeight
)
} }
_lineGroups.forEach(lineGroup => { _lineGroups.forEach(lineGroup => {
@ -274,9 +258,9 @@ export default function Editor() {
size: 9999999999, size: 9999999999,
pts: [ pts: [
{ x: 0, y: 0 }, { x: 0, y: 0 },
{ x: original.naturalWidth, y: 0 }, { x: imageWidth, y: 0 },
{ x: original.naturalWidth, y: original.naturalHeight }, { x: imageWidth, y: imageHeight },
{ x: 0, y: original.naturalHeight }, { x: 0, y: imageHeight },
], ],
}, },
], ],
@ -284,7 +268,7 @@ export default function Editor() {
) )
} }
}, },
[context, maskCanvas, isPix2Pix] [context, maskCanvas, isPix2Pix, imageWidth, imageHeight]
) )
const hadDrawSomething = useCallback(() => { const hadDrawSomething = useCallback(() => {
@ -574,6 +558,8 @@ export default function Editor() {
const { blob } = res const { blob } = res
const newRender = new Image() const newRender = new Image()
await loadImage(newRender, blob) await loadImage(newRender, blob)
setImageHeight(newRender.height)
setImageWidth(newRender.width)
const newRenders = [...renders, newRender] const newRenders = [...renders, newRender]
setRenders(newRenders) setRenders(newRenders)
@ -597,7 +583,15 @@ export default function Editor() {
setIsPluginRunning(false) setIsPluginRunning(false)
} }
}, },
[renders, setRenders, getCurrentRender, setIsPluginRunning, isProcessing] [
renders,
setRenders,
getCurrentRender,
setIsPluginRunning,
isProcessing,
setImageHeight,
setImageWidth,
]
) )
useEffect(() => { useEffect(() => {
@ -672,17 +666,32 @@ export default function Editor() {
[isInpainting] [isInpainting]
) )
const getCurrentWidthHeight = useCallback(() => {
let width = 512
let height = 512
if (!isOriginalLoaded) {
return [width, height]
}
if (renders.length === 0) {
width = original.naturalWidth
height = original.naturalHeight
} else if (renders.length !== 0) {
width = renders[renders.length - 1].width
height = renders[renders.length - 1].height
}
return [width, height]
}, [original, isOriginalLoaded, renders])
// Draw once the original image is loaded // Draw once the original image is loaded
useEffect(() => { useEffect(() => {
if (!isOriginalLoaded) { if (!isOriginalLoaded) {
return return
} }
const [width, height] = getCurrentWidthHeight()
const rW = windowSize.width / original.naturalWidth const rW = windowSize.width / width
const rH = (windowSize.height - TOOLBAR_SIZE) / original.naturalHeight const rH = (windowSize.height - TOOLBAR_SIZE) / height
setImageWidth(original.naturalWidth)
setImageHeight(original.naturalHeight)
let s = 1.0 let s = 1.0
if (rW < 1 || rH < 1) { if (rW < 1 || rH < 1) {
@ -692,15 +701,16 @@ export default function Editor() {
setScale(s) setScale(s)
if (context?.canvas) { if (context?.canvas) {
context.canvas.width = original.naturalWidth context.canvas.width = width
context.canvas.height = original.naturalHeight context.canvas.height = height
drawOnCurrentRender([]) drawOnCurrentRender([])
} }
console.log(`on load image size: ${width}x${height}`)
setImageWidth(width)
setImageHeight(height)
if (!initialCentered) { viewportRef.current?.centerView(s, 1)
viewportRef.current?.centerView(s, 1) setInitialCentered(true)
setInitialCentered(true)
}
}, [ }, [
context?.canvas, context?.canvas,
viewportRef, viewportRef,
@ -709,6 +719,7 @@ export default function Editor() {
windowSize, windowSize,
initialCentered, initialCentered,
drawOnCurrentRender, drawOnCurrentRender,
getCurrentWidthHeight,
]) ])
// Zoom reset // Zoom reset
@ -1034,12 +1045,20 @@ export default function Editor() {
const newRenders = [...renders] const newRenders = [...renders]
setRenders(newRenders) setRenders(newRenders)
if (newRenders.length === 0) { // if (newRenders.length === 0) {
draw(original, []) // draw(original, [])
} else { // } else {
draw(newRenders[newRenders.length - 1], []) // draw(newRenders[newRenders.length - 1], [])
} // }
}, [draw, renders, redoRenders, redoLineGroups, lineGroups, original]) }, [
draw,
renders,
redoRenders,
redoLineGroups,
lineGroups,
original,
context,
])
const undo = () => { const undo = () => {
if (runMannually && curLineGroup.length !== 0) { if (runMannually && curLineGroup.length !== 0) {
@ -1060,7 +1079,6 @@ export default function Editor() {
} }
if (isCmdZ) { if (isCmdZ) {
event.preventDefault() event.preventDefault()
console.log('undo')
return true return true
} }
return false return false
@ -1071,6 +1089,8 @@ export default function Editor() {
undoRender, undoRender,
runMannually, runMannually,
curLineGroup, curLineGroup,
context?.canvas,
renders,
]) ])
const disableUndo = () => { const disableUndo = () => {
@ -1118,7 +1138,7 @@ export default function Editor() {
const render = redoRenders.pop()! const render = redoRenders.pop()!
const newRenders = [...renders, render] const newRenders = [...renders, render]
setRenders(newRenders) setRenders(newRenders)
draw(newRenders[newRenders.length - 1], []) // draw(newRenders[newRenders.length - 1], [])
}, [draw, renders, redoRenders, redoLineGroups, lineGroups, original]) }, [draw, renders, redoRenders, redoLineGroups, lineGroups, original])
const redo = () => { const redo = () => {
@ -1141,7 +1161,6 @@ export default function Editor() {
} }
if (isCmdZ) { if (isCmdZ) {
event.preventDefault() event.preventDefault()
console.log('redo')
return true return true
} }
return false return false
@ -1467,8 +1486,8 @@ export default function Editor() {
<div <div
className="original-image-container" className="original-image-container"
style={{ style={{
width: `${original.naturalWidth}px`, width: `${imageWidth}px`,
height: `${original.naturalHeight}px`, height: `${imageHeight}px`,
}} }}
> >
{showOriginal && ( {showOriginal && (
@ -1484,8 +1503,8 @@ export default function Editor() {
src={original.src} src={original.src}
alt="original" alt="original"
style={{ style={{
width: `${original.naturalWidth}px`, width: `${imageWidth}px`,
height: `${original.naturalHeight}px`, height: `${imageHeight}px`,
}} }}
/> />
</> </>
@ -1494,10 +1513,10 @@ export default function Editor() {
</div> </div>
<Croper <Croper
maxHeight={original.naturalHeight} maxHeight={imageHeight}
maxWidth={original.naturalWidth} maxWidth={imageWidth}
minHeight={Math.min(256, original.naturalHeight)} minHeight={Math.min(256, imageHeight)}
minWidth={Math.min(256, original.naturalWidth)} minWidth={Math.min(256, imageWidth)}
scale={scale} scale={scale}
show={isDiffusionModels && settings.showCroper} show={isDiffusionModels && settings.showCroper}
/> />

3
lama_cleaner/app/src/components/Plugins/Plugins.tsx
View File

@ -70,7 +70,7 @@ const Plugins = () => {
const renderRealESRGANPlugin = () => { const renderRealESRGANPlugin = () => {
return ( return (
<DropdownMenu.Sub> <DropdownMenu.Sub key="RealESRGAN">
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
className="DropdownMenuSubTrigger" className="DropdownMenuSubTrigger"
disabled={disabled} disabled={disabled}
@ -110,6 +110,7 @@ const Plugins = () => {
} }
return ( return (
<DropdownMenu.Item <DropdownMenu.Item
key={plugin}
className="DropdownMenuItem" className="DropdownMenuItem"
onClick={() => onPluginClick(plugin)} onClick={() => onPluginClick(plugin)}
disabled={disabled} disabled={disabled}