diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingView.tsx | 141 |
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?.()) { |