diff options
| -rw-r--r-- | src/client/views/nodes/imageEditor/ImageEditor.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts | 2 |
2 files changed, 11 insertions, 9 deletions
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx index 980f3e566..e6d651ee9 100644 --- a/src/client/views/nodes/imageEditor/ImageEditor.tsx +++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx @@ -57,7 +57,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc // format: array of [image source, corresponding image Doc] const [edits, setEdits] = useState<{ url: string; saveRes: Doc | undefined }[]>([]); const [edited, setEdited] = useState(false); - const isFirstDoc = useRef(true); + const [isFirstDoc, setIsFirstDoc] = useState<boolean>(true); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [canvasDims, setCanvasDims] = useState<ImageDimensions>({ @@ -355,7 +355,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc setLoading(false); }; - const cutImage = async (currCutType: BrushMode, brushWidth: number, prevEdits: { url: string; saveRes: Doc | undefined }[]) => { + const cutImage = async (currCutType: BrushMode, brushWidth: number, prevEdits: { url: string; saveRes: Doc | undefined }[], firstDoc: boolean) => { const img = currImg.current; const canvas = canvasRef.current; if (!canvas || !img) return; @@ -366,13 +366,14 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc const canvasOriginalImg = ImageUtility.getCanvasImg(img); if (!canvasOriginalImg) return; // NOTE: cutting two diff shapes can be made possible by having the user press a button to set a new shape! + if (currCutType !== BrushMode.LINE_OUT) handleReset(); // gets rid of the visible brush strokes (mostly needed for line_in) unless it's erasing (which depends on the brush strokes) let minX = img.width; let maxX = 0; let minY = img.height; let maxY = 0; if (cutPts.current.length) { ctx.beginPath(); - ctx.moveTo(cutPts.current[0].x, cutPts.current[0].y); // later check edge case where cutPts is empty + ctx.moveTo(cutPts.current[0].x, cutPts.current[0].y); for (let i = 0; i < cutPts.current.length; i++) { ctx.lineTo(cutPts.current[i].x, cutPts.current[i].y); minX = Math.min(cutPts.current[i].x, minX); @@ -393,7 +394,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc break; case BrushMode.LINE_IN: ctx.globalCompositeOperation = 'destination-in'; - ctx.lineWidth = brushWidth + 20; + ctx.lineWidth = brushWidth + 10; // added offset because width gets cut off a little bit ctx.stroke(); break; } @@ -426,16 +427,16 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc let finalImg: HTMLImageElement | undefined = image; let finalImgURL: string = url; if (currCutType == BrushMode.IN) { - const croppedData = cropImage(image, minX, maxY, minY, maxY); + const croppedData = cropImage(image, minX, maxX, minY, maxY); finalImg = croppedData; finalImgURL = croppedData.src; } currImg.current = finalImg; - const newImgDoc = await createNewImgDoc(finalImg, isFirstDoc.current); + const newImgDoc = await createNewImgDoc(finalImg, firstDoc); if (newImgDoc) { const docData = newImgDoc[DocData]; docData.backgroundColor = 'transparent'; - if (isFirstDoc.current) isFirstDoc.current = false; + if (firstDoc) setIsFirstDoc(false); setEdits([...prevEdits, { url: finalImgURL, saveRes: undefined }]); } setLoading(false); @@ -557,6 +558,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc DocumentView.addViewRenderedCb(newCollectionRef.current, dv => (dv.ComponentView as CollectionFreeFormView)?.fitContentOnce()); } setEdits([]); + setIsFirstDoc(true); }; // defines the tools and sets current tool @@ -587,7 +589,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc labelPlacement="end" sx={{ whiteSpace: 'nowrap' }} /> - <ApplyFuncButtons onClick={() => currTool.applyFunc(cutType, cursorData.width, edits)} loading={loading} onReset={handleReset} btnText={currTool.btnText} /> + <ApplyFuncButtons onClick={() => currTool.applyFunc(cutType, cursorData.width, edits, isFirstDoc)} loading={loading} onReset={handleReset} btnText={currTool.btnText} /> <IconButton color={activeColor} tooltip="close" icon={<CgClose size="16px" />} onClick={handleViewClose} /> </div> </div> diff --git a/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts b/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts index 660af7c42..75659fc53 100644 --- a/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts +++ b/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorInterfaces.ts @@ -22,7 +22,7 @@ export interface ImageEditTool { name: string; btnText: string; icon: IconProp; - applyFunc: (currCutType: BrushMode, brushWidth: number, prevEdits: { url: string; saveRes: Doc | undefined }[]) => Promise<void>; + applyFunc: (currCutType: BrushMode, brushWidth: number, prevEdits: { url: string; saveRes: Doc | undefined }[], isFirstDoc: boolean) => Promise<void>; sliderMin?: number; sliderMax?: number; sliderDefault?: number; |