added dragging code

2 files changed, 34 insertions, 38 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 22b8496aa..0cf5a1ed9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -396,7 +396,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
+    startDrag = (e: PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
         if (!this._selectedDocs.has(doc)) {
             this.clearSelection();
             this.addDocToSelection(doc, false, index);
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index d67e6f2d7..0e7b0fa16 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -13,6 +13,7 @@ import { SchemaTableCell } from './SchemaTableCell';
 import { Colors } from '../../global/globalEnums';
 import { DocCast, StrCast } from '../../../../fields/Types';
 import { setupMoveUpEvents, emptyFunction } from '../../../../Utils';
+import { DragManager } from '../../../util/DragManager';
 
 @observer
 export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -46,48 +47,47 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
         setupMoveUpEvents(
             this,
             e,
-            // e => this.schemaView?.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex) ?? true,
-            returnTrue,
+            e => this.schemaView?.startDrag(e, this.rootDoc, this._ref!, this.rowIndex) ?? true,
             emptyFunction,
-            e => this.schemaView?.selectRow(e, this.props.Document, this._ref!, this.rowIndex)
+            e => this.schemaView?.selectRow(e, this.rootDoc, this._ref!, this.rowIndex)
         );
     };
 
-    // onPointerEnter = (e: any) => {
-    //     if (!this.props.dragging) return;
-    //     document.removeEventListener('pointermove', this.onPointerMove);
-    //     document.addEventListener('pointermove', this.onPointerMove);
-    // };
+    onPointerEnter = (e: any) => {
+        if (!this.schemaView?._isDragging) return;
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointermove', this.onPointerMove);
+    };
 
-    // onPointerMove = (e: any) => {
-    //     if (!this.props.dragging) return;
-    //     let dragIsRow: boolean = true;
-    //     DragManager.docsBeingDragged.forEach(doc => {
-    //         dragIsRow = this.props.selectedDocs.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';
-    //             this.props.dropIndex(this.props.rowIndex);
-    //         } else if (y > halfLine) {
-    //             this._ref.style.borderTop = '0px';
-    //             this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
-    //             this.props.dropIndex(this.props.rowIndex + 1);
-    //         }
-    //     }
-    // };
+    onPointerMove = (e: any) => {
+        if (!this.schemaView?._isDragging) return;
+        let dragIsRow: boolean = true;
+        DragManager.docsBeingDragged.forEach(doc => {
+            dragIsRow = this.schemaView?._selectedDocs.has(doc) ?? false;
+        });
+        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';
+                this.schemaView?.setDropIndex(this.rowIndex);
+            } else if (y > halfLine) {
+                this._ref.style.borderTop = '0px';
+                this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
+                this.schemaView?.setDropIndex(this.rowIndex + 1);
+            }
+        }
+    };
 
     onPointerLeave = (e: any) => {
         if (this._ref) {
             this._ref.style.borderTop = '0px';
             this._ref.style.borderBottom = '0px';
         }
-        // document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointermove', this.onPointerMove);
     };
 
     render() {
@@ -100,10 +100,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         : { height: CollectionSchemaView._rowHeight, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined }
                 }
                 onPointerDown={this.onRowPointerDown}
-                // onPointerEnter={this.onPointerEnter}
+                onPointerEnter={this.onPointerEnter}
                 onPointerLeave={this.onPointerLeave}
                 ref={(row: HTMLDivElement | null) => {
-                    // row && this.props.addRowRef(this.props.Document, row);
+                    row && this.schemaView?.addRowRef(this.rootDoc, row);
                     this._ref = row;
                 }}>
                 <div
@@ -137,7 +137,3 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
     }
 }
-function // e => this.schemaView?.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex) ?? true,
-returnTrue(e: PointerEvent, down: number[], delta: number[]): boolean {
-    throw new Error('Function not implemented.');
-}