diff options
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingView.tsx | 84 |
1 files changed, 53 insertions, 31 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 96db23142..b3e154dac 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -45,7 +45,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti _disposers: { [key: string]: IReactionDisposer } = {}; _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef<HTMLDivElement>(); // change to relative widths for deleting. change storage from columnStartXCoords to columnHeaders (schemaHeaderFields has a widgth alrady) - @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht + // @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; @observable _scroll = 0; // used to force the document decoration to update when scrolling @@ -72,7 +72,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // return 3 2 1 4 56 // } if (needsUnsetCategory) { - columnHeaders.push(new SchemaHeaderField('unset')); + columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, this.maxColWdith)); } return columnHeaders; } @@ -88,6 +88,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth())); } + @computed get dividerWidth() { + return 32; + } @computed get yMargin() { return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); } @@ -109,7 +112,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti constructor(props: any) { super(props); if (this.columnHeaders === undefined) { - this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]); + this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]); + // add all of the docs that have not been added to a column to this new column } } @@ -179,11 +183,12 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti () => this.layoutDoc._autoHeight, autoHeight => autoHeight && this.props.setHeight?.(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))))) ); - this._disposers.headers = reaction( - () => this.columnHeaders.slice(), - headers => this.resizeColumns(headers.length), - { fireImmediately: true } - ); + // this._disposers.headers = reaction( + // () => this.columnHeaders.slice(), + // // TODO: is this correct? + // headers => this.resizeColumns(headers.length, true), + // { fireImmediately: true } + // ); } componentWillUnmount() { @@ -328,9 +333,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti getDocWidth(d: Doc) { const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field); const existingHeader = this.columnHeaders.find(sh => sh.heading === heading); - const index = existingHeader ? this.columnHeaders.indexOf(existingHeader) : 0; - const endColValue = index === this.columnHeaders.length - 1 || index > this.columnStartXCoords.length - 1 ? this.PanelWidth : this.columnStartXCoords[index + 1]; - const maxWidth = index > this.columnStartXCoords.length - 1 ? this.PanelWidth : endColValue - this.columnStartXCoords[index] - 3 * this.xMargin; + const existingWidth = existingHeader?.width ? existingHeader.width : 0; + const maxWidth = existingWidth > 0 ? existingWidth : this.maxColWdith - 2 * this.xMargin; + // const index = existingHeader ? this.columnHeaders.indexOf(existingHeader) : 0; + // const endColValue = index === this.columnHeaders.length - 1 || index > this.columnStartXCoords.length - 1 ? this.PanelWidth : this.columnStartXCoords[index + 1]; + // const maxWidth = index > this.columnStartXCoords.length - 1 ? this.PanelWidth : endColValue - this.columnStartXCoords[index] - 3 * this.xMargin; if (d.type === DocumentType.RTF) { return maxWidth; } @@ -359,18 +366,21 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // called when a column is either added or deleted. This function creates n evenly spaced columns @action - resizeColumns = (n: number) => { - const totalWidth = this.PanelWidth; - const dividerWidth = 32; - const totaldividerWidth = (n - 1) * dividerWidth; - const colWidth = (totalWidth - totaldividerWidth) / n; - const newColXCoords: number[] = []; - let colStart = 0; - for (let i = 0; i < n; i++) { - newColXCoords.push(colStart); - colStart += colWidth + dividerWidth; - } - this.columnStartXCoords = newColXCoords; + resizeColumns = (n: number, isAdd: boolean) => { + let scaleFactor = isAdd ? Math.floor((n - 1)) / n : Math.floor((n + 1) / n); + if (isAdd && n == 1) scaleFactor = 1; + this.columnHeaders.forEach(h => { + h.width < 0 ? h.setWidth((this.maxColWdith - this.dividerWidth) / n) : h.setWidth(h.width * scaleFactor); + }); + // if we're adding, need to + + // const newColXCoords: number[] = []; + // let colStart = 0; + // for (let i = 0; i < n; i++) { + // newColXCoords.push(colStart); + // colStart += colWidth + dividerWidth; + // } + // this.columnStartXCoords = newColXCoords; }; // This function is used to preview where a document will drop in a column once a drag is complete. @@ -410,7 +420,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // returns the column index for a given x-coordinate getColumnFromXCoord = (xCoord: number): number => { const numColumns = this.columnHeaders.length; - const coords = this.columnStartXCoords.slice(); + const coords = []; + let colStartXCoord = 0; + for (let i = 0; i < numColumns; i++) { + coords.push(colStartXCoord); + colStartXCoord += this.columnHeaders[i].width + this.dividerWidth; + } + coords.push(this.PanelWidth); let colIndex = 0; for (let i = 0; i < numColumns; i++) { @@ -584,12 +600,12 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti columnHeaders={this.columnHeaders} Document={this.props.Document} DataDoc={this.props.DataDoc} - resizeColumns={this.resizeColumns} + // resizeColumns={this.resizeColumns} renderChildren={this.children} numGroupColumns={this.numGroupColumns} gridGap={this.gridGap} pivotField={this.notetakingCategoryField} - columnStartXCoords={this.columnStartXCoords} + // columnStartXCoords={this.columnStartXCoords} maxColWidth={this.maxColWdith} PanelWidth={this.PanelWidth} key={heading?.heading ?? ''} @@ -612,7 +628,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti @undoBatch addGroup = (value: string) => { const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); - return value && columnHeaders?.push(new SchemaHeaderField(value)) ? true : false; + const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1); + this.resizeColumns(this.numGroupColumns + 1, true); + return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, colWidth)) ? true : false; }; sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => { @@ -636,9 +654,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // used to reset column sizes when using the drag handlers @action setColumnStartXCoords = (movementX: number, colIndex: number) => { - const coords = [...this.columnStartXCoords]; - coords[colIndex] += movementX; - this.columnStartXCoords = coords; + const leftHeader = this.columnHeaders[colIndex]; + const rightHeader = this.columnHeaders[colIndex + 1]; + leftHeader.setWidth(leftHeader.width + movementX); + rightHeader.setWidth(rightHeader.width - movementX); + // const coords = [...this.columnStartXCoords]; + // coords[colIndex] += movementX; + // this.columnStartXCoords = coords; }; @computed get renderedSections() { @@ -655,7 +677,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const col = this.sectionNoteTaking(sections[i][0], sections[i][1]); eles.push(col); if (i < sections.length - 1) { - eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i + 1} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />); + eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />); } } return eles; |