Scheduler: fix broken resize in vertical grouping

e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/verticalGrouping.ts

@@ -12,16 +12,12 @@ test('Should correctly calculate group resizing area (T1025952)', async (t) => {
 
   await t
     .drag(firstAppointment.resizableHandle.bottom, 0, 100)
-    .expect(firstAppointment.size.height)
-    .eql('140.594px')
     .expect(firstAppointment.date.time)
-    .eql('9:30 AM - 11:21 AM')
+    .eql('9:30 AM - 11:00 AM')
 
     .drag(secondAppointment.resizableHandle.bottom, 0, 100)
-    .expect(secondAppointment.size.height)
-    .eql('165.922px')
     .expect(secondAppointment.date.time)
-    .eql('9:30 AM - 11:41 AM');
+    .eql('9:30 AM - 11:00 AM');
 }).before(async () => createScheduler({
   dataSource: [
     {
@@ -74,10 +70,8 @@ test('Should correctly calculate group resizing area after scroll (T1041672)', a
 
   await t
     .drag(appointment.resizableHandle.bottom, 0, 100)
-    .expect(appointment.size.height)
-    .eql('165.922px')
     .expect(appointment.date.time)
-    .eql('9:30 AM - 11:41 AM');
+    .eql('9:30 AM - 11:00 AM');
 }).before(async () => createScheduler({
   dataSource: [
     {

packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts

@@ -282,7 +282,13 @@ export class Appointment extends DOMComponent<AppointmentProperties> {
   _createResizingConfig() {
     const config: any = this.option('direction') === 'vertical' ? this._getVerticalResizingRule() : this._getHorizontalResizingRule();
 
-    if (!this.invoke('isGroupedByDate')) {
+    const cellHeight = Math.round(this.invoke('getCellHeight') ?? 0);
+    const allDayHeight = Math.round(this.invoke('getAllDayHeight') ?? 0);
+    const allDayBreaksCellGrid = Boolean(this.invoke('isVerticalGroupedWorkSpace'))
+      && allDayHeight > 0
+      && allDayHeight !== cellHeight;
+
+    if (!this.invoke('isGroupedByDate') && !allDayBreaksCellGrid) {
       config.stepPrecision = 'strict';
     }
 

packages/devextreme/js/__internal/scheduler/m_subscribes.ts

@@ -200,6 +200,14 @@ const subscribes = {
     return this.getWorkSpace().getCellHeight();
   },
 
+  getAllDayHeight() {
+    return this.getWorkSpace().getAllDayHeight();
+  },
+
+  isVerticalGroupedWorkSpace() {
+    return this.getWorkSpace().isVerticalGroupedWorkSpace();
+  },
+
   needCorrectAppointmentDates() {
     return !['month', 'timelineMonth'].includes(this.currentView.type);
   },

packages/devextreme/js/__internal/scheduler/workspaces/work_space.ts

@@ -830,11 +830,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       useKeyboard: false,
       bounceEnabled: false,
       updateManually: true,
-      onScroll: () => {
-        if (this.groupedStrategy instanceof VerticalGroupedStrategy) {
-          this.groupedStrategy.cache.clear();
-        }
-      },
       // TODO (Scrollable:useKeyboard) -> remove this WA
       //  after ScrollView private option "useKeyboard" will be extended to useNative: true
       // NOTE: Scrollable container focusable by default
@@ -1635,15 +1630,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     return this.$element().find(`.${cellClass}`);
   }
 
-  private getFirstAndLastDataTableCell(): Element[] {
-    const selector = this.isVirtualScrolling()
-      ? `.${DATE_TABLE_CELL_CLASS}, .${VIRTUAL_CELL_CLASS}`
-      : `.${DATE_TABLE_CELL_CLASS}`;
-
-    const $cells = this.$element().find(selector);
-    return [$cells.get(0), $cells.get(-1)];
-  }
-
   private getAllCells(allDay: boolean): dxElementWrapper {
     if (this.isVerticalGroupedWorkSpace()) {
       return this.$dateTable.find(`td:not(.${VIRTUAL_CELL_CLASS})`);
@@ -1937,13 +1923,25 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
   }
 
   getGroupBoundsVertical(groupIndex: number): GroupBoundsOffset | undefined {
-    const $firstAndLastCells = this.getFirstAndLastDataTableCell();
-    if (this.groupedStrategy instanceof VerticalGroupedStrategy) {
-      return this.groupedStrategy.getGroupBoundsOffset(groupIndex, [
-        $firstAndLastCells[0], $firstAndLastCells[1],
-      ]);
+    if (!(this.groupedStrategy instanceof VerticalGroupedStrategy)) {
+      return undefined;
     }
-    return undefined;
+
+    const $dateTable = this.getDateTable();
+    const dateTableOffset = $dateTable.offset();
+
+    if (!dateTableOffset) {
+      return undefined;
+    }
+
+    const { top, height } = this.groupedStrategy.getGroupVerticalOffset(groupIndex);
+
+    return {
+      left: dateTableOffset.left,
+      right: dateTableOffset.left + (getOuterWidth($dateTable) as number),
+      top: dateTableOffset.top + top,
+      bottom: dateTableOffset.top + top + height,
+    };
   }
 
   getGroupBoundsHorizontal(

packages/devextreme/js/__internal/scheduler/workspaces/work_space_grouped_strategy_vertical.test.ts

@@ -72,16 +72,9 @@ describe('VerticalGroupedStrategy', () => {
   it('should use uniform group heights when group heights are not specified', () => {
     const strategy = new VerticalGroupedStrategy(createConfig());
 
-    const result = strategy.getGroupBoundsOffset(2, [
-      createElement({ left: 10 }),
-      createElement({ right: 710 }),
-    ]);
-
-    expect(result).toEqual({
-      left: 10,
-      right: 710,
-      top: 2 * 480 + 20 + 5 - 10,
-      bottom: 2 * 480 + 20 + 5 - 10 + 480,
+    expect(strategy.getGroupVerticalOffset(2)).toEqual({
+      top: 2 * 480,
+      height: 480,
     });
   });
 
@@ -90,16 +83,22 @@ describe('VerticalGroupedStrategy', () => {
       getGroupHeights: (): number[] => [100, 200, 300],
     }));
 
-    const result = strategy.getGroupBoundsOffset(2, [
-      createElement({ left: 10 }),
-      createElement({ right: 710 }),
-    ]);
+    expect(strategy.getGroupVerticalOffset(2)).toEqual({
+      top: 100 + 200,
+      height: 300,
+    });
+  });
+
+  it('should offset group bounds by the all-day row height, not by the cell height', () => {
+    const strategy = new VerticalGroupedStrategy(createConfig({
+      getGroupHeights: (): number[] => [100, 200, 300],
+      supportAllDayRow: (): boolean => true,
+      showAllDayPanel: (): boolean => true,
+    }));
 
-    expect(result).toEqual({
-      left: 10,
-      right: 710,
-      top: 100 + 200 + 20 + 5 - 10,
-      bottom: 100 + 200 + 20 + 5 - 10 + 300,
+    expect(strategy.getGroupVerticalOffset(2)).toEqual({
+      top: 100 + 200 + 20 * 3,
+      height: 300,
     });
   });
 

packages/devextreme/js/__internal/scheduler/workspaces/work_space_grouped_strategy_vertical.ts

@@ -1,19 +1,14 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import { getBoundingRect } from '@js/core/utils/position';
 import { calculateDayDuration, getVerticalGroupCountClass } from '@ts/scheduler/r1/utils/index';
-import type { CellPositionData, GroupBoundsOffset } from '@ts/scheduler/types';
+import type { CellPositionData } from '@ts/scheduler/types';
 import { WORK_SPACE_BORDER_PX } from '@ts/scheduler/workspaces/const';
 
 import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../classes';
-import { Cache } from '../global_cache';
 import type { ResourceLoader } from '../utils/loader/resource_loader';
 import type { GroupedStrategyConfig } from './work_space_grouped_strategy_config';
 
 class VerticalGroupedStrategy {
-  cache = new Cache();
-
-  private groupBoundsOffset!: GroupBoundsOffset;
-
   constructor(private readonly config: GroupedStrategyConfig) {}
 
   prepareCellIndexes(cellCoordinates: CellPositionData, groupIndex: number, inAllDayRow: boolean)
@@ -108,35 +103,16 @@ class VerticalGroupedStrategy {
     return offset;
   }
 
-  getGroupBoundsOffset(groupIndex: number, [$firstCell, $lastCell]: [Element, Element])
-  : GroupBoundsOffset {
-    const groupHeightsKey = this.config.getGroupHeights?.()?.join('.') ?? '';
-
-    return this.cache.memo(`groupBoundsOffset${groupIndex}.${groupHeightsKey}`, () => {
-      const groupHeight = this.getGroupHeight(groupIndex);
-      const scrollTop = this.getScrollableScrollTop();
-      const headerRowHeight = getBoundingRect(this.config.getHeaderPanelContainerElement()).height;
-
-      let topOffset = this.getCumulativeGroupOffset(groupIndex) + headerRowHeight
-        + this.config.getHeaderHeight() - scrollTop;
-
-      if (this.config.showAllDayPanel() && this.config.supportAllDayRow()) {
-        topOffset += this.config.getCellHeight() * (groupIndex + 1);
-      }
-
-      const bottomOffset = topOffset + groupHeight;
-
-      const { left } = $firstCell.getBoundingClientRect();
-      const { right } = $lastCell.getBoundingClientRect();
-      this.groupBoundsOffset = {
-        left,
-        right,
-        top: topOffset,
-        bottom: bottomOffset,
-      };
+  getGroupVerticalOffset(groupIndex: number): { top: number; height: number } {
+    const hasAllDayRows = this.config.showAllDayPanel() && this.config.supportAllDayRow();
+    const allDayOffset = hasAllDayRows
+      ? this.config.getAllDayHeight() * (groupIndex + 1)
+      : 0;
 
-      return this.groupBoundsOffset;
-    });
+    return {
+      top: this.getCumulativeGroupOffset(groupIndex) + allDayOffset,
+      height: this.getGroupHeight(groupIndex),
+    };
   }
 
   shiftIndicator($indicator: dxElementWrapper, height: number, rtlOffset: number, i: number): void {