From df4781b27848731b329068b13da89a17d04ad1a9 Mon Sep 17 00:00:00 2001 From: mehekj Date: Tue, 28 Feb 2023 17:13:11 -0500 Subject: selection working (except ctrl+click) --- .../collectionSchema/CollectionSchemaView.tsx | 157 ++++++++++----------- .../collections/collectionSchema/SchemaRowBox.tsx | 56 ++++---- .../collectionSchema/SchemaTableCell.tsx | 4 +- 3 files changed, 102 insertions(+), 115 deletions(-) (limited to 'src') 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(); @observable _rowEles: ObservableMap = new ObservableMap(); @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(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() {
{ - this._selectedDocs.clear(); - SelectionManager.SelectSchemaViewDoc(undefined); - this._previewDoc = undefined; + this.clearSelection(); })}>
@@ -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() { />
); - // return ( - // - // ); })}
@@ -618,9 +605,9 @@ export class CollectionSchemaView extends CollectionSubView() { {this.previewWidth > 0 &&
} {this.previewWidth > 0 && (
(this._previewRef = ref)}> - {this._previewDoc && ( + {this._lastSelectedRow !== undefined && ( ; - 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() { @@ -38,7 +26,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { @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() { 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() { return (
{ @@ -141,3 +137,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { ); } } +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 { render() { return (
- {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */} - Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> + {Field.toString(this.props.Document[this.props.fieldKey] as Field)} + {/* Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */}
); } -- cgit v1.2.3-70-g09d2