diff options
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/collections/collectionSchema/SchemaCellField.tsx | 11 |
2 files changed, 23 insertions, 18 deletions
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<Doc, Array<string>>(); - @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<SchemaCellFieldPro makeSpans = (content: string) => { let chunkedText = content; - chunkedText = chunkedText.replace(/ +/g, (match) => { - const spanSpaces = ' '.repeat(match.length); - return `<span>${spanSpaces}</span>`; - }); const pattern = /(this|d(\d+))\.(\w+)/g; const matches: string[] = []; @@ -123,6 +119,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro @action setContent = (content: string, restoreCursorPos?: boolean) => { + console.log('content: ' + content) this._displayedContent = this.makeSpans(content); if (restoreCursorPos) { const cursorPos = this.cursorPosition; @@ -147,6 +144,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro adjRange.selectNodeContents(this._inputref); adjRange.setEnd(range.startContainer, range.startOffset); + console.log(adjRange.toString().length) + return adjRange.toString().length; } @@ -228,9 +227,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro break; case ' ': e.stopPropagation(); + console.log('deteected') + let cursorPos = 0; + if (this.cursorPosition !== null) cursorPos = this.cursorPosition + 1; setTimeout(() => { this.setContent(this._unrenderedContent); - const cursorPos = this.cursorPosition; setTimeout(() => this.restoreCursorPosition(cursorPos), 0); } , 0); |