From db9a794911c1242cfe0185ed4819af2e878cf55b Mon Sep 17 00:00:00 2001
From: Jason <jason@heyglide.com>
Date: Wed, 30 Mar 2022 17:39:23 -0700
Subject: [PATCH] Better working downfill indicator

---
 packages/core/src/data-editor/data-editor.tsx | 101 +++++++++---------
 .../stories/data-editor-beautiful.stories.tsx |   1 +
 .../core/src/data-grid-dnd/data-grid-dnd.tsx  |   1 +
 .../src/data-grid-search/data-grid-search.tsx |   1 +
 .../core/src/data-grid/data-grid.stories.tsx  |   4 +
 .../core/src/data-grid/data-grid.test.tsx     |   1 +
 packages/core/src/data-grid/data-grid.tsx     |   6 +-
 .../scrolling-data-grid.stories.tsx           |   1 +
 8 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
index 7c3cee628..e0237e519 100644
--- a/packages/core/src/data-editor/data-editor.tsx
+++ b/packages/core/src/data-editor/data-editor.tsx
@@ -1207,30 +1207,33 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         [columnSelect, focus, gridSelection.columns, mangledCols, rowMarkerOffset, setSelectedColumns]
     );
 
-    const fillDown = React.useCallback(() => {
-        if (gridSelection.current === undefined) return;
-        const damage: Item[] = [];
-        const r = gridSelection.current.range;
-        for (let x = 0; x < r.width; x++) {
-            const fillCol = x + r.x;
-            const fillVal = getMangedCellContent([fillCol, r.y]);
-            if (isInnerOnlyCell(fillVal) || !isEditableGridCell(fillVal)) continue;
-            for (let y = 1; y < r.height; y++) {
-                const fillRow = y + r.y;
-                const target = [fillCol, fillRow] as const;
-                damage.push(target);
-                mangledOnCellEdited?.(target, {
-                    ...fillVal,
-                });
+    const fillDown = React.useCallback(
+        (reverse: boolean) => {
+            if (gridSelection.current === undefined) return;
+            const damage: Item[] = [];
+            const r = gridSelection.current.range;
+            for (let x = 0; x < r.width; x++) {
+                const fillCol = x + r.x;
+                const fillVal = getMangedCellContent([fillCol, reverse ? r.y + r.height - 1 : r.y]);
+                if (isInnerOnlyCell(fillVal) || !isEditableGridCell(fillVal)) continue;
+                for (let y = 1; y < r.height; y++) {
+                    const fillRow = reverse ? r.y + r.height - (y + 1) : y + r.y;
+                    const target = [fillCol, fillRow] as const;
+                    damage.push(target);
+                    mangledOnCellEdited?.(target, {
+                        ...fillVal,
+                    });
+                }
             }
-        }
 
-        gridRef.current?.damage(
-            damage.map(c => ({
-                cell: c,
-            }))
-        );
-    }, [getMangedCellContent, gridSelection, mangledOnCellEdited]);
+            gridRef.current?.damage(
+                damage.map(c => ({
+                    cell: c,
+                }))
+            );
+        },
+        [getMangedCellContent, gridSelection, mangledOnCellEdited]
+    );
 
     const onMouseUp = React.useCallback(
         (args: GridMouseEventArgs, isOutside: boolean) => {
@@ -1257,32 +1260,34 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                         preventDefault,
                     });
                 }
-                if (mouse?.fillHandle === true) {
-                    fillDown();
-                } else if (
-                    gridSelection.current !== undefined &&
-                    mouse?.previousSelection?.current?.cell !== undefined &&
-                    !prevented
-                ) {
-                    const [selectedCol, selectedRow] = gridSelection.current.cell;
-                    const [prevCol, prevRow] = mouse.previousSelection.current.cell;
-                    const c = getMangedCellContent([col, row]);
-                    const r = c.kind === GridCellKind.Custom ? undefined : CellRenderers[c.kind];
-                    if (r !== undefined && r.onClick !== undefined) {
-                        const newVal = r.onClick(c, a.localEventX, a.localEventY, a.bounds);
-                        if (newVal !== undefined && !isInnerOnlyCell(newVal) && isEditableGridCell(newVal)) {
-                            mangledOnCellEdited(a.location, newVal);
-                            gridRef.current?.damage([
-                                {
-                                    cell: a.location,
-                                },
-                            ]);
+                if (gridSelection.current !== undefined) {
+                    if (mouse?.fillHandle === true) {
+                        fillDown(gridSelection.current.cell[1] !== gridSelection.current.range.y);
+                    } else if (
+                        gridSelection.current !== undefined &&
+                        mouse?.previousSelection?.current?.cell !== undefined &&
+                        !prevented
+                    ) {
+                        const [selectedCol, selectedRow] = gridSelection.current.cell;
+                        const [prevCol, prevRow] = mouse.previousSelection.current.cell;
+                        const c = getMangedCellContent([col, row]);
+                        const r = c.kind === GridCellKind.Custom ? undefined : CellRenderers[c.kind];
+                        if (r !== undefined && r.onClick !== undefined) {
+                            const newVal = r.onClick(c, a.localEventX, a.localEventY, a.bounds);
+                            if (newVal !== undefined && !isInnerOnlyCell(newVal) && isEditableGridCell(newVal)) {
+                                mangledOnCellEdited(a.location, newVal);
+                                gridRef.current?.damage([
+                                    {
+                                        cell: a.location,
+                                    },
+                                ]);
+                            }
+                        }
+                        if (col === selectedCol && col === prevCol && row === selectedRow && row === prevRow) {
+                            onCellActivated?.([col, row]);
+                            reselect(a.bounds, false);
+                            return true;
                         }
-                    }
-                    if (col === selectedCol && col === prevCol && row === selectedRow && row === prevRow) {
-                        onCellActivated?.([col, row]);
-                        reselect(a.bounds, false);
-                        return true;
                     }
                 }
                 return false;
@@ -2017,7 +2022,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     gridSelection.current.range.height > 1
                 ) {
                     // ctrl/cmd + d
-                    fillDown();
+                    fillDown(false);
                     event.cancel();
                 } else if (
                     keybindings.rightFill &&
diff --git a/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx b/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx
index 42d76d414..19f630727 100644
--- a/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx
+++ b/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx
@@ -232,6 +232,7 @@ export const AddData: React.VFC = () => {
                 getCellsForSelection={getCellsForSelection}
                 rowMarkers={"both"}
                 onPaste={true}
+                fillHandle={true}
                 onCellEdited={setCellValue}
                 trailingRowOptions={{
                     sticky: true,
diff --git a/packages/core/src/data-grid-dnd/data-grid-dnd.tsx b/packages/core/src/data-grid-dnd/data-grid-dnd.tsx
index 500e7acd6..aac2d7308 100644
--- a/packages/core/src/data-grid-dnd/data-grid-dnd.tsx
+++ b/packages/core/src/data-grid-dnd/data-grid-dnd.tsx
@@ -235,6 +235,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
             freezeColumns={p.freezeColumns}
             onMouseMove={p.onMouseMove}
             groupHeaderHeight={p.groupHeaderHeight}
+            fillHandle={p.fillHandle}
             headerHeight={p.headerHeight}
             height={p.height}
             lastRowSticky={p.lastRowSticky}
diff --git a/packages/core/src/data-grid-search/data-grid-search.tsx b/packages/core/src/data-grid-search/data-grid-search.tsx
index a0aba4bd4..e2ca5bd3f 100644
--- a/packages/core/src/data-grid-search/data-grid-search.tsx
+++ b/packages/core/src/data-grid-search/data-grid-search.tsx
@@ -391,6 +391,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
                 groupHeaderHeight={p.groupHeaderHeight}
                 headerHeight={p.headerHeight}
                 isFilling={p.isFilling}
+                fillHandle={p.fillHandle}
                 lastRowSticky={p.lastRowSticky}
                 firstColAccessible={p.firstColAccessible}
                 lockColumns={p.lockColumns}
diff --git a/packages/core/src/data-grid/data-grid.stories.tsx b/packages/core/src/data-grid/data-grid.stories.tsx
index 009692c3a..153107665 100644
--- a/packages/core/src/data-grid/data-grid.stories.tsx
+++ b/packages/core/src/data-grid/data-grid.stories.tsx
@@ -48,6 +48,7 @@ export function Simplenotest() {
             height={1000}
             cellXOffset={0}
             cellYOffset={y}
+            isFilling={false}
             onMouseMove={() => undefined}
             groupHeaderHeight={0}
             accessibilityHeight={50}
@@ -88,6 +89,7 @@ export function SelectedCellnotest() {
             cellXOffset={0}
             onMouseMove={() => undefined}
             accessibilityHeight={50}
+            isFilling={false}
             cellYOffset={0}
             groupHeaderHeight={34}
             enableGroups={false}
@@ -135,6 +137,7 @@ export function SelectedRownotest() {
             cellYOffset={0}
             groupHeaderHeight={34}
             accessibilityHeight={50}
+            isFilling={false}
             enableGroups={false}
             rows={1000}
             headerHeight={44}
@@ -175,6 +178,7 @@ export const SelectedColumnnotest = () => {
             cellXOffset={0}
             cellYOffset={0}
             accessibilityHeight={50}
+            isFilling={false}
             groupHeaderHeight={34}
             enableGroups={false}
             rows={1000}
diff --git a/packages/core/src/data-grid/data-grid.test.tsx b/packages/core/src/data-grid/data-grid.test.tsx
index 77c6e873f..4826308a2 100644
--- a/packages/core/src/data-grid/data-grid.test.tsx
+++ b/packages/core/src/data-grid/data-grid.test.tsx
@@ -31,6 +31,7 @@ const basicProps: DataGridProps = {
             width: 190,
         },
     ],
+    isFilling: false,
     enableGroups: false,
     freezeColumns: 0,
     selection: {
diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx
index d598f63af..cf01aa068 100644
--- a/packages/core/src/data-grid/data-grid.tsx
+++ b/packages/core/src/data-grid/data-grid.tsx
@@ -157,7 +157,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         cellXOffset: cellXOffsetReal,
         cellYOffset,
         headerHeight,
-        fillHandle = true,
+        fillHandle = false,
         groupHeaderHeight,
         rowHeight,
         rows,
@@ -393,8 +393,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                 const isFillHandle =
                     fillHandle &&
                     bounds !== undefined &&
-                    bounds.x + bounds.width - posX < 5 &&
-                    bounds.y + bounds.height - posY < 5;
+                    bounds.x + bounds.width - posX < 6 &&
+                    bounds.y + bounds.height - posY < 6;
                 result = {
                     kind: "cell",
                     location: [col, row],
diff --git a/packages/core/src/scrolling-data-grid/scrolling-data-grid.stories.tsx b/packages/core/src/scrolling-data-grid/scrolling-data-grid.stories.tsx
index e5f5f66ae..1f63d1dee 100644
--- a/packages/core/src/scrolling-data-grid/scrolling-data-grid.stories.tsx
+++ b/packages/core/src/scrolling-data-grid/scrolling-data-grid.stories.tsx
@@ -70,6 +70,7 @@ export function Simplenotest() {
             cellXOffset={x}
             cellYOffset={y}
             minColumnWidth={50}
+            isFilling={false}
             maxColumnWidth={500}
             accessibilityHeight={50}
             translateX={translateX}