items get dragged and dropped

3 files changed, 82 insertions, 26 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
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index 6d95eeb0c..1df5cc504 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -140,7 +140,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
           return
         }
         if (this.props.columnHeaders.length == 1) {
-          // (1) length is 1, alert user can't delete
           alert("You can't delete the last column! Going to remove delete button soon")
           return
         }
@@ -163,6 +162,7 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
 
     //TODO: I think this is where I'm supposed to edit stuff 
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
+        console.log('in startDrag')
         // is MakeAlias a way to make a copy of a doc without rendering it?
         const alias = Doc.MakeAlias(this.props.Document);
         alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1);
@@ -171,7 +171,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         value = typeof value === "string" ? `"${value}"` : value;
         alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name });
         if (alias.viewSpecScript) {
-            DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY);
+            const options = {hideSource: false}
+            DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY, options);
+            console.log('in startDrag')
             return true;
         }
         return false;
@@ -340,9 +342,7 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
     render() {
         TraceMobx();
         const headings = this.props.headings();
-        // We will have to see what this is 
         const heading = this._heading;
-        console.log(`Column heading: ${heading}`)
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
             <div className={"collectionStackingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7092b335c..51820e77c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -144,6 +144,9 @@ export interface DocumentViewSharedProps {
     scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
     createNewFilterDoc?: () => void;
     updateFilterDoc?: (doc: Doc) => void;
+    // Parker added both of these
+    originalBackgroundColor?: string;
+    isNoteTakingView?: boolean;
 }
 export interface DocumentViewProps extends DocumentViewSharedProps {
     // properties specific to DocumentViews but not to FieldView
@@ -409,6 +412,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) {
         if (this._mainCont.current) {
             const dragData = new DragManager.DocumentDragData([this.props.Document]);
+            dragData.draggedDocuments.forEach((doc) => {
+              doc.backgroundColor = "#C9DAEF"
+              doc.opacity = 0.5
+            })
             const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0);
             dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top);
             dragData.dropAction = dropAction;
@@ -416,9 +423,16 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             dragData.removeDocument = this.props.removeDocument;
             dragData.moveDocument = this.props.moveDocument;
             const ffview = this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
-            ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView()));
-            DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart) },
-                () => setTimeout(action(() => ffview && (ffview.ChildDrag = undefined)))); // this needs to happen after the drop event is processed.
+            ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView()));            
+            DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStar &&!this.props.isNoteTakingView)},
+                () => setTimeout(action(() => {
+                  ffview && (ffview.ChildDrag = undefined)
+                  //TODO: is there a better way than adding another field to the props? Not quite sure how "this" works tbh
+                  if (this.props.isNoteTakingView) {
+                    this.props.Document.backgroundColor = "";
+                    this.props.Document.opacity = 1;
+                  }
+                }))); // this needs to happen after the drop event is processed.
             ffview?.setupDragLines(false);
         }
     }