From 1e044cdb3d9004a42dfce5de83f518e95aebaf40 Mon Sep 17 00:00:00 2001 From: ljungster Date: Mon, 11 Apr 2022 20:16:40 -0400 Subject: items get dragged and dropped --- .../views/collections/CollectionNoteTakingView.tsx | 80 +++++++++++++++++----- .../CollectionNoteTakingViewFieldColumn.tsx | 8 +-- src/client/views/nodes/DocumentView.tsx | 20 +++++- 3 files changed, 82 insertions(+), 26 deletions(-) (limited to 'src') 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; } + //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; } - // 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 { // 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 { 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 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 => { - 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 { + 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 headings.indexOf(i) === idx); return (
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 { + 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 (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); } } -- cgit v1.2.3-70-g09d2