refactor(scheduler): pass config object to grouped strategies

bit-byte0 · bit-byte0 · commit 0c2749c75a77 · 2026-06-09T21:34:56.000+04:00
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/grouped_strategy.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/grouped_strategy.test.ts
@@ -0,0 +1,68 @@
+import {
+  describe, expect, it,
+} from '@jest/globals';
+
+import type { WorkspaceGroupedStrategyConfig } from '../workspaces/types';
+import HorizontalGroupedStrategy from '../workspaces/work_space_grouped_strategy_horizontal';
+import VerticalGroupedStrategy from '../workspaces/work_space_grouped_strategy_vertical';
+
+const createConfig = (
+  overrides: Partial<WorkspaceGroupedStrategyConfig> = {},
+): WorkspaceGroupedStrategyConfig => ({
+  isGroupedByDate: () => false,
+  getCellCount: () => 7,
+  getGroupCount: () => 3,
+  getRowCount: () => 48,
+  getCellWidth: () => 75,
+  getCellHeight: () => 50,
+  getAllDayHeight: () => 30,
+  getTimePanelWidth: () => 100,
+  getGroupTableWidth: () => 60,
+  getWorkSpaceWidth: () => 800,
+  getWorkSpaceLeftOffset: () => 160,
+  getIndicatorOffset: () => 10,
+  getIndicationHeight: () => 200,
+  getIndicationWidth: () => 300,
+  getCellIndexByCoordinates: () => 5,
+  supportAllDayRow: () => true,
+  getScrollableScrollTop: () => 0,
+  getScrollableContentElement: () => document.createElement('div'),
+  getElement: () => document.createElement('div'),
+  getHeaderPanelContainerElement: () => document.createElement('div'),
+  isRtlEnabled: () => false,
+  isShowAllDayPanel: () => true,
+  isCrossScrollingEnabled: () => false,
+  getStartDayHour: () => 0,
+  getEndDayHour: () => 24,
+  getHoursInterval: () => 0.5,
+  getHeaderHeight: () => 40,
+  ...overrides,
+});
+
+describe('HorizontalGroupedStrategy with config object', () => {
+  it('should work with config interface instead of workspace', () => {
+    const strategy = new HorizontalGroupedStrategy(
+      createConfig({ getCellCount: () => 5, getGroupCount: () => 4 }),
+    );
+
+    const result = strategy.prepareCellIndexes({ rowIndex: 2, columnIndex: 3 }, 2);
+
+    expect(result.columnIndex).toBe(3 + 2 * 5);
+    expect(result.rowIndex).toBe(2);
+  });
+});
+
+describe('VerticalGroupedStrategy with config object', () => {
+  it('should work with config interface instead of workspace', () => {
+    const strategy = new VerticalGroupedStrategy(createConfig({
+      getRowCount: () => 10,
+      supportAllDayRow: () => true,
+      isShowAllDayPanel: () => true,
+    }));
+
+    const result = strategy.prepareCellIndexes({ rowIndex: 3, columnIndex: 2 }, 2, false);
+
+    expect(result.rowIndex).toBe(3 + 2 * 10 + 2 + 1);
+    expect(result.columnIndex).toBe(2);
+  });
+});
diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts
@@ -98,6 +98,7 @@ import {
   getMaxAllowedPosition,
   PositionHelper,
 } from './helpers/position_helper';
+import type { WorkspaceGroupedStrategyConfig } from './types';
 import type { ViewDataProviderOptions } from './view_model/m_types';
 import ViewDataProvider from './view_model/m_view_data_provider';
 import { VirtualScrollingDispatcher, VirtualScrollingRenderer } from './virtual_scrolling';
@@ -2625,7 +2626,37 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       ? VerticalGroupedStrategy
       : HorizontalGroupedStrategy;
 
-    this.groupedStrategy = new Strategy(this);
+    const config: WorkspaceGroupedStrategyConfig = {
+      isGroupedByDate: this.isGroupedByDate.bind(this),
+      getCellCount: this.getCellCount.bind(this),
+      getGroupCount: this.getGroupCount.bind(this),
+      getRowCount: this.getRowCount.bind(this),
+      getCellWidth: this.getCellWidth.bind(this),
+      getCellHeight: this.getCellHeight.bind(this),
+      getAllDayHeight: this.getAllDayHeight.bind(this),
+      getTimePanelWidth: this.getTimePanelWidth.bind(this),
+      getGroupTableWidth: this.getGroupTableWidth.bind(this),
+      getWorkSpaceWidth: this.getWorkSpaceWidth.bind(this),
+      getWorkSpaceLeftOffset: this.getWorkSpaceLeftOffset.bind(this),
+      getIndicatorOffset: (this as any).getIndicatorOffset.bind(this),
+      getIndicationHeight: (this as any).getIndicationHeight.bind(this),
+      getIndicationWidth: (this as any).getIndicationWidth.bind(this),
+      getCellIndexByCoordinates: this.getCellIndexByCoordinates.bind(this),
+      supportAllDayRow: this.supportAllDayRow.bind(this),
+      getScrollableScrollTop: () => this.getScrollable().scrollTop(),
+      getScrollableContentElement: () => this.getScrollable().$content().get(0) as HTMLElement,
+      getElement: () => (this.$element() as any).get(0) as HTMLElement,
+      getHeaderPanelContainerElement: () => this.$headerPanelContainer.get(0) as HTMLElement,
+      isRtlEnabled: () => this.option('rtlEnabled'),
+      isShowAllDayPanel: () => this.option('showAllDayPanel'),
+      isCrossScrollingEnabled: () => this.option('crossScrollingEnabled'),
+      getStartDayHour: () => this.option('startDayHour'),
+      getEndDayHour: () => this.option('endDayHour'),
+      getHoursInterval: () => this.option('hoursInterval'),
+      getHeaderHeight: () => this.option('getHeaderHeight')(),
+    };
+
+    this.groupedStrategy = new Strategy(config);
   }
 
   protected getDefaultGroupStrategy() {
diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/types.ts b/packages/devextreme/js/__internal/scheduler/workspaces/types.ts
@@ -0,0 +1,32 @@
+export interface WorkspaceGroupedStrategyConfig {
+  isGroupedByDate: () => boolean;
+  getCellCount: () => number;
+  getGroupCount: () => number;
+  getRowCount: () => number;
+  getCellWidth: () => number;
+  getCellHeight: () => number;
+  getAllDayHeight: () => number;
+  getTimePanelWidth: () => number;
+  getGroupTableWidth: () => number;
+  getWorkSpaceWidth: () => number;
+  getWorkSpaceLeftOffset: () => number;
+  getIndicatorOffset: (groupIndex: number) => number;
+  getIndicationHeight: () => number;
+  getIndicationWidth: () => number;
+  getCellIndexByCoordinates: (
+    coordinates: { top: number; left: number },
+    allDay?: boolean,
+  ) => number;
+  supportAllDayRow: () => boolean;
+  getScrollableScrollTop: () => number;
+  getScrollableContentElement: () => HTMLElement;
+  getElement: () => HTMLElement;
+  getHeaderPanelContainerElement: () => HTMLElement;
+  isRtlEnabled: () => boolean;
+  isShowAllDayPanel: () => boolean;
+  isCrossScrollingEnabled: () => boolean;
+  getStartDayHour: () => number;
+  getEndDayHour: () => number;
+  getHoursInterval: () => number;
+  getHeaderHeight: () => number;
+}
diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/work_space_grouped_strategy_horizontal.ts b/packages/devextreme/js/__internal/scheduler/workspaces/work_space_grouped_strategy_horizontal.ts
@@ -6,51 +6,46 @@ import type {
   GroupBoundsOffset,
 } from '@ts/scheduler/types';
 import { WORK_SPACE_BORDER_PX } from '@ts/scheduler/workspaces/const';
-import type SchedulerWorkSpace from '@ts/scheduler/workspaces/m_work_space';
 
 import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../classes';
 import type { ResourceLoader } from '../utils/loader/resource_loader';
+import type { WorkspaceGroupedStrategyConfig } from './types';
 
 class HorizontalGroupedStrategy {
-  constructor(private readonly workspace: SchedulerWorkSpace) {}
+  constructor(private readonly config: WorkspaceGroupedStrategyConfig) {}
 
   prepareCellIndexes(
     cellCoordinates: CellPositionData,
     groupIndex: number,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     inAllDay?: boolean,
   ): CellPositionData {
-    const groupByDay = this.workspace.isGroupedByDate();
+    const groupByDay = this.config.isGroupedByDate();
 
     if (!groupByDay) {
       return {
         rowIndex: cellCoordinates.rowIndex,
-        // @ts-expect-error
-        columnIndex: cellCoordinates.columnIndex + groupIndex * this.workspace.getCellCount(),
+        columnIndex: cellCoordinates.columnIndex + groupIndex * this.config.getCellCount(),
       };
     }
     return {
       rowIndex: cellCoordinates.rowIndex,
-      // @ts-expect-error
-      columnIndex: cellCoordinates.columnIndex * this.workspace.getGroupCount() + groupIndex,
+      columnIndex: cellCoordinates.columnIndex * this.config.getGroupCount() + groupIndex,
     };
   }
 
   getGroupIndex(rowIndex: number, columnIndex: number): number {
-    const groupByDay = this.workspace.isGroupedByDate();
-    // @ts-expect-error
-    const groupCount = this.workspace.getGroupCount();
+    const groupByDay = this.config.isGroupedByDate();
+    const groupCount = this.config.getGroupCount();
 
     if (groupByDay) {
       return columnIndex % groupCount;
     }
-    // @ts-expect-error
-    return Math.floor(columnIndex / this.workspace.getCellCount());
+    return Math.floor(columnIndex / this.config.getCellCount());
   }
 
   calculateHeaderCellRepeatCount(): number {
-    // @ts-expect-error
-    return this.workspace.getGroupCount() || 1;
+    return this.config.getGroupCount() || 1;
   }
 
   insertAllDayRowsIntoDateTable(): boolean {
@@ -60,28 +55,28 @@ class HorizontalGroupedStrategy {
   getTotalCellCount(groupCount: number): number {
     const effectiveGroupCount = groupCount || 1;
 
-    // @ts-expect-error
-    return this.workspace.getCellCount() * effectiveGroupCount;
+    return this.config.getCellCount() * effectiveGroupCount;
   }
 
   getTotalRowCount(): number {
-    // @ts-expect-error
-    return this.workspace.getRowCount();
+    return this.config.getRowCount();
   }
 
   calculateTimeCellRepeatCount(): number {
     return 1;
   }
 
   getWorkSpaceMinWidth(): number {
-    const workSpaceElementWidth = getBoundingRect(this.workspace.$element().get(0)).width;
+    const workSpaceElementWidth = getBoundingRect(
+      this.config.getElement(),
+    ).width;
     return workSpaceElementWidth
-      - this.workspace.getTimePanelWidth()
+      - this.config.getTimePanelWidth()
       - 2 * WORK_SPACE_BORDER_PX;
   }
 
   getAllDayOffset(): number {
-    return this.workspace.getAllDayHeight();
+    return this.config.getAllDayHeight();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -90,7 +85,7 @@ class HorizontalGroupedStrategy {
   }
 
   getLeftOffset(): number {
-    return this.workspace.getTimePanelWidth();
+    return this.config.getTimePanelWidth();
   }
 
   private createGroupBoundOffset(
@@ -130,11 +125,11 @@ class HorizontalGroupedStrategy {
     coordinates: { top: number; left: number; groupIndex?: number },
     groupedDataMap: { dateTableGroupedMap: CellInfo[][][] },
   ): GroupBoundsOffset {
-    if (this.workspace.isGroupedByDate()) {
+    if (this.config.isGroupedByDate()) {
       return this.getGroupedByDateBoundOffset($cells, cellWidth);
     }
 
-    const cellIndex = this.workspace.getCellIndexByCoordinates(coordinates);
+    const cellIndex = this.config.getCellIndexByCoordinates(coordinates);
     const groupIndex = coordinates.groupIndex ?? Math.floor(cellIndex / cellCount);
 
     const currentCellGroup = groupedDataMap.dateTableGroupedMap[groupIndex];
@@ -168,37 +163,33 @@ class HorizontalGroupedStrategy {
   }
 
   private getIndicatorOffset(groupIndex: number): number {
-    const groupByDay = this.workspace.isGroupedByDate();
+    const groupByDay = this.config.isGroupedByDate();
 
     return groupByDay
       ? this.calculateGroupByDateOffset(groupIndex)
       : this.calculateOffset(groupIndex);
   }
 
   private calculateOffset(groupIndex: number): number {
-    // @ts-expect-error
-    const indicatorStartPosition = this.workspace.getIndicatorOffset(groupIndex) as number;
-    // @ts-expect-error
-    const offset = this.workspace.getCellCount() * this.workspace.getCellWidth() * groupIndex;
+    const indicatorStartPosition = this.config.getIndicatorOffset(groupIndex);
+    const offset = this.config.getCellCount() * this.config.getCellWidth() * groupIndex;
 
     return indicatorStartPosition + offset;
   }
 
   private calculateGroupByDateOffset(groupIndex: number): number {
-    // @ts-expect-error
-    return this.workspace.getIndicatorOffset(0) * this.workspace.getGroupCount()
-      + this.workspace.getCellWidth() * groupIndex;
+    return this.config.getIndicatorOffset(0) * this.config.getGroupCount()
+      + this.config.getCellWidth() * groupIndex;
   }
 
   getShaderOffset(i: number, width: number): number {
-    // @ts-expect-error
-    const offset = this.workspace.getCellCount() * this.workspace.getCellWidth() * i;
+    const offset = this.config.getCellCount() * this.config.getCellWidth() * i;
 
-    if (this.workspace.option('rtlEnabled')) {
+    if (this.config.isRtlEnabled()) {
       const containerWidth = getBoundingRect(
-        this.workspace.getScrollable().$content().get(0),
+        this.config.getScrollableContentElement(),
       ).width;
-      return containerWidth - offset - this.workspace.getTimePanelWidth() - width;
+      return containerWidth - offset - this.config.getTimePanelWidth() - width;
     }
 
     return offset;
@@ -209,21 +200,21 @@ class HorizontalGroupedStrategy {
   }
 
   getShaderHeight(): number {
-    // @ts-expect-error
-    return this.workspace.getIndicationHeight() as number;
+    return this.config.getIndicationHeight();
   }
 
   getShaderMaxHeight(): number {
-    return (getBoundingRect(this.workspace.getScrollable().$content().get(0)) as DOMRect).height;
+    return (getBoundingRect(
+      this.config.getScrollableContentElement(),
+    ) as DOMRect).height;
   }
 
   getShaderWidth(): number {
-    // @ts-expect-error
-    return this.workspace.getIndicationWidth() as number;
+    return this.config.getIndicationWidth();
   }
 
   getScrollableScrollTop(allDay: boolean): number {
-    return !allDay ? this.workspace.getScrollable().scrollTop() : 0;
+    return !allDay ? this.config.getScrollableScrollTop() : 0;
   }
 
   // ---------------
@@ -251,15 +242,13 @@ class HorizontalGroupedStrategy {
       return `${cellClass} ${LAST_GROUP_CELL_CLASS}`;
     }
 
-    const groupByDate = this.workspace.isGroupedByDate();
+    const groupByDate = this.config.isGroupedByDate();
 
     if (groupByDate) {
-      // @ts-expect-error
-      if (index % this.workspace.getGroupCount() === 0) {
+      if (index % this.config.getGroupCount() === 0) {
         return `${cellClass} ${LAST_GROUP_CELL_CLASS}`;
       }
-      // @ts-expect-error
-    } else if (index % this.workspace.getCellCount() === 0) {
+    } else if (index % this.config.getCellCount() === 0) {
       return `${cellClass} ${LAST_GROUP_CELL_CLASS}`;
     }
 
@@ -275,15 +264,13 @@ class HorizontalGroupedStrategy {
       return `${cellClass} ${FIRST_GROUP_CELL_CLASS}`;
     }
 
-    const groupByDate = this.workspace.isGroupedByDate();
+    const groupByDate = this.config.isGroupedByDate();
 
     if (groupByDate) {
-      // @ts-expect-error
-      if ((index - 1) % this.workspace.getGroupCount() === 0) {
+      if ((index - 1) % this.config.getGroupCount() === 0) {
         return `${cellClass} ${FIRST_GROUP_CELL_CLASS}`;
       }
-      // @ts-expect-error
-    } else if ((index - 1) % this.workspace.getCellCount() === 0) {
+    } else if ((index - 1) % this.config.getCellCount() === 0) {
       return `${cellClass} ${FIRST_GROUP_CELL_CLASS}`;
     }
 
diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/work_space_grouped_strategy_vertical.ts b/packages/devextreme/js/__internal/scheduler/workspaces/work_space_grouped_strategy_vertical.ts
