added ai editor to collections

1 files changed, 70 insertions, 28 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 7834eb352..112bfd178 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,9 +1,5 @@
 import { Bezier } from 'bezier-js';
-<<<<<<< HEAD
-import { Button, Colors, Type } from 'browndash-components';
-=======
-import { Colors } from '@dash/components';
->>>>>>> 2f7d1f0073943e1eb9e0f34c4459bc0176377697
+import { Button, Colors, Type } from '@dash/components';
 import { Property } from 'csstype';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -73,6 +69,9 @@ import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import ReactLoading from 'react-loading';
 import { SettingsManager } from '../../../util/SettingsManager';
+import { Slider } from '@mui/material';
+import { AiOutlineSend } from 'react-icons/ai';
+import { DrawingFillHandler } from '../../smartdraw/DrawingFillHandler';
 
 @observer
 class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> {
@@ -2194,8 +2193,21 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     @observable private _regenInput = '';
+    @observable private _drawingFillInput = '';
     @observable private _canInteract = true;
-    @observable private _regenerateLoading = false;
+    @observable private _regenLoading = false;
+    @observable private _drawingFillLoading = false;
+    @observable private _fireflyRefStrength = 50;
+    // _oldDrag: HTMLElement | null = null;
+
+    // onPassiveDrag = (e: PointerEvent) => e.stopPropagation();
+    // protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
+    //     // this._dropDisposer?.();
+    //     this._oldDrag?.removeEventListener('pointerdown', this.onPassiveDrag);
+    //     this._oldDrag = ele;
+    //     // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
+    //     ele?.addEventListener('pointerdown', this.onPassiveDrag, { passive: false });
+    // };
 
     componentAIViewHistory = () => {
         return (
@@ -2218,49 +2230,79 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     componentAIView = () => {
         const showRegenerate = this.Document[DocData].ai;
         return (
-            <div className="collectionfreeformview-aiView">
-                Edit Image with AI
+            <div className="collectionfreeformview-aiView" onPointerDown={e => e.stopPropagation()}>
+                Edit Collection with AI
                 {showRegenerate && (
                     <div className="collectionfreeformview-aiView-regenerate-container">
-                        {/* <text className="collectionfreeformview-aiView-subtitle">Regenerate AI Image</text>
+                        <text className="collectionfreeformview-aiView-subtitle">Regenerate AI Image</text>
                         <div className="collectionfreeformview-aiView-regenerate">
                             <input
                                 className="collectionfreeformview-aiView-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="Prompt (Optional)"
                             />
                             <Button
                                 text="Regenerate"
                                 type={Type.SEC}
-                                icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                                icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                                 iconPlacement="right"
                                 onClick={action(async () => {
-                                    this._regenerateLoading = true;
-                                    SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newDrawings => {
-                                        if (newDrawings[0]) {
-                                        }
-                                    });
+                                    this._regenLoading = true;
+                                    SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
+                                    SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
+                                    SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
+                                    await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
+                                    this._regenLoading = false;
                                 })}
                             />
-                            <Button
-                                // style={{ alignSelf: 'flex-end' }}
-                                text="Get Variations"
-                                type={Type.SEC}
-                                // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                                iconPlacement="right"
-                                // onClick={this.handleSendClick}
-                            />
-                        </div> */}
+                        </div>
                     </div>
                 )}
                 <div className="collectionfreeformview-aiView-options-container">
-                    {showRegenerate && <text className="collectionfreeformview-aiView-subtitle"> Turn Drawing to Image </text>}
-                    <div className="collectionfreeformview-aiView-options"></div>
+                    <text className="collectionfreeformview-aiView-subtitle"> Create Image with Firefly </text>
+                    <div className="collectionfreeformview-aiView-options">
+                        <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => this._canInteract && (this._drawingFillInput = e.target.value))} />
+                        <div className="collectionfreeformview-aiView-strength">
+                            Reference Strength
+                            <Slider
+                                className="collectionfreeformview-aiView-slider"
+                                sx={{
+                                    '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
+                                    '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
+                                    '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
+                                }}
+                                min={1}
+                                max={100}
+                                step={1}
+                                size="small"
+                                value={this._fireflyRefStrength}
+                                onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
+                                valueLabelDisplay="auto"
+                            />
+                        </div>
+                        <Button
+                            text="Send"
+                            type={Type.SEC}
+                            icon={this._drawingFillLoading && this._drawingFillInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                            iconPlacement="right"
+                            onClick={undoable(
+                                action(() => {
+                                    this._drawingFillLoading = true;
+                                    DrawingFillHandler.drawingToImage(
+                                        this.props.Document,
+                                        this._fireflyRefStrength,
+                                        this._drawingFillInput !== '' ? this._drawingFillInput : StrCast(this.props.Document.title) !== 'grouping' ? StrCast(this.props.Document.title) : ''
+                                    );
+                                    this._drawingFillInput = '';
+                                    this._drawingFillLoading = false;
+                                }),
+                                'create image'
+                            )}
+                        />
+                    </div>
                 </div>
             </div>
         );