[IMP] renderer: add cell animations

This commit adds animations in the grid's canvas when a cell is changed.
The animations are defined in the `cell_animation_registry.ts` and
includes:

- fade in the cell when it gets a new content.
- fate out the cell when its content is removed.
- text sliding animation when the text is changed.
- color gradient animation when the cell colors is changed
- and more

The feature is designed to not impact the current grid drawing logic.
We still have a first step yo create `Box` from the model content,
and a second step to draw the `Box` in the canvas. The animations
are a step in between, where we change the `Box` depending on the
animation progress, and possibly add some additional `Box` to be drawn.

Task: 4805149

Author: hokolomopo

src/components/grid_overlay/grid_overlay.ts

@@ -1,5 +1,5 @@
 import { Component, onMounted, onWillUnmount, useExternalListener, useRef } from "@odoo/owl";
-import { deepEquals } from "../../helpers";
+import { deepEquals, positionToZone } from "../../helpers";
 import { isPointInsideRect } from "../../helpers/rectangle";
 import { Store, useStore } from "../../store_engine";
 import {
@@ -299,7 +299,11 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
 
     const icons = this.env.model.getters.getCellIcons(position);
     const icon = icons.find((icon) => {
-      return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon));
+      const merge = this.env.model.getters.getMerge(position);
+      const zone = merge || positionToZone(position);
+      const cellRect = this.env.model.getters.getRect(zone);
+
+      return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon, cellRect));
     });
     return icon?.onClick ? icon : undefined;
   }

src/components/helpers/draw_grid_hook.ts

@@ -4,7 +4,7 @@ import { Model } from "../../model";
 import { useStore } from "../../store_engine";
 import { GridRenderer } from "../../stores/grid_renderer_store";
 import { RendererStore } from "../../stores/renderer_store";
-import { DOMDimension, OrderedLayers } from "../../types";
+import { DOMDimension } from "../../types";
 
 export function useGridDrawing(refName: string, model: Model, canvasSize: () => DOMDimension) {
   const canvasRef = useRef(refName);
@@ -40,9 +40,6 @@ export function useGridDrawing(refName: string, model: Model, canvasSize: () =>
     ctx.translate(-CANVAS_SHIFT, -CANVAS_SHIFT);
     ctx.scale(dpr, dpr);
 
-    for (const layer of OrderedLayers()) {
-      model.drawLayer(renderingContext, layer);
-      rendererStore.drawLayer(renderingContext, layer);
-    }
+    rendererStore.draw(renderingContext);
   }
 }

src/components/icons/icons.ts

@@ -41,6 +41,7 @@ export type IconSetType = keyof typeof ICON_SETS;
 // We need here the svg of the icons that we need to convert to images for the renderer
 // -----------------------------------------------------------------------------
 const ARROW_DOWN: ImageSVG = {
+  name: "ARROW_DOWN",
   width: 448,
   height: 512,
   paths: [
@@ -51,6 +52,7 @@ const ARROW_DOWN: ImageSVG = {
   ],
 };
 const ARROW_UP: ImageSVG = {
+  name: "ARROW_UP",
   width: 448,
   height: 512,
   paths: [
@@ -61,6 +63,7 @@ const ARROW_UP: ImageSVG = {
   ],
 };
 const ARROW_RIGHT: ImageSVG = {
+  name: "ARROW_RIGHT",
   width: 448,
   height: 512,
   paths: [
@@ -72,6 +75,7 @@ const ARROW_RIGHT: ImageSVG = {
 };
 
 const SMILE: ImageSVG = {
+  name: "SMILE",
   width: 496,
   height: 512,
   paths: [
@@ -82,6 +86,7 @@ const SMILE: ImageSVG = {
   ],
 };
 const MEH: ImageSVG = {
+  name: "MEH",
   width: 496,
   height: 512,
   paths: [
@@ -92,6 +97,7 @@ const MEH: ImageSVG = {
   ],
 };
 const FROWN: ImageSVG = {
+  name: "FROWN",
   width: 496,
   height: 512,
   paths: [
@@ -104,28 +110,33 @@ const FROWN: ImageSVG = {
 
 const DOT_PATH = "M256 9 a247 247 0 1 0.1 0 0";
 const GREEN_DOT: ImageSVG = {
+  name: "GREEN_DOT",
   width: 512,
   height: 512,
   paths: [{ fillColor: "#6AA84F", path: DOT_PATH }],
 };
 const YELLOW_DOT: ImageSVG = {
+  name: "YELLOW_DOT",
   width: 512,
   height: 512,
   paths: [{ fillColor: "#F0AD4E", path: DOT_PATH }],
 };
 const RED_DOT: ImageSVG = {
+  name: "RED_DOT",
   width: 512,
   height: 512,
   paths: [{ fillColor: "#E06666", path: DOT_PATH }],
 };
 
 export const CARET_DOWN: ImageSVG = {
+  name: "CARET_DOWN",
   width: 512,
   height: 512,
   paths: [{ fillColor: TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
 };
 
 export const HOVERED_CARET_DOWN: ImageSVG = {
+  name: "CARET_DOWN",
   width: 512,
   height: 512,
   paths: [
@@ -135,18 +146,21 @@ export const HOVERED_CARET_DOWN: ImageSVG = {
 };
 
 export const CHECKBOX_UNCHECKED: ImageSVG = {
+  name: "CHECKBOX_UNCHECKED",
   width: 512,
   height: 512,
   paths: [{ fillColor: GRAY_300, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
 };
 
 export const CHECKBOX_UNCHECKED_HOVERED: ImageSVG = {
+  name: "CHECKBOX_UNCHECKED",
   width: 512,
   height: 512,
   paths: [{ fillColor: ACTION_COLOR, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
 };
 
 export const CHECKBOX_CHECKED: ImageSVG = {
+  name: "CHECKBOX_CHECKED",
   width: 512,
   height: 512,
   paths: [
@@ -161,6 +175,7 @@ export function getPivotIconSvg(isCollapsed: boolean, isHovered: boolean): Image
     : "M149,235 h213 v43 h-213"; // -
 
   return {
+    name: "PIVOT_ICON",
     width: 512,
     height: 512,
     paths: [
@@ -193,6 +208,7 @@ export function getDataFilterIcon(
   }
 
   return {
+    name: "DATA_FILTER_ICON",
     width: isActive ? 24 : 850,
     height: isActive ? 24 : 850,
     paths: [

src/components/side_panel/settings/settings_panel.ts

@@ -2,9 +2,13 @@ import { Component, onWillStart } from "@odoo/owl";
 import { GRAY_100, GRAY_300 } from "../../../constants";
 import { DAYS, deepEquals, formatValue } from "../../../helpers";
 import { getDateTimeFormat, isValidLocale } from "../../../helpers/locale";
+import { Store, useStore } from "../../../store_engine";
+import { GridRenderer } from "../../../stores/grid_renderer_store";
+import { _t } from "../../../translation";
 import { Locale, LocaleCode, SpreadsheetChildEnv } from "../../../types";
 import { css } from "../../helpers";
 import { ValidationMessages } from "../../validation_messages/validation_messages";
+import { BadgeSelection } from "../components/badge_selection/badge_selection";
 import { Section } from "../components/section/section";
 
 interface Props {
@@ -20,12 +24,14 @@ css/* scss */ `
 
 export class SettingsPanel extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-SettingsPanel";
-  static components = { Section, ValidationMessages };
+  static components = { Section, ValidationMessages, BadgeSelection };
   static props = { onCloseSidePanel: Function };
 
   loadedLocales: Locale[] = [];
+  gridRendererStore!: Store<GridRenderer>;
 
   setup() {
+    this.gridRendererStore = useStore(GridRenderer);
     onWillStart(() => this.loadLocales());
   }
 
@@ -91,4 +97,19 @@ export class SettingsPanel extends Component<Props, SpreadsheetChildEnv> {
 
     return this.loadedLocales;
   }
+
+  get cellAnimationChoices() {
+    return [
+      { value: "on", label: _t("On") },
+      { value: "off", label: _t("Off") },
+    ];
+  }
+
+  updateCellAnimations(value: "on" | "off") {
+    this.env.model.dispatch("TOGGLE_CELL_ANIMATIONS", { disableCellAnimations: value === "off" });
+  }
+
+  get cellAnimationValue() {
+    return this.env.model.getters.areCellAnimationDisabled() ? "off" : "on";
+  }
 }

src/components/side_panel/settings/settings_panel.xml

@@ -31,8 +31,17 @@
           </div>
         </div>
       </Section>
+
+      <Section title.translate="Cell animations">
+        <BadgeSelection
+          choices="cellAnimationChoices"
+          onChange.bind="updateCellAnimations"
+          selectedValue="cellAnimationValue"
+        />
+      </Section>
+
       <Section class="'pt-0'">
-        <t t-set="message">This setting affects all users.</t>
+        <t t-set="message">Those settings affect all users.</t>
         <ValidationMessages messages="[message]" msgType="'info'"/>
       </Section>
     </div>

src/plugins/core/settings.ts

@@ -10,8 +10,9 @@ import {
 import { CorePlugin } from "./../core_plugin";
 
 export class SettingsPlugin extends CorePlugin {
-  static getters = ["getLocale"] as const;
+  static getters = ["getLocale", "areCellAnimationDisabled"] as const;
   private locale: Locale = DEFAULT_LOCALE;
+  private disableCellAnimations: boolean | undefined = undefined;
 
   allowDispatch(cmd: CoreCommand) {
     switch (cmd.type) {
@@ -29,13 +30,20 @@ export class SettingsPlugin extends CorePlugin {
         this.history.update("locale", newLocale);
         this.changeCellsDateFormatWithLocale(oldLocale, newLocale);
         break;
+      case "TOGGLE_CELL_ANIMATIONS":
+        this.history.update("disableCellAnimations", cmd.disableCellAnimations);
+        break;
     }
   }
 
   getLocale(): Locale {
     return this.locale;
   }
 
+  areCellAnimationDisabled(): boolean {
+    return !!this.disableCellAnimations;
+  }
+
   private changeCellsDateFormatWithLocale(oldLocale: Locale, newLocale: Locale) {
     for (const sheetId of this.getters.getSheetIds()) {
       for (const [cellId, cell] of Object.entries(this.getters.getCells(sheetId))) {
@@ -64,11 +72,13 @@ export class SettingsPlugin extends CorePlugin {
 
   import(data: WorkbookData) {
     this.locale = data.settings?.locale ?? DEFAULT_LOCALE;
+    this.disableCellAnimations = data.settings?.disableCellAnimations;
   }
 
   export(data: WorkbookData) {
     data.settings = {
       locale: this.locale,
+      disableCellAnimations: this.disableCellAnimations,
     };
   }
 }

src/plugins/ui_core_views/cell_icon_plugin.ts

@@ -1,4 +1,4 @@
-import { isDefined, positionToZone } from "../../helpers/index";
+import { isDefined } from "../../helpers/index";
 import {
   GridIcon,
   IconsOfCell,
@@ -33,11 +33,8 @@ export class CellIconPlugin extends CoreViewPlugin {
     return this.cellIconsCache[position.sheetId][position.col][position.row];
   }
 
-  getCellIconRect(icon: GridIcon): Rect {
+  getCellIconRect(icon: GridIcon, cellRect: Rect): Rect {
     const cellPosition = icon.position;
-    const merge = this.getters.getMerge(cellPosition);
-    const zone = merge || positionToZone(cellPosition);
-    const cellRect = this.getters.getRect(zone);
     const cell = this.getters.getCell(cellPosition);
 
     const x = this.getIconHorizontalPosition(cellRect, icon.horizontalAlign, icon);