Add support for returning bounds of entire scroll area (#788)

* Support returning bounds of entire scroll area * Add scale to calculation * Apply PR feedback * Fix check * Additional fix * Fix docs
glideapps · Oct 6, 2023 · 40cfc4b · 40cfc4b
1 parent 03c96ba
commit 40cfc4b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/packages/core/API.md b/packages/core/API.md
@@ -368,10 +368,10 @@ Causes the data grid to rerender these specific cells. Rerendering a single cell
 ## getBounds
 
 ```ts
-getBounds: (col: number, row?: number) => Rectangle | undefined;
+getBounds: (col?: number, row?: number) => Rectangle | undefined;
 ```
 
-`getBounds` returns the current bounding box of a cell. This does not need to be a currently rendered cell.
+`getBounds` returns the current bounding box of a cell. This does not need to be a currently rendered cell. If called with `col` and `row` as undefined, the bounding box of the entire data grid scroll area is returned.
 
 ---
 

diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -3440,7 +3440,23 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 return gridRef.current?.damage(damageList);
             },
             getBounds: (col, row) => {
-                return gridRef.current?.getBounds(col + rowMarkerOffset, row);
+
+                if (canvasRef?.current === null || scrollRef?.current === null) {
+                    return undefined
+                }
+
+                if (col === undefined && row === undefined) {
+                    // Return the bounds of the entire scroll area:
+                    const rect = canvasRef.current.getBoundingClientRect()
+                    const scale = rect.width / scrollRef.current.clientWidth
+                    return {   
+                         x: rect.x - scrollRef.current.scrollLeft * scale,
+                         y: rect.y - scrollRef.current.scrollTop * scale,
+                         width: scrollRef.current.scrollWidth * scale,
+                         height: scrollRef.current.scrollHeight * scale,
+                     };
+                }
+                return gridRef.current?.getBounds( col ?? 0 + rowMarkerOffset, row);
             },
             focus: () => gridRef.current?.focus(),
             emit: async e => {

diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx
@@ -283,7 +283,7 @@ type DamageUpdateList = readonly {
 
 export interface DataGridRef {
     focus: () => void;
-    getBounds: (col: number, row?: number) => Rectangle | undefined;
+    getBounds: (col?: number, row?: number) => Rectangle | undefined;
     damage: (cells: DamageUpdateList) => void;
 }
 
@@ -1499,12 +1499,12 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                     });
                 }
             },
-            getBounds: (col: number, row?: number) => {
+            getBounds: (col?: number, row?: number) => {
                 if (canvasRef === undefined || canvasRef.current === null) {
                     return undefined;
                 }
 
-                return getBoundsForItem(canvasRef.current, col, row ?? -1);
+                return getBoundsForItem(canvasRef.current, col ?? 0, row ?? -1);
             },
             damage,
         }),