1 files changed, 20 insertions, 6 deletions

diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index b8b73e7dd..a543b4875 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -10,7 +10,7 @@ import { emptyFunction } from '../../Utils';
 import { CreateLinkToActiveAudio, Doc, DocListCast, FieldResult, Opt, returnEmptyDoclist } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { InkTool } from '../../fields/InkField';
-import { BoolCast, Cast, NumCast, toList } from '../../fields/Types';
+import { BoolCast, Cast, DocCast, NumCast, toList } from '../../fields/Types';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { SnappingManager } from '../util/SnappingManager';
 import { Transform } from '../util/Transform';
@@ -21,6 +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';
 
 interface LightboxViewProps {
     PanelWidth: number;
@@ -34,13 +35,17 @@ type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore
 @observer
 export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     /**
-     * Determines whether a DocumentView is descendant of the lightbox view
+     * Determines whether a DocumentView is descendant of the lightbox view (or any of its pop-ups like the annotationPalette)
      * @param view
      * @returns true if a DocumentView is descendant of the lightbox view
      */
-    public static Contains(view?:DocumentView) { return view && LightboxView.Instance?._docView && (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView); } // prettier-ignore
+    public static Contains(view?: DocumentView) {
+        return (
+            (view && LightboxView.Instance?._docView && (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView)) ||
+            (view && LightboxView.Instance?._annoPaletteView?.Contains(view)) || undefined
+        ); 
+    } // prettier-ignore
     public static LightboxDoc = () => LightboxView.Instance?._doc;
-    // eslint-disable-next-line no-use-before-define
     static Instance: LightboxView;
     private _path: {
         doc: Opt<Doc>; //
@@ -51,12 +56,14 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     }[] = [];
     private _savedState: LightboxSavedState = {};
     private _history: { doc: Doc; target?: Doc }[] = [];
+    private _annoPaletteView: AnnotationPalette | null = null;
     @observable private _future: Doc[] = [];
     @observable private _layoutTemplate: Opt<Doc> = undefined;
     @observable private _layoutTemplateString: Opt<string> = undefined;
     @observable private _doc: Opt<Doc> = undefined;
     @observable private _docTarget: Opt<Doc> = undefined;
     @observable private _docView: Opt<DocumentView> = undefined;
+    @observable private _showPalette: boolean = false;
 
     @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore
     @computed get topBorder()  { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore
@@ -69,6 +76,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
         DocumentView._lightboxContains = LightboxView.Contains;
         DocumentView._lightboxDoc = LightboxView.LightboxDoc;
     }
+
     /**
      * Sets the root Doc to render in the lightbox view.
      * @param doc
@@ -101,6 +109,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
             this._history = [];
             Doc.ActiveTool = InkTool.None;
             SnappingManager.SetExploreMode(false);
+            this._showPalette = false;
         }
         DocumentView.DeselectAll();
         if (future) {
@@ -200,6 +209,10 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     toggleFitWidth = () => {
         this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth);
     };
+    togglePalette = () => {
+        this._showPalette = !this._showPalette;
+        // if (this._showPalette === false) AnnotationPalette.Instance.resetPalette(true);
+    };
     togglePen = () => {
         Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
     };
@@ -304,6 +317,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                     </GestureOverlay>
                 </div>
 
+                {this._showPalette && <AnnotationPalette 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]),
@@ -316,7 +330,8 @@ 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-download', '', this.downloadDoc)}
+                {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-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>
@@ -325,7 +340,6 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
 }
 interface LightboxTourBtnProps {
     navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: boolean, click: () => void, color?: string) => JSX.Element;
-    // eslint-disable-next-line react/no-unused-prop-types
     future: () => Opt<Doc[]>;
     stepInto: () => void;
     lightboxDoc: () => Opt<Doc>;