fixed dragging external documents onto notetaking view

1 files changed, 22 insertions, 44 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 1854a4213..989719c80 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -363,30 +363,30 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     // This function is used to preview where a document will drop in a column once a drag is complete.
     @action
-    onPointerOver = (e: React.PointerEvent) => {
-        if (DragManager.docsBeingDragged.length && this.childDocList) {
+    onPointerOver = (ex: number, ey: number) => {
+        console.log('Pover9ing = ');
+        if (this.childDocList) {
             // get the current docs for the column based on the mouse's x coordinate
             // will use again later, which is why we're saving as local
-            const xCoord = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0] - 2 * this.gridGap;
+            const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap;
             const colDocs = this.getDocsFromXCoord(xCoord);
             // get the index for where you need to insert the doc you are currently dragging
-            const clientY = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[1];
+            const clientY = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[1];
             let dropInd = -1;
             let pos0 = (this.refList.lastElement() as HTMLDivElement).children[0].getBoundingClientRect().height + this.yMargin * 2;
             colDocs.forEach((doc, i) => {
                 let pos1 = this.getDocHeight(doc) + 2 * this.gridGap;
                 pos1 += pos0;
                 // updating drop position based on y coordinates
-                const yCoordInBetween = clientY > pos0 && (clientY < pos1 || i == colDocs.length - 1);
-                if (yCoordInBetween) {
+                const yCoordInBetween = clientY > pos0 && clientY < pos1;
+                if (yCoordInBetween || (clientY < pos0 && i === 0)) {
                     dropInd = i;
-                    // dropAfter = 0;
-                    if (clientY > (pos0 + pos1) / 2) {
-                        // dropAfter = 1;
-                    }
+                } else if (i === colDocs.length - 1 && dropInd === -1) {
+                    dropInd = !colDocs.includes(DragManager.docsBeingDragged.lastElement()) ? i + 1 : i;
                 }
                 pos0 = pos1;
             });
+            console.log('Pover = ' + dropInd + ' ' + this.getColumnFromXCoord(xCoord));
             // we alter the pivot fields of the docs in case they are moved to a new column.
             const colIndex = this.getColumnFromXCoord(xCoord);
             const colHeader = StrCast(this.columnHeaders[colIndex].heading);
@@ -495,43 +495,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @undoBatch
     @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        const where = [e.clientX, e.clientY];
-        let targInd = -1;
-        const docs = this.getDocsFromXCoord(where[0]);
-        docs.map((d, i) => {
-            const pos0 = this.getDocTransform(d)
-                .inverse()
-                .transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-            const pos1 = this.getDocTransform(d).inverse().transformPoint(this.getDocWidth(d), this.getDocHeight(d));
-            // const pos0 = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-            // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
-            if (where[0] > pos0[0] && where[0] < pos1[0] && where[1] > pos0[1] && where[1] < pos1[1]) {
-                targInd = i;
-            }
-        });
-        // this._docXfs.map((cd, i) => {
-        //     const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-        //     const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
-        //     if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
-        //         targInd = i;
-        //     }
-        // });
-        super.onExternalDrop(e, {}, () => {
-            if (targInd !== -1) {
-                const newDoc = this.childDocs[this.childDocs.length - 1];
-                const docs = this.childDocList;
-                if (docs) {
-                    docs.splice(docs.length - 1, 1);
-                    docs.splice(targInd, 0, newDoc);
-                }
+        const targInd = this.docsDraggedRowCol?.[0] || 0;
+        super.onExternalDrop(e, {}, docus => {
+            this.onPointerOver(e.clientX, e.clientY);
+            docus?.map(doc => this.addDocument(doc));
+            const newDoc = this.childDocs.lastElement();
+            const docs = this.childDocList;
+            if (docs && targInd !== -1) {
+                docs.splice(docs.length - 1, 1);
+                docs.splice(targInd, 0, newDoc);
             }
+            this.removeDocDragHighlight();
         });
     };
 
-    // setDocsForColHeader = (key: string, docs: Doc[]) => {
-    //   this._docsByColumnHeader = new Map(this._docsByColumnHeader.set(key, docs))
-    // }
-
     headings = () => Array.from(this.Sections);
 
     refList: any[] = [];
@@ -723,7 +700,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                         pointerEvents: this.backgroundEvents ? 'all' : undefined,
                     }}
                     onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))}
-                    onPointerOver={this.onPointerOver}
+                    onPointerLeave={action(e => (this.docsDraggedRowCol.length = 0))}
+                    onPointerOver={e => this.onPointerOver(e.clientX, e.clientY)}
                     onDrop={this.onExternalDrop.bind(this)}
                     onContextMenu={this.onContextMenu}
                     onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}>