code cleanup

1 files changed, 188 insertions, 178 deletions

diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 5ebe2e358..58db091bc 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -26,6 +26,7 @@ import './SmartDrawHandler.scss';
 import { Networking } from '../../Network';
 import { OpenWhere } from '../nodes/OpenWhere';
 import { FireflyDimensionsMap, FireflyImageDimensions, FireflyImageData } from './FireflyConstants';
+import { DocumentType } from '../../documents/DocumentTypes';
 
 export interface DrawingOptions {
     text: string;
@@ -272,19 +273,19 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         const dims = FireflyDimensionsMap[this._imgDims];
         return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed: seed }).then(img => {
             if (!changeInPlace) {
-                const seed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1];
+                const aiseed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1];
                 const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, {
                     title: input.match(/^(.*?)~~~.*$/)?.[1] || input,
                     nativeWidth: dims.width,
                     nativeHeight: dims.height,
                     ai: 'firefly',
-                    ai_firefly_seed: seed,
+                    ai_firefly_seed: aiseed,
                     ai_firefly_prompt: input,
                 });
                 DocumentViewInternal.addDocTabFunc(imgDoc, OpenWhere.addRight);
                 this._selectedDocs.push(imgDoc);
             }
-            return { prompt: input, seed: seed, pathname: img.accessPaths.agnostic.client };
+            return { prompt: input, seed, pathname: img.accessPaths.agnostic.client };
         });
     };
 
@@ -293,44 +294,43 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      * @param doc the drawing Docs to regenerate
      */
     @action
-    regenerate = async (drawingDocs: Doc[], lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string, changeInPlace?: boolean) => {
+    regenerate = (drawingDocs: Doc[], lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string, changeInPlace?: boolean) => {
         if (lastInput) this._lastInput = lastInput;
         if (lastResponse) this._lastResponse = lastResponse;
         if (regenInput) this._regenInput = regenInput;
-        return await Promise.all(
+        return Promise.all(
             drawingDocs.map(async doc => {
-                const docData = doc[DocData];
-                if (docData.type == 'image') {
-                    const seed: number = docData?.ai_firefly_seed as number;
-                    if (this._regenInput !== '') {
-                        // if (this._selectedDoc) {
-                        const newPrompt = `${docData.ai_firefly_prompt} ~~~ ${this._regenInput}`;
-                        return this.createImageWithFirefly(newPrompt, seed, changeInPlace);
-                        // }
-                    } else {
-                        return this.createImageWithFirefly(this._lastInput.text || StrCast(docData.ai_firefly_prompt), undefined, changeInPlace);
-                    }
-                }
-                if (docData.type == 'collection') {
-                    try {
-                        let res;
-                        if (this._regenInput !== '') {
-                            const prompt: string = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`;
-                            res = await gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true);
-                            this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`;
-                        } else {
-                            res = await gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true);
+                switch (doc.type) {
+                    case DocumentType.IMG:
+                        if (this._regenInput) {
+                            // if (this._selectedDoc) {
+                            const newPrompt = `${doc.ai_firefly_prompt} ~~~ ${this._regenInput}`;
+                            return this.createImageWithFirefly(newPrompt, NumCast(doc?.ai_firefly_seed), changeInPlace);
+                            // }
                         }
-                        if (!res) {
-                            console.error('GPT call failed');
-                            return;
+                        return this.createImageWithFirefly(this._lastInput.text || StrCast(doc.ai_firefly_prompt), undefined, changeInPlace);
+                    case DocumentType.COL: {
+                        try {
+                            let res;
+                            if (this._regenInput) {
+                                const prompt = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`;
+                                res = await gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true);
+                                this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`;
+                            } else {
+                                res = await gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true);
+                            }
+                            if (res) {
+                                const strokeData = await this.parseSvg(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor);
+                                this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, doc);
+                                const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
+                                drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
+                            } else {
+                                console.error('GPT call failed');
+                            }
+                        } catch (err) {
+                            console.error('Error regenerating drawing', err);
                         }
-                        const strokeData = await this.parseSvg(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor);
-                        this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, doc);
-                        const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
-                        drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
-                    } catch (err) {
-                        console.error('Error regenerating drawing', err);
+                        break;
                     }
                 }
             })
@@ -340,7 +340,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     /**
      * Parses the svg code that GPT returns into Bezier curves, with coordinates and colors.
      */
-    @action
     parseSvg = async (res: string, startPoint: { X: number; Y: number }, regenerate: boolean, autoColor: boolean) => {
         const svg = res.match(/<svg[^>]*>([\s\S]*?)<\/svg>/g);
         if (svg) {
@@ -401,7 +400,108 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         });
     }, 'color strokes');
 
-    renderDisplay() {
+    renderGenerateOutputOptions = () => (
+        <div className="smartdraw-output-options">
+            <div className="drawing-checkbox">
+                Generate Ink
+                <Checkbox
+                    sx={{
+                        color: 'white',
+                        '&.Mui-checked': {
+                            color: SettingsManager.userVariantColor,
+                        },
+                    }}
+                    checked={this._generateDrawing}
+                    onChange={() => this._canInteract && (this._generateDrawing = !this._generateDrawing)}
+                />
+            </div>
+            <div className="image-checkbox">
+                Generate Image
+                <Checkbox
+                    sx={{
+                        color: 'white',
+                        '&.Mui-checked': {
+                            color: SettingsManager.userVariantColor,
+                        },
+                    }}
+                    checked={this._generateImage}
+                    onChange={() => this._canInteract && (this._generateImage = !this._generateImage)}
+                />
+            </div>
+        </div>
+    );
+
+    renderGenerateDrawing = () => (
+        <div className="smartdraw-options-container">
+            Drawing Options
+            <div className="smartdraw-options">
+                <div className="smartdraw-auto-color">
+                    Auto color
+                    <Switch
+                        sx={{
+                            '& .MuiSwitch-switchBase.Mui-checked': { color: SettingsManager.userColor },
+                            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { backgroundColor: SettingsManager.userVariantColor },
+                        }}
+                        defaultChecked={true}
+                        value={this._autoColor}
+                        size="small"
+                        onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))}
+                    />
+                </div>
+                <div className="smartdraw-complexity">
+                    Complexity
+                    <Slider
+                        className="smartdraw-slider"
+                        sx={{
+                            '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
+                            '& .MuiSlider-rail': { color: SettingsManager.userColor },
+                            '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
+                        }}
+                        min={1}
+                        max={10}
+                        step={1}
+                        size="small"
+                        value={this._complexity}
+                        onChange={action((e, val) => this._canInteract && (this._complexity = val as number))}
+                        valueLabelDisplay="auto"
+                    />
+                </div>
+                <div className="smartdraw-size">
+                    Size (in pixels)
+                    <Slider
+                        className="smartdraw-slider"
+                        sx={{
+                            '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
+                            '& .MuiSlider-rail': { color: SettingsManager.userColor },
+                            '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20` } },
+                        }}
+                        min={50}
+                        max={700}
+                        step={10}
+                        size="small"
+                        value={this._size}
+                        onChange={action((e, val) => this._canInteract && (this._size = val as number))}
+                        valueLabelDisplay="auto"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+
+    renderGenerateImage = () => (
+        <div className="smartdraw-options-container">
+            Image Options
+            <div className="smartdraw-dimensions">
+                <RadioGroup row defaultValue="square" sx={{ alignItems: 'center' }}>
+                    {Object.values(FireflyImageDimensions).map(dim => (
+                        <FormControlLabel sx={{ width: '40%' }} key={dim} value={dim} control={<Radio />} onChange={() => this._canInteract && (this._imgDims = dim)} label={dim} />
+                    ))}
+                </RadioGroup>
+            </div>
+        </div>
+    );
+
+    renderDisplay = () => {
         return (
             <div
                 className="smart-draw-handler"
@@ -444,154 +544,64 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                 </div>
                 {this._showOptions && (
                     <div>
-                        <div className="smartdraw-output-options">
-                            <div className="drawing-checkbox">
-                                Generate Ink
-                                <Checkbox
-                                    sx={{
-                                        color: 'white',
-                                        '&.Mui-checked': {
-                                            color: SettingsManager.userVariantColor,
-                                        },
-                                    }}
-                                    checked={this._generateDrawing}
-                                    onChange={() => this._canInteract && (this._generateDrawing = !this._generateDrawing)}
-                                />
-                            </div>
-                            <div className="image-checkbox">
-                                Generate Image
-                                <Checkbox
-                                    sx={{
-                                        color: 'white',
-                                        '&.Mui-checked': {
-                                            color: SettingsManager.userVariantColor,
-                                        },
-                                    }}
-                                    checked={this._generateImage}
-                                    onChange={() => this._canInteract && (this._generateImage = !this._generateImage)}
-                                />
-                            </div>
-                        </div>
-                        {this._generateDrawing && (
-                            <div className="smartdraw-options-container">
-                                Drawing Options
-                                <div className="smartdraw-options">
-                                    <div className="smartdraw-auto-color">
-                                        Auto color
-                                        <Switch
-                                            sx={{
-                                                '& .MuiSwitch-switchBase.Mui-checked': { color: SettingsManager.userColor },
-                                                '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { backgroundColor: SettingsManager.userVariantColor },
-                                            }}
-                                            defaultChecked={true}
-                                            value={this._autoColor}
-                                            size="small"
-                                            onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))}
-                                        />
-                                    </div>
-                                    <div className="smartdraw-complexity">
-                                        Complexity
-                                        <Slider
-                                            className="smartdraw-slider"
-                                            sx={{
-                                                '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
-                                                '& .MuiSlider-rail': { color: SettingsManager.userColor },
-                                                '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
-                                            }}
-                                            min={1}
-                                            max={10}
-                                            step={1}
-                                            size="small"
-                                            value={this._complexity}
-                                            onChange={action((e, val) => this._canInteract && (this._complexity = val as number))}
-                                            valueLabelDisplay="auto"
-                                        />
-                                    </div>
-                                    <div className="smartdraw-size">
-                                        Size (in pixels)
-                                        <Slider
-                                            className="smartdraw-slider"
-                                            sx={{
-                                                '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
-                                                '& .MuiSlider-rail': { color: SettingsManager.userColor },
-                                                '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20` } },
-                                            }}
-                                            min={50}
-                                            max={700}
-                                            step={10}
-                                            size="small"
-                                            value={this._size}
-                                            onChange={action((e, val) => this._canInteract && (this._size = val as number))}
-                                            valueLabelDisplay="auto"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                        {this._generateImage && (
-                            <div className="smartdraw-options-container">
-                                Image Options
-                                <div className="smartdraw-dimensions">
-                                    <RadioGroup row defaultValue="square" sx={{ alignItems: 'center' }}>
-                                        <FormControlLabel sx={{ width: '40%' }} value="square" control={<Radio />} onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Square)} label="Square" />
-                                        <FormControlLabel sx={{ width: '40%' }} value="landscape" control={<Radio />} onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Landscape)} label="Landscape" />
-                                        <FormControlLabel sx={{ width: '40%' }} value="portrait" control={<Radio />} onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Portrait)} label="Portrait" />
-                                        <FormControlLabel sx={{ width: '40%' }} value="widescreen" control={<Radio />} onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Widescreen)} label="Widescreen" />
-                                    </RadioGroup>
-                                </div>
-                            </div>
-                        )}
+                        {this.renderGenerateOutputOptions()}
+                        {this._generateDrawing ? this.renderGenerateDrawing() : null}
+                        {this._generateImage ? this.renderGenerateImage() : null}
                     </div>
                 )}
             </div>
         );
-    }
+    };
 
-    renderRegenerate() {
-        return (
-            <div
-                className="smart-draw-handler"
-                style={{
-                    left: this._pageX,
-                    ...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
-                    background: SettingsManager.userBackgroundColor,
-                    color: SettingsManager.userColor,
-                }}>
-                <div className="regenerate-box">
-                    <IconButton
-                        tooltip="Regenerate"
-                        icon={this._isLoading && this._regenInput === '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon={'rotate'} />}
-                        color={SettingsManager.userColor}
-                        onClick={this.handleSendClick}
-                    />
-                    <IconButton tooltip="Edit with GPT" icon={<FontAwesomeIcon icon="pen-to-square" />} color={SettingsManager.userColor} onClick={action(() => (this._showEditBox = !this._showEditBox))} />
-                    {this._showEditBox && (
-                        <div className="edit-box">
-                            <input
-                                aria-label="Edit instructions input"
-                                className="smartdraw-input"
-                                type="text"
-                                value={this._regenInput}
-                                onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
-                                onKeyDown={this.handleKeyPress}
-                                placeholder="Edit instructions"
-                            />
-                            <Button
-                                style={{ alignSelf: 'flex-end' }}
-                                text="Send"
-                                icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                                iconPlacement="right"
-                                color={SettingsManager.userColor}
-                                onClick={this.handleSendClick}
-                            />
-                        </div>
-                    )}
-                </div>
+    renderRegenerateEditBox = () => (
+        <div className="edit-box">
+            <input
+                aria-label="Edit instructions input"
+                className="smartdraw-input"
+                type="text"
+                value={this._regenInput}
+                onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+                onKeyDown={this.handleKeyPress}
+                placeholder="Edit instructions"
+            />
+            <Button
+                style={{ alignSelf: 'flex-end' }}
+                text="Send"
+                icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                iconPlacement="right"
+                color={SettingsManager.userColor}
+                onClick={this.handleSendClick}
+            />
+        </div>
+    );
+
+    renderRegenerate = () => (
+        <div
+            className="smart-draw-handler"
+            style={{
+                left: this._pageX,
+                ...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
+                background: SettingsManager.userBackgroundColor,
+                color: SettingsManager.userColor,
+            }}>
+            <div className="regenerate-box">
+                <IconButton
+                    tooltip="Regenerate"
+                    icon={this._isLoading && this._regenInput === '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon={'rotate'} />}
+                    color={SettingsManager.userColor}
+                    onClick={this.handleSendClick}
+                />
+                <IconButton tooltip="Edit with GPT" icon={<FontAwesomeIcon icon="pen-to-square" />} color={SettingsManager.userColor} onClick={action(() => (this._showEditBox = !this._showEditBox))} />
+                {this._showEditBox ? this.renderRegenerateEditBox() : null}
             </div>
-        );
-    }
+        </div>
+    );
 
     render() {
-        return this._display ? this.renderDisplay() : this.ShowRegenerate ? this.renderRegenerate() : null;
+        return this._display
+            ? this.renderDisplay() //
+            : this.ShowRegenerate
+              ? this.renderRegenerate()
+              : null;
     }
 }