Merge branch 'master' into sophie-ai-images

1 files changed, 60 insertions, 63 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 04cfc5456..659f7ccdc 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -1,9 +1,9 @@
-import { action, computed } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { emptyFunction, returnFalse } from '../../../../Utils';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { returnFalse } from '../../../../Utils';
 import { DragManager, dropActionType } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
@@ -12,7 +12,6 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionMultirowView.scss';
 import HeightLabel from './MultirowHeightLabel';
 import ResizeBar from './MultirowResizer';
-
 interface HeightSpecifier {
     magnitude: number;
     unit: string;
@@ -33,6 +32,11 @@ const resizerHeight = 8;
 
 @observer
 export class CollectionMultirowView extends CollectionSubView() {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     /**
      * @returns the list of layout documents whose width unit is
      * *, denoting that it will be displayed with a ratio, not fixed pixel, value
@@ -118,7 +122,7 @@ export class CollectionMultirowView extends CollectionSubView() {
     private get totalRatioAllocation(): number | undefined {
         const layoutInfoLen = this.resolvedLayoutInformation.heightSpecifiers.length;
         if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) {
-            return this.props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this.props.Document._yMargin);
+            return this._props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this.Document._yMargin);
         }
     }
 
@@ -180,7 +184,7 @@ export class CollectionMultirowView extends CollectionSubView() {
         let offset = 0;
         for (const { layout: candidate } of this.childLayoutPairs) {
             if (candidate === layout) {
-                return this.props.ScreenToLocalTransform().translate(0, -offset / (this.props.NativeDimScaling?.() || 1));
+                return this.ScreenToLocalBoxXf().translate(0, -offset / (this._props.NativeDimScaling?.() || 1));
             }
             offset += this.lookupPixels(candidate) + resizerHeight;
         }
@@ -188,7 +192,6 @@ export class CollectionMultirowView extends CollectionSubView() {
     };
 
     @undoBatch
-    @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         let dropInd = -1;
         if (de.complete.docDragData && this._mainCont) {
@@ -215,8 +218,8 @@ export class CollectionMultirowView 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);
                         }
                     })
                 );
@@ -229,51 +232,56 @@ export class CollectionMultirowView extends CollectionSubView() {
     onChildClickHandler = () => ScriptCast(this.Document.onChildClick);
     onChildDoubleClickHandler = () => ScriptCast(this.Document.onChildDoubleClick);
 
-    isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive();
+    isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => {
-        const childDocsActive = this.props.childDocumentsActive?.() ?? this.rootDoc.childDocumentsActive;
-        return this.props.isContentActive?.() === false || childDocsActive === false
+        const childDocsActive = this._props.childDocumentsActive?.() ?? this.Document.childDocumentsActive;
+        return this._props.isContentActive?.() === false || childDocsActive === false
             ? false //
-            : this.props.isDocumentActive?.() && childDocsActive
-            ? true
-            : undefined;
+            : this._props.isDocumentActive?.() && childDocsActive
+              ? true
+              : undefined;
     };
-    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number, shouldNotScale: () => boolean) => {
+    getDisplayDoc = (layout: Doc) => {
+        const height = () => this.lookupPixels(layout);
+        const width = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0);
+        const dxf = () =>
+            this.lookupIndividualTransform(layout)
+                .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin))
+                .scale(this._props.NativeDimScaling?.() || 1);
+        const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox);
         return (
             <DocumentView
                 Document={layout}
-                DataDoc={layout.resolvedDataDoc as Doc}
-                styleProvider={this.props.styleProvider}
-                docViewPath={this.props.docViewPath}
-                LayoutTemplate={this.props.childLayoutTemplate}
-                LayoutTemplateString={this.props.childLayoutString}
-                renderDepth={this.props.renderDepth + 1}
+                TemplateDataDocument={layout.resolvedDataDoc as Doc}
+                styleProvider={this._props.styleProvider}
+                containerViewPath={this.childContainerViewPath}
+                LayoutTemplate={this._props.childLayoutTemplate}
+                LayoutTemplateString={this._props.childLayoutString}
+                renderDepth={this._props.renderDepth + 1}
                 PanelWidth={width}
                 PanelHeight={height}
-                shouldNotScale={shouldNotScale}
                 rootSelected={this.rootSelected}
-                dropAction={StrCast(this.rootDoc.childDragAction) as dropActionType}
-                onClick={this.onChildClickHandler}
-                onDoubleClick={this.onChildDoubleClickHandler}
+                dragAction={StrCast(this.Document.childDragAction, this._props.childDragAction) as dropActionType}
+                onClickScript={this.onChildClickHandler}
+                onDoubleClickScript={this.onChildDoubleClickHandler}
                 ScreenToLocalTransform={dxf}
                 isContentActive={this.isChildContentActive}
-                isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive}
-                hideResizeHandles={this.props.childHideResizeHandles?.()}
-                hideDecorationTitle={this.props.childHideDecorationTitle?.()}
-                fitContentsToBox={this.props.fitContentsToBox}
-                dragAction={this.props.childDragAction}
-                focus={this.props.focus}
+                isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+                hideResizeHandles={layout.layout_fitWidth || this._props.childHideResizeHandles ? true : false}
+                hideDecorationTitle={this._props.childHideDecorationTitle}
+                fitContentsToBox={this._props.fitContentsToBox}
+                focus={this._props.focus}
                 childFilters={this.childDocFilters}
                 childFiltersByRanges={this.childDocRangeFilters}
                 searchFilterDocs={this.searchFilterDocs}
-                dontRegisterView={this.props.dontRegisterView}
-                addDocument={this.props.addDocument}
-                moveDocument={this.props.moveDocument}
-                removeDocument={this.props.removeDocument}
-                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
-                addDocTab={this.props.addDocTab}
-                pinToPres={this.props.pinToPres}
-                bringToFront={returnFalse}
+                dontRegisterView={this._props.dontRegisterView}
+                addDocument={this._props.addDocument}
+                moveDocument={this._props.moveDocument}
+                removeDocument={this._props.removeDocument}
+                whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
+                addDocTab={this._props.addDocTab}
+                pinToPres={this._props.pinToPres}
+                dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
             />
         );
     };
@@ -284,29 +292,18 @@ export class CollectionMultirowView extends CollectionSubView() {
     @computed
     private get contents(): JSX.Element[] | null {
         const { childLayoutPairs } = this;
-        const { Document, PanelWidth } = 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 height = () => this.lookupPixels(layout);
-            const width = () => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
-            const docheight = () => Math.min(width() / aspect, height());
-            const docwidth = () => (layout._layout_forceReflow ? width() : Math.min(width(), docheight() * aspect));
-            const dxf = () =>
-                this.lookupIndividualTransform(layout)
-                    .translate(-NumCast(Document._xMargin) - (width() - docwidth()) / 2, -NumCast(Document._yMargin) - (height() - docheight()) / 2)
-                    .scale(this.props.NativeDimScaling?.() || 1);
-            const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox);
             collector.push(
-                <div className="document-wrapper" style={{ height: height() }} key={'wrapper' + i}>
-                    {this.getDisplayDoc(layout, dxf, docwidth, docheight, shouldNotScale)}
-                    <HeightLabel layout={layout} collectionDoc={Document} />
+                <div className="document-wrapper" style={{ flexDirection: 'row', height: this.lookupPixels(layout) }} key={'wrapper' + i}>
+                    {this.getDisplayDoc(layout)}
+                    <HeightLabel layout={layout} collectionDoc={this.Document} />
                 </div>,
                 <ResizeBar
                     height={resizerHeight}
-                    styleProvider={this.props.styleProvider}
-                    isContentActive={this.props.isContentActive}
+                    styleProvider={this._props.styleProvider}
+                    isContentActive={this._props.isContentActive}
                     key={'resizer' + i}
                     columnUnitLength={this.getRowUnitLength}
                     toTop={layout}
@@ -318,17 +315,17 @@ export class CollectionMultirowView extends CollectionSubView() {
         return collector;
     }
 
-    render(): JSX.Element {
+    render() {
         return (
             <div
-                className={'collectionMultirowView_contents'}
+                className="collectionMultirowView_contents"
                 style={{
-                    width: `calc(100% - ${2 * NumCast(this.props.Document._xMargin)}px)`,
-                    height: `calc(100% - ${2 * NumCast(this.props.Document._yMargin)}px)`,
-                    marginLeft: NumCast(this.props.Document._xMargin),
-                    marginRight: NumCast(this.props.Document._xMargin),
-                    marginTop: NumCast(this.props.Document._yMargin),
-                    marginBottom: NumCast(this.props.Document._yMargin),
+                    width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
+                    height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
+                    marginLeft: NumCast(this.Document._xMargin),
+                    marginRight: NumCast(this.Document._xMargin),
+                    marginTop: NumCast(this.Document._yMargin),
+                    marginBottom: NumCast(this.Document._yMargin),
                 }}
                 ref={this.createDashEventsTarget}>
                 {this.contents}