numerous changes to fix bugs and to fix/remove old or hacky code. fixed doc dec resizing. moving this.rootDoc => this.Document . fixing template artifacts.

1 files changed, 18 insertions, 21 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index c2586fb4b..05ec0448b 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -219,8 +219,8 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                             if (this.childDocs.includes(d)) {
                                 if (dropInd > this.childDocs.indexOf(d)) dropInd--;
                             }
-                            Doc.RemoveDocFromList(this.rootDoc, this.props.fieldKey, d);
-                            Doc.AddDocToList(this.rootDoc, this.props.fieldKey, d, DocListCast(this.rootDoc[this.props.fieldKey])[dropInd], undefined, dropInd === -1);
+                            Doc.RemoveDocFromList(this.dataDoc, this.props.fieldKey, d);
+                            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, d, DocListCast(this.dataDoc[this.props.fieldKey])[dropInd], undefined, dropInd === -1);
                         }
                     })
                 );
@@ -235,18 +235,25 @@ export class CollectionMulticolumnView extends CollectionSubView() {
 
     isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive();
     isChildContentActive = () => {
-        const childDocsActive = this.props.childDocumentsActive?.() ?? this.rootDoc.childDocumentsActive;
+        const childDocsActive = this.props.childDocumentsActive?.() ?? this.Document.childDocumentsActive;
         return this.props.isContentActive?.() === false || childDocsActive === false
             ? false //
             : this.props.isDocumentActive?.() && childDocsActive
             ? true
             : undefined;
     };
-    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number, shouldNotScale: () => boolean) => {
+    getDisplayDoc = (childLayout: Doc) => {
+        const width = () => this.lookupPixels(childLayout);
+        const height = () => this.props.PanelHeight() - 2 * NumCast(this.layoutDoc._yMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0);
+        const dxf = () =>
+            this.lookupIndividualTransform(childLayout)
+                .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin))
+                .scale(this.props.NativeDimScaling?.() || 1);
+        const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(childLayout.freeform_fitContentsToBox);
         return (
             <DocumentView
-                Document={layout}
-                DataDoc={layout.resolvedDataDoc as Doc}
+                Document={childLayout}
+                DataDoc={childLayout.resolvedDataDoc as Doc}
                 styleProvider={this.props.styleProvider}
                 docViewPath={this.props.docViewPath}
                 LayoutTemplate={this.props.childLayoutTemplate}
@@ -263,7 +270,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 ScreenToLocalTransform={dxf}
                 isContentActive={this.isChildContentActive}
                 isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive}
-                hideResizeHandles={this.props.childHideResizeHandles?.()}
+                hideResizeHandles={childLayout.layout_fitWidth || this.props.childHideResizeHandles?.() ? true : false}
                 hideDecorationTitle={this.props.childHideDecorationTitle?.()}
                 fitContentsToBox={this.props.fitContentsToBox}
                 focus={this.props.focus}
@@ -278,6 +285,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 addDocTab={this.props.addDocTab}
                 pinToPres={this.props.pinToPres}
                 bringToFront={returnFalse}
+                dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
             />
         );
     };
@@ -288,26 +296,15 @@ export class CollectionMulticolumnView extends CollectionSubView() {
     @computed
     private get contents(): JSX.Element[] | null {
         const { childLayoutPairs } = this;
-        const { Document, PanelHeight } = this.props;
         const collector: JSX.Element[] = [];
         for (let i = 0; i < childLayoutPairs.length; i++) {
             const { layout } = childLayoutPairs[i];
-            const aspect = Doc.NativeAspect(layout, undefined, true);
-            const width = () => this.lookupPixels(layout);
-            const height = () => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
-            const docwidth = () => (layout._layout_reflowHorizontal ? width() : Math.min(height() * aspect, width()));
-            const docheight = () => Math.min(docwidth() / aspect, height());
-            const dxf = () =>
-                this.lookupIndividualTransform(layout)
-                    .translate(-NumCast(Document._xMargin) - (width() - docwidth()) / 2, -NumCast(Document._yMargin))
-                    .scale(this.props.NativeDimScaling?.() || 1);
-            const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox);
             collector.push(
                 <Tooltip title={'Tab: ' + StrCast(layout.title)}>
-                    <div className="document-wrapper" key={'wrapper' + i} style={{ width: width() }}>
-                        {this.getDisplayDoc(layout, dxf, docwidth, docheight, shouldNotScale)}
+                    <div className="document-wrapper" key={'wrapper' + i} style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}>
+                        {this.getDisplayDoc(layout)}
                         <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(e => this.props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} />
-                        <WidthLabel layout={layout} collectionDoc={Document} />
+                        <WidthLabel layout={layout} collectionDoc={this.Document} />
                     </div>
                 </Tooltip>,
                 <ResizeBar