bad dragging code in progress

2 files changed, 119 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 20d809232..9ca1644e3 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -9,6 +9,10 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+import { DragManager } from '../../../util/DragManager';
+import { PresBox } from '../../nodes/trails/PresBox';
+import { UndoManager } from '../../../util/UndoManager';
+import { returnFalse } from '../../../../Utils';
 
 export enum ColumnType {
     Number,
@@ -25,7 +29,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _lastSelectedRow: number | undefined;
 
     @observable _rowMenuWidth: number = 60;
-    @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
+    @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>();
+    @observable _isDragging: boolean = false;
 
     @computed get columnKeys() {
         return Cast(this.props.Document.columnKeys, listSpec('string'), defaultColumnKeys);
@@ -48,15 +53,18 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    selectRow = (doc: Doc, ctrl?: boolean, shift?: boolean) => {
+    selectRow = (e: React.PointerEvent, doc: Doc) => {
+        const ctrl = e.ctrlKey || e.metaKey;
+        const shift = e.shiftKey;
         if (shift && this._lastSelectedRow !== undefined) {
-            const currSelectedRow = this.childDocs.indexOf(doc);
-            const startRow = Math.min(this._lastSelectedRow, currSelectedRow);
-            const endRow = Math.max(this._lastSelectedRow, currSelectedRow);
+            const currRowIndex = this.childDocs.indexOf(doc);
+            const startRow = Math.min(this._lastSelectedRow, currRowIndex);
+            const endRow = Math.max(this._lastSelectedRow, currRowIndex);
             for (let i = startRow; i <= endRow; i++) {
-                const currDoc = this.childDocs[i];
+                const currDoc: Doc = this.childDocs[i];
                 if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc);
             }
+            this._lastSelectedRow = endRow;
         } else if (ctrl) {
             if (!this._selectedDocs.has(doc)) {
                 this._selectedDocs.add(doc);
@@ -71,6 +79,58 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
+    @action
+    sortedSelectedDocs = (): Doc[] => {
+        return this.childDocs.filter(doc => this._selectedDocs.has(doc));
+    };
+
+    @action.bound
+    moveDocument = (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => {
+        console.log('hello');
+        console.log(targetCollection?.title);
+        if (Doc.AreProtosEqual(this.props.Document, targetCollection)) {
+            console.log('hi');
+            return true;
+        }
+        const first = document instanceof Doc ? document : document[0];
+        if (!first?._stayInCollection && addDocument !== returnFalse) {
+            UndoManager.RunInTempBatch(() => this.props.removeDocument?.(document) && addDocument(document));
+            return true;
+        }
+        return false;
+    };
+
+    @action
+    startDrag = (e: React.PointerEvent, doc: Doc) => {
+        if (this._selectedDocs.size === 0) this._selectedDocs.add(doc);
+        this._isDragging = true;
+        const dragData = new DragManager.DocumentDragData(this.sortedSelectedDocs(), 'move');
+        dragData.moveDocument = this.moveDocument;
+        const dragItem: HTMLElement[] = [];
+        const dragDiv = document.createElement('div');
+        dragDiv.className = 'presItem-multiDrag';
+        dragDiv.innerText = 'Move ' + this._selectedDocs.size + '  rows';
+        dragDiv.style.position = 'absolute';
+        dragDiv.style.top = e.clientY + 'px';
+        dragDiv.style.left = e.clientX - 50 + 'px';
+        dragItem.push(dragDiv);
+
+        DragManager.StartDocumentDrag(
+            dragItem.map(ele => ele),
+            dragData,
+            e.clientX,
+            e.clientY,
+            undefined
+        );
+        this._isDragging = false;
+        return true;
+    };
+
+    @action
+    endDrag = (e: React.PointerEvent) => {
+        // this._isDragging = false;
+    };
+
     render() {
         return (
             <div className="collectionSchemaView">
@@ -92,6 +152,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 rowMenuWidth={this._rowMenuWidth}
                                 selectedRows={this._selectedDocs}
                                 selectRow={this.selectRow}
+                                startDrag={this.startDrag}
+                                endDrag={this.endDrag}
+                                dragging={this._isDragging}
                             />
                         ))}
                     </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 33f4e0bfc..0065a0938 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -9,28 +9,75 @@ import { Colors } from '../../global/globalEnums';
 import { FieldViewProps } from '../../nodes/FieldView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
+import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { DragManager } from '../../../util/DragManager';
 
 export interface SchemaRowBoxProps extends FieldViewProps {
     columnKeys: string[];
     columnWidths: number[];
     rowMenuWidth: number;
     selectedRows: ObservableSet<Doc>;
-    selectRow: (doc: Doc, cmd?: boolean, shift?: boolean) => void;
+    selectRow: (e: any, doc: Doc) => void;
+    startDrag: (e: any, doc: Doc) => boolean;
+    endDrag: (e: any) => void
+    dragging: boolean;
 }
 
 @observer
 export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
+    private _ref: HTMLDivElement | null = null;
+
     isSelected = () => this.props.selectedRows.has(this.props.Document);
+    bounds = () => this._ref?.getBoundingClientRect();
 
     @action
     onRowPointerDown = (e: React.PointerEvent) => {
         e.stopPropagation();
-        this.props.selectRow(this.props.Document, e.ctrlKey || e.metaKey, e.shiftKey);
+
+        setupMoveUpEvents(
+            this, e,
+            (e) => this.props.startDrag(e, this.props.Document),
+            emptyFunction,
+            (e) => this.props.selectRow(e, this.props.Document)
+        )
     }
 
+    onPointerEnter = (e: any) => {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointermove', this.onPointerMove);
+    };
+
+    onPointerMove = (e: any) => {
+        let dragIsRow: boolean = true;
+        DragManager.docsBeingDragged.forEach(doc => {
+            dragIsRow = this.props.selectedRows.has(doc);
+        })
+        if (this._ref && dragIsRow) {
+            const rect = this._ref.getBoundingClientRect();
+            const y = e.clientY - rect.top; //y position within the element.
+            const height = this._ref.clientHeight;
+            const halfLine = height / 2;
+            if (y <= halfLine) {
+                this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`;
+                this._ref.style.borderBottom = '0px';
+            } else if (y > halfLine) {
+                this._ref.style.borderTop = '0px';
+                this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
+            }
+        }
+    };
+
+    onPointerLeave = (e: any) => {
+        if (this._ref) {
+            this._ref.style.borderTop = '0px';
+            this._ref.style.borderBottom = '0px';
+        }
+        document.removeEventListener('pointermove', this.onPointerMove);
+    };
+
     render() {
         return (
-            <div className="schema-row" style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE } : {}} onPointerDown={this.onRowPointerDown}>
+            <div className="schema-row" style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE, opacity: this.props.dragging ? 0.5 : 1} : {}} onPointerDown={this.onRowPointerDown} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} ref={(row: HTMLDivElement | null) => (this._ref = row)}>
                 <div className="row-menu" style={{width: this.props.rowMenuWidth}}>
                     <div className="row-button" onPointerDown={undoBatch((e) => {e.stopPropagation(); this.props.removeDocument?.(this.props.Document)})}>
                         <FontAwesomeIcon icon="times" />