From 7f9d92b3e1d0ca433c732936eae767095c9a5e7f Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 22 Jun 2024 15:47:12 -0400 Subject: work on cell field (numerous bugs fixed: spaces now make new divs, invalid refs no longer break things, valid->invalid ref causes update properly) --- .../collectionSchema/CollectionSchemaView.tsx | 9 ++- .../collectionSchema/SchemaCellField.tsx | 79 ++++++++++++++-------- .../collections/collectionSchema/SchemaRowBox.tsx | 5 +- .../collectionSchema/SchemaTableCell.tsx | 4 +- 4 files changed, 59 insertions(+), 38 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 308520154..9c4eda3b8 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -533,7 +533,7 @@ export class CollectionSchemaView extends CollectionSubView() { return cell; } - findCellRefs = (text: string, retRawMatches?: boolean) => { + findCellRefs = (text: string) => { const pattern = /(this|d(\d+))\.(\w+)/g; interface Match { docRef: string; field: string; } @@ -545,13 +545,12 @@ export class CollectionSchemaView extends CollectionSubView() { matches.push({ docRef, field: match[3] }); } - if (retRawMatches) return matches; - const cells: Array = []; matches.forEach((match: Match) => { const {docRef, field} = match; - const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document; - if (this.columnKeys.includes(field)) {cells.push([doc, field])} + const docView = DocumentManager.Instance.DocumentViews[Number(docRef)]; + const doc = docView?.Document ?? undefined; + if (this.columnKeys.includes(field) && this._docs.includes(doc)) {cells.push([doc, field])} }) return cells; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index dcfa4f6f2..e2aa27a95 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -18,7 +18,7 @@ export interface SchemaCellFieldProps { highlightCells?: (text: string) => void; GetValue(): string | undefined; SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; - func: (text: string, raw: boolean) => HTMLDivElement[] | []; + getCells: (text: string) => HTMLDivElement[] | []; } @observer @@ -26,7 +26,7 @@ export class SchemaCellField extends ObservableReactComponent void; @observable _editing: boolean = false; @observable _displayedContent = ''; @@ -40,8 +40,8 @@ export class SchemaCellField extends ObservableReactComponent { - this._content = this._props.GetValue() ?? ''; - this.setContent(this._content); + this._unrenderedContent = this._props.GetValue() ?? ''; + this.setContent(this._unrenderedContent, true); }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function this._disposers.editing = reaction( () => this._editing, @@ -52,8 +52,7 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); this._props.highlightCells?.(this._props.GetValue() ?? ''); - if (this._props.Document.type === 'collection') console.log('highlight: ' + this._props.GetValue()) - this.setContent(this._content); + this.setContent(this._unrenderedContent, true); } }); } else { @@ -82,33 +81,44 @@ export class SchemaCellField extends ObservableReactComponent { - const pattern = /(this|d(\d+))\.(\w+)/g; - interface Match { docRef: string; field: string; } + makeSpans = (content: string) => { + let chunkedText = content; + chunkedText = chunkedText.replace(/ +/g, (match) => { + const spanSpaces = ' '.repeat(match.length); + return `${spanSpaces}`; + }); - const matches: Match[] = []; + const pattern = /(this|d(\d+))\.(\w+)/g; + const matches: string[] = []; let match: RegExpExecArray | null; + const cells: Map = new Map(); + while ((match = pattern.exec(content)) !== null) { - const docRef = match[1] === 'this' ? match[1] : match[2]; - matches.push({ docRef, field: match[3] }); + const cell = this._props.getCells(match[0]); + if (cell.length) { + matches.push(match[0]); + cells.set(match[0], cell[0]) + } } - const cells = this._props.func(content, false); - let chunkedText = content; let matchNum = 0; - matches.forEach((match: Match) => { - const {docRef, field} = match; + matches.forEach((match: string) => { // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef; - chunkedText = chunkedText.replace(`d${docRef}.${field}`, `d${docRef}.${field}`); + chunkedText = chunkedText.replace(match, `${match}`); ++matchNum; }) + return chunkedText; } @action - setContent = (content: string) => { - this._displayedContent = this.chunkContent(content); + setContent = (content: string, restoreCursorPos?: boolean) => { + this._displayedContent = this.makeSpans(content); + if (restoreCursorPos) { + const cursorPos = this.cursorPosition; + setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + } } @action @@ -164,9 +174,13 @@ export class SchemaCellField extends ObservableReactComponent { + if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true; + //if (contains self-ref pattern) + }; + onChange = (e: FormEvent) => { - const cursorPos = this.cursorPosition; - const prevVal = this._content; + const prevVal = this._unrenderedContent; const targVal = e.currentTarget.innerText; if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { this._overlayDisposer?.(); @@ -174,12 +188,9 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); } - this._content = targVal; + this._unrenderedContent = targVal; this._props.highlightCells?.(targVal); - if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) { - this.setContent(targVal); - setTimeout(() => this.restoreCursorPosition(cursorPos), 0); - } + if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)}; }; @action @@ -206,6 +217,18 @@ export class SchemaCellField extends ObservableReactComponent { + this.setContent(this._unrenderedContent); + const cursorPos = this.cursorPosition; + setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + } + , 0); + break; + case 'u': // for some reason 'u' otherwise exits the editor + e.stopPropagation(); + break; case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore break; // eslint-disable-next-line no-fallthrough @@ -225,8 +248,8 @@ export class SchemaCellField extends ObservableReactComponent() { equationHighlightRef = (text: string) => { } - eqHighlightFunc = (text: string, raw: boolean) => { - const info = this.schemaView.findCellRefs(text, raw); - if (raw) return info; + eqHighlightFunc = (text: string) => { + const info = this.schemaView.findCellRefs(text); const cells: HTMLDivElement[] = []; info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))}) return cells; diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 94fd9ec7d..ab384a487 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -63,7 +63,7 @@ export interface SchemaTableCellProps { isolatedSelection: [boolean, boolean]; highlightCells: (text: string) => void; equationHighlightRef: ObservableMap; - func: (text: string, raw: boolean) => HTMLDivElement[] | []; + func: (text: string) => HTMLDivElement[] | []; } @@ -184,7 +184,7 @@ export class SchemaTableCell extends ObservableReactComponent selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} contents={undefined} -- cgit v1.2.3-70-g09d2