Focusing filter controls scrolls to the field along with the correspo…

…nding grid.
origam · Jan 17, 2024 · 33caaf8 · 33caaf8
1 parent 1567ee4
commit 33caaf8
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Scrollee.tsx b/frontend-html/src/gui/Components/ScreenElements/Table/Scrollee.tsx
@@ -21,6 +21,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { IScrolleeProps } from "./types";
 import S from "./Scrollee.module.css";
+import { action } from "mobx";
 
 /*
   Component translating its content according to scrollOffsetSource.
@@ -29,6 +30,25 @@ import S from "./Scrollee.module.css";
 // TODO: Maybe add hideOverflow property to disable content clipping? (or allow some custom class?)
 @observer
 export default class Scrollee extends React.Component<IScrolleeProps> {
+
+  @action.bound
+  handleFocus(event: any)  {
+    const tableElement = event.target.closest(this.props.controlScrollStateSelector);
+    const tableRect = tableElement?.getBoundingClientRect();
+    const targetRect = event.target.getBoundingClientRect();
+    const overLeft = Math.min(0, targetRect.left - tableRect.left);
+    const overRight = Math.max(0, targetRect.right - tableRect?.right);
+    if(overRight) {
+      this.props.scrollOffsetSource.scrollBy({
+        deltaLeft: overRight + (this.props.controlScrollStatePadding?.right || 0)
+      })
+    } else if(overLeft) {
+      this.props.scrollOffsetSource.scrollBy({
+        deltaLeft: overLeft - (this.props.controlScrollStatePadding?.left || 0)
+      })
+    }
+  }
+
   public render() {
     return (
       <div
@@ -38,6 +58,7 @@ export default class Scrollee extends React.Component<IScrolleeProps> {
           height: this.props.height,
           zIndex: this.props.zIndex || 0,
         }}
+        onFocus={this.props.controlScrollStateByFocus ? this.handleFocus : undefined}
       >
         <div
           className={S.scrolleeShifted}

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/SimpleScrollState.ts b/frontend-html/src/gui/Components/ScreenElements/Table/SimpleScrollState.ts
@@ -34,6 +34,13 @@ export class SimpleScrollState implements IScrollState {
     }
   }
 
+  scrollBy(coords: {deltaLeft?: number; deltaTop?: number}) {
+    this.scrollTo({
+      scrollLeft: coords.deltaLeft !== undefined ? this.scrollLeft + coords.deltaLeft : undefined,
+      scrollTop: coords.deltaTop !== undefined ? this.scrollTop + coords.deltaTop : undefined
+    })
+  }
+
   @observable scrollTop = 0;
   @observable scrollLeft = 0;
 

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Table.module.scss b/frontend-html/src/gui/Components/ScreenElements/Table/Table.module.scss
@@ -32,7 +32,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   position: relative;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: clip;
 }
 
 .loadingOverlay {

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx b/frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx
@@ -434,7 +434,7 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
         : undefined;
 
     return (
-      <div className={S.table}>
+      <div className={`${S.table} tableContainer`}>
         {this.props.isLoading && (
           <div className={S.loadingOverlay}>
             <div className={S.loadingIcon}>
@@ -468,6 +468,9 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
                         fixedVert={true}
                         zIndex={100}
                         width={contentRect.bounds!.width - 10 - this.fixedColumnsWidth}
+                        controlScrollStateByFocus={true}
+                        controlScrollStateSelector=".tableContainer"
+                        controlScrollStatePadding={{ left: 40, right: 40 }}
                       >
                         <DragDropContext onDragEnd={(result) => this.onColumnDragEnd(result)}>
                           <Droppable droppableId="headers" direction="horizontal" >

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/types.ts b/frontend-html/src/gui/Components/ScreenElements/Table/types.ts
@@ -91,6 +91,8 @@ export interface IScrollState extends IScrollOffsetSource, IScrollOffsetTarget {
   scrollToFunction: ((coords: { scrollLeft?: number; scrollTop?: number }) => void) | undefined;
 
   scrollTo(coords: { scrollLeft?: number; scrollTop?: number }): void;
+
+  scrollBy(coords: {deltaLeft?: number; deltaTop?: number}): void;
 }
 
 export interface IScrollOffsetSource {
@@ -184,9 +186,15 @@ export interface IScrolleeProps {
   fixedHoriz?: boolean;
   fixedVert?: boolean;
   zIndex?: number | undefined;
-  scrollOffsetSource: IScrollOffsetSource;
+  scrollOffsetSource: IScrollState;
   offsetLeft?: number;
   offsetTop?: number;
+  controlScrollStateByFocus?: boolean;
+  controlScrollStateSelector?: string;
+  controlScrollStatePadding?: {
+    left: number, 
+    right: number, 
+  }
 }
 
 export interface IHeaderRowProps {