hovering between actually works

1 files changed, 81 insertions, 60 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 2c8225eac..97fc5cc7c 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -50,6 +50,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = [];
     // @observable _docsByColumnHeader = new Map<string, Doc[]>();
     //TODO: need to make sure that we save the mapping
+    @observable docsDraggedRowCol: number[] = [];
     @observable _cursor: CursorProperty = "grab";
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
     @computed get chromeHidden() { return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); }
@@ -93,50 +94,46 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         });
     }
 
-    // @observable
+    // [CAVEATS] (1) keep track of the offsetting
+    // (2) documentView gets unmounted as you remove it from the list
     get Sections() {
         if (this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
         const columnHeaders = this.columnHeaders;
-        const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
-        // let changed = false;
-        // const values = Array.from(this._docsByColumnHeader.values());
-        const docs = this.childDocList
-        if (docs) {
-          docs.map(d => {
-            if (d instanceof Promise) return;
-            if (!d[this.pivotField]) {
-              d[this.pivotField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`
-            };
-            const sectionValue = d[this.pivotField] as object;
-            const parsed = parseInt(sectionValue.toString());
-            const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue;
-
-            // look for if header exists already
-            const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `0`));
-            if (existingHeader) {
-                fields.get(existingHeader)!.push(d);
-            }
-            
-            // else {
-            //     const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `0`);
-            //     fields.set(newSchemaHeader, [d]);
-            //     columnHeaders.push(newSchemaHeader);
-            //     changed = true;
-            // }
+        const sections = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
+        let docs = this.childDocs
+        const rowCol = this.docsDraggedRowCol
+        
+        // filter out the currently dragged docs from the child docs, since we will insert them later
+        if (rowCol.length && DragManager.docsBeingDragged.length) {
+          const docIdsToRemove = new Set()
+          DragManager.docsBeingDragged.forEach(d => {
+            docIdsToRemove.add(d[Id])
+          })
+          docs = docs.filter(d => !docIdsToRemove.has(d[Id]))
+        }
+
+        // this will sort the docs into the correct columns (minus the ones you're currently dragging)
+        docs.map(d => {
+          if (!d[this.pivotField]) {
+            d[this.pivotField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`
+          };
+          const sectionValue = d[this.pivotField] as object;
+
+          // look for if header exists already
+          const existingHeader = columnHeaders.find(sh => sh.heading === sectionValue.toString());
+          if (existingHeader) {
+              sections.get(existingHeader)!.push(d);
+          }
         });
+
+        // now we add back in the docs that we're dragging
+        if (rowCol.length && DragManager.docsBeingDragged.length) {
+          const colHeader = columnHeaders[rowCol[1]]
+          // TODO: get the actual offset that occurs if the docs were in that column
+          const offset = 0
+          sections.get(colHeader)?.splice(rowCol[0] - offset, 0, ...DragManager.docsBeingDragged)
         }
-        // remove all empty columns if hideHeadings is set
-        // we will want to have something like this, so that we can hide columns and add them back in
-        // We don't ever want hidden columns
-        // if (this.layoutDoc._columnsHideIfEmpty) {
-        //     Array.from(fields.keys()).filter(key => !fields.get(key)!.length).map(header => {
-        //         fields.delete(header);
-        //         columnHeaders.splice(columnHeaders.indexOf(header), 1);
-        //         changed = true;
-        //     });
-        // }
-        // changed && setTimeout(action(() => this.columnHeaders?.splice(0, this.columnHeaders.length, ...columnHeaders)), 0);
-        return fields;
+        return sections;
     }
 
     componentDidMount() {
@@ -214,6 +211,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
         return this.props.styleProvider?.(doc, props, property);
     }
+
     isContentActive = () => this.props.isSelected() || this.props.isContentActive();
 
     // rules for displaying the documents
@@ -339,37 +337,57 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @action
     onPointerOver = (e: React.PointerEvent) => {
       if (DragManager.docsBeingDragged.length && this.childDocList) {
-        // get the current column based on the mouse's x coordinate
-        const docs = this.getDocsFromXCoord(e.clientX - 2 * this.gridGap)
+        //TODO: update new observable field to empty slice once done
+        //TODO: how do we update the docs in the column once we switch over?
+        // 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 = e.clientX - 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 = e.clientY
         let dropInd = -1;
+        // unsure whether we still want this dropAfter field
         let dropAfter = 0;
-        docs.forEach((doc, i) => {
-          let dref: Opt<DocumentView>;
-          const noteTakingDocTransform = () => this.getDocTransform(doc, dref);
-          const pos0 = noteTakingDocTransform().inverse().transformPoint(0, 0);
-          const pos1 = noteTakingDocTransform().inverse().transformPoint(0, this.getDocHeight(doc) + 2 * this.gridGap);
-          // const pos = cd.noteTakingDocTransform().inverse().transformPoint(0, 0);
-          // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(0, cd.height() + 2 * this.gridGap);
+        // manually set to 140, because not sure how to get exact value
+        let pos0 = 140
+        colDocs.forEach((doc, i) => {
+          //TODO: this isn't getting the actual positions of the doc like I thought it would
+          // const width = () => this.getDocWidth(doc);
+          // const displayDoc = this.getDisplayDoc(doc, width)
+          // const dref = displayDoc.props.dref
+          const noteTakingDocTransform = () => this.getDocTransform(doc);
+          // const pos0 = noteTakingDocTransform().inverse().transformPoint(0, 0);
+          let pos1 = noteTakingDocTransform().inverse().transformPoint(0, this.getDocHeight(doc) + 2 * this.gridGap)[1];
+          pos1 += pos0
           // updating drop position based on y coordinates
-          const yCoordInBetween = clientY > pos0[1] && (clientY < pos1[1] || i == docs.length - 1)
+          const yCoordInBetween = clientY > pos0 && (clientY < pos1 || i == colDocs.length - 1)
           if (yCoordInBetween) {
             dropInd = i;
-            if (clientY > (pos0[1] + pos1[1]) / 2) {
+            dropAfter = 0;
+            if (clientY > (pos0 + pos1) / 2) {
               dropAfter = 1;
             }
           }
+          pos0 = pos1
         })
-        // Are we sure that we need all of this stuff?
+        this.docsDraggedRowCol = [dropInd, this.getColumnFromXCoord(xCoord)]
+        console.log(`[${this.docsDraggedRowCol[0]}, ${this.docsDraggedRowCol[1]}]`)
+
+        // since we have row, col, we can send that to an observable value in NoteTaking view
+
+
+        // TODO: add the doc back into the proper position and then update childDocs list
+        // Need to update our list of all docs to properly 
         // const docs = this.childDocList;
-        const newDocs = DragManager.docsBeingDragged;
-        // if (docs) {
-          // const insertInd = dropInd === -1 ? docs.length : dropInd + dropAfter;
-        // const insertInd = dropInd === -1 ? docs.length : dropInd;
-        // const offset = newDocs.reduce((off, ndoc) => this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off, 0);
-        // newDocs.filter(ndoc => docs.indexOf(ndoc) !== -1).forEach(ndoc => docs.splice(docs.indexOf(ndoc), 1));
-        docs.splice(dropInd + dropAfter, 0, ...newDocs);
+        // const docs = this.childDocs;
+
+        // 
+        // const newDocs = DragManager.docsBeingDragged;
+        // if (docs && newDocs.length) {
+        //   const insertInd = dropInd === -1 ? docs.length : dropInd + dropAfter;
+        //   const offset = newDocs.reduce((off, ndoc) => this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off, 0);
+        //   newDocs.filter(ndoc => docs.indexOf(ndoc) !== -1).forEach(ndoc => docs.splice(docs.indexOf(ndoc), 1));
+        //   docs.splice(insertInd - offset, 0, ...newDocs);
         // }
       }
     }
@@ -393,7 +411,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     getDocsFromXCoord = (xCoord: number): Doc[] => {
       const colIndex = this.getColumnFromXCoord(xCoord)
       const colHeader = StrCast(this.columnHeaders[colIndex].heading)
-      const docs = this.childDocList
+      // const docs = this.childDocList
+      const docs = this.childDocs
       const docsMatchingHeader: Doc[] = []
       if (docs) {
         docs.map(d => {
@@ -415,7 +434,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         let dropInd = -1;
         let dropAfter = 0;
         if (de.complete.docDragData) {
-            const docs = this.getDocsFromXCoord(de.x)
+            // const docs = this.getDocsFromXCoord(de.x)
+            const docs = this.childDocs
             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));
@@ -457,6 +477,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                     // }
                     docs.splice(insertInd - offset, 0, ...newDocs);
                 }
+              this.docsDraggedRowCol = []
             }
         } // it seems like we're creating a link here. Weird. I didn't know that you could establish links by dragging
         else if (de.complete.linkDragData?.dragDocument.context === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) {