diff options
3 files changed, 61 insertions, 7 deletions
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 { |