fixed dragging external documents onto notetaking view

3 files changed, 94 insertions, 127 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
index a878033ed..fe98f307e 100644
--- a/src/client/views/collections/CollectionNoteTakingView.scss
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -1,50 +1,50 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
 
 .collectionNoteTakingView-DocumentButtons {
-  display: flex;
-  justify-content: space-between;
-  margin: auto;
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
 }
 
 .collectionNoteTakingView-addDocumentButton {
-  display: flex;
-  overflow: hidden;
-  margin: auto;
-  width: 100%;
-  overflow: ellipses;
-
-  .editableView-container-editing-oneLine,
-  .editableView-container-editing {
-      color: grey;
-      padding: 10px;
-      width: 100%;
-  }
-
-  .editableView-input:hover,
-  .editableView-container-editing:hover,
-  .editableView-container-editing-oneLine:hover {
-      cursor: text
-  }
-
-  .editableView-input {
-      outline-color: black;
-      letter-spacing: 2px;
-      color: grey;
-      border: 0px;
-      padding: 12px 10px 11px 10px;
-  }
-
-  font-size: 75%;
-  letter-spacing: 2px;
-  cursor: pointer;
-
-  .editableView-input {
-      outline-color: black;
-      letter-spacing: 2px;
-      color: grey;
-      border: 0px;
-      padding: 12px 10px 11px 10px;
-  }
+    display: flex;
+    overflow: hidden;
+    margin: auto;
+    width: 100%;
+    overflow: ellipses;
+
+    .editableView-container-editing-oneLine,
+    .editableView-container-editing {
+        color: grey;
+        padding: 10px;
+        width: 100%;
+    }
+
+    .editableView-input:hover,
+    .editableView-container-editing:hover,
+    .editableView-container-editing-oneLine:hover {
+        cursor: text;
+    }
+
+    .editableView-input {
+        outline-color: black;
+        letter-spacing: 2px;
+        color: grey;
+        border: 0px;
+        padding: 12px 10px 11px 10px;
+    }
+
+    font-size: 75%;
+    letter-spacing: 2px;
+    cursor: pointer;
+
+    .editableView-input {
+        outline-color: black;
+        letter-spacing: 2px;
+        color: grey;
+        border: 0px;
+        padding: 12px 10px 11px 10px;
+    }
 }
 
 .collectionNoteTakingView {
@@ -83,21 +83,13 @@
     overflow-y: auto;
     overflow-x: hidden;
     flex-wrap: wrap;
-    transition: top .5s;
+    transition: top 0.5s;
 
-    >div {
+    > div {
         position: relative;
         display: block;
     }
 
-    .collectionNoteTakingViewFieldColumn {
-        height: max-content;
-    }
-
-    .collectionNoteTakingViewFieldColumnDragging {
-        height: 100%;
-    }
-
     .collectionSchemaView-previewDoc {
         height: 100%;
         position: absolute;
@@ -144,33 +136,33 @@
     // Documents in NoteTaking view
     .collectionNoteTakingView-columnDoc {
         display: flex;
-        // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change 
+        // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change
         position: relative;
 
         &:hover {
-          .hoverButtons{
-            opacity: 1;
-          }
+            .hoverButtons {
+                opacity: 1;
+            }
         }
 
         .hoverButtons {
-          display: flex;
-          opacity: 0;
-          position: absolute;
-          height: 100%;
-          left: -35px;
-          justify-content: center;
-          align-items: center;
-          padding: 0px 10px;
-
-          .buttonWrapper {
-            padding: 3px;
-            border-radius: 3px;
-            
-            &:hover {
-              background: rgba(0, 0, 0, 0.26);
+            display: flex;
+            opacity: 0;
+            position: absolute;
+            height: 100%;
+            left: -35px;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 10px;
+
+            .buttonWrapper {
+                padding: 3px;
+                border-radius: 3px;
+
+                &:hover {
+                    background: rgba(0, 0, 0, 0.26);
+                }
             }
-          }
         }
     }
 
@@ -200,7 +192,7 @@
 
         span::before,
         span::after {
-            content: "";
+            content: '';
             width: 50%;
             border-top: dashed gray 1px;
             position: relative;
@@ -241,7 +233,7 @@
         .editableView-input:hover,
         .editableView-container-editing:hover,
         .editableView-container-editing-oneLine:hover {
-            cursor: text
+            cursor: text;
         }
 
         .collectionNoteTakingView-sectionHeader-subCont {
@@ -287,7 +279,7 @@
             height: 100%;
             display: none;
 
-            [class*="css"] {
+            [class*='css'] {
                 max-width: 102px;
             }
 
@@ -329,7 +321,7 @@
             height: 100%;
             display: none;
 
-            [class*="css"] {
+            [class*='css'] {
                 max-width: 102px;
             }
 
@@ -338,7 +330,6 @@
             }
 
             .collectionNoteTakingView-optionPicker {
-
                 .optionOptions {
                     display: inline;
                 }
@@ -398,7 +389,7 @@
         .editableView-input:hover,
         .editableView-container-editing:hover,
         .editableView-container-editing-oneLine:hover {
-            cursor: text
+            cursor: text;
         }
 
         .editableView-input {
@@ -451,7 +442,7 @@
         top: 4px;
         border-radius: 50% 50%;
         background-color: #fff;
-        content: " ";
+        content: ' ';
         cursor: pointer;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
         -webkit-transform: scale(1);
@@ -481,7 +472,6 @@
 }
 
 @media only screen and (max-device-width: 480px) {
-
     .collectionNoteTakingView .collectionNoteTakingView-columnDragger,
     .collectionNoteTakingView-columnDragger {
         width: 0.1;
@@ -489,4 +479,4 @@
         opacity: 0;
         font-size: 0;
     }
-}
\ No newline at end of file
+}
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()}>
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 55d032498..5ba262418 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -286,7 +286,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             <>
                 {headingView}
                 {
-                    <div>
+                    <div style={{ height: '100%' }}>
                         <div
                             key={`${heading}-stack`}
                             className={`collectionNoteTakingView-Nodes`}
@@ -337,7 +337,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                 style={{
                     //TODO: change this so that it's based on the column width
                     width: this.columnWidth,
-                    height: '100%',
                     background: this._background,
                 }}
                 ref={this.createColumnDropRef}