column drag in progress

1 files changed, 23 insertions, 17 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index e1c2d989f..b0114a226 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -54,6 +54,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _lastSelectedRow: number | undefined;
     @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
     @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
+    @observable _colEles: HTMLDivElement[] = [];
     @observable _isDragging: boolean = false;
     @observable _displayColumnWidths: number[] | undefined;
     @observable _columnMenuIndex: number | undefined;
@@ -301,23 +302,17 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.layoutDoc.columnWidths = new List<number>(currWidths);
     };
 
-    // @action
-    // dragColumn = (e: any, index: number) => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    //     const rect = e.target.getBoundingClientRect();
-    //     if (e.clientX < rect.x) {
-    //         if (index < 1) return true;
-    //         this.swapColumns(index - 1, index);
-    //         return true;
-    //     }
-    //     if (e.clientX > rect.x + rect.width) {
-    //         if (index === this.columnKeys.length) return true;
-    //         this.swapColumns(index, index + 1);
-    //         return true;
-    //     }
-    //     return false;
-    // };
+    @action
+    dragColumn = (e: PointerEvent, index: number) => {
+        const dragData = new DragManager.ColumnDragData(index);
+        const dragEles = [this._colEles[index]];
+        this.childDocs.forEach(doc => {
+            dragEles.push(this._rowEles.get(doc).children[1].children[index]);
+        });
+        DragManager.StartColumnDrag(dragEles, dragData, e.x, e.y);
+
+        return true;
+    };
 
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => {
@@ -325,6 +320,15 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
+    setColRef = (index: number, ref: HTMLDivElement) => {
+        if (this._colEles.length <= index) {
+            this._colEles.push(ref);
+        } else {
+            this._colEles[index] = ref;
+        }
+    };
+
+    @action
     addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => {
         this._selectedDocs.add(doc);
         const rowDocView = DocumentManager.Instance.getDocumentView(doc);
@@ -842,6 +846,8 @@ export class CollectionSchemaView extends CollectionSubView() {
                                     removeColumn={this.removeColumn}
                                     resizeColumn={this.startResize}
                                     openContextMenu={this.openContextMenu}
+                                    dragColumn={this.dragColumn}
+                                    setColRef={this.setColRef}
                                 />
                             );
                         })}