added external drop and column resize

4 files changed, 133 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 83164a82a..1d0ab459d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -11,11 +11,12 @@
         .schema-row {
             display: flex;
             flex-direction: row;
+            max-height: 70px;
+            overflow: auto;
 
             .schema-column-header,
             .schema-table-cell,
             .row-menu {
-                min-width: 50px;
                 border: 1px solid $medium-gray;
                 padding: 5px;
                 overflow: hidden;
@@ -31,6 +32,34 @@
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
+                padding: 0;
+
+                .schema-column-title {
+                    flex-grow: 2;
+                    margin: 5px;
+                }
+
+                .schema-header-menu {
+                    margin: 5px;
+                }
+
+                .schema-column-resizer {
+                    height: 100%;
+                    width: 3px;
+                    cursor: ew-resize;
+
+                    &:hover {
+                        background-color: $light-blue;
+                    }
+                }
+
+                .schema-column-resizer.right {
+                    align-self: flex-end;
+                }
+
+                .schema-column-resizer.left {
+                    align-self: flex-start;
+                }
             }
         }
 
@@ -41,6 +70,7 @@
                 display: flex;
                 flex-direction: row;
                 justify-content: center;
+                min-width: 50px;
             }
 
             .row-cells {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4d96d5f7e..a09d2722c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -2,25 +2,25 @@ import React = require('react');
 import { action, computed, observable, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
+import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
 import { Cast, StrCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
+import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../../Utils';
+import { Docs, DocUtils } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
-import { CollectionSubView } from '../CollectionSubView';
-import './CollectionSchemaView.scss';
-import { SchemaColumnHeader } from './SchemaColumnHeader';
-import { SchemaRowBox } from './SchemaRowBox';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { undoBatch } from '../../../util/UndoManager';
-import { EditableView } from '../../EditableView';
-import { returnEmptyString } from '../../../../Utils';
-import { Docs, DocUtils } from '../../../documents/Documents';
-import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { ContextMenu } from '../../ContextMenu';
 import { ContextMenuProps } from '../../ContextMenuItem';
-import { Id } from '../../../../fields/FieldSymbols';
-import { RichTextField } from '../../../../fields/RichTextField';
-import { ImageField } from '../../../../fields/URLField';
+import { EditableView } from '../../EditableView';
+import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
+import { CollectionSubView } from '../CollectionSubView';
+import './CollectionSchemaView.scss';
+import { SchemaColumnHeader } from './SchemaColumnHeader';
+import { SchemaRowBox } from './SchemaRowBox';
 
 export enum ColumnType {
     Number,
@@ -38,16 +38,18 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _lastSelectedRow: number | undefined;
     private _selectedDocSortedArray: Doc[] = [];
     private _closestDropIndex: number = 0;
+    private _minColWidth: number = 120;
 
     @observable _rowMenuWidth: number = 100;
     @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>();
     @observable _isDragging: boolean = false;
+    @observable _displayColumnWidths: number[] | undefined;
 
     @computed get columnKeys() {
         return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys);
     }
 
-    @computed get columnWidths() {
+    @computed get storedColumnWidths() {
         return Cast(
             this.layoutDoc.columnWidths,
             listSpec('number'),
@@ -55,6 +57,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
 
+    @computed get displayColumnWidths() {
+        return this._displayColumnWidths ?? this.storedColumnWidths;
+    }
+
     @undoBatch
     @action
     changeColumnKey = (index: number, newKey: string) => {
@@ -81,6 +87,51 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
+    startResize = (e: any, index: number, left: boolean) => {
+        this._displayColumnWidths = this.storedColumnWidths;
+        setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index, left), this.finishResize, emptyFunction);
+    };
+
+    @action
+    resizeColumn = (e: PointerEvent, index: number, left: boolean) => {
+        if (this._displayColumnWidths) {
+            let shrinking;
+            let growing;
+
+            let change = e.movementX;
+
+            if (left && index !== 0) {
+                growing = change < 0 ? index : index - 1;
+                shrinking = change < 0 ? index - 1 : index;
+            } else if (!left && index !== this.columnKeys.length - 1) {
+                growing = change > 0 ? index : index + 1;
+                shrinking = change > 0 ? index + 1 : index;
+            }
+
+            if (shrinking === undefined || growing === undefined) return true;
+
+            change = Math.abs(change);
+            if (this._displayColumnWidths[shrinking] - change < this._minColWidth) {
+                change = this._displayColumnWidths[shrinking] - this._minColWidth;
+            }
+
+            this._displayColumnWidths[shrinking] -= change;
+            this._displayColumnWidths[growing] += change;
+
+            return false;
+        }
+        return true;
+    };
+
+    // @undoBatch
+    @action
+    finishResize = () => {
+        console.log('finished');
+        this.layoutDoc.columnWidths = new List<number>(this._displayColumnWidths);
+        this._displayColumnWidths = undefined;
+    };
+
+    @action
     selectRow = (e: React.PointerEvent, doc: Doc, index: number) => {
         const ctrl = e.ctrlKey || e.metaKey;
         const shift = e.shiftKey;
@@ -136,6 +187,21 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
+    onExternalDrop = async (e: React.DragEvent): Promise<void> => {
+        console.log('hello');
+        super.onExternalDrop(
+            e,
+            {},
+            undoBatch(
+                action(docus => {
+                    this._isDragging = false;
+                    docus.map((doc: Doc) => this.addDocument(doc));
+                })
+            )
+        );
+    };
+
+    @action
     startDrag = (e: React.PointerEvent, doc: Doc) => {
         if (!this._selectedDocs.has(doc)) {
             this._selectedDocs.clear();
@@ -251,11 +317,20 @@ export class CollectionSchemaView extends CollectionSubView() {
                     this._ref = ele;
                     this.createDashEventsTarget(ele);
                 }}
-                onPointerDown={() => this._selectedDocs.clear()}>
+                onPointerDown={() => this._selectedDocs.clear()}
+                onDrop={this.onExternalDrop.bind(this)}>
                 <div className="schema-table">
                     <div className="schema-header-row">
                         {this.columnKeys.map((key, index) => (
-                            <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} addColumn={this.addColumn} removeColumn={this.removeColumn} />
+                            <SchemaColumnHeader
+                                columnIndex={index}
+                                columnKeys={this.columnKeys}
+                                columnWidths={this.displayColumnWidths}
+                                changeColumnKey={this.changeColumnKey}
+                                addColumn={this.addColumn}
+                                removeColumn={this.removeColumn}
+                                resizeColumn={this.startResize}
+                            />
                         ))}
                     </div>
                     <div className="schema-table-content">
@@ -267,7 +342,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 ContainingCollectionView={this.props.CollectionView}
                                 rowIndex={index}
                                 columnKeys={this.columnKeys}
-                                columnWidths={this.columnWidths}
+                                columnWidths={this.displayColumnWidths}
                                 rowMenuWidth={this._rowMenuWidth}
                                 selectedRows={this._selectedDocs}
                                 selectRow={this.selectRow}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index f93a3d13d..bee76bb24 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -12,6 +12,7 @@ export interface SchemaColumnHeaderProps {
     changeColumnKey: (index: number, newKey: string) => boolean;
     addColumn: (index: number) => void;
     removeColumn: (index: number) => void;
+    resizeColumn: (e: any, index: number, left: boolean) => void;
 }
 
 @observer
@@ -23,7 +24,10 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     render() {
         return (
             <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
-                <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
+                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div>
+                <div className="schema-column-title">
+                    <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
+                </div>
 
                 <div className="schema-header-menu">
                     <div
@@ -41,6 +45,8 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                         <FontAwesomeIcon icon="trash" />
                     </div>
                 </div>
+
+                <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div>
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 3d1fa0ee2..661056553 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -6,7 +6,7 @@ import { Doc } from '../../../../fields/Doc';
 import { undoBatch } from '../../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
-import { FieldViewProps } from '../../nodes/FieldView';
+import { FieldView, FieldViewProps } from '../../nodes/FieldView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
 import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
@@ -26,6 +26,10 @@ export interface SchemaRowBoxProps extends FieldViewProps {
 
 @observer
 export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(SchemaRowBox, fieldKey);
+    }
+
     private _ref: HTMLDivElement | null = null;
 
     isSelected = () => this.props.selectedRows.has(this.props.Document);