diff options
Diffstat (limited to 'src')
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); } } |