selected cell moves with col; jitter on col move index 0 fixed

3 files changed, 31 insertions, 20 deletions

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index b913e05ad..62f391201 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -249,6 +249,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         if (this._visible) {
             const mselect = this.marqueeSelect();
             if (!e.shiftKey) {
+                console.log("marquee pointerup") //!!!
                 SelectionManager.DeselectAll(mselect.length ? undefined : this._props.Document);
             }
             const docs = mselect.length ? mselect : [this._props.Document];
@@ -373,6 +374,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
 
     @undoBatch
     pileup = action((e: KeyboardEvent | React.PointerEvent | undefined) => {
+        console.log("pileup")//!!!
         const selected = this.marqueeSelect(false);
         SelectionManager.DeselectAll();
         selected.forEach(d => this._props.removeDocument?.(d));
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index a4d7eae06..7067aed5a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -373,6 +373,9 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @undoBatch
     moveColumn = (fromIndex: number, toIndex: number) => {
+        console.log("from: " + fromIndex + " to: " + toIndex)
+        if (toIndex === this._selectedCol) this._selectedCol = fromIndex; //keeps selected cell consistent
+
         let currKeys = this.columnKeys.slice();
         currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
@@ -380,6 +383,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         let currWidths = this.storedColumnWidths.slice();
         currWidths.splice(toIndex, 0, currWidths.splice(fromIndex, 1)[0]);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths);
+
+        this._draggedColIndex = toIndex;
     };
 
     @action
@@ -466,23 +471,23 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._colEles.forEach((colRef, i) => {
             let edgeStyle = '';
             if (i === index) edgeStyle = `solid 2px ${Colors.MEDIUM_BLUE}`;
+
+            //border styles of menu cell
             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;
+                if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])){
+                    continue;
+                } else {
+                    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;
-            //     }
-            // });
         });
     };
 
@@ -502,11 +507,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => {
         const rowDocView = DocumentManager.Instance.getDocumentView(doc);
         if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection);
-        else console.log("nonexistent")
     };
 
     @action
     clearSelection = () => {
+        //console.log("clear selection") //!!!
         SelectionManager.DeselectAll();
         this.deselectAllCells();
     };
@@ -575,14 +580,17 @@ export class CollectionSchemaView extends CollectionSubView() {
             e.stopPropagation();
 
             this._colEles.forEach((colRef, i) => {
+                //style for menu cell
                 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 = '';
+                    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 = '';
+                    }
                 });
             });
             return true;
@@ -899,7 +907,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
     get renderKeysMenu() {
-        console.log('RNDERMENUT:' + this._columnMenuIndex);
+        //console.log('RNDERMENUT:' + this._columnMenuIndex);
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 1786d688b..6bbc4dfa6 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -109,9 +109,9 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     }
 
     @computed get selected() {
-        const selected: Doc[] | undefined = this._props.selectedCells();
-        let istrue = this._props.isRowActive() && (selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
-        return istrue;
+        const selectedDocs: Doc[] | undefined = this._props.selectedCells();
+        let isSelected = this._props.isRowActive() && (selectedDocs?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return isSelected;
     }
 
     @computed get defaultCellContent() {
@@ -178,6 +178,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
+    
     render() {
         return (
             <div