diff options
Diffstat (limited to 'src/client/views/collections/CollectionNoteTakingView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingView.tsx | 52 |
1 files changed, 27 insertions, 25 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index f24b98621..1bf5b7d86 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -42,12 +42,10 @@ export type collectionNoteTakingViewProps = { @observer export class CollectionNoteTakingView extends CollectionSubView<Partial<collectionNoteTakingViewProps>>() { - _autoHeightDisposer?: IReactionDisposer; + _disposers: { [key: string]: IReactionDisposer } = {}; _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef<HTMLDivElement>(); - // _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = []; - // @observable _docsByColumnHeader = new Map<string, Doc[]>(); - //TODO: need to make sure that we save the mapping + @observable columnStartXCoords: number[] = []; @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; @observable _scroll = 0; // used to force the document decoration to update when scrolling @@ -86,7 +84,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti @computed get numGroupColumns() { return this.columnHeaders.length; } - @observable columnStartXCoords: number[] = []; @computed get PanelWidth() { return this.props.PanelWidth(); } @@ -100,11 +97,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti super(props); if (this.columnHeaders === undefined) { this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]); - this.columnStartXCoords = [0]; // add all of the docs that have not been added to a column to this new column } else { - const numHeaders = this.columnHeaders.length; - this.resizeColumns(numHeaders); + this.resizeColumns(this.columnHeaders.length); } } @@ -126,7 +121,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // [CAVEATS] (1) keep track of the offsetting // (2) documentView gets unmounted as you remove it from the list - get Sections() { + @computed get Sections() { + TraceMobx(); const columnHeaders = this.columnHeaders; let docs = this.childDocs; const sections = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); @@ -169,16 +165,21 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti componentDidMount() { super.componentDidMount?.(); document.addEventListener('pointerup', this.removeDocDragHighlight, true); - this._autoHeightDisposer = reaction( + this._disposers.autoHeight = reaction( () => 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 } + ); } componentWillUnmount() { document.removeEventListener('pointerup', this.removeDocDragHighlight, true); super.componentWillUnmount(); - this._autoHeightDisposer?.(); + Object.keys(this._disposers).forEach(key => this._disposers[key]()); } @action @@ -315,9 +316,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // how to get the width of a document. Currently returns the width of the column (minus margins) // if a note doc. Otherwise, returns the normal width (for graphs, images, etc...) getDocWidth(d: Doc) { - const heading = (d[this.notetakingCategoryField] as object) ?? 'unset'; - const castedSectionValue = heading.toString(); - const existingHeader = this.columnHeaders.find(sh => sh.heading === castedSectionValue); + const heading = StrCast(d[this.notetakingCategoryField], 'unset'); + const existingHeader = this.columnHeaders.find(sh => sh.heading === heading); const colStartXCoords = this.columnStartXCoords; if (!existingHeader) { return 1000; @@ -352,6 +352,7 @@ 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; @@ -368,8 +369,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // This function is used to preview where a document will drop in a column once a drag is complete. @action - onPointerOver = (ex: number, ey: number) => { - if (this.childDocList) { + onPointerOver = (buttons: boolean, ex: number, ey: number) => { + if (this.childDocList && buttons) { // 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 = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap; @@ -500,7 +501,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti onExternalDrop = async (e: React.DragEvent): Promise<void> => { const targInd = this.docsDraggedRowCol?.[0] || 0; super.onExternalDrop(e, {}, docus => { - this.onPointerOver(e.clientX, e.clientY); + this.onPointerOver(true, e.clientX, e.clientY); docus?.map(doc => this.addDocument(doc)); const newDoc = this.childDocs.lastElement(); const docs = this.childDocList; @@ -515,6 +516,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti headings = () => Array.from(this.Sections); refList: any[] = []; + editableViewProps = () => ({ + GetValue: () => '', + SetValue: this.addGroup, + contents: '+ New Column', + }); sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { const type = 'number'; @@ -544,7 +550,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti columnHeaders={this.columnHeaders} Document={this.props.Document} DataDoc={this.props.DataDoc} - resizeColumns={this.resizeColumns.bind(this)} + resizeColumns={this.resizeColumns} renderChildren={this.children} numGroupColumns={this.numGroupColumns} gridGap={this.gridGap} @@ -561,11 +567,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti type={type} createDropTarget={this.createDashEventsTarget} screenToLocalTransform={this.props.ScreenToLocalTransform} - editableViewProps={{ - GetValue: () => '', - SetValue: this.addGroup, - contents: '+ New Column', - }} + editableViewProps={this.editableViewProps} /> ); }; @@ -622,7 +624,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.bind(this)} xMargin={this.xMargin} />); + eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i + 1} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />); } } return eles; @@ -705,7 +707,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti }} onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))} onPointerLeave={action(e => (this.docsDraggedRowCol.length = 0))} - onPointerOver={e => this.onPointerOver(e.clientX, e.clientY)} + onPointerOver={e => this.onPointerOver(e.buttons ? true : false, e.clientX, e.clientY)} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu} onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}> |