Merge branch 'master' into Merge

5 files changed, 97 insertions, 89 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 539b49c86..04e3b2663 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -48,8 +48,7 @@ export class CollectionDockingView extends CollectionSubView() {
     // eslint-disable-next-line no-use-before-define
     @observable public static Instance: CollectionDockingView | undefined = undefined;
 
-    private _reactionDisposer?: IReactionDisposer;
-    private _lightboxReactionDisposer?: IReactionDisposer;
+    private _disposers: { [key: string]: IReactionDisposer } = {};
     private _containerRef = React.createRef<HTMLDivElement>();
     private _flush: UndoManager.Batch | undefined;
     private _unmounting = false;
@@ -66,6 +65,7 @@ export class CollectionDockingView extends CollectionSubView() {
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
+        console.log('CREATING DOCKING VIEW');
         if (this._props.renderDepth < 0) CollectionDockingView.Instance = this;
         // Why is this here?
         (window as unknown as { React: unknown }).React = React;
@@ -282,6 +282,7 @@ export class CollectionDockingView extends CollectionSubView() {
     }
     setupGoldenLayout = async () => {
         if (this._unmounting) return;
+        console.log('SETUP LAYOUT');
         // const config = StrCast(this.Document.dockingConfig, JSON.stringify(DashboardView.resetDashboard(this.Document)));
         const config = StrCast(this.Document.dockingConfig);
         if (config) {
@@ -339,29 +340,36 @@ export class CollectionDockingView extends CollectionSubView() {
     componentDidMount: () => void = async () => {
         this._props.setContentViewBox?.(this);
         this._unmounting = false;
+        console.log('MOUNTING');
         SetPropSetterCb('title', this.titleChanged); // this overrides any previously assigned callback for the property
         if (this._containerRef.current) {
-            this._lightboxReactionDisposer = reaction(
+            this._disposers.lightbox = reaction(
                 () => DocumentView.LightboxDoc(),
                 doc => setTimeout(() => !doc && this.onResize())
             );
             new ResizeObserver(this.onResize).observe(this._containerRef.current);
-            this._reactionDisposer = reaction(
+            this._disposers.docking = reaction(
                 () => StrCast(this.Document.dockingConfig),
                 config => {
                     if (!this._goldenLayout || this._ignoreStateChange !== config) {
+                        console.log('CONFIG CHANGED');
                         //  bcz: TODO! really need to diff config with ignoreStateChange and modify the current goldenLayout instead of building a new one.
                         this.setupGoldenLayout();
                     }
                     this._ignoreStateChange = '';
                 }
             );
-            reaction(
+            this._disposers.panel = reaction(
                 () => this._props.PanelWidth(),
-                width => !this._goldenLayout && width > 20 && setTimeout(() => this.setupGoldenLayout()), // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows
+                width => {
+                    if (!this._goldenLayout && width > 20) {
+                        console.log('PWIDTH = ' + width);
+                        setTimeout(() => this.setupGoldenLayout());
+                    }
+                }, // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows
                 { fireImmediately: true }
             );
-            reaction(
+            this._disposers.color = reaction(
                 () => [SnappingManager.userBackgroundColor, SnappingManager.userBackgroundColor],
                 () => {
                     clearStyleSheetRules(CollectionDockingView._highlightStyleSheet);
@@ -375,7 +383,9 @@ export class CollectionDockingView extends CollectionSubView() {
     };
 
     componentWillUnmount: () => void = () => {
+        console.log('UNMOUNTING');
         this._unmounting = true;
+        Object.values(this._disposers).forEach(d => d());
         try {
             this._goldenLayout.unbind('stackCreated', this.stackCreated);
             this._goldenLayout.unbind('tabDestroyed', this.tabDestroyed);
@@ -385,9 +395,6 @@ export class CollectionDockingView extends CollectionSubView() {
         setTimeout(() => this._goldenLayout?.destroy());
         window.removeEventListener('resize', this.onResize);
         window.removeEventListener('mouseup', this.onPointerUp);
-
-        this._reactionDisposer?.();
-        this._lightboxReactionDisposer?.();
     };
 
     // ViewBoxInterface overrides
@@ -412,6 +419,7 @@ export class CollectionDockingView extends CollectionSubView() {
                   .map(f => f as Doc);
         const changesMade = this.Document.dockingConfig !== json;
         if (changesMade) {
+            console.log('WRITING CONFIG');
             if (![AclAdmin, AclEdit].includes(GetEffectiveAcl(this.dataDoc))) {
                 this.layoutDoc.dockingConfig = json;
                 this.layoutDoc.data = new List<Doc>(docs);
@@ -426,7 +434,7 @@ export class CollectionDockingView extends CollectionSubView() {
 
     @action
     onPointerUp = (): void => {
-        window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('mouseup', this.onPointerUp);
         DragManager.CompleteWindowDrag = undefined;
         setTimeout(this.endUndoBatch, 100);
     };
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index f06e0b551..96125f2c2 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -111,7 +111,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
         const availableWidth = this._props.PanelWidth() - 2 * this.xMargin;
-        const cwid = availableWidth / NumCast(this.Document._layout_columnCount, 1);
+        const cwid = availableWidth / (NumCast(this.Document._layout_columnCount) || this._props.PanelWidth() / NumCast(this.Document._layout_columnWidth, this._props.PanelWidth() / 4));
         return Math.min(availableWidth, this.isStackingView ? Number.MAX_VALUE : cwid - this.gridGap);
     }
 
@@ -241,7 +241,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         this._disposers.width = reaction(
             () => [this._props.PanelWidth() - 2 * this.xMargin, NumCast(this.Document._layout_columnWidth, 250)],
             ([pw, cw]) => {
-                if (!this.isStackingView) {
+                if (!this.isStackingView && Math.round(pw / cw)) {
                     this.layoutDoc._layout_columnCount = Math.round(pw / cw);
                 }
             }
@@ -607,7 +607,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this._props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))));
         return (
             <div key={(heading?.heading ?? '') + 'head'}>
-                {this._props.isContentActive() && !this.isStackingView ? this.columnDragger : null}
+                {this._props.isContentActive() && !this.isStackingView && !this.chromeHidden ? this.columnDragger : null}
                 <div style={{ top: this.yMargin }}>
                     <CollectionMasonryViewFieldRow
                         showHandle={first}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b3d908da4..43addfc29 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -344,7 +344,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     focusOnPoint = (options: FocusViewOptions) => {
         const { pointFocus, zoomTime, didMove } = options;
         if (!this.Document.isGroup && pointFocus && !didMove) {
-            const dfltScale = this.isAnnotationOverlay ? 1 : 0.5;
+            const dfltScale = this.isAnnotationOverlay ? 1 : 0.25;
             if (this.layoutDoc[this.scaleFieldKey] !== dfltScale) {
                 this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(pointFocus.X, pointFocus.Y), dfltScale, zoomTime);
                 options.didMove = true;
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 845b07c51..4edaf9745 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -21,11 +21,11 @@
             width: 100%;
         }
 
-        .react-grid-item>.react-resizable-handle {
+        .react-grid-item > .react-resizable-handle {
             z-index: 4; // doesn't work on prezi otherwise
         }
 
-        .react-grid-item>.react-resizable-handle::after {
+        .react-grid-item > .react-resizable-handle::after {
             // grey so it can be seen on the audiobox
             border-right: 2px solid slategrey;
             border-bottom: 2px solid slategrey;
@@ -41,7 +41,6 @@
             position: absolute;
             height: 3;
             left: 5;
-            top: 30;
             transform-origin: left;
             transform: rotate(90deg);
             outline: none;
@@ -103,7 +102,7 @@
 
             span::before,
             span::after {
-                content: "";
+                content: '';
                 width: 50%;
                 position: relative;
                 display: inline-block;
@@ -128,10 +127,8 @@
             }
         }
     }
-
 }
 
-
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -140,6 +137,6 @@ input::-webkit-inner-spin-button {
 }
 
 /* Firefox */
-input[type=number] {
+input[type='number'] {
     -moz-appearance: textfield;
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 6dffb80f1..80bf4bd12 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -9,7 +9,7 @@ import { emptyFunction } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
-import { undoable, undoBatch } from '../../../util/UndoManager';
+import { undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { ContextMenuProps } from '../../ContextMenuItem';
 import { DocumentView } from '../../nodes/DocumentView';
@@ -22,9 +22,9 @@ export class CollectionGridView extends CollectionSubView() {
     private _containerRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs
     private _resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked
+    private _dropLocation: object = {}; // sets the drop location for external drops
     @observable private _rowHeight: Opt<number> = undefined; // temporary store of row height to make change undoable
     @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll
-    private dropLocation: object = {}; // sets the drop location for external drops
 
     constructor(props: SubCollectionViewProps) {
         super(props);
@@ -48,14 +48,20 @@ export class CollectionGridView extends CollectionSubView() {
     }
 
     @computed get colWidthPlusGap() {
-        return (this._props.PanelWidth() - this.margin) / this.numCols;
+        return (this._props.PanelWidth() - 2 * this.xMargin - this.gridGap) / this.numCols;
     }
     @computed get rowHeightPlusGap() {
-        return this.rowHeight + this.margin;
+        return this.rowHeight + this.gridGap;
     }
 
-    @computed get margin() {
-        return NumCast(this.Document.margin, 10);
+    @computed get xMargin() {
+        return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth()));
+    }
+    @computed get yMargin() {
+        return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
+    }
+    @computed get gridGap() {
+        return NumCast(this.Document._gridGap, 10);
     } // sets the margin between grid nodes
 
     @computed get flexGrid() {
@@ -77,10 +83,10 @@ export class CollectionGridView extends CollectionSubView() {
                 pairs.forEach((pair, i) => {
                     const existing = oldLayouts.find(l => l.i === pair.layout[Id]);
                     if (existing) newLayouts.push(existing);
-                    else if (Object.keys(this.dropLocation).length) {
+                    else if (Object.keys(this._dropLocation).length) {
                         // external drop
-                        this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.dropLocation as { x: number; y: number }, !this.flexGrid));
-                        this.dropLocation = {};
+                        this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this._dropLocation as { x: number; y: number }, !this.flexGrid));
+                        this._dropLocation = {};
                     } else {
                         // internal drop
                         this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.unflexedPosition(i), !this.flexGrid));
@@ -115,30 +121,29 @@ export class CollectionGridView extends CollectionSubView() {
      * @returns the default location of the grid node (i.e. when the grid is static)
      * @param index
      */
-    unflexedPosition(index: number): Omit<Layout, 'i'> {
-        return {
-            x: (index % (Math.floor(this.numCols / this.defaultW) || 1)) * this.defaultW,
-            y: Math.floor(index / (Math.floor(this.numCols / this.defaultH) || 1)) * this.defaultH,
-            w: this.defaultW,
-            h: this.defaultH,
-            static: true,
-        };
-    }
+    unflexedPosition = (index: number): Omit<Layout, 'i'> => ({
+        x: (index % (Math.floor(this.numCols / this.defaultW) || 1)) * this.defaultW,
+        y: Math.floor(index / (Math.floor(this.numCols / this.defaultH) || 1)) * this.defaultH,
+        w: this.defaultW,
+        h: this.defaultH,
+        static: true,
+    });
 
     /**
      * Maps the x- and y- coordinates of the event to a grid cell.
      */
-    screenToCell(sx: number, sy: number) {
-        const pt = this.ScreenToLocalBoxXf().transformPoint(sx, sy);
-        const x = Math.floor(pt[0] / this.colWidthPlusGap);
-        const y = Math.floor((pt[1] + this._scroll) / this.rowHeight);
+    screenToCell = (sx: number, sy: number) => {
+        const [ptx, pty] = this.ScreenToLocalBoxXf().transformPoint(sx, sy);
+        const x = Math.floor((ptx + this.xMargin) / this.colWidthPlusGap);
+        const y = Math.floor((pty + this.yMargin + this._scroll) / this.rowHeight);
         return { x, y };
-    }
+    };
 
     /**
      * Creates a layout object for a grid item
      */
-    makeLayoutItem = (doc: Doc, pos: { x: number; y: number }, Static: boolean = false, w: number = this.defaultW, h: number = this.defaultH) => ({ i: doc[Id], w, h, x: pos.x, y: pos.y, static: Static });
+    makeLayoutItem = (doc: Doc, pos: { x: number; y: number }, Static: boolean = false, w: number = this.defaultW, h: number = this.defaultH) => 
+        ({ i: doc[Id], w, h, x: pos.x, y: pos.y, static: Static }); // prettier-ignore
 
     /**
      * Adds a layout to the list of layouts.
@@ -152,9 +157,9 @@ export class CollectionGridView extends CollectionSubView() {
     /**
      * @returns the transform that will correctly place the document decorations box.
      */
-    private lookupIndividualTransform = (layout: Layout) => {
+    lookupIndividualTransform = (layout: Layout) => {
         const xypos = this.flexGrid ? layout : this.unflexedPosition(this.renderedLayoutList.findIndex(l => l.i === layout.i));
-        const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll };
+        const pos = { x: xypos.x * this.colWidthPlusGap + this.gridGap + this.xMargin, y: xypos.y * this.rowHeightPlusGap + this.gridGap - this._scroll + this.yMargin };
 
         return this.ScreenToLocalBoxXf().translate(-pos.x, -pos.y);
     };
@@ -169,9 +174,9 @@ export class CollectionGridView extends CollectionSubView() {
     /**
      * Stores the layout list on the Document as JSON
      */
-    setLayoutList(layouts: Layout[]) {
+    setLayoutList = (layouts: Layout[]) => {
         this.Document.gridLayoutString = JSON.stringify(layouts);
-    }
+    };
 
     isContentActive = () => this._props.isSelected() || this._props.isContentActive();
     isChildContentActive = () => (this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined);
@@ -183,29 +188,27 @@ export class CollectionGridView extends CollectionSubView() {
      * @param height
      * @returns the `ContentFittingDocumentView` of the node
      */
-    getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
-        return (
-            <DocumentView
-                {...this._props}
-                Document={layout}
-                TemplateDataDocument={layout.resolvedDataDoc as Doc}
-                NativeWidth={returnZero}
-                NativeHeight={returnZero}
-                fitWidth={this._props.childLayoutFitWidth}
-                containerViewPath={this.childContainerViewPath}
-                renderDepth={this._props.renderDepth + 1}
-                isContentActive={this.isChildContentActive}
-                PanelWidth={width}
-                PanelHeight={height}
-                ScreenToLocalTransform={dxf}
-                setContentViewBox={emptyFunction}
-                whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
-                onClickScript={this.onChildClickHandler}
-                dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'x' | 'y' | 'xy'}
-                showTags={BoolCast(this.layoutDoc.showChildTags) || BoolCast(this.Document._layout_showTags)}
-            />
-        );
-    }
+    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number) => (
+        <DocumentView
+            {...this._props}
+            Document={layout}
+            TemplateDataDocument={layout.resolvedDataDoc as Doc}
+            NativeWidth={returnZero}
+            NativeHeight={returnZero}
+            fitWidth={this._props.childLayoutFitWidth}
+            containerViewPath={this.childContainerViewPath}
+            renderDepth={this._props.renderDepth + 1}
+            isContentActive={this.isChildContentActive}
+            PanelWidth={width}
+            PanelHeight={height}
+            ScreenToLocalTransform={dxf}
+            setContentViewBox={emptyFunction}
+            whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
+            onClickScript={this.onChildClickHandler}
+            dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'x' | 'y' | 'xy'}
+            showTags={BoolCast(this.layoutDoc.showChildTags) || BoolCast(this.Document._layout_showTags)}
+        />
+    );
 
     /**
      * Saves the layouts received from the Grid to the Document.
@@ -238,15 +241,14 @@ export class CollectionGridView extends CollectionSubView() {
      * @returns a list of `ContentFittingDocumentView`s inside wrapper divs.
      * The key of the wrapper div must be the same as the `i` value of the corresponding layout.
      */
-    @computed
-    private get contents(): JSX.Element[] {
+    @computed get contents(): JSX.Element[] {
         const collector: JSX.Element[] = [];
         if (this.renderedLayoutList.length === this.childLayoutPairs.length) {
             this.renderedLayoutList.forEach(l => {
                 const child = this.childLayoutPairs.find(c => c.layout[Id] === l.i);
                 const dxf = () => this.lookupIndividualTransform(l);
-                const width = () => (this.flexGrid ? l.w : this.defaultW) * this.colWidthPlusGap - this.margin;
-                const height = () => (this.flexGrid ? l.h : this.defaultH) * this.rowHeightPlusGap - this.margin;
+                const width = () => (this.flexGrid ? l.w : this.defaultW) * this.colWidthPlusGap - this.gridGap;
+                const height = () => (this.flexGrid ? l.h : this.defaultH) * this.rowHeightPlusGap - this.gridGap;
                 child &&
                     collector.push(
                         <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this._props.isSelected() ? '' : ' static')}>
@@ -295,7 +297,7 @@ export class CollectionGridView extends CollectionSubView() {
      * Handles external drop of images/PDFs etc from outside Dash.
      */
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        this.dropLocation = this.screenToCell(e.clientX, e.clientY);
+        this._dropLocation = this.screenToCell(e.clientX, e.clientY);
         super.onExternalDrop(e, {});
     };
 
@@ -316,12 +318,13 @@ export class CollectionGridView extends CollectionSubView() {
             this,
             e,
             returnFalse,
-            action(() => {
-                undoable(() => {
+            undoable(
+                action(() => {
                     this.Document.gridRowHeight = this._rowHeight;
-                }, 'changing row height')();
-                this._rowHeight = undefined;
-            }),
+                    this._rowHeight = undefined;
+                }),
+                'changing row height'
+            ),
             emptyFunction,
             false,
             false
@@ -391,14 +394,14 @@ export class CollectionGridView extends CollectionSubView() {
                 <div
                     className="collectionGridView-gridContainer"
                     ref={this._containerRef}
-                    style={{ backgroundColor: StrCast(this.layoutDoc._backgroundColor, 'white') }}
+                    style={{ backgroundColor: StrCast(this.layoutDoc._backgroundColor, 'white'), padding: `${this.yMargin} ${this.xMargin}` }}
                     onWheel={e => e.stopPropagation()}
                     onScroll={action(e => {
                         if (!this._props.isSelected()) e.currentTarget.scrollTop = this._scroll;
                         else this._scroll = e.currentTarget.scrollTop;
                     })}>
                     <Grid
-                        width={this._props.PanelWidth()}
+                        width={this._props.PanelWidth() - 2 * this.xMargin}
                         nodeList={this.contents.length ? this.contents : null}
                         layout={this.contents.length ? this.renderedLayoutList : undefined}
                         childrenDraggable={!!this._props.isSelected()}
@@ -408,15 +411,15 @@ export class CollectionGridView extends CollectionSubView() {
                         transformScale={this.ScreenToLocalBoxXf().Scale}
                         compactType={this.compaction} // determines whether nodes should remain in position, be bound to the top, or to the left
                         preventCollision={BoolCast(this.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
-                        margin={this.margin}
+                        margin={this.gridGap}
                     />
                     <input
                         className="rowHeightSlider"
                         type="range"
-                        style={{ width: this._props.PanelHeight() - 30 }}
+                        style={{ width: this._props.PanelHeight() - 2 * this.yMargin }}
                         min={1}
                         value={this.rowHeight}
-                        max={this._props.PanelHeight() - 30}
+                        max={this._props.PanelHeight() - 2 * this.yMargin}
                         onPointerDown={this.onSliderDown}
                         onChange={this.onSliderChange}
                     />