diff options
Diffstat (limited to 'src')
3 files changed, 102 insertions, 115 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index bd9303997..22b8496aa 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -6,7 +6,7 @@ import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; -import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, smoothScroll, Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; @@ -24,6 +24,7 @@ import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; import { DefaultStyleProvider } from '../../StyleProvider'; +import { DocumentManager } from '../../../util/DocumentManager'; export enum ColumnType { Number, @@ -38,7 +39,6 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'creationDate', @observer export class CollectionSchemaView extends CollectionSubView() { private _ref: HTMLDivElement | null = null; - private _lastSelectedRow: number | undefined; private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; private _previewRef: HTMLDivElement | null = null; @@ -47,11 +47,11 @@ export class CollectionSchemaView extends CollectionSubView() { public static _minColWidth: number = 150; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; + @observable _lastSelectedRow: number | undefined; @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>(); @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; - @observable _previewDoc: Doc | undefined; get documentKeys() { const docs = this.childDocs; @@ -110,6 +110,10 @@ export class CollectionSchemaView extends CollectionSubView() { return BoolCast(this.layoutDoc.sortDesc); } + rowIndex(doc: Doc) { + return this.childDocs.indexOf(doc); + } + componentDidMount() { this.props.setContentView?.(this as DocComponentView); document.addEventListener('keydown', this.onKeyDown); @@ -121,30 +125,32 @@ export class CollectionSchemaView extends CollectionSubView() { @action onKeyDown = (e: KeyboardEvent) => { - if (this._selectedDocs.size > 0) { - if (e.key == 'ArrowDown') { - const lastDoc = Array.from(this._selectedDocs.values()).lastElement(); - const lastIndex = this.childDocs.indexOf(lastDoc); - if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { - this._selectedDocs.clear(); - const newDoc = this.childDocs[lastIndex + 1]; - this._selectedDocs.add(newDoc); - SelectionManager.SelectSchemaViewDoc(newDoc); - this._previewDoc = newDoc; - } - } - if (e.key == 'ArrowUp') { - const firstDoc = Array.from(this._selectedDocs.values())[0]; - const firstIndex = this.childDocs.indexOf(firstDoc); - if (firstIndex > 0) { - this._selectedDocs.clear(); - const newDoc = this.childDocs[firstIndex - 1]; - this._selectedDocs.add(newDoc); - SelectionManager.SelectSchemaViewDoc(newDoc); - this._previewDoc = newDoc; - } - } - } + // if (this._selectedDocs.size > 0) { + // if (e.key == 'ArrowDown') { + // const lastDoc = Array.from(this._selectedDocs.values()).lastElement(); + // const lastIndex = this.childDocs.indexOf(lastDoc); + // if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { + // this._selectedDocs.clear(); + // const newDoc = this.childDocs[lastIndex + 1]; + // this._selectedDocs.add(newDoc); + // const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc); + // if (presDocView) SelectionManager.SelectView(presDocView, false); + // SelectionManager.SelectSchemaViewDoc(newDoc); + // this._previewDoc = newDoc; + // } + // } + // if (e.key == 'ArrowUp') { + // const firstDoc = Array.from(this._selectedDocs.values())[0]; + // const firstIndex = this.childDocs.indexOf(firstDoc); + // if (firstIndex > 0) { + // this._selectedDocs.clear(); + // const newDoc = this.childDocs[firstIndex - 1]; + // this._selectedDocs.add(newDoc); + // SelectionManager.SelectSchemaViewDoc(newDoc); + // this._previewDoc = newDoc; + // } + // } + // } }; @undoBatch @@ -304,40 +310,51 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { + addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { + this._selectedDocs.add(doc); + const rowDocView = DocumentManager.Instance.getDocumentView(doc); + if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); + this._lastSelectedRow = index; + }; + + @action + removeDocFromSelection = (doc: Doc) => { + if (this._selectedDocs.has(doc)) this._selectedDocs.delete(doc); + const rowDocView = DocumentManager.Instance.getDocumentView(doc); + if (rowDocView) SelectionManager.DeselectView(rowDocView); + }; + + @action + clearSelection = () => { + this._selectedDocs.clear(); + SelectionManager.DeselectAll(); + this._lastSelectedRow = undefined; + }; + + @action + selectRow = (e: PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { + e.stopPropagation(); + if (index < 0) return; const ctrl = e.ctrlKey || e.metaKey; const shift = e.shiftKey; if (shift && this._lastSelectedRow !== undefined) { const startRow = Math.min(this._lastSelectedRow, index); const endRow = Math.max(this._lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { - const currDoc: Doc = this.childDocs[i]; - if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc); + this.addDocToSelection(this.childDocs[i], true, i); } - this._lastSelectedRow = endRow; + this._lastSelectedRow = index; } else if (ctrl) { if (!this._selectedDocs.has(doc)) { - this._selectedDocs.add(doc); - this._lastSelectedRow = index; + console.log('add'); + this.addDocToSelection(doc, true, index); } else { - this._selectedDocs.delete(doc); + console.log('remove'); + this.removeDocFromSelection(doc); } } else { - this._selectedDocs.clear(); - this._selectedDocs.add(doc); - this._lastSelectedRow = index; - } - - if (this._lastSelectedRow && this._selectedDocs.size > 0) { - SelectionManager.SelectSchemaViewDoc(this.childDocs[this._lastSelectedRow]); - } else { - SelectionManager.SelectSchemaViewDoc(undefined); - } - - if (this._selectedDocs.size == 1) { - this._previewDoc = Array.from(this._selectedDocs)[0]; - } else { - this._previewDoc = undefined; + this.clearSelection(); + this.addDocToSelection(doc, false, index); } }; @@ -381,10 +398,8 @@ export class CollectionSchemaView extends CollectionSubView() { @action startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { if (!this._selectedDocs.has(doc)) { - this._selectedDocs.clear(); - this._selectedDocs.add(doc); - this._lastSelectedRow = index; - SelectionManager.SelectSchemaViewDoc(doc); + this.clearSelection(); + this.addDocToSelection(doc, false, index); } this._isDragging = true; this._selectedDocSortedArray = this.sortedSelectedDocs(); @@ -511,13 +526,9 @@ export class CollectionSchemaView extends CollectionSubView() { afterFocus: (didFocus: boolean) => new Promise<ViewAdjustment>(res => setTimeout(async () => res(await endFocus(didFocus)), focusSpeed)), }); }; + isChildContentActive = () => this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined; - getDocTransform(doc: Doc, dref?: DocumentView) { - const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined); - // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale); - } render() { return ( @@ -531,9 +542,7 @@ export class CollectionSchemaView extends CollectionSubView() { <div className="schema-table" onPointerDown={action(() => { - this._selectedDocs.clear(); - SelectionManager.SelectSchemaViewDoc(undefined); - this._previewDoc = undefined; + this.clearSelection(); })}> <div className="schema-header-row" style={{ height: CollectionSchemaView._rowHeight }}> <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}></div> @@ -552,7 +561,6 @@ export class CollectionSchemaView extends CollectionSubView() { addColumn={this.addColumn} removeColumn={this.removeColumn} resizeColumn={this.startResize} - // dragColumn={this.dragColumn} /> ); })} @@ -568,7 +576,6 @@ export class CollectionSchemaView extends CollectionSubView() { ref={r => (dref = r || undefined)} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={SchemaRowBox.LayoutString(this.props.fieldKey)} - renderDepth={this.props.renderDepth + 1} Document={doc} DataDoc={dataDoc} ContainingCollectionView={this.props.CollectionView} @@ -578,7 +585,6 @@ export class CollectionSchemaView extends CollectionSubView() { styleProvider={DefaultStyleProvider} focus={this.focusDocument} docFilters={this.childDocFilters} - docViewPath={this.props.docViewPath} docRangeFilters={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} rootSelected={this.rootSelected} @@ -592,25 +598,6 @@ export class CollectionSchemaView extends CollectionSubView() { /> </div> ); - // return ( - // <SchemaRowBox - // {...this.props} - // key={index} - // Document={doc} - // ContainingCollectionDoc={this.props.CollectionView?.props.Document} - // ContainingCollectionView={this.props.CollectionView} - // rowIndex={index} - // columnKeys={this.columnKeys} - // columnWidths={this.displayColumnWidths} - // rowMenuWidth={CollectionSchemaView._rowMenuWidth} - // selectedDocs={this._selectedDocs} - // selectRow={this.selectRow} - // startDrag={this.startDrag} - // dragging={this._isDragging} - // dropIndex={this.setDropIndex} - // addRowRef={this.addRowRef} - // /> - // ); })} </div> <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} /> @@ -618,9 +605,9 @@ export class CollectionSchemaView extends CollectionSubView() { {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>} {this.previewWidth > 0 && ( <div style={{ width: `${this.previewWidth}px` }} ref={ref => (this._previewRef = ref)}> - {this._previewDoc && ( + {this._lastSelectedRow !== undefined && ( <DocumentView - Document={this._previewDoc} + Document={this.childDocs[this._lastSelectedRow]} DataDoc={undefined} fitContentsToBox={returnTrue} dontCenter={'y'} diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index e72ed3c4f..d67e6f2d7 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -1,6 +1,6 @@ import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed, ObservableSet } from 'mobx'; +import { action, computed, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc } from '../../../../fields/Doc'; import { undoBatch } from '../../../util/UndoManager'; @@ -12,19 +12,7 @@ import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; import { Colors } from '../../global/globalEnums'; import { DocCast, StrCast } from '../../../../fields/Types'; - -export interface SchemaRowBoxProps extends FieldViewProps { - rowIndex: number; - columnKeys: string[]; - columnWidths: number[]; - rowMenuWidth: number; - selectedDocs: ObservableSet<Doc>; - selectRow: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => void; - startDrag: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => boolean; - dragging: boolean; - dropIndex: (index: number) => void; - addRowRef: (doc: Doc, ref: HTMLDivElement) => void; -} +import { setupMoveUpEvents, emptyFunction } from '../../../../Utils'; @observer export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { @@ -38,7 +26,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { @computed get schemaView() { const vpath = this.props.docViewPath(); - console.log(vpath[vpath.length - 2]); return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as CollectionSchemaView) : undefined; } @@ -46,20 +33,25 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { return this.props.ContainingCollectionDoc!; } + @computed get rowIndex() { + return this.schemaView?.rowIndex(this.rootDoc) ?? -1; + } + // isSelected = () => this.props.selectedDocs.has(this.props.Document); - // @action - // onRowPointerDown = (e: React.PointerEvent) => { - // e.stopPropagation(); + @action + onRowPointerDown = (e: React.PointerEvent) => { + e.stopPropagation(); - // setupMoveUpEvents( - // this, - // e, - // e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex), - // emptyFunction, - // e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex) - // ); - // }; + setupMoveUpEvents( + this, + e, + // e => this.schemaView?.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex) ?? true, + returnTrue, + emptyFunction, + e => this.schemaView?.selectRow(e, this.props.Document, this._ref!, this.rowIndex) + ); + }; // onPointerEnter = (e: any) => { // if (!this.props.dragging) return; @@ -102,8 +94,12 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { return ( <div className="schema-row" - style={this.props.isSelected() ? { height: CollectionSchemaView._rowHeight, backgroundColor: Colors.LIGHT_BLUE /*, opacity: this.props.dragging ? 0.5 : 1 */ } : { height: CollectionSchemaView._rowHeight }} - // onPointerDown={this.onRowPointerDown} + style={ + this.props.isSelected() + ? { height: CollectionSchemaView._rowHeight, backgroundColor: Colors.LIGHT_BLUE, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined /*, opacity: this.props.dragging ? 0.5 : 1 */ } + : { height: CollectionSchemaView._rowHeight, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined } + } + onPointerDown={this.onRowPointerDown} // onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} ref={(row: HTMLDivElement | null) => { @@ -141,3 +137,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { ); } } +function // e => this.schemaView?.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex) ?? true, +returnTrue(e: PointerEvent, down: number[], delta: number[]): boolean { + throw new Error('Function not implemented.'); +} diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index e2f6d99f1..4cfc5850c 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -21,8 +21,8 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { render() { return ( <div className="schema-table-cell" style={{ width: this.props.columnWidth }}> - {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */} - <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> + {Field.toString(this.props.Document[this.props.fieldKey] as Field)} + {/* <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */} </div> ); } |