[IMP] highlight: add drag & drop to array formula highlight

src/components/composer/composer/composer_store.ts

@@ -743,7 +743,8 @@ export class ComposerStore extends SpreadsheetStore {
         zone,
         color: rangeColor(rangeString),
         sheetId: range.sheetId,
-        interactive: true,
+        movable: true,
+        resizable: true,
       };
     });
   }

src/components/grid/grid.ts

@@ -70,7 +70,7 @@ import { useGridDrawing } from "../helpers/draw_grid_hook";
 import { useAbsoluteBoundingRect } from "../helpers/position_hook";
 import { updateSelectionWithArrowKeys } from "../helpers/selection_helpers";
 import { useWheelHandler } from "../helpers/wheel_hook";
-import { Highlight } from "../highlight/highlight/highlight";
+import { HighlightOverlay } from "../highlight/highlight_overlay/highlight_overlay";
 import { Menu, MenuState } from "../menu/menu";
 import { CellPopoverStore } from "../popover";
 import { Popover } from "../popover/popover";
@@ -126,7 +126,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
     Menu,
     Autofill,
     ClientTag,
-    Highlight,
+    HighlightOverlay,
     Popover,
     VerticalScrollBar,
     HorizontalScrollBar,
@@ -192,8 +192,12 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
     this.hoveredCell.hover({ col, row });
   }
 
-  get highlights() {
-    return this.highlightStore.highlights;
+  get interactiveHighlight() {
+    const activeSheetId = this.env.model.getters.getActiveSheetId();
+    return this.highlightStore.highlights.filter(
+      (highlight) =>
+        highlight.sheetId === activeSheetId && (highlight.resizable || highlight.movable)
+    );
   }
 
   get gridOverlayDimensions() {

src/components/grid/grid.xml

@@ -44,11 +44,8 @@
       <t t-if="env.model.getters.isGridSelectionActive()">
         <Autofill position="getAutofillPosition()" isVisible="isAutofillVisible"/>
       </t>
-      <t t-foreach="highlights" t-as="highlight" t-key="highlight_index">
-        <t
-          t-if="highlight.interactive and highlight.sheetId === env.model.getters.getActiveSheetId()">
-          <Highlight zone="highlight.zone" color="highlight.color"/>
-        </t>
+      <t t-foreach="interactiveHighlight" t-as="highlight" t-key="highlight_index">
+        <HighlightOverlay highlight="highlight"/>
       </t>
       <Menu
         t-if="menuState.isOpen"

src/components/highlight/border/border.ts

@@ -38,18 +38,18 @@ export class Border extends Component<Props, SpreadsheetChildEnv> {
     const isVertical = ["w", "e"].includes(this.props.orientation);
 
     const z = this.props.zone;
-    const margin = 2;
 
     const rect = this.env.model.getters.getVisibleRect(z);
 
     const left = rect.x;
-    const right = rect.x + rect.width - 2 * margin;
+    const right = rect.x + rect.width;
     const top = rect.y;
-    const bottom = rect.y + rect.height - 2 * margin;
+    const bottom = rect.y + rect.height;
 
-    const lineWidth = 4;
-    const leftValue = isLeft ? left : right;
-    const topValue = isTop ? top : bottom;
+    const lineWidth = 8;
+    const centeringOffset = lineWidth / 2;
+    const leftValue = (isLeft ? left : right) - (isVertical ? centeringOffset : 0);
+    const topValue = (isTop ? top : bottom) - (isHorizontal ? centeringOffset : 0);
     const widthValue = isHorizontal ? right - left : lineWidth;
     const heightValue = isVertical ? bottom - top : lineWidth;
 

src/components/highlight/highlight/highlight.ts → src/components/highlight/highlight_overlay/highlight_overlay.ts

@@ -1,7 +1,7 @@
 import { Component, useState } from "@odoo/owl";
 import { ComponentsImportance } from "../../../constants";
 import { clip, isEqual } from "../../../helpers";
-import { Color, HeaderIndex, Pixel, SpreadsheetChildEnv, Zone } from "../../../types";
+import { HeaderIndex, Highlight, Pixel, SpreadsheetChildEnv, Zone } from "../../../types";
 import { css } from "../../helpers/css";
 import { gridOverlayPosition } from "../../helpers/dom_helpers";
 import { dragAndDropBeyondTheViewport } from "../../helpers/drag_and_drop";
@@ -15,19 +15,15 @@ css/*SCSS*/ `
 `;
 
 interface Props {
-  zone: Zone;
-  color: Color;
+  highlight: Highlight;
 }
 
 interface HighlightState {
   shiftingMode: "isMoving" | "isResizing" | "none";
 }
-export class Highlight extends Component<Props, SpreadsheetChildEnv> {
-  static template = "o-spreadsheet-Highlight";
-  static props = {
-    zone: Object,
-    color: String,
-  };
+export class HighlightOverlay extends Component<Props, SpreadsheetChildEnv> {
+  static template = "o-spreadsheet-HighlightOverlay";
+  static props = { highlight: Object };
   static components = {
     Corner,
     Border,
@@ -38,9 +34,12 @@ export class Highlight extends Component<Props, SpreadsheetChildEnv> {
   });
 
   onResizeHighlight(isLeft: boolean, isTop: boolean) {
+    if (!this.isResizable) {
+      return;
+    }
     const activeSheetId = this.env.model.getters.getActiveSheetId();
     this.highlightState.shiftingMode = "isResizing";
-    const z = this.props.zone;
+    const z = this.props.highlight.zone;
 
     const pivotCol = isLeft ? z.right : z.left;
     const pivotRow = isTop ? z.bottom : z.top;
@@ -85,14 +84,18 @@ export class Highlight extends Component<Props, SpreadsheetChildEnv> {
 
     const mouseUp = () => {
       this.highlightState.shiftingMode = "none";
+      this.env.model.dispatch("STOP_CHANGE_HIGHLIGHT");
     };
 
     dragAndDropBeyondTheViewport(this.env, mouseMove, mouseUp);
   }
 
   onMoveHighlight(clientX: Pixel, clientY: Pixel) {
+    if (!this.isMovable) {
+      return;
+    }
     this.highlightState.shiftingMode = "isMoving";
-    const z = this.props.zone;
+    const z = this.props.highlight.zone;
 
     const position = gridOverlayPosition();
     const activeSheetId = this.env.model.getters.getActiveSheetId();
@@ -141,8 +144,17 @@ export class Highlight extends Component<Props, SpreadsheetChildEnv> {
 
     const mouseUp = () => {
       this.highlightState.shiftingMode = "none";
+      this.env.model.dispatch("STOP_CHANGE_HIGHLIGHT");
     };
 
     dragAndDropBeyondTheViewport(this.env, mouseMove, mouseUp);
   }
+
+  get isResizable() {
+    return this.props.highlight.resizable;
+  }
+
+  get isMovable() {
+    return this.props.highlight.movable;
+  }
 }

src/components/highlight/highlight/highlight.xml → src/components/highlight/highlight_overlay/highlight_overlay.xml

@@ -1,21 +1,25 @@
 <templates>
-  <t t-name="o-spreadsheet-Highlight">
+  <t t-name="o-spreadsheet-HighlightOverlay">
     <div class="o-highlight" t-ref="highlight">
-      <t t-foreach="['n', 's', 'w', 'e']" t-as="orientation" t-key="orientation">
+      <t t-if="isMovable" t-foreach="['n', 's', 'w', 'e']" t-as="orientation" t-key="orientation">
         <Border
           onMoveHighlight="(x, y) => this.onMoveHighlight(x,y)"
           isMoving='highlightState.shiftingMode === "isMoving"'
           orientation="orientation"
-          zone="props.zone"
+          zone="props.highlight.zone"
         />
       </t>
-      <t t-foreach="['nw', 'ne', 'sw', 'se']" t-as="orientation" t-key="orientation">
+      <t
+        t-if="isResizable"
+        t-foreach="['nw', 'ne', 'sw', 'se']"
+        t-as="orientation"
+        t-key="orientation">
         <Corner
           onResizeHighlight="(isLeft, isTop) => this.onResizeHighlight(isLeft, isTop)"
           isResizing='highlightState.shiftingMode === "isResizing"'
           orientation="orientation"
-          zone="props.zone"
-          color="props.color"
+          zone="props.highlight.zone"
+          color="props.highlight.color"
         />
       </t>
     </div>

src/components/selection_input/selection_input_store.ts

@@ -340,7 +340,8 @@ export class SelectionInputStore extends SpreadsheetStore {
         zone: this.getters.getRangeFromSheetXC(this.inputSheetId, xc).zone,
         sheetId: (sheetName && this.getters.getSheetIdByName(sheetName)) || this.inputSheetId,
         color,
-        interactive: true,
+        movable: true,
+        resizable: true,
       };
     });
   }

src/components/side_panel/find_and_replace/find_and_replace_store.ts

@@ -1,8 +1,15 @@
-import { debounce, getSearchRegex, isInside, positionToZone } from "../../../helpers";
+import {
+  debounce,
+  getSearchRegex,
+  isInside,
+  positionToZone,
+  withOneHistoryStep,
+} from "../../../helpers";
 import { HighlightProvider, HighlightStore } from "../../../stores/highlight_store";
 import { CellPosition, Color, Command, Highlight } from "../../../types";
 
 import { toRaw } from "@odoo/owl";
+import { canonicalizeNumberContent } from "../../../helpers/locale";
 import { Get } from "../../../store_engine";
 import { SpreadsheetStore } from "../../../stores";
 import { SearchOptions } from "../../../types/find_and_replace";
@@ -280,26 +287,51 @@ export class FindAndReplaceStore extends SpreadsheetStore implements HighlightPr
       return;
     }
 
-    this.model.dispatch("REPLACE_SEARCH", {
-      searchString: this.toSearch,
-      replaceWith: this.toReplace,
-      matches: [this.searchMatches[this.selectedMatchIndex]],
-      searchOptions: this.searchOptions,
-    });
+    this.replaceMatch(
+      this.searchMatches[this.selectedMatchIndex],
+      this.toSearch,
+      this.toReplace,
+      this.searchOptions
+    );
     this.selectNextCell(Direction.next);
   }
   /**
    * Apply the replace function to all the matches one time.
    */
   replaceAll() {
-    this.model.dispatch("REPLACE_SEARCH", {
-      searchString: this.toSearch,
-      replaceWith: this.toReplace,
-      matches: this.searchMatches,
-      searchOptions: this.searchOptions,
+    withOneHistoryStep(this.model, () => {
+      for (const match of this.searchMatches) {
+        this.replaceMatch(match, this.toSearch, this.toReplace, this.searchOptions);
+      }
     });
   }
 
+  private replaceMatch(
+    selectedMatch: CellPosition,
+    searchString: string,
+    replaceWith: string,
+    searchOptions: SearchOptions
+  ) {
+    const cell = this.getters.getCell(selectedMatch);
+    if (!cell?.content) {
+      return;
+    }
+
+    if (cell?.isFormula && !searchOptions.searchFormulas) {
+      return;
+    }
+
+    const searchRegex = getSearchRegex(searchString, searchOptions);
+    const replaceRegex = new RegExp(searchRegex.source, searchRegex.flags + "g");
+    const toReplace: string | null = this.getters.getCellText(
+      selectedMatch,
+      searchOptions.searchFormulas
+    );
+    const content = toReplace.replace(replaceRegex, replaceWith);
+    const canonicalContent = canonicalizeNumberContent(content, this.getters.getLocale());
+    this.model.dispatch("UPDATE_CELL", { ...selectedMatch, content: canonicalContent });
+  }
+
   private getSearchableString(position: CellPosition): string {
     return this.getters.getCellText(position, this.searchOptions.searchFormulas);
   }

src/helpers/misc.ts

@@ -2,6 +2,7 @@
 // Miscellaneous
 //------------------------------------------------------------------------------
 import { NEWLINE } from "../constants";
+import { Model } from "../model";
 import { ConsecutiveIndexes, Lazy, UID } from "../types";
 import { SearchOptions } from "../types/find_and_replace";
 import { Cloneable, DebouncedFunction } from "./../types/misc";
@@ -551,3 +552,7 @@ export function largeMin(array: number[]) {
   }
   return min;
 }
+
+export function withOneHistoryStep(model: Model, callback: () => void) {
+  model.dispatch("BATCH_COMMANDS", { callback });
+}

src/helpers/recompute_zones.ts

@@ -1,5 +1,5 @@
 import { deepEqualsArray } from "../helpers/misc";
-import { UnboundedZone } from "../types";
+import { UnboundedZone, Zone } from "../types";
 
 /**
  * ####################################################
@@ -128,10 +128,10 @@ import { UnboundedZone } from "../types";
  * - you will find coordinate of a cell only once among all the zones
  * - the number of zones will be reduced to the minimum
  */
-export function recomputeZones(
-  zones: UnboundedZone[],
-  zonesToRemove: UnboundedZone[]
-): UnboundedZone[] {
+export function recomputeZones<T extends Zone | UnboundedZone>(
+  zones: T[],
+  zonesToRemove: T[]
+): T[] {
   const profilesStartingPosition: number[] = [0];
   const profiles = new Map<number, number[]>([[0, []]]);
 
@@ -140,10 +140,10 @@ export function recomputeZones(
   return constructZonesFromProfiles(profilesStartingPosition, profiles);
 }
 
-export function modifyProfiles( // export for testing only
+export function modifyProfiles<T extends Zone | UnboundedZone>( // export for testing only
   profilesStartingPosition: number[],
   profiles: Map<number, number[]>,
-  zones: UnboundedZone[],
+  zones: T[],
   toRemove: boolean = false
 ) {
   for (const zone of zones) {
@@ -298,10 +298,10 @@ function removeContiguousProfiles(
   }
 }
 
-function constructZonesFromProfiles(
+function constructZonesFromProfiles<T extends Zone | UnboundedZone>(
   profilesStartingPosition: number[],
   profiles: Map<number, number[]>
-): UnboundedZone[] {
+): T[] {
   const mergedZone: UnboundedZone[] = [];
   let pendingZones: UnboundedZone[] = [];
   for (let colIndex = 0; colIndex < profilesStartingPosition.length; colIndex++) {
@@ -353,7 +353,7 @@ function constructZonesFromProfiles(
     pendingZones = nextPendingZones;
   }
   mergedZone.push(...pendingZones);
-  return mergedZone;
+  return mergedZone as T[];
 }
 
 function binaryPredecessorSearch(arr: number[], val: number, start = 0, matchEqual = true) {

src/plugins/index.ts

@@ -30,13 +30,13 @@ import {
   AutomaticSumPlugin,
   CollaborativePlugin,
   DataCleanupPlugin,
-  FindAndReplacePlugin,
   FormatPlugin,
   HeaderVisibilityUIPlugin,
   SheetUIPlugin,
   SortPlugin,
   UIOptionsPlugin,
 } from "./ui_feature";
+import { BatchCommandsPlugin } from "./ui_feature/batch_commands";
 import { CellComputedStylePlugin } from "./ui_feature/cell_computed_style";
 import { HistoryPlugin } from "./ui_feature/local_history";
 import { SplitToColumnsPlugin } from "./ui_feature/split_to_columns";
@@ -70,10 +70,10 @@ export const corePluginRegistry = new Registry<CorePluginConstructor>()
 
 // Plugins which handle a specific feature, without handling any core commands
 export const featurePluginRegistry = new Registry<UIPluginConstructor>()
+  .add("batch_commands", BatchCommandsPlugin)
   .add("ui_sheet", SheetUIPlugin)
   .add("ui_options", UIOptionsPlugin)
   .add("autofill", AutofillPlugin)
-  .add("find_and_replace", FindAndReplacePlugin)
   .add("sort", SortPlugin)
   .add("automatic_sum", AutomaticSumPlugin)
   .add("format", FormatPlugin)