added external drop and column resize

1 files changed, 90 insertions, 15 deletions

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}