made multicolumn/row views fit contents to panel and center. changed collection drop to propagate when embed is not enabled. fixed image box drop . made goldenlayout tabs selectable. turned off leaving pushpins on drag out. fixed long press to disable on drag.

4 files changed, 35 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
index 821c8d804..f87a06033 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
@@ -8,6 +8,11 @@
         display: flex;
         flex-direction: column;
         width: 100%;
+        align-items: center;
+
+        .contentFittingDocumentView {
+            width: unset;
+        }
 
         .label-wrapper {
             display: flex;
@@ -15,7 +20,6 @@
             justify-content: center;
             height: 20px;
         }
-
     }
 
     .multiColumnResizer {
@@ -30,5 +34,4 @@
             transition: 0.5s background-color ease;
         }
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 6dcd2d422..10532b9d9 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -238,7 +238,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
             ? true
             : undefined;
     };
-    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number) => {
+    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number, shouldNotScale: () => boolean) => {
         return (
             <DocumentView
                 Document={layout}
@@ -250,6 +250,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 renderDepth={this.props.renderDepth + 1}
                 PanelWidth={width}
                 PanelHeight={height}
+                shouldNotScale={shouldNotScale}
                 rootSelected={this.rootSelected}
                 dragAction={(this.props.Document.childDragAction ?? this.props.childDragAction) as dropActionType}
                 onClick={this.onChildClickHandler}
@@ -287,15 +288,19 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         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_forceReflow ? width() : Math.min(height() * aspect, width()));
+            const docheight = () => Math.min(docwidth() / aspect, height());
             const dxf = () =>
                 this.lookupIndividualTransform(layout)
-                    .translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin))
+                    .translate(-NumCast(Document._xMargin) - (width() - docwidth()) / 2, -NumCast(Document._yMargin))
                     .scale(this.props.NativeDimScaling?.() || 1);
-            const width = () => this.lookupPixels(layout);
-            const height = () => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
+            const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox);
             collector.push(
-                <div className={'document-wrapper'} key={'wrapper' + i} style={{ width: width() }}>
-                    {this.getDisplayDoc(layout, dxf, width, height)}
+                <div className="document-wrapper" key={'wrapper' + i} style={{ width: width() }}>
+                    {this.getDisplayDoc(layout, dxf, docwidth, docheight, shouldNotScale)}
                     <WidthLabel layout={layout} collectionDoc={Document} />
                 </div>,
                 <ResizeBar
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
index 79fb195e8..ec7200a03 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
@@ -9,6 +9,12 @@
         display: flex;
         flex-direction: row;
         height: 100%;
+        align-items: center;
+        margin: auto;
+
+        .contentFittingDocumentView {
+            height: unset;
+        }
 
         .label-wrapper {
             display: flex;
@@ -16,7 +22,6 @@
             justify-content: center;
             height: 20px;
         }
-
     }
 
     .multiRowResizer {
@@ -31,5 +36,4 @@
             transition: 0.5s background-color ease;
         }
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 4df5dad5a..04cfc5456 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -238,7 +238,7 @@ export class CollectionMultirowView extends CollectionSubView() {
             ? true
             : undefined;
     };
-    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number) => {
+    getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number, shouldNotScale: () => boolean) => {
         return (
             <DocumentView
                 Document={layout}
@@ -250,6 +250,7 @@ export class CollectionMultirowView extends CollectionSubView() {
                 renderDepth={this.props.renderDepth + 1}
                 PanelWidth={width}
                 PanelHeight={height}
+                shouldNotScale={shouldNotScale}
                 rootSelected={this.rootSelected}
                 dropAction={StrCast(this.rootDoc.childDragAction) as dropActionType}
                 onClick={this.onChildClickHandler}
@@ -287,15 +288,19 @@ export class CollectionMultirowView extends CollectionSubView() {
         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), -NumCast(Document._yMargin))
+                    .translate(-NumCast(Document._xMargin) - (width() - docwidth()) / 2, -NumCast(Document._yMargin) - (height() - docheight()) / 2)
                     .scale(this.props.NativeDimScaling?.() || 1);
-            const height = () => this.lookupPixels(layout);
-            const width = () => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
+            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, width, height)}
+                <div className="document-wrapper" style={{ height: height() }} key={'wrapper' + i}>
+                    {this.getDisplayDoc(layout, dxf, docwidth, docheight, shouldNotScale)}
                     <HeightLabel layout={layout} collectionDoc={Document} />
                 </div>,
                 <ResizeBar