refactor: extract drag & drop state and logic to mobx

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/features/column/ColumnHeader.viewModel.ts

@@ -0,0 +1,114 @@
+import { makeAutoObservable } from "mobx";
+import { DragEvent, DragEventHandler } from "react";
+import { HeaderDragnDropStore } from "./HeaderDragnDrop.store";
+import { ColumnId } from "../../typings/GridColumn";
+import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
+
+/**
+ * View model for a single column header drag & drop interactions.
+ * Encapsulates previous `useDraggable` hook logic and uses MobX store for shared drag state.
+ */
+export class ColumnHeaderViewModel {
+    private readonly dndStore: HeaderDragnDropStore;
+    private readonly columnsStore: ColumnGroupStore;
+    private readonly columnsDraggable: boolean;
+
+    constructor(params: { dndStore: HeaderDragnDropStore; columnsStore: ColumnGroupStore; columnsDraggable: boolean }) {
+        this.dndStore = params.dndStore;
+        this.columnsStore = params.columnsStore;
+        this.columnsDraggable = params.columnsDraggable;
+        makeAutoObservable(this);
+    }
+
+    get dropTarget(): [ColumnId, "before" | "after"] | undefined {
+        return this.dndStore.dragOver;
+    }
+
+    get dragging(): [ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined {
+        return this.dndStore.isDragging;
+    }
+
+    /** Handlers exposed to the component. */
+    get draggableProps(): {
+        draggable?: boolean;
+        onDragStart?: DragEventHandler;
+        onDragOver?: DragEventHandler;
+        onDrop?: DragEventHandler;
+        onDragEnter?: DragEventHandler;
+        onDragEnd?: DragEventHandler;
+    } {
+        if (!this.columnsDraggable) {
+            return {};
+        }
+        return {
+            draggable: true,
+            onDragStart: this.handleDragStart,
+            onDragOver: this.handleDragOver,
+            onDrop: this.handleOnDrop,
+            onDragEnter: this.handleDragEnter,
+            onDragEnd: this.handleDragEnd
+        };
+    }
+
+    private handleDragStart = (e: DragEvent<HTMLDivElement>): void => {
+        const elt = (e.target as HTMLDivElement).closest(".th") as HTMLDivElement;
+        if (!elt) {
+            return;
+        }
+        const columnId = (elt.dataset.columnId ?? "") as ColumnId;
+        const columnAtTheLeft = (elt.previousElementSibling as HTMLDivElement)?.dataset?.columnId as ColumnId;
+        const columnAtTheRight = (elt.nextElementSibling as HTMLDivElement)?.dataset?.columnId as ColumnId;
+        this.dndStore.setIsDragging([columnAtTheLeft, columnId, columnAtTheRight]);
+    };
+
+    private handleDragOver = (e: DragEvent<HTMLDivElement>): void => {
+        const dragging = this.dragging;
+        if (!dragging) {
+            return;
+        }
+        const columnId = (e.currentTarget as HTMLDivElement).dataset.columnId as ColumnId;
+        if (!columnId) {
+            return;
+        }
+        e.preventDefault();
+        const [leftSiblingColumnId, draggingColumnId, rightSiblingColumnId] = dragging;
+        if (columnId === draggingColumnId) {
+            if (this.dropTarget !== undefined) {
+                this.dndStore.setDragOver(undefined);
+            }
+            return;
+        }
+        let isAfter: boolean;
+        if (columnId === leftSiblingColumnId) {
+            isAfter = false;
+        } else if (columnId === rightSiblingColumnId) {
+            isAfter = true;
+        } else {
+            const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+            isAfter = rect.width / 2 + (this.dropTarget?.[1] === "after" ? -10 : 10) < e.clientX - rect.left;
+        }
+        const newPosition: "before" | "after" = isAfter ? "after" : "before";
+        if (columnId !== this.dropTarget?.[0] || newPosition !== this.dropTarget?.[1]) {
+            this.dndStore.setDragOver([columnId, newPosition]);
+        }
+    };
+
+    private handleDragEnter = (e: DragEvent<HTMLDivElement>): void => {
+        e.preventDefault();
+    };
+
+    private handleDragEnd = (): void => {
+        this.dndStore.clearDragState();
+    };
+
+    private handleOnDrop = (_e: DragEvent<HTMLDivElement>): void => {
+        const dragging = this.dragging;
+        const dropTarget = this.dropTarget;
+        this.handleDragEnd();
+        if (!dragging || !dropTarget) {
+            return;
+        }
+        // Reorder columns using existing columns store logic
+        this.columnsStore.swapColumns(dragging[1], dropTarget);
+    };
+}

packages/pluggableWidgets/datagrid-web/src/features/column/HeaderDragnDrop.store.ts

@@ -0,0 +1,36 @@
+import { action, makeAutoObservable } from "mobx";
+import { ColumnId } from "../../typings/GridColumn";
+
+export class HeaderDragnDropStore {
+    private _dragOver: [ColumnId, "before" | "after"] | undefined = undefined;
+    private _isDragging: [ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined = undefined;
+
+    constructor() {
+        makeAutoObservable(this, {
+            setDragOver: action,
+            setIsDragging: action,
+            clearDragState: action
+        });
+    }
+
+    get dragOver(): [ColumnId, "before" | "after"] | undefined {
+        return this._dragOver;
+    }
+
+    get isDragging(): [ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined {
+        return this._isDragging;
+    }
+
+    setDragOver(value: [ColumnId, "before" | "after"] | undefined): void {
+        this._dragOver = value;
+    }
+
+    setIsDragging(value: [ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined): void {
+        this._isDragging = value;
+    }
+
+    clearDragState(): void {
+        this._dragOver = undefined;
+        this._isDragging = undefined;
+    }
+}

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts

@@ -22,6 +22,7 @@ import { createCellEventsController } from "../../features/row-interaction/CellE
 import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
+import { HeaderDragnDropStore } from "../../features/column/HeaderDragnDrop.store";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
@@ -94,6 +95,8 @@ export class DatagridContainer extends Container {
         this.bind(DG.basicDate).toInstance(GridBasicData).inSingletonScope();
         // Columns store
         this.bind(CORE.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
+        // Drag and Drop store
+        this.bind(DG.headerDragDrop).toInstance(HeaderDragnDropStore).inSingletonScope();
         // Query service
         this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
         // Pagination service

packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts

@@ -20,6 +20,7 @@ export const [useRowClass] = createInjectionHooks(DG.rowClass);
 export const [useDatagridRootVM] = createInjectionHooks(DG.datagridRootVM);
 export const [useRows] = createInjectionHooks(CORE.rows);
 export const [useSelectActions] = createInjectionHooks(DG.selectActions);
+export const [useHeaderDragDrop] = createInjectionHooks(DG.headerDragDrop);
 export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper);
 export const [useFocusService] = createInjectionHooks(DG.focusService);
 export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);

packages/pluggableWidgets/datagrid-web/src/model/tokens.ts

@@ -33,6 +33,7 @@ import { SelectionProgressDialogViewModel } from "../features/select-all/Selecti
 import { ColumnGroupStore } from "../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationStore";
+import { HeaderDragnDropStore } from "../features/column/HeaderDragnDrop.store";
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
 import { GridColumn } from "../typings/GridColumn";
 import { DatagridConfig } from "./configs/Datagrid.config";
@@ -131,6 +132,7 @@ export const DG_TOKENS = {
     clickActionHelper: token<ClickActionHelper>("@service:ClickActionHelper"),
     focusService: token<FocusTargetController>("@service:FocusTargetController"),
     checkboxEventsHandler: token<CheckboxEventsController>("@service:CheckboxEventsController"),
+    headerDragDrop: token<HeaderDragnDropStore>("HeaderDragnDropStore"),
     cellEventsHandler: token<CellEventsController>("@service:CellEventsController")
 };