[IMP] Selection: convert grid drag-n-drop into a hook

Task: 3582335

Author: rrahir

src/components/autofill/autofill.ts

@@ -3,7 +3,7 @@ import { AUTOFILL_EDGE_LENGTH } from "../../constants";
 import { clip } from "../../helpers";
 import { HeaderIndex, SpreadsheetChildEnv } from "../../types";
 import { css, cssPropertiesToCss } from "../helpers/css";
-import { dragAndDropBeyondTheViewport } from "../helpers/drag_and_drop";
+import { useDragAndDropBeyondTheViewport } from "../helpers/drag_and_drop_grid_hook";
 
 // -----------------------------------------------------------------------------
 // Autofill
@@ -64,6 +64,8 @@ export class Autofill extends Component<Props, SpreadsheetChildEnv> {
     handler: false,
   });
 
+  dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
+
   get style() {
     const { left, top } = this.props.position;
     return cssPropertiesToCss({
@@ -96,7 +98,7 @@ export class Autofill extends Component<Props, SpreadsheetChildEnv> {
     return tooltip;
   }
 
-  onMouseDown(ev: MouseEvent) {
+  onMouseDown(ev: PointerEvent) {
     this.state.handler = true;
 
     let lastCol: HeaderIndex | undefined;
@@ -127,7 +129,7 @@ export class Autofill extends Component<Props, SpreadsheetChildEnv> {
         }
       }
     };
-    dragAndDropBeyondTheViewport(this.env, onMouseMove, onMouseUp);
+    this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
   }
 
   onDblClick() {

src/components/bottom_bar/bottom_bar.ts

@@ -6,7 +6,7 @@ import { _t } from "../../translation";
 import { MenuMouseEvent, Pixel, Rect, SpreadsheetChildEnv, UID } from "../../types";
 import { Ripple } from "../animation/ripple";
 import { css } from "../helpers/css";
-import { useDragAndDropListItems } from "../helpers/drag_and_drop_hook";
+import { useDragAndDropListItems } from "../helpers/drag_and_drop_dom_items_hook";
 import { Menu, MenuState } from "../menu/menu";
 import { BottomBarSheet } from "./bottom_bar_sheet/bottom_bar_sheet";
 import { BottomBarStatistic } from "./bottom_bar_statistic/bottom_bar_statistic";

src/components/grid/grid.ts

@@ -66,7 +66,7 @@ import { GridPopover } from "../grid_popover/grid_popover";
 import { HeadersOverlay } from "../headers_overlay/headers_overlay";
 import { cssPropertiesToCss } from "../helpers";
 import { keyboardEventToShortcutString } from "../helpers/dom_helpers";
-import { dragAndDropBeyondTheViewport } from "../helpers/drag_and_drop";
+import { useDragAndDropBeyondTheViewport } from "../helpers/drag_and_drop_grid_hook";
 import { useGridDrawing } from "../helpers/draw_grid_hook";
 import { useAbsoluteBoundingRect } from "../helpers/position_hook";
 import { updateSelectionWithArrowKeys } from "../helpers/selection_helpers";
@@ -144,6 +144,8 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
   private DOMFocusableElementStore!: Store<DOMFocusableElementStore>;
   private paintFormatStore!: Store<PaintFormatStore>;
 
+  dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
+
   onMouseWheel!: (ev: WheelEvent) => void;
   canvasPosition!: DOMCoordinates;
   hoveredCell!: Store<HoveredCellStore>;
@@ -475,7 +477,13 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
   // Zone selection with mouse
   // ---------------------------------------------------------------------------
 
-  onCellClicked(col: HeaderIndex, row: HeaderIndex, modifiers: GridClickModifiers) {
+  onCellClicked(
+    col: HeaderIndex,
+    row: HeaderIndex,
+    modifiers: GridClickModifiers,
+    ev: PointerEvent
+  ) {
+    ev.preventDefault();
     if (this.composerFocusStore.activeComposer.editionMode === "editing") {
       this.composerFocusStore.activeComposer.stopEdition();
     }
@@ -505,7 +513,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
         this.paintFormatStore.pasteFormat(this.env.model.getters.getSelectedZones());
       }
     };
-    dragAndDropBeyondTheViewport(this.env, onMouseMove, onMouseUp);
+    this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
   }
 
   onCellDoubleClicked(col: HeaderIndex, row: HeaderIndex) {

src/components/grid_overlay/grid_overlay.ts

@@ -164,7 +164,12 @@ function useTouchMove(
 interface Props {
   onCellHovered: (position: Partial<Position>) => void;
   onCellDoubleClicked: (col: HeaderIndex, row: HeaderIndex) => void;
-  onCellClicked: (col: HeaderIndex, row: HeaderIndex, modifiers: GridClickModifiers) => void;
+  onCellClicked: (
+    col: HeaderIndex,
+    row: HeaderIndex,
+    modifiers: GridClickModifiers,
+    ev: MouseEvent
+  ) => void;
   onCellRightClicked: (col: HeaderIndex, row: HeaderIndex, coordinates: DOMCoordinates) => void;
   onGridResized: (dimension: Rect) => void;
   onGridMoved: (deltaX: Pixel, deltaY: Pixel) => void;
@@ -252,10 +257,15 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
       this.cellPopovers.close();
     }
     const [col, row] = this.getCartesianCoordinates(ev);
-    this.props.onCellClicked(col, row, {
-      expandZone: ev.shiftKey,
-      addZone: isCtrlKey(ev),
-    });
+    this.props.onCellClicked(
+      col,
+      row,
+      {
+        expandZone: ev.shiftKey,
+        addZone: isCtrlKey(ev),
+      },
+      ev
+    );
   }
 
   onDoubleClick(ev: MouseEvent) {

src/components/headers_overlay/headers_overlay.ts

@@ -22,7 +22,8 @@ import {
 import { ContextMenuType } from "../grid/grid";
 import { css, cssPropertiesToCss } from "../helpers/css";
 import { isCtrlKey } from "../helpers/dom_helpers";
-import { dragAndDropBeyondTheViewport, startDnd } from "../helpers/drag_and_drop";
+import { startDnd } from "../helpers/drag_and_drop";
+import { useDragAndDropBeyondTheViewport } from "../helpers/drag_and_drop_grid_hook";
 import { MergeErrorMessage } from "../translations_terms";
 import { ComposerFocusStore } from "./../composer/composer_focus_store";
 import { UnhideColumnHeaders, UnhideRowHeaders } from "./unhide_headers";
@@ -76,6 +77,8 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
     position: "before",
   });
 
+  dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
+
   abstract _getEvOffset(ev: MouseEvent): Pixel;
 
   abstract _getViewportOffset(): Pixel;
@@ -202,7 +205,7 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
     startDnd(onMouseMove, onMouseUp);
   }
 
-  select(ev: MouseEvent) {
+  select(ev: PointerEvent) {
     if (ev.button > 0) {
       // not main button, probably a context menu
       return;
@@ -227,7 +230,7 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
     this.startSelection(ev, index);
   }
 
-  private startMovement(ev: MouseEvent) {
+  private startMovement(ev: PointerEvent) {
     this.state.waitingForMove = false;
     this.state.isMoving = true;
     const startDimensions = this._getDimensionsInViewport(this._getSelectedZoneStart());
@@ -266,10 +269,10 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
       }
       this._computeGrabDisplay(ev);
     };
-    dragAndDropBeyondTheViewport(this.env, mouseMoveMovement, mouseUpMovement);
+    this.dragNDropGrid.start(ev, mouseMoveMovement, mouseUpMovement);
   }
 
-  private startSelection(ev: MouseEvent, index: HeaderIndex) {
+  private startSelection(ev: PointerEvent, index: HeaderIndex) {
     this.state.isSelecting = true;
     if (ev.shiftKey) {
       this._increaseSelection(index);
@@ -290,7 +293,7 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
       this.lastSelectedElementIndex = null;
       this._computeGrabDisplay(ev);
     };
-    dragAndDropBeyondTheViewport(this.env, mouseMoveSelect, mouseUpSelect);
+    this.dragNDropGrid.start(ev, mouseMoveSelect, mouseUpSelect);
   }
 
   onMouseUp(ev: MouseEvent) {

src/components/helpers/drag_and_drop.ts

@@ -1,176 +1,31 @@
-import { MAX_DELAY } from "../../helpers";
-import { SpreadsheetChildEnv } from "../../types/env";
-import { HeaderIndex } from "../../types/misc";
-import { gridOverlayPosition } from "./dom_helpers";
-type EventFn = (ev: MouseEvent) => void;
+type EventFn = (ev: PointerEvent) => void;
 
 /**
  * Start listening to pointer events and apply the given callbacks.
  *
  * @returns A function to remove the listeners.
  */
-export function startDnd(
-  onMouseMove: EventFn,
-  onMouseUp: EventFn,
-  onMouseDown: EventFn = () => {}
-) {
+export function startDnd(onPointerMove: EventFn, onPointerUp: EventFn) {
   const removeListeners = () => {
-    window.removeEventListener("pointerdown", onMouseDown);
-    window.removeEventListener("pointerup", _onMouseUp);
+    window.removeEventListener("pointerup", _onPointerUp);
     window.removeEventListener("dragstart", _onDragStart);
-    window.removeEventListener("pointermove", onMouseMove);
-    window.removeEventListener("wheel", onMouseMove);
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("wheel", onPointerMove);
   };
-  const _onMouseUp = (ev: MouseEvent) => {
-    onMouseUp(ev);
+  const _onPointerUp = (ev: PointerEvent) => {
+    onPointerUp(ev);
     removeListeners();
   };
   function _onDragStart(ev: DragEvent) {
     ev.preventDefault();
   }
-  window.addEventListener("pointerdown", onMouseDown);
-  window.addEventListener("pointerup", _onMouseUp);
+  window.addEventListener("pointerup", _onPointerUp);
   window.addEventListener("dragstart", _onDragStart);
-  window.addEventListener("pointermove", onMouseMove);
+  window.addEventListener("pointermove", onPointerMove);
   // mouse wheel on window is by default a passive event.
   // preventDefault() is not allowed in passive event handler.
   // https://chromestatus.com/feature/6662647093133312
-  window.addEventListener("wheel", onMouseMove, { passive: false });
+  window.addEventListener("wheel", onPointerMove, { passive: false });
 
   return removeListeners;
 }
-
-/**
- * Function to be used during a pointerdown event, this function allows to
- * perform actions related to the pointermove and pointerup events and adjusts the viewport
- * when the new position related to the pointermove event is outside of it.
- * Among inputs are two callback functions. First intended for actions performed during
- * the pointermove event, it receives as parameters the current position of the pointermove
- * (occurrence of the current column and the current row). Second intended for actions
- * performed during the pointerup event.
- */
-export function dragAndDropBeyondTheViewport(
-  env: SpreadsheetChildEnv,
-  cbMouseMove: (col: HeaderIndex, row: HeaderIndex, ev: MouseEvent) => void,
-  cbMouseUp: () => void,
-  only: "horizontal" | "vertical" | false = false
-) {
-  let timeOutId: any = null;
-  let currentEv: MouseEvent;
-  let previousEv: MouseEvent;
-  let startingEv: MouseEvent;
-  let startingX: number;
-  let startingY: number;
-  const getters = env.model.getters;
-  const sheetId = getters.getActiveSheetId();
-  const position = gridOverlayPosition();
-  let colIndex: number;
-  let rowIndex: number;
-  const onMouseDown = (ev: MouseEvent) => {
-    previousEv = ev;
-    startingEv = ev;
-    startingX = startingEv.clientX - position.left;
-    startingY = startingEv.clientY - position.top;
-  };
-  const onMouseMove = (ev: MouseEvent) => {
-    currentEv = ev;
-    if (timeOutId) {
-      return;
-    }
-
-    const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
-    let { top, left, bottom, right } = getters.getActiveMainViewport();
-    let { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
-    const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
-    let canEdgeScroll = false;
-    let timeoutDelay = MAX_DELAY;
-
-    const x = currentEv.clientX - position.left;
-    colIndex = getters.getColIndex(x);
-
-    if (only !== "vertical") {
-      const previousX = previousEv.clientX - position.left;
-      const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
-      if (edgeScrollInfoX.canEdgeScroll) {
-        canEdgeScroll = true;
-        timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
-        let newTarget: number;
-        switch (edgeScrollInfoX.direction) {
-          case "reset":
-            colIndex = xSplit;
-            newTarget = xSplit;
-            break;
-          case 1:
-            colIndex = right;
-            newTarget = left + 1;
-            break;
-          case -1:
-            colIndex = left - 1;
-            while (env.model.getters.isColHidden(sheetId, colIndex)) {
-              colIndex--;
-            }
-            newTarget = colIndex;
-            break;
-        }
-        scrollX = getters.getColDimensions(sheetId, newTarget!).start - offsetCorrectionX;
-      }
-    }
-
-    const y = currentEv.clientY - position.top;
-    rowIndex = getters.getRowIndex(y);
-
-    if (only !== "horizontal") {
-      const previousY = previousEv.clientY - position.top;
-      const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
-      if (edgeScrollInfoY.canEdgeScroll) {
-        canEdgeScroll = true;
-        timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
-        let newTarget: number;
-        switch (edgeScrollInfoY.direction) {
-          case "reset":
-            rowIndex = ySplit;
-            newTarget = ySplit;
-            break;
-          case 1:
-            rowIndex = bottom;
-            newTarget = top + edgeScrollInfoY.direction;
-            break;
-          case -1:
-            rowIndex = top - 1;
-            while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
-              rowIndex--;
-            }
-            newTarget = rowIndex;
-            break;
-        }
-        scrollY = env.model.getters.getRowDimensions(sheetId, newTarget!).start - offsetCorrectionY;
-      }
-    }
-
-    if (!canEdgeScroll) {
-      if (rowIndex === -1) {
-        rowIndex = y < 0 ? 0 : getters.getNumberRows(sheetId) - 1;
-      }
-      if (colIndex === -1 && x < 0) {
-        colIndex = x < 0 ? 0 : getters.getNumberCols(sheetId) - 1;
-      }
-    }
-
-    cbMouseMove(colIndex, rowIndex, currentEv);
-    if (canEdgeScroll) {
-      env.model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: scrollX, offsetY: scrollY });
-      timeOutId = setTimeout(() => {
-        timeOutId = null;
-        onMouseMove(currentEv);
-      }, Math.round(timeoutDelay));
-    }
-    previousEv = currentEv;
-  };
-
-  const onMouseUp = () => {
-    clearTimeout(timeOutId);
-    cbMouseUp();
-  };
-
-  startDnd(onMouseMove, onMouseUp, onMouseDown);
-}