Scheduler: Spike on selection end

packages/devextreme/eslint.config.mjs

@@ -38,6 +38,7 @@ export default [
             'themebuilder-scss/src/data/metadata/*',
             'js/bundles/dx.custom.js',
             'testing/jest/utils/transformers/*',
+            'vite.config.ts',
             '**/ts/',
             'js/common/core/localization/cldr-data/*',
             'js/common/core/localization/default_messages.js',

packages/devextreme/js/__internal/scheduler/__tests__/selection_end_event.test.ts

@@ -0,0 +1,91 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+
+import fx from '../../../common/core/animation/fx';
+import { createScheduler } from './__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+
+const CLASSES = {
+  scheduler: 'dx-scheduler',
+  dateTableCell: 'dx-scheduler-date-table-cell',
+};
+
+describe('onSelectionEnd Event', () => {
+  beforeEach(() => {
+    fx.off = true;
+    setupSchedulerTestEnvironment({ height: 600 });
+  });
+
+  afterEach(() => {
+    const $scheduler = $(document.querySelector(`.${CLASSES.scheduler}`));
+    if ($scheduler.length > 0) {
+      // @ts-expect-error
+      $scheduler.dxScheduler('dispose');
+    }
+    document.body.innerHTML = '';
+    fx.off = false;
+  });
+
+  it('should trigger onSelectionEnd event when selecting multiple cells with mouse', async () => {
+    const onSelectionEnd = jest.fn();
+
+    const { scheduler, POM, container } = await createScheduler({
+      currentView: 'week',
+      views: ['week'],
+      currentDate: new Date(2024, 0, 1),
+      startDayHour: 9,
+      endDayHour: 18,
+      height: 600,
+      onSelectionEnd,
+    });
+
+    const firstCell = POM.getDateTableCell(0, 0);
+    const thirdCell = POM.getDateTableCell(2, 0);
+
+    firstCell.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 100,
+    }));
+
+    const secondCell = POM.getDateTableCell(1, 0);
+    secondCell.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 150,
+    }));
+
+    thirdCell.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 200,
+    }));
+
+    thirdCell.dispatchEvent(new MouseEvent('mouseup', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 200,
+    }));
+
+    expect(onSelectionEnd).toHaveBeenCalledTimes(1);
+
+    expect(onSelectionEnd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        component: scheduler,
+        element: container,
+        selectedCellData: expect.arrayContaining([
+          expect.objectContaining({
+            startDate: new Date('2023-12-31T12:00:00.000Z'),
+            endDate: new Date('2023-12-31T12:30:00.000Z'),
+          }),
+        ]),
+      }),
+    );
+  });
+});

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

@@ -958,6 +958,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       onAppointmentDeleted: this._createActionByOption(StoreEventNames.DELETED),
       onAppointmentFormOpening: this._createActionByOption('onAppointmentFormOpening'),
       onAppointmentTooltipShowing: this._createActionByOption('onAppointmentTooltipShowing'),
+      onSelectionEnd: this._createActionByOption('onSelectionEnd'),
     };
   }
 
@@ -1375,6 +1376,13 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       onSelectionChanged: (args) => {
         this.option('selectedCellData', args.selectedCellData);
       },
+      onSelectionEnd: (args) => {
+        this._actions.onSelectionEnd({
+          component: this,
+          selectedCellData: args.selectedCellData,
+          selectedCells: args.selectedCells,
+        });
+      },
       groupByDate: this.getViewOption('groupByDate'),
       scrolling,
       draggingMode: this.option('_draggingMode'),

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

@@ -170,6 +170,7 @@ const SCHEDULER_CELL_DXCLICK_EVENT_NAME = addNamespace(clickEventName, 'dxSchedu
 
 const SCHEDULER_CELL_DXPOINTERDOWN_EVENT_NAME = addNamespace(pointerEvents.down, 'dxSchedulerDateTable');
 const SCHEDULER_CELL_DXPOINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, 'dxSchedulerDateTable');
+const SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, 'dxSchedulerTable');
 
 const SCHEDULER_CELL_DXPOINTERMOVE_EVENT_NAME = addNamespace(pointerEvents.move, 'dxSchedulerDateTable');
 
@@ -218,8 +219,12 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   _selectionChangedAction: any;
 
+  _selectionEndAction: any;
+
   _isCellClick: any;
 
+  _isSelectionStartedOnCell = false;
+
   _contextMenuHandled: any;
 
   _disposed: any;
@@ -969,6 +974,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   _attachEvents() {
     this._createSelectionChangedAction();
+    this._createSelectionEndAction();
     this._attachClickEvent();
     this._attachContextMenuEvent();
   }
@@ -986,6 +992,8 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
     (eventsEngine.off as any)($element, SCHEDULER_WORKSPACE_DXPOINTERDOWN_EVENT_NAME);
     (eventsEngine.off as any)($element, SCHEDULER_CELL_DXCLICK_EVENT_NAME);
+    (eventsEngine.off as any)(domAdapter.getDocument(), SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME);
+
     eventsEngine.on($element, SCHEDULER_WORKSPACE_DXPOINTERDOWN_EVENT_NAME, (e) => {
       if (isMouseEvent(e) && e.which > 1) {
         e.preventDefault();
@@ -997,6 +1005,13 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       const $cell = $(e.target);
       that._cellClickAction({ event: e, cellElement: getPublicElement($cell), cellData: that.getCellData($cell) });
     });
+
+    eventsEngine.on(domAdapter.getDocument(), SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME, () => {
+      if (that._isSelectionStartedOnCell) {
+        that._fireSelectionEndEvent();
+        that._isSelectionStartedOnCell = false;
+      }
+    });
   }
 
   _createCellClickAction() {
@@ -1009,10 +1024,15 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     this._selectionChangedAction = this._createActionByOption('onSelectionChanged');
   }
 
+  _createSelectionEndAction() {
+    this._selectionEndAction = this._createActionByOption('onSelectionEnd');
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _cellClickHandler(argument?: any) {
     if (this._showPopup) {
       delete this._showPopup;
+      this._isSelectionStartedOnCell = false;
       this._handleSelectedCellsClick();
     }
   }
@@ -1022,10 +1042,12 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
     if (!$target.hasClass(DATE_TABLE_CELL_CLASS) && !$target.hasClass(ALL_DAY_TABLE_CELL_CLASS)) {
       this._isCellClick = false;
+      this._isSelectionStartedOnCell = false;
       return;
     }
 
     this._isCellClick = true;
+    this._isSelectionStartedOnCell = true;
     if ($target.hasClass(DATE_TABLE_FOCUSED_CELL_CLASS)) {
       this._showPopup = true;
     } else {
@@ -1932,6 +1954,17 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     this._selectionChangedAction({ selectedCellData });
   }
 
+  _fireSelectionEndEvent() {
+    const selectedCellData = this.option('selectedCellData') ?? [];
+    if (selectedCellData.length > 0 && this._selectionEndAction) {
+      const selectedCells = this.cellsSelectionState.getSelectedCells();
+      this._selectionEndAction({
+        selectedCellData,
+        selectedCells: $(selectedCells),
+      });
+    }
+  }
+
   _getCellByData(cellData) {
     const {
       startDate, groupIndex, allDay, index,
@@ -2369,6 +2402,9 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       case 'onSelectionChanged':
         this._createSelectionChangedAction();
         break;
+      case 'onSelectionEnd':
+        this._createSelectionEndAction();
+        break;
       case 'onCellClick':
         this._createCellClickAction();
         break;

packages/devextreme/package.json

@@ -209,6 +209,8 @@
     "vinyl": "2.2.1",
     "vinyl-named": "1.1.0",
     "webpack": "5.103.0",
+    "vite": "^7.1.3",
+    "vite-plugin-inferno": "^0.0.1",
     "webpack-stream": "7.0.0",
     "yaml": "2.5.0",
     "yargs": "17.7.2"
@@ -244,6 +246,7 @@
     "validate-ts": "gulp validate-ts",
     "validate-declarations": "dx-tools validate-declarations --sources ./js --exclude \"js/(renovation|__internal|.eslintrc.js)\" --compiler-options \"{ \\\"typeRoots\\\": [] }\"",
     "testcafe-in-docker": "docker build -f ./testing/testcafe/docker/Dockerfile -t testcafe-testing . && docker run -it testcafe-testing",
+    "dev:playground": "vite",
     "test-jest": "cross-env NODE_OPTIONS='--expose-gc' jest --no-coverage --runInBand --selectProjects jsdom-tests",
     "test-jest:watch": "jest --watch",
     "test-jest:node": "jest --no-coverage --runInBand --selectProjects node-tests",

packages/devextreme/playground/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevExtreme HMR Playground</title>
+</head>
+<body>
+    <div id="app">
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <div id="container"></div>
+    </div>
+    <script type="module" src="./scheduler-example.ts"></script>
+    <script type="module">
+        if (import.meta.hot) {
+            import.meta.hot.accept('./scheduler-example.ts', () => {
+                console.log('HMR: Scheduler example updated');
+                location.reload();
+            });
+            console.log('HMR enabled for playground');
+        }
+    </script>
+</body>
+</html>

packages/devextreme/playground/newThemeSelector.ts

@@ -0,0 +1,87 @@
+const themeKey = 'currentThemeId';
+
+const themeLoaders = import.meta.glob('../artifacts/css/dx.*.css', { as: 'url' });
+
+const themeList = Object.keys(themeLoaders).map((path) => {
+  const match = path.match(/dx\.(.+)\.css$/);
+  return match ? match[1] : null;
+}).filter(Boolean) as string[];
+
+function groupThemes(themes: string[]) {
+  const groups: Record<string, string[]> = {};
+  themes.forEach((theme) => {
+    const [group] = theme.split('.');
+    const groupName = group.charAt(0).toUpperCase() + group.slice(1);
+    if (!groups[groupName]) groups[groupName] = [];
+    groups[groupName].push(theme);
+  });
+  return groups;
+}
+
+const groupedThemes = groupThemes(themeList);
+
+function initThemes(dropDownList: HTMLSelectElement) {
+  Object.entries(groupedThemes).forEach(([group, themes]) => {
+    const parent = document.createElement('optgroup');
+    parent.label = group;
+
+    themes.forEach((theme) => {
+      const child = document.createElement('option');
+      child.value = theme;
+      child.text = theme.replaceAll('.', ' ');
+      parent.appendChild(child);
+    });
+
+    dropDownList.appendChild(parent);
+  });
+}
+
+function loadThemeCss(themeId: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const oldLink = document.getElementById('theme-stylesheet');
+    if (oldLink) oldLink.remove();
+
+    const key = Object.keys(themeLoaders).find((p) => p.includes(`dx.${themeId}.css`));
+    if (!key) {
+      reject(new Error(`Theme not found: ${themeId}`));
+      return;
+    }
+
+    themeLoaders[key]().then((cssUrl: string) => {
+      const link = document.createElement('link');
+      link.id = 'theme-stylesheet';
+      link.rel = 'stylesheet';
+      link.href = cssUrl;
+
+      link.onload = () => resolve();
+      link.onerror = () => reject(new Error(`Failed to load theme: ${themeId}`));
+
+      document.head.appendChild(link);
+    });
+  });
+}
+
+export function setupThemeSelector(selectorId: string): Promise<void> {
+  return new Promise((resolve) => {
+    const dropDownList = document.querySelector<HTMLSelectElement>(`#${selectorId}`);
+    if (!dropDownList) {
+      resolve();
+      return;
+    }
+
+    initThemes(dropDownList);
+
+    const savedTheme = window.localStorage.getItem(themeKey) || themeList[0];
+    dropDownList.value = savedTheme;
+
+    loadThemeCss(savedTheme).then(() => {
+      dropDownList.addEventListener('change', () => {
+        const newTheme = dropDownList.value;
+        window.localStorage.setItem(themeKey, newTheme);
+        loadThemeCss(newTheme);
+      });
+
+      resolve();
+    });
+  });
+}