diff options
4 files changed, 106 insertions, 73 deletions
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<string, string[]>(); @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 ( - <div className="schema-new-key-options"> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - checked={this._newFieldType === ColumnType.Number} - onChange={action(() => { - this._newFieldType = ColumnType.Number; - this._newFieldDefault = 0; - })} - /> - number - </div> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - checked={this._newFieldType === ColumnType.Boolean} - onChange={action(() => { - this._newFieldType = ColumnType.Boolean; - this._newFieldDefault = false; - })} - /> - boolean - </div> - <div className="schema-key-type-option"> - <input - type="radio" - name="newFieldType" - checked={this._newFieldType === ColumnType.String} - onChange={action(() => { - this._newFieldType = ColumnType.String; - this._newFieldDefault = ''; - })} - /> - string - </div> - <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div> - <div className="schema-key-warning">{this._newFieldWarning}</div> - <div - className="schema-column-menu-button" - onPointerDown={action(() => { - 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 - </div> - </div> - ); - } + // @computed get newFieldMenu() { + // return ( + // <div className="schema-new-key-options"> + // <div className="schema-key-type-option"> + // <input + // type="radio" + // name="newFieldType" + // checked={this._newFieldType === ColumnType.Number} + // onChange={action(() => { + // this._newFieldType = ColumnType.Number; + // this._newFieldDefault = 0; + // })} + // /> + // number + // </div> + // <div className="schema-key-type-option"> + // <input + // type="radio" + // name="newFieldType" + // checked={this._newFieldType === ColumnType.Boolean} + // onChange={action(() => { + // this._newFieldType = ColumnType.Boolean; + // this._newFieldDefault = false; + // })} + // /> + // boolean + // </div> + // <div className="schema-key-type-option"> + // <input + // type="radio" + // name="newFieldType" + // checked={this._newFieldType === ColumnType.String} + // onChange={action(() => { + // this._newFieldType = ColumnType.String; + // this._newFieldDefault = ''; + // })} + // /> + // string + // </div> + // <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div> + // <div className="schema-key-warning">{this._newFieldWarning}</div> + // <div + // className="schema-column-menu-button" + // onPointerDown={action(() => { + // 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 + // </div> + // </div> + // ); + // } 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<SchemaCellFieldPro }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function } - @computed get inCellSelectMode() { - return - } - get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore componentDidMount(): void { @@ -66,6 +64,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this._overlayDisposer?.(); this._overlayDisposer = undefined; this._props.highlightCells?.(''); + this.setupRefSelect(false); } }, { fireImmediately: true } @@ -127,7 +126,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro @action setContent = (content: string, restoreCursorPos?: boolean) => { - console.log('content: ' + content) this._displayedContent = this.makeSpans(content); if (restoreCursorPos) { const cursorPos = this.cursorPosition; @@ -136,6 +134,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro } @action + appendText = (text: string) => { + this._unrenderedContent += text; + this.setContent(this._unrenderedContent); + } + + @action setIsFocused = (value: boolean) => { const wasFocused = this._editing; this._editing = value; @@ -209,6 +213,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)}; }; + setupRefSelect = (enabled: boolean) => { + const properties = this._props.refSelectModeInfo; + properties.enabled = enabled; + properties.currEditing = enabled ? this : undefined; + } + @action onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { 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<SchemaCellFieldPro e.stopPropagation(); break; case '+': case '*': case '/': case '%': // prettier-ignore - + this.setupRefSelect(true); break; case ' ': e.stopPropagation(); @@ -249,12 +259,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro break; case 'u': // for some reason 'u' otherwise exits the editor e.stopPropagation(); + this.setupRefSelect(false); break; case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': // prettier-ignore break; // eslint-disable-next-line no-fallthrough default: - console.log('default called') + this.setupRefSelect(false); break; } }; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index d2c0d891f..b15804d41 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -96,6 +96,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { return '' } + @computed get refSelectModeInfo() { + return this.schemaView._referenceSelectMode; + } + @computed get menuInfos() { const infos: Array<IconProp> = []; if (this.Document._lockedSchemaEditing) infos.push('lock'); @@ -123,9 +127,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { 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<SchemaRowBoxProps>() { <div className="row-cells"> {this.schemaView?.columnKeys?.map((key, index) => ( <SchemaTableCell + refSelectModeInfo={this.refSelectModeInfo} func={this.eqHighlightFunc} equationHighlightRef={this.schemaView._cellHighlightColors} highlightCells={this.highlightCells} diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index aa8401502..75b31315e 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -64,7 +64,7 @@ export interface SchemaTableCellProps { highlightCells: (text: string) => void; equationHighlightRef: ObservableMap<HTMLDivElement, string>; 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<SchemaTableCellProps> { - @observable _highlighted: boolean = false; + // private _fieldRef: SchemaCellField | null = null; constructor(props: SchemaTableCellProps) { super(props); @@ -143,6 +143,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro const pointerEvents: 'all' | 'none' = !readOnly && isRowActive() ? 'all' : 'none'; return { color, textDecoration, fieldProps, cursor, pointerEvents }; } + + // @action + // appendTextToField = (text: string) => { + // 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<SchemaTableCellPro pointerEvents: this.lockedInteraction ? 'none' : pointerEvents, }}> <SchemaCellField + fieldKey={this._props.fieldKey} + refSelectModeInfo={this._props.refSelectModeInfo} Document={this._props.Document} highlightCells={(text: string) => this._props.highlightCells(this.adjustSelfReference(text))} getCells={(text: string) => this._props.func(this.adjustSelfReference(text))} |