Improve mouse tracking (twentyhq#1061)

* Improve mouse tracking * Fix lint * Fix regression on Filters * Fix according to review
AdityaPimpalkar · Aug 4, 2023 · 7c48217 · 7c48217
1 parent d088a74
commit 7c48217
Show file tree

Hide file tree

Showing 27 changed files with 210 additions and 143 deletions.
diff --git a/front/src/modules/activities/components/ActivityRelationPicker.tsx b/front/src/modules/activities/components/ActivityRelationPicker.tsx
@@ -14,9 +14,9 @@ import { PersonChip } from '@/people/components/PersonChip';
 import { useFilteredSearchPeopleQuery } from '@/people/queries';
 import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Activity, ActivityTarget, CommentableType } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';

diff --git a/front/src/modules/companies/table/components/CompanyTableMockData.tsx b/front/src/modules/companies/table/components/CompanyTableMockData.tsx
@@ -3,7 +3,7 @@ import { useSetRecoilState } from 'recoil';
 
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 import { entityTableDimensionsState } from '@/ui/table/states/entityTableDimensionsState';
-import { viewFieldsFamilyState } from '@/ui/table/states/viewFieldsState';
+import { viewFieldsState } from '@/ui/table/states/viewFieldsState';
 
 import { companyViewFields } from '../../constants/companyViewFields';
 
@@ -13,7 +13,7 @@ export function CompanyTableMockData() {
   const setEntityTableDimensions = useSetRecoilState(
     entityTableDimensionsState,
   );
-  const setViewFields = useSetRecoilState(viewFieldsFamilyState);
+  const setViewFields = useSetRecoilState(viewFieldsState);
   const setEntityTableData = useSetEntityTableData();
 
   setEntityTableData(mockedCompaniesData, []);

diff --git a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx
@@ -2,8 +2,8 @@ import { ReactElement, useRef } from 'react';
 import styled from '@emotion/styled';
 
 import { overlayBackground } from '@/ui/theme/constants/effects';
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope';
 

diff --git a/front/src/modules/ui/board/components/BoardColumnMenu.tsx b/front/src/modules/ui/board/components/BoardColumnMenu.tsx
@@ -7,7 +7,7 @@ import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMen
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
 import { icon } from '@/ui/theme/constants/icon';
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
 

diff --git a/front/src/modules/ui/board/components/BoardHeader.tsx b/front/src/modules/ui/board/components/BoardHeader.tsx
@@ -63,18 +63,20 @@ export function BoardHeader<SortField>({
           {viewName}
         </>
       }
-      rightComponents={[
-        <FilterDropdownButton
-          context={context}
-          HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-        />,
-        <SortDropdownButton<SortField>
-          isSortSelected={sorts.length > 0}
-          availableSorts={availableSorts || []}
-          onSortSelect={sortSelect}
-          HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-        />,
-      ]}
+      rightComponent={
+        <>
+          <FilterDropdownButton
+            context={context}
+            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+          />
+          <SortDropdownButton<SortField>
+            isSortSelected={sorts.length > 0}
+            availableSorts={availableSorts || []}
+            onSortSelect={sortSelect}
+            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+          />
+        </>
+      }
       bottomComponent={
         <SortAndFilterBar
           context={context}

diff --git a/front/src/modules/ui/editable-field/hooks/useRegisterCloseFieldHandlers.ts b/front/src/modules/ui/editable-field/hooks/useRegisterCloseFieldHandlers.ts
@@ -1,5 +1,5 @@
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 

diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx
@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
 

diff --git a/front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx b/front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx
@@ -7,7 +7,7 @@ import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 

diff --git a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
@@ -7,7 +7,7 @@ import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMen
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
 import { IconPlus } from '@/ui/icon';
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';

diff --git a/front/src/modules/ui/modal/components/Modal.tsx b/front/src/modules/ui/modal/components/Modal.tsx
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import {
   ClickOutsideMode,
   useListenClickOutside,
-} from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 const StyledContainer = styled.div`
   align-items: center;

diff --git a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx
@@ -5,11 +5,11 @@ import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import {
   ClickOutsideMode,
   useListenClickOutside,
-} from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isDefined } from '~/utils/isDefined';
 

diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx
@@ -1,15 +1,12 @@
-import { useCallback, useRef } from 'react';
+import { useRef } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
-import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
-import { useUpdateViewFieldMutation } from '~/generated/graphql';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
 import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
 import { EntityUpdateMutationHookContext } from '../states/EntityUpdateMutationHookContext';
-import { viewFieldsFamilyState } from '../states/viewFieldsState';
 import { TableHeader } from '../table-header/components/TableHeader';
 
 import { EntityTableBody } from './EntityTableBody';
@@ -102,11 +99,6 @@ export function EntityTable<SortField>({
   onSortsUpdate,
   useUpdateEntityMutation,
 }: OwnProps<SortField>) {
-  const viewFields = useRecoilValue(viewFieldsFamilyState);
-  const setViewFields = useSetRecoilState(viewFieldsFamilyState);
-
-  const [updateViewFieldMutation] = useUpdateViewFieldMutation();
-
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
   useMapKeyboardToSoftFocus();
@@ -120,25 +112,6 @@ export function EntityTable<SortField>({
     },
   });
 
-  const handleColumnResize = useCallback(
-    (resizedFieldId: string, width: number) => {
-      setViewFields((previousViewFields) =>
-        previousViewFields.map((viewField) =>
-          viewField.id === resizedFieldId
-            ? { ...viewField, columnSize: width }
-            : viewField,
-        ),
-      );
-      updateViewFieldMutation({
-        variables: {
-          data: { sizeInPx: width },
-          where: { id: resizedFieldId },
-        },
-      });
-    },
-    [setViewFields, updateViewFieldMutation],
-  );
-
   return (
     <EntityUpdateMutationHookContext.Provider value={useUpdateEntityMutation}>
       <StyledTableWithHeader>
@@ -150,15 +123,10 @@ export function EntityTable<SortField>({
             onSortsUpdate={onSortsUpdate}
           />
           <StyledTableWrapper>
-            {viewFields.length > 0 && (
-              <StyledTable>
-                <EntityTableHeader
-                  onColumnResize={handleColumnResize}
-                  viewFields={viewFields}
-                />
-                <EntityTableBody />
-              </StyledTable>
-            )}
+            <StyledTable>
+              <EntityTableHeader />
+              <EntityTableBody />
+            </StyledTable>
           </StyledTableWrapper>
         </StyledTableContainer>
       </StyledTableWithHeader>

diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx
@@ -34,14 +34,7 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
   return (
     <RecoilScope>
       <ColumnIndexContext.Provider value={cellIndex}>
-        <td
-          onContextMenu={(event) => handleContextMenu(event)}
-          style={{
-            width: viewField.columnSize,
-            minWidth: viewField.columnSize,
-            maxWidth: viewField.columnSize,
-          }}
-        >
+        <td onContextMenu={(event) => handleContextMenu(event)}>
           <GenericEditableCell viewField={viewField} />
         </td>
       </ColumnIndexContext.Provider>

diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx
@@ -1,10 +1,17 @@
-import { PointerEvent, useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import {
+  useRecoilCallback,
+  useRecoilState,
+  useRecoilValue,
+  useSetRecoilState,
+} from 'recoil';
 
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../types/ViewField';
+import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
+import { useUpdateViewFieldMutation } from '~/generated/graphql';
+
+import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
+import { viewFieldsState } from '../states/viewFieldsState';
 
 import { ColumnHead } from './ColumnHead';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
@@ -42,12 +49,11 @@ const StyledResizeHandler = styled.div`
   z-index: 1;
 `;
 
-type OwnProps = {
-  onColumnResize: (resizedFieldId: string, width: number) => void;
-  viewFields: ViewFieldDefinition<ViewFieldMetadata>[];
-};
+export function EntityTableHeader() {
+  const viewFields = useRecoilValue(viewFieldsState);
+  const setViewFields = useSetRecoilState(viewFieldsState);
 
-export function EntityTableHeader({ onColumnResize, viewFields }: OwnProps) {
+  const [updateViewFieldMutation] = useUpdateViewFieldMutation();
   const columnWidths = useMemo(
     () =>
       viewFields.reduce<Record<string, number>>(
@@ -59,46 +65,75 @@ export function EntityTableHeader({ onColumnResize, viewFields }: OwnProps) {
       ),
     [viewFields],
   );
-  const [isResizing, setIsResizing] = useState(false);
   const [initialPointerPositionX, setInitialPointerPositionX] = useState<
     number | null
   >(null);
 
   const [resizedFieldId, setResizedFieldId] = useState<string | null>(null);
-  const [offset, setOffset] = useState(0);
-
-  const handleResizeHandlerDragStart = useCallback(
-    (event: PointerEvent<HTMLDivElement>, fieldId: string) => {
-      setIsResizing(true);
-      setResizedFieldId(fieldId);
-      setInitialPointerPositionX(event.clientX);
+  const [offset, setOffset] = useRecoilState(resizeFieldOffsetState);
+
+  const handleColumnResize = useCallback(
+    (resizedFieldId: string, width: number) => {
+      setViewFields((previousViewFields) =>
+        previousViewFields.map((viewField) =>
+          viewField.id === resizedFieldId
+            ? { ...viewField, columnSize: width }
+            : viewField,
+        ),
+      );
+      updateViewFieldMutation({
+        variables: {
+          data: { sizeInPx: width },
+          where: { id: resizedFieldId },
+        },
+      });
     },
-    [setIsResizing, setResizedFieldId, setInitialPointerPositionX],
+    [setViewFields, updateViewFieldMutation],
   );
 
-  const handleResizeHandlerDrag = useCallback(
-    (event: PointerEvent<HTMLDivElement>) => {
-      if (!isResizing || initialPointerPositionX === null) return;
-
-      setOffset(event.clientX - initialPointerPositionX);
+  const handleResizeHandlerStart = useCallback(
+    (positionX: number, _: number) => {
+      setInitialPointerPositionX(positionX);
     },
-    [isResizing, initialPointerPositionX],
+    [],
   );
 
-  const handleResizeHandlerDragEnd = useCallback(() => {
-    setIsResizing(false);
-    if (!resizedFieldId) return;
-
-    const nextWidth = Math.round(
-      Math.max(columnWidths[resizedFieldId] + offset, COLUMN_MIN_WIDTH),
-    );
+  const handleResizeHandlerMove = useCallback(
+    (positionX: number, _positionY: number) => {
+      if (!initialPointerPositionX) return;
+      setOffset(positionX - initialPointerPositionX);
+    },
+    [setOffset, initialPointerPositionX],
+  );
 
-    if (nextWidth !== columnWidths[resizedFieldId]) {
-      onColumnResize(resizedFieldId, nextWidth);
-    }
+  const handleResizeHandlerEnd = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (_positionX: number, _positionY: number) => {
+        if (!resizedFieldId) return;
+        const nextWidth = Math.round(
+          Math.max(
+            columnWidths[resizedFieldId] +
+              snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(),
+            COLUMN_MIN_WIDTH,
+          ),
+        );
+
+        if (nextWidth !== columnWidths[resizedFieldId]) {
+          handleColumnResize(resizedFieldId, nextWidth);
+        }
+        set(resizeFieldOffsetState, 0);
+        setInitialPointerPositionX(null);
+        setResizedFieldId(null);
+      },
+    [resizedFieldId, columnWidths, setResizedFieldId, handleColumnResize],
+  );
 
-    setOffset(0);
-  }, [resizedFieldId, columnWidths, offset, onColumnResize]);
+  useTrackPointer({
+    shouldTrackPointer: resizedFieldId !== null,
+    onMouseDown: handleResizeHandlerStart,
+    onMouseMove: handleResizeHandlerMove,
+    onMouseUp: handleResizeHandlerEnd,
+  });
 
   return (
     <thead>
@@ -116,7 +151,7 @@ export function EntityTableHeader({ onColumnResize, viewFields }: OwnProps) {
         {viewFields.map((viewField) => (
           <StyledColumnHeaderCell
             key={viewField.columnOrder.toString()}
-            isResizing={isResizing && resizedFieldId === viewField.id}
+            isResizing={resizedFieldId === viewField.id}
             style={{
               width: Math.max(
                 columnWidths[viewField.id] +
@@ -132,12 +167,9 @@ export function EntityTableHeader({ onColumnResize, viewFields }: OwnProps) {
             <StyledResizeHandler
               className="cursor-col-resize"
               role="separator"
-              onPointerDown={(event) =>
-                handleResizeHandlerDragStart(event, viewField.id)
-              }
-              onPointerMove={handleResizeHandlerDrag}
-              onPointerOut={handleResizeHandlerDragEnd}
-              onPointerUp={handleResizeHandlerDragEnd}
+              onPointerDown={() => {
+                setResizedFieldId(viewField.id);
+              }}
             />
           </StyledColumnHeaderCell>
         ))}