small bug fixes for smart draw

1 files changed, 37 insertions, 19 deletions

diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx
index a2d6cc88d..0c8dbf12d 100644
--- a/src/client/views/smartdraw/AnnotationPalette.tsx
+++ b/src/client/views/smartdraw/AnnotationPalette.tsx
@@ -23,11 +23,22 @@ import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import { FieldView } from '../nodes/FieldView';
 import './AnnotationPalette.scss';
 import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler';
+import { ImageField } from '../../../fields/URLField';
+import { Copy } from '../../../fields/FieldSymbols';
 
 interface AnnotationPaletteProps {
     Document: Doc;
 }
 
+/**
+ * The AnnotationPalette can be toggled in the lightbox view of a document. The goal of the palette
+ * is to offer an easy way for users to save then drag and drop repeated annotations onto a document.
+ * These annotations can be of any annotation type and operate similarly to user templates.
+ *
+ * On the "add" side of the palette, there is a way to create a drawing annotation with GPT. Users can
+ * enter the item to draw, toggle different settings, then GPT will generate three versions of the drawing
+ * to choose from. These drawings can then be saved to the palette as annotations.
+ */
 @observer
 export class AnnotationPalette extends ObservableReactComponent<AnnotationPaletteProps> {
     @observable private _paletteMode: 'create' | 'view' = 'view';
@@ -107,20 +118,25 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
      */
     public static addToPalette = async (doc: Doc) => {
         if (!doc.savedAsAnno) {
-            Doc.MakeClone(doc).then(cloneMap =>
-                DocumentView.getDocumentView(doc)
-                    ?.ComponentView?.updateIcon?.(true)
-                    .then(() => {
-                        const { clone } = cloneMap;
-                        clone.title = doc.title;
-                        const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href;
-                        Doc.AddDocToList(Doc.MyAnnos, 'data', makeUserTemplateImage(clone, image));
-                        doc.savedAsAnno = true;
-                    })
-            );
+            const docView = DocumentView.getDocumentView(doc);
+            await docView?.ComponentView?.updateIcon?.(true);
+            const { clone } = await Doc.MakeClone(doc);
+            clone.title = doc.title;
+            const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href;
+            Doc.AddDocToList(Doc.MyAnnos, 'data', makeUserTemplateImage(clone, image));
+            doc.savedAsAnno = true;
         }
     };
 
+    public static getIcon(group: Doc) {
+        const docView = DocumentView.getDocumentView(group);
+        if (docView) {
+            docView.ComponentView?.updateIcon?.(true);
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000));
+        }
+        return undefined;
+    }
+
     /**
      * Calls the draw with GPT functions in SmartDrawHandler to allow users to generate drawings straight from
      * the annotation palette.
@@ -172,6 +188,8 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
         docData.drawingSize = this._opts.size;
         docData.drawingData = this._gptRes[cIndex];
         docData.width = this._opts.size;
+        docData.x = this._opts.x;
+        docData.y = this._opts.y;
         await AnnotationPalette.addToPalette(focusedDrawing);
         this.resetPalette(true);
     };
@@ -206,12 +224,12 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
                 )}
                 {this._paletteMode === 'create' && (
                     <>
-                        <div style={{ display: 'flex', flexDirection: 'row', width: '170px' }}>
+                        <div className="palette-create">
                             <input
+                                className="palette-create-input"
                                 aria-label="label-input"
                                 id="new-label"
                                 type="text"
-                                style={{ color: 'black', width: '170px' }}
                                 value={this._userInput}
                                 onChange={e => {
                                     this.setUserInput(e.target.value);
@@ -228,8 +246,8 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
                                 onClick={this.generateDrawings}
                             />
                         </div>
-                        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '170px', marginTop: '5px' }}>
-                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '40px' }}>
+                        <div className="palette-create-options">
+                            <div className="palette-color">
                                 Color
                                 <Switch
                                     sx={{
@@ -246,7 +264,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
                                     onChange={() => this.setColor(!this._opts.autoColor)}
                                 />
                             </div>
-                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '60px' }}>
+                            <div className="palette-detail">
                                 Detail
                                 <Slider
                                     sx={{
@@ -275,7 +293,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
                                     valueLabelDisplay="auto"
                                 />
                             </div>
-                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '60px' }}>
+                            <div className="palette-size">
                                 Size
                                 <Slider
                                     sx={{
@@ -325,9 +343,9 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
                             childFiltersByRanges={returnEmptyFilter}
                             searchFilterDocs={returnEmptyDoclist}
                         />
-                        <div style={{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                        <div className="palette-buttons">
                             <Button text="Back" tooltip="Back to All Annotations" icon={<FontAwesomeIcon icon="reply" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(true)} />
-                            <div style={{ display: 'flex', flexDirection: 'row' }}>
+                            <div className="palette-save-reset">
                                 <Button tooltip="Save" icon={<FontAwesomeIcon icon="file-arrow-down" />} color={SettingsManager.userColor} onClick={this.saveDrawing} />
                                 <Button tooltip="Reset" icon={<FontAwesomeIcon icon="rotate-left" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(false)} />
                             </div>