fix(common): support Shift-click cell range selection (#2757)

Author: ghiscoding

demos/aurelia/test/cypress/e2e/example48.cy.ts

@@ -191,6 +191,15 @@ describe('Example 48 - Hybrid Selection Model', () => {
         .then((text) => expect(text.match(/"fromRow"/g)).to.have.length(2));
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');
     });
+
+    it('should select a rectangular cell range when Shift-clicking another cell', () => {
+      cy.get('#grid48-1 .slick-row[data-row="1"] .slick-cell.l1.r1').click();
+      cy.get('#grid48-1 .slick-row[data-row="3"] .slick-cell.l3.r3').click({ shiftKey: true });
+
+      cy.get('#grid48-1 .slick-cell.selected').should('have.length', 9);
+      cy.get('#selectionRange1').should('have.text', '{"fromRow":1,"fromCell":1,"toRow":3,"toCell":3}');
+    });
+
     it('should preserve row and column offsets when copying multiple cell ranges', () => {
       cy.get('#grid48-1 .slick-viewport-top.slick-viewport-left').scrollTo('top');
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');

demos/react/test/cypress/e2e/example48.cy.ts

@@ -191,6 +191,15 @@ describe('Example 48 - Hybrid Selection Model', () => {
         .then((text) => expect(text.match(/"fromRow"/g)).to.have.length(2));
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');
     });
+
+    it('should select a rectangular cell range when Shift-clicking another cell', () => {
+      cy.get('#grid48-1 .slick-row[data-row="1"] .slick-cell.l1.r1').click();
+      cy.get('#grid48-1 .slick-row[data-row="3"] .slick-cell.l3.r3').click({ shiftKey: true });
+
+      cy.get('#grid48-1 .slick-cell.selected').should('have.length', 9);
+      cy.get('#selectionRange1').should('have.text', '{"fromRow":1,"fromCell":1,"toRow":3,"toCell":3}');
+    });
+
     it('should preserve row and column offsets when copying multiple cell ranges', () => {
       cy.get('#grid48-1 .slick-viewport-top.slick-viewport-left').scrollTo('top');
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');

demos/vanilla/src/examples/example19.html

@@ -28,6 +28,7 @@ <h5 class="mb-3 italic example-details">
     outputs of the selected cells. This also applies if the cells editor is already open due to use of
     <code>copyActiveEditorCell</code>
   </p>
+  <p>Click a cell, then hold Shift and click another cell to select the rectangular range between them.</p>
 </h5>
 <h6 class="title is-6">
   <button class="button is-small" onclick.trigger="undoLastEdit()" data-test="undo-last-edit-btn">

demos/vanilla/src/examples/example37.html

@@ -31,6 +31,7 @@ <h5 class="mb-3 italic example-details">
       <code>rowSelectColumnIds: ['id']</code> as the columns that will trigger row selection.
     </li>
     <li>2. clicking on the any other columns will use <code>CellSelectionModel</code> by default</li>
+    <li>3. with cell selection, hold Shift and click another cell to select the rectangular range between the two cells</li>
   </ul>
 </h5>
 

demos/vue/test/cypress/e2e/example48.cy.ts

@@ -191,6 +191,15 @@ describe('Example 48 - Hybrid Selection Model', () => {
         .then((text) => expect(text.match(/"fromRow"/g)).to.have.length(2));
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');
     });
+
+    it('should select a rectangular cell range when Shift-clicking another cell', () => {
+      cy.get('#grid48-1 .slick-row[data-row="1"] .slick-cell.l1.r1').click();
+      cy.get('#grid48-1 .slick-row[data-row="3"] .slick-cell.l3.r3').click({ shiftKey: true });
+
+      cy.get('#grid48-1 .slick-cell.selected').should('have.length', 9);
+      cy.get('#selectionRange1').should('have.text', '{"fromRow":1,"fromCell":1,"toRow":3,"toCell":3}');
+    });
+
     it('should preserve row and column offsets when copying multiple cell ranges', () => {
       cy.get('#grid48-1 .slick-viewport-top.slick-viewport-left').scrollTo('top');
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');

frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md

@@ -268,6 +268,8 @@ selectionOptions: {
 }
 ```
 
+With cell selection enabled, click an anchor cell and then Shift-click another cell to select the rectangular range between them. In row-selection mode, Shift-click selects all rows between the anchor and clicked row.
+
 For non-contiguous selection ranges, set `selectionOptions.enableMultiSelection: true`. Ctrl/Cmd-click toggles the clicked cell or row, and Ctrl/Cmd-drag adds another range. In row-selection mode, `multiSelect` continues to control whether multiple rows are allowed.
 
 When `enableExcelCopyBuffer` is enabled, copying multiple non-contiguous ranges preserves their relative row and column positions in a single rectangular clipboard block; unselected cells inside the bounding rectangle remain blank.

frameworks/angular-slickgrid/test/cypress/e2e/example48.cy.ts

@@ -191,6 +191,15 @@ describe('Example 48 - Hybrid Selection Model', () => {
         .then((text) => expect(text.match(/"fromRow"/g)).to.have.length(2));
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');
     });
+
+    it('should select a rectangular cell range when Shift-clicking another cell', () => {
+      cy.get('#grid48-1 .slick-row[data-row="1"] .slick-cell.l1.r1').click();
+      cy.get('#grid48-1 .slick-row[data-row="3"] .slick-cell.l3.r3').click({ shiftKey: true });
+
+      cy.get('#grid48-1 .slick-cell.selected').should('have.length', 9);
+      cy.get('#selectionRange1').should('have.text', '{"fromRow":1,"fromCell":1,"toRow":3,"toCell":3}');
+    });
+
     it('should preserve row and column offsets when copying multiple cell ranges', () => {
       cy.get('#grid48-1 .slick-viewport-top.slick-viewport-left').scrollTo('top');
       cy.get('[data-test="enable-multi-selection"]').should('be.checked');

frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md

@@ -280,6 +280,8 @@ selectionOptions: {
 }
 ```
 
+With cell selection enabled, click an anchor cell and then Shift-click another cell to select the rectangular range between them. In row-selection mode, Shift-click selects all rows between the anchor and clicked row.
+
 For non-contiguous selection ranges, set `selectionOptions.enableMultiSelection: true`. Ctrl/Cmd-click toggles the clicked cell or row, and Ctrl/Cmd-drag adds another range. In row-selection mode, `multiSelect` continues to control whether multiple rows are allowed.
 
 When `enableExcelCopyBuffer` is enabled, copying multiple non-contiguous ranges preserves their relative row and column positions in a single rectangular clipboard block; unselected cells inside the bounding rectangle remain blank.

frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md

@@ -361,6 +361,8 @@ selectionOptions: {
 }
 ```
 
+With cell selection enabled, click an anchor cell and then Shift-click another cell to select the rectangular range between them. In row-selection mode, Shift-click selects all rows between the anchor and clicked row.
+
 For non-contiguous selection ranges, set `selectionOptions.enableMultiSelection: true`. Ctrl/Cmd-click toggles the clicked cell or row, and Ctrl/Cmd-drag adds another range. In row-selection mode, `multiSelect` continues to control whether multiple rows are allowed.
 
 When `enableExcelCopyBuffer` is enabled, copying multiple non-contiguous ranges preserves their relative row and column positions in a single rectangular clipboard block; unselected cells inside the bounding rectangle remain blank.

frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md

@@ -431,6 +431,8 @@ selectionOptions: {
 }
 ```
 
+With cell selection enabled, click an anchor cell and then Shift-click another cell to select the rectangular range between them. In row-selection mode, Shift-click selects all rows between the anchor and clicked row.
+
 For non-contiguous selection ranges, set `selectionOptions.enableMultiSelection: true`. Ctrl/Cmd-click toggles the clicked cell or row, and Ctrl/Cmd-drag adds another range. In row-selection mode, `multiSelect` continues to control whether multiple rows are allowed.
 
 When `enableExcelCopyBuffer` is enabled, copying multiple non-contiguous ranges preserves their relative row and column positions in a single rectangular clipboard block; unselected cells inside the bounding rectangle remain blank.