From 69153ed435cbbc10637563b8bb576a80f8c0693f Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 17 Jun 2024 12:07:00 -0400 Subject: schema cell editable field class started --- .../collectionSchema/SchemaCellField.tsx | 195 +++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 src/client/views/collections/collectionSchema/SchemaCellField.tsx (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx new file mode 100644 index 000000000..5f758683d --- /dev/null +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -0,0 +1,195 @@ +import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from "mobx"; +import { ObservableReactComponent } from "../../ObservableReactComponent"; +import { observer } from "mobx-react"; +import { OverlayView } from "../../OverlayView"; +import { DocumentIconContainer } from "../../nodes/DocumentIcon"; +import React, { FormEvent } from "react"; +import { FieldView, FieldViewProps } from "../../nodes/FieldView"; +import { ObjectField } from "../../../../fields/ObjectField"; + +export interface SchemaCellFieldProps { + contents: any; + fieldContents?: FieldViewProps; + editing?: boolean; + oneLine?: boolean; + highlightCells?: (text: string) => void; + GetValue(): string | undefined; + SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; +} + +@observer +export class SchemaCellField extends ObservableReactComponent { + + private _disposers: { [name: string]: IReactionDisposer } = {}; + private _inputref: HTMLDivElement | null = null; + _overlayDisposer?: () => void; + @observable _editing: boolean = false; + + constructor(props: SchemaCellFieldProps) { + super(props); + makeObservable(this); + } + + componentDidMount(): void { + this._disposers.editing = reaction( + () => this._editing, + editing => { + if (editing) { + setTimeout(() => { + if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) { + this._overlayDisposer?.(); + this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); + this._props.highlightCells?.(this._props.GetValue() ?? ''); + } + }); + } else { + this._overlayDisposer?.(); + this._overlayDisposer = undefined; + this._props.highlightCells?.(''); + } + }, + { fireImmediately: true } + ); + } + + componentDidUpdate(prevProps: Readonly) { + super.componentDidUpdate(prevProps); + if (this._editing && this._props.editing === false) { + this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false); + } else + runInAction(() => { + if (this._props.editing !== undefined) this._editing = this._props.editing; + }); + } + + componentWillUnmount(): void { + this._overlayDisposer?.(); + this._disposers.editing?.(); + this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false); + } + + @action + setIsFocused = (value: boolean) => { + const wasFocused = this._editing; + this._editing = value; + return wasFocused !== this._editing; + }; + + onChange = (e: FormEvent) => { + const targVal = e.currentTarget.innerText; + if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { + this._overlayDisposer?.(); + this._overlayDisposer = undefined; + } else if (!this._overlayDisposer) { + this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); + } + this._props.highlightCells?.(targVal); + }; + + @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 + switch (e.key) { + case 'Tab': + e.stopPropagation(); + this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false); + break; + case 'Backspace': + e.stopPropagation(); + break; + case 'Enter': + e.stopPropagation(); + if (!e.ctrlKey) { + this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); + } + break; + case 'Escape': + e.stopPropagation(); + this._editing = false; + break; + case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': //prettier-ignore + e.stopPropagation(); + break; + case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore + break; + // eslint-disable-next-line no-fallthrough + default: + break; + } + }; + + + @action + onClick = (e?: React.MouseEvent) => { + if (this._props.editing !== false) { + e?.nativeEvent.stopPropagation(); + this._editing = true; + } + }; + + @action + finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { + //if (invalid) raise error + if (this._props.SetValue(value, shiftDown, enterKey)) { + this._editing = false; + } else { + this._editing = false; + !lostFocus && + setTimeout( + action(() => { + this._editing = true; + }), + 0 + ); + } + } + + staticDisplay = () => { + return + { + // eslint-disable-next-line react/jsx-props-no-spreading + this._props.fieldContents ? : this.props.contents ? this._props.contents?.valueOf() : '' + } + + } + + renderEditor = () => { + return ( +
{ this._inputref = r; }} + style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} + onBlur={e => this.finalizeEdit(this._inputref ? this._inputref.innerText : '', false, true, false)} + autoFocus + onInput={this.onChange} + onKeyDown={this.onKeyDown} + onPointerDown={e => e.stopPropagation} + onClick={e => e.stopPropagation} + onPointerUp={e => e.stopPropagation} + > +
+ ); + } + + render() { + const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); + if ((this._editing && gval !== undefined)) { + return
{this.renderEditor()}
; + } else return ( + this._props.contents instanceof ObjectField ? null : ( +
+ {this.staticDisplay()} +
+ ) + ); + } + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d207cf565968167c59b16baf6ca5ce2543c680ea Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 20 Jun 2024 01:57:07 -0400 Subject: cursor position consistency for schema cell field --- .../collectionSchema/CollectionSchemaView.tsx | 4 +- .../collectionSchema/SchemaCellField.tsx | 86 ++++++++++++++++++---- .../collectionSchema/SchemaTableCell.tsx | 3 +- 3 files changed, 74 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 1d9245206..c287b7d44 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -478,7 +478,6 @@ export class CollectionSchemaView extends CollectionSubView() { this._colEles.forEach((colRef, i) => { const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : ''; const sorted = i === this.columnKeys.indexOf(this.sortField); - console.log(sorted) const cellEles = [ colRef, ...this.docsWithDrag.docs @@ -497,7 +496,7 @@ export class CollectionSchemaView extends CollectionSubView() { highlightSortedColumn = (field?: string, descending?: boolean) => { let index = -1; let highlightColors: string[] = []; - const rowCount: number = this._rowEles.size + 1; + const rowCount: number = this._docs.length + 1; if (field || this.sortField){ index = this.columnKeys.indexOf(field || this.sortField); const increment: number = 100/rowCount; @@ -530,7 +529,6 @@ export class CollectionSchemaView extends CollectionSubView() { getCellElement = (doc: Doc, fieldKey: string) => { const index = this.columnKeys.indexOf(fieldKey); - console.log(doc.title) const cell = this._rowEles.get(doc).children[1].children[index]; return cell; } diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 5f758683d..3af3b1d61 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -22,8 +22,10 @@ export class SchemaCellField extends ObservableReactComponent void; @observable _editing: boolean = false; + @observable _displayedContent = ''; constructor(props: SchemaCellFieldProps) { super(props); @@ -50,12 +52,14 @@ export class SchemaCellField extends ObservableReactComponent) { super.componentDidUpdate(prevProps); if (this._editing && this._props.editing === false) { - this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false); + this.finalizeEdit(false, true, false); } else runInAction(() => { if (this._props.editing !== undefined) this._editing = this._props.editing; @@ -65,9 +69,14 @@ export class SchemaCellField extends ObservableReactComponent { + this._displayedContent = content; + }; + @action setIsFocused = (value: boolean) => { const wasFocused = this._editing; @@ -75,7 +84,52 @@ export class SchemaCellField extends ObservableReactComponent) => { + get cursorPosition() { + const selection = window.getSelection(); + if (!selection || selection.rangeCount === 0 || !this._inputref) return null; + + const range = selection.getRangeAt(0); + const adjRange = range.cloneRange(); + + adjRange.selectNodeContents(this._inputref); + adjRange.setEnd(range.startContainer, range.startOffset); + + return adjRange.toString().length; + } + + restoreCursorPosition = (position: number | null) => { + const selection = window.getSelection(); + if (!selection || position === null || !this._inputref) return; + + const range = document.createRange(); + range.setStart(this._inputref, 0); + range.collapse(true); + + let currentPos = 0; + const setRange = (nodes: NodeList) => { + for (let i = 0; i < nodes.length; ++i) { + const node = nodes[i]; + + if (node.nodeType === Node.TEXT_NODE) { + if (!node.textContent) return; + const nextPos = currentPos + node.textContent.length; + if (position <= nextPos) { + range.setStart(node, position - currentPos); + range.collapse(true); + selection.removeAllRanges(); + selection.addRange(range); + return true; + } + currentPos = nextPos; + + } else if ((node.nodeType === Node.ELEMENT_NODE) && (setRange(node.childNodes))) return true; + } + return false; + } + }; + + onChange = (e: FormEvent) => { + const cursorPos = this.cursorPosition; const targVal = e.currentTarget.innerText; if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { this._overlayDisposer?.(); @@ -83,6 +137,9 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); } + this._content = targVal; + this.setContent(targVal); + setTimeout(() => this.restoreCursorPosition(cursorPos), 0); this._props.highlightCells?.(targVal); }; @@ -92,7 +149,7 @@ export class SchemaCellField extends ObservableReactComponent : this.props.contents ? this._props.contents?.valueOf() : '' } - } + }; renderEditor = () => { return ( -
{ this._inputref = r; }} style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} - onBlur={e => this.finalizeEdit(this._inputref ? this._inputref.innerText : '', false, true, false)} + onBlur={e => this.finalizeEdit(false, true, false)} autoFocus onInput={this.onChange} onKeyDown={this.onKeyDown} onPointerDown={e => e.stopPropagation} onClick={e => e.stopPropagation} onPointerUp={e => e.stopPropagation} + dangerouslySetInnerHTML={{ __html: `${this._displayedContent}` }} >
); - } + }; render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); if ((this._editing && gval !== undefined)) { - return
{this.renderEditor()}
; + return
{this.renderEditor()}
; } else return ( this._props.contents instanceof ObjectField ? null : (
- selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} @@ -251,7 +251,6 @@ export class SchemaTableCell extends ObservableReactComponent Date: Thu, 20 Jun 2024 14:33:28 -0400 Subject: some progress on eq text highlighting --- .../collectionSchema/CollectionSchemaView.scss | 5 +++ .../collectionSchema/CollectionSchemaView.tsx | 4 ++- .../collectionSchema/SchemaCellField.tsx | 37 +++++++++++++++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 6 ++++ .../collectionSchema/SchemaTableCell.tsx | 6 +++- 5 files changed, 48 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index d1f1e3a13..6b53eb1cc 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -313,3 +313,8 @@ } } +.schemaField-editing { + outline: none; +} + + diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index c287b7d44..5c8a84163 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) => { + findCellRefs = (text: string, retRawMatches?: boolean) => { const pattern = /(this|d(\d+))\.(\w+)/g; interface Match { docRef: string; field: string; } @@ -545,6 +545,8 @@ 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; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 3af3b1d61..4ba8c8469 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -15,6 +15,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[] | []; } @observer @@ -72,10 +73,25 @@ export class SchemaCellField extends ObservableReactComponent { + const matches = this._props.func(content, true); + const cells = this._props.func(content, false); + let chunkedText = content; + let matchNum = 0; + matches.forEach((docRef, field) => { + console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop) + chunkedText = chunkedText.replace(`d5.type`, `d5.type`); + ++matchNum; + }) + return chunkedText; + } + @action setContent = (content: string) => { - this._displayedContent = content; - }; + console.log(this.chunkContent(content)); + this._displayedContent = this.chunkContent(content); + console.log('displayed: ' + this._displayedContent); + } @action setIsFocused = (value: boolean) => { @@ -126,10 +142,13 @@ export class SchemaCellField extends ObservableReactComponent) => { const cursorPos = this.cursorPosition; + const prevVal = this._content; const targVal = e.currentTarget.innerText; if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { this._overlayDisposer?.(); @@ -138,8 +157,10 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); } this._content = targVal; - this.setContent(targVal); - setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) { + this.setContent(targVal); + setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + } this._props.highlightCells?.(targVal); }; @@ -208,15 +229,15 @@ export class SchemaCellField extends ObservableReactComponent : this.props.contents ? this._props.contents?.valueOf() : '' } - }; + } renderEditor = () => { return (
{ this._inputref = r; }} - style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} + style={{ outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} onBlur={e => this.finalizeEdit(false, true, false)} autoFocus onInput={this.onChange} @@ -228,7 +249,7 @@ export class SchemaCellField extends ObservableReactComponent
); - }; + } render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 4902a49ff..121605a2b 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -122,6 +122,10 @@ 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, raw: boolean) => {return this.schemaView.findCellRefs(text, raw)}; render() { return (
() {
{this.schemaView?.columnKeys?.map((key, index) => ( boolean; isolatedSelection: [boolean, boolean]; highlightCells: (text: string) => void; + equationHighlightRef: ObservableMap; + func: (text: string, raw: boolean) => HTMLDivElement[] | []; + } function selectedCell(props: SchemaTableCellProps) { @@ -179,6 +182,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 From 83a2f119bf908d07e08ac89171e73d2211e1eb8f Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 20 Jun 2024 17:50:00 -0400 Subject: eq highlight working 70% --- .../collectionSchema/SchemaCellField.tsx | 35 +++++++++++++++------- .../collections/collectionSchema/SchemaRowBox.tsx | 2 +- .../collectionSchema/SchemaTableCell.tsx | 1 + 3 files changed, 27 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 4ba8c8469..6663fb68f 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -6,12 +6,15 @@ import { DocumentIconContainer } from "../../nodes/DocumentIcon"; import React, { FormEvent } from "react"; import { FieldView, FieldViewProps } from "../../nodes/FieldView"; import { ObjectField } from "../../../../fields/ObjectField"; +import { Doc } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; export interface SchemaCellFieldProps { contents: any; fieldContents?: FieldViewProps; editing?: boolean; oneLine?: boolean; + Document: Doc; highlightCells?: (text: string) => void; GetValue(): string | undefined; SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; @@ -33,7 +36,11 @@ export class SchemaCellField extends ObservableReactComponent this._editing, editing => { @@ -43,6 +50,7 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); this._props.highlightCells?.(this._props.GetValue() ?? ''); + this.setContent(this._content); } }); } else { @@ -53,8 +61,6 @@ export class SchemaCellField extends ObservableReactComponent) { @@ -74,13 +80,24 @@ export class SchemaCellField extends ObservableReactComponent { - const matches = this._props.func(content, true); + const pattern = /(this|d(\d+))\.(\w+)/g; + interface Match { docRef: string; field: string; } + + const matches: Match[] = []; + let match: RegExpExecArray | null; + + while ((match = pattern.exec(content)) !== null) { + const docRef = match[1] === 'this' ? match[1] : match[2]; + matches.push({ docRef, field: match[3] }); + } + const cells = this._props.func(content, false); let chunkedText = content; let matchNum = 0; - matches.forEach((docRef, field) => { - console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop) - chunkedText = chunkedText.replace(`d5.type`, `d5.type`); + matches.forEach((match: Match) => { + const {docRef, field} = match; + // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef; + chunkedText = chunkedText.replace(`d${docRef}.${field}`, `d${docRef}.${field}`); ++matchNum; }) return chunkedText; @@ -88,9 +105,7 @@ export class SchemaCellField extends ObservableReactComponent { - console.log(this.chunkContent(content)); this._displayedContent = this.chunkContent(content); - console.log('displayed: ' + this._displayedContent); } @action @@ -157,11 +172,11 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); } this._content = 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); } - this._props.highlightCells?.(targVal); }; @action @@ -245,7 +260,7 @@ export class SchemaCellField extends ObservableReactComponent e.stopPropagation} onClick={e => e.stopPropagation} onPointerUp={e => e.stopPropagation} - dangerouslySetInnerHTML={{ __html: `${this._displayedContent}` }} + dangerouslySetInnerHTML={{ __html: this._displayedContent }} >
); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 121605a2b..c0ad95141 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -131,7 +131,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
this.setCursorIndex(e.clientY)} - style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} + style={{ height: this._props.PanelHeight()}} ref={(row: HTMLDivElement | null) => { 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 74ee46065..3233e363a 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -181,6 +181,7 @@ export class SchemaTableCell extends ObservableReactComponent selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} -- cgit v1.2.3-70-g09d2 From 24fad06cbd2e273bb6729f21956e35243e602bb7 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 21 Jun 2024 12:37:47 -0400 Subject: fixed bug where equation didn't save in cell field on reloading (batching issue) --- .../views/collections/collectionSchema/CollectionSchemaView.tsx | 2 +- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 7 +++++-- src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 1 + 3 files changed, 7 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 6838662c7..308520154 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -587,7 +587,7 @@ export class CollectionSchemaView extends CollectionSubView() { const color = randomRGBColor(); const doc = info[0]; const field = info[1]; - const key = `${doc}_${field}`; + const key = `${doc[Id]}_${field}`; const cell = this.getCellElement(doc, field); if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, new Array(`solid 2px ${color[0]}`, color[1]))} cell.style.border = this._cellHighlightColors.get(key)[0]; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 6663fb68f..dcfa4f6f2 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -39,8 +39,10 @@ export class SchemaCellField extends ObservableReactComponent { + this._content = this._props.GetValue() ?? ''; + this.setContent(this._content); + }, 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, editing => { @@ -50,6 +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); } }); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 3233e363a..94fd9ec7d 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -152,6 +152,7 @@ export class SchemaTableCell extends ObservableReactComponent { + if (field === ':=d6.type + d4.type + d3.type') console.log(true) const idPattern = /idToDoc\((.*?)\)/g; let modField = field.slice(); let matches; -- cgit v1.2.3-70-g09d2 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/client/views/collections/collectionSchema/SchemaCellField.tsx') 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 From fc1fd8902b090b75c81347a37cce15145322b4e2 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 22 Jun 2024 23:55:38 -0400 Subject: moving row no longer messes up cell field (of course it was batching...) --- src/client/views/EditableView.tsx | 2 +- .../views/collections/collectionSchema/SchemaCellField.tsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 78977bcb8..8e48b4c11 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -193,7 +193,7 @@ export class EditableView extends ObservableReactComponent { @action onClick = (e?: React.MouseEvent) => { this._props.onClick && this._props.onClick(); - if (this._props.editing !== false) { + if (this._props.editing) { e?.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index e2aa27a95..ffda334ec 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -34,15 +34,17 @@ export class SchemaCellField extends ObservableReactComponent { + 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 } get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore componentDidMount(): void { - setTimeout(() => { - 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._unrenderedContent = this._props.GetValue() ?? ''; + this.setContent(this._unrenderedContent, true); this._disposers.editing = reaction( () => this._editing, editing => { -- cgit v1.2.3-70-g09d2 From 4c56da7db9feb018e004354bb6bf333d3890d91b Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 23 Jun 2024 00:12:31 -0400 Subject: text cursor icon in cell --- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index ffda334ec..08231dd91 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -280,7 +280,7 @@ export class SchemaCellField extends ObservableReactComponent { this._inputref = r; }} - style={{ outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} + style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} onBlur={e => this.finalizeEdit(false, true, false)} autoFocus onInput={this.onChange} -- cgit v1.2.3-70-g09d2 From 1775ceb9b840ab73194eb84e673ef692c1fef454 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 23 Jun 2024 00:25:19 -0400 Subject: drag text highlighting --- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 08231dd91..fc191014c 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -288,6 +288,7 @@ export class SchemaCellField extends ObservableReactComponent e.stopPropagation} onClick={e => e.stopPropagation} onPointerUp={e => e.stopPropagation} + onPointerMove={e => {e.stopPropagation(); e.preventDefault()}} dangerouslySetInnerHTML={{ __html: this._displayedContent }} >
-- cgit v1.2.3-70-g09d2 From 9fab1b3ac096138fba3a99a2515ec44b526a3956 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 23 Jun 2024 02:54:24 -0400 Subject: text highlight works with 'this.' format --- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 7 +++++-- src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 2 ++ src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 8 ++++---- 3 files changed, 11 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index fc191014c..aa6c382ef 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -53,7 +53,7 @@ export class SchemaCellField extends ObservableReactComponent { - // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef; + const adjMatch = match.replace('this.', `d${this.docIndex}`) chunkedText = chunkedText.replace(match, `${match}`); ++matchNum; }) diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index f4320dc09..45f178815 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -22,6 +22,7 @@ import { ContextMenu } from '../../ContextMenu'; import { CollectionFreeFormView } from '../collectionFreeForm'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState'; interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -129,6 +130,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { const info = this.schemaView.findCellRefs(text); const cells: HTMLDivElement[] = []; info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))}) + console.log('info: ' + info + ' cells: ' + cells); return cells; }; render() { diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index ab384a487..6ccada48c 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -144,10 +144,10 @@ export class SchemaTableCell extends ObservableReactComponent { + adjustSelfReference = (field: string) => { const pattern = /\bthis.\b/g; const modField = field.replace(pattern, `d${this.docIndex}.`); - this._props.highlightCells(modField); + return modField; } // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability @@ -183,8 +183,8 @@ export class SchemaTableCell extends ObservableReactComponent this._props.highlightCells(this.adjustSelfReference(text))} + getCells={(text: string) => this._props.func(this.adjustSelfReference(text))} ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} contents={undefined} -- cgit v1.2.3-70-g09d2 From b2691d6119dfa1f192ac6eb19650f44742b253f5 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 23 Jun 2024 03:36:21 -0400 Subject: col filling (really external setting of cell fieldval) works properly (reaction); moved 'remove doc' option to bottom of row menu --- .../collectionSchema/CollectionSchemaView.tsx | 6 +++--- .../collections/collectionSchema/SchemaCellField.tsx | 17 +++++++++++------ .../views/collections/collectionSchema/SchemaRowBox.tsx | 13 ++++++------- .../collections/collectionSchema/SchemaTableCell.tsx | 4 +--- 4 files changed, 21 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 9c4eda3b8..2a84efa7c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -829,9 +829,9 @@ export class CollectionSchemaView extends CollectionSubView() { this.closeColumnMenu(); }; - setCellValues = (key: string, value: string) => { - if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all - else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // else only fill selected cells + setColumnValues = (key: string, value: string) => { + if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); + else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); return true; }; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index aa6c382ef..e85bf75e6 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -36,7 +36,7 @@ export class SchemaCellField extends ObservableReactComponent { this._unrenderedContent = this._props.GetValue() ?? ''; - this.setContent(this._unrenderedContent, true); + this.setContent(this._unrenderedContent); }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function } @@ -65,6 +65,13 @@ export class SchemaCellField extends ObservableReactComponent this._props.GetValue(), + fieldVal => { + this._unrenderedContent = fieldVal ?? ''; + this.setContent(this._unrenderedContent); + } + ) } componentDidUpdate(prevProps: Readonly) { @@ -79,7 +86,7 @@ export class SchemaCellField extends ObservableReactComponent disposer?.()); this.finalizeEdit(false, true, false); } @@ -98,15 +105,12 @@ export class SchemaCellField extends ObservableReactComponent { const adjMatch = match.replace('this.', `d${this.docIndex}`) @@ -237,6 +241,8 @@ export class SchemaCellField extends ObservableReactComponent() { openContextMenu = (x: number, y: number) => { ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ - description: `Close doc`, - event: () => this.schemaView.removeDoc(this.Document), - icon: 'minus', - }); ContextMenu.Instance.addItem({ description: this.Document._lockedSchemaEditing ? 'Unlock field editing' : 'Lock field editing', event: () => this.Document._lockedSchemaEditing = !this.Document._lockedSchemaEditing, @@ -75,6 +70,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { event: () => this._props.addDocTab(this.Document, OpenWhere.addRight), icon: 'magnifying-glass', }); + ContextMenu.Instance.addItem({ + description: `Close doc`, + event: () => this.schemaView.removeDoc(this.Document), + icon: 'minus', + }); const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]) if (this.Document.type === 'collection' && childDocs.length) { ContextMenu.Instance.addItem({ @@ -119,7 +119,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl); deselectCell = () => this.schemaView?.deselectAllCells(); selectedCells = () => this.schemaView?._selectedDocs; - setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false; + setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); computeRowIndex = () => this.schemaView?.rowIndex(this.Document); highlightCells = (text: string) => this.schemaView?.highlightCells(text); @@ -130,7 +130,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { const info = this.schemaView.findCellRefs(text); const cells: HTMLDivElement[] = []; info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))}) - console.log('info: ' + info + ' cells: ' + cells); return cells; }; render() { diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 6ccada48c..aa8401502 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -145,14 +145,12 @@ export class SchemaTableCell extends ObservableReactComponent { - const pattern = /\bthis.\b/g; - const modField = field.replace(pattern, `d${this.docIndex}.`); + const modField = field.replace(/\bthis.\b/g, `d${this.docIndex}.`); return modField; } // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability cleanupField = (field: string) => { - if (field === ':=d6.type + d4.type + d3.type') console.log(true) const idPattern = /idToDoc\((.*?)\)/g; let modField = field.slice(); let matches; -- cgit v1.2.3-70-g09d2 From 9197630d59f4ae4624e3b47b794e0a5fa7bc080d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 24 Jun 2024 12:14:51 -0400 Subject: Work on persistent sort highlight + equation highlight inteeraction --- .../collectionSchema/CollectionSchemaView.tsx | 30 ++++++++++++---------- .../collectionSchema/SchemaCellField.tsx | 11 ++++---- 2 files changed, 23 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 2a84efa7c..018fd35b5 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -101,7 +101,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colBeingDragged: boolean = false; @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap>(); - @observable _highlightedCells: Array<[doc: Doc, field: string]> = []; + @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = []; @observable _cellHighlightColors: ObservableMap = new ObservableMap<[doc: Doc, field: string], string[]>(); @observable _docs: Doc[] = []; @@ -124,6 +124,10 @@ export class CollectionSchemaView extends CollectionSubView() { return selected; } + @computed get highlightedCells() { + return this._highlightedCellsInfo.map(info => this.getCellElement(info[0], info[1])); + } + @computed get documentKeys() { return Array.from(this.fieldInfos.keys()); } @@ -199,8 +203,8 @@ export class CollectionSchemaView extends CollectionSubView() { {fireImmediately: true} ) this._disposers.sortHighlight = reaction( - () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCells], - () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 5)}, + () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCellsInfo], + () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 0)}, {fireImmediately: true} ) } @@ -517,12 +521,15 @@ export class CollectionSchemaView extends CollectionSubView() { ]; const cellCount = cellEles.length; for (let ele = 0; ele < cellCount; ++ele){ + const toHighlight = cellEles[ele]; + if (!this.highlightedCells.includes(toHighlight)){ const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : ''; - cellEles[ele].style.borderLeft = style; - cellEles[ele].style.borderRight = style; + toHighlight.style.borderLeft = style; + toHighlight.style.borderRight = style; + } } cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : ''; - if (!(cellCount < rowCount)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; + if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; }); } @@ -557,11 +564,8 @@ export class CollectionSchemaView extends CollectionSubView() { } removeCellHighlights = () => { - this._highlightedCells.forEach(info => { - const cell = this.getCellElement(info[0], info[1]); - cell.style.border = ''; cell.style.backgroundColor = ''; - }); - this._highlightedCells = []; + this.highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';}); + this._highlightedCellsInfo = []; } highlightCells = (text: string) => { @@ -581,8 +585,8 @@ export class CollectionSchemaView extends CollectionSubView() { } const cellsToHighlight = this.findCellRefs(text); - this._highlightedCells = [...cellsToHighlight]; - this._highlightedCells.forEach(info => { + this._highlightedCellsInfo = [...cellsToHighlight]; + this._highlightedCellsInfo.forEach(info => { const color = randomRGBColor(); const doc = info[0]; const field = info[1]; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index e85bf75e6..ccd15cbd0 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -92,10 +92,6 @@ export class SchemaCellField extends ObservableReactComponent { let chunkedText = content; - chunkedText = chunkedText.replace(/ +/g, (match) => { - const spanSpaces = ' '.repeat(match.length); - return `${spanSpaces}`; - }); const pattern = /(this|d(\d+))\.(\w+)/g; const matches: string[] = []; @@ -123,6 +119,7 @@ export class SchemaCellField extends ObservableReactComponent { + console.log('content: ' + content) this._displayedContent = this.makeSpans(content); if (restoreCursorPos) { const cursorPos = this.cursorPosition; @@ -147,6 +144,8 @@ export class SchemaCellField extends ObservableReactComponent { this.setContent(this._unrenderedContent); - const cursorPos = this.cursorPosition; setTimeout(() => this.restoreCursorPosition(cursorPos), 0); } , 0); -- cgit v1.2.3-70-g09d2 From 227a289e49019ad1e9f634b098bb564bd4a8e743 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 24 Jun 2024 13:49:43 -0400 Subject: cell/column highlight interactions (maybe some minor bugs left but at least 95%) --- src/client/views/EditableView.tsx | 8 +--- .../collectionSchema/CollectionSchemaView.tsx | 44 +++++++++++++++------- .../collectionSchema/SchemaCellField.tsx | 24 ++++++++---- 3 files changed, 49 insertions(+), 27 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 8e48b4c11..0c09e12de 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -193,7 +193,7 @@ export class EditableView extends ObservableReactComponent { @action onClick = (e?: React.MouseEvent) => { this._props.onClick && this._props.onClick(); - if (this._props.editing) { + if (this._props.editing !== false) { e?.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); @@ -203,11 +203,7 @@ export class EditableView extends ObservableReactComponent { } } }; - - // checkForInvalidText = (text: string) => { - // const regX = new RegExp(new Array(...this._props.prohibitedText), 'g') - // } - + @action finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { //if (invalid) raise error diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 018fd35b5..48c34c647 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -102,8 +102,9 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap>(); @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = []; - @observable _cellHighlightColors: ObservableMap = new ObservableMap<[doc: Doc, field: string], string[]>(); + @observable _cellHighlightColors: ObservableMap = new ObservableMap(); @observable _docs: Doc[] = []; + @observable _inCellSelectMode: boolean = false; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -488,13 +489,13 @@ export class CollectionSchemaView extends CollectionSubView() { .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)) && !sorted) .map(doc => this._rowEles.get(doc).children[1].children[i]), ]; - !sorted && (cellEles[0].style.borderTop = edgeStyle); cellEles.forEach(ele => { - if (ele === cellEles[0] && sorted) return; + if (sorted || this.highlightedCells.includes(ele)) return; + ele.style.borderTop = ele === cellEles[0] ? edgeStyle : ''; ele.style.borderLeft = edgeStyle; ele.style.borderRight = edgeStyle; + ele.style.borderBottom = ele === cellEles.slice(-1)[0] ? edgeStyle : ''; }); - !sorted && (cellEles.slice(-1)[0].style.borderBottom = edgeStyle); }); highlightSortedColumn = (field?: string, descending?: boolean) => { @@ -521,15 +522,14 @@ export class CollectionSchemaView extends CollectionSubView() { ]; const cellCount = cellEles.length; for (let ele = 0; ele < cellCount; ++ele){ - const toHighlight = cellEles[ele]; - if (!this.highlightedCells.includes(toHighlight)){ + const currCell = cellEles[ele]; + if (this.highlightedCells.includes(currCell)) continue; const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : ''; - toHighlight.style.borderLeft = style; - toHighlight.style.borderRight = style; - } + currCell.style.borderLeft = style; + currCell.style.borderRight = style; } cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : ''; - if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; + if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index) && !this.highlightedCells.includes(cellEles[cellCount - 1])) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; }); } @@ -568,6 +568,20 @@ export class CollectionSchemaView extends CollectionSubView() { this._highlightedCellsInfo = []; } + restoreCellHighlights = () => { + this._highlightedCellsInfo.forEach(info => { + const doc = info[0]; + const field = info[1]; + const key = `${doc[Id]}_${field}`; + const cell = this.getCellElement(doc, field); + const color = this._cellHighlightColors.get(key)[0]; + cell.style.borderTop = color; + cell.style.borderLeft = color; + cell.style.borderRight = color; + cell.style.borderBottom = color; + }); + } + highlightCells = (text: string) => { this.removeCellHighlights(); @@ -690,10 +704,11 @@ export class CollectionSchemaView extends CollectionSubView() { colRef.style.borderTop = ''; this.childDocs.forEach(doc => { - 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 = ''; + const cell = this._rowEles.get(doc).children[1].children[i]; + if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) { + cell.style.borderLeft = ''; + cell.style.borderRight = ''; + cell.style.borderBottom = ''; } }); }); @@ -1178,6 +1193,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); this._draggedColIndex = newIndex || this._draggedColIndex; this.highlightSortedColumn(); //TODO: Make this more efficient + this.restoreCellHighlights(); !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(newIndex ?? this._draggedColIndex); } }; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index ccd15cbd0..e13763b45 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -1,4 +1,4 @@ -import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from "mobx"; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from "mobx"; import { ObservableReactComponent } from "../../ObservableReactComponent"; import { observer } from "mobx-react"; import { OverlayView } from "../../OverlayView"; @@ -30,6 +30,7 @@ export class SchemaCellField extends ObservableReactComponent void; @observable _editing: boolean = false; @observable _displayedContent = ''; + @observable _inCellSelectMode: boolean = false; constructor(props: SchemaCellFieldProps) { super(props); @@ -40,6 +41,10 @@ export class SchemaCellField extends ObservableReactComponent { + return `${text}` + } + makeSpans = (content: string) => { let chunkedText = content; @@ -109,8 +118,7 @@ export class SchemaCellField extends ObservableReactComponent { - const adjMatch = match.replace('this.', `d${this.docIndex}`) - chunkedText = chunkedText.replace(match, `${match}`); + chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match))); ++matchNum; }) @@ -222,8 +230,11 @@ export class SchemaCellField extends ObservableReactComponent 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/client/views/collections/collectionSchema/SchemaCellField.tsx') 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 From 434fe9b5f27a14dc7bddeea9628abe4aaa62ce21 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 25 Jun 2024 01:56:34 -0400 Subject: scrolling for field text --- src/client/views/EditableView.scss | 8 +++++++- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss index d2f11f5e1..fa4542ac4 100644 --- a/src/client/views/EditableView.scss +++ b/src/client/views/EditableView.scss @@ -3,11 +3,17 @@ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; - overflow: hidden; + overflow-y: auto; height: 100%; width: 100%; min-width: 20; text-overflow: ellipsis; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.editableView-container-editing::-webkit-scrollbar { + display: none; } .editableView-container-editing-oneLine { diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index ea46fb432..9d9fcbd1f 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -94,6 +94,10 @@ export class SchemaCellField extends ObservableReactComponent { return `${text}` } -- cgit v1.2.3-70-g09d2 From 3809bb004617a20fd631388d9cf404fa34c3ad52 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 25 Jun 2024 02:57:44 -0400 Subject: refselect consistency --- .../collectionSchema/SchemaCellField.tsx | 24 +++++++++++++--------- 1 file changed, 14 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 9d9fcbd1f..84b4d3462 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -45,6 +45,16 @@ export class SchemaCellField extends ObservableReactComponent 0; --i) { + if (text.charCodeAt(i) !== 160 && text.charCodeAt(i) !== 32) { + return text[i]; + } + } + return null; + } + componentDidMount(): void { this._unrenderedContent = this._props.GetValue() ?? ''; this.setContent(this._unrenderedContent, true); @@ -94,10 +104,6 @@ export class SchemaCellField extends ObservableReactComponent { return `${text}` } @@ -215,6 +221,9 @@ export class SchemaCellField extends ObservableReactComponent { @@ -247,12 +256,8 @@ export class SchemaCellField extends ObservableReactComponent { @@ -263,13 +268,11 @@ export class SchemaCellField extends ObservableReactComponent Date: Tue, 25 Jun 2024 12:10:05 -0400 Subject: focus is no longer lost --- src/client/util/SelectionManager.ts | 1 + .../collectionSchema/CollectionSchemaView.tsx | 26 ++++++++++++---------- .../collectionSchema/SchemaCellField.tsx | 11 ++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 3 +++ .../collectionSchema/SchemaTableCell.tsx | 8 +++++++ 5 files changed, 32 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 0b942116c..fc494583f 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -58,6 +58,7 @@ export class SelectionManager { }); public static DeselectAll = (except?: Doc): void => { + const found = this.Instance.SelectedViews.find(dv => dv.Document === except); runInAction(() => { if (LinkManager.Instance) { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index c3dc4bad6..3b5a32ca7 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -634,6 +634,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action clearSelection = () => { + if (this._referenceSelectMode.enabled) return; DocumentView.DeselectAll(); this.deselectAllCells(); }; @@ -651,20 +652,19 @@ export class CollectionSchemaView extends CollectionSubView() { } }; - @action - selectCell = (doc: Doc | undefined, col: number, shiftKey: boolean, ctrlKey: boolean) => { + selectReference = (doc: Doc | undefined, col: number) => { if (!doc) return; + 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; + } - 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; - } - + @action + selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => { this.closeColumnMenu(); if (!shiftKey && !ctrlKey) this.clearSelection(); !this._selectedCells && (this._selectedCells = []); @@ -687,12 +687,14 @@ export class CollectionSchemaView extends CollectionSubView() { @action deselectCell = (doc: Doc) => { + console.log('single deselect called') this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d))); }; @action deselectAllCells = () => { + console.log('deselectall called') this._selectedCells = []; this._lowestSelectedIndex = -1; }; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 84b4d3462..06d3926a8 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -62,6 +62,7 @@ export class SchemaCellField extends ObservableReactComponent this._editing, editing => { if (editing) { + if (this.lastChar !== '+') this.setupRefSelect(false); setTimeout(() => { if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) { this._overlayDisposer?.(); @@ -145,8 +146,8 @@ export class SchemaCellField extends ObservableReactComponent { - this._unrenderedContent += text; - this.setContent(this._unrenderedContent); + const newText = this._unrenderedContent.concat(text); + this.onChange(undefined, newText); } @action @@ -209,9 +210,9 @@ export class SchemaCellField extends ObservableReactComponent) => { + onChange = (e: FormEvent | undefined, newText?: string) => { const prevVal = this._unrenderedContent; - const targVal = e.currentTarget.innerText; + const targVal = newText ?? e!.currentTarget.innerText; // TODO: bang if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { this._overlayDisposer?.(); this._overlayDisposer = undefined; @@ -319,7 +320,7 @@ export class SchemaCellField extends ObservableReactComponent { this._inputref = r; }} style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }} - onBlur={e => this.finalizeEdit(false, true, false)} + onBlur={e => {this._props.refSelectModeInfo.enabled ? setTimeout(() => {this.setIsFocused(true)}, 1000) : this.finalizeEdit(false, true, false)}} autoFocus onInput={this.onChange} onKeyDown={this.onKeyDown} diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index b15804d41..3f5c2a90e 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -23,6 +23,7 @@ import { CollectionFreeFormView } from '../collectionFreeForm'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState'; +import { TbShieldX } from 'react-icons/tb'; interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -127,6 +128,7 @@ 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); + selectReference = (doc: Doc, col: number) => {this.schemaView.selectReference(doc, col)} eqHighlightFunc = (text: string) => { const info = this.schemaView.findCellRefs(text); const cells: HTMLDivElement[] = []; @@ -175,6 +177,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{this.schemaView?.columnKeys?.map((key, index) => ( ; func: (text: string) => HTMLDivElement[] | []; refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined}; + selectReference: (doc: Doc, col: number) => void; } function selectedCell(props: SchemaTableCellProps) { @@ -254,6 +255,13 @@ export class SchemaTableCell extends ObservableReactComponent StopEvent(e)} onPointerDown={action(e => { + if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)){ + e.stopPropagation(); + e.preventDefault(); + this._props.selectReference(this._props.Document, this._props.col); + return; + } + const shift: boolean = e.shiftKey; const ctrl: boolean = e.ctrlKey; if (this._props.isRowActive?.()) { -- cgit v1.2.3-70-g09d2 From aad1ca740bcbad129dc23a5d8f71e3caae787d43 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 25 Jun 2024 12:26:00 -0400 Subject: cursor position reset properly, appendtext has atCursor option --- .../collectionSchema/CollectionSchemaView.tsx | 2 +- .../collections/collectionSchema/SchemaCellField.tsx | 20 +++++++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 3b5a32ca7..32106e3be 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -658,7 +658,7 @@ export class CollectionSchemaView extends CollectionSubView() { 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?.appendText(refToAdd, true); editedField?.setupRefSelect(false); return; } diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 06d3926a8..8c4c1cd76 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -45,8 +45,10 @@ export class SchemaCellField extends ObservableReactComponent 0; --i) { if (text.charCodeAt(i) !== 160 && text.charCodeAt(i) !== 32) { return text[i]; @@ -62,7 +64,7 @@ export class SchemaCellField extends ObservableReactComponent this._editing, editing => { if (editing) { - if (this.lastChar !== '+') this.setupRefSelect(false); + if (this.lastCharBeforeCursor !== '+') this.setupRefSelect(false); setTimeout(() => { if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) { this._overlayDisposer?.(); @@ -145,9 +147,13 @@ export class SchemaCellField extends ObservableReactComponent { - const newText = this._unrenderedContent.concat(text); + appendText = (text: string, atCursorPos?: boolean) => { + const content = this._unrenderedContent; + const cursorPos = this.cursorPosition; + const robustPos = cursorPos ?? content.length; + const newText = atCursorPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text); this.onChange(undefined, newText); + setTimeout(() => this.restoreCursorPosition(robustPos + text.length), 0); } @action @@ -222,8 +228,8 @@ export class SchemaCellField extends ObservableReactComponent Date: Tue, 25 Jun 2024 13:17:54 -0400 Subject: enhanced refselect logic --- .../collectionSchema/CollectionSchemaView.tsx | 3 --- .../collectionSchema/SchemaCellField.tsx | 28 +++++++++++----------- 2 files changed, 14 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 32106e3be..583829d6c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -296,7 +296,6 @@ export class CollectionSchemaView extends CollectionSubView() { break; } case 'P': { - console.log(this._cellHighlightColors) break; } default: @@ -687,14 +686,12 @@ export class CollectionSchemaView extends CollectionSubView() { @action deselectCell = (doc: Doc) => { - console.log('single deselect called') this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc)); if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d))); }; @action deselectAllCells = () => { - console.log('deselectall called') this._selectedCells = []; this._lowestSelectedIndex = -1; }; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 8c4c1cd76..72d89adc3 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -57,6 +57,11 @@ export class SchemaCellField extends ObservableReactComponent this._editing, editing => { if (editing) { - if (this.lastCharBeforeCursor !== '+') this.setupRefSelect(false); + this.setupRefSelect(this.refSelectConditionMet); setTimeout(() => { if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) { this._overlayDisposer?.(); this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); this._props.highlightCells?.(this._unrenderedContent); - this.setContent(this._unrenderedContent, true); + this.setContent(this._unrenderedContent); + setTimeout(() => this.setCursorPosition(this._unrenderedContent.length), 0); } }); } else { @@ -139,11 +145,9 @@ export class SchemaCellField extends ObservableReactComponent { + const pos = this.cursorPosition; this._displayedContent = this.makeSpans(content); - if (restoreCursorPos) { - const cursorPos = this.cursorPosition; - setTimeout(() => this.restoreCursorPosition(cursorPos), 0); - } + restoreCursorPos && setTimeout(() => this.setCursorPosition(pos), 0); } @action @@ -153,7 +157,7 @@ export class SchemaCellField extends ObservableReactComponent this.restoreCursorPosition(robustPos + text.length), 0); + setTimeout(() => this.setCursorPosition(robustPos + text.length), 0); } @action @@ -173,12 +177,10 @@ export class SchemaCellField extends ObservableReactComponent { + setCursorPosition = (position: number | null) => { const selection = window.getSelection(); if (!selection || position === null || !this._inputref) return; @@ -228,9 +230,7 @@ export class SchemaCellField extends ObservableReactComponent { @@ -269,7 +269,7 @@ export class SchemaCellField extends ObservableReactComponent { this.setContent(this._unrenderedContent); - setTimeout(() => this.restoreCursorPosition(cursorPos), 0); + setTimeout(() => this.setCursorPosition(cursorPos), 0); } , 0); break; -- cgit v1.2.3-70-g09d2 From a9494a1959430ffb3f501ef59f699aabc3748c7d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 25 Jun 2024 13:49:35 -0400 Subject: changing cursor position updates refselectmode --- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 72d89adc3..7bdfaa587 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -219,6 +219,7 @@ export class SchemaCellField extends ObservableReactComponent | undefined, newText?: string) => { + console.log('onchange called') const prevVal = this._unrenderedContent; const targVal = newText ?? e!.currentTarget.innerText; // TODO: bang if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { @@ -230,6 +231,7 @@ export class SchemaCellField extends ObservableReactComponent this.setupRefSelect(this.refSelectConditionMet), 0) break; case ' ': e.stopPropagation(); @@ -330,7 +333,7 @@ export class SchemaCellField extends ObservableReactComponent e.stopPropagation} + onPointerDown={e => {e.stopPropagation(); setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0)}} //timeout callback ensures that refSelectMode is properly set onClick={e => e.stopPropagation} onPointerUp={e => e.stopPropagation} onPointerMove={e => {e.stopPropagation(); e.preventDefault()}} -- cgit v1.2.3-70-g09d2 From 830121ffc5d3d7ba9c5bd48771b6927d24dfce59 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 26 Jun 2024 13:10:47 -0400 Subject: removing 0s from settimeut + minor sorted col highlight color change --- .../collectionSchema/CollectionSchemaView.tsx | 4 ++-- .../collectionSchema/SchemaCellField.tsx | 22 +++++++++++++--------- 2 files changed, 15 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 583829d6c..57327a008 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -206,7 +206,7 @@ export class CollectionSchemaView extends CollectionSubView() { ) this._disposers.sortHighlight = reaction( () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCellsInfo], - () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 0)}, + () => {this.sortField && setTimeout(() => this.highlightSortedColumn())}, {fireImmediately: true} ) } @@ -505,7 +505,7 @@ export class CollectionSchemaView extends CollectionSubView() { if (field || this.sortField){ index = this.columnKeys.indexOf(field || this.sortField); const increment: number = 100/rowCount; - for (let i = 0; i < rowCount; ++i){ + for (let i = 1; i <= rowCount; ++i){ const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i); highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`); } diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 7bdfaa587..8e751f4ba 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -40,11 +40,13 @@ export class SchemaCellField extends ObservableReactComponent { this._unrenderedContent = this._props.GetValue() ?? ''; this.setContent(this._unrenderedContent); - }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function + }); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function } get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore + get selfRefPattern() {return `d${this.docIndex}.${this._props.fieldKey}`}; + @computed get lastCharBeforeCursor(){ const pos = this.cursorPosition; const content = this._unrenderedContent; @@ -76,7 +78,7 @@ export class SchemaCellField extends ObservableReactComponent, { x: 0, y: 0 }); this._props.highlightCells?.(this._unrenderedContent); this.setContent(this._unrenderedContent); - setTimeout(() => this.setCursorPosition(this._unrenderedContent.length), 0); + setTimeout(() => this.setCursorPosition(this._unrenderedContent.length)); } }); } else { @@ -114,7 +116,8 @@ export class SchemaCellField extends ObservableReactComponent { - return `${text}` + const selfRef = text === this.selfRefPattern; + return `${text}`; } makeSpans = (content: string) => { @@ -147,7 +150,7 @@ export class SchemaCellField extends ObservableReactComponent { const pos = this.cursorPosition; this._displayedContent = this.makeSpans(content); - restoreCursorPos && setTimeout(() => this.setCursorPosition(pos), 0); + restoreCursorPos && setTimeout(() => this.setCursorPosition(pos)); } @action @@ -157,7 +160,7 @@ export class SchemaCellField extends ObservableReactComponent this.setCursorPosition(robustPos + text.length), 0); + setTimeout(() => this.setCursorPosition(robustPos + text.length)); } @action @@ -219,7 +222,6 @@ export class SchemaCellField extends ObservableReactComponent | undefined, newText?: string) => { - console.log('onchange called') const prevVal = this._unrenderedContent; const targVal = newText ?? e!.currentTarget.innerText; // TODO: bang if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { @@ -231,7 +233,6 @@ export class SchemaCellField extends ObservableReactComponent { this.setContent(this._unrenderedContent); - setTimeout(() => this.setCursorPosition(cursorPos), 0); + setTimeout(() => this.setCursorPosition(cursorPos)); } , 0); break; @@ -298,7 +299,10 @@ export class SchemaCellField extends ObservableReactComponent Date: Wed, 26 Jun 2024 13:48:25 -0400 Subject: self-reference warning added --- src/client/views/collections/collectionSchema/SchemaCellField.tsx | 6 +++++- src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 2 +- src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 8e751f4ba..27ca37c2b 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -33,6 +33,7 @@ export class SchemaCellField extends ObservableReactComponent() { void; equationHighlightRef: ObservableMap; - func: (text: string) => HTMLDivElement[] | []; + eqHighlightFunc: (text: string) => HTMLDivElement[] | []; refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined}; selectReference: (doc: Doc, col: number) => void; } @@ -190,7 +190,7 @@ export class SchemaTableCell extends ObservableReactComponent this._props.highlightCells(this.adjustSelfReference(text))} - getCells={(text: string) => this._props.func(this.adjustSelfReference(text))} + getCells={(text: string) => this._props.eqHighlightFunc(this.adjustSelfReference(text))} ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} oneLine={this._props.oneLine} contents={undefined} -- cgit v1.2.3-70-g09d2 From 8ceaba8b8264f5519de732cc603dcd276b4b4f4d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 28 Jun 2024 01:49:10 -0400 Subject: header text no longer shifts left on hover --- src/client/documents/Documents.ts | 6 +++++ src/client/util/Scripting.ts | 9 ++++++-- .../collectionSchema/CollectionSchemaView.scss | 1 - .../collectionSchema/SchemaCellField.tsx | 4 +++- .../collectionSchema/SchemaColumnHeader.tsx | 6 ++--- .../collections/collectionSchema/SchemaRowBox.tsx | 6 +---- .../collectionSchema/SchemaTableCell.tsx | 26 +++++++++++++++++----- src/client/views/nodes/FieldView.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 2 +- 9 files changed, 43 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index dabbf9591..1b1608cd5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -143,7 +143,12 @@ class ListInfo extends FInfo { fieldType? = FInfoFieldType.list; values?: List[] = []; } +class MapInfo extends FInfo { + fieldType? = FInfoFieldType.list; + values?: List[] = []; +} type BOOLt = BoolInfo | boolean; +type MAPt = MapInfo | Map; type NUMt = NumInfo | number; type STRt = StrInfo | string; type LISTt = ListInfo | List; @@ -229,6 +234,7 @@ export class DocumentOptions { _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed'); _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false); _lockedSchemaEditing?: BOOLt = new BoolInfo("", false); + _schemaInputs?: LISTt = new ListInfo('user inputs to schema field', false) dataViz_title?: string; dataViz_line?: string; diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index 6ef592ef2..c7aa56c1e 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -183,14 +183,19 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde ); } +ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer()); +//addreturn = true +//capturedvariables = undefined +// + export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult { - const captured = options.capturedVariables ?? {}; + const captured = options.capturedVariables ?? {}; const signature = Object.keys(captured).reduce((p, v) => { const formatCapture = (obj: any) => `${v}=${obj instanceof RefField ? 'XXX' : obj.toString()}`; if (captured[v] instanceof Array) return p + (captured[v] as any).map(formatCapture); return p + formatCapture(captured[v]); }, ''); - const found = ScriptField.GetScriptFieldCache(script + ':' + signature); + const found = ScriptField.GetScriptFieldCache(script + ':' + signature); // if already compiled, found is the result; cache set below if (found) return found as CompiledScript; const { requiredType = '', addReturn = false, params = {}, capturedVariables = {}, typecheck = true } = options; if (options.params && !options.params.this) options.params.this = Doc.name; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 6b53eb1cc..425b67fa9 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -155,7 +155,6 @@ padding: 0; z-index: 1; border: 1px solid $medium-gray; - //overflow: hidden; .schema-column-title { flex-grow: 2; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 27ca37c2b..c7c483df8 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -321,11 +321,13 @@ export class SchemaCellField extends ObservableReactComponent + staticDisplay = () => { return { // eslint-disable-next-line react/jsx-props-no-spreading - this._props.fieldContents ? : this.props.contents ? this._props.contents?.valueOf() : '' + this._props.fieldContents ? : '' } } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index d16cde1f8..83a136737 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -237,11 +237,11 @@ export class SchemaColumnHeader extends ObservableReactComponent
this._props.resizeColumn(e, this._props.columnIndex)} /> -
{this.editableView}
+
{this.editableView}
-
- {this.displayButton ? this.headerButton : null} +
+ {this.headerButton}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index c9feeac6b..077d95c57 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -97,10 +97,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return '' } - @computed get refSelectModeInfo() { - return this.schemaView._referenceSelectMode; - } - @computed get menuInfos() { const infos: Array = []; if (this.Document._lockedSchemaEditing) infos.push('lock'); @@ -178,7 +174,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { {this.schemaView?.columnKeys?.map((key, index) => ( { // private _fieldRef: SchemaCellField | null = null; + private _submittedValue: string = ''; constructor(props: SchemaTableCellProps) { super(props); @@ -157,19 +159,31 @@ export class SchemaTableCell extends ObservableReactComponent { - const idPattern = /idToDoc\((.*?)\)/g; let modField = field.slice(); + let eqSymbol: string = ''; + if (modField.startsWith('=')) {modField = modField.substring(1); eqSymbol += '=';} + if (modField.startsWith(':=')) {modField = modField.substring(2); eqSymbol += ':=';} + + const idPattern = /idToDoc\((.*?)\)/g; let matches; let results = new Array<[id: string, func: string]>(); while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); } results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());}) - if (modField.charAt(modField.length - 1) === ';') modField = modField.substring(0, modField.length - 1); + + for (let i = 0; i < modField.length; ++i){ + + } + + if (modField.endsWith(';')) modField = modField.substring(0, modField.length - 1); + + const inQuotes = (field: string) => {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))} + if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1); const selfRefPattern = `d${this.docIndex}.${this._props.fieldKey}` const selfRefRegX = RegExp(selfRefPattern, 'g'); if (selfRefRegX.exec(modField) !== null) { return 'Invalid'} - return modField; + return eqSymbol + modField; } @computed get defaultCellContent() { @@ -196,7 +210,8 @@ export class SchemaTableCell extends ObservableReactComponent this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} + ////const script = ScriptCast(fieldProps.Document[this._props.fieldKey]).rawscript; + GetValue={() => ScriptCast(fieldProps.Document[this._props.fieldKey])?.rawscript ?? ''} SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); @@ -205,6 +220,7 @@ export class SchemaTableCell extends ObservableReactComponent { const field = this.fieldval; // prettier-ignore if (field instanceof Doc) return

{field.title?.toString()}

; - if (field === undefined) return

{''}

; + if (field === undefined) return

{''}

; if (field instanceof DateField) return

{field.date.toLocaleString()}

; if (field instanceof List) return
{field.map(f => Field.toString(f)).join(', ')}
; if (field instanceof WebField) return

{Field.toString(field.url.href)}

; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 66e210c03..bc6633f23 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -88,7 +88,7 @@ export class KeyValueBox extends ViewBoxBaseComponent() { const type: 'computed' | 'script' | false = rawvalue.startsWith(':=') ? 'computed' : rawvalue.startsWith('$=') ? 'script' : false; rawvalue = type ? rawvalue.substring(2) : rawvalue; rawvalue = rawvalue.replace(/.*\(\((.*)\)\)/, 'dashCallChat(_setCacheResult_, this, `$1`)'); - const value = ["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any) ? rawvalue : '`' + rawvalue + '`'; + const value = (["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any)) ? rawvalue : '`' + rawvalue + '`'; let script = ScriptField.CompileScript(rawvalue, {}, true, undefined, DocumentIconContainer.getTransformer()); if (!script.compiled) { -- cgit v1.2.3-70-g09d2 From 3dd0a92767972736f415341c0b6e06e6e3a242b1 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Mon, 1 Jul 2024 16:38:24 -0400 Subject: highlighting then un-highlighting a selected cell with equations now properly maintains original select highlight --- src/client/views/EditableView.tsx | 1 - .../collectionSchema/CollectionSchemaView.tsx | 19 +++++++++++++++---- .../collections/collectionSchema/SchemaCellField.tsx | 8 ++++++-- .../collections/collectionSchema/SchemaRowBox.tsx | 13 ++----------- .../collections/collectionSchema/SchemaTableCell.tsx | 10 +++------- 5 files changed, 26 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 0c09e12de..af6a43555 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -206,7 +206,6 @@ export class EditableView extends ObservableReactComponent { @action finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { - //if (invalid) raise error if (this._props.SetValue(value, shiftDown, enterKey)) { this._editing = false; this._props.isEditingCallback?.(false); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 7a90b3505..b81cfa821 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -606,12 +606,24 @@ export class CollectionSchemaView extends CollectionSubView() { return cells; } + selectionOverlap = (doc: Doc): [boolean, boolean] => { + const docs = this.docsWithDrag.docs; + const index = this.rowIndex(doc); + const selectedBelow: boolean = this._selectedDocs.includes(docs[index + 1]); + const selectedAbove: boolean = this._selectedDocs.includes(docs[index - 1]); + return [selectedAbove, selectedBelow]; + } + removeCellHighlights = () => { this._highlightedCellsInfo.forEach(info => { const doc = info[0]; const field = info[1]; const cell = this.getCellElement(doc, field); - if (!(this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field))) cell.style.border = ''; + if (this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field)) { + cell.style.border = `solid 2px ${Colors.MEDIUM_BLUE}`; + if (this.selectionOverlap(doc)[0]) cell.style.borderTop = ''; + if (this.selectionOverlap(doc)[1]) cell.style.borderBottom = ''; + } else cell.style.border = ''; cell.style.backgroundColor = '';}); this._highlightedCellsInfo = []; } @@ -741,7 +753,6 @@ export class CollectionSchemaView extends CollectionSubView() { @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { - console.log('called') if (de.complete.columnDragData) { setTimeout(() => {this.setColDrag(false);}); e.stopPropagation(); @@ -881,8 +892,8 @@ export class CollectionSchemaView extends CollectionSubView() { this.closeColumnMenu(); }; - setColumnValues = (key: string, value: string) => { - if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); + setCellValues = (key: string, value: string) => { + if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); return true; }; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index c7c483df8..e1059b8fc 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -95,7 +95,7 @@ export class SchemaCellField extends ObservableReactComponent this._props.GetValue(), fieldVal => { this._unrenderedContent = fieldVal ?? ''; - this.setContent(this._unrenderedContent); + this.finalizeEdit(false, false, false); } ) } @@ -246,6 +246,10 @@ export class SchemaCellField extends ObservableReactComponent) => { if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here + // if (e.metaKey) { + // e.stopPropagation(); + // e.preventDefault(); + // } switch (e.key) { case 'Tab': e.stopPropagation(); @@ -302,7 +306,7 @@ export class SchemaCellField extends ObservableReactComponent() { return infos; } - @computed get isolatedSelection() { - const toReturn: [boolean, boolean] = [true, true]; - const docs = this.schemaView.docsWithDrag.docs; - const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex + 1]); - const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex - 1]); - toReturn[0] = selectedAbove; - toReturn[1] = selectedBelow; - return toReturn; - } - + isolatedSelection = (doc: Doc) => {return this.schemaView?.selectionOverlap(doc)}; 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); deselectCell = () => this.schemaView?.deselectAllCells(); selectedCells = () => this.schemaView?._selectedDocs; - setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false; + setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false; columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); computeRowIndex = () => this.schemaView?.rowIndex(this.Document); highlightCells = (text: string) => this.schemaView?.highlightCells(text); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 1f5684151..e2a05da7f 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -60,7 +60,7 @@ export interface SchemaTableCellProps { autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click rootSelected?: () => boolean; rowSelected: () => boolean; - isolatedSelection: [boolean, boolean]; + isolatedSelection: (doc: Doc) => [boolean, boolean]; highlightCells: (text: string) => void; equationHighlightRef: ObservableMap; eqHighlightFunc: (text: string) => HTMLDivElement[] | []; @@ -174,10 +174,6 @@ export class SchemaTableCell extends ObservableReactComponent {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))} if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1); - - const selfRefPattern = `d${this.docIndex}.${this._props.fieldKey}` - const selfRefRegX = RegExp(selfRefPattern, 'g'); - if (selfRefRegX.exec(modField) !== null) { return 'Invalid'} return eqSymbol + modField; } @@ -255,8 +251,8 @@ export class SchemaTableCell extends ObservableReactComponent = []; sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right - sides[2] = (!this._props.isolatedSelection[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top - sides[3] = (!this._props.isolatedSelection[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom + sides[2] = (!this._props.isolatedSelection(this._props.Document)[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top + sides[3] = (!this._props.isolatedSelection(this._props.Document)[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom return sides; } -- cgit v1.2.3-70-g09d2 From 32771d4b202a8552815c7f4459d5ac5142401292 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 3 Jul 2024 04:40:55 -0400 Subject: schemacell refactor started --- .../collectionSchema/SchemaCellField.tsx | 119 ++++++++++++++++++++- .../collectionSchema/SchemaTableCell.tsx | 2 +- 2 files changed, 116 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index e1059b8fc..5048bf899 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -8,6 +8,15 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView"; import { ObjectField } from "../../../../fields/ObjectField"; import { Doc } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; +import { date } from "serializr"; +import { createRoot } from "react-dom/client"; +import DatePicker from "react-datepicker"; +import { emptyFunction } from "../../../../Utils"; +import { DateField } from "../../../../fields/DateField"; + +enum EleType { + plainText, fieldReference, date, boolean +} export interface SchemaCellFieldProps { contents: any; @@ -34,6 +43,7 @@ export class SchemaCellField extends ObservableReactComponent) { + this.addReactComponents(); super.componentDidUpdate(prevProps); if (this._editing && this._props.editing === false) { this.finalizeEdit(false, true, false); @@ -116,12 +127,31 @@ export class SchemaCellField extends ObservableReactComponent { + addReactComponents = () => { + if (!this._inputref) return; + + const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); + + dateRefs.forEach(ref => { + const root = createRoot(ref); + root.render(); + }) + } + + generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => { const selfRef = text === this.selfRefPattern; - return `${text}`; + return ( + + {text} + + ); } makeSpans = (content: string) => { + const spans: JSX.Element[] = []; let chunkedText = content; const pattern = /(this|d(\d+))\.(\w+)/g; @@ -140,13 +170,89 @@ export class SchemaCellField extends ObservableReactComponent { - chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match))); + chunkedText = chunkedText.replace(match, ''); + spans.push(this.generateSpan(match, cells.get(match))); ++matchNum; }) + chunkedText = chunkedText.replace(/{{date}}/g, `placeholder text`); + console.log(chunkedText) + return chunkedText; } + verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => { + const pattern = /(this|d(\d+))\.(\w+)/g; + let matchedText: string = ''; + let matchedCell: HTMLDivElement | undefined = undefined; + let match: RegExpExecArray | null; + + while ((match = pattern.exec(text)) !== null) { + const cells = this._props.getCells(match[0]); + if (cells.length) { + matchedText = match[0]; + matchedCell = cells[0]; + } + } + + if (!matchedText && !matchedCell) return undefined; + else return [matchedText, matchedCell]; + } + + elementsFromText = (chunks: string[]): JSX.Element[] => { + const eles: any[] = []; + + chunks.forEach(text => { + const cellRef = this.verifyCellRef(text); + if (cellRef) { + eles.push(this.generateSpan(cellRef[0], cellRef[1])); + } else if (!text.replace('{{date}}', '')){ + eles.push(); + } else if (!text.replace('{{boolean}}', '')) { + eles.push(
boolean thing
); + } else { + eles.push({text}); + } + }); + + return eles; + } + + parseElements = () => { + let string: string = this._unrenderedContent; + if (string.startsWith(':')) string = string.slice(1); + if (string.startsWith('=')) string = string.slice(1); + + const chunks: string[] = []; + + let subStr: string = ''; + let currChar = ''; + for (let i = 0; i < string.length; i++){ + currChar = string[i]; + if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) { + chunks.push(subStr); + subStr = currChar; + } else { + subStr += currChar; + } + } + + if (subStr) {chunks.push(subStr)}; + + return this.elementsFromText(chunks); + } + + // ` | undefined) => { + // if ((value?.nativeEvent as any).shiftKey) { + // this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); + // } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); + // })} + // />` + @action setContent = (content: string, restoreCursorPos?: boolean) => { const pos = this.cursorPosition; @@ -235,6 +341,7 @@ export class SchemaCellField extends ObservableReactComponent { @@ -351,8 +458,12 @@ export class SchemaCellField extends ObservableReactComponent e.stopPropagation} onPointerUp={e => e.stopPropagation} onPointerMove={e => {e.stopPropagation(); e.preventDefault()}} - dangerouslySetInnerHTML={{ __html: this._displayedContent }} + suppressContentEditableWarning={true} + //dangerouslySetInnerHTML={{ __html: this._displayedContent }} > + {this.parseElements().map((ele, index) => { + return
{ele}
+ })}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index e2a05da7f..7d29e40cc 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent -
+
{pointerEvents === 'none' ? null : ( -- cgit v1.2.3-70-g09d2 From bb890c23b367374d9da7eb10d879ebbf48dc4e77 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 6 Jul 2024 02:31:27 -0400 Subject: wheel spinning --- .../collectionSchema/SchemaCellField.tsx | 44 +++++++++++----------- 1 file changed, 22 insertions(+), 22 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 5048bf899..3be9167fe 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -111,7 +111,6 @@ export class SchemaCellField extends ObservableReactComponent) { - this.addReactComponents(); super.componentDidUpdate(prevProps); if (this._editing && this._props.editing === false) { this.finalizeEdit(false, true, false); @@ -127,24 +126,25 @@ export class SchemaCellField extends ObservableReactComponent { - if (!this._inputref) return; + // addReactComponents = () => { + // if (!this._inputref) return; - const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); + // const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); - dateRefs.forEach(ref => { - const root = createRoot(ref); - root.render(); - }) - } + // dateRefs.forEach(ref => { + // const root = createRoot(ref); + // root.render(); + // }) + // } generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => { const selfRef = text === this.selfRefPattern; + const color: string | undefined = cell?.style.borderTop.replace('2px solid', ''); return ( + color: selfRef ? 'gray' : color}}> {text} ); @@ -176,7 +176,6 @@ export class SchemaCellField extends ObservableReactComponentplaceholder text`); - console.log(chunkedText) return chunkedText; } @@ -206,10 +205,10 @@ export class SchemaCellField extends ObservableReactComponent); - } else if (!text.replace('{{boolean}}', '')) { - eles.push(
boolean thing
); + } else if (text && !text.replace('{{boolean}}', '')) { + eles.push(boolean thing); } else { eles.push({text}); } @@ -218,8 +217,8 @@ export class SchemaCellField extends ObservableReactComponent { - let string: string = this._unrenderedContent; + parseElements = (content: string) => { + let string: string = content; if (string.startsWith(':')) string = string.slice(1); if (string.startsWith('=')) string = string.slice(1); @@ -229,7 +228,7 @@ export class SchemaCellField extends ObservableReactComponent { const pos = this.cursorPosition; - this._displayedContent = this.makeSpans(content); + this._displayedContent = content; + this._displayedElements = this.parseElements(content); restoreCursorPos && setTimeout(() => this.setCursorPosition(pos)); } @@ -339,9 +339,9 @@ export class SchemaCellField extends ObservableReactComponent this.parseElements(this._displayedContent).length) this.setContent(targVal, true); this.setupRefSelect(this.refSelectConditionMet); - console.log(this.parseElements()); + console.log(this.parseElements(targVal)); }; setupRefSelect = (enabled: boolean) => { @@ -461,8 +461,8 @@ export class SchemaCellField extends ObservableReactComponent - {this.parseElements().map((ele, index) => { - return
{ele}
+ {this._displayedElements.map((ele, index) => { + return {ele}; })}
); -- cgit v1.2.3-70-g09d2 From e7235baa7ed998908dec8bf48e4c244594aa76bb Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 8 Sep 2024 18:42:12 -0400 Subject: schema changes reverted --- .../collectionSchema/CollectionSchemaView.tsx | 3 +- .../collectionSchema/SchemaCellField.tsx | 123 +-------------------- .../collectionSchema/SchemaColumnHeader.tsx | 2 +- .../collections/collectionSchema/SchemaRowBox.tsx | 5 +- .../collectionSchema/SchemaTableCell.tsx | 2 +- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 9 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 7 files changed, 16 insertions(+), 130 deletions(-) (limited to 'src/client/views/collections/collectionSchema/SchemaCellField.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 12c342b9f..59ccec71f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -46,7 +46,6 @@ import { SchemaCellField } from './SchemaCellField'; import { threadId } from 'worker_threads'; import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox'; -// eslint-disable-next-line @typescript-eslint/no-var-requires const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore export const FInfotoColType: { [key: string]: ColumnType } = { @@ -1539,4 +1538,4 @@ class CollectionSchemaViewDocs extends React.Component ); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 3be9167fe..e1059b8fc 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -8,15 +8,6 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView"; import { ObjectField } from "../../../../fields/ObjectField"; import { Doc } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; -import { date } from "serializr"; -import { createRoot } from "react-dom/client"; -import DatePicker from "react-datepicker"; -import { emptyFunction } from "../../../../Utils"; -import { DateField } from "../../../../fields/DateField"; - -enum EleType { - plainText, fieldReference, date, boolean -} export interface SchemaCellFieldProps { contents: any; @@ -43,7 +34,6 @@ export class SchemaCellField extends ObservableReactComponent { - // if (!this._inputref) return; - - // const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder')); - - // dateRefs.forEach(ref => { - // const root = createRoot(ref); - // root.render(); - // }) - // } - - generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => { + generateSpan = (text: string, cell: HTMLDivElement | undefined) => { const selfRef = text === this.selfRefPattern; - const color: string | undefined = cell?.style.borderTop.replace('2px solid', ''); - return ( - - {text} - - ); + return `${text}`; } makeSpans = (content: string) => { - const spans: JSX.Element[] = []; let chunkedText = content; const pattern = /(this|d(\d+))\.(\w+)/g; @@ -170,93 +140,17 @@ export class SchemaCellField extends ObservableReactComponent { - chunkedText = chunkedText.replace(match, ''); - spans.push(this.generateSpan(match, cells.get(match))); + chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match))); ++matchNum; }) - chunkedText = chunkedText.replace(/{{date}}/g, `placeholder text`); - return chunkedText; } - verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => { - const pattern = /(this|d(\d+))\.(\w+)/g; - let matchedText: string = ''; - let matchedCell: HTMLDivElement | undefined = undefined; - let match: RegExpExecArray | null; - - while ((match = pattern.exec(text)) !== null) { - const cells = this._props.getCells(match[0]); - if (cells.length) { - matchedText = match[0]; - matchedCell = cells[0]; - } - } - - if (!matchedText && !matchedCell) return undefined; - else return [matchedText, matchedCell]; - } - - elementsFromText = (chunks: string[]): JSX.Element[] => { - const eles: any[] = []; - - chunks.forEach(text => { - const cellRef = this.verifyCellRef(text); - if (cellRef) { - eles.push(this.generateSpan(cellRef[0], cellRef[1])); - } else if (text && !text.replace('{{date}}', '')){ - eles.push(); - } else if (text && !text.replace('{{boolean}}', '')) { - eles.push(boolean thing); - } else { - eles.push({text}); - } - }); - - return eles; - } - - parseElements = (content: string) => { - let string: string = content; - if (string.startsWith(':')) string = string.slice(1); - if (string.startsWith('=')) string = string.slice(1); - - const chunks: string[] = []; - - let subStr: string = ''; - let currChar = ''; - for (let i = 0; i < string.length; i++){ - currChar = string[i]; - if (((string.charCodeAt(i) === 32 || string.charCodeAt(i) === 160) && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) { - chunks.push(subStr); - subStr = currChar; - } else { - subStr += currChar; - } - } - - if (subStr) {chunks.push(subStr)}; - - return this.elementsFromText(chunks); - } - - // ` | undefined) => { - // if ((value?.nativeEvent as any).shiftKey) { - // this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); - // } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? '')); - // })} - // />` - @action setContent = (content: string, restoreCursorPos?: boolean) => { const pos = this.cursorPosition; - this._displayedContent = content; - this._displayedElements = this.parseElements(content); + this._displayedContent = this.makeSpans(content); restoreCursorPos && setTimeout(() => this.setCursorPosition(pos)); } @@ -339,9 +233,8 @@ export class SchemaCellField extends ObservableReactComponent this.parseElements(this._displayedContent).length) this.setContent(targVal, true); + if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)}; this.setupRefSelect(this.refSelectConditionMet); - console.log(this.parseElements(targVal)); }; setupRefSelect = (enabled: boolean) => { @@ -458,12 +351,8 @@ export class SchemaCellField extends ObservableReactComponent e.stopPropagation} onPointerUp={e => e.stopPropagation} onPointerMove={e => {e.stopPropagation(); e.preventDefault()}} - suppressContentEditableWarning={true} - //dangerouslySetInnerHTML={{ __html: this._displayedContent }} + dangerouslySetInnerHTML={{ __html: this._displayedContent }} > - {this._displayedElements.map((ele, index) => { - return {ele}; - })}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 40509c41b..9f6478041 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -249,4 +249,4 @@ export class SchemaColumnHeader extends ObservableReactComponent ); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 72f5d8c25..ec94a8077 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -24,7 +24,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState'; import { TbShieldX } from 'react-icons/tb'; -import { DocumentType } from '../../../documents/DocumentTypes'; interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -78,7 +77,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { icon: 'minus', }); const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]) - if (childDocs.length) { + if (this.Document.type === 'collection' && childDocs.length) { ContextMenu.Instance.addItem({ description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema', event: () => { @@ -197,4 +196,4 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 7d29e40cc..e2a05da7f 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent -
+
{pointerEvents === 'none' ? null : ( diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index dcdd52c73..8273f3e09 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -375,7 +375,6 @@ export class DocCreatorMenu extends ObservableReactComponent { if (res && this._callCount === origCount) { this._suggestedTemplates = []; - this._GPTLoading = false; const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res); this.createGeneratedTemplates(templates, 500, 500); } @@ -714,7 +713,7 @@ export class DocCreatorMenu extends ObservableReactComponent { try { const renderedImages: Doc[] = await Promise.all( calls.map(async ([fieldNum, col]) => { - const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc; + const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc; const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT); console.log(sysPrompt, prompt); @@ -852,7 +851,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); if (res && this._callCount === origCount) { - this._GPTLoading = false; const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res); const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = []; @@ -889,7 +887,7 @@ export class DocCreatorMenu extends ObservableReactComponent { const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises); - setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) }); + setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates); this._GPTLoading = false }); }; @action setExpandedView = (info: {icon: ImageField, doc: Doc} | undefined) => { @@ -908,6 +906,7 @@ export class DocCreatorMenu extends ObservableReactComponent {
{this._expandedPreview ?
+
- -
-
- : -
-
-
-
Suggested Templates
- +
-
400 ? 'center' : ''}}> - {this._GPTLoading ? ( -
- -
- ) : ( - this._suggestedTemplates?.map(doc => - ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => -
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> - - - -
- ))} -
-
-
-
+ ) : ( +
+
+
+
Suggested Templates
+
- {this._GPTOpt ? GPTOptions : null } -
-
-
-
-
-
Your Templates
- -
-
400 ? 'center' : ''}}> -
this.testTemplate()}> - +
400 ? 'center' : '' }}> + {this._GPTLoading ? ( +
+ +
+ ) : ( + this._suggestedTemplates + ?.map(doc => ({ icon: ImageCast(doc.icon), doc })) + .filter(info => info.icon && info.doc) + .map(info => ( +
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> + + + +
+ )) + )} +
+
+
+ +
+ {this._GPTOpt ? GPTOptions : null} +
- {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { - if (renderedTemplates.includes(info.doc)) return undefined; - renderedTemplates.push(info.doc); - return (
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> - - -
- )})} +
400 ? 'center' : '' }}> +
this.testTemplate()}> + +
+ {this._templateDocs + .map(doc => ({ icon: ImageCast(doc.icon), doc })) + .filter(info => info.icon && info.doc) + .map(info => { + if (renderedTemplates.includes(info.doc)) return undefined; + renderedTemplates.push(info.doc); + return ( +
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> + + + +
+ ); + })} +
-
- } + )}
); } - get savedLayoutsPreviewContents(){ + get savedLayoutsPreviewContents() { return ( -
- {this._savedLayouts.map((layout, index) => -
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))} - > - {this.layoutPreviewContents(87, layout, true, index)} -
- )} +
+ {this._savedLayouts.map((layout, index) => ( +
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}> + {this.layoutPreviewContents(87, layout, true, index)} +
+ ))}
); } - @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input) }; - @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input) }; - @action updateColumns = (input: string) => { this._layout.columns = Number(input) }; + @action updateXMargin = (input: string) => { + this._layout.xMargin = Number(input); + }; + @action updateYMargin = (input: string) => { + this._layout.yMargin = Number(input); + }; + @action updateColumns = (input: string) => { + this._layout.columns = Number(input); + }; get layoutConfigOptions() { const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => { return ( -
-
- +
+
+
- func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/> + func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
); - } + }; switch (this._layout.type) { case LayoutType.Row: - return ( -
- {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')} -
- ); + return
{optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}
; case LayoutType.Column: - return ( -
- {optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')} -
- ); + return
{optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}
; case LayoutType.Grid: return ( -
+
{optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')} {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')} {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)} @@ -1072,9 +1131,7 @@ export class DocCreatorMenu extends ObservableReactComponent { // return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'}); // } - screenToLocalTransform = () => - this._props - .ScreenToLocalTransform(); + screenToLocalTransform = () => this._props.ScreenToLocalTransform(); layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => { const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate; @@ -1084,10 +1141,12 @@ export class DocCreatorMenu extends ObservableReactComponent { const docWidth: number = Number(doc._width); const docHeight: number = Number(doc._height); - const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;; + const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin; const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin; const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; - const scaledDown = (input: number) => {return input / (largerSpan / outerSpan * this._layoutPreviewScale)} + const scaledDown = (input: number) => { + return input / ((largerSpan / outerSpan) * this._layoutPreviewScale); + }; const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3)); return ( @@ -1114,220 +1173,275 @@ export class DocCreatorMenu extends ObservableReactComponent { // {null} // //
-
-
- - - {altLayout ? : null} + {altLayout ? ( + + ) : null}
- {
- {this._layout.type === LayoutType.Stacked ? -
- All -
: - this.docsToRender.map(num => -
this._dataViz?.setSpecialHighlightedRow(num)} - onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)} - className='docCreatorMenu-layout-preview-item' + { +
- {num} -
- )} - -
} + gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`, + gridTemplateRows: `${scaledDown(docHeight)}px`, + gridAutoRows: `${scaledDown(docHeight)}px`, + rowGap: `${scaledDown(layout.yMargin)}px`, + columnGap: `${scaledDown(layout.xMargin)}px`, + }}> + {this._layout.type === LayoutType.Stacked ? ( +
+ All +
+ ) : ( + this.docsToRender.map(num => ( +
this._dataViz?.setSpecialHighlightedRow(num)} + onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)} + className="docCreatorMenu-layout-preview-item" + style={{ + width: scaledDown(docWidth), + height: scaledDown(docHeight), + fontSize: fontSize, + }}> + {num} +
+ )) + )} +
+ }
); - } - - get optionsMenuContents(){ - const layoutEquals = (layout: DataVizTemplateLayout) => { + }; - } //TODO: ADD LATER + get optionsMenuContents() { + const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => { return ( -
this.setUpButtonClick(e, () => {specialFunc?.(); runInAction(() => this._layout.type = option)})}> + onPointerDown={e => + this.setUpButtonClick(e, () => { + specialFunc?.(); + runInAction(() => (this._layout.type = option)); + }) + }> {option}
); - } + }; const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => { - return (
-
- + return ( +
+
+ +
+ {manual ? ( + + ) : ( + + )}
- {manual ? : - - } -
); - } + ); + }; const repeatOptions = [0, 1, 2, 3, 4, 5]; return ( -
-
-
+
+
+
{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}
{layoutOption(LayoutType.Stacked)} - {layoutOption(LayoutType.Grid, undefined, () => {if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})} + {layoutOption(LayoutType.Grid, undefined, () => { + if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length)); + })} {layoutOption(LayoutType.Row)} {layoutOption(LayoutType.Column)} - {layoutOption(LayoutType.Custom, {borderBottom: `0px`})} + {layoutOption(LayoutType.Custom, { borderBottom: `0px` })}
-
- {this._layout.type ? this.layoutConfigOptions: null} - {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * .75) : null} - {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => ))} -
-
+ {this._layout.type ? this.layoutConfigOptions : null} + {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * 0.75) : null} + {selectionBox( + 60, + 20, + 'repeat', + undefined, + repeatOptions.map(num => ) + )} +
+
-
); } - get dashboardContents(){ + get dashboardContents() { const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge']; const fieldPanel = (field: Col) => { return ( -
-
- {`${field.title} Field`} -
-
-
-
Title
-