grouped selected cell dragging aligned properly; dragged cell placement offset weirdness fixed; bug introduced where rows being dragged deselect (still placed correctly)

2 files changed, 51 insertions, 44 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 050f303c2..570b614d8 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -28,6 +28,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+import { TbEmphasis } from 'react-icons/tb';
 const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export enum ColumnType {
@@ -56,7 +57,6 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', '
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
     private _keysDisposer: any;
-    private _closestDropIndex: number = 0;
     private _previewRef: HTMLDivElement | null = null;
     private _makeNewColumn: boolean = false;
     private _documentOptions: DocumentOptions = new DocumentOptions();
@@ -88,11 +88,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _menuValue: string = '';
     @observable _filterColumnIndex: number | undefined = undefined;
     @observable _filterSearchValue: string = '';
-    //an array of selected docs and the index representing the selected column
     @observable _selectedCol: number = 0;
-    @observable _selectedCells: Array<Doc> | undefined;
-    @observable _mouseY: number = 0;
-    @observable _mouseX: number = 0;
+    @observable _selectedCells: Array<Doc> = []; 
+    @observable _mouseCoordinates = { x: 0, y: 0 };
+    @observable _lowestSelectedIndex = -1;
+    @observable _relCursorIndex = -1; //cursor index relative to the current selected cells
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -151,7 +151,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return widths;
     }
 
-    @computed get rowHeights() {
+    @computed get heights() {
         const heights = this.childDocs.map(() => (this.rowHeightFunc()))
         return heights;
     }
@@ -226,7 +226,8 @@ export class CollectionSchemaView extends CollectionSubView() {
                     break;
                 case 'ArrowUp':
                     {
-                        const firstIndex = this.lastSelectedIndex;
+                        const firstDoc = this.sortedDocs.docs[0];
+                        const firstIndex = this.rowIndex(firstDoc);
                         const curDoc = this.sortedDocs.docs[firstIndex];
                         if (firstIndex > 0 && firstIndex < this.childDocs.length) {
                             console.log("firstindex: " + firstIndex + " docs: " + this.childDocs.length)
@@ -270,15 +271,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
-    @computed get lastSelectedIndex() {
-        let lastIndex: number = 0;
-        if (this._selectedCells) for (let i = 0; i < this._selectedCells?.length; ++i){
-            let rowIndex = this.rowIndex(this._selectedCells[i]);
-            (rowIndex > lastIndex) && (lastIndex = rowIndex);
-        }
-        return lastIndex;
-    }
-
     @action
     changeSelectedCellColumn = () => {
     
@@ -405,7 +397,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
-    findDropIndex = (mouseX: number) => {
+    findColDropIndex = (mouseX: number) => {
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -418,23 +410,41 @@ export class CollectionSchemaView extends CollectionSubView() {
         return index;
     };
 
+    @action
+    setRelCursorIndex = (mouseY: number) => {
+        let rowHeight = CollectionSchemaView._rowHeight;
+        let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu
+        let yOffset = this._lowestSelectedIndex * rowHeight;
+
+        const heights = this._selectedDocs.map(() => (this.rowHeightFunc()))
+        let index: number = 0;
+        heights.reduce((total, curr, i) => {
+            if (total <= adjInitMouseY && total + curr >= adjInitMouseY) {
+                if (adjInitMouseY <= total + curr) index = i;
+                else index = i + 1;
+            }
+            return total + curr;
+        }, yOffset);
+        this._relCursorIndex = index;
+    }
+
     findRowDropIndex = (mouseY: number) => {
         let index: number = 0;
-        this.rowHeights.reduce((total, curr, i) => {
+        this.heights.reduce((total, curr, i) => {
             if (total <= mouseY && total + curr >= mouseY) {
                 if (mouseY <= total + curr) index = i;
                 else index = i + 1;
             }
             return total + curr;
         }, CollectionSchemaView._rowHeight);
-        return index;
+        return index - this._relCursorIndex;
     };
 
     @action
     highlightDropColumn = (e: PointerEvent) => {
         e.stopPropagation();
         const mouseX = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY)[0];
-        const index = this.findDropIndex(mouseX);
+        const index = this.findColDropIndex(mouseX);
         this._colEles.forEach((colRef, i) => {
             let leftStyle = '';
             let rightStyle = '';
@@ -492,6 +502,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
+        let index = this.rowIndex(doc);
 
         if (!this) return;
         const lastSelected = Array.from(this._selectedDocs).lastElement();
@@ -500,29 +511,34 @@ export class CollectionSchemaView extends CollectionSubView() {
             if (lastSelected && this._selectedDocs.includes(doc)){
                 SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc))
                 this.deselectCell(doc);
-            } else this.addDocToSelection(doc, true, this.rowIndex(doc));
+            } else this.addDocToSelection(doc, true, index);
         }
-        else this.addDocToSelection(doc, false, this.rowIndex(doc));
+        else this.addDocToSelection(doc, false, index);
         this._selectedCol = col;
 
+        if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
+        console.log(this._lowestSelectedIndex)
+
         //let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
     };
 
     @action
     deselectCell = (doc: Doc) => {
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
+        if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc)))
     };
 
     @action
     deselectAllCells = () => {
-        this._selectedCells = undefined;
+        this._selectedCells = [];
+        this._lowestSelectedIndex = -1;
     }
 
     sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
 
     @computed
     get rowDropIndex(){
-        const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseX, this._mouseY)[1];
+        const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
         const index = this.findRowDropIndex(mouseY);
         return index
     }
@@ -530,7 +546,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.columnDragData) {
             const mouseX = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y)[0];
-            const index = this.findDropIndex(mouseX);
+            const index = this.findColDropIndex(mouseX);
             this.moveColumn(de.complete.columnDragData.colIndex, index ?? de.complete.columnDragData.colIndex);
 
             this._colEles.forEach((colRef, i) => {
@@ -545,16 +561,12 @@ export class CollectionSchemaView extends CollectionSubView() {
             e.stopPropagation();
             return true;
         }
+
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            const pushedDocs = this.childDocs.filter((doc, index) => index >= this.rowDropIndex && !draggedDocs.includes(doc));
-            const pushedAndDraggedDocs = [...pushedDocs, ...draggedDocs];
-            const removed = this.childDocs.slice().filter(doc => !pushedAndDraggedDocs.includes(doc));
-            this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...removed, ...draggedDocs, ...pushedDocs]);
+            this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
             draggedDocs.forEach(doc => {
-                const draggedView = DocumentManager.Instance.getFirstDocumentView(doc);
-                //if (draggedView) DocumentManager.Instance.RemoveView(draggedView); //this is what messed up multi-select with row dragging
                 DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true));
             });
             return true;
@@ -928,8 +940,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
         if (DragManager.docsBeingDragged.length){
-            this._mouseY = e.clientY;
-            this._mouseX = e.clientX;
+            this._mouseCoordinates = { x: e.clientX, y: e.clientY };
         }
     }
 
@@ -948,6 +959,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                   if (desc) out *= -1;
                   return out;
               });
+
         docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged)
         return { docs };
     }
@@ -961,7 +973,10 @@ export class CollectionSchemaView extends CollectionSubView() {
     _oldWheel: any;
     render() {
         return (
-            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={(e) => this.onPointerMove(e)}>
+            <div className="collectionSchemaView" 
+            ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
+            onDrop={this.onExternalDrop.bind(this)} 
+            onPointerMove={(e) => this.onPointerMove(e)}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div>
                 <div
                     className="schema-table"
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 4fd2894af..7e40ef766 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -53,16 +53,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         this._props.setContentViewBox?.(this);
     }
 
-    //This method is never called anywhere
-    select = (ctrlKey: boolean, shiftKey: boolean) => {
-        if (!this.schemaView) return;
-        const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement();
-        if (shiftKey && lastSelected) this.schemaView.selectRows(this.Document, lastSelected);
-        else {
-            this.schemaView.addDocToSelection(this.Document, false, 0);
-        }
-    };
-
+    setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
     getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey));
     selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl);
@@ -75,6 +66,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return (
             <div
                 className="schema-row"
+                onPointerDown={(e) => this.setCursorIndex(e.clientY)}
                 style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }}
                 ref={(row: HTMLDivElement | null) => {
                     row && this.schemaView?.addRowRef?.(this.Document, row);