diff options
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingView.tsx | 73 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 7 |
3 files changed, 50 insertions, 32 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 77aafaaff..c1a088b36 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -90,6 +90,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case StyleProp.TreeViewIcon: return Doc.toIcon(doc, isOpen); case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? "lightgrey" : "dimgrey"; + // return doc = dragManager.dragDocument ? props.dragEffects.opacity??CastofOpacityonline94 : Cast()) + // same idea for background Color case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null)); case StyleProp.HideLinkButton: return props?.hideLinkButton || (!selected && (doc?.isLinkButton || doc?.hideLinkButton)); case StyleProp.FontSize: return StrCast(doc?.[fieldKey + "fontSize"], StrCast(doc?.fontSize, StrCast(Doc.UserDoc().fontSize))); diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index bfadfd99e..3ae2fac7d 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -90,17 +90,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti } } - // TODO: plj - these are the children + // TODO [pal]: is there a better way to do this? children = (docs: Doc[]) => { - //TODO: can somebody explain me to what exactly TraceMobX is? TraceMobx(); - // appears that we are going to reset the _docXfs. TODO: what is Xfs? this._docXfs.length = 0; return docs.map((d, i) => { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); //TODO change style here so that - const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() }; + const style = { width: width(), marginTop: this.gridGap, height: height() }; return <div className={`collectionNoteTakingView-columnDoc`} key={d[Id]} style={style} > {this.getDisplayDoc(d, width)} </div>; @@ -108,7 +106,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti } get Sections() { - // appears that pivot field IS actually for sorting if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>(); const columnHeaders = Array.from(this.columnHeaders); const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); @@ -116,10 +113,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti this.filteredChildren.map(d => { if (!d[this.pivotField]) { d[this.pivotField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column` - // d[this.pivotField] = columnHeaders[0].heading }; const sectionValue = d[this.pivotField] as object; - // the next five lines ensures that floating point rounding errors don't create more than one section -syip const parsed = parseInt(sectionValue.toString()); const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue; @@ -347,38 +342,57 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti this.columnStartXCoords = newColXCoords } - // TODO: This is where you want to create a copy of the document to take its place @action onPointerOver = (e: React.PointerEvent) => { if (DragManager.docsBeingDragged.length && this.childDocList) { + // get the current column based on the mouse's x coordinate + // const clientX = e.clientX - 2 * this.gridGap // unsure how large left tab is, may need to change the subtraction op + // let col = 0 + // for (let i = 0; i < this.columnStartXCoords.length; i++) { + // if (clientX > this.columnStartXCoords[i]) { + // col = i + // } + // } + const col = this.getClientColumn(e) + // get all of the docs in that column + let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]]; + if (this.pivotField) { + const entries = Array.from(this.Sections.entries()); + sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries; + } + const docs = sections[col][1] + // get the index for where you need to insert the doc you are currently dragging const clientY = e.clientY + console.log(clientY) let dropInd = -1; let dropAfter = 0; - //TODO get the nodes in the doc - this._docXfs.forEach((cd, i) => { - //TODO need to write your own function for this, or make sure you're properly updating the fields - const pos = cd.noteTakingDocTransform().inverse().transformPoint(0, -2 * this.gridGap); - const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(0, cd.height()); - // 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) - const yCoordInBetween = clientY > pos[1] && (clientY < pos1[1] || i == this._docXfs.length - 1) - // const xCoordInBetween = clientX > pos[0] && (clientX < pos1[0] || i == this._docXfs.length - 1) - const xCoordInBetween = true - if (yCoordInBetween && xCoordInBetween) { + 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); + // updating drop position based on y coordinates + const yCoordInBetween = clientY > pos0[1] && (clientY < pos1[1] || i == docs.length - 1) + if (yCoordInBetween) { dropInd = i; - if (clientY > (pos[1] + pos1[1]) / 2) { + console.log(dropInd) + if (clientY > (pos0[1] + pos1[1]) / 2) { dropAfter = 1; } } }) - const docs = this.childDocList; + // Are we sure that we need all of this stuff? + // 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)); - docs.splice(insertInd - offset, 0, ...newDocs); - } + // 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); + // } } } @@ -526,7 +540,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti DataDoc={this.props.DataDoc} resizeColumns={this.resizeColumns.bind(this)} renderChildren={this.children} - // columnWidth={this.columnWidth} numGroupColumns={this.numGroupColumns} gridGap={this.gridGap} pivotField={this.pivotField} @@ -542,7 +555,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti type={type} createDropTarget={this.createDashEventsTarget} screenToLocalTransform={this.props.ScreenToLocalTransform} - // added this in to add column editableViewProps={{ GetValue: () => "", SetValue: this.addGroup, @@ -588,7 +600,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti this.columnStartXCoords = coords } - // + // TODO [pal]: factor out the lines that sort the sections as own helper function @computed get renderedSections() { TraceMobx(); let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]]; @@ -596,7 +608,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const entries = Array.from(this.Sections.entries()); sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries; } - //TODO need to add the divs in const eles: JSX.Element[] = [] for (let i = 0; i < sections.length; i++) { const col = this.sectionNoteTaking(sections[i][0], sections[i][1]) diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c0ee77e4e..8682a43e6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -411,7 +411,7 @@ 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]); + const dragData = new DragManager.DocumentDragData([this.props.Document]); //put a set of if (this.props.isNoteTakingView) { dragData.draggedDocuments.forEach((doc) => { doc.backgroundColor = "#C9DAEF" @@ -424,6 +424,11 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps dragData.treeViewDoc = this.props.treeViewDoc; dragData.removeDocument = this.props.removeDocument; dragData.moveDocument = this.props.moveDocument; + //dragData.dimSource : + // dragEffects field, set dim + // add kv pairs to a doc, swap properties with the node while dragging, and then swap when dropping + // add a dragEffects prop to DocumentView as a function that sets up. Each view has its own prop, when you start dragging: + // in Draganager, figure out which doc(s) you're dragging and change what opacity function returns 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.onDragStar &&!this.props.isNoteTakingView)}, |