[IMP] selection: allow to de-select a zone

Before this commit:
- Users could only add to the selection using Ctrl+Click;
de-selection was not possible.
- Ctrl+Click on an already selected cell had no effect.
- There was no way to remove part of an existing selection.

Issue Example:
1. Select range A1:C3.
2. Ctrl+Click on B2.
3. Expected: Selection splits into A1:C1, A2, C2, A3:C3.
4. Previously, Selection remained unchanged; B2 stayed selected.

After this commit:
- Ctrl+Click on a selected cell now removes it from the selection.
- The selection is split into non-overlapping zones as needed.

Technical Changes:
- The commitSelection function is now triggered on mouse up to finalize
zone updates.
- If the active zone overlaps with existing selected zones, the overlapping
part is removed by splitting the zone.

closes #6125

Task: 4647187
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

Author: rmbh-odoo

packages/o-spreadsheet-engine/src/helpers/zones.ts

@@ -887,3 +887,45 @@ export function splitIfAdjacent(zone: UnboundedZone, zoneToRemove: Zone): Unboun
       return newZones;
   }
 }
+
+/**
+ * Splits zone z2 by removing the overlapping zone z1 (fully inside z2).
+ * Returns the remaining parts of z2 that don't overlap with z1.
+ *
+ * Diagram:
+ * ┌──────────── z2 ─────────────┐
+ * │              1              │
+ * │--------─────────────--------│
+ * │  2    |     z1      |    3  │
+ * │--------─────────────--------│
+ * │              4              │
+ * └─────────────────────────────┘
+ *
+ * Input:
+ *   z1 = { top: 2, bottom: 3, left: 2, right: 3 }
+ *   z2 = { top: 1, bottom: 4, left: 1, right: 4 }
+ *
+ * Output:
+ * [
+ *   { top: 4, bottom: 4, left: 1, right: 4 },  // bottom
+ *   { top: 2, bottom: 3, left: 4, right: 4 },  // right
+ *   { top: 2, bottom: 3, left: 1, right: 1 },  // left
+ *   { top: 1, bottom: 1, left: 1, right: 4 }   // top
+ * ]
+ */
+export function splitZone(z1: Zone, z2: Zone): Zone[] {
+  const zones: Zone[] = [];
+  if (z1.bottom < z2.bottom) {
+    zones.push({ ...z2, top: z1.bottom + 1 });
+  }
+  if (z1.right < z2.right) {
+    zones.push({ ...z2, left: z1.right + 1, top: z1.top, bottom: z1.bottom });
+  }
+  if (z1.left > z2.left) {
+    zones.push({ ...z2, right: z1.left - 1, top: z1.top, bottom: z1.bottom });
+  }
+  if (z1.top > z2.top) {
+    zones.push({ ...z2, bottom: z1.top - 1 });
+  }
+  return zones;
+}

packages/o-spreadsheet-engine/src/plugins/ui_stateful/selection.ts

@@ -4,7 +4,9 @@ import { getClipboardDataPositions } from "../../helpers/clipboard/clipboard_hel
 import { clip, deepCopy, range } from "../../helpers/misc";
 import {
   isEqual,
+  isZoneInside,
   positionToZone,
+  splitZone,
   uniqueZones,
   updateSelectionOnDeletion,
   updateSelectionOnInsertion,
@@ -118,8 +120,8 @@ export class GridSelectionPlugin extends UIPlugin {
   }
 
   private handleEvent(event: SelectionEvent) {
-    const anchor = event.anchor;
-    let zones: Zone[] = [];
+    let anchor = event.anchor;
+    let zones: Zone[] = [...this.gridSelection.zones];
 
     this.isUnbounded = event.options?.unbounded || false;
 
@@ -128,17 +130,36 @@ export class GridSelectionPlugin extends UIPlugin {
         zones = [anchor.zone];
         break;
       case "updateAnchor":
-        zones = [...this.gridSelection.zones];
         const index = zones.findIndex((z: Zone) => isEqual(z, event.previousAnchor.zone));
         if (index >= 0) {
           zones[index] = anchor.zone;
         }
         break;
       case "newAnchor":
-        zones = [...this.gridSelection.zones, anchor.zone];
+        zones.push(anchor.zone);
+        break;
+      case "commitSelection":
+        const zoneToSplit = zones.find(
+          (zone) => isZoneInside(anchor.zone, zone) && !isEqual(anchor.zone, zone)
+        );
+        const removeFullAnchor = zones.filter((zone) => isEqual(anchor.zone, zone)).length > 1;
+        if (removeFullAnchor && zones.length > 2) {
+          zones = zones.filter((zone) => !isEqual(zone, anchor.zone));
+        } else if (zoneToSplit) {
+          const splittedZones = splitZone(anchor.zone, zoneToSplit);
+          zones = zones
+            .filter((z) => !isEqual(z, anchor.zone) && !isEqual(z, zoneToSplit))
+            .concat(splittedZones);
+        }
+        zones = uniqueZones(zones);
+        const lastZone = zones[zones.length - 1];
+        anchor = {
+          cell: { col: lastZone.left, row: lastZone.top },
+          zone: lastZone,
+        };
         break;
     }
-    this.setSelectionMixin(event.anchor, zones);
+    this.setSelectionMixin(anchor, zones);
     /** Any change to the selection has to be reflected in the selection processor. */
     this.selection.resetDefaultAnchor(this, deepCopy(this.gridSelection.anchor));
     const { col, row } = this.gridSelection.anchor.cell;
@@ -455,7 +476,7 @@ export class GridSelectionPlugin extends UIPlugin {
       { anchor, zones }
     );
     this.gridSelection.anchor = clippedAnchor;
-    this.gridSelection.zones = uniqueZones(clippedZones);
+    this.gridSelection.zones = clippedZones;
   }
   /**
    * Change the anchor of the selection active cell to an absolute col and row index.

packages/o-spreadsheet-engine/src/selection_stream/selection_stream_processor.ts

@@ -152,6 +152,9 @@ export class SelectionStreamProcessorImpl implements SelectionStreamProcessor {
       bottom: Math.max(anchorRow, row),
     };
     const expandedZone = this.getters.expandZone(sheetId, zone);
+    if (isEqual(this.anchor.zone, expandedZone)) {
+      return new DispatchResult(CommandResult.NoChanges);
+    }
     const anchor = { zone: expandedZone, cell: { col: anchorCol, row: anchorRow } };
     return this.processEvent({
       mode: "updateAnchor",
@@ -174,6 +177,23 @@ export class SelectionStreamProcessorImpl implements SelectionStreamProcessor {
     });
   }
 
+  /**
+   * Triggered on mouse up to finalize the selection.
+   * - If the current anchor zone already exists in the selection, it will be removed.
+   * - If the anchor zone overlaps with existing zones, it will be split into
+   *   multiple non-overlapping parts.
+   */
+  commitSelection(): DispatchResult {
+    return this.processEvent({
+      options: {
+        scrollIntoView: false,
+        unbounded: true,
+      },
+      anchor: this.anchor,
+      mode: "commitSelection",
+    });
+  }
+
   /**
    * Increase or decrease the size of the current anchor zone.
    * The anchor cell remains where it is. It's the opposite side
@@ -257,7 +277,10 @@ export class SelectionStreamProcessorImpl implements SelectionStreamProcessor {
     });
   }
 
-  selectColumn(index: HeaderIndex, mode: SelectionEvent["mode"]): DispatchResult {
+  selectColumn(
+    index: HeaderIndex,
+    mode: Exclude<SelectionEvent["mode"], "commitSelection">
+  ): DispatchResult {
     const sheetId = this.getters.getActiveSheetId();
     const bottom = this.getters.getNumberRows(sheetId) - 1;
     let zone = { left: index, right: index, top: 0, bottom };
@@ -284,7 +307,10 @@ export class SelectionStreamProcessorImpl implements SelectionStreamProcessor {
     });
   }
 
-  selectRow(index: HeaderIndex, mode: SelectionEvent["mode"]): DispatchResult {
+  selectRow(
+    index: HeaderIndex,
+    mode: Exclude<SelectionEvent["mode"], "commitSelection">
+  ): DispatchResult {
     const sheetId = this.getters.getActiveSheetId();
     const right = this.getters.getNumberCols(sheetId) - 1;
     let zone = { top: index, bottom: index, left: 0, right };

packages/o-spreadsheet-engine/src/types/event_stream/selection_events.ts

@@ -8,6 +8,6 @@ export type SelectionEventOptions = {
 export interface SelectionEvent {
   anchor: AnchorZone;
   previousAnchor: AnchorZone;
-  mode: "newAnchor" | "overrideSelection" | "updateAnchor";
+  mode: "newAnchor" | "overrideSelection" | "updateAnchor" | "commitSelection";
   options: SelectionEventOptions;
 }

packages/o-spreadsheet-engine/src/types/selection_stream_processor.ts

@@ -40,6 +40,8 @@ interface SelectionProcessor {
 
   selectTableAroundSelection(): DispatchResult;
 
+  commitSelection(): DispatchResult;
+
   isListening(owner: unknown): boolean;
 }
 

src/components/grid/grid.ts

@@ -553,6 +553,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
       }
     };
     const onMouseUp = () => {
+      this.env.model.selection.commitSelection();
       if (this.paintFormatStore.isActive) {
         this.paintFormatStore.pasteFormat(this.env.model.getters.getSelectedZones());
       }

src/components/headers_overlay/headers_overlay.ts

@@ -137,6 +137,10 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
   }
 
   _computeGrabDisplay(zoomedMouseEvent: ZoomedMouseEvent<MouseEvent>) {
+    if (isCtrlKey(zoomedMouseEvent.ev)) {
+      this.state.waitingForMove = false;
+      return;
+    }
     const index = this._getElementIndex(this._getEvOffset(zoomedMouseEvent));
     const activeElements = this._getActiveElements();
     const selectedZoneStart = this._getSelectedZoneStart();
@@ -239,7 +243,7 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
       this._selectElement(index, false);
       return;
     }
-    if (this.state.waitingForMove) {
+    if (!isCtrlKey(ev) && this.state.waitingForMove) {
       if (!this.env.model.getters.isGridSelectionActive()) {
         this._selectElement(index, false);
       } else {
@@ -320,17 +324,14 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
       }
     };
     const mouseUpSelect = () => {
+      this.env.model.selection.commitSelection();
       this.state.isSelecting = false;
       this.lastSelectedElementIndex = null;
       this._computeGrabDisplay(zoomedMouseEvent);
     };
     this.dragNDropGrid.start(zoomedMouseEvent, mouseMoveSelect, mouseUpSelect);
   }
 
-  onMouseUp(ev: MouseEvent) {
-    this.lastSelectedElementIndex = null;
-  }
-
   onContextMenu(ev: MouseEvent) {
     ev.preventDefault();
     const index = this._getElementIndex(this._getEvOffset(withZoom(this.env, ev)));

src/components/headers_overlay/headers_overlay.xml

@@ -15,7 +15,6 @@
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
       t-on-click="onClick"
-      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving}">
       <div
@@ -59,7 +58,6 @@
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
       t-on-click="onClick"
-      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving, }">
       <div

tests/grid/grid_component.test.ts

@@ -2280,3 +2280,48 @@ describe("Header grouping shortcuts", () => {
     });
   });
 });
+
+describe("Can select de-select zones", () => {
+  beforeEach(async () => {
+    ({ parent, model, fixture } = await mountSpreadsheet());
+  });
+  test("Can select a zone", () => {
+    gridMouseEvent(model, "pointerdown", "A1");
+    gridMouseEvent(model, "pointermove", "C3");
+    gridMouseEvent(model, "pointerup", "C3");
+    expect(model.getters.getSelectedZones()).toEqual([toZone("A1:C3")]);
+  });
+
+  test("Can de-select cell from selection", () => {
+    gridMouseEvent(model, "pointerdown", "A1");
+    gridMouseEvent(model, "pointermove", "C3");
+    gridMouseEvent(model, "pointerup", "C3");
+    expect(model.getters.getSelectedZones()).toEqual([{ left: 0, right: 2, top: 0, bottom: 2 }]);
+
+    gridMouseEvent(model, "pointerdown", "B2", { ctrlKey: true });
+    gridMouseEvent(model, "pointerup", "B2", { ctrlKey: true });
+    expect(model.getters.getSelectedZones()).toEqual([
+      toZone("A3:C3"),
+      toZone("C2"),
+      toZone("A2"),
+      toZone("A1:C1"),
+    ]);
+  });
+
+  test("Can select a zone and de-select a overlap zone", () => {
+    gridMouseEvent(model, "pointerdown", "A1");
+    gridMouseEvent(model, "pointermove", "D4");
+    gridMouseEvent(model, "pointerup", "D4");
+    expect(model.getters.getSelectedZones()).toEqual([{ left: 0, right: 3, top: 0, bottom: 3 }]);
+
+    gridMouseEvent(model, "pointerdown", "B2", { ctrlKey: true });
+    gridMouseEvent(model, "pointermove", "C3", { ctrlKey: true });
+    gridMouseEvent(model, "pointerup", "C3", { ctrlKey: true });
+    expect(model.getters.getSelectedZones()).toEqual([
+      toZone("A4:D4"),
+      toZone("D2:D3"),
+      toZone("A2:A3"),
+      toZone("A1:D1"),
+    ]);
+  });
+});

tests/grid/grid_overlay_component.test.ts

@@ -35,7 +35,7 @@ import {
   triggerMouseEvent,
 } from "../test_helpers/dom_helper";
 import { getEvaluatedCell, getSelectionAnchorCellXc } from "../test_helpers/getters_helpers";
-import { mountSpreadsheet, nextTick, typeInComposerGrid } from "../test_helpers/helpers";
+import { mountSpreadsheet, nextTick, target, typeInComposerGrid } from "../test_helpers/helpers";
 
 let fixture: HTMLElement;
 let model: Model;
@@ -1289,3 +1289,52 @@ describe("move selected element(s)", () => {
     expect(model.getters.getActiveRows()).toEqual(new Set([0, 1, 2]));
   });
 });
+
+describe("Can select de-select headers", () => {
+  beforeEach(async () => {
+    const data = {
+      sheets: [
+        {
+          colNumber: 5,
+          rowNumber: 5,
+        },
+      ],
+    };
+    model = new Model(data);
+    ({ fixture, env } = await mountSpreadsheet({ model }));
+  });
+
+  test("cannot deselect a single column", async () => {
+    await selectColumn("A");
+    expect(model.getters.getSelectedZones()).toEqual(target("A1:A5"));
+    await selectColumn("A", { ctrlKey: true });
+    expect(model.getters.getSelectedZones()).toEqual(target("A1:A5"));
+  });
+
+  test("can deselect a single column when there are more than one", async () => {
+    await selectColumn("A");
+    expect(model.getters.getSelectedZones()).toEqual(target("A1:A5"));
+    await selectColumn("C", { ctrlKey: true });
+    expect(model.getters.getSelectedZones()).toEqual(target("A1:A5,C1:C5"));
+    await selectColumn("C", { ctrlKey: true });
+    expect(model.getters.getSelectedZones()).toEqual(target("A1:A5"));
+  });
+
+  test("Can select already selected column remove it from selection", async () => {
+    await selectColumn("A");
+    await selectColumn("D", { shiftKey: true });
+    await selectColumn("E", { ctrlKey: true });
+    expect(model.getters.getActiveCols()).toEqual(new Set([0, 1, 2, 3, 4]));
+    await selectColumn("C", { ctrlKey: true });
+    expect(model.getters.getActiveCols()).toEqual(new Set([0, 1, 3, 4]));
+  });
+
+  test("Can select already selected row remove it from selection", async () => {
+    await selectRow(0);
+    await selectRow(3, { shiftKey: true });
+    await selectRow(4, { ctrlKey: true });
+    expect(model.getters.getActiveRows()).toEqual(new Set([0, 1, 2, 3, 4]));
+    await selectRow(2, { ctrlKey: true });
+    expect(model.getters.getActiveRows()).toEqual(new Set([0, 1, 3, 4]));
+  });
+});