Merge branch 'master' into alyssa-starter

1 files changed, 79 insertions, 77 deletions

diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index a543b4875..5698da785 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Toggle, ToggleType, Type } from 'browndash-components';
+import { Toggle, ToggleType, Type } from '@dash/components';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -18,10 +18,10 @@ import { GestureOverlay } from './GestureOverlay';
 import './LightboxView.scss';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
-import { DefaultStyleProvider, returnEmptyDocViewList, wavyBorderPath } from './StyleProvider';
+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;
@@ -35,7 +35,7 @@ type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore
 @observer
 export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     /**
-     * Determines whether a DocumentView is descendant of the lightbox view (or any of its pop-ups like the annotationPalette)
+     * Determines whether a DocumentView is descendant of the lightbox view (or any of its pop-ups like the stickerPalette)
      * @param view
      * @returns true if a DocumentView is descendant of the lightbox view
      */
@@ -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;
@@ -93,7 +93,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
             savedKeys.forEach(key => {
                 lightDoc[key] = this._savedState[key];
             });
-        this._savedState = {};
+        lightDoc !== doc && (this._savedState = {});
 
         if (doc) {
             lightDoc !== doc &&
@@ -136,9 +136,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
         return this.SetLightboxDoc(
             doc,
             undefined,
-            [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...this._future].sort(
-                (a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
-            ),
+            [...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...this._future].sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)),
             layoutTemplate
         );
     };
@@ -211,10 +209,9 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     };
     togglePalette = () => {
         this._showPalette = !this._showPalette;
-        // if (this._showPalette === false) AnnotationPalette.Instance.resetPalette(true);
     };
     togglePen = () => {
-        Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
+        Doc.ActiveTool = Doc.ActiveTool === InkTool.Ink ? InkTool.None : InkTool.Ink;
     };
     toggleExplore = () => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode);
 
@@ -266,75 +263,80 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                 />
             </div>
         );
-        return !this._doc ? (
-            <OverlayView />
-        ) : (
-            <div
-                className="lightboxView-frame"
-                style={{ background: SnappingManager.userBackgroundColor }}
-                onPointerDown={e => {
-                    downx = e.clientX;
-                    downy = e.clientY;
-                }}
-                onClick={e => ClientUtils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}>
-                <div
-                    className="lightboxView-contents"
-                    style={{
-                        left: this.leftBorder,
-                        top: this.topBorder,
-                        width: this.lightboxWidth(),
-                        height: this.lightboxHeight(),
-                        clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
-                        background: SnappingManager.userBackgroundColor,
-                    }}>
-                    <GestureOverlay isActive>
-                        <DocumentView
-                            key={this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc
-                            ref={action((r: DocumentView | null) => {
-                                this._docView = r !== null ? r : undefined;
-                            })}
-                            Document={this._doc}
-                            PanelWidth={this.lightboxWidth}
-                            PanelHeight={this.lightboxHeight}
-                            LayoutTemplate={this.lightboxDocTemplate}
-                            isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
-                            isContentActive={returnTrue}
-                            styleProvider={DefaultStyleProvider}
-                            ScreenToLocalTransform={this.lightboxScreenToLocal}
-                            renderDepth={0}
-                            suppressSetHeight={!!this._doc._layout_fitWidth}
-                            containerViewPath={returnEmptyDocViewList}
-                            childFilters={returnEmptyFilter}
-                            childFiltersByRanges={returnEmptyFilter}
-                            searchFilterDocs={returnEmptyDoclist}
-                            addDocument={undefined}
-                            removeDocument={undefined}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            addDocTab={this.AddDocTab}
-                            pinToPres={DocumentView.PinDoc}
-                            focus={emptyFunction}
-                        />
-                    </GestureOverlay>
+        return (
+            <>
+                <div style={{ display: this._doc ? 'none' : undefined }}>
+                    <OverlayView />
                 </div>
+                {!this._doc ? null : (
+                    <div
+                        className="lightboxView-frame"
+                        style={{ background: SnappingManager.userBackgroundColor }}
+                        onPointerDown={e => {
+                            downx = e.clientX;
+                            downy = e.clientY;
+                        }}
+                        onClick={e => ClientUtils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}>
+                        <div
+                            className="lightboxView-contents"
+                            style={{
+                                left: this.leftBorder,
+                                top: this.topBorder,
+                                width: this.lightboxWidth(),
+                                height: this.lightboxHeight(),
+                                // clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
+                                background: SnappingManager.userBackgroundColor,
+                            }}>
+                            <GestureOverlay isActive>
+                                <DocumentView
+                                    key={this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc
+                                    ref={action((r: DocumentView | null) => {
+                                        this._docView = r !== null ? r : undefined;
+                                    })}
+                                    Document={this._doc}
+                                    PanelWidth={this.lightboxWidth}
+                                    PanelHeight={this.lightboxHeight}
+                                    LayoutTemplate={this.lightboxDocTemplate}
+                                    isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
+                                    isContentActive={returnTrue}
+                                    styleProvider={DefaultStyleProvider}
+                                    ScreenToLocalTransform={this.lightboxScreenToLocal}
+                                    renderDepth={0}
+                                    suppressSetHeight={!!this._doc._layout_fitWidth}
+                                    containerViewPath={returnEmptyDocViewList}
+                                    childFilters={returnEmptyFilter}
+                                    childFiltersByRanges={returnEmptyFilter}
+                                    searchFilterDocs={returnEmptyDoclist}
+                                    addDocument={undefined}
+                                    removeDocument={undefined}
+                                    whenChildContentsActiveChanged={emptyFunction}
+                                    addDocTab={this.AddDocTab}
+                                    pinToPres={DocumentView.PinDoc}
+                                    focus={emptyFunction}
+                                />
+                            </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]),
-                    undefined,
-                    this._props.PanelHeight / 2 - 12.5,
-                    'chevron-right',
-                    this._doc && this._future.length ? true : false,
-                    this.next,
-                    this.future().length.toString()
+                        {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]),
+                            undefined,
+                            this._props.PanelHeight / 2 - 12.5,
+                            'chevron-right',
+                            this._doc && this._future.length ? true : false,
+                            this.next,
+                            this.future().length.toString()
+                        )}
+                        <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 sticker palette', this._showPalette === true, 'palette', '', this.togglePalette)}
+                        {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Ink, 'pen', '', this.togglePen)}
+                        {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)}
+                    </div>
                 )}
-                <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-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>
+            </>
         );
     }
 }