Merge branch 'master' into sophie-ai-images

1 files changed, 142 insertions, 154 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 0b29e7286..89e72152a 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -1,20 +1,21 @@
-import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { CursorProperty } from 'csstype';
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
+import * as CSS from 'csstype';
+import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
+import * as React from 'react';
 import { Doc, Opt } from '../../../fields/Doc';
-import { DocData, Height, Width } from '../../../fields/DocSymbols';
+import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnNone, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnFalse, returnNone, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { CollectionViewType } from '../../documents/DocumentTypes';
 import { DragManager, dropActionType } from '../../util/DragManager';
+import { SettingsManager } from '../../util/SettingsManager';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from '../../util/UndoManager';
@@ -23,15 +24,14 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from '../EditableView';
 import { LightboxView } from '../LightboxView';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
-import { DocFocusOptions, DocumentView, DocumentViewProps } from '../nodes/DocumentView';
-import { FieldViewProps } from '../nodes/FieldView';
+import { DocumentView } from '../nodes/DocumentView';
+import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { StyleProp } from '../StyleProvider';
 import { CollectionMasonryViewFieldRow } from './CollectionMasonryViewFieldRow';
 import './CollectionStackingView.scss';
 import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn';
 import { CollectionSubView } from './CollectionSubView';
-import { SettingsManager } from '../../util/SettingsManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type collectionStackingViewProps = {
@@ -59,12 +59,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     // map of node headers to their heights. Used in Masonry
     @observable _heightMap = new Map<string, number>();
     // Assuming that this is the current css cursor style
-    @observable _cursor: CursorProperty = 'ew-resize';
+    @observable _cursor: CSS.Property.Cursor = 'ew-resize';
     // gets reset whenever we scroll. Not sure what it is
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
     // does this mean whether the browser is hidden? Or is chrome something else entirely?
     @computed get chromeHidden() {
-        return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
+        return this._props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
     // it looks like this gets the column headers that Mehek was showing just now
     @computed get colHeaderData() {
@@ -77,18 +77,18 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     // filteredChildren is what you want to work with. It's the list of things that you're currently displaying
     @computed get filteredChildren() {
         const children = this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout);
-        if (this.props.sortFunc) children.sort(this.props.sortFunc);
+        if (this._props.sortFunc) children.sort(this._props.sortFunc);
         return children;
     }
     // how much margin we give the header
     @computed get headerMargin() {
-        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin);
+        return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin);
     }
     @computed get xMargin() {
-        return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this.props.PanelWidth()));
+        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()));
+        return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
     }
 
     @computed get gridGap() {
@@ -96,7 +96,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     }
     // are we stacking or masonry?
     @computed get isStackingView() {
-        return (this.props.type_collection ?? this.layoutDoc._type_collection) === CollectionViewType.Stacking;
+        return (this._props.type_collection ?? this.layoutDoc._type_collection) === CollectionViewType.Stacking;
     }
     // this is the number of StackingViewFieldColumns that we have
     @computed get numGroupColumns() {
@@ -108,16 +108,16 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     }
     // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
-        return Math.min(this.props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
+        return Math.min(this._props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this._props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
     }
 
     @computed get NodeWidth() {
-        return this.props.PanelWidth() - this.gridGap;
+        return this._props.PanelWidth() - this.gridGap;
     }
 
     constructor(props: any) {
         super(props);
-
+        makeObservable(this);
         if (this.colHeaderData === undefined) {
             // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out?
             // here we're making an empty list of column headers (again, what Mehek showed us)
@@ -138,7 +138,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
             // just getting the style
-            const style = this.isStackingView ? { margin: this.rootDoc._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            const style = this.isStackingView ? { margin: this.Document._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             // So we're choosing whether we're going to render a column or a masonry doc
             return (
                 <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
@@ -203,7 +203,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
 
     componentDidMount() {
         super.componentDidMount?.();
-        this.props.setContentView?.(this);
+        this._props.setContentViewBox?.(this);
 
         // reset section headers when a new filter is inputted
         this._pivotFieldDisposer = reaction(
@@ -214,7 +214,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             () => this.layoutDoc._layout_autoHeight,
             layout_autoHeight =>
                 layout_autoHeight &&
-                this.props.setHeight?.(
+                this._props.setHeight?.(
                     Math.min(
                         NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER),
                         this.headerMargin + (this.isStackingView ? Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))) : this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), 0))
@@ -229,20 +229,19 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         this._layout_autoHeightDisposer?.();
     }
 
-    isAnyChildContentActive = () => this.props.isAnyChildContentActive();
+    isAnyChildContentActive = () => this._props.isAnyChildContentActive();
 
-    @action
     moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
-        return this.props.removeDocument?.(doc) && addDocument?.(doc) ? true : false;
+        return this._props.removeDocument?.(doc) && addDocument?.(doc) ? true : false;
     };
     createRef = (ele: HTMLDivElement | null) => {
         this._masonryGridRef = ele;
         this.createDashEventsTarget(ele!); //so the whole grid is the drop target?
     };
 
-    onChildClickHandler = () => this.props.childClickScript || ScriptCast(this.Document.onChildClick);
+    onChildClickHandler = () => this._props.childClickScript || ScriptCast(this.Document.onChildClick);
     @computed get onChildDoubleClickHandler() {
-        return () => this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick);
+        return () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick);
     }
 
     scrollToBottom = () => {
@@ -250,13 +249,13 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     };
 
     // let's dive in and get the actual document we want to drag/move around
-    focusDocument = (doc: Doc, options: DocFocusOptions) => {
+    focusDocument = (doc: Doc, options: FocusViewOptions) => {
         Doc.BrushDoc(doc);
 
         const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]);
         if (found) {
             const top = found.getBoundingClientRect().top;
-            const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
+            const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top);
             if (Math.floor(localTop[1]) !== 0) {
                 let focusSpeed = options.zoomTime ?? 500;
                 smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc);
@@ -266,102 +265,100 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return undefined;
     };
 
-    styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => {
+    styleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => {
         if (property === StyleProp.Opacity && doc) {
-            if (this.props.childOpacity) {
-                return this.props.childOpacity();
+            if (this._props.childOpacity) {
+                return this._props.childOpacity();
             }
             if (this.Document._currentFrame !== undefined) {
                 return CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity;
             }
         }
-        return this.props.styleProvider?.(doc, props, property);
+        return this._props.styleProvider?.(doc, props, property);
     };
     @undoBatch
-    @action
     onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => {
-        const docView = fieldProps.DocumentView?.();
-        if (docView && ['Enter'].includes(e.key) && e.ctrlKey) {
+        if (['Enter'].includes(e.key) && e.ctrlKey) {
             e.stopPropagation?.();
             const below = !e.altKey && e.key !== 'Tab';
-            const layout_fieldKey = StrCast(docView.LayoutFieldKey);
-            const newDoc = Doc.MakeCopy(docView.rootDoc, true);
-            const dataField = docView.rootDoc[Doc.LayoutFieldKey(newDoc)];
+            const layout_fieldKey = StrCast(fieldProps.fieldKey);
+            const newDoc = Doc.MakeCopy(fieldProps.Document, true);
+            const dataField = fieldProps.Document[Doc.LayoutFieldKey(newDoc)];
             newDoc[DocData][Doc.LayoutFieldKey(newDoc)] = dataField === undefined || Cast(dataField, listSpec(Doc), null)?.length !== undefined ? new List<Doc>([]) : undefined;
-            if (layout_fieldKey !== 'layout' && docView.rootDoc[layout_fieldKey] instanceof Doc) {
-                newDoc[layout_fieldKey] = docView.rootDoc[layout_fieldKey];
+            if (layout_fieldKey !== 'layout' && fieldProps.Document[layout_fieldKey] instanceof Doc) {
+                newDoc[layout_fieldKey] = fieldProps.Document[layout_fieldKey];
             }
-            Doc.GetProto(newDoc).text = undefined;
-            FormattedTextBox.SelectOnLoad = newDoc[Id];
+            newDoc[DocData].text = undefined;
+            FormattedTextBox.SetSelectOnLoad(newDoc);
             return this.addDocument?.(newDoc);
         }
     };
-    isContentActive = () => (this.props.isContentActive() ? true : this.props.isSelected() === false || this.props.isContentActive() === false ? false : undefined);
+    isContentActive = () => (this._props.isContentActive() ? true : this._props.isSelected() === false || this._props.isContentActive() === false ? false : undefined);
 
     @observable _renderCount = 5;
     isChildContentActive = () =>
-        this.props.isContentActive?.() === false
-            ? false
-            : this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive))
-            ? true
-            : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false
+        this._props.isContentActive?.() === false
             ? false
-            : undefined;
-    isChildButtonContentActive = () => (this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined);
+            : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive))
+              ? true
+              : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false
+                ? false
+                : undefined;
+    isChildButtonContentActive = () => (this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false ? false : undefined);
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
+    childFitWidth = (doc: Doc) => Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null));
     // this is what renders the document that you see on the screen
     // called in Children: this actually adds a document to our children list
     getDisplayDoc(doc: Doc, width: () => number, count: number) {
-        const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.DataDoc;
+        const dataDoc = doc.isTemplateDoc || doc.isTemplateForField ? this._props.TemplateDataDocument : undefined;
         const height = () => this.getDocHeight(doc);
-
+        const panelHeight = () => (this.isStackingView ? height() : Math.min(height(), this._props.PanelHeight()));
+        const panelWidth = () => (this.isStackingView ? width() : this.columnWidth);
         const stackedDocTransform = () => this.getDocTransform(doc);
         this._docXfs.push({ stackedDocTransform, width, height });
         return count > this._renderCount ? null : (
             <DocumentView
                 ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(doc, r))}
                 Document={doc}
-                DataDoc={dataDoc ?? (!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined)}
-                renderDepth={this.props.renderDepth + 1}
-                PanelWidth={width}
-                PanelHeight={height}
-                pointerEvents={this.props.DocumentView?.().props.onClick?.() ? returnNone : undefined} // if the stack has an onClick, then we don't want the contents to be interactive (see CollectionPileView)
+                TemplateDataDocument={dataDoc ?? (Doc.AreProtosEqual(doc[DocData], doc) ? undefined : doc[DocData])}
+                renderDepth={this._props.renderDepth + 1}
+                PanelWidth={panelWidth}
+                PanelHeight={panelHeight}
+                pointerEvents={this.DocumentView?.()._props.onClickScript?.() ? returnNone : undefined} // if the stack has an onClick, then we don't want the contents to be interactive (see CollectionPileView)
                 styleProvider={this.styleProvider}
-                docViewPath={this.props.docViewPath}
-                layout_fitWidth={this.props.childLayoutFitWidth}
+                containerViewPath={this.childContainerViewPath}
+                layout_fitWidth={this.childFitWidth}
                 isContentActive={doc.onClick ? this.isChildButtonContentActive : this.isChildContentActive}
                 onKey={this.onKeyDown}
-                onBrowseClick={this.props.onBrowseClick}
+                onBrowseClickScript={this._props.onBrowseClickScript}
                 isDocumentActive={this.isContentActive}
-                LayoutTemplate={this.props.childLayoutTemplate}
-                LayoutTemplateString={this.props.childLayoutString}
-                NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
-                NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeHeight(doc)) ? height : undefined}
-                dontCenter={this.props.childIgnoreNativeSize ? 'xy' : undefined}
-                dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to.
+                LayoutTemplate={this._props.childLayoutTemplate}
+                LayoutTemplateString={this._props.childLayoutString}
+                NativeWidth={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (this.childFitWidth(doc) && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
+                NativeHeight={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (this.childFitWidth(doc) && !Doc.NativeHeight(doc)) ? height : undefined}
+                dontCenter={this._props.childIgnoreNativeSize ? 'xy' : (StrCast(this.layoutDoc.layout_dontCenter) as any)}
+                dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to.
                 rootSelected={this.rootSelected}
-                layout_showTitle={this.props.childlayout_showTitle}
-                dragAction={(this.layoutDoc.childDragAction ?? this.props.childDragAction) as dropActionType}
-                onClick={this.onChildClickHandler}
-                onDoubleClick={this.onChildDoubleClickHandler}
+                layout_showTitle={this._props.childlayout_showTitle}
+                dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType}
+                onClickScript={this.onChildClickHandler}
+                onDoubleClickScript={this.onChildDoubleClickHandler}
                 ScreenToLocalTransform={stackedDocTransform}
                 focus={this.focusDocument}
                 childFilters={this.childDocFilters}
-                hideDecorationTitle={this.props.childHideDecorationTitle?.()}
-                hideResizeHandles={this.props.childHideResizeHandles?.()}
-                hideTitle={this.props.childHideTitle?.()}
+                hideDecorationTitle={this._props.childHideDecorationTitle}
+                hideResizeHandles={this._props.childHideResizeHandles}
                 childFiltersByRanges={this.childDocRangeFilters}
                 searchFilterDocs={this.searchFilterDocs}
-                xPadding={NumCast(this.layoutDoc._childXPadding, this.props.childXPadding)}
-                yPadding={NumCast(this.layoutDoc._childYPadding, this.props.childYPadding)}
-                addDocument={this.props.addDocument}
-                moveDocument={this.props.moveDocument}
-                removeDocument={this.props.removeDocument}
-                contentPointerEvents={StrCast(this.layoutDoc.contentPointerEvents) as any}
-                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
-                addDocTab={this.props.addDocTab}
-                bringToFront={returnFalse}
-                pinToPres={this.props.pinToPres}
+                xPadding={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)}
+                yPadding={NumCast(this.layoutDoc._childYPadding, this._props.childYPadding)}
+                addDocument={this._props.addDocument}
+                moveDocument={this._props.moveDocument}
+                removeDocument={this._props.removeDocument}
+                contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as any}
+                whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
+                addDocTab={this._props.addDocTab}
+                pinToPres={this._props.pinToPres}
             />
         );
     }
@@ -371,31 +368,31 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         this._scroll; // must be referenced for document decorations to update when the text box container is scrolled
         const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv);
         // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-        return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
+        return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.ScreenToLocalBoxXf().Scale);
     }
     getDocWidth(d?: Doc) {
         if (!d) return 0;
-        const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
+        const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.());
         const maxWidth = this.columnWidth / this.numGroupColumns;
-        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d))) {
-            return Math.min(d[Width](), maxWidth);
+        if (!this.layoutDoc._columnsFill && !this.childFitWidth(childLayoutDoc)) {
+            return Math.min(NumCast(d._width), maxWidth);
         }
         return maxWidth;
     }
     getDocHeight(d?: Doc) {
         if (!d || d.hidden) return 0;
-        const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
-        const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this.props.DataDoc;
-        const maxHeight = (lim => (lim === 0 ? this.props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1));
-        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d)) ? d[Width]() : 0);
-        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d)) ? d[Height]() : 0);
+        const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.());
+        const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this._props.TemplateDataDocument;
+        const maxHeight = (lim => (lim === 0 ? this._props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1));
+        const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._width) : 0);
+        const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._height) : 0);
         if (nw && nh) {
             const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
             const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
             return Math.min(maxHeight, (docWid * nh) / nw);
         }
         const childHeight = NumCast(childLayoutDoc._height);
-        const panelHeight = childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin;
+        const panelHeight = this.childFitWidth(childLayoutDoc) ? Number.MAX_SAFE_INTEGER : this._props.PanelHeight() - 2 * this.yMargin;
         return Math.min(childHeight, maxHeight, panelHeight);
     }
 
@@ -433,7 +430,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     }
 
     @undoBatch
-    @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         // Fairly confident that this is where the swapping of nodes in the various arrays happens
         const where = [de.x, de.y];
@@ -471,9 +467,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 }
                 return true;
             }
-        } else if (de.complete.linkDragData?.dragDocument.embedContainer === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) {
+        } else if (de.complete.linkDragData?.dragDocument.embedContainer === this.Document && de.complete.linkDragData?.linkDragView?.CollectionFreeFormDocumentView) {
             const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, _layout_fitWidth: true, title: 'dropped annotation' });
-            if (!this.props.addDocument?.(source)) e.preventDefault();
+            if (!this._props.addDocument?.(source)) e.preventDefault();
             de.complete.linkDocument = DocUtils.MakeLink(source, de.complete.linkDragData.linkSourceGetAnchor(), { link_relationship: 'doc annotation' }); // TODODO this is where in text links get passed
             e.stopPropagation();
             return true;
@@ -489,14 +485,13 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         const dropCreator = annoDragData.dropDocCreator;
         annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => {
             const dropDoc = dropCreator(annotationOn);
-            return dropDoc || this.rootDoc;
+            return dropDoc || this.Document;
         };
         return true;
     }
 
     /// an item from outside of Dash is being dropped onto this stacking view (e.g, a document from the file system)
     @undoBatch
-    @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
         const where = [e.clientX, e.clientY];
         let targInd = -1;
@@ -541,10 +536,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         this.refList.push(ref);
                         this.observer = new _global.ResizeObserver(
                             action((entries: any) => {
-                                if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) {
+                                if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.IsDragging) {
                                     const height = this.headerMargin + Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))));
-                                    if (!LightboxView.IsLightboxDocView(this.props.docViewPath())) {
-                                        this.props.setHeight?.(height);
+                                    if (!LightboxView.Contains(this.DocumentView?.())) {
+                                        this._props.setHeight?.(height);
                                     }
                                 }
                             })
@@ -555,8 +550,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 addDocument={this.addDocument}
                 chromeHidden={this.chromeHidden}
                 colHeaderData={this.colHeaderData}
-                Document={this.props.Document}
-                DataDoc={this.props.DataDoc}
+                Document={this.Document}
+                TemplateDataDocument={this._props.TemplateDataDocument}
                 renderChildren={this.children}
                 columnWidth={this.columnWidth}
                 numGroupColumns={this.numGroupColumns}
@@ -570,7 +565,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 yMargin={this.yMargin}
                 type={type}
                 createDropTarget={this.createDashEventsTarget}
-                screenToLocalTransform={this.props.ScreenToLocalTransform}
+                screenToLocalTransform={this.ScreenToLocalBoxXf}
             />
         );
     };
@@ -583,11 +578,11 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) {
             type = types[0];
         }
-        const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))));
+        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 (
             <CollectionMasonryViewFieldRow
                 showHandle={first}
-                Document={this.props.Document}
+                Document={this.Document}
                 chromeHidden={this.chromeHidden}
                 pivotField={this.pivotField}
                 unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)}
@@ -596,9 +591,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         this.refList.push(ref);
                         this.observer = new _global.ResizeObserver(
                             action((entries: any) => {
-                                if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) {
+                                if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.IsDragging) {
                                     const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), 0);
-                                    this.props.setHeight?.(2 * this.headerMargin + height); // bcz: added 2x for header to fix problem with scrollbars appearing in Tools panel
+                                    this._props.setHeight?.(2 * this.headerMargin + height); // bcz: added 2x for header to fix problem with scrollbars appearing in Tools panel
                                 }
                             })
                         );
@@ -614,7 +609,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 parent={this}
                 type={type}
                 createDropTarget={this.createDashEventsTarget}
-                screenToLocalTransform={this.props.ScreenToLocalTransform}
+                screenToLocalTransform={this.ScreenToLocalBoxXf}
                 setDocHeight={this.setDocHeight}
             />
         );
@@ -664,56 +659,49 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
 
     return35 = () => 35;
     @computed get buttonMenu() {
-        const menuDoc: Doc = Cast(this.rootDoc.layout_headerButton, Doc, null);
-        // TODO:glr Allow support for multiple buttons
-        if (menuDoc) {
-            const width: number = NumCast(menuDoc._width, 30);
-            const height: number = NumCast(menuDoc._height, 30);
-            return (
-                <div className="buttonMenu-docBtn" style={{ width: width, height: height }}>
-                    <DocumentView
-                        Document={menuDoc}
-                        DataDoc={menuDoc}
-                        isContentActive={this.isContentActive}
-                        isDocumentActive={this.isContentActive}
-                        addDocument={this.props.addDocument}
-                        moveDocument={this.props.moveDocument}
-                        addDocTab={this.props.addDocTab}
-                        onBrowseClick={this.props.onBrowseClick}
-                        pinToPres={emptyFunction}
-                        rootSelected={this.props.isSelected}
-                        removeDocument={this.props.removeDocument}
-                        ScreenToLocalTransform={Transform.Identity}
-                        PanelWidth={this.return35}
-                        PanelHeight={this.return35}
-                        renderDepth={this.props.renderDepth}
-                        focus={emptyFunction}
-                        styleProvider={this.props.styleProvider}
-                        docViewPath={returnEmptyDoclist}
-                        whenChildContentsActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
-                        childFilters={this.props.childFilters}
-                        childFiltersByRanges={this.props.childFiltersByRanges}
-                        searchFilterDocs={this.props.searchFilterDocs}
-                    />
-                </div>
-            );
-        }
+        const menuDoc = DocCast(this.layoutDoc.layout_headerButton);
+        return !menuDoc ? null : (
+            <div className="buttonMenu-docBtn" style={{ width: NumCast(menuDoc._width, 30), height: NumCast(menuDoc._height, 30) }}>
+                <DocumentView
+                    Document={menuDoc}
+                    isContentActive={this.isContentActive}
+                    isDocumentActive={this.isContentActive}
+                    addDocument={this._props.addDocument}
+                    moveDocument={this._props.moveDocument}
+                    addDocTab={this._props.addDocTab}
+                    onBrowseClickScript={this._props.onBrowseClickScript}
+                    pinToPres={emptyFunction}
+                    rootSelected={this.rootSelected}
+                    removeDocument={this._props.removeDocument}
+                    ScreenToLocalTransform={Transform.Identity}
+                    PanelWidth={this.return35}
+                    PanelHeight={this.return35}
+                    renderDepth={this._props.renderDepth}
+                    focus={emptyFunction}
+                    styleProvider={this._props.styleProvider}
+                    containerViewPath={returnEmptyDoclist}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    childFilters={this._props.childFilters}
+                    childFiltersByRanges={this._props.childFiltersByRanges}
+                    searchFilterDocs={this._props.searchFilterDocs}
+                />
+            </div>
+        );
     }
 
     @computed get nativeWidth() {
-        return this.props.NativeWidth?.() ?? Doc.NativeWidth(this.layoutDoc);
+        return this._props.NativeWidth?.() ?? Doc.NativeWidth(this.layoutDoc);
     }
     @computed get nativeHeight() {
-        return this.props.NativeHeight?.() ?? Doc.NativeHeight(this.layoutDoc);
+        return this._props.NativeHeight?.() ?? Doc.NativeHeight(this.layoutDoc);
     }
 
     @computed get scaling() {
-        return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight;
+        return !this.nativeWidth ? 1 : this._props.PanelHeight() / this.nativeHeight;
     }
 
     @computed get backgroundEvents() {
-        return this.props.isContentActive() === false ? 'none' : undefined;
+        return this._props.isContentActive() === false ? 'none' : undefined;
     }
     observer: any;
     render() {
@@ -723,8 +711,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             SetValue: this.addGroup,
             contents: '+ ADD A GROUP',
         };
-        const buttonMenu = this.rootDoc.layout_headerButton;
-        const noviceExplainer = this.rootDoc.layout_explainer;
+        const buttonMenu = this.layoutDoc.layout_headerButton;
+        const noviceExplainer = this.layoutDoc.layout_explainer;
         return (
             <>
                 {buttonMenu || noviceExplainer ? (
@@ -739,8 +727,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         ref={this.createRef}
                         style={{
                             overflowY: this.isContentActive() ? 'auto' : 'hidden',
-                            background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor),
-                            pointerEvents: (this.props.pointerEvents?.() as any) ?? this.backgroundEvents,
+                            background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor),
+                            pointerEvents: (this._props.pointerEvents?.() as any) ?? this.backgroundEvents,
                         }}
                         onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))}
                         onDrop={this.onExternalDrop.bind(this)}
@@ -748,7 +736,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         onWheel={e => this.isContentActive() && e.stopPropagation()}>
                         {this.renderedSections}
                         {!this.showAddAGroup ? null : (
-                            <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" style={{ width: !this.isStackingView ? '100%' : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
+                            <div key={`${this.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" style={{ width: !this.isStackingView ? '100%' : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
                                 <EditableView {...editableViewProps} />
                             </div>
                         )}