bug and render fixes

2 files changed, 51 insertions, 161 deletions

diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx
index c8ce9e653..83f173fcb 100644
--- a/src/client/views/smartdraw/AnnotationPalette.tsx
+++ b/src/client/views/smartdraw/AnnotationPalette.tsx
@@ -8,13 +8,13 @@ import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
 import { returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
-import { ActiveInkWidth, Doc, DocListCast, StrListCast } from '../../../fields/Doc';
+import { ActiveInkWidth, Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { InkData, InkField } from '../../../fields/InkField';
 import { BoolCast, DocCast, ImageCast, NumCast } from '../../../fields/Types';
 import { emptyFunction, unimplementedFunction } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
-import { makeUserTemplateButton } from '../../util/DropConverter';
+import { makeUserTemplateButton, makeUserTemplateImage } from '../../util/DropConverter';
 import { SettingsManager } from '../../util/SettingsManager';
 import { Transform } from '../../util/Transform';
 import { undoable, undoBatch } from '../../util/UndoManager';
@@ -28,20 +28,18 @@ import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { ImageField } from '../../../fields/URLField';
 import { CollectionCarousel3DView } from '../collections/CollectionCarousel3DView';
+import { Copy } from '../../../fields/FieldSymbols';
 
 @observer
-export class AnnotationPalette extends ObservableReactComponent<{}> {
+export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc }> {
     static Instance: AnnotationPalette;
-    @observable private _display: boolean = false;
     @observable private _paletteMode: 'create' | 'view' = 'view';
     @observable private _userInput: string = '';
     @observable private _isLoading: boolean = false;
     @observable private _canInteract: boolean = true;
     @observable private _showRegenerate: boolean = false;
-    @observable private _freeFormCanvas = Docs.Create.FreeformDocument([], {});
-    @observable private _drawingCarousel = Docs.Create.CarouselDocument([], {});
-    @observable private _drawings: Doc[] = [];
-    private _drawing: Doc[] = [];
+    @observable private _docView: DocumentView | null = null;
+    @observable private _docCarouselView: DocumentView | null = null;
     @observable private _opts: DrawingOptions = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 };
     private _gptRes: string[] = [];
 
@@ -55,33 +53,16 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
         return FieldView.LayoutString(AnnotationPalette, fieldKey);
     }
 
-    public get FreeformCanvas() {
-        return this._freeFormCanvas;
-    }
-
-    public get DrawingCarousel() {
-        return this._drawingCarousel;
-    }
-
-    // componentDidUpdate(prevProps: Readonly<{}>) {
-    //     const docView = DocumentView.getDocumentView(this._freeFormCanvas);
-    //     const componentView = docView?.ComponentView as CollectionFreeFormView;
-    //     if (componentView) {
-    //         componentView.fitContentOnce();
-    //     }
-    //     this._freeFormCanvas._freeform_fitContentsToBox = false;
-    // }
+    Contains = (view: DocumentView) => {
+        return (this._docView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docView)) || (this._docCarouselView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docCarouselView));
+    };
 
     return170 = () => 170;
 
     @action
     handleKeyPress = async (event: React.KeyboardEvent) => {
         if (event.key === 'Enter') {
-            // if (this._showRegenerate) {
-            //     this.regenerate();
-            // } else {
             await this.generateDrawing();
-            // }
         }
     };
 
@@ -117,42 +98,34 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
         this.setDetail(5);
         this.setColor(true);
         this.setSize(200);
-        this._freeFormCanvas = Docs.Create.FreeformDocument([], {});
-        this._drawingCarousel = Docs.Create.CarouselDocument([], {});
         this._showRegenerate = false;
         this._canInteract = true;
-        this._drawing = [];
-        this._drawings = [];
         this._opts = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 };
         this._gptRes = [];
     };
 
-    addToPalette = async (doc: Doc) => {
-        if (!doc.savedAsAnno) {
-            const clone = await Doc.MakeClone(doc);
-            clone.clone.title = doc.title;
-            const image = await this.getIcon(doc);
-            if (image) {
-                const imageDoc = Docs.Create.ImageDocument(image);
-                Doc.AddDocToList(Doc.MyAnnos, 'data', imageDoc);
-            }
-            doc.savedAsAnno = true;
-            // const templateBtn = makeUserTemplateButton(clone.clone);
-            // Doc.AddDocToList(Doc.MyAnnos, 'data', templateBtn);
-            // this.resetPalette(true);
-        }
+    public static addToPalette = async (doc: Doc) => {
+        // if (!doc.savedAsAnno) {
+        //     const clone = await Doc.MakeClone(doc);
+        //     clone.clone.title = doc.title;
+        //     const image = (await this.getIcon(doc))?.[Copy]();
+        //     if (image) {
+        //         const imageTemplate = makeUserTemplateImage(clone.clone, image);
+        //         Doc.AddDocToList(Doc.MyAnnos, 'data', imageTemplate);
+        //         doc.savedAsAnno = true;
+        //     }
+        //     this.resetPalette(true);
+        // }
     };
 
-    @action
-    displayPalette = (display: boolean) => {
-        this._display = display;
-    };
+    // @action
+    // displayPalette = (display: boolean) => {
+    //     this._display = display;
+    // };
 
     @undoBatch
     generateDrawing = action(async () => {
         this._isLoading = true;
-        this._drawings = [];
-        this._drawing = [];
         for (var i = 0; i < 3; i++) {
             try {
                 SmartDrawHandler.Instance._addFunc = this.createDrawing;
@@ -177,8 +150,8 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
     createDrawing = (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string) => {
         this._opts = opts;
         this._gptRes.push(gptRes);
-        this._drawing = [];
-        // const childDocs = DocListCast(this._drawing1[DocData].data);
+        const drawing: Doc[] = [];
+
         strokeList.forEach((stroke: [InkData, string, string]) => {
             const bounds = InkField.getBounds(stroke[0]);
             const inkWidth = ActiveInkWidth();
@@ -199,51 +172,27 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
                 ActiveDash(),
                 ActiveIsInkMask()
             );
-            this._drawing.push(inkDoc);
-            // childDocs.push(inkDoc);
+            drawing.push(inkDoc);
         });
 
-        const cv = DocumentView.getDocumentView(this._freeFormCanvas)?.ComponentView as CollectionFreeFormView;
-        const collection = cv._marqueeViewRef.current?.collection(undefined, true, this._drawing);
+        const collection = MarqueeView.getCollection(drawing, undefined, true, { left: 1, top: 1, width: 1, height: 1 });
         if (collection) {
-            this._drawings.push(collection);
-            cv.fitContentOnce();
+            Doc.AddDocToList(this._props.Document, 'data', collection);
         }
-        this._drawingCarousel = Docs.Create.CarouselDocument(this._drawings, { childLayoutFitWidth: true, _layout_fitWidth: true, _freeform_fitContentsToBox: true });
-        this._freeFormCanvas = Docs.Create.FreeformDocument(this._drawing, { _freeform_fitContentsToBox: true });
     };
 
     saveDrawing = async () => {
-        // const cv = DocumentView.getDocumentView(this._freeFormCanvas)?.ComponentView as CollectionFreeFormView;
-        // if (cv) {
-        // const collection = cv._marqueeViewRef.current?.collection(undefined, true, this._drawing);
-        const cIndex: number = this._drawingCarousel.carousel_index as number;
-        const focusedDrawing = this._drawings[cIndex];
-
-        const docData = focusedDrawing[DocData];
-        docData.title = this._opts.text.match(/^(.*?)~~~.*$/)?.[1] || this._opts.text;
-        docData.drawingInput = this._opts.text;
-        docData.drawingComplexity = this._opts.complexity;
-        docData.drawingColored = this._opts.autoColor;
-        docData.drawingSize = this._opts.size;
-        docData.drawingData = this._gptRes[cIndex];
-        docData.width = this._opts.size;
-        // const image = await this.getIcon(collection);
-        await this.addToPalette(focusedDrawing);
-
-        // if (collection) {
-        //     const docData = collection[DocData];
-        //     docData.title = this._opts.text.match(/^(.*?)~~~.*$/)?.[1] || this._opts.text;
-        //     docData.drawingInput = this._opts.text;
-        //     docData.drawingComplexity = this._opts.complexity;
-        //     docData.drawingColored = this._opts.autoColor;
-        //     docData.drawingSize = this._opts.size;
-        //     docData.drawingData = this._gptRes;
-        //     docData.width = this._opts.size;
-        //     // const image = await this.getIcon(collection);
-        //     await this.addToPalette(collection);
-        // }
-        // }
+        // const cIndex: number = this._drawingCarousel.carousel_index as number;
+        // const focusedDrawing = this._drawings[cIndex];
+        // const docData = focusedDrawing[DocData];
+        // docData.title = this._opts.text.match(/^(.*?)~~~.*$/)?.[1] || this._opts.text;
+        // docData.drawingInput = this._opts.text;
+        // docData.drawingComplexity = this._opts.complexity;
+        // docData.drawingColored = this._opts.autoColor;
+        // docData.drawingSize = this._opts.size;
+        // docData.drawingData = this._gptRes[cIndex];
+        // docData.width = this._opts.size;
+        // await AnnotationPalette.addToPalette(focusedDrawing);
     };
 
     async getIcon(group: Doc) {
@@ -255,36 +204,13 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
         return undefined;
     }
 
-    @computed get drawingCreator() {
-        return (
-            <DocumentView
-                Document={this._freeFormCanvas}
-                addDocument={undefined}
-                addDocTab={DocumentViewInternal.addDocTabFunc}
-                pinToPres={DocumentView.PinDoc}
-                containerViewPath={returnEmptyDoclist}
-                styleProvider={DefaultStyleProvider}
-                removeDocument={returnFalse}
-                ScreenToLocalTransform={Transform.Identity}
-                PanelWidth={this.return170}
-                PanelHeight={this.return170}
-                renderDepth={1}
-                isContentActive={returnTrue}
-                focus={emptyFunction}
-                whenChildContentsActiveChanged={emptyFunction}
-                childFilters={returnEmptyFilter}
-                childFiltersByRanges={returnEmptyFilter}
-                searchFilterDocs={returnEmptyDoclist}
-            />
-        );
-    }
-
     render() {
-        return !this._display ? null : (
+        return (
             <div className="annotation-palette" style={{ zIndex: 1000 }}>
                 {this._paletteMode === 'view' && (
                     <>
                         <DocumentView
+                            ref={r => (this._docView = r)}
                             Document={Doc.MyAnnos}
                             addDocument={undefined}
                             addDocTab={DocumentViewInternal.addDocTabFunc}
@@ -303,34 +229,19 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
                             childFiltersByRanges={returnEmptyFilter}
                             searchFilterDocs={returnEmptyDoclist}
                         />
-                        <Button
-                            // style={{ alignSelf: 'center' }}
-                            text="Add"
-                            icon={<FontAwesomeIcon icon="square-plus" />}
-                            // iconPlacement=""
-                            color={SettingsManager.userColor}
-                            onClick={() => this.setPaletteMode('create')}
-                        />
+                        <Button text="Add" icon={<FontAwesomeIcon icon="square-plus" />} color={SettingsManager.userColor} onClick={() => this.setPaletteMode('create')} />
                     </>
                 )}
                 {this._paletteMode === 'create' && (
                     <>
                         <div style={{ display: 'flex', flexDirection: 'row', width: '170px' }}>
-                            {/* <IconButton
-                                tooltip="Advanced Options"
-                                icon={<FontAwesomeIcon icon="caret-right" />}
-                                color={SettingsManager.userColor}
-                                style={{ width: '14px' }}
-                                // onClick={() => {
-                                //     this._showOptions = !this._showOptions;
-                                // }}
-                            /> */}
                             <input
                                 aria-label="label-input"
                                 id="new-label"
                                 type="text"
                                 style={{ color: 'black', width: '170px' }}
                                 value={this._userInput}
+                                onClick={e => e.stopPropagation()}
                                 onChange={e => {
                                     this.setUserInput(e.target.value);
                                 }}
@@ -423,29 +334,9 @@ export class AnnotationPalette extends ObservableReactComponent<{}> {
                                 />
                             </div>
                         </div>
-                        <div style={{ display: 'none' }}>
-                            <DocumentView
-                                Document={this._freeFormCanvas}
-                                addDocument={undefined}
-                                addDocTab={DocumentViewInternal.addDocTabFunc}
-                                pinToPres={DocumentView.PinDoc}
-                                containerViewPath={returnEmptyDoclist}
-                                styleProvider={DefaultStyleProvider}
-                                removeDocument={returnFalse}
-                                ScreenToLocalTransform={Transform.Identity}
-                                PanelWidth={this.return170}
-                                PanelHeight={this.return170}
-                                renderDepth={1}
-                                isContentActive={returnTrue}
-                                focus={emptyFunction}
-                                whenChildContentsActiveChanged={emptyFunction}
-                                childFilters={returnEmptyFilter}
-                                childFiltersByRanges={returnEmptyFilter}
-                                searchFilterDocs={returnEmptyDoclist}
-                            />
-                        </div>
                         <DocumentView
-                            Document={this._drawingCarousel}
+                            ref={r => (this._docCarouselView = r)}
+                            Document={this._props.Document}
                             addDocument={undefined}
                             addDocTab={DocumentViewInternal.addDocTabFunc}
                             pinToPres={DocumentView.PinDoc}
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 489f6f92b..ca65ea388 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -99,7 +99,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
 
     @action
     displayRegenerate = (x: number, y: number, addFunc: (strokeData: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => void, deleteFunc: (doc?: Doc) => void) => {
-        this._selectedDoc = DocumentView.SelectedDocs().lastElement();
+        this._selectedDoc = DocumentView.SelectedDocs()?.lastElement();
         const docData = this._selectedDoc[DocData];
         this._addFunc = addFunc;
         this._deleteFunc = deleteFunc;
@@ -123,7 +123,6 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
         this._size = 350;
         this._autoColor = true;
         Doc.ActiveTool = InkTool.None;
-        this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
     };
 
     @action
@@ -154,8 +153,6 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
         } else {
             this._showOptions = false;
             await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput, this._complexity, this._size, this._autoColor);
-            this.hideSmartDrawHandler();
-            this._showRegenerate = true;
         }
         this._isLoading = false;
         this._canInteract = true;
@@ -176,6 +173,8 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
             console.log(res);
             const strokeData = await this.parseResponse(res, startPt, false, autoColor);
             this._errorOccurredOnce = false;
+            this.hideSmartDrawHandler();
+            this._showRegenerate = true;
             return strokeData;
         } catch (err) {
             if (this._errorOccurredOnce) {
@@ -239,7 +238,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
             });
             if (regenerate) {
                 if (this._deleteFunc !== unimplementedFunction) this._deleteFunc(this._selectedDoc);
-                this._addFunc(strokeData, this._lastInput, svg[0], this._selectedDoc);
+                this._addFunc(strokeData, this._lastInput, svg[0]);
             } else {
                 this._addFunc(strokeData, this._lastInput, svg[0]);
             }