items get dragged and dropped

1 files changed, 61 insertions, 19 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 1bf9a8fe4..6887c535b 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -18,7 +18,6 @@ import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
-import { EditableView } from "../EditableView";
 import { LightboxView } from "../LightboxView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView";
@@ -87,6 +86,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     
     @computed get NodeWidth() { return this.props.PanelWidth() - this.gridGap; }
 
+    // Parker added this as a global placeholder for a single document
+    // placeHolderDoc = Docs.Create.TextDocument("", { _height: 18, _width: 200, _fitWidth: true, backgroundColor:  "#C9DAEF", title: "placeholder", _autoHeight: true });
+    // placeHolderDown = false
+    draggedDocBackgroundColors: string[] = []
+
     constructor(props: any) {
         super(props);
 
@@ -268,6 +272,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             docViewPath={this.props.docViewPath}
             fitWidth={this.props.childFitWidth}
             isContentActive={emptyFunction}
+            //TODO: Parker added both of these fields. We may be able to observe elsewhere
+            originalBackgroundColor={StrCast(doc.backgroundColor)}
+            isNoteTakingView={true}
+
             isDocumentActive={this.isContentActive}
             LayoutTemplate={this.props.childLayoutTemplate}
             LayoutTemplateString={this.props.childLayoutString}
@@ -303,6 +311,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         />;
     }
 
+    //TODO: this is definitely incorrect at the moment, since you completely changed getDocWidth
     getDocTransform(doc: Doc, dref?: DocumentView) {
         const y = this._scroll; // required for document decorations to update when the text box container is scrolled
         const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
@@ -370,21 +379,39 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         </div>;
     }
 
-    // TODO: plj
+    // TODO: This is where you want to create a copy of the document to take its place
     @action
     onPointerOver = (e: React.PointerEvent) => {
-      // console.log("hovering over something")
-      if (DragManager.docsBeingDragged.length) {
-        // essentially copying code from onInternalDrop for this:
-        const doc = DragManager.docsBeingDragged[0];
-        // console.log(doc[LayoutSym]())
-
-        console.log(doc[DataSym]);
-        console.log(Doc.IndexOf(doc, this.childDocs));
-
+      if (DragManager.docsBeingDragged.length && this.childDocList) {
+        const clientY = e.clientY;
+        let dropInd = -1;
+        let dropAfter = 0;
+        this._docXfs.forEach((cd, i) => {
+          const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap)[1];
+          const pos1 = cd.stackedDocTransform().inverse().transformPoint(0, cd.height())[1];
+          // checking whethere the copied element is in between the top of the doc and the grid gap
+          // (meaning that this is the index it will be taking)
+          if (clientY > pos && (clientY < pos1 || i == this._docXfs.length - 1)) {
+            dropInd = i;
+            if (clientY > (pos + pos1) / 2) {
+              dropAfter = 1;
+            }
+          }
+        })
+        const docs = this.childDocList;
+        const newDocs = DragManager.docsBeingDragged;
+        if (docs) {
+          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));
+          // doesn't appear to be causing issues, but potentially could create
+          // if (this.placeHolderDown) {
+          //   docs.splice(0, 1);
+          //   this.placeHolderDown = false
+          // }
+          docs.splice(insertInd - offset, 0, ...newDocs);
+      }
       }
-      
-
     }
 
     //used in onPointerOver to swap two nodes in the rendered filtered children list
@@ -398,14 +425,17 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     }
 
-    // TODO: plj - look at this. Start with making changes to db, and then transition to client side 
+    // TODO: Going to be helpful to look at code to see what exactly this is doing to have the aliases. 
+    // I also think that this code is now incorrect
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
       // Fairly confident that this is where the swapping of nodes in the various arrays happens
-        console.log('drop')
         const where = [de.x, de.y];
         // start at -1 until we're sure we want to add it to the column
+        //Parker added this to reset doc colors
+
+        //
         let dropInd = -1;
         let dropAfter = 0;
         if (de.complete.docDragData) {
@@ -413,9 +443,18 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             this._docXfs.map((cd, i) => {
                 const pos = cd.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
                 const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height());
-                if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
+                // const top = cd.height();
+                // const pos = cd.stackedDocTransform().transformPoint(0, cd.height());
+                // TODO: plan
+                // Get the top of the box
+                // Check if there could possibly be a box below
+                
+                // const pos1 = cd.stackedDocTransform().transformPoint(0, cd.height());
+                // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
+                if (where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
                     dropInd = i;
-                    const axis = this.isStackingView ? 1 : 0;
+                    // const axis = this.isStackingView ? 1 : 0;
+                    const axis = 1;
                     dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0;
                 }
             });
@@ -433,6 +472,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                     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));
+                    // doesn't appear to be causing issues, but potentially could create
+                    // if (this.placeHolderDown) {
+                    //   docs.splice(0, 1);
+                    //   this.placeHolderDown = false
+                    // }
                     docs.splice(insertInd - offset, 0, ...newDocs);
                 }
             }
@@ -462,7 +506,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     //What is the difference between internal and external drop?? Does internal mean we're dropping inside of a collection?
     // I take it back: external drop means we took it out of column/collection that we were just in
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        console.log('external drop')
         const where = [e.clientX, e.clientY];
         let targInd = -1;
         this._docXfs.map((cd, i) => {
@@ -635,7 +678,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         if (menuDoc) {
             const width: number = NumCast(menuDoc._width, 30);
             const height: number = NumCast(menuDoc._height, 30);
-            console.log(menuDoc.title, width, height);
             return (<div className="buttonMenu-docBtn"
                 style={{ width: width, height: height }}>
                 <DocumentView