Merge pull request #16 from Workfront/feature-add-resize-outline

feat: add resize column outline

Author: aramvr

package-lock.json

@@ -4,7 +4,7 @@ import * as React from "react";
 import DataGrid, { DataGridProps, DataGridRef } from "../data-grid/data-grid";
 import type { GridColumn, GridMouseEventArgs, InnerGridColumn, Rectangle } from "../data-grid/data-grid-types";
 
-type Props = Omit<DataGridProps, "dragAndDropState" | "isResizing" | "isDragging" | "onMouseMoveRaw" | "allowResize">;
+type Props = Omit<DataGridProps, "dragAndDropState" | "isResizing" | 'resizeCol' | "isDragging" | "onMouseMoveRaw" | "allowResize">;
 
 export interface DataGridDndProps extends Props {
     /**
@@ -382,6 +382,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
             prelightCells={p.prelightCells}
             rowHeight={p.rowHeight}
             rows={p.rows}
+            resizeCol={resizeCol}
             selection={p.selection}
             smoothScrollX={p.smoothScrollX}
             smoothScrollY={p.smoothScrollY}

packages/core/src/data-grid-dnd/data-grid-dnd.tsx

@@ -1282,3 +1282,13 @@ export function computeBounds(
 
     return result;
 }
+
+
+export function drawColumnResizeOutline(ctx: CanvasRenderingContext2D, yOffset: number, xOffset: number, height: number, theme: Theme) {
+    ctx.beginPath();
+    ctx.lineWidth = 2;
+    ctx.moveTo(yOffset, xOffset);
+    ctx.lineTo(yOffset, height);
+    ctx.strokeStyle= theme.accentColor
+    ctx.stroke();
+} 

packages/core/src/data-grid/data-grid-lib.ts

@@ -34,6 +34,7 @@ import {
     computeBounds,
     getMiddleCenterBias,
     drawCheckbox,
+    drawColumnResizeOutline,
 } from "./data-grid-lib";
 import type { SpriteManager, SpriteVariant } from "./data-grid-sprites";
 import type { Theme } from "../common/styles";
@@ -1856,6 +1857,7 @@ export interface DrawGridArg {
     readonly groupHeaderHeight: number;
     readonly disabledRows: CompactSelection;
     readonly rowHeight: number | ((index: number) => number);
+    readonly resizeCol: number | undefined,
     readonly verticalBorder: (col: number) => boolean;
     readonly isResizing: boolean;
     readonly isFocused: boolean;
@@ -1970,6 +1972,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         fillHandle,
         lastRowSticky: trailingRowType,
         rows,
+        resizeCol,
         getCellContent,
         getGroupDetails,
         getRowThemeOverride,
@@ -2171,7 +2174,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
             );
         });
 
-        if (damage.length > 0) {
+        if (!isResizing && damage.length > 0) {
             clipDamage(
                 targetCtx,
                 effectiveCols,
@@ -2254,7 +2257,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
             }
         }
 
-        if (doHeaders) {
+        if (!isResizing && doHeaders) {
             clipDamage(
                 overlayCtx,
                 effectiveCols,
@@ -2514,6 +2517,18 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         lastBuffer: doubleBuffer ? (targetBuffer === bufferA ? "a" : "b") : undefined,
     };
 
+
+    if(isResizing){
+        walkColumns(effectiveCols, 0, translateX, 0, totalHeaderHeight, (c, x) => {
+        
+            if(c.sourceIndex === resizeCol) {
+                drawColumnResizeOutline(overlayCtx, x+c.width, 0, totalHeaderHeight+1, theme );
+                drawColumnResizeOutline(targetCtx, x+c.width, totalHeaderHeight, height, theme );
+            }        
+        });
+    
+    }
+    
     targetCtx.restore();
     overlayCtx.restore();
 }

packages/core/src/data-grid/data-grid-render.tsx

@@ -95,7 +95,7 @@ export interface DataGridProps {
      * @group Data
      */
     readonly rows: number;
-
+    readonly resizeCol: number | undefined;
     readonly headerHeight: number;
     readonly groupHeaderHeight: number;
     readonly enableGroups: boolean;
@@ -305,6 +305,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         groupHeaderHeight,
         rowHeight,
         rows,
+        resizeCol,
         getCellContent,
         getRowThemeOverride,
         onHeaderMenuClick,
@@ -688,6 +689,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             fillHandle,
             lastRowSticky: trailingRowType,
             rows,
+            resizeCol,
             drawFocus: drawFocusRing,
             getCellContent,
             getGroupDetails: getGroupDetails ?? (name => ({ name })),
@@ -763,6 +765,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         experimental?.renderStrategy,
         lastWasTouch,
         getCellRenderer,
+        resizeCol
     ]);
 
     const lastDrawRef = React.useRef(draw);
@@ -1108,19 +1111,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             onMouseMoveRaw?.(ev);
             onMouseMove(args);
         },
-        [
-            getMouseArgsForPosition,
-            allowResize,
-            fillHandle,
-            selection,
-            onMouseMoveRaw,
-            onMouseMove,
-            onItemHovered,
-            getCellContent,
-            getCellRenderer,
-            damageInternal,
-            getBoundsForItem,
-        ]
+        [eventTargetRef, getMouseArgsForPosition, allowResize, fillHandle, selection, onMouseMoveRaw, onMouseMove, onItemHovered, getCellContent, getCellRenderer, damageInternal, getBoundsForItem]
     );
     useEventListener("mousemove", onMouseMoveImpl, window, true);
 

packages/core/src/data-grid/data-grid.tsx

@@ -95,6 +95,7 @@ const basicProps: DataGridProps = {
     isDragging: false,
     isResizing: false,
     trailingRowType: "none",
+    resizeCol: undefined,
     rowHeight: 32,
     rows: 1000,
     verticalBorder: () => true,