Spike onSelectionEnd

Author: aleksei-semikozov

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/playground/scheduler-example.ts

@@ -42,6 +42,13 @@ window.addEventListener('load', () =>
             allowResizing: true,
             allowDragging: true
         },
+        onSelectionEnd: ({component, selectedCellData}) => {
+            component.showAppointmentPopup({
+                startDate: selectedCellData[0].startDate,
+                endDate: selectedCellData[selectedCellData.length - 1].endDate,
+                allDay: false
+            }, true);
+        },
         onAppointmentAdded: (e) => {
             console.log('Appointment added:', e.appointmentData);
         },