Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 75 insertions, 64 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index a485ea4c3..25289967e 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -1,33 +1,39 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/img-redundant-alt */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/function-component-definition */
 import { Checkbox, FormControlLabel, Slider, TextField } from '@mui/material';
 import { IconButton } from 'browndash-components';
+import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { CgClose } from 'react-icons/cg';
 import { IoMdRedo, IoMdUndo } from 'react-icons/io';
+import { ClientUtils } from '../../../../ClientUtils';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { NumCast } from '../../../../fields/Types';
-import { Utils } from '../../../../Utils';
-import { Docs, DocUtils } from '../../../documents/Documents';
 import { Networking } from '../../../Network';
-import { DocumentManager } from '../../../util/DocumentManager';
+import { DocUtils } from '../../../documents/DocUtils';
+import { Docs } from '../../../documents/Documents';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
-import { OpenWhereMod } from '../DocumentView';
-import { ImageBox, ImageEditorData } from '../ImageBox';
+import { ImageEditorData } from '../ImageBox';
+import { OpenWhereMod } from '../OpenWhere';
 import './GenerativeFill.scss';
 import Buttons from './GenerativeFillButtons';
 import { BrushHandler } from './generativeFillUtils/BrushHandler';
-import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
-import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
 import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
 import { PointerHandler } from './generativeFillUtils/PointerHandler';
-import * as React from 'react';
+import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
+import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
+import { DocumentView } from '../DocumentView';
 
-enum BrushStyle {
-    ADD,
-    SUBTRACT,
-    MARQUEE,
-}
+// enum BrushStyle {
+//     ADD,
+//     SUBTRACT,
+//     MARQUEE,
+// }
 
 interface GenerativeFillProps {
     imageEditorOpen: boolean;
@@ -50,9 +56,9 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     const [isBrushing, setIsBrushing] = useState(false);
     const [canvasScale, setCanvasScale] = useState(0.5);
     // format: array of [image source, corresponding image Doc]
-    const [edits, setEdits] = useState<(string | Doc)[][]>([]);
+    const [edits, setEdits] = useState<{ url: string; saveRes: Doc | undefined }[]>([]);
     const [edited, setEdited] = useState(false);
-    const [brushStyle, setBrushStyle] = useState<BrushStyle>(BrushStyle.ADD);
+    // const [brushStyle] = useState<BrushStyle>(BrushStyle.ADD);
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [canvasDims, setCanvasDims] = useState<ImageDimensions>({
@@ -98,8 +104,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         if (!ctx || !currImg.current || !canvasRef.current) return;
 
         const target = redoStack.current[redoStack.current.length - 1];
-        if (!target) {
-        } else {
+        if (target) {
             undoStack.current = [...undoStack.current, canvasRef.current?.toDataURL()];
             const img = new Image();
             img.src = target;
@@ -131,11 +136,11 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
         setIsBrushing(true);
         const { x, y } = PointerHandler.getPointRelativeToElement(canvas, e, canvasScale);
-        BrushHandler.brushCircleOverlay(x, y, cursorData.width / 2 / canvasScale, ctx, eraserColor, brushStyle === BrushStyle.SUBTRACT);
+        BrushHandler.brushCircleOverlay(x, y, cursorData.width / 2 / canvasScale, ctx, eraserColor /* , brushStyle === BrushStyle.SUBTRACT */);
     };
 
     // stop brushing, push to undo stack
-    const handlePointerUp = (e: React.PointerEvent) => {
+    const handlePointerUp = () => {
         const ctx = ImageUtility.getCanvasContext(canvasBackgroundRef);
         if (!ctx) return;
         if (!isBrushing) return;
@@ -144,11 +149,11 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // handles brushing on pointer movement
     useEffect(() => {
-        if (!isBrushing) return;
+        if (!isBrushing) return undefined;
         const canvas = canvasRef.current;
-        if (!canvas) return;
+        if (!canvas) return undefined;
         const ctx = ImageUtility.getCanvasContext(canvasRef);
-        if (!ctx) return;
+        if (!ctx) return undefined;
 
         const handlePointerMove = (e: PointerEvent) => {
             const currPoint = PointerHandler.getPointRelativeToElement(canvas, e, canvasScale);
@@ -156,7 +161,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                 x: currPoint.x - e.movementX / canvasScale,
                 y: currPoint.y - e.movementY / canvasScale,
             };
-            BrushHandler.createBrushPathOverlay(lastPoint, currPoint, cursorData.width / 2 / canvasScale, ctx, eraserColor, brushStyle === BrushStyle.SUBTRACT);
+            BrushHandler.createBrushPathOverlay(lastPoint, currPoint, cursorData.width / 2 / canvasScale, ctx, eraserColor /* , brushStyle === BrushStyle.SUBTRACT */);
         };
 
         drawingAreaRef.current?.addEventListener('pointermove', handlePointerMove);
@@ -290,12 +295,13 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                         _height: newCollectionSize,
                         title: 'Image edit collection',
                     });
-                    DocUtils.MakeLink(imageRootDoc, newCollectionRef.current, { link_relationship: 'Image Edit Version History', link_displayLine: false });
+                    DocUtils.MakeLink(imageRootDoc, newCollectionRef.current, { link_relationship: 'Image Edit Version History' });
 
                     // opening new tab
                     CollectionDockingView.AddSplit(newCollectionRef.current, OpenWhereMod.right);
 
                     // add the doc to the main freeform
+                    // eslint-disable-next-line no-use-before-define
                     await createNewImgDoc(originalImg.current, true);
                 }
             } else {
@@ -309,16 +315,18 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                 const imgUrls = await Promise.all(urls.map(url => ImageUtility.convertImgToCanvasUrl(url, canvasDims.width, canvasDims.height)));
                 const imgRes = await Promise.all(
                     imgUrls.map(async url => {
+                        // eslint-disable-next-line no-use-before-define
                         const saveRes = await onSave(url);
-                        return [url, saveRes as Doc];
+                        return { url, saveRes };
                     })
                 );
                 setEdits(imgRes);
                 const image = new Image();
+                // eslint-disable-next-line prefer-destructuring
                 image.src = imgUrls[0];
                 ImageUtility.drawImgToCanvas(image, canvasRef, canvasDims.width, canvasDims.height);
                 currImg.current = image;
-                parentDoc.current = imgRes[0][1] as Doc;
+                parentDoc.current = imgRes[0].saveRes ?? null;
             }
         } catch (err) {
             console.log(err);
@@ -332,7 +340,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         const startY = NumCast(parentDoc.current.y);
         const children = DocListCast(parentDoc.current.gen_fill_children);
         const len = children.length;
-        let initialYPositions: number[] = [];
+        const initialYPositions: number[] = [];
         for (let i = 0; i < len; i++) {
             initialYPositions.push(startY + i * offsetDistanceY);
         }
@@ -347,10 +355,10 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // creates a new image document and returns its reference
     const createNewImgDoc = async (img: HTMLImageElement, firstDoc: boolean): Promise<Doc | undefined> => {
-        if (!imageRootDoc) return;
-        const src = img.src;
+        if (!imageRootDoc) return undefined;
+        const { src } = img;
         const [result] = await Networking.PostToServer('/uploadRemoteImage', { sources: [src] });
-        const source = Utils.prepend(result.accessPaths.agnostic.client);
+        const source = ClientUtils.prepend(result.accessPaths.agnostic.client);
 
         if (firstDoc) {
             const x = 0;
@@ -370,51 +378,51 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             }
             parentDoc.current = newImg;
             return newImg;
-        } else {
-            if (!parentDoc.current) return;
-            const x = NumCast(parentDoc.current.x) + freeformRenderSize + offsetX;
-            const initialY = 0;
-
-            const newImg = Docs.Create.ImageDocument(source, {
-                x: x,
-                y: initialY,
-                _height: freeformRenderSize,
-                _width: freeformRenderSize,
-                data_nativeWidth: result.nativeWidth,
-                data_nativeHeight: result.nativeHeight,
-            });
+        }
+        if (!parentDoc.current) return undefined;
+        const x = NumCast(parentDoc.current.x) + freeformRenderSize + offsetX;
+        const initialY = 0;
+
+        const newImg = Docs.Create.ImageDocument(source, {
+            x: x,
+            y: initialY,
+            _height: freeformRenderSize,
+            _width: freeformRenderSize,
+            data_nativeWidth: result.nativeWidth,
+            data_nativeHeight: result.nativeHeight,
+        });
 
-            const parentList = DocListCast(parentDoc.current.gen_fill_children);
-            if (parentList.length > 0) {
-                parentList.push(newImg);
-                parentDoc.current.gen_fill_children = new List<Doc>(parentList);
-            } else {
-                parentDoc.current.gen_fill_children = new List<Doc>([newImg]);
-            }
+        const parentList = DocListCast(parentDoc.current.gen_fill_children);
+        if (parentList.length > 0) {
+            parentList.push(newImg);
+            parentDoc.current.gen_fill_children = new List<Doc>(parentList);
+        } else {
+            parentDoc.current.gen_fill_children = new List<Doc>([newImg]);
+        }
 
-            DocUtils.MakeLink(parentDoc.current, newImg, { link_relationship: `Image edit; Prompt: ${input}`, link_displayLine: true });
-            adjustImgPositions();
+        DocUtils.MakeLink(parentDoc.current, newImg, { link_relationship: `Image edit; Prompt: ${input}` });
+        adjustImgPositions();
 
-            if (isNewCollection && newCollectionRef.current) {
-                Doc.AddDocToList(newCollectionRef.current, undefined, newImg);
-            } else {
-                addDoc?.(newImg);
-            }
-            return newImg;
+        if (isNewCollection && newCollectionRef.current) {
+            Doc.AddDocToList(newCollectionRef.current, undefined, newImg);
+        } else {
+            addDoc?.(newImg);
         }
+        return newImg;
     };
 
     // Saves an image to the collection
     const onSave = async (src: string) => {
         const img = new Image();
         img.src = src;
-        if (!currImg.current || !originalImg.current || !imageRootDoc) return;
+        if (!currImg.current || !originalImg.current || !imageRootDoc) return undefined;
         try {
             const res = await createNewImgDoc(img, false);
             return res;
         } catch (err) {
             console.log(err);
         }
+        return undefined;
     };
 
     // Closes the editor view
@@ -422,7 +430,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
         ImageEditorData.Open = false;
         ImageEditorData.Source = '';
         if (newCollectionRef.current) {
-            DocumentManager.Instance.AddViewRenderedCb(newCollectionRef.current, dv => (dv.ComponentView as CollectionFreeFormView)?.fitContentOnce());
+            DocumentView.addViewRenderedCb(newCollectionRef.current, dv => (dv.ComponentView as CollectionFreeFormView)?.fitContentOnce());
         }
         setEdits([]);
     };
@@ -443,12 +451,12 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                                 }}
                             />
                         }
-                        label={'Create New Collection'}
+                        label="Create New Collection"
                         labelPlacement="end"
                         sx={{ whiteSpace: 'nowrap' }}
                     />
                     <Buttons getEdit={getEdit} loading={loading} onReset={handleReset} />
-                    <IconButton color={activeColor} tooltip="close" icon={<CgClose size={'16px'} />} onClick={handleViewClose} />
+                    <IconButton color={activeColor} tooltip="close" icon={<CgClose size="16px" />} onClick={handleViewClose} />
                 </div>
             </div>
             {/* Main canvas for editing */}
@@ -469,7 +477,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                         width: cursorData.width,
                         height: cursorData.width,
                     }}>
-                    <div className="innerPointer"></div>
+                    <div className="innerPointer" />
                 </div>
                 {/* Icons */}
                 <div className="iconContainer">
@@ -519,11 +527,13 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                         />
                     </div>
                 </div>
-                {/* Edits thumbnails*/}
+                {/* Edits thumbnails */}
                 <div className="editsBox">
                     {edits.map((edit, i) => (
                         <img
+                            // eslint-disable-next-line react/no-array-index-key
                             key={i}
+                            alt="image edits"
                             width={75}
                             src={edit[0] as string}
                             style={{ cursor: 'pointer' }}
@@ -552,6 +562,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                                 Original
                             </label>
                             <img
+                                alt="image stuff"
                                 width={75}
                                 src={originalImg.current?.src}
                                 style={{ cursor: 'pointer' }}