doc preview and arrow key movement

3 files changed, 131 insertions, 16 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 4fa5d80e2..bd0fc11b3 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -3,6 +3,8 @@
 .collectionSchemaView {
     cursor: default;
     height: 100%;
+    display: flex;
+    flex-direction: row;
 
     .schema-table {
         background-color: $white;
@@ -124,6 +126,12 @@
             flex-direction: row;
         }
     }
+
+    .schema-preview-divider {
+        height: 100%;
+        background: black;
+        cursor: ew-resize;
+    }
 }
 
 .schema-header-row,
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4fb3f68c1..5d4777e12 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -8,7 +8,7 @@ import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
-import { emptyFunction, returnEmptyString, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs, DocUtils } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SelectionManager } from '../../../util/SelectionManager';
@@ -23,6 +23,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+import { DefaultStyleProvider } from '../../StyleProvider';
 
 export enum ColumnType {
     Number,
@@ -43,10 +44,12 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _minColWidth: number = 150;
 
     public static _rowMenuWidth: number = 100;
+    public static _previewDividerWidth: number = 4;
     @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
     @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
     @observable _isDragging: boolean = false;
     @observable _displayColumnWidths: number[] | undefined;
+    @observable _previewDoc: Doc | undefined;
 
     get documentKeys() {
         const docs = this.childDocs;
@@ -63,6 +66,14 @@ export class CollectionSchemaView extends CollectionSubView() {
         return Array.from(Object.keys(keys));
     }
 
+    @computed get previewWidth() {
+        return NumCast(this.props.Document.schemaPreviewWidth);
+    }
+
+    @computed get tableWidth() {
+        return this.props.PanelWidth() - this.previewWidth - CollectionSchemaView._previewDividerWidth;
+    }
+
     @computed get columnKeys() {
         return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys);
     }
@@ -71,14 +82,14 @@ export class CollectionSchemaView extends CollectionSubView() {
         let widths = Cast(
             this.layoutDoc.columnWidths,
             listSpec('number'),
-            this.columnKeys.map(() => (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length)
+            this.columnKeys.map(() => (this.tableWidth - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length)
         );
 
         const totalWidth = widths.reduce((sum, width) => sum + width, 0);
-        if (totalWidth !== this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) {
+        if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
             widths = widths.map(w => {
                 const proportion = w / totalWidth;
-                return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth);
+                return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth);
             });
         }
 
@@ -97,6 +108,42 @@ export class CollectionSchemaView extends CollectionSubView() {
         return BoolCast(this.layoutDoc.sortDesc);
     }
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.onKeyDown);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.onKeyDown);
+    }
+
+    @action
+    onKeyDown = (e: KeyboardEvent) => {
+        if (this._selectedDocs.size > 0) {
+            if (e.key == 'ArrowDown') {
+                const lastDoc = Array.from(this._selectedDocs.values()).lastElement();
+                const lastIndex = this.childDocs.indexOf(lastDoc);
+                if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
+                    this._selectedDocs.clear();
+                    const newDoc = this.childDocs[lastIndex + 1];
+                    this._selectedDocs.add(newDoc);
+                    SelectionManager.SelectSchemaViewDoc(newDoc);
+                    this._previewDoc = newDoc;
+                }
+            }
+            if (e.key == 'ArrowUp') {
+                const firstDoc = Array.from(this._selectedDocs.values())[0];
+                const firstIndex = this.childDocs.indexOf(firstDoc);
+                if (firstIndex > 0) {
+                    this._selectedDocs.clear();
+                    const newDoc = this.childDocs[firstIndex - 1];
+                    this._selectedDocs.add(newDoc);
+                    SelectionManager.SelectSchemaViewDoc(newDoc);
+                    this._previewDoc = newDoc;
+                }
+            }
+        }
+    };
+
     @undoBatch
     @action
     setSort = (field: string, desc: boolean) => {
@@ -134,10 +181,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
 
         let currWidths = [...this.storedColumnWidths];
-        const newColWidth = this.props.PanelWidth() / (currWidths.length + 1);
+        const newColWidth = this.tableWidth / (currWidths.length + 1);
         currWidths = currWidths.map(w => {
-            const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth);
-            return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - newColWidth);
+            const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth);
+            return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth);
         });
         currWidths.splice(index + 1, 0, newColWidth);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
@@ -159,8 +206,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         let currWidths = [...this.storedColumnWidths];
         const removedColWidth = currWidths[index];
         currWidths = currWidths.map(w => {
-            const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - removedColWidth);
-            return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth);
+            const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth - removedColWidth);
+            return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth);
         });
         currWidths.splice(index, 1);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
@@ -283,6 +330,12 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else {
             SelectionManager.SelectSchemaViewDoc(undefined);
         }
+
+        if (this._selectedDocs.size == 1) {
+            this._previewDoc = Array.from(this._selectedDocs)[0];
+        } else {
+            this._previewDoc = undefined;
+        }
     };
 
     @action
@@ -346,6 +399,21 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
+    onDividerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction);
+    };
+
+    @action
+    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
+        // const nativeWidth = this._previewCont!.getBoundingClientRect();
+        // const minWidth = 40;
+        // const maxWidth = 1000;
+        // const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0];
+        // const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth;
+        this.props.Document.schemaPreviewWidth = this.previewWidth - delta[0];
+        return false;
+    };
+
     @action
     addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
         if (!value && !forceEmptyNote) return false;
@@ -440,11 +508,14 @@ export class CollectionSchemaView extends CollectionSubView() {
                     this._ref = ele;
                     this.createDashEventsTarget(ele);
                 }}
-                onPointerDown={action(() => {
-                    this._selectedDocs.clear();
-                })}
                 onDrop={this.onExternalDrop.bind(this)}>
-                <div className="schema-table">
+                <div
+                    className="schema-table"
+                    onPointerDown={action(() => {
+                        this._selectedDocs.clear();
+                        SelectionManager.SelectSchemaViewDoc(undefined);
+                        this._previewDoc = undefined;
+                    })}>
                     <div className="schema-header-row">
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}></div>
                         {this.columnKeys.map((key, index) => {
@@ -467,7 +538,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             );
                         })}
                     </div>
-                    <div className="schema-table-content">
+                    <div className="schema-table-content" onPointerDown={e => e.stopPropagation()}>
                         {this.childDocs.map((doc: Doc, index: number) => {
                             const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc;
                             let dref: Opt<DocumentView>;
@@ -493,8 +564,43 @@ export class CollectionSchemaView extends CollectionSubView() {
                             );
                         })}
                     </div>
+                    <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
                 </div>
-                <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
+                <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>
+                {this.previewWidth > 0 && (
+                    <div style={{ width: `${this.previewWidth}px` }}>
+                        {this._previewDoc && (
+                            <DocumentView
+                                Document={this._previewDoc}
+                                DataDoc={undefined}
+                                fitContentsToBox={returnTrue}
+                                dontCenter={'y'}
+                                focus={DocUtils.DefaultFocus}
+                                renderDepth={this.props.renderDepth}
+                                rootSelected={this.rootSelected}
+                                PanelWidth={() => this.previewWidth}
+                                PanelHeight={this.props.PanelHeight}
+                                isContentActive={returnTrue}
+                                isDocumentActive={returnFalse}
+                                ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0)}
+                                docFilters={this.childDocFilters}
+                                docRangeFilters={this.childDocRangeFilters}
+                                searchFilterDocs={this.searchFilterDocs}
+                                styleProvider={DefaultStyleProvider}
+                                docViewPath={returnEmptyDoclist}
+                                ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+                                ContainingCollectionView={this.props.CollectionView}
+                                moveDocument={this.props.moveDocument}
+                                addDocument={this.props.addDocument}
+                                removeDocument={this.props.removeDocument}
+                                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
+                                addDocTab={this.props.addDocTab}
+                                pinToPres={this.props.pinToPres}
+                                bringToFront={returnFalse}
+                            />
+                        )}
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 9d5dfe507..2e303f91c 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import './CollectionSchemaView.scss';
 import { ColumnType } from './CollectionSchemaView';
+import { Colors } from 'browndash-components';
 
 export interface SchemaColumnHeaderProps {
     columnKeys: string[];
@@ -253,7 +254,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                         }}>
                         <FontAwesomeIcon icon="trash" />
                     </div>
-                    <div className="schema-header-button" onPointerDown={this.sortClicked}>
+                    <div className="schema-header-button" onPointerDown={this.sortClicked} style={this.props.sortField == this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
                         <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
                     </div>
                     <div className="schema-header-button" onPointerDown={e => this.toggleFilterMenu()}>