fix: made row drag highlight less 'jittery' and only show when it wou…

…ld result in a change (#417)

* fix: made row drag highlight more visible

* fix: made row drag highlight less 'jittery' and only show when it would result in a change

* lint fix

* lint fix

src/components/Grid.tsx

@@ -611,8 +611,19 @@ export const Grid = ({
   }, []);
 
   const onRowDragMove = useCallback((event: RowDragMoveEvent) => {
-    const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
-    clientSideRowModel.highlightRowAtPixel(event.node as RowNode<any>, event.y);
+    if (event.overNode && event.node.rowIndex != null) {
+      const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
+
+      //position 0 means highlight above, 1 means below
+      const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode as RowNode<any>);
+
+      //we don't want to show the row highlight if it wouldn't result in the row moving
+      const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
+      //console.log(targetIndex)
+      if (event.node.rowIndex != targetIndex) {
+        clientSideRowModel.highlightRowAtPixel(event.node as RowNode<any>, event.y);
+      }
+    }
   }, []);
 
   const onRowDragEnd = useCallback(

src/styles/GridTheme.scss

@@ -201,10 +201,15 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     background-color: transparent;
   }
 
-  .ag-row-highlight-above::after{
+  .ag-row-highlight-above::after {
+    top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
-
   }
+
+  .ag-row-highlight-above:first-of-type:after {
+    top:0px; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
+  }
+
   .ag-row-highlight-below::after {
     border-bottom: 2px dashed lui.$andrea;
   }