feat: add Alt key to temporarily toggle between Brush and Eraser modes

Author: mmadesignerunknown

src/components/panel/editor/ImageCanvas.tsx

@@ -759,6 +759,8 @@ const ImageCanvas = memo(
     const [isFadingIn, setIsFadingIn] = useState(false);
     const prevImageIdentityRef = useRef(selectedImage.thumbnailUrl);
 
+    const [baseTool, setBaseTool] = useState<ToolType>(brushSettings?.tool ?? ToolType.Brush);
+
     useEffect(() => {
       const newSrc = finalPreviewUrl || selectedImage.thumbnailUrl;
       const isNewImage = prevImageIdentityRef.current !== selectedImage.thumbnailUrl;
@@ -804,6 +806,32 @@ const ImageCanvas = memo(
       }
     }, [finalPreviewUrl, selectedImage.thumbnailUrl, isSliderDragging]);
 
+    useEffect(() => {
+      setBaseTool(brushSettings?.tool ?? ToolType.Brush);
+    }, [brushSettings?.tool]);
+
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Alt') {
+          e.preventDefault();
+          (window as any).altKeyDown = true;
+        }
+      };
+      const handleKeyUp = (e: KeyboardEvent) => {
+        if (e.key === 'Alt') {
+          e.preventDefault();
+          (window as any).altKeyDown = false;
+        }
+      };
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('keyup', handleKeyUp);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('keyup', handleKeyUp);
+        delete (window as any).altKeyDown;
+      };
+    }, []);
+
     const activeContainer = useMemo(() => {
       if (isMasking) {
         return adjustments.masks.find((c: MaskContainer) => c.id === activeMaskContainerId);
@@ -1088,7 +1116,16 @@ const ImageCanvas = memo(
             return;
           }
 
-          const toolType = isAiSubjectActive ? ToolType.AiSeletor : ToolType.Brush;
+          const isAltPressed = e.evt.altKey;
+          let effectiveTool;
+
+          if (isAiSubjectActive) {
+            effectiveTool = ToolType.AiSeletor;
+          } else if (isAltPressed) {
+            effectiveTool = baseTool === ToolType.Brush ? ToolType.Eraser : ToolType.Brush;
+          } else {
+            effectiveTool = baseTool;
+          }
           const isShiftClick = isBrushActive && e.evt.shiftKey && lastBrushPoint.current;
 
           if (isShiftClick) {
@@ -1121,7 +1158,7 @@ const ImageCanvas = memo(
               brushSize: brushImageSpaceSize,
               feather: brushSettings?.feather ? brushSettings?.feather / 100 : 0,
               points: interpolatedPoints,
-              tool: brushSettings?.tool ?? ToolType.Brush,
+              tool: effectiveTool,
             };
 
             const activeId = isMasking ? activeMaskId : activeAiSubMaskId;
@@ -1146,7 +1183,7 @@ const ImageCanvas = memo(
           const newLine: DrawnLine = {
             brushSize: isBrushActive && brushSettings?.size ? brushStageSize : 2,
             points: [pos],
-            tool: toolType,
+            tool: effectiveTool,
           };
           currentLine.current = newLine;
         } else {
@@ -1182,6 +1219,7 @@ const ImageCanvas = memo(
         isToolActive,
         brushImageSpaceSize,
         brushStageSize,
+        baseTool,
       ],
     );
 
@@ -1302,14 +1340,24 @@ const ImageCanvas = memo(
             const cropX = crop ? (isPercent ? (crop.x / 100) * effectiveImageDimensions.width : crop.x) : 0;
             const cropY = crop ? (isPercent ? (crop.y / 100) * effectiveImageDimensions.height : crop.y) : 0;
 
+            const isAltPressedDuringMove = (window as any).altKeyDown || false;
+            let effectiveToolForPreview;
+
+            if (isAltPressedDuringMove) {
+              // Alt toggles: Brush -> Eraser, Eraser -> Brush
+              effectiveToolForPreview = baseTool === ToolType.Brush ? ToolType.Eraser : ToolType.Brush;
+            } else {
+              effectiveToolForPreview = baseTool;
+            }
+
             const imageSpaceLine: DrawnLine = {
               brushSize: brushImageSpaceSize,
               feather: brushSettings?.feather ? brushSettings?.feather / 100 : 0,
               points: updatedLine.points.map((p: Coord) => ({
                 x: p.x / scale + cropX,
                 y: p.y / scale + cropY,
               })),
-              tool: brushSettings?.tool ?? ToolType.Brush,
+              tool: effectiveToolForPreview,
             };
 
             const existingLines = activeSubMask.parameters?.lines || [];
@@ -1351,6 +1399,7 @@ const ImageCanvas = memo(
         isMasking,
         localInitialDrawParams,
         brushImageSpaceSize,
+        baseTool,
       ],
     );
 
@@ -1458,14 +1507,17 @@ const ImageCanvas = memo(
       const activeId = isMasking ? activeMaskId : activeAiSubMaskId;
 
       if (isBrushActive) {
+        const wasAltPressed = (window as any).altKeyDown || false;
+        const effectiveToolForFinal = wasAltPressed ? (baseTool === ToolType.Brush ? ToolType.Eraser : ToolType.Brush) : baseTool;
+
         const imageSpaceLine: DrawnLine = {
           brushSize: brushImageSpaceSize,
           feather: brushSettings?.feather ? brushSettings?.feather / 100 : 0,
           points: line.points.map((p: Coord) => ({
             x: p.x / scale + cropX,
             y: p.y / scale + cropY,
           })),
-          tool: brushSettings?.tool ?? ToolType.Brush,
+          tool: effectiveToolForFinal,
         };
 
         const existingLines = activeSubMask?.parameters.lines || [];
@@ -1503,6 +1555,7 @@ const ImageCanvas = memo(
       localInitialDrawParams,
       brushImageSpaceSize,
       brushStageSize,
+      baseTool,
     ]);
 
     const handleMouseEnter = useCallback(() => {
@@ -1903,7 +1956,6 @@ const ImageCanvas = memo(
                     );
                   })}
 
-                {/* Visualizer for drawing new AI Bounding Box */}
                 {previewBox && (
                   <Rect
                     x={Math.min(previewBox.start.x, previewBox.end.x)}
@@ -1920,7 +1972,9 @@ const ImageCanvas = memo(
                   <Circle
                     listening={false}
                     perfectDrawEnabled={false}
-                    stroke={brushSettings?.tool === ToolType.Eraser ? '#f43f5e' : '#0ea5e9'}
+                    stroke={(window as any).altKeyDown ? 
+                      (baseTool === ToolType.Brush ? '#f43f5e' : '#0ea5e9') : 
+                      (baseTool === ToolType.Eraser ? '#f43f5e' : '#0ea5e9')}
                     radius={brushStageSize / 2}
                     strokeWidth={1}
                     x={cursorPreview.x}