integrated image stickers with palette

3 files changed, 25 insertions, 24 deletions

diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index b4635673c..0078dfc76 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -83,7 +83,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     /**
      *  AddDrawing and RemoveDrawing are defined by the other classes that call the smart draw functions (i.e. 
         CollectionFreeForm, FormattedTextBox, AnnotationPalette) to define how a drawing document should be added
-        or removed in their respective locations (to the freeform canvs, to the annotation palette's preview, etc.)
+        or removed in their respective locations (to the freeform canvas, to the sticker palette's preview, etc.)
     */
     public AddDrawing: (doc: Doc, opts: DrawingOptions, gptRes: string) => void = unimplementedFunction;
     public RemoveDrawing: (useLastContainer: boolean, doc?: Doc) => void = unimplementedFunction;
diff --git a/src/client/views/smartdraw/AnnotationPalette.scss b/src/client/views/smartdraw/StickerPalette.scss
index 4f11e8afc..ca99410cf 100644
--- a/src/client/views/smartdraw/AnnotationPalette.scss
+++ b/src/client/views/smartdraw/StickerPalette.scss
@@ -1,4 +1,4 @@
-.annotation-palette {
+.sticker-palette {
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/StickerPalette.tsx
index dc0c01d36..468d0fd13 100644
--- a/src/client/views/smartdraw/AnnotationPalette.tsx
+++ b/src/client/views/smartdraw/StickerPalette.tsx
@@ -22,24 +22,25 @@ import { ObservableReactComponent } from '../ObservableReactComponent';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
 import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import { FieldView } from '../nodes/FieldView';
-import './AnnotationPalette.scss';
+import './StickerPalette.scss';
 import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler';
 
-interface AnnotationPaletteProps {
+interface StickerPaletteProps {
     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.
+ * The StickerPalette can be toggled in the lightbox view of a document. The goal of the palette
+ * is to offer an easy way for users to create stickers and  drag and drop them onto a document.
+ * These stickers can technically be of any document type and operate similarly to user templates.
+ * However, the palette is designed to be geared toward ink stickers and image stickers.
  *
- * On the "add" side of the palette, there is a way to create a drawing annotation with GPT. Users can
+ * On the "add" side of the palette, there is a way to create a drawing sticker 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.
+ * to choose from. These drawings can then be saved to the palette as stickers.
  */
 @observer
-export class AnnotationPalette extends ObservableReactComponent<AnnotationPaletteProps> {
+export class StickerPalette extends ObservableReactComponent<StickerPaletteProps> {
     @observable private _paletteMode: 'create' | 'view' = 'view';
     @observable private _userInput: string = '';
     @observable private _isLoading: boolean = false;
@@ -50,13 +51,13 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
     @observable private _opts: DrawingOptions = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 };
     private _gptRes: string[] = [];
 
-    constructor(props: AnnotationPaletteProps) {
+    constructor(props: StickerPaletteProps) {
         super(props);
         makeObservable(this);
     }
 
     public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(AnnotationPalette, fieldKey);
+        return FieldView.LayoutString(StickerPalette, fieldKey);
     }
 
     Contains = (view: DocumentView) => {
@@ -112,18 +113,18 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
     };
 
     /**
-     * Adds a doc to the annotation palette. Gets a snapshot of the document to use as a preview in the palette. When this
-     * preview is dragged onto a parent document, a copy of that document is added as an annotation.
+     * Adds a doc to the sticker palette. Gets a snapshot of the document to use as a preview in the palette. When this
+     * preview is dragged onto a parent document, a copy of that document is added as a sticker.
      */
     public static addToPalette = async (doc: Doc) => {
-        if (!doc.savedAsAnno) {
+        if (!doc.savedAsSticker) {
             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', makeUserTemplateButtonOrImage(clone, image));
-            doc.savedAsAnno = true;
+            Doc.AddDocToList(Doc.MyStickers, 'data', makeUserTemplateButtonOrImage(clone, image));
+            doc.savedAsSticker = true;
         }
     };
 
@@ -138,7 +139,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
 
     /**
      * Calls the draw with GPT functions in SmartDrawHandler to allow users to generate drawings straight from
-     * the annotation palette.
+     * the sticker palette.
      */
     @undoBatch
     generateDrawings = action(async () => {
@@ -171,7 +172,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
     };
 
     /**
-     * Saves the currently showing, newly generated drawing to the annotation palette and sets the metadata.
+     * Saves the currently showing, newly generated drawing to the sticker palette and sets the metadata.
      * AddToPalette() is generically used to add any document to the palette, while this defines the behavior for when a user
      * presses the "save drawing" button.
      */
@@ -188,18 +189,18 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
         focusedDrawing.width = this._opts.size;
         docData.x = this._opts.x;
         docData.y = this._opts.y;
-        await AnnotationPalette.addToPalette(focusedDrawing);
+        await StickerPalette.addToPalette(focusedDrawing);
         this.resetPalette(true);
     };
 
     render() {
         return (
-            <div className="annotation-palette" style={{ zIndex: 1000 }} onClick={e => e.stopPropagation()}>
+            <div className="sticker-palette" style={{ zIndex: 1000 }} onClick={e => e.stopPropagation()}>
                 {this._paletteMode === 'view' && (
                     <>
                         <DocumentView
                             ref={r => (this._docView = r)}
-                            Document={Doc.MyAnnos}
+                            Document={Doc.MyStickers}
                             addDocument={undefined}
                             addDocTab={DocumentViewInternal.addDocTabFunc}
                             pinToPres={DocumentView.PinDoc}
@@ -342,7 +343,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
                             searchFilterDocs={returnEmptyDoclist}
                         />
                         <div className="palette-buttons">
-                            <Button text="Back" tooltip="Back to All Annotations" icon={<FontAwesomeIcon icon="reply" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(true)} />
+                            <Button text="Back" tooltip="Back to All Stickers" icon={<FontAwesomeIcon icon="reply" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(true)} />
                             <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)} />
@@ -356,6 +357,6 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
 }
 
 Docs.Prototypes.TemplateMap.set(DocumentType.ANNOPALETTE, {
-    layout: { view: AnnotationPalette, dataField: 'data' },
+    layout: { view: StickerPalette, dataField: 'data' },
     options: { acl: '' },
 });