integrated image stickers with palette

12 files changed, 49 insertions, 42 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5f2a592ae..b79e8930b 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1044,7 +1044,7 @@ export namespace Docs {
         }
 
         export function AnnoPaletteDocument(options?: DocumentOptions) {
-            return InstanceFromProto(Prototypes.get(DocumentType.ANNOPALETTE), new List([Doc.MyAnnos]), { ...(options || {}) });
+            return InstanceFromProto(Prototypes.get(DocumentType.ANNOPALETTE), new List([Doc.MyStickers]), { ...(options || {}) });
         }
 
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 274bc79be..bb3d232fb 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -160,9 +160,9 @@ export class CurrentUserUtils {
         return DocUtils.AssignDocField(doc, field, (opts,items) => Docs.Create.TreeDocument(items??[], opts), reqdOpts, templates, reqdScripts);
     }
     
-    static setupAnnoPalette(doc: Doc, field="myAnnos") {
+    static setupAnnoPalette(doc: Doc, field="myStickers") {
         const reqdOpts:DocumentOptions = {
-            title: "Saved Annotations", _xMargin: 0, _layout_showTitle: "title", hidden: false, _chromeHidden: true,
+            title: "Stickers", _xMargin: 0, _layout_showTitle: "title", hidden: false, _chromeHidden: true,
             _dragOnlyWithinContainer: true, layout_hideContextMenu: true, isSystem: true, _forceActive: true,
             _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _columnWidth: 35, ignoreClick: true, _lockedPosition: true,
         };
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 62f2de776..24ebca751 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -232,9 +232,9 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                         if (iconViewDoc.activeFrame) {
                             iconViewDoc.opacity = 0; // if in an animation collection, set opacity to 0 to allow inkMasks and other documents to remain in the collection and to smoothly animate when they are activated in a different animation frame
                         } else {
-                            // if Doc is in the annotation palette, remove the flag indicating that it's saved
+                            // if Doc is in the sticker palette, remove the flag indicating that it's saved
                             const dragFactory = DocCast(iconView.Document.dragFactory);
-                            if (dragFactory && DocCast(dragFactory.cloneOf).savedAsAnno) DocCast(dragFactory.cloneOf).savedAsAnno = undefined;
+                            if (dragFactory && DocCast(dragFactory.cloneOf).savedAsSticker) DocCast(dragFactory.cloneOf).savedAsSticker = undefined;
 
                             // if this is a face Annotation doc, then just hide it.
                             if (iconView.Document.annotationOn && iconView.Document.face) iconView.Document.hidden = true;
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index a543b4875..f55ed2aa0 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -21,7 +21,7 @@ import { OverlayView } from './OverlayView';
 import { DefaultStyleProvider, returnEmptyDocViewList, wavyBorderPath } from './StyleProvider';
 import { DocumentView } from './nodes/DocumentView';
 import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere';
-import { AnnotationPalette } from './smartdraw/AnnotationPalette';
+import { StickerPalette } from './smartdraw/StickerPalette';
 
 interface LightboxViewProps {
     PanelWidth: number;
@@ -56,7 +56,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     }[] = [];
     private _savedState: LightboxSavedState = {};
     private _history: { doc: Doc; target?: Doc }[] = [];
-    private _annoPaletteView: AnnotationPalette | null = null;
+    private _annoPaletteView: StickerPalette | null = null;
     @observable private _future: Doc[] = [];
     @observable private _layoutTemplate: Opt<Doc> = undefined;
     @observable private _layoutTemplateString: Opt<string> = undefined;
@@ -317,7 +317,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                     </GestureOverlay>
                 </div>
 
-                {this._showPalette && <AnnotationPalette ref={r => (this._annoPaletteView = r)} Document={DocCast(Doc.UserDoc().myLightboxDrawings)} />}
+                {this._showPalette && <StickerPalette ref={r => (this._annoPaletteView = r)} Document={DocCast(Doc.UserDoc().myLightboxDrawings)} />}
                 {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length ? true : false, this.previous)}
                 {this.renderNavBtn(
                     this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
@@ -331,7 +331,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                 <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} />
                 {toggleBtn('lightboxView-navBtn', 'toggle reading view', BoolCast(this._doc?._layout_fitWidth), 'book-open', 'book', this.toggleFitWidth)}
                 {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-export', '', this.downloadDoc)}
-                {toggleBtn('lightboxView-paletteBtn', 'toggle annotation palette', this._showPalette === true, 'palette', '', this.togglePalette)}
+                {toggleBtn('lightboxView-paletteBtn', 'toggle sticker palette', this._showPalette === true, 'palette', '', this.togglePalette)}
                 {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)}
                 {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)}
             </div>
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 2a59f6dc3..dda543470 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -64,7 +64,7 @@ import { ImportElementBox } from './nodes/importBox/ImportElementBox';
 import { PresBox, PresElementBox } from './nodes/trails';
 import { FaceRecognitionHandler } from './search/FaceRecognitionHandler';
 import { SearchBox } from './search/SearchBox';
-import { AnnotationPalette } from './smartdraw/AnnotationPalette';
+import { StickerPalette } from './smartdraw/StickerPalette';
 
 dotenv.config();
 
@@ -117,7 +117,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
         KeyValueBox.Init();
         PresBox.Init(TabDocView.AllTabDocs);
         DocumentContentsView.Init(KeyValueBox.LayoutString(), {
-            AnnotationPalette,
+            StickerPalette: StickerPalette,
             FormattedTextBox,
             ImageBox,
             FontIconBox,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d2bc8f2c2..8d73601d1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -42,7 +42,7 @@ import { FocusViewOptions } from '../../nodes/FocusViewOptions';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { OpenWhere, OpenWhereMod } from '../../nodes/OpenWhere';
 import { PinDocView, PinProps } from '../../PinFuncs';
-import { AnnotationPalette } from '../../smartdraw/AnnotationPalette';
+import { StickerPalette } from '../../smartdraw/StickerPalette';
 import { DrawingOptions, SmartDrawHandler } from '../../smartdraw/SmartDrawHandler';
 import { StyleProp } from '../../StyleProp';
 import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView';
@@ -1992,9 +1992,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             icon: 'pen-to-square',
         });
         optionItems.push({
-            description: this.Document.savedAsAnno ? 'Saved as Annotation!' : 'Save to Annotation Palette',
-            event: action(undoable(async () => await AnnotationPalette.addToPalette(this.Document), 'save to palette')),
-            icon: this.Document.savedAsAnno ? 'clipboard-check' : 'file-arrow-down',
+            description: this.Document.savedAsSticker ? 'Sticker Saved!' : 'Save to Stickers',
+            event: action(undoable(async () => await StickerPalette.addToPalette(this.Document), 'save to palette')),
+            icon: this.Document.savedAsSticker ? 'clipboard-check' : 'file-arrow-down',
         });
         this._props.renderDepth &&
             optionItems.push({
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 0dfc0ec28..f98ff6d6e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -32,6 +32,7 @@ import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { OverlayView } from '../OverlayView';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { PinDocView, PinProps } from '../PinFuncs';
+import { StickerPalette } from '../smartdraw/StickerPalette';
 import { StyleProp } from '../StyleProp';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
@@ -320,6 +321,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 }),
                 icon: 'pencil-alt',
             });
+            funcs.push({
+                description: this.Document.savedAsSticker ? 'Sticker Saved!' : 'Save to Stickers',
+                event: action(undoable(async () => await StickerPalette.addToPalette(this.Document), 'save to palette')),
+                icon: this.Document.savedAsSticker ? 'clipboard-check' : 'file-arrow-down',
+            });
             ContextMenu.Instance?.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
         }
     };
@@ -338,7 +344,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed get nativeSize() {
         TraceMobx();
-        if (this.paths.length && this.paths[0].includes('icon-hi')) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0}
+        if (this.paths.length && this.paths[0].includes('icon-hi')) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
         const nativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500));
         const nativeHeight = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500));
         const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1);
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index e6d651ee9..9642dcc31 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -435,7 +435,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
             const newImgDoc = await createNewImgDoc(finalImg, firstDoc);
             if (newImgDoc) {
                 const docData = newImgDoc[DocData];
-                docData.backgroundColor = 'transparent';
+                // docData.backgroundColor = 'transparent';
                 if (firstDoc) setIsFirstDoc(false);
                 setEdits([...prevEdits, { url: finalImgURL, saveRes: undefined }]);
             }
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: '' },
 });
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 81241f9fe..c77c2a77d 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -236,7 +236,7 @@ export class Doc extends RefField {
     public static get MyPublishedDocs()       { return DocListCast(Doc.ActiveDashboard?.myPublishedDocs).concat(DocListCast(DocCast(Doc.UserDoc().myPublishedDocs)?.data)); } // prettier-ignore
     public static get MyDashboards()          { return DocCast(Doc.UserDoc().myDashboards); } // prettier-ignore
     public static get MyTemplates()           { return DocCast(Doc.UserDoc().myTemplates); } // prettier-ignore
-    public static get MyAnnos()               { return DocCast(Doc.UserDoc().myAnnos); } // prettier-ignore
+    public static get MyStickers()               { return DocCast(Doc.UserDoc().myStickers); } // prettier-ignore
     public static get MyLightboxDrawings()    { return DocCast(Doc.UserDoc().myLightboxDrawings); } // prettier-ignore
     public static get MyImports()             { return DocCast(Doc.UserDoc().myImports); } // prettier-ignore
     public static get MyFilesystem()          { return DocCast(Doc.UserDoc().myFilesystem); } // prettier-ignore