Scheduler: Encapsulate old view model and add collector tests

e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/collector.ts

@@ -2,11 +2,13 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../../helpers/createWidget';
 import url from '../../../../../helpers/getPageUrl';
+import { generateOptionMatrix } from '../../../../../helpers/generateOptionMatrix';
+import { changeTheme } from '../../../../../helpers/changeTheme';
 
 fixture.disablePageReloads`Appointments collector`
   .page(url(__dirname, '../../../../container.html'));
 
-test('Appointment collector has correct offset when adaptivityEnabled=true', async (t) => {
+test('Appointment collector has correct offset when adaptivityEnabled=true (T1024299)', async (t) => {
   const scheduler = new Scheduler('#container');
 
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -29,3 +31,111 @@ test('Appointment collector has correct offset when adaptivityEnabled=true', asy
   }],
   height: 300,
 }));
+
+const getSchedulerBaseOptions = (view: string, count = 20) => {
+  const day = ['workWeek', 'timelineWorkWeek'].includes(view) ? 2 : 1;
+  const allDayAppointments = Array(Math.round(count / 4)).fill({
+    allDay: true,
+    text: 'text',
+    startDate: new Date(2021, 7, day, 0),
+    endDate: new Date(2021, 7, day, 2),
+  });
+  const regularAppointments = Array(Math.round((count * 3) / 4)).fill({
+    text: 'text',
+    startDate: new Date(2021, 7, day, 0),
+    endDate: new Date(2021, 7, day, 2),
+  });
+  const width = ['month', 'week', 'workWeek'].includes(view) ? 800 : 500;
+  const height = ['month'].includes(view) ? 500 : 300;
+
+  return {
+    currentDate: new Date(2021, 7, day),
+    views: [view],
+    currentView: view,
+    dataSource: [...allDayAppointments, ...regularAppointments],
+    height,
+    width,
+  };
+};
+
+generateOptionMatrix({
+  view: ['day', 'week', 'workWeek', 'month', 'timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'],
+  theme: ['generic.light', 'material.blue.light', 'fluent.blue.light', 'generic.light.compact', 'material.blue.light.compact', 'fluent.blue.light.compact'],
+  adaptivityEnabled: [false, true],
+}).forEach(({ view, theme, adaptivityEnabled }) => {
+  test(`Appointment collector has correct offset when view=${view} adaptivityEnabled=${adaptivityEnabled} theme=${theme}`, async (t) => {
+    const scheduler = new Scheduler('#container');
+
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .expect(await takeScreenshot(`appointment-collector-${view}-adapt(${adaptivityEnabled})-${theme}.png`, scheduler.workSpace))
+      .ok()
+
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+
+    return createWidget('dxScheduler', {
+      adaptivityEnabled,
+      ...getSchedulerBaseOptions(view),
+    });
+  }).after(async () => {
+    await changeTheme('generic.light');
+  });
+});
+
+['generic.light', 'material.blue.light', 'fluent.blue.light'].forEach((theme) => {
+  test(`Appointment collector has correct offset when month view with double interval theme=${theme}`, async (t) => {
+    const scheduler = new Scheduler('#container');
+
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .expect(await takeScreenshot(`appointment-collector-month-double-interval-${theme}.png`, scheduler.workSpace))
+      .ok()
+
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+
+    return createWidget('dxScheduler', {
+      ...getSchedulerBaseOptions('month'),
+      views: [{ type: 'month', intervalCount: 2 }],
+    });
+  }).after(async () => {
+    await changeTheme('generic.light');
+  });
+});
+
+generateOptionMatrix({
+  view: ['day', 'week', 'workWeek', 'month', 'timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'],
+  variants: [
+    { maxAppointmentsPerCell: 'auto', rtlEnabled: false },
+    { maxAppointmentsPerCell: 'auto', rtlEnabled: true },
+    { maxAppointmentsPerCell: 0, rtlEnabled: false },
+    { maxAppointmentsPerCell: 2, rtlEnabled: false },
+    { maxAppointmentsPerCell: 'unlimited', rtlEnabled: false },
+  ],
+}).forEach(({
+  view, variants: { maxAppointmentsPerCell, rtlEnabled },
+}) => {
+  test(`Appointment collector has correct offset when view=${view} maxAppointmentsPerCell=${maxAppointmentsPerCell} rtlEnabled=${rtlEnabled}`, async (t) => {
+    const scheduler = new Scheduler('#container');
+
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .expect(await takeScreenshot(`appointment-collector-${view}-${maxAppointmentsPerCell}-rtl(${rtlEnabled}).png`, scheduler.workSpace))
+      .ok()
+
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => createWidget('dxScheduler', {
+    maxAppointmentsPerCell,
+    rtlEnabled,
+    ...getSchedulerBaseOptions(view, maxAppointmentsPerCell === 'unlimited' ? 8 : 20),
+  }));
+});

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -234,7 +234,6 @@ class SchedulerAppointments extends CollectionWidget {
       allowResize: true,
       allowAllDayResize: true,
       onAppointmentDblClick: null,
-      _collectorOffset: 0,
       groups: [],
       resources: [],
     });
@@ -983,10 +982,6 @@ class SchedulerAppointments extends CollectionWidget {
     appointment: AppointmentCollectorViewModel,
   ): dxElementWrapper {
     const virtualItems = appointment.items;
-    const buttonWidth = this.invoke('getDropDownAppointmentWidth', appointment.allDay);
-    const buttonHeight = this.invoke('getDropDownAppointmentHeight');
-    const rtlOffset = this.option('rtlEnabled') ? buttonWidth : 0;
-    const isGroupCompact = !appointment.allDay && this.invoke('supportCompactDropDownAppointments');
     const items: any = { data: [], colors: [], settings: [] };
     virtualItems.forEach((item) => {
       const appointmentConfig = {
@@ -1005,17 +1000,16 @@ class SchedulerAppointments extends CollectionWidget {
       $container: $fragment,
       coordinates: {
         top: appointment.top,
-        left: appointment.left + rtlOffset,
+        left: appointment.left,
       },
       items,
       buttonColor: items.colors[0],
       sortedIndex: appointment.sortedIndex,
-      width: buttonWidth - this.option('_collectorOffset'),
-      height: buttonHeight,
+      width: appointment.width,
+      height: appointment.height,
       onAppointmentClick: this.option('onItemClick'),
       allowDrag: this.option('allowDrag'),
-      cellWidth: this.invoke('getCellWidth'),
-      isCompact: this.invoke('isAdaptive') || isGroupCompact,
+      isCompact: appointment.isCompact,
     });
     this.renderedElementsBySortedIndex[appointment.sortedIndex] = $item;
 

packages/devextreme/js/__internal/scheduler/appointments/resizing/get_delta_time.test.ts

@@ -0,0 +1,87 @@
+import {
+  describe, expect, it,
+} from '@jest/globals';
+
+import { VIEW_TYPES } from '../../utils/options/constants_view';
+import type { ViewType } from '../../utils/options/types';
+import { getDeltaTime } from './get_delta_time';
+
+describe('getDeltaTime', () => {
+  VIEW_TYPES.forEach((view) => {
+    it(`should return zero for not resized appointment in ${view} view`, () => {
+      expect(getDeltaTime(
+        { width: 100, height: 100 },
+        { width: 100, height: 100 },
+        {
+          viewType: view,
+          cellSize: { width: 50, height: 50 },
+          resizableStep: 50,
+          cellDurationInMinutes: 30,
+          isAllDay: true,
+        },
+      )).toBe(0);
+    });
+  });
+
+  ['day', 'week', 'workWeek'].forEach((view) => {
+    it(`should return correct delta in px for resized appointment in vertical ${view} view`, () => {
+      expect(getDeltaTime(
+        { width: 100, height: 50 },
+        { width: 100, height: 100 },
+        {
+          viewType: view as ViewType,
+          cellSize: { width: 50, height: 50 },
+          resizableStep: 50,
+          cellDurationInMinutes: 30,
+          isAllDay: false,
+        },
+      )).toBe(-30 * 60_000);
+    });
+
+    it(`should return correct delta in px for resized all day appointment in vertical ${view} view`, () => {
+      expect(getDeltaTime(
+        { width: 50, height: 100 },
+        { width: 100, height: 100 },
+        {
+          viewType: view as ViewType,
+          cellSize: { width: 50, height: 50 },
+          resizableStep: 50,
+          cellDurationInMinutes: 30,
+          isAllDay: true,
+        },
+      )).toBe(-24 * 3600_000);
+    });
+  });
+
+  ['timelineMonth', 'month'].forEach((view) => {
+    it(`should return correct delta in px for resized appointment in ${view} view`, () => {
+      expect(getDeltaTime(
+        { width: 50, height: 100 },
+        { width: 100, height: 100 },
+        {
+          viewType: view as ViewType,
+          cellSize: { width: 50, height: 50 },
+          resizableStep: 50,
+          cellDurationInMinutes: 30,
+          isAllDay: false,
+        },
+      )).toBe(-24 * 3600_000);
+    });
+  });
+
+  ['timelineDay', 'timelineWeek', 'timelineWorkWeek'].forEach((view) => {
+    it(`should return zero for not resized appointment in horizontal ${view} view`, () => {
+      expect(getDeltaTime(
+        { width: 50, height: 100 },
+        { width: 100, height: 100 },
+        {
+          viewType: view as ViewType,
+          cellSize: { width: 50, height: 50 },
+          resizableStep: 50,
+          cellDurationInMinutes: 30,
+          isAllDay: false,
+        },
+      )).toBe(-30 * 60_000);
+    });
+  });
+});

packages/devextreme/js/__internal/scheduler/appointments/resizing/get_delta_time.ts

@@ -0,0 +1,60 @@
+import dateUtils from '@js/core/utils/date';
+
+import { VERTICAL_VIEW_TYPES } from '../../constants';
+import type { ViewType } from '../../types';
+
+const toMs = dateUtils.dateToMilliseconds;
+
+interface Size {
+  width: number;
+  height: number;
+}
+interface Options {
+  viewType: ViewType;
+  cellSize: Size;
+  cellDurationInMinutes: number;
+  resizableStep: number;
+  isAllDay: boolean;
+}
+
+const MIN_RESIZABLE_STEP = 2;
+const getAllDayDeltaWidth = (args: Size, initialSize: Size, resizableStep: number): number => {
+  const intervalWidth = resizableStep || MIN_RESIZABLE_STEP;
+  const initialWidth = initialSize.width;
+
+  return Math.round((args.width - initialWidth) / intervalWidth);
+};
+const getHorizontalDeltaTime = (args: Size, initialSize: Size, {
+  cellSize,
+  cellDurationInMinutes,
+}: Options): number => {
+  const deltaWidth = args.width - initialSize.width;
+  const deltaTime = toMs('minute') * Math.round((deltaWidth * cellDurationInMinutes) / cellSize.width);
+  return deltaTime;
+};
+const getVerticalDeltaTime = (args: Size, initialSize: Size, {
+  cellSize,
+  cellDurationInMinutes,
+}: Options): number => {
+  const deltaHeight = args.height - initialSize.height;
+  const deltaTime = toMs('minute') * Math.round((deltaHeight * cellDurationInMinutes) / cellSize.height);
+  return deltaTime;
+};
+
+export const getDeltaTime = (
+  args: Size,
+  initialSize: Size,
+  options: Options,
+): number => {
+  const { viewType, resizableStep, isAllDay } = options;
+  switch (true) {
+    case ['timelineMonth', 'month'].includes(viewType) || Boolean(isAllDay):
+      return getAllDayDeltaWidth(args, initialSize, resizableStep) * toMs('day');
+    case viewType === 'agenda':
+      return 0;
+    case VERTICAL_VIEW_TYPES.includes(viewType) && !isAllDay:
+      return getVerticalDeltaTime(args, initialSize, options);
+    default:
+      return getHorizontalDeltaTime(args, initialSize, options);
+  }
+};

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

@@ -4,3 +4,5 @@ export const APPOINTMENT_SETTINGS_KEY = 'dxAppointmentSettings';
 
 export const VERTICAL_GROUP_ORIENTATION = 'vertical';
 export const HORIZONTAL_GROUP_ORIENTATION = 'horizontal';
+
+export const VERTICAL_VIEW_TYPES = ['day', 'week', 'workWeek'];

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

@@ -12,9 +12,6 @@ const APPOINTMENT_COLLECTOR_CLASS = 'dx-scheduler-appointment-collector';
 const COMPACT_APPOINTMENT_COLLECTOR_CLASS = `${APPOINTMENT_COLLECTOR_CLASS}-compact`;
 const APPOINTMENT_COLLECTOR_CONTENT_CLASS = `${APPOINTMENT_COLLECTOR_CLASS}-content`;
 
-const WEEK_VIEW_COLLECTOR_OFFSET = 5;
-const COMPACT_THEME_WEEK_VIEW_COLLECTOR_OFFSET = 1;
-
 export class CompactAppointmentsHelper {
   elements: any[] = [];
 
@@ -104,16 +101,6 @@ export class CompactAppointmentsHelper {
     };
   }
 
-  _getCollectorOffset(width, cellWidth) {
-    return cellWidth - width - this._getCollectorRightOffset();
-  }
-
-  _getCollectorRightOffset() {
-    return this.instance.getRenderingStrategyInstance()._isCompactTheme()
-      ? COMPACT_THEME_WEEK_VIEW_COLLECTOR_OFFSET
-      : WEEK_VIEW_COLLECTOR_OFFSET;
-  }
-
   _setPosition(element, position) {
     move(element, {
       top: position.top,

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

@@ -1301,8 +1301,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     if (currentViewOptions.startDate) {
       this._updateOption('header', 'currentDate', this._workSpace._getHeaderDate());
     }
-
-    this._appointments.option('_collectorOffset', this.getCollectorOffset());
   }
 
   _recalculateWorkspace() {