col drag stutter fixed

4 files changed, 52 insertions, 34 deletions

diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index c7aa56c1e..5202e62a3 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -183,10 +183,10 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde
     );
 }
 
-ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
-//addreturn = true
-//capturedvariables = undefined
-//
+// ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
+// //addreturn = true
+// //capturedvariables = undefined
+// //
 
 export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult {
     const captured = options.capturedVariables ?? {}; 
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 497c781fd..93347f067 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -95,7 +95,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _filterSearchValue: string = '';
     @observable _selectedCol: number = 0;
     @observable _selectedCells: Array<Doc> = [];
-    @observable _mouseCoordinates = { x: 0, y: 0 };
+    @observable _mouseCoordinates = { x: 0, y: 0, prevX: 0, prevY: 0 };
     @observable _lowestSelectedIndex: number = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
     @observable _relCursorIndex: number = -1; //cursor index relative to the current selected cells
     @observable _draggedColIndex: number = 0;
@@ -413,7 +413,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     dragColumn = (e: PointerEvent, index: number) => {
         this.closeColumnMenu();
         this._draggedColIndex = index;
-        this._colBeingDragged = true;
+        this.setColDrag(true);
         const dragData = new DragManager.ColumnDragData(index);
         const dragEles = [this._colEles[index]];
         this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index]));
@@ -499,6 +499,26 @@ export class CollectionSchemaView extends CollectionSubView() {
             });
         });
 
+    removeDragHighlight = () => {
+        this._colEles.forEach((colRef, i) => {
+            const sorted = i === this.columnKeys.indexOf(this.sortField);
+            if (sorted) return;
+
+            colRef.style.borderLeft = '';
+            colRef.style.borderRight = '';
+            colRef.style.borderTop = '';
+
+            this.childDocs.forEach(doc => {
+                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 = '';
+                }
+            });
+        });
+    }
+
     highlightSortedColumn = (field?: string, descending?: boolean) => {
         let index = -1;
         let highlightColors: string[] = [];
@@ -703,28 +723,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         return this.findRowDropIndex(mouseY);
     }
 
+    @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.columnDragData) {
-            this._colBeingDragged = false;
+            this.setColDrag(false);
             e.stopPropagation();
-
-            this._colEles.forEach((colRef, i) => {
-                const sorted = i === this.columnKeys.indexOf(this.sortField);
-                if (sorted) return;
-
-                colRef.style.borderLeft = '';
-                colRef.style.borderRight = '';
-                colRef.style.borderTop = '';
-
-                this.childDocs.forEach(doc => {
-                    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 = '';
-                    }
-                });
-            });
             return true;
         }
 
@@ -1196,18 +1199,33 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
 
+    @action setColDrag = (beingDragged: boolean) => {
+        this._colBeingDragged = beingDragged;
+        !beingDragged && this.removeDragHighlight();
+    }
+
+    @action updateMouseCoordinates = (e: React.PointerEvent<HTMLDivElement>) => {
+        const prevX = this._mouseCoordinates.x;
+        const prevY = this._mouseCoordinates.y;
+        this._mouseCoordinates = { x: e.clientX, y: e.clientY, prevX: prevX, prevY: prevY };
+    }
+
     @action
     onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
         if (DragManager.docsBeingDragged.length) {
-            this._mouseCoordinates = { x: e.clientX, y: e.clientY };
+            this.updateMouseCoordinates(e);
         }
         if (this._colBeingDragged) {
+            this.updateMouseCoordinates(e);
             const newIndex = this.findColDropIndex(e.clientX);
-            if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
-            this._draggedColIndex = newIndex || this._draggedColIndex;
+            const direction: number = this._mouseCoordinates.x > this._mouseCoordinates.prevX ? 1 : 0;
+            if (newIndex !== undefined && ((newIndex > this._draggedColIndex && direction === 1) || (newIndex < this._draggedColIndex && direction === 0))) {
+                this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
+                this._draggedColIndex = newIndex !== undefined ? 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);
+            !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(this._draggedColIndex);
         }
     };
 
@@ -1286,7 +1304,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
             onDrop={this.onExternalDrop.bind(this)} 
             onPointerMove={e => this.onPointerMove(e)} 
-            onPointerDown={() => this.closeColumnMenu()}>
+            onPointerDown={() => {this.closeColumnMenu(); this.setColDrag(false)}}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 83a136737..e98a2c778 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -244,6 +244,8 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                             {this.headerButton}
                         </div>
                     </div>  
+
+                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
                 </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c0e1743a5..d06e2a147 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -16,7 +16,7 @@ import { DateField } from '../../../../fields/DateField';
 import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, DateCast, DocCast, FieldValue, ScriptCast, StrCast, toList } from '../../../../fields/Types';
+import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { FInfo, FInfoFieldType } from '../../../documents/Documents';
 import { dropActionType } from '../../../util/DropActionTypes';
@@ -35,7 +35,6 @@ import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { ContextMenu } from '../../ContextMenu';
 import { SchemaCellField } from './SchemaCellField';
-import { ComputedField } from '../../../../fields/ScriptField';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -210,8 +209,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    ////const script = ScriptCast(fieldProps.Document[this._props.fieldKey]).rawscript;
-                    GetValue={() => ScriptCast(fieldProps.Document[this._props.fieldKey])?.rawscript ?? ''}
+                    GetValue={() => this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);