diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingView.tsx | 155 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx | 4 |
2 files changed, 71 insertions, 88 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 6887c535b..86b0aeed7 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -86,10 +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 + //-------------------------------------------- Parker's Playground --------------------------------------------// draggedDocBackgroundColors: string[] = [] + columnStartXCoords: number[] = [] + dividerXCoords: number[] = [] + //-------------------------------------------------------------------------------------------------------------// constructor(props: any) { super(props); @@ -98,6 +99,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out? // here we're making an empty list of column headers (again, what Mehek showed us) this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(); + this.columnStartXCoords = [0] + } else { + //TODO instantiate columnStartXCoords and dividerXCoords + const numHeaders = this.columnHeaders.length + this.resizeColumns(numHeaders) } } @@ -120,21 +126,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti </div>; }); } - @action - setDocHeight = (key: string, sectionHeight: number) => { - this._heightMap.set(key, sectionHeight); - } + // @action + // setDocHeight = (key: string, sectionHeight: number) => { + // this._heightMap.set(key, sectionHeight); + // } - // is sections that all collections inherit? I think this is how we show the masonry/columns - //TODO: this seems important get Sections() { // appears that pivot field IS actually for sorting if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>(); - if (this.columnHeaders === undefined) { - setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0); - return new Map<SchemaHeaderField, Doc[]>(); - } + // Shouldn't need, since we instantiate them in the constructor + // if (this.columnHeaders === undefined) { + // setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0); + // return new Map<SchemaHeaderField, Doc[]>(); + // } const columnHeaders = Array.from(this.columnHeaders); const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); let changed = false; @@ -142,7 +147,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti if (!d[this.pivotField]) { d[this.pivotField] = `1` }; - const sectionValue = (d[this.pivotField] ? d[this.pivotField] : `0`) as object; + 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; @@ -311,7 +316,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti />; } - //TODO: this is definitely incorrect at the moment, since you completely changed getDocWidth + //TODO update this to 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); @@ -319,7 +324,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti return new Transform(- translateX + (dref?.centeringX || 0), - translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale); } - //TODO: update this so that you get larger docs + //TODO do we actually want to update the doc width on this? getDocWidth(d?: Doc) { //TODO: defnitely a more efficient way to do this, but who cares const headings = () => Array.from(this.Sections); @@ -327,21 +332,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const uniqueHeadings = h.map((i, idx) => h.indexOf(i) === idx); const width = this.columnWidth / ((uniqueHeadings.length) || 1); return width - 25; - - // if (!d) return 0; - // const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.()); - // // TODO: pj - replace with a better way to calculate the margin - // let margin = 25; - // d.margin = 25; - // if (this.columnWidth < 150){ - // margin = 0; - // } - // const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2); - // if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) { - // return Math.min(d[WidthSym](), maxWidth); - // } - // return maxWidth + 75; } + getDocHeight(d?: Doc) { if (!d || d.hidden) return 0; const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.()); @@ -379,27 +371,50 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti </div>; } + resizeColumns = (n: number) => { + const totalWidth = this.props.PanelWidth() + const colWidth = totalWidth / n + const newColXCoords: number[] = [] + let colStart = 0 + for (let i = 0; i < n; i++) { + newColXCoords.push(colStart) + colStart += colWidth + } + 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) { - const clientY = e.clientY; + const col = this.getClientColumn(e) + const colStartXCoords = this.columnStartXCoords + // console.log(col) + const clientY = e.clientY + // const clientX = e.clientX let dropInd = -1; let dropAfter = 0; + const length = this._docXfs.length + //TODO get the nodes in the doc 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]; + //TODO need to write your own function for this, or make sure you're properly updating the fields + const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap); + const pos1 = cd.stackedDocTransform().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) - if (clientY > pos && (clientY < pos1 || i == this._docXfs.length - 1)) { + 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) { dropInd = i; - if (clientY > (pos + pos1) / 2) { + if (clientY > (pos[1] + pos1[1]) / 2) { dropAfter = 1; } } }) const docs = this.childDocList; const newDocs = DragManager.docsBeingDragged; + const length2 = docs.length 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); @@ -410,7 +425,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // this.placeHolderDown = false // } docs.splice(insertInd - offset, 0, ...newDocs); - } + } } } @@ -425,6 +440,21 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti } + getClientColumn = (e: React.PointerEvent): number => { + const clientX = e.clientX + const numColumns = this.columnHeaders.length + const coords = this.columnStartXCoords + coords.push(this.props.PanelWidth()) + let colIndex = 0 + for (let i = 0; i < numColumns; i++) { + if (clientX > coords[i] && clientX < coords[i + 1]) { + colIndex = i + break + } + } + return colIndex + } + // 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 @@ -532,14 +562,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { // const key = this.pivotField; const type = "number"; - // let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined; - // if (this.pivotField) { - // const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]); - // if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) { - // type = types[0]; - // } - // } - //TODO: I think that we only have one of these atm return <CollectionNoteTakingViewFieldColumn unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)} observeHeight={ref => { @@ -587,51 +609,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti />; } - // // what a section looks like if we're in masonry. Shouldn't actually need to use this. - // sectionMasonry = (heading: SchemaHeaderField | undefined, docList: Doc[], first: boolean) => { - // const key = this.pivotField; - // let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined; - // const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]); - // if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) { - // type = types[0]; - // } - // const rows = () => !this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, - // Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); - // return <CollectionMasonryViewFieldRow - // showHandle={first} - // Document={this.props.Document} - // chromeHidden={this.chromeHidden} - // pivotField={this.pivotField} - // unobserveHeight={(ref) => this.refList.splice(this.refList.indexOf(ref), 1)} - // observeHeight={(ref) => { - // if (ref) { - // this.refList.push(ref); - // this.observer = new _global.ResizeObserver(action((entries: any) => { - // if (this.layoutDoc._autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) { - // const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0); - // this.props.setHeight(this.headerMargin + height); - // } - // })); - // this.observer.observe(ref); - // } - // }} - // key={heading ? heading.heading : ""} - // rows={rows} - // headings={this.headings} - // heading={heading ? heading.heading : ""} - // headingObject={heading} - // docList={docList} - // parent={this} - // type={type} - // createDropTarget={this.createDashEventsTarget} - // screenToLocalTransform={this.props.ScreenToLocalTransform} - // setDocHeight={this.setDocHeight} - // />; - // } - @action addGroup = (value: string) => { if (value && this.columnHeaders) { + this.resizeColumns(this.columnHeaders.length + 1) const schemaHdrField = new SchemaHeaderField(value); this.columnHeaders.push(schemaHdrField); DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]); @@ -668,7 +649,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti } // a section will have a header and a list of docs. Ok cool. // return sections.map((section, i) => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0)); - return sections.map((section, i) => this.sectionStacking(section[0], section[1])); + return sections.map((section) => this.sectionStacking(section[0], section[1])); } diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx index 1df5cc504..6bcd397aa 100644 --- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx @@ -327,9 +327,11 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton"> <EditableView {...this.props.editableViewProps} /> </div> - <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}> + {this.props.numGroupColumns > 1 && + <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}> <FontAwesomeIcon icon="trash" size="lg" /> </button> + } </div> : null} |