make undo stroke in manual mode

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -94,20 +94,23 @@ export default function Editor(props: EditorProps) {
 
   const [sliderPos, setSliderPos] = useState<number>(0)
 
-  const draw = (render: HTMLImageElement, lineGroup: LineGroup) => {
+  const draw = useCallback(
-    if (!context) {
+    (render: HTMLImageElement, lineGroup: LineGroup) => {
-      return
+      if (!context) {
-    }
+        return
-    context.clearRect(0, 0, context.canvas.width, context.canvas.height)
+      }
-    context.drawImage(
+      context.clearRect(0, 0, context.canvas.width, context.canvas.height)
-      render,
+      context.drawImage(
-      0,
+        render,
-      0,
+        0,
-      original.naturalWidth,
+        0,
-      original.naturalHeight
+        original.naturalWidth,
-    )
+        original.naturalHeight
-    drawLines(context, lineGroup)
+      )
-  }
+      drawLines(context, lineGroup)
+    },
+    [context, original]
+  )
 
   const drawAllLinesOnMask = (_lineGroups: LineGroup[]) => {
     if (!context?.canvas.width || !context?.canvas.height) {
@@ -167,13 +170,16 @@ export default function Editor(props: EditorProps) {
     return renders.length !== 0
   }
 
-  const drawOnCurrentRender = (lineGroup: LineGroup) => {
+  const drawOnCurrentRender = useCallback(
-    if (renders.length === 0) {
+    (lineGroup: LineGroup) => {
-      draw(original, lineGroup)
+      if (renders.length === 0) {
-    } else {
+        draw(original, lineGroup)
-      draw(renders[renders.length - 1], lineGroup)
+      } else {
-    }
+        draw(renders[renders.length - 1], lineGroup)
-  }
+      }
+    },
+    [original, renders, draw]
+  )
 
   const clearDrawing = () => {
     setIsDraging(false)
@@ -395,7 +401,16 @@ export default function Editor(props: EditorProps) {
     drawOnCurrentRender(lineGroup)
   }
 
-  const undo = () => {
+  const undoStroke = useCallback(() => {
+    if (curLineGroup.length === 0) {
+      return
+    }
+    const newLineGroup = curLineGroup.slice(0, curLineGroup.length - 1)
+    setCurLineGroup(newLineGroup)
+    drawOnCurrentRender(newLineGroup)
+  }, [curLineGroup, drawOnCurrentRender])
+
+  const undoRender = useCallback(() => {
     if (!renders.length) {
       return
     }
@@ -411,6 +426,14 @@ export default function Editor(props: EditorProps) {
     } else {
       draw(newRenders[newRenders.length - 1], [])
     }
+  }, [draw, renders, lineGroups, original])
+
+  const undo = () => {
+    if (settings.runInpaintingManually && curLineGroup.length !== 0) {
+      undoStroke()
+    } else {
+      undoRender()
+    }
   }
 
   // Handle Cmd+Z
@@ -427,7 +450,23 @@ export default function Editor(props: EditorProps) {
     return false
   }
 
-  useKey(undoPredicate, undo)
+  useKey(undoPredicate, undo, undefined, [undoStroke, undoRender])
+
+  const disableUndo = () => {
+    if (renders.length > 0) {
+      return false
+    }
+
+    if (settings.runInpaintingManually) {
+      if (curLineGroup.length === 0) {
+        return true
+      }
+    } else if (renders.length === 0) {
+      return true
+    }
+
+    return false
+  }
 
   useKeyPressEvent(
     'Tab',
@@ -661,7 +700,7 @@ export default function Editor(props: EditorProps) {
               </svg>
             }
             onClick={undo}
-            disabled={renders.length === 0}
+            disabled={disableUndo()}
           />
           <Button
             icon={<EyeIcon />}

lama_cleaner/app/src/components/shared/Button.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react'
 
 interface ButtonProps {
+  disabled?: boolean
   children?: ReactNode
   className?: string
   icon?: ReactNode
-  disabled?: boolean
   onKeyDown?: () => void
   onClick?: () => void
   onDown?: (ev: PointerEvent) => void
@@ -12,7 +12,7 @@ interface ButtonProps {
   style?: React.CSSProperties
 }
 
-export default function Button(props: ButtonProps) {
+const Button: React.FC<ButtonProps> = props => {
   const {
     children,
     className,
@@ -46,7 +46,7 @@ export default function Button(props: ButtonProps) {
       className={[
         'btn-primary',
         children ? 'btn-primary-content' : '',
-        disabled ? 'btn-primary-disabled' : '',
+        disabled === true ? 'btn-primary-disabled' : '',
         className,
       ].join(' ')}
     >
@@ -55,3 +55,9 @@ export default function Button(props: ButtonProps) {
     </div>
   )
 }
+
+Button.defaultProps = {
+  disabled: false,
+}
+
+export default Button