From 7d369df8096889fc0e1e606f90d161fd2296eb9d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 14 Mar 2024 01:46:39 -0400 Subject: Schema row option order changed --- .../collections/collectionSchema/SchemaRowBox.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 39fea2d2e..2b42d666b 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -121,8 +121,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { pointerEvents: !this._props.isContentActive() ? 'none' : undefined, }}> : } + tooltip="close" + icon={} size={Size.XSMALL} onPointerDown={e => setupMoveUpEvents( @@ -132,13 +132,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { emptyFunction, undoable(e => { e.stopPropagation(); - Doc.toggleLockedPosition(this.Document); + this._props.removeDocument?.(this.Document); }, 'Delete Row') ) - }> + } + /> } + tooltip="whether document interactions are enabled" + icon={this.Document._lockedPosition ? : } size={Size.XSMALL} onPointerDown={e => setupMoveUpEvents( @@ -148,11 +149,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { emptyFunction, undoable(e => { e.stopPropagation(); - this._props.removeDocument?.(this.Document); + Doc.toggleLockedPosition(this.Document); }, 'Delete Row') ) - } - /> + }> } -- cgit v1.2.3-70-g09d2 From 2f9db9ec26b3fafbb77aa02e242f60ddeea85294 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 14 Mar 2024 02:50:10 -0400 Subject: test --- src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 2 +- src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index eee3836d2..ecba45e9b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -193,7 +193,7 @@ export class CollectionSchemaView extends CollectionSubView() { SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); } else { this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1); - this._selectedCell && (this._selectedCell[0] = newDoc); + //this._selectedCell && (this._selectedCell[0] = newDoc); this.scrollToDoc(newDoc, {}); } } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 2b42d666b..8cbb4ded8 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -150,7 +150,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { undoable(e => { e.stopPropagation(); Doc.toggleLockedPosition(this.Document); - }, 'Delete Row') + }, 'Delete Row') //(??) should this be something else? ) }> Date: Mon, 18 Mar 2024 03:34:42 -0400 Subject: c --- .../views/collections/collectionSchema/CollectionSchemaView.tsx | 5 ++++- src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index e6c13d11e..d179a00ca 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -85,6 +85,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _menuValue: string = ''; @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; + //Doc = the row; number = the index of the cell to select within the row @observable _selectedCell: [Doc, number] | undefined = undefined; // target HTMLelement portal for showing a popup menu to edit cell values. @@ -195,7 +196,7 @@ export class CollectionSchemaView extends CollectionSubView() { } else { this.addDocToSelection(newDoc, true, lastIndex + 1); this.addDocToSelection(newDoc2, true, lastIndex + 2); - //this._selectedCell && (this._selectedCell[0] = newDoc); + this._selectedCell && (this._selectedCell[0] = newDoc); this.scrollToDoc(newDoc, {}); } } @@ -413,6 +414,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { + console.log("addDoc called"); const rowDocView = DocumentManager.Instance.getDocumentView(doc); if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); }; @@ -422,6 +424,7 @@ export class CollectionSchemaView extends CollectionSubView() { SelectionManager.DeselectAll() }; + //This method is called in SchemaRowBox.select, which is never called anywhere selectRows = (doc: Doc, lastSelected: Doc) => { const index = this.rowIndex(doc); const lastSelectedRow = this.rowIndex(lastSelected); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 8cbb4ded8..c30eee237 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -53,6 +53,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { this._props.setContentViewBox?.(this); } + //This method is never called anywhere select = (ctrlKey: boolean, shiftKey: boolean) => { if (!this.schemaView) return; const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement(); -- cgit v1.2.3-70-g09d2 From be5c28d20f4c3af1a20b03fe8e93c8fd551e99e6 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 19 Mar 2024 00:56:01 -0400 Subject: multiple cell selection started --- src/client/util/SelectionManager.ts | 3 +- .../collectionSchema/CollectionSchemaView.tsx | 36 +++++++++++++--------- .../collections/collectionSchema/SchemaRowBox.tsx | 6 ++-- .../collectionSchema/SchemaTableCell.tsx | 19 ++++++------ src/client/views/nodes/DocumentView.tsx | 2 +- 5 files changed, 38 insertions(+), 28 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index f3b2acb5e..6f6278662 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -9,6 +9,7 @@ import { DocumentView } from '../views/nodes/DocumentView'; import { LinkManager } from './LinkManager'; import { ScriptingGlobals } from './ScriptingGlobals'; import { UndoManager } from './UndoManager'; +import { SchemaRowBox } from '../views/collections/collectionSchema/SchemaRowBox'; export class SelectionManager { private static _manager: SelectionManager; @@ -43,7 +44,6 @@ export class SelectionManager { }); public static DeselectView = action((docView?: DocumentView): void => { - console.log(3); if (docView && this.Instance.SelectedViews.includes(docView)) { docView.IsSelected = false; this.Instance.SelectedViews.splice(this.Instance.SelectedViews.indexOf(docView), 1); @@ -63,6 +63,7 @@ export class SelectionManager { dv._props.whenChildContentsActiveChanged(false); }); runInAction(() => (this.Instance.SelectedViews.length = 0)); + //not responsible for select onPointerDown if (found) this.SelectView(found, false); }; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d179a00ca..b78bd5558 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -86,7 +86,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; //Doc = the row; number = the index of the cell to select within the row - @observable _selectedCell: [Doc, number] | undefined = undefined; + @observable _selectedCells: [Array, number] | undefined; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -190,13 +190,11 @@ export class CollectionSchemaView extends CollectionSubView() { if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { !e.shiftKey && this.clearSelection(); const newDoc = this.sortedDocs.docs[lastIndex + 1]; - const newDoc2 = this.sortedDocs.docs[lastIndex + 2]; if (this._selectedDocs.includes(newDoc)) { SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); } else { - this.addDocToSelection(newDoc, true, lastIndex + 1); - this.addDocToSelection(newDoc2, true, lastIndex + 2); - this._selectedCell && (this._selectedCell[0] = newDoc); + this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1); + this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 0); this.scrollToDoc(newDoc, {}); } } @@ -215,7 +213,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); else { this.addDocToSelection(newDoc, e.shiftKey, firstIndex - 1); - this._selectedCell && (this._selectedCell[0] = newDoc); + this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 0); this.scrollToDoc(newDoc, {}); } } @@ -224,15 +222,15 @@ export class CollectionSchemaView extends CollectionSubView() { } break; case 'ArrowRight': - if (this._selectedCell) { - this._selectedCell[1] = Math.min(this._selectedCell[1] + 1, this.columnKeys.length - 1); + if (this._selectedCells) { + this._selectedCells[1] = Math.min(this._selectedCells[1] + 1, this.columnKeys.length - 1); } else if (this._selectedDocs.length > 0) { this.selectCell(this._selectedDocs[0], 0); } break; case 'ArrowLeft': - if (this._selectedCell) { - this._selectedCell[1] = Math.max(this._selectedCell[1] - 1, 0); + if (this._selectedCells) { + this._selectedCells[1] = Math.max(this._selectedCells[1] - 1, 0); } else if (this._selectedDocs.length > 0) { this.selectCell(this._selectedDocs[0], 0); } @@ -242,7 +240,7 @@ export class CollectionSchemaView extends CollectionSubView() { break; } case 'Escape': { - this.deselectCell(); + this.deselectAllCells(); } } } @@ -414,7 +412,6 @@ export class CollectionSchemaView extends CollectionSubView() { @action addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { - console.log("addDoc called"); const rowDocView = DocumentManager.Instance.getDocumentView(doc); if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); }; @@ -437,10 +434,21 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectCell = (doc: Doc, index: number) => (this._selectedCell = [doc, index]); + selectCell = (doc: Doc, index: number) => { + !this._selectedCells && (this._selectedCells = [[doc], index]); + this._selectedCells[0].push(doc); + this._selectedCells[1] = index; + }; @action - deselectCell = () => (this._selectedCell = undefined); + deselectCell = (doc: Doc) => { + this._selectedCells && this._selectedCells[0].filter(d => d !== doc); + }; + + @action + deselectAllCells = () => { + this._selectedCells = [[], 0]; + } sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index c30eee237..36e58d610 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -59,7 +59,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement(); if (shiftKey && lastSelected) this.schemaView.selectRows(this.Document, lastSelected); else { - this._props.select?.(ctrlKey); + this.schemaView.addDocToSelection(this.Document, false, 0); } }; @@ -100,8 +100,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); selectCell = (doc: Doc, col: number) => this.schemaView?.selectCell(doc, col); - deselectCell = () => this.schemaView?.deselectCell(); - selectedCell = () => this.schemaView?._selectedCell; + deselectCell = () => this.schemaView?.deselectAllCells(); + selectedCell = () => this.schemaView?._selectedCells; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); render() { diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 46867665d..85b3158a8 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -36,7 +36,7 @@ export interface SchemaTableCellProps { col: number; deselectCell: () => void; selectCell: (doc: Doc, col: number) => void; - selectedCell: () => [Doc, number] | undefined; + selectedCell: () => [Doc[], number] | undefined; fieldKey: string; maxWidth?: () => number; columnWidth: () => number; @@ -107,8 +107,8 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; } @computed get defaultCellContent() { @@ -309,8 +309,9 @@ export class SchemaRTFCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; + //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } selectedFunc = () => this.selected; render() { @@ -331,8 +332,8 @@ export class SchemaBoolCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); @@ -375,8 +376,8 @@ export class SchemaEnumerationCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 38e60721f..a46426e0b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -360,7 +360,7 @@ export class DocumentViewInternal extends DocComponent (sendToBack ? documentView._props.bringToFront?.(this.Document, true) : + clickFunc ?? (() => (sendToBack ? documentView._props.bringToFront?.(this.Document, true) : this._props.select(e.ctrlKey||e.shiftKey, e.metaKey))); const waitFordblclick = this._props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick; if ((clickFunc && waitFordblclick !== 'never') || waitFordblclick === 'always') { -- cgit v1.2.3-70-g09d2 From 8cc8c972c73ea52e6be3d6dc25d9abc6905327df Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 19 Mar 2024 17:49:44 -0400 Subject: routing select through selectCell; shift select kind of working; cell selection updating still broken; cell select with shift select broken --- .../collectionSchema/CollectionSchemaView.tsx | 43 ++++++++++++++++------ .../collections/collectionSchema/SchemaRowBox.tsx | 4 +- .../collectionSchema/SchemaTableCell.tsx | 22 ++++++----- src/client/views/nodes/DocumentView.tsx | 2 +- .../views/nodes/formattedText/DashFieldView.tsx | 2 +- 5 files changed, 47 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index b78bd5558..33ae8aad1 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -25,6 +25,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { faLessThanEqual } from '@fortawesome/free-solid-svg-icons'; const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export enum ColumnType { @@ -85,7 +86,8 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _menuValue: string = ''; @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; - //Doc = the row; number = the index of the cell to select within the row + //an array of selected docs and the index representing the selected column + @observable selectedCol: number = 0; @observable _selectedCells: [Array, number] | undefined; // target HTMLelement portal for showing a popup menu to edit cell values. @@ -194,7 +196,7 @@ export class CollectionSchemaView extends CollectionSubView() { SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); } else { this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1); - this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 0); + this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 0, false); this.scrollToDoc(newDoc, {}); } } @@ -213,7 +215,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); else { this.addDocToSelection(newDoc, e.shiftKey, firstIndex - 1); - this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 0); + this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] + 1 : 0, false); this.scrollToDoc(newDoc, {}); } } @@ -223,17 +225,13 @@ export class CollectionSchemaView extends CollectionSubView() { break; case 'ArrowRight': if (this._selectedCells) { - this._selectedCells[1] = Math.min(this._selectedCells[1] + 1, this.columnKeys.length - 1); + this.selectCell(this._selectedCells[0][0], this._selectedCells[1] + 1, false); } else if (this._selectedDocs.length > 0) { - this.selectCell(this._selectedDocs[0], 0); + this.selectCell(this._selectedDocs[0], 0, false); } break; case 'ArrowLeft': - if (this._selectedCells) { - this._selectedCells[1] = Math.max(this._selectedCells[1] - 1, 0); - } else if (this._selectedDocs.length > 0) { - this.selectCell(this._selectedDocs[0], 0); - } + this.changeSelectedCellColumn(); break; case 'Backspace': { this.removeDocument(this._selectedDocs); @@ -246,6 +244,15 @@ export class CollectionSchemaView extends CollectionSubView() { } }; + @action + changeSelectedCellColumn = () => { + if (this._selectedCells) { + this._selectedCells[1] = Math.max(this._selectedCells[1] - 1, 0); + } else if (this._selectedDocs.length > 0) { + this.selectCell(this._selectedDocs[0], 0, false); + } + } + @undoBatch setColumnSort = (field: string | undefined, desc: boolean = false) => { this.layoutDoc.sortField = field; @@ -412,6 +419,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { + //console.log("doc added"); const rowDocView = DocumentManager.Instance.getDocumentView(doc); if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); }; @@ -427,6 +435,8 @@ export class CollectionSchemaView extends CollectionSubView() { const lastSelectedRow = this.rowIndex(lastSelected); const startRow = Math.min(lastSelectedRow, index); const endRow = Math.max(lastSelectedRow, index); + console.log(lastSelectedRow); + console.log("start: " + startRow + " end: " + endRow); for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true, i); @@ -434,10 +444,19 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectCell = (doc: Doc, index: number) => { + selectCell = (doc: Doc, index: number, shiftKey: boolean) => { + //console.log("cellSelect"); + //console.log(shiftKey); + shiftKey = true; !this._selectedCells && (this._selectedCells = [[doc], index]); this._selectedCells[0].push(doc); this._selectedCells[1] = index; + if (!this) return; + const lastSelected = Array.from(this._selectedDocs).lastElement(); + if (shiftKey && lastSelected) this.selectRows(doc, lastSelected); + else { + this.addDocToSelection(doc, false, 0); + } }; @action @@ -447,7 +466,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action deselectAllCells = () => { - this._selectedCells = [[], 0]; + this._selectedCells = undefined; } sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 36e58d610..0ef78fe07 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -99,7 +99,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { }; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); - selectCell = (doc: Doc, col: number) => this.schemaView?.selectCell(doc, col); + selectCell = (doc: Doc, col: number, shift: boolean) => this.schemaView?.selectCell(doc, col, shift); deselectCell = () => this.schemaView?.deselectAllCells(); selectedCell = () => this.schemaView?._selectedCells; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; @@ -186,7 +186,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { getFinfo={this.getFinfo} selectCell={this.selectCell} deselectCell={this.deselectCell} - selectedCell={this.selectedCell} + selectedCells={this.selectedCell} setColumnValues={this.setColumnValues} oneLine={BoolCast(this.schemaDoc?._singleLine)} menuTarget={this.schemaView.MenuTarget} diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 85b3158a8..2769b5042 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -4,7 +4,7 @@ import { extname } from 'path'; import * as React from 'react'; import DatePicker from 'react-datepicker'; import Select from 'react-select'; -import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -35,8 +35,8 @@ export interface SchemaTableCellProps { Document: Doc; col: number; deselectCell: () => void; - selectCell: (doc: Doc, col: number) => void; - selectedCell: () => [Doc[], number] | undefined; + selectCell: (doc: Doc, col: number, shift: boolean) => void; + selectedCells: () => [Doc[], number] | undefined; fieldKey: string; maxWidth?: () => number; columnWidth: () => number; @@ -76,7 +76,7 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; + const selected = this._props.selectedCells(); + let istrue = this._props.isRowActive() && (selected && selected[0]?.filter(doc => doc === this._props.Document).length !== 0) && selected[1] === this._props.col; + //console.log("col: " + this._props.col + "true: " + istrue); + return istrue; } @computed get defaultCellContent() { @@ -177,7 +179,7 @@ export class SchemaTableCell extends ObservableReactComponent !this.selected && this._props.selectCell(this._props.Document, this._props.col))} + onPointerDown={action(e => !this.selected && this._props.selectCell(this._props.Document, this._props.col, e.shiftKey))} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} @@ -309,7 +311,7 @@ export class SchemaRTFCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } @@ -332,7 +334,7 @@ export class SchemaBoolCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; } render() { @@ -376,7 +378,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; } render() { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a46426e0b..c957e7429 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1335,7 +1335,7 @@ export class DocumentView extends DocComponent() { zoomTime: 500, }); } - /*}*/ + //} }; DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition); ShouldNotScale = () => this.shouldNotScale; diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index b49e7dcf0..b0c35b161 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -140,7 +140,7 @@ export class DashFieldViewInternal extends ObservableReactComponent this._props.tbox._props.PanelWidth() - 20 : returnZero} - selectedCell={() => [this._dashDoc!, 0]} + selectedCells={() => [this._dashDoc!, 0]} fieldKey={this._fieldKey} rowHeight={returnZero} isRowActive={() => this._expanded && this._props.editable} -- cgit v1.2.3-70-g09d2 From a598877cc71c1f2a25e8cac4b831ab947a2539e0 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 21 Mar 2024 00:05:32 -0400 Subject: editing all selected cols working --- .../collectionSchema/CollectionSchemaView.tsx | 84 +++++++++++++++------- .../collections/collectionSchema/SchemaRowBox.tsx | 2 + .../collectionSchema/SchemaTableCell.tsx | 14 +++- .../views/nodes/formattedText/DashFieldView.tsx | 3 +- 4 files changed, 75 insertions(+), 28 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 33ae8aad1..60b3ae4ab 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -190,13 +190,14 @@ export class CollectionSchemaView extends CollectionSubView() { const lastIndex = this.rowIndex(lastDoc); const curDoc = this.sortedDocs.docs[lastIndex]; if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { - !e.shiftKey && this.clearSelection(); const newDoc = this.sortedDocs.docs[lastIndex + 1]; if (this._selectedDocs.includes(newDoc)) { SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); + this.deselectCell(curDoc); + } else { - this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1); - this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 0, false); + const shift: boolean = e.shiftKey; + this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 2, shift); this.scrollToDoc(newDoc, {}); } } @@ -210,12 +211,14 @@ export class CollectionSchemaView extends CollectionSubView() { const firstIndex = this.rowIndex(firstDoc); const curDoc = this.sortedDocs.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { - !e.shiftKey && this.clearSelection(); const newDoc = this.sortedDocs.docs[firstIndex - 1]; - if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); - else { - this.addDocToSelection(newDoc, e.shiftKey, firstIndex - 1); - this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] + 1 : 0, false); + if (this._selectedDocs.includes(newDoc)){ + SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)) + this.deselectCell(curDoc); + } else { + const shift: boolean = e.shiftKey; + + this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 2, shift); this.scrollToDoc(newDoc, {}); } } @@ -231,7 +234,13 @@ export class CollectionSchemaView extends CollectionSubView() { } break; case 'ArrowLeft': - this.changeSelectedCellColumn(); + if (this._selectedCells) { + this._selectedCells = undefined; + //this._selectedCells = [this._selectedCells[0], 2] + //this._selectedCells[1] = Math.max(this._selectedCells[1] - 1, 0); + } else if (this._selectedDocs.length > 0) { + this.selectCell(this._selectedDocs[0], 0, false); + } break; case 'Backspace': { this.removeDocument(this._selectedDocs); @@ -246,11 +255,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action changeSelectedCellColumn = () => { - if (this._selectedCells) { - this._selectedCells[1] = Math.max(this._selectedCells[1] - 1, 0); - } else if (this._selectedDocs.length > 0) { - this.selectCell(this._selectedDocs[0], 0, false); - } + } @undoBatch @@ -422,11 +427,14 @@ export class CollectionSchemaView extends CollectionSubView() { //console.log("doc added"); const rowDocView = DocumentManager.Instance.getDocumentView(doc); if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); + //let selectedIndexes: Array = this._selectedDocs.map(doc => this.rowIndex(doc)); + //console.log(selectedIndexes); }; @action clearSelection = () => { - SelectionManager.DeselectAll() + SelectionManager.DeselectAll(); + this.deselectAllCells(); }; //This method is called in SchemaRowBox.select, which is never called anywhere @@ -435,33 +443,41 @@ export class CollectionSchemaView extends CollectionSubView() { const lastSelectedRow = this.rowIndex(lastSelected); const startRow = Math.min(lastSelectedRow, index); const endRow = Math.max(lastSelectedRow, index); - console.log(lastSelectedRow); - console.log("start: " + startRow + " end: " + endRow); + //console.log(lastSelectedRow); + //console.log("start: " + startRow + " end: " + endRow); for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true, i); + this._selectedCells && this._selectedCells[0].push(currDoc); } }; @action selectCell = (doc: Doc, index: number, shiftKey: boolean) => { - //console.log("cellSelect"); - //console.log(shiftKey); - shiftKey = true; - !this._selectedCells && (this._selectedCells = [[doc], index]); + !shiftKey && this.deselectAllCells(); + !this._selectedCells && (this._selectedCells = [[], index]); this._selectedCells[0].push(doc); this._selectedCells[1] = index; + if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); if (shiftKey && lastSelected) this.selectRows(doc, lastSelected); else { - this.addDocToSelection(doc, false, 0); + this.addDocToSelection(doc, false, this.rowIndex(doc)); } + + let selectedIndexes: Array = this._selectedCells[0].map(doc => this.rowIndex(doc)); + console.log("cells: " + selectedIndexes); }; @action deselectCell = (doc: Doc) => { - this._selectedCells && this._selectedCells[0].filter(d => d !== doc); + if (this._selectedCells) + this._selectedCells[0] = this._selectedCells[0].filter(d => d !== doc); + if (this._selectedCells){ + let selectedIndexes: Array = this._selectedCells[0].map(doc => this.rowIndex(doc)); + console.log("cells: " + selectedIndexes); + } }; @action @@ -590,7 +606,27 @@ export class CollectionSchemaView extends CollectionSubView() { }; setColumnValues = (key: string, value: string) => { - this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); + this.childDocs.forEach(doc => { + let docIsSelected = this._selectedCells && !(this._selectedCells[0]?.filter(d => d === doc).length === 0); + console.log(docIsSelected); + if (docIsSelected){ + KeyValueBox.SetField(doc, key, value) + } + } + ); + //this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); + return true; + }; + + setSelectedColumnValues = (key: string, value: string) => { + console.log("called"); + this.childDocs.forEach(doc => { + let docIsSelected = this._selectedCells && !(this._selectedCells[0]?.filter(d => d === doc).length === 0); + if (docIsSelected){ + KeyValueBox.SetField(doc, key, value) + } + } + ); return true; }; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 0ef78fe07..af502dd03 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -103,6 +103,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { deselectCell = () => this.schemaView?.deselectAllCells(); selectedCell = () => this.schemaView?._selectedCells; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; + setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); render() { return ( @@ -188,6 +189,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { deselectCell={this.deselectCell} selectedCells={this.selectedCell} setColumnValues={this.setColumnValues} + setSelectedColumnValues={this.setSelectedColumnValues} oneLine={BoolCast(this.schemaDoc?._singleLine)} menuTarget={this.schemaView.MenuTarget} transform={() => { diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 2769b5042..cae16be36 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -45,6 +45,7 @@ export interface SchemaTableCellProps { isRowActive: () => boolean | undefined; getFinfo: (fieldKey: string) => FInfo | undefined; setColumnValues: (field: string, value: string) => boolean; + setSelectedColumnValues: (field: string, value: string) => boolean; oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit) finishEdit?: () => void; // notify container that edit is over (eg. to hide view in DashFieldView) @@ -107,7 +108,7 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; //console.log("col: " + this._props.col + "true: " + istrue); return istrue; @@ -135,7 +136,9 @@ export class SchemaTableCell extends ObservableReactComponent { if (shiftDown && enterKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); - } + } /*else { + this._props.setSelectedColumnValues(this._props.fieldKey.replace(/^_/, ''), value); + }*/ const ret = KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value); this._props.finishEdit?.(); return ret; @@ -179,7 +182,12 @@ export class SchemaTableCell extends ObservableReactComponent !this.selected && this._props.selectCell(this._props.Document, this._props.col, e.shiftKey))} + onPointerDown={action(e => { + console.log(e); + console.log(e.shiftKey); + const shift: boolean = e.shiftKey; + !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift)} + )} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index b0c35b161..631de1241 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -140,13 +140,14 @@ export class DashFieldViewInternal extends ObservableReactComponent this._props.tbox._props.PanelWidth() - 20 : returnZero} - selectedCells={() => [this._dashDoc!, 0]} + selectedCells={() => [[this._dashDoc!], 0]} fieldKey={this._fieldKey} rowHeight={returnZero} isRowActive={() => this._expanded && this._props.editable} padding={0} getFinfo={emptyFunction} setColumnValues={returnFalse} + setSelectedColumnValues={returnFalse} allowCRs={true} oneLine={!this._expanded} finishEdit={action(() => (this._expanded = false))} -- cgit v1.2.3-70-g09d2 From 9ccbc0a6d6f6fffbc479d37ac2a880eafe85c65d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 21 Mar 2024 00:43:08 -0400 Subject: multiple cell column switching working --- .../collectionSchema/CollectionSchemaView.tsx | 35 +++++++++++----------- .../collections/collectionSchema/SchemaRowBox.tsx | 6 ++-- .../collectionSchema/SchemaTableCell.tsx | 15 +++++----- .../views/nodes/formattedText/DashFieldView.tsx | 3 +- 4 files changed, 32 insertions(+), 27 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 60b3ae4ab..e722e774d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -87,8 +87,9 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; //an array of selected docs and the index representing the selected column - @observable selectedCol: number = 0; - @observable _selectedCells: [Array, number] | undefined; + @observable _selectedCol: number = 0; + @observable _selectedCells: Array | undefined; + // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -197,7 +198,7 @@ export class CollectionSchemaView extends CollectionSubView() { } else { const shift: boolean = e.shiftKey; - this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 2, shift); + this.selectCell(newDoc, this._selectedCol, shift); this.scrollToDoc(newDoc, {}); } } @@ -218,7 +219,7 @@ export class CollectionSchemaView extends CollectionSubView() { } else { const shift: boolean = e.shiftKey; - this.selectCell(newDoc, this._selectedCells ? this._selectedCells[1] : 2, shift); + this.selectCell(newDoc, this._selectedCol, shift); this.scrollToDoc(newDoc, {}); } } @@ -228,16 +229,14 @@ export class CollectionSchemaView extends CollectionSubView() { break; case 'ArrowRight': if (this._selectedCells) { - this.selectCell(this._selectedCells[0][0], this._selectedCells[1] + 1, false); + ++this._selectedCol; } else if (this._selectedDocs.length > 0) { this.selectCell(this._selectedDocs[0], 0, false); } break; case 'ArrowLeft': if (this._selectedCells) { - this._selectedCells = undefined; - //this._selectedCells = [this._selectedCells[0], 2] - //this._selectedCells[1] = Math.max(this._selectedCells[1] - 1, 0); + --this._selectedCol; } else if (this._selectedDocs.length > 0) { this.selectCell(this._selectedDocs[0], 0, false); } @@ -448,16 +447,16 @@ export class CollectionSchemaView extends CollectionSubView() { for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true, i); - this._selectedCells && this._selectedCells[0].push(currDoc); + this._selectedCells && this._selectedCells.push(currDoc); } }; @action selectCell = (doc: Doc, index: number, shiftKey: boolean) => { !shiftKey && this.deselectAllCells(); - !this._selectedCells && (this._selectedCells = [[], index]); - this._selectedCells[0].push(doc); - this._selectedCells[1] = index; + !this._selectedCells && (this._selectedCells = []); + this._selectedCells.push(doc); + this._selectedCol = index; if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); @@ -466,16 +465,18 @@ export class CollectionSchemaView extends CollectionSubView() { this.addDocToSelection(doc, false, this.rowIndex(doc)); } - let selectedIndexes: Array = this._selectedCells[0].map(doc => this.rowIndex(doc)); + let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); console.log("cells: " + selectedIndexes); + console.log("index: " + this._selectedCol); + }; @action deselectCell = (doc: Doc) => { if (this._selectedCells) - this._selectedCells[0] = this._selectedCells[0].filter(d => d !== doc); + this._selectedCells = this._selectedCells.filter(d => d !== doc); if (this._selectedCells){ - let selectedIndexes: Array = this._selectedCells[0].map(doc => this.rowIndex(doc)); + let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); console.log("cells: " + selectedIndexes); } }; @@ -607,7 +608,7 @@ export class CollectionSchemaView extends CollectionSubView() { setColumnValues = (key: string, value: string) => { this.childDocs.forEach(doc => { - let docIsSelected = this._selectedCells && !(this._selectedCells[0]?.filter(d => d === doc).length === 0); + let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); console.log(docIsSelected); if (docIsSelected){ KeyValueBox.SetField(doc, key, value) @@ -621,7 +622,7 @@ export class CollectionSchemaView extends CollectionSubView() { setSelectedColumnValues = (key: string, value: string) => { console.log("called"); this.childDocs.forEach(doc => { - let docIsSelected = this._selectedCells && !(this._selectedCells[0]?.filter(d => d === doc).length === 0); + let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); if (docIsSelected){ KeyValueBox.SetField(doc, key, value) } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index af502dd03..e3654facb 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -98,10 +98,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { document.removeEventListener('pointermove', this.onPointerMove); }; + selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); selectCell = (doc: Doc, col: number, shift: boolean) => this.schemaView?.selectCell(doc, col, shift); deselectCell = () => this.schemaView?.deselectAllCells(); - selectedCell = () => this.schemaView?._selectedCells; + selectedCells = () => this.schemaView?._selectedCells; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); @@ -187,7 +188,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { getFinfo={this.getFinfo} selectCell={this.selectCell} deselectCell={this.deselectCell} - selectedCells={this.selectedCell} + selectedCells={this.selectedCells} + selectedCol={this.selectedCol} setColumnValues={this.setColumnValues} setSelectedColumnValues={this.setSelectedColumnValues} oneLine={BoolCast(this.schemaDoc?._singleLine)} diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index cae16be36..52c34e8d6 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -36,7 +36,8 @@ export interface SchemaTableCellProps { col: number; deselectCell: () => void; selectCell: (doc: Doc, col: number, shift: boolean) => void; - selectedCells: () => [Doc[], number] | undefined; + selectedCells: () => Doc[] | undefined; + selectedCol: () => number; fieldKey: string; maxWidth?: () => number; columnWidth: () => number; @@ -108,9 +109,9 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; - //console.log("col: " + this._props.col + "true: " + istrue); + const selected: Doc[] | undefined = this._props.selectedCells(); + let istrue = this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + console.log("col: " + this._props.col + " selCol: " + this._props.selectedCol() + " true: " + istrue); return istrue; } @@ -320,7 +321,7 @@ export class SchemaRTFCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; + return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } selectedFunc = () => this.selected; @@ -343,7 +344,7 @@ export class SchemaBoolCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; + return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); @@ -387,7 +388,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && selected[1] === this._props.col; + return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 631de1241..66db06d69 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -140,7 +140,8 @@ export class DashFieldViewInternal extends ObservableReactComponent this._props.tbox._props.PanelWidth() - 20 : returnZero} - selectedCells={() => [[this._dashDoc!], 0]} + selectedCells={() => [this._dashDoc!]} + selectedCol={() => 0} //!!! fieldKey={this._fieldKey} rowHeight={returnZero} isRowActive={() => this._expanded && this._props.editable} -- cgit v1.2.3-70-g09d2 From a54d781810505565fb6d32ad4141ddb178ed81af Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 31 Mar 2024 01:04:54 -0400 Subject: ctrl selection --- .env.swp | Bin 0 -> 12349 bytes .../collectionSchema/CollectionSchemaView.tsx | 28 +++++++++------------ .../collections/collectionSchema/SchemaRowBox.tsx | 2 +- .../collectionSchema/SchemaTableCell.tsx | 5 ++-- 4 files changed, 16 insertions(+), 19 deletions(-) create mode 100644 .env.swp (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/.env.swp b/.env.swp new file mode 100644 index 000000000..0894f214e Binary files /dev/null and b/.env.swp differ diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 631ad7132..96d7627a3 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -200,7 +200,8 @@ export class CollectionSchemaView extends CollectionSubView() { } else { const shift: boolean = e.shiftKey; - this.selectCell(newDoc, this._selectedCol, shift); + const ctrl: boolean = e.ctrlKey; + this.selectCell(newDoc, this._selectedCol, shift, ctrl); this.scrollToDoc(newDoc, {}); } } @@ -220,8 +221,8 @@ export class CollectionSchemaView extends CollectionSubView() { this.deselectCell(curDoc); } else { const shift: boolean = e.shiftKey; - - this.selectCell(newDoc, this._selectedCol, shift); + const ctrl: boolean = e.ctrlKey; + this.selectCell(newDoc, this._selectedCol, shift, ctrl); this.scrollToDoc(newDoc, {}); } } @@ -233,14 +234,14 @@ export class CollectionSchemaView extends CollectionSubView() { if (this._selectedCells) { ++this._selectedCol; } else if (this._selectedDocs.length > 0) { - this.selectCell(this._selectedDocs[0], 0, false); + this.selectCell(this._selectedDocs[0], 0, false, false); } break; case 'ArrowLeft': if (this._selectedCells) { --this._selectedCol; } else if (this._selectedDocs.length > 0) { - this.selectCell(this._selectedDocs[0], 0, false); + this.selectCell(this._selectedDocs[0], 0, false, false); } break; case 'Backspace': { @@ -449,8 +450,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectCell = (doc: Doc, index: number, shiftKey: boolean) => { - !shiftKey && this.clearSelection(); + selectCell = (doc: Doc, index: number, shiftKey: boolean, ctrlKey: boolean) => { + console.log(ctrlKey); + (!shiftKey && !ctrlKey) && this.clearSelection(); !this._selectedCells && (this._selectedCells = []); this._selectedCells.push(doc); this._selectedCol = index; @@ -458,21 +460,15 @@ export class CollectionSchemaView extends CollectionSubView() { if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); if (shiftKey && lastSelected) this.selectRows(doc, lastSelected); - else { - this.addDocToSelection(doc, false, this.rowIndex(doc)); - } - - let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); - + else if (ctrlKey) {this.addDocToSelection(doc, true, this.rowIndex(doc)); console.log("2")} + else this.addDocToSelection(doc, false, this.rowIndex(doc)); + }; @action deselectCell = (doc: Doc) => { if (this._selectedCells) this._selectedCells = this._selectedCells.filter(d => d !== doc); - if (this._selectedCells){ - let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); - } }; @action diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index e3654facb..33b2d36d6 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -100,7 +100,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); - selectCell = (doc: Doc, col: number, shift: boolean) => this.schemaView?.selectCell(doc, col, shift); + selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); deselectCell = () => this.schemaView?.deselectAllCells(); selectedCells = () => this.schemaView?._selectedCells; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 734345255..775a8ce05 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -35,7 +35,7 @@ export interface SchemaTableCellProps { Document: Doc; col: number; deselectCell: () => void; - selectCell: (doc: Doc, col: number, shift: boolean) => void; + selectCell: (doc: Doc, col: number, shift: boolean, ctrl: boolean) => void; selectedCells: () => Doc[] | undefined; selectedCol: () => number; fieldKey: string; @@ -184,7 +184,8 @@ export class SchemaTableCell extends ObservableReactComponent { const shift: boolean = e.shiftKey; - !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift)} + const ctrl: boolean = e.ctrlKey; + !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl)} )} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} -- cgit v1.2.3-70-g09d2 From 89e9ad0448290fe7daf6980c9c5e5cda0ce66714 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 11 Apr 2024 05:24:03 -0400 Subject: Row dragging no longer interferes with multi-selection; dragged rows render where they will be dropped; pointerevent listeners removed from schemarowbox --- .env.swp | Bin 12349 -> 12351 bytes src/client/util/DocumentManager.ts | 4 + .../views/collections/CollectionNoteTakingView.tsx | 1 + .../collectionSchema/CollectionSchemaView.tsx | 104 ++++++++++++++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 41 +------- .../collectionSchema/SchemaTableCell.tsx | 5 +- src/client/views/nodes/DocumentView.tsx | 1 + 7 files changed, 91 insertions(+), 65 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/.env.swp b/.env.swp index 0894f214e..8280a666e 100644 Binary files a/.env.swp and b/.env.swp differ diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index a38a330da..561114182 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -36,6 +36,7 @@ export class DocumentManager { } public DeleteDocumentView(dv: DocumentView) { this._documentViews.delete(dv); + console.log("deleted") } //private constructor so no other class can create a nodemanager @@ -94,6 +95,7 @@ export class DocumentManager { this.callAddViewFuncs(view); } // prettier-ignore }; + public RemoveView = action((view: DocumentView) => { if (!view._props.LayoutTemplateString?.includes(KeyValueBox.name) && !view._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { this.DeleteDocumentView(view); @@ -125,6 +127,8 @@ export class DocumentManager { public getDocumentView(target: Doc | undefined, preferredCollection?: DocumentView): DocumentView | undefined { const docViewArray = DocumentManager.Instance.DocumentViews; + //console.log(docViewArray) + //console.log(this._documentViews) const passes = !target ? [] : preferredCollection ? [preferredCollection, undefined] : [undefined]; return passes.reduce( (toReturn, pass) => diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 6318620e0..8c10db5dc 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -138,6 +138,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { sections.get(existingHeader)!.push(d); } }); + //*!* // now we add back in the docs that we're dragging if (rowCol.length && columnHeaders.length > rowCol[1]) { const offset = 0; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index f59d562dd..050f303c2 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -3,7 +3,7 @@ import { Popup, PopupTrigger, Type } from 'browndash-components'; import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; +import { StopEvent, emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; @@ -91,7 +91,8 @@ export class CollectionSchemaView extends CollectionSubView() { //an array of selected docs and the index representing the selected column @observable _selectedCol: number = 0; @observable _selectedCells: Array | undefined; - + @observable _mouseY: number = 0; + @observable _mouseX: number = 0; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -99,7 +100,11 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get _selectedDocs() { - const selected = SelectionManager.Docs.filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)); + // get all selected documents then filter out any whose parent is not this schema document + const selected = SelectionManager.Docs.filter(doc => this.childDocs.includes(doc)); + // SelectionManager... filter(doc => this.childDocs.includes(doc)) + //DocCast(doc.embedContainer)[DocData] === this.dataDoc + //SelectionManager.Docs.forEach(doc => console.log("index: " + this.rowIndex(doc) + " equal: " + Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document))); if (!selected.length) { for (const sel of SelectionManager.Docs) { const contextPath = DocumentManager.GetContextPath(sel, true); @@ -128,6 +133,10 @@ export class CollectionSchemaView extends CollectionSubView() { return Cast(this.layoutDoc.schema_columnKeys, listSpec('string'), defaultColumnKeys); } + @computed get rowKeys() { + return Cast(this.layoutDoc.schema_rowKeys, listSpec('string'), []); + } + @computed get storedColumnWidths() { const widths = NumListCast( this.layoutDoc.schema_columnWidths, @@ -135,12 +144,18 @@ export class CollectionSchemaView extends CollectionSubView() { ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); + //If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) { return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)); } return widths; } + @computed get rowHeights() { + const heights = this.childDocs.map(() => (this.rowHeightFunc())) + return heights; + } + @computed get displayColumnWidths() { return this._displayColumnWidths ?? this.storedColumnWidths; } @@ -211,11 +226,11 @@ export class CollectionSchemaView extends CollectionSubView() { break; case 'ArrowUp': { - const firstDoc = this._selectedDocs.lastElement(); - const firstIndex = this.rowIndex(firstDoc); + const firstIndex = this.lastSelectedIndex; const curDoc = this.sortedDocs.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { - const newDoc = this.sortedDocs.docs[firstIndex - 1]; + console.log("firstindex: " + firstIndex + " docs: " + this.childDocs.length) + const newDoc = firstIndex < this.childDocs.length - 1 ? this.sortedDocs.docs[firstIndex - 1] : curDoc; if (this._selectedDocs.includes(newDoc)){ SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)) this.deselectCell(curDoc); @@ -255,6 +270,15 @@ export class CollectionSchemaView extends CollectionSubView() { } }; + @computed get lastSelectedIndex() { + let lastIndex: number = 0; + if (this._selectedCells) for (let i = 0; i < this._selectedCells?.length; ++i){ + let rowIndex = this.rowIndex(this._selectedCells[i]); + (rowIndex > lastIndex) && (lastIndex = rowIndex); + } + return lastIndex; + } + @action changeSelectedCellColumn = () => { @@ -390,6 +414,19 @@ export class CollectionSchemaView extends CollectionSubView() { } return total + curr; }, CollectionSchemaView._rowMenuWidth); + console.log(index); + return index; + }; + + findRowDropIndex = (mouseY: number) => { + let index: number = 0; + this.rowHeights.reduce((total, curr, i) => { + if (total <= mouseY && total + curr >= mouseY) { + if (mouseY <= total + curr) index = i; + else index = i + 1; + } + return total + curr; + }, CollectionSchemaView._rowHeight); return index; }; @@ -428,6 +465,7 @@ export class CollectionSchemaView extends CollectionSubView() { addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { const rowDocView = DocumentManager.Instance.getDocumentView(doc); if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection); + else console.log("nonexistent") }; @action @@ -443,29 +481,31 @@ export class CollectionSchemaView extends CollectionSubView() { const endRow = Math.max(lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; - if (!this._selectedDocs.includes(currDoc)) this.addDocToSelection(currDoc, true, i); - this._selectedCells && this._selectedCells.push(currDoc); + if (!this._selectedDocs.includes(currDoc)){ + this.selectCell(currDoc, this._selectedCol, false, true) + } } }; @action - selectCell = (doc: Doc, index: number, shiftKey: boolean, ctrlKey: boolean) => { - (!shiftKey && !ctrlKey) && this.clearSelection(); + selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => { + if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); - this._selectedCells.push(doc); + !shiftKey && this._selectedCells && this._selectedCells.push(doc); if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRows(doc, lastSelected); - else if (ctrlKey && lastSelected && this._selectedDocs.includes(doc)) { - console.log("removed"); - SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)) - this.deselectCell(doc); + else if (ctrlKey) { + if (lastSelected && this._selectedDocs.includes(doc)){ + SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)) + this.deselectCell(doc); + } else this.addDocToSelection(doc, true, this.rowIndex(doc)); } - else if (ctrlKey) {this.addDocToSelection(doc, true, this.rowIndex(doc)); console.log("2")} else this.addDocToSelection(doc, false, this.rowIndex(doc)); + this._selectedCol = col; - this._selectedCol = index; + //let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); }; @action @@ -480,7 +520,12 @@ export class CollectionSchemaView extends CollectionSubView() { sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); - setDropIndex = (index: number) => (this._closestDropIndex = index); + @computed + get rowDropIndex(){ + const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseX, this._mouseY)[1]; + const index = this.findRowDropIndex(mouseY); + return index + } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { @@ -502,14 +547,14 @@ export class CollectionSchemaView extends CollectionSubView() { } const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - const pushedDocs = this.childDocs.filter((doc, index) => index >= this._closestDropIndex && !draggedDocs.includes(doc)); + const pushedDocs = this.childDocs.filter((doc, index) => index >= this.rowDropIndex && !draggedDocs.includes(doc)); const pushedAndDraggedDocs = [...pushedDocs, ...draggedDocs]; const removed = this.childDocs.slice().filter(doc => !pushedAndDraggedDocs.includes(doc)); this.dataDoc[this.fieldKey ?? 'data'] = new List([...removed, ...draggedDocs, ...pushedDocs]); this.clearSelection(); draggedDocs.forEach(doc => { const draggedView = DocumentManager.Instance.getFirstDocumentView(doc); - if (draggedView) DocumentManager.Instance.RemoveView(draggedView); + //if (draggedView) DocumentManager.Instance.RemoveView(draggedView); //this is what messed up multi-select with row dragging DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true)); }); return true; @@ -880,12 +925,21 @@ export class CollectionSchemaView extends CollectionSubView() { ); } + @action + onPointerMove = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length){ + this._mouseY = e.clientY; + this._mouseX = e.clientX; + } + } + @computed get sortedDocs() { const field = StrCast(this.layoutDoc.sortField); - const desc = BoolCast(this.layoutDoc.sortDesc); + const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort + const staticDocs = this.childDocs.filter(d => !DragManager.docsBeingDragged.includes(d)); const docs = !field - ? this.childDocs - : [...this.childDocs].sort((docA, docB) => { + ? staticDocs + : [...staticDocs].sort((docA, docB) => { // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b const aStr = Field.toString(docA[field] as Field); const bStr = Field.toString(docB[field] as Field); var out = 0; @@ -894,8 +948,10 @@ export class CollectionSchemaView extends CollectionSubView() { if (desc) out *= -1; return out; }); + docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged) return { docs }; } + rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); sortedDocsFunc = () => this.sortedDocs; isContentActive = () => this._props.isSelected() || this._props.isContentActive(); @@ -905,7 +961,7 @@ export class CollectionSchemaView extends CollectionSubView() { _oldWheel: any; render() { return ( -
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)}> +
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={(e) => this.onPointerMove(e)}>
() { } }; - onPointerEnter = (e: any) => { - if (SnappingManager.IsDragging && this._props.isContentActive()) { - document.removeEventListener('pointermove', this.onPointerMove); - document.addEventListener('pointermove', this.onPointerMove); - } - }; - - onPointerMove = (e: any) => { - const dragIsRow = DragManager.docsBeingDragged.some(doc => doc.embedContainer === this.schemaDoc); // this.schemaView?._selectedDocs.has(doc) ?? false; - - if (this._ref && dragIsRow) { - const rect = this._ref.getBoundingClientRect(); - const y = e.clientY - rect.top; //y position within the element. - const height = this._ref.clientHeight; - const halfLine = height / 2; - if (y <= halfLine) { - this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; - this._ref.style.borderBottom = '0px'; - this.schemaView?.setDropIndex(this.rowIndex); - } else if (y > halfLine) { - this._ref.style.borderTop = '0px'; - this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; - this.schemaView?.setDropIndex(this.rowIndex + 1); - } - } - }; - - onPointerLeave = (e: any) => { - if (this._ref) { - this._ref.style.borderTop = '0px'; - this._ref.style.borderBottom = '0px'; - } - document.removeEventListener('pointermove', this.onPointerMove); - }; - selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); deselectCell = () => this.schemaView?.deselectAllCells(); - selectedCells = () => this.schemaView?._selectedCells; + selectedCells = () => this.schemaView?._selectedDocs; setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); @@ -111,8 +76,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{ row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 6a75ad6c5..1786d688b 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import Select from 'react-select'; -import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils'; +import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -110,7 +110,7 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + let istrue = this._props.isRowActive() && (selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; return istrue; } @@ -182,6 +182,7 @@ export class SchemaTableCell extends ObservableReactComponent StopEvent(e)} onPointerDown={action(e => { const shift: boolean = e.shiftKey; const ctrl: boolean = e.ctrlKey; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8d3750cad..3764f6edd 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -279,6 +279,7 @@ export class DocumentViewInternal extends DocComponent dv.ContentDiv); -- cgit v1.2.3-70-g09d2 From 14ce80e04b921adccccca29e6947c22f9ede4800 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 15 Apr 2024 00:17:38 -0400 Subject: grouped selected cell dragging aligned properly; dragged cell placement offset weirdness fixed; bug introduced where rows being dragged deselect (still placed correctly) --- .../collectionSchema/CollectionSchemaView.tsx | 83 +++++++++++++--------- .../collections/collectionSchema/SchemaRowBox.tsx | 12 +--- 2 files changed, 51 insertions(+), 44 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 050f303c2..570b614d8 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -28,6 +28,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { TbEmphasis } from 'react-icons/tb'; const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export enum ColumnType { @@ -56,7 +57,6 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', ' @observer export class CollectionSchemaView extends CollectionSubView() { private _keysDisposer: any; - private _closestDropIndex: number = 0; private _previewRef: HTMLDivElement | null = null; private _makeNewColumn: boolean = false; private _documentOptions: DocumentOptions = new DocumentOptions(); @@ -88,11 +88,11 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _menuValue: string = ''; @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; - //an array of selected docs and the index representing the selected column @observable _selectedCol: number = 0; - @observable _selectedCells: Array | undefined; - @observable _mouseY: number = 0; - @observable _mouseX: number = 0; + @observable _selectedCells: Array = []; + @observable _mouseCoordinates = { x: 0, y: 0 }; + @observable _lowestSelectedIndex = -1; + @observable _relCursorIndex = -1; //cursor index relative to the current selected cells // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -151,7 +151,7 @@ export class CollectionSchemaView extends CollectionSubView() { return widths; } - @computed get rowHeights() { + @computed get heights() { const heights = this.childDocs.map(() => (this.rowHeightFunc())) return heights; } @@ -226,7 +226,8 @@ export class CollectionSchemaView extends CollectionSubView() { break; case 'ArrowUp': { - const firstIndex = this.lastSelectedIndex; + const firstDoc = this.sortedDocs.docs[0]; + const firstIndex = this.rowIndex(firstDoc); const curDoc = this.sortedDocs.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { console.log("firstindex: " + firstIndex + " docs: " + this.childDocs.length) @@ -270,15 +271,6 @@ export class CollectionSchemaView extends CollectionSubView() { } }; - @computed get lastSelectedIndex() { - let lastIndex: number = 0; - if (this._selectedCells) for (let i = 0; i < this._selectedCells?.length; ++i){ - let rowIndex = this.rowIndex(this._selectedCells[i]); - (rowIndex > lastIndex) && (lastIndex = rowIndex); - } - return lastIndex; - } - @action changeSelectedCellColumn = () => { @@ -405,7 +397,7 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; - findDropIndex = (mouseX: number) => { + findColDropIndex = (mouseX: number) => { let index: number | undefined; this.displayColumnWidths.reduce((total, curr, i) => { if (total <= mouseX && total + curr >= mouseX) { @@ -418,23 +410,41 @@ export class CollectionSchemaView extends CollectionSubView() { return index; }; + @action + setRelCursorIndex = (mouseY: number) => { + let rowHeight = CollectionSchemaView._rowHeight; + let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu + let yOffset = this._lowestSelectedIndex * rowHeight; + + const heights = this._selectedDocs.map(() => (this.rowHeightFunc())) + let index: number = 0; + heights.reduce((total, curr, i) => { + if (total <= adjInitMouseY && total + curr >= adjInitMouseY) { + if (adjInitMouseY <= total + curr) index = i; + else index = i + 1; + } + return total + curr; + }, yOffset); + this._relCursorIndex = index; + } + findRowDropIndex = (mouseY: number) => { let index: number = 0; - this.rowHeights.reduce((total, curr, i) => { + this.heights.reduce((total, curr, i) => { if (total <= mouseY && total + curr >= mouseY) { if (mouseY <= total + curr) index = i; else index = i + 1; } return total + curr; }, CollectionSchemaView._rowHeight); - return index; + return index - this._relCursorIndex; }; @action highlightDropColumn = (e: PointerEvent) => { e.stopPropagation(); const mouseX = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY)[0]; - const index = this.findDropIndex(mouseX); + const index = this.findColDropIndex(mouseX); this._colEles.forEach((colRef, i) => { let leftStyle = ''; let rightStyle = ''; @@ -492,6 +502,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); !shiftKey && this._selectedCells && this._selectedCells.push(doc); + let index = this.rowIndex(doc); if (!this) return; const lastSelected = Array.from(this._selectedDocs).lastElement(); @@ -500,29 +511,34 @@ export class CollectionSchemaView extends CollectionSubView() { if (lastSelected && this._selectedDocs.includes(doc)){ SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)) this.deselectCell(doc); - } else this.addDocToSelection(doc, true, this.rowIndex(doc)); + } else this.addDocToSelection(doc, true, index); } - else this.addDocToSelection(doc, false, this.rowIndex(doc)); + else this.addDocToSelection(doc, false, index); this._selectedCol = col; + if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index; + console.log(this._lowestSelectedIndex) + //let selectedIndexes: Array = this._selectedCells.map(doc => this.rowIndex(doc)); }; @action deselectCell = (doc: Doc) => { this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); + if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc))) }; @action deselectAllCells = () => { - this._selectedCells = undefined; + this._selectedCells = []; + this._lowestSelectedIndex = -1; } sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); @computed get rowDropIndex(){ - const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseX, this._mouseY)[1]; + const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1]; const index = this.findRowDropIndex(mouseY); return index } @@ -530,7 +546,7 @@ export class CollectionSchemaView extends CollectionSubView() { onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { const mouseX = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y)[0]; - const index = this.findDropIndex(mouseX); + const index = this.findColDropIndex(mouseX); this.moveColumn(de.complete.columnDragData.colIndex, index ?? de.complete.columnDragData.colIndex); this._colEles.forEach((colRef, i) => { @@ -545,16 +561,12 @@ export class CollectionSchemaView extends CollectionSubView() { e.stopPropagation(); return true; } + const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - const pushedDocs = this.childDocs.filter((doc, index) => index >= this.rowDropIndex && !draggedDocs.includes(doc)); - const pushedAndDraggedDocs = [...pushedDocs, ...draggedDocs]; - const removed = this.childDocs.slice().filter(doc => !pushedAndDraggedDocs.includes(doc)); - this.dataDoc[this.fieldKey ?? 'data'] = new List([...removed, ...draggedDocs, ...pushedDocs]); + this.dataDoc[this.fieldKey ?? 'data'] = new List([...this.sortedDocs.docs]); this.clearSelection(); draggedDocs.forEach(doc => { - const draggedView = DocumentManager.Instance.getFirstDocumentView(doc); - //if (draggedView) DocumentManager.Instance.RemoveView(draggedView); //this is what messed up multi-select with row dragging DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true)); }); return true; @@ -928,8 +940,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action onPointerMove = (e: React.PointerEvent) => { if (DragManager.docsBeingDragged.length){ - this._mouseY = e.clientY; - this._mouseX = e.clientX; + this._mouseCoordinates = { x: e.clientX, y: e.clientY }; } } @@ -948,6 +959,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (desc) out *= -1; return out; }); + docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged) return { docs }; } @@ -961,7 +973,10 @@ export class CollectionSchemaView extends CollectionSubView() { _oldWheel: any; render() { return ( -
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={(e) => this.onPointerMove(e)}> +
this.createDashEventsTarget(ele)} + onDrop={this.onExternalDrop.bind(this)} + onPointerMove={(e) => this.onPointerMove(e)}>
() { this._props.setContentViewBox?.(this); } - //This method is never called anywhere - select = (ctrlKey: boolean, shiftKey: boolean) => { - if (!this.schemaView) return; - const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement(); - if (shiftKey && lastSelected) this.schemaView.selectRows(this.Document, lastSelected); - else { - this.schemaView.addDocToSelection(this.Document, false, 0); - } - }; - + setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY); selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); @@ -75,6 +66,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return (
this.setCursorIndex(e.clientY)} style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} ref={(row: HTMLDivElement | null) => { row && this.schemaView?.addRowRef?.(this.Document, row); -- cgit v1.2.3-70-g09d2 From f410a7b314dd78244e18c9c52140b67b37ab0c87 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 3 May 2024 10:15:39 -0400 Subject: fixed schema to not drag rows when schema is not active (selected or child content active) --- package-lock.json | 3 +- .../collectionSchema/CollectionSchemaView.tsx | 98 ++++++++++------------ .../collections/collectionSchema/SchemaRowBox.tsx | 6 +- .../collectionSchema/SchemaTableCell.tsx | 25 +++--- 4 files changed, 62 insertions(+), 70 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx') diff --git a/package-lock.json b/package-lock.json index cf8e8ce29..f372d011c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31609,7 +31609,8 @@ "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true }, "node_modules/textarea-caret": { "version": "3.1.0", diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 841222c96..2eda5062b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -3,13 +3,13 @@ import { Popup, PopupTrigger, Type } from 'browndash-components'; import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { StopEvent, emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; -import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; import { DocUtils, Docs, DocumentOptions, FInfo } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager, dropActionType } from '../../../util/DragManager'; @@ -28,8 +28,6 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; -import { TbEmphasis } from 'react-icons/tb'; -import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript'; const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export enum ColumnType { @@ -90,7 +88,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; @observable _selectedCol: number = 0; - @observable _selectedCells: Array = []; + @observable _selectedCells: Array = []; @observable _mouseCoordinates = { x: 0, y: 0 }; @observable _lowestSelectedIndex = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position @observable _relCursorIndex = -1; //cursor index relative to the current selected cells @@ -106,7 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() { // get all selected documents then filter out any whose parent is not this schema document const selected = SelectionManager.Docs.filter(doc => this.childDocs.includes(doc)); // SelectionManager... filter(doc => this.childDocs.includes(doc)) - //DocCast(doc.embedContainer)[DocData] === this.dataDoc + //DocCast(doc.embedContainer)[DocData] === this.dataDoc //SelectionManager.Docs.forEach(doc => console.log("index: " + this.rowIndex(doc) + " equal: " + Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document))); if (!selected.length) { for (const sel of SelectionManager.Docs) { @@ -155,7 +153,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get rowHeights() { - const heights = this.childDocs.map(() => (this.rowHeightFunc())) + const heights = this.childDocs.map(() => this.rowHeightFunc()); return heights; } @@ -233,8 +231,8 @@ export class CollectionSchemaView extends CollectionSubView() { const curDoc = this.sortedDocs.docs[firstIndex]; if (firstIndex > 0 && firstIndex < this.childDocs.length) { const newDoc = this.sortedDocs.docs[firstIndex - 1]; - if (this._selectedDocs.includes(newDoc)){ - SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)) + if (this._selectedDocs.includes(newDoc)) { + SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc)); this.deselectCell(curDoc); } else { const shift: boolean = e.shiftKey; @@ -273,9 +271,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - changeSelectedCellColumn = () => { - - } + changeSelectedCellColumn = () => {}; @undoBatch setColumnSort = (field: string | undefined, desc: boolean = false) => { @@ -400,7 +396,7 @@ export class CollectionSchemaView extends CollectionSubView() { // document.removeEventListener('pointermove', this.highlightDropColumn); // document.removeEventListener('pointerup', stopHighlight); // }; - // document.addEventListener('pointerup', stopHighlight); + // document.addEventListener('pointerup', stopHighlight); return true; }; @@ -431,7 +427,7 @@ export class CollectionSchemaView extends CollectionSubView() { let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu let yOffset = this._lowestSelectedIndex * rowHeight; - const heights = this._selectedDocs.map(() => (this.rowHeightFunc())) + const heights = this._selectedDocs.map(() => this.rowHeightFunc()); let index: number = 0; heights.reduce((total, curr, i) => { if (total <= adjInitMouseY && total + curr >= adjInitMouseY) { @@ -441,7 +437,7 @@ export class CollectionSchemaView extends CollectionSubView() { return total + curr; }, yOffset); this._relCursorIndex = index; - } + }; //Uses current mouse position to calculate the indexes of actively dragged docs findRowDropIndex = (mouseY: number) => { @@ -475,13 +471,13 @@ export class CollectionSchemaView extends CollectionSubView() { colRef.style.borderRight = edgeStyle; colRef.style.borderTop = edgeStyle; - for (let doc = 0; doc < this.childDocs.length; ++doc){ - if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])){ + for (let doc = 0; doc < this.childDocs.length; ++doc) { + if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])) { continue; } else { this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle; this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle; - if (doc === this.childDocs.length - 1){ + if (doc === this.childDocs.length - 1) { this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle; } } @@ -520,9 +516,9 @@ export class CollectionSchemaView extends CollectionSubView() { const endRow = Math.max(lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc = this.sortedDocs.docs[i]; - if (!this._selectedDocs.includes(currDoc)){ - this.selectCell(currDoc, this._selectedCol, false, true) - } + if (!this._selectedDocs.includes(currDoc)) { + this.selectCell(currDoc, this._selectedCol, false, true); + } } }; @@ -537,12 +533,11 @@ export class CollectionSchemaView extends CollectionSubView() { const lastSelected = Array.from(this._selectedDocs).lastElement(); if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRows(doc, lastSelected); else if (ctrlKey) { - if (lastSelected && this._selectedDocs.includes(doc)){ - SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)) + if (lastSelected && this._selectedDocs.includes(doc)) { + SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc)); this.deselectCell(doc); } else this.addDocToSelection(doc, true, index); - } - else this.addDocToSelection(doc, false, index); + } else this.addDocToSelection(doc, false, index); this._selectedCol = col; if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index; @@ -553,22 +548,22 @@ export class CollectionSchemaView extends CollectionSubView() { @action deselectCell = (doc: Doc) => { this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); - if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc))) + if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc))); }; @action deselectAllCells = () => { this._selectedCells = []; this._lowestSelectedIndex = -1; - } + }; sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc)); @computed - get rowDropIndex(){ + get rowDropIndex() { const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1]; const index = this.findRowDropIndex(mouseY); - return index + return index; } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { @@ -583,7 +578,7 @@ export class CollectionSchemaView extends CollectionSubView() { colRef.style.borderTop = ''; this.childDocs.forEach(doc => { - if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)){ + if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)) { this._rowEles.get(doc).children[1].children[i].style.borderLeft = ''; this._rowEles.get(doc).children[1].children[i].style.borderRight = ''; this._rowEles.get(doc).children[1].children[i].style.borderBottom = ''; @@ -595,8 +590,8 @@ export class CollectionSchemaView extends CollectionSubView() { const draggedDocs = de.complete.docDragData?.draggedDocuments; if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) { - let map = draggedDocs?.map(doc => this.rowIndex(doc)) - console.log(map) + let map = draggedDocs?.map(doc => this.rowIndex(doc)); + console.log(map); this.dataDoc[this.fieldKey ?? 'data'] = new List([...this.sortedDocs.docs]); this.clearSelection(); draggedDocs.forEach(doc => { @@ -690,15 +685,14 @@ export class CollectionSchemaView extends CollectionSubView() { }; setColumnValues = (key: string, value: string) => { - const selectedDocs: Doc[] = new Array; + const selectedDocs: Doc[] = new Array(); this.childDocs.forEach(doc => { let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); - if (docIsSelected){ + if (docIsSelected) { selectedDocs.push(doc); - } } - ); - if (selectedDocs.length === 1){ + }); + if (selectedDocs.length === 1) { this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); } else { selectedDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); @@ -709,11 +703,10 @@ export class CollectionSchemaView extends CollectionSubView() { setSelectedColumnValues = (key: string, value: string) => { this.childDocs.forEach(doc => { let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0); - if (docIsSelected){ - KeyValueBox.SetField(doc, key, value) - } + if (docIsSelected) { + KeyValueBox.SetField(doc, key, value); } - ); + }); return true; }; @@ -973,24 +966,25 @@ export class CollectionSchemaView extends CollectionSubView() { @action onPointerMove = (e: React.PointerEvent) => { - if (DragManager.docsBeingDragged.length){ + if (DragManager.docsBeingDragged.length) { this._mouseCoordinates = { x: e.clientX, y: e.clientY }; } - if (this._colBeingDragged){ + if (this._colBeingDragged) { let newIndex = this.findColDropIndex(e.clientX); if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex; - this.highlightDraggedColumn(newIndex ?? this._draggedColIndex) + this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); } - } + }; @computed get sortedDocs() { const field = StrCast(this.layoutDoc.sortField); - const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort + const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort const staticDocs = this.childDocs.filter(d => !DragManager.docsBeingDragged.includes(d)); const docs = !field ? staticDocs - : [...staticDocs].sort((docA, docB) => { // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b + : [...staticDocs].sort((docA, docB) => { + // this sorts the documents based on the selected field. returning -1 for a before b, 0 for a = b, 1 for a > b const aStr = Field.toString(docA[field] as Field); const bStr = Field.toString(docB[field] as Field); var out = 0; @@ -1000,7 +994,7 @@ export class CollectionSchemaView extends CollectionSubView() { return out; }); - docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged) + docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged); return { docs }; } @@ -1013,10 +1007,7 @@ export class CollectionSchemaView extends CollectionSubView() { _oldWheel: any; render() { return ( -
this.createDashEventsTarget(ele)} - onDrop={this.onExternalDrop.bind(this)} - onPointerMove={(e) => this.onPointerMove(e)}> +
this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}>
this._props.schema.isContentActive() || this._props.schema._props.isSelected() || this._props.schema._props.isAnyChildContentActive(); render() { return ( () { return (
this.setCursorIndex(e.clientY)} + onPointerDown={e => this.setCursorIndex(e.clientY)} style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} ref={(row: HTMLDivElement | null) => { row && this.schemaView?.addRowRef?.(this.Document, row); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 6bbc4dfa6..f6f3a24a9 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import Select from 'react-select'; -import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils'; +import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -17,6 +17,7 @@ import { FInfo, FInfoFieldType } from '../../../documents/Documents'; import { DocFocusOrOpen } from '../../../util/DocumentManager'; import { dropActionType } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoBatch, undoable } from '../../../util/UndoManager'; import { EditableView } from '../../EditableView'; @@ -29,7 +30,6 @@ import { KeyValueBox } from '../../nodes/KeyValueBox'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { ColumnType, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; -import { SnappingManager } from '../../../util/SnappingManager'; export interface SchemaTableCellProps { Document: Doc; @@ -110,7 +110,7 @@ export class SchemaTableCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + let isSelected = this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; return isSelected; } @@ -178,7 +178,6 @@ export class SchemaTableCell extends ObservableReactComponent { const shift: boolean = e.shiftKey; const ctrl: boolean = e.ctrlKey; - if (this.selected && ctrl) { - this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); - e.stopPropagation(); - } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl)} - )} + if (this._props.isRowActive?.() !== false) { + if (this.selected && ctrl) { + this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + e.stopPropagation(); + } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); + } + })} style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content}
@@ -324,7 +325,7 @@ export class SchemaRTFCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } selectedFunc = () => this.selected; @@ -347,7 +348,7 @@ export class SchemaBoolCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); @@ -392,7 +393,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col; + return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col; } render() { const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); -- cgit v1.2.3-70-g09d2