DataGrid: prevent column resizing in band area (T1317039)

e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/functional.ts

@@ -0,0 +1,152 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+
+import { ClientFunction } from 'testcafe';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Column resizing`
+  .page(url(__dirname, '../../../container.html'));
+
+// T1314667
+test('DataGrid – Resize indicator is moved when resizing a grouped column if showWhenGrouped is set to true', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.resizeHeader(3, 30, false);
+
+  await t
+    .expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
+    .within(128, 130);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{
+      ID: 1,
+      Country: 'Brazil',
+      Area: 8515767,
+      Population_Urban: 0.85,
+      Population_Rural: 0.15,
+      Population_Total: 205809000,
+    }],
+    keyExpr: 'ID',
+    allowColumnResizing: true,
+    columnResizingMode: 'widget',
+    width: 500,
+    columns: [
+      {
+        dataField: 'ID',
+        fixed: true,
+        allowReordering: false,
+        width: 50,
+      },
+
+      {
+        caption: 'Population',
+        columns: [
+          {
+            dataField: 'Country',
+            showWhenGrouped: true,
+            width: 100,
+            groupIndex: 0,
+          },
+          { dataField: 'Area' },
+          { dataField: 'Population_Total' },
+          { dataField: 'Population_Urban' },
+          { dataField: 'Population_Rural' },
+        ],
+      },
+    ],
+  });
+});
+
+const tryResizeHeaderInBandArea = (
+  dataGrid: DataGrid,
+  columnIndex: number,
+  offset: number,
+): Promise<void> => {
+  const { getInstance } = dataGrid;
+
+  const triggerPointerEvent = ($element: JQuery<any>, eventName: string, x: number, y: number) => {
+    $element
+      .trigger($.Event(eventName, {
+        pageX: x,
+        pageY: y,
+        pointers: [{ pointerId: 1 }],
+      }));
+  };
+
+  return ClientFunction(
+    () => {
+      const gridInstance = getInstance() as any;
+      const $gridElement = $(gridInstance.element());
+      const columnHeadersView = gridInstance.getView('columnHeadersView');
+      const $header = $(columnHeadersView.getHeaderElement(columnIndex));
+      const headerOffset = $header.offset();
+
+      triggerPointerEvent($(document), 'dxpointermove', headerOffset.left, headerOffset.top - 10);
+      triggerPointerEvent($gridElement, 'dxpointerdown', headerOffset.left, headerOffset.top - 10);
+      triggerPointerEvent($(document), 'dxpointermove', headerOffset.left + offset, headerOffset.top - 10);
+      triggerPointerEvent($(document), 'dxpointerup', headerOffset.left + offset, headerOffset.top - 10);
+    },
+    {
+      dependencies: {
+        getInstance,
+        triggerPointerEvent,
+        columnIndex,
+        offset,
+      },
+    },
+  )();
+};
+
+// T1317039
+test('DataGrid – Columns should not be resized from band area (T1317039)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await tryResizeHeaderInBandArea(dataGrid, 3, 30);
+
+  await t
+    .expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
+    .within(98, 100);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{
+      ID: 1,
+      Country: 'Brazil',
+      Area: 8515767,
+      Population_Urban: 0.85,
+      Population_Rural: 0.15,
+      Population_Total: 205809000,
+    }],
+    keyExpr: 'ID',
+    allowColumnResizing: true,
+    columnResizingMode: 'widget',
+    width: 500,
+    columns: [
+      {
+        dataField: 'ID',
+        fixed: true,
+        allowReordering: false,
+        width: 50,
+      },
+
+      {
+        caption: 'Population',
+        columns: [
+          {
+            dataField: 'Country',
+            showWhenGrouped: true,
+            width: 100,
+            groupIndex: 0,
+          },
+          { dataField: 'Area' },
+          { dataField: 'Population_Total' },
+          { dataField: 'Population_Urban' },
+          { dataField: 'Population_Rural' },
+        ],
+      },
+    ],
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts → e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/visual.ts

@@ -1,12 +1,12 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 
-import url from '../../../helpers/getPageUrl';
-import { createWidget } from '../../../helpers/createWidget';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Column resizing`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 test('column separator should starts from the parent', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -72,55 +72,3 @@ test('column separator should starts from the parent', async (t) => {
     columns: ['GDP_Total', 'Population_Urban'],
   }, 'Area'],
 }));
-
-// T1314667
-test('DataGrid – Resize indicator is moved when resizing a grouped column if showWhenGrouped is set to true', async (t) => {
-  const dataGrid = new DataGrid('#container');
-
-  await t.expect(dataGrid.isReady()).ok();
-
-  await dataGrid.resizeHeader(3, 30, false);
-
-  await t
-    .expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
-    .within(128, 130);
-}).before(async () => {
-  await createWidget('dxDataGrid', {
-    dataSource: [{
-      ID: 1,
-      Country: 'Brazil',
-      Area: 8515767,
-      Population_Urban: 0.85,
-      Population_Rural: 0.15,
-      Population_Total: 205809000,
-    }],
-    keyExpr: 'ID',
-    allowColumnResizing: true,
-    columnResizingMode: 'widget',
-    width: 500,
-    columns: [
-      {
-        dataField: 'ID',
-        fixed: true,
-        allowReordering: false,
-        width: 50,
-      },
-
-      {
-        caption: 'Population',
-        columns: [
-          {
-            dataField: 'Country',
-            showWhenGrouped: true,
-            width: 100,
-            groupIndex: 0,
-          },
-          { dataField: 'Area' },
-          { dataField: 'Population_Total' },
-          { dataField: 'Population_Urban' },
-          { dataField: 'Population_Rural' },
-        ],
-      },
-    ],
-  });
-});

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -23,7 +23,7 @@ import type {
   DraggingHeaderViewController,
 } from '../columns_resizing_reordering/m_columns_resizing_reordering';
 import type { KeyboardNavigationController } from '../keyboard_navigation/m_keyboard_navigation';
-import type { ModuleType } from '../m_types';
+import type { ColumnPoint, Coordinates, ModuleType } from '../m_types';
 import gridCoreUtils from '../m_utils';
 import type { ColumnsView } from '../views/m_columns_view';
 import { normalizeWidth } from '../views/m_columns_view';
@@ -1130,19 +1130,23 @@ const columnsResizer = (Base: ModuleType<ColumnsResizerViewController>) => class
     }
   }
 
-  protected _getTargetPoint(pointsByColumns, currentX, deltaX) {
+  protected _getTargetPoint(
+    pointsByColumns: ColumnPoint[] | null | undefined,
+    currentPoint: Coordinates,
+    deltaX: number,
+  ): ColumnPoint | null {
     // @ts-expect-error
     const $transparentColumn = this._columnHeadersView.getTransparentColumnElement();
 
     if ($transparentColumn && $transparentColumn.length) {
       const boundingRect = getBoundingRect($transparentColumn.get(0));
 
-      if (currentX <= boundingRect.left || currentX >= boundingRect.right) {
-        return super._getTargetPoint(this._pointsByFixedColumns, currentX, deltaX);
+      if (currentPoint.x <= boundingRect.left || currentPoint.x >= boundingRect.right) {
+        return super._getTargetPoint(this._pointsByFixedColumns, currentPoint, deltaX);
       }
     }
 
-    return super._getTargetPoint(pointsByColumns, currentX, deltaX);
+    return super._getTargetPoint(pointsByColumns, currentPoint, deltaX);
   }
 };
 

packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.ts

@@ -24,7 +24,7 @@ import { isDefined, isObject, isString } from '@js/core/utils/type';
 import swatchContainer from '@ts/core/utils/swatch_container';
 import { getDraggingPanelBoundingRects } from '@ts/grids/grid_core/columns_resizing_reordering/utils';
 import type { EditorFactory } from '@ts/grids/grid_core/editor_factory/m_editor_factory';
-import type { ColumnPoint, ModuleType } from '@ts/grids/grid_core/m_types';
+import type { ColumnPoint, Coordinates, ModuleType } from '@ts/grids/grid_core/m_types';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 
 import type { ColumnChooserView } from '../column_chooser/m_column_chooser';
@@ -668,13 +668,13 @@ export class ColumnsResizerViewController extends modules.ViewController {
 
   private _$parentContainer: any;
 
-  public _targetPoint: any;
+  public _targetPoint?: ColumnPoint | null;
 
   private _resizingInfo: any;
 
   protected _columnsController!: ColumnsController;
 
-  private _pointsByColumns: any;
+  private _pointsByColumns?: ColumnPoint[] | null;
 
   private _moveSeparatorHandler: any;
 
@@ -785,13 +785,24 @@ export class ColumnsResizerViewController extends modules.ViewController {
   /**
    * @extended: column_fixing
    */
-  protected _getTargetPoint(pointsByColumns, currentX, deltaX) {
+  protected _getTargetPoint(
+    pointsByColumns: ColumnPoint[] | null | undefined,
+    currentPoint: Coordinates,
+    deltaX: number,
+  ): ColumnPoint | null {
     if (pointsByColumns) {
-      for (let i = 0; i < pointsByColumns.length; i++) {
-        if (pointsByColumns[i].x === pointsByColumns[0].x && pointsByColumns[i + 1] && pointsByColumns[i].x === pointsByColumns[i + 1].x) {
+      for (let i = 0; i < pointsByColumns.length; i += 1) {
+        if (pointsByColumns[i].x === pointsByColumns[0].x
+          && pointsByColumns[i + 1]
+          && pointsByColumns[i].x === pointsByColumns[i + 1].x
+        ) {
+          // eslint-disable-next-line no-continue
           continue;
         }
-        if (pointsByColumns[i].x - deltaX <= currentX && currentX <= pointsByColumns[i].x + deltaX) {
+        if (currentPoint.y >= pointsByColumns[i].y
+          && pointsByColumns[i].x - deltaX <= currentPoint.x
+          && currentPoint.x <= pointsByColumns[i].x + deltaX
+        ) {
           return pointsByColumns[i];
         }
       }
@@ -843,7 +854,11 @@ export class ColumnsResizerViewController extends modules.ViewController {
           }
         }
 
-        that._targetPoint = that._getTargetPoint(that.pointsByColumns(), eventData.x, columnsSeparatorWidth);
+        that._targetPoint = that._getTargetPoint(
+          that.pointsByColumns(),
+          eventData,
+          columnsSeparatorWidth,
+        );
         that._previousParentOffset = parentOffset;
         that._isReadyResizing = false;
 
@@ -895,19 +910,21 @@ export class ColumnsResizerViewController extends modules.ViewController {
   }
 
   private _setupResizingInfo(posX) {
-    const currentColumnIndex = this._targetPoint.columnIndex;
-    const nextColumnIndex = this._getNextColumnIndex(currentColumnIndex);
-    const $currentHeader = this._columnHeadersView.getHeaderElement(currentColumnIndex);
-    const $nextHeader = this._columnHeadersView.getHeaderElement(nextColumnIndex);
-
-    this._resizingInfo = {
-      startPosX: posX,
-      currentColumnIndex,
-      currentColumnWidth: $currentHeader?.length ? getBoundingRect($currentHeader[0]).width : 0,
-      nextColumnIndex,
-      nextColumnWidth: $nextHeader?.length ? getBoundingRect($nextHeader[0]).width : 0,
-      needToInvertResizing: this._needToInvertResizing($currentHeader),
-    };
+    if (this._targetPoint) {
+      const currentColumnIndex = this._targetPoint.columnIndex;
+      const nextColumnIndex = this._getNextColumnIndex(currentColumnIndex);
+      const $currentHeader = this._columnHeadersView.getHeaderElement(currentColumnIndex);
+      const $nextHeader = this._columnHeadersView.getHeaderElement(nextColumnIndex);
+
+      this._resizingInfo = {
+        startPosX: posX,
+        currentColumnIndex,
+        currentColumnWidth: $currentHeader?.length ? getBoundingRect($currentHeader[0]).width : 0,
+        nextColumnIndex,
+        nextColumnWidth: $nextHeader?.length ? getBoundingRect($nextHeader[0]).width : 0,
+        needToInvertResizing: this._needToInvertResizing($currentHeader),
+      };
+    }
   }
 
   /**
@@ -920,7 +937,11 @@ export class ColumnsResizerViewController extends modules.ViewController {
 
     if (isTouchEvent(e)) {
       if (that._isHeadersRowArea(eventData.y)) {
-        that._targetPoint = that._getTargetPoint(that.pointsByColumns(), eventData.x, COLUMNS_SEPARATOR_TOUCH_TRACKER_WIDTH);
+        that._targetPoint = that._getTargetPoint(
+          that.pointsByColumns(),
+          eventData,
+          COLUMNS_SEPARATOR_TOUCH_TRACKER_WIDTH,
+        );
         if (that._targetPoint) {
           that._columnsSeparatorView.moveByX(that._targetPoint.x - that._columnsSeparatorView.width() / 2);
           that._isReadyResizing = true;
@@ -1270,15 +1291,14 @@ export class ColumnsResizerViewController extends modules.ViewController {
     return this._isResizing;
   }
 
-  private pointsByColumns(value) {
+  private pointsByColumns(value?: ColumnPoint[] | null): ColumnPoint[] | null | undefined {
     if (value !== undefined) {
       this._pointsByColumns = value;
-    } else {
-      if (!this._pointsByColumns) {
-        this._generatePointsByColumns();
-      }
-      return this._pointsByColumns;
+    } else if (!this._pointsByColumns) {
+      this._generatePointsByColumns();
     }
+
+    return this._pointsByColumns;
   }
 }