From abdbf5c657b9d1d9a26a4d46dda2097be152f4ff Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Aug 2022 17:03:21 -0400 Subject: fixed undo/redo for notetaking view. fixed list undo/redo for schemaheaderfields -- not very elegant though. --- .../views/collections/CollectionNoteTakingView.tsx | 52 ++++++++-------- .../collections/CollectionNoteTakingViewColumn.tsx | 39 ++---------- src/fields/List.ts | 72 ++++++++++++---------- src/fields/util.ts | 12 +++- 4 files changed, 80 insertions(+), 95 deletions(-) (limited to 'src') 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>() { - _autoHeightDisposer?: IReactionDisposer; + _disposers: { [key: string]: IReactionDisposer } = {}; _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); - // _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = []; - // @observable _docsByColumnHeader = new Map(); - //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([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(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); @@ -169,16 +165,21 @@ export class CollectionNoteTakingView extends CollectionSubView 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 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 { const totalWidth = this.PanelWidth; const dividerWidth = 32; @@ -368,8 +369,8 @@ export class CollectionNoteTakingView extends CollectionSubView { - 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 => { 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 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 '', - SetValue: this.addGroup, - contents: '+ New Column', - }} + editableViewProps={this.editableViewProps} /> ); }; @@ -622,7 +624,7 @@ export class CollectionNoteTakingView extends CollectionSubView); + eles.push(); } } return eles; @@ -705,7 +707,7 @@ export class CollectionNoteTakingView extends CollectionSubView (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()}> diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 8452d895f..9b7518c60 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -47,7 +47,7 @@ interface CSVFieldColumnProps { screenToLocalTransform: () => Transform; observeHeight: (myref: any) => void; unobserveHeight: (myref: any) => void; - editableViewProps: any; + editableViewProps: () => any; resizeColumns: (n: number) => void; columnStartXCoords: number[]; PanelWidth: number; @@ -112,7 +112,6 @@ export class CollectionNoteTakingViewColumn extends React.Component { - console.log('HEADING CH'); const castedValue = this.getValue(value); if (castedValue) { if (this.props.columnHeaders?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { @@ -144,43 +143,17 @@ export class CollectionNoteTakingViewColumn extends React.Component { - if (!this.props.columnHeaders) { - return; - } - if (this.props.headingObject) { + if (this.props.columnHeaders && this.props.headingObject) { const index = this.props.columnHeaders.indexOf(this.props.headingObject); - const newIndex = index == 0 ? 1 : index - 1; - const newHeader = this.props.columnHeaders[newIndex]; - this.props.docList.forEach(d => (d[this.props.pivotField] = newHeader.heading.toString())); + this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset')); this.props.columnHeaders.splice(index, 1); this.props.resizeColumns(this.props.columnHeaders.length); } }; - headerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); - - //TODO: I think this is where I'm supposed to edit stuff - startDrag = (e: PointerEvent, down: number[], delta: number[]) => { - console.log('in startDrag'); - // is MakeAlias a way to make a copy of a doc without rendering it? - const alias = Doc.MakeAlias(this.props.Document); - // alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1); - alias._width = this.columnWidth; - alias._pivotField = undefined; - let value = this.getValue(this._heading); - value = typeof value === 'string' ? `"${value}"` : value; - alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name }); - if (alias.viewSpecScript) { - const options = { hideSource: false }; - DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY, options); - console.log('in startDrag'); - return true; - } - return false; - }; - menuCallback = (x: number, y: number) => { ContextMenu.Instance.clearItems(); const layoutItems: ContextMenuProps[] = []; @@ -256,7 +229,6 @@ export class CollectionNoteTakingViewColumn extends React.Component
evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} /> @@ -314,7 +285,7 @@ export class CollectionNoteTakingViewColumn extends React.Component
- +
{this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && (