Merge branch 'master' into info-ui-observable

1 files changed, 46 insertions, 23 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 563084af8..85fe7c896 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -1,10 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { Button } from 'browndash-components';
-import { action, computed, makeObservable } from 'mobx';
+import { Button, IconButton } from 'browndash-components';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnFalse } from '../../../../Utils';
+import { FaChevronRight } from 'react-icons/fa';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { DragManager, dropActionType } from '../../../util/DragManager';
@@ -37,6 +37,8 @@ const resizerWidth = 8;
 
 @observer
 export class CollectionMulticolumnView extends CollectionSubView() {
+    @observable _startIndex = 0;
+
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -48,7 +50,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
      */
     @computed
     private get ratioDefinedDocs() {
-        return this.childLayoutPairs.map(pair => pair.layout).filter(layout => StrCast(layout._dimUnit, '*') === DimUnit.Ratio);
+        return this.childLayouts.filter(layout => StrCast(layout._dimUnit, '*') === DimUnit.Ratio);
     }
 
     @computed
@@ -57,6 +59,15 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         return ratioDocs.length ? Math.min(...ratioDocs.map(layout => NumCast(layout._dimMagnitude))) : 1;
     }
 
+    @computed get maxShown() {
+        return NumCast(this.layoutDoc.layout_maxShown);
+    }
+
+    @computed
+    private get childLayouts() {
+        return (this.maxShown ? this.childLayoutPairs.slice(this._startIndex, this._startIndex + this.maxShown) : this.childLayoutPairs).map(pair => pair.layout);
+    }
+
     /**
      * This loops through all childLayoutPairs and extracts the values for _dimUnit
      * and _dimMagnitude, ignoring any that are malformed. Additionally, it then
@@ -69,9 +80,9 @@ export class CollectionMulticolumnView extends CollectionSubView() {
     private get resolvedLayoutInformation(): LayoutData {
         let starSum = 0;
         const widthSpecifiers: WidthSpecifier[] = [];
-        this.childLayoutPairs.map(pair => {
-            const unit = StrCast(pair.layout._dimUnit, '*');
-            const magnitude = NumCast(pair.layout._dimMagnitude, this.minimumDim);
+        this.childLayouts.map(layout => {
+            const unit = StrCast(layout._dimUnit, '*');
+            const magnitude = NumCast(layout._dimMagnitude, this.minimumDim);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
                 unit === DimUnit.Ratio && (starSum += magnitude);
                 widthSpecifiers.push({ magnitude, unit });
@@ -90,7 +101,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
          */
         // setTimeout(() => {
         //     const { ratioDefinedDocs } = this;
-        //     if (this.childLayoutPairs.length) {
+        //     if (this.childPairs.length) {
         //         const minimum = this.minimumDim;
         //         if (minimum !== 0) {
         //             ratioDefinedDocs.forEach(layout => layout._dimMagnitude = NumCast(layout._dimMagnitude, 1) / minimum, 1);
@@ -127,7 +138,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
     private get totalRatioAllocation(): number | undefined {
         const layoutInfoLen = this.resolvedLayoutInformation.widthSpecifiers.length;
         if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) {
-            return this._props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this._props.Document._xMargin);
+            return this._props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this.Document._xMargin);
         }
     }
 
@@ -187,13 +198,14 @@ export class CollectionMulticolumnView extends CollectionSubView() {
             return Transform.Identity(); // we're still waiting on promises to resolve
         }
         let offset = 0;
-        for (const { layout: candidate } of this.childLayoutPairs) {
+        var xf = Transform.Identity();
+        this.childLayouts.map(candidate => {
             if (candidate === layout) {
-                return this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0);
+                return (xf = this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0));
             }
             offset += this.lookupPixels(candidate) + resizerWidth;
-        }
-        return Transform.Identity(); // type coersion, this case should never be hit
+        });
+        return xf;
     };
 
     @undoBatch
@@ -259,16 +271,16 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 Document={childLayout}
                 TemplateDataDocument={childLayout.resolvedDataDoc as Doc}
                 styleProvider={this._props.styleProvider}
-                docViewPath={this._props.docViewPath}
+                containerViewPath={this.childContainerViewPath}
                 LayoutTemplate={this._props.childLayoutTemplate}
                 LayoutTemplateString={this._props.childLayoutString}
                 renderDepth={this._props.renderDepth + 1}
                 PanelWidth={width}
                 PanelHeight={height}
                 rootSelected={this.rootSelected}
-                dragAction={(this._props.Document.childDragAction ?? this._props.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}
                 suppressSetHeight={true}
                 ScreenToLocalTransform={dxf}
                 isContentActive={this.isChildContentActive}
@@ -287,7 +299,6 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 addDocTab={this._props.addDocTab}
                 pinToPres={this._props.pinToPres}
-                bringToFront={returnFalse}
                 dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
             />
         );
@@ -298,10 +309,8 @@ export class CollectionMulticolumnView extends CollectionSubView() {
      */
     @computed
     private get contents(): JSX.Element[] | null {
-        const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
-        for (let i = 0; i < childLayoutPairs.length; i++) {
-            const { layout } = childLayoutPairs[i];
+        this.childLayouts.forEach((layout, i) => {
             collector.push(
                 <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}>
                     <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}>
@@ -318,10 +327,10 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                     select={this._props.select}
                     columnUnitLength={this.getColumnUnitLength}
                     toLeft={layout}
-                    toRight={childLayoutPairs[i + 1]?.layout}
+                    toRight={this.childLayouts[i + 1]}
                 />
             );
-        }
+        });
         collector.pop(); // removes the final extraneous resize bar
         return collector;
     }
@@ -340,6 +349,20 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                     marginBottom: NumCast(this.Document._yMargin),
                 }}>
                 {this.contents}
+                {!this._startIndex ? null : (
+                    <Tooltip title={'scroll back'}>
+                        <div style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }} onClick={action(e => (this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown)))}>
+                            <Button tooltip="Scroll back" icon={<FontAwesomeIcon icon="chevron-left" size="lg" />} onClick={action(e => (this._startIndex = Math.max(0, this._startIndex - this.maxShown)))} color={SettingsManager.userColor} />
+                        </div>
+                    </Tooltip>
+                )}
+                {this._startIndex > this.childLayoutPairs.length - 1 ? null : (
+                    <Tooltip title={'scroll forward'}>
+                        <div style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }} onClick={action(e => (this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown)))}>
+                            <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} />
+                        </div>
+                    </Tooltip>
+                )}
             </div>
         );
     }