diff options
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 48 |
1 files changed, 33 insertions, 15 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d6d41c7c4..a4d7eae06 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -462,21 +462,27 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - highlightDropColumn = (e: PointerEvent) => { - e.stopPropagation(); - const mouseX = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY)[0]; - const index = this.findColDropIndex(mouseX); + highlightDraggedColumn = (index: number) => { this._colEles.forEach((colRef, i) => { - let leftStyle = ''; - let rightStyle = ''; - if (i + 1 === index) rightStyle = `solid 12px ${Colors.MEDIUM_BLUE}`; - if (i === index && i === 0) leftStyle = `solid 12px ${Colors.MEDIUM_BLUE}`; - colRef.style.borderLeft = leftStyle; - colRef.style.borderRight = rightStyle; - this.childDocs.forEach(doc => { - this._rowEles.get(doc).children[1].children[i].style.borderLeft = leftStyle; - this._rowEles.get(doc).children[1].children[i].style.borderRight = rightStyle; - }); + let edgeStyle = ''; + if (i === index) edgeStyle = `solid 2px ${Colors.MEDIUM_BLUE}`; + colRef.style.borderLeft = edgeStyle; + colRef.style.borderRight = edgeStyle; + colRef.style.borderTop = edgeStyle; + for (let doc = 0; doc < this.childDocs.length; ++doc){ + this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle; + this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle; + if (doc === this.childDocs.length - 1){ + this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle; + } + } + // this.childDocs.forEach(doc => { + // this._rowEles.get(doc).children[1].children[i].style.borderLeft = edgeStyle; + // this._rowEles.get(doc).children[1].children[i].style.borderRight = edgeStyle; + // if (i === this.childDocs.length - 1){ + // this._rowEles.get(doc).children[1].children[i].style.borderBottom = edgeStyle; + // } + // }); }); }; @@ -567,6 +573,18 @@ export class CollectionSchemaView extends CollectionSubView() { if (de.complete.columnDragData) { this._colBeingDragged = false; e.stopPropagation(); + + this._colEles.forEach((colRef, i) => { + colRef.style.borderLeft = ''; + colRef.style.borderRight = ''; + colRef.style.borderTop = ''; + colRef.style.borderBottom = ''; + this.childDocs.forEach(doc => { + 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 = ''; + }); + }); return true; } @@ -957,7 +975,7 @@ export class CollectionSchemaView extends CollectionSubView() { let newIndex = this.findColDropIndex(e.clientX); if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex); this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex; - console.log(newIndex) + this.highlightDraggedColumn(newIndex ?? this._draggedColIndex) } } |