From 6a3d0cc899020710d5b9aabe164649c686467024 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 25 Jun 2024 01:14:06 -0400 Subject: progress on refSelect (single click to add cell to equation) --- .../collectionSchema/CollectionSchemaView.tsx | 135 +++++++++++---------- .../collectionSchema/SchemaCellField.tsx | 25 ++-- .../collections/collectionSchema/SchemaRowBox.tsx | 8 +- .../collectionSchema/SchemaTableCell.tsx | 11 +- 4 files changed, 106 insertions(+), 73 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 48c34c647..c3dc4bad6 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -42,6 +42,7 @@ import { truncate } from 'lodash'; import { DocumentManager } from '../../../util/DocumentManager'; import { TbHemispherePlus } from 'react-icons/tb'; import { docs_v1 } from 'googleapis'; +import { SchemaCellField } from './SchemaCellField'; const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore @@ -104,7 +105,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = []; @observable _cellHighlightColors: ObservableMap = new ObservableMap(); @observable _docs: Doc[] = []; - @observable _inCellSelectMode: boolean = false; + @observable _referenceSelectMode = {enabled: false, currEditing: undefined} // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -113,7 +114,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get _selectedDocs() { // get all selected documents then filter out any whose parent is not this schema document - const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc)); + const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc) && this._selectedCells.includes(doc)); if (!selected.length) { // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window) const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document)); @@ -651,7 +652,19 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => { + selectCell = (doc: Doc | undefined, col: number, shiftKey: boolean, ctrlKey: boolean) => { + if (!doc) return; + + if (this._referenceSelectMode.enabled) { + const docIndex = DocumentView.getDocViewIndex(doc); + const field = this.columnKeys[col]; + const refToAdd = `d${docIndex}.${field}` + const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null; + editedField?.appendText(refToAdd); + editedField?.setupRefSelect(false); + return; + } + this.closeColumnMenu(); if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); @@ -1015,64 +1028,64 @@ export class CollectionSchemaView extends CollectionSubView() { this._filterSearchValue = e.target.value; }; - @computed get newFieldMenu() { - return ( -
-
- { - this._newFieldType = ColumnType.Number; - this._newFieldDefault = 0; - })} - /> - number -
-
- { - this._newFieldType = ColumnType.Boolean; - this._newFieldDefault = false; - })} - /> - boolean -
-
- { - this._newFieldType = ColumnType.String; - this._newFieldDefault = ''; - })} - /> - string -
-
value: {this.fieldDefaultInput}
-
{this._newFieldWarning}
-
{ - if (this.documentKeys.includes(this._menuValue)) { - this._newFieldWarning = 'Field already exists'; - } else if (this._menuValue.length === 0) { - this._newFieldWarning = 'Field cannot be an empty string'; - } else { - this.setKey(this._menuValue, this._newFieldDefault); - } - this._columnMenuIndex = undefined; - })}> - done -
-
- ); - } + // @computed get newFieldMenu() { + // return ( + //
+ //
+ // { + // this._newFieldType = ColumnType.Number; + // this._newFieldDefault = 0; + // })} + // /> + // number + //
+ //
+ // { + // this._newFieldType = ColumnType.Boolean; + // this._newFieldDefault = false; + // })} + // /> + // boolean + //
+ //
+ // { + // this._newFieldType = ColumnType.String; + // this._newFieldDefault = ''; + // })} + // /> + // string + //
+ //
value: {this.fieldDefaultInput}
+ //
{this._newFieldWarning}
+ //
{ + // if (this.documentKeys.includes(this._menuValue)) { + // this._newFieldWarning = 'Field already exists'; + // } else if (this._menuValue.length === 0) { + // this._newFieldWarning = 'Field cannot be an empty string'; + // } else { + // this.setKey(this._menuValue, this._newFieldDefault); + // } + // this._columnMenuIndex = undefined; + // })}> + // done + //
+ //
+ // ); + // } onKeysPassiveWheel = (e: WheelEvent) => { // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index e13763b45..ea46fb432 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -15,6 +15,8 @@ export interface SchemaCellFieldProps { editing?: boolean; oneLine?: boolean; Document: Doc; + fieldKey: string; + refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined}; highlightCells?: (text: string) => void; GetValue(): string | undefined; SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; @@ -41,10 +43,6 @@ export class SchemaCellField extends ObservableReactComponent { - console.log('content: ' + content) this._displayedContent = this.makeSpans(content); if (restoreCursorPos) { const cursorPos = this.cursorPosition; @@ -135,6 +133,12 @@ export class SchemaCellField extends ObservableReactComponent { + this._unrenderedContent += text; + this.setContent(this._unrenderedContent); + } + @action setIsFocused = (value: boolean) => { const wasFocused = this._editing; @@ -209,6 +213,12 @@ export class SchemaCellField extends ObservableReactComponent { + const properties = this._props.refSelectModeInfo; + properties.enabled = enabled; + properties.currEditing = enabled ? this : undefined; + } + @action onKeyDown = (e: React.KeyboardEvent) => { if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here @@ -234,7 +244,7 @@ export class SchemaCellField extends ObservableReactComponent() { return '' } + @computed get refSelectModeInfo() { + return this.schemaView._referenceSelectMode; + } + @computed get menuInfos() { const infos: Array = []; if (this.Document._lockedSchemaEditing) infos.push('lock'); @@ -123,9 +127,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); computeRowIndex = () => this.schemaView?.rowIndex(this.Document); highlightCells = (text: string) => this.schemaView?.highlightCells(text); - equationHighlightRef = (text: string) => { - - } eqHighlightFunc = (text: string) => { const info = this.schemaView.findCellRefs(text); const cells: HTMLDivElement[] = []; @@ -174,6 +175,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{this.schemaView?.columnKeys?.map((key, index) => ( void; equationHighlightRef: ObservableMap; func: (text: string) => HTMLDivElement[] | []; - + refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined}; } function selectedCell(props: SchemaTableCellProps) { @@ -78,7 +78,7 @@ function selectedCell(props: SchemaTableCellProps) { @observer export class SchemaTableCell extends ObservableReactComponent { - @observable _highlighted: boolean = false; + // private _fieldRef: SchemaCellField | null = null; constructor(props: SchemaTableCellProps) { super(props); @@ -143,6 +143,11 @@ export class SchemaTableCell extends ObservableReactComponent { + // this._fieldRef?.appendText(text); + // } adjustSelfReference = (field: string) => { const modField = field.replace(/\bthis.\b/g, `d${this.docIndex}.`); @@ -180,6 +185,8 @@ export class SchemaTableCell extends ObservableReactComponent this._props.highlightCells(this.adjustSelfReference(text))} getCells={(text: string) => this._props.func(this.adjustSelfReference(text))} -- cgit v1.2.3-70-g09d2