From d0569fcb79389b3c4f3d60e2a84f6f9220ca9cf3 Mon Sep 17 00:00:00 2001
From: eleanor-park <113556828+eleanor-park@users.noreply.github.com>
Date: Sun, 20 Oct 2024 23:52:20 -0400
Subject: added different cut types, haven't been able to run & test

---
 .../views/nodes/imageEditor/ImageEditor.scss       |  6 +++
 src/client/views/nodes/imageEditor/ImageEditor.tsx | 56 ++++++++++++++++++++--
 .../imageEditorUtils/imageEditorInterfaces.ts      |  6 ++-
 3 files changed, 61 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/imageEditor/ImageEditor.scss b/src/client/views/nodes/imageEditor/ImageEditor.scss
index 21c28f6da..49146aa23 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.scss
+++ b/src/client/views/nodes/imageEditor/ImageEditor.scss
@@ -89,6 +89,12 @@ $scale: 0.5;
                 gap: 10px;
             }
 
+            .cutToolsContainer {
+                display: grid;
+                gap: 5px;
+                grid-template-columns: 1fr 1fr;
+            }
+
             .undoRedoContainer {
                 justify-content: center;
                 display: flex;
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index 86f7d8d29..d9f46876e 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -25,13 +25,14 @@ import { ApplyFuncButtons, ImageToolButton } from './ImageEditorButtons';
 import { BrushHandler, BrushType } from './imageEditorUtils/BrushHandler';
 import { APISuccess, ImageUtility } from './imageEditorUtils/ImageHandler';
 import { PointerHandler } from './imageEditorUtils/PointerHandler';
-import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './imageEditorUtils/imageEditorConstants';
-import { CursorData, ImageDimensions, ImageEditTool, ImageToolType, Point } from './imageEditorUtils/imageEditorInterfaces';
+import { activeColor, bgColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './imageEditorUtils/imageEditorConstants';
+import { BrushMode, CursorData, ImageDimensions, ImageEditTool, ImageToolType, Point } from './imageEditorUtils/imageEditorInterfaces';
 import { DocumentView } from '../DocumentView';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ImageField } from '../../../../fields/URLField';
 import { resolve } from 'url';
 import { DocData } from '../../../../fields/DocSymbols';
+import { SettingsManager } from '../../../util/SettingsManager';
 
 interface GenerativeFillProps {
     imageEditorOpen: boolean;
@@ -57,13 +58,13 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
     const [edits, setEdits] = useState<{ url: string; saveRes: Doc | undefined }[]>([]);
     const [edited, setEdited] = useState(false);
     const isFirstDoc = useRef(true);
-    // const [brushStyle] = useState<BrushStyle>(BrushStyle.ADD);
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [canvasDims, setCanvasDims] = useState<ImageDimensions>({
         width: canvasSize,
         height: canvasSize,
     });
+    const [cutType, setCutType] = useState<BrushMode>(BrushMode.IN);
     // whether to create a new collection or not
     const [isNewCollection, setIsNewCollection] = useState(true);
     // the current image in the main canvas
@@ -84,6 +85,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
     // constants for image cutting
     const cutPts = useRef<Point[]>([]);
 
+
     /**
      *
      * @param type The new tool type we are changing to
@@ -380,8 +382,21 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
                 maxY = Math.max(cutPts.current[i].y, maxY);
             }
             ctx.closePath();
-            ctx.globalCompositeOperation = 'destination-in';
-            ctx.fill();
+            switch (cutType) { // may need to move this before the drawing at all for the line cases
+                case BrushMode.IN:
+                    ctx.globalCompositeOperation = 'destination-in';
+                    ctx.fill();
+                    break;
+                case BrushMode.OUT:
+                    ctx.globalCompositeOperation = 'destination-out';
+                    ctx.fill();
+                    break;
+                case BrushMode.LINE_OUT:
+                    ctx.globalCompositeOperation = 'destination-out';
+                    break;
+                case BrushMode.LINE_IN:
+                    ctx.globalCompositeOperation = 'destination-in';
+            }
         }
 
         const url = canvas.toDataURL(); // this does the same thing as convert img to canvasurl
@@ -578,6 +593,37 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
                         return ImageToolButton(tool, tool.type === currTool.type, changeTool);
                     })}
                 </div>
+                {currTool.type == ImageToolType.Cut && 
+                    <div className="cutToolContainer"> 
+                        <Button 
+                            text="Keep in"
+                            type={Type.TERT}
+                            color={cutType == BrushMode.IN ? SettingsManager.userVariantColor : bgColor}
+                            onClick={() => {
+                                setCutType(BrushMode.IN);
+                            }}/>
+                        <Button 
+                            text="Keep out"
+                            type={Type.TERT}
+                            color={cutType == BrushMode.OUT ? SettingsManager.userVariantColor : bgColor}
+                            onClick={() => {
+                                setCutType(BrushMode.OUT);
+                            }}/>
+                        <Button 
+                            text="Draw in"
+                            type={Type.TERT}
+                            color={cutType == BrushMode.LINE_IN ? SettingsManager.userVariantColor : bgColor}
+                            onClick={() => {
+                                setCutType(BrushMode.LINE_IN);
+                            }}/>
+                        <Button 
+                            text="Erase"
+                            type={Type.TERT}
+                            color={cutType == BrushMode.LINE_OUT ? SettingsManager.userVariantColor : bgColor}
+                            onClick={() => {
+                                setCutType(BrushMode.LINE_OUT);
+                            }}/>
+                    </div>}
                 <div className="sliderContainer" onPointerDown={e => e.stopPropagation()}>
                     {currTool.type === ImageToolType.GenerativeFill && (
                         <Slider
diff --git a/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts b/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts
index f4ae7d9c4..bd2fac775 100644
--- a/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts
+++ b/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts
@@ -28,8 +28,10 @@ export interface ImageEditTool {
 }
 
 export enum BrushMode {
-    ADD,
-    SUBTRACT,
+    IN,
+    OUT,
+    LINE_IN,
+    LINE_OUT,
 }
 
 export interface ImageDimensions {
-- 
cgit v1.2.3-70-g09d2