poc

Author: hokolomopo

packages/o-spreadsheet-engine/src/components/icons/icons.ts

@@ -133,6 +133,20 @@ export function getHoveredCaretDownSvg(color: Style): ImageSVG {
   };
 }
 
+export function getPivotSortSvg(style: Style): ImageSVG {
+  return {
+    name: "PIVOT_SORT_ICON",
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        fillColor: style.textColor || TEXT_BODY_MUTED,
+        path: "M120 216 h270 l-135 -130 M120 296 h270 l-135 130",
+      },
+    ],
+  };
+}
+
 const CHIP_CARET_DOWN_PATH = "M40 185 h270 l-135 128";
 
 export function getChipSvg(chipStyle: Style): ImageSVG {

packages/o-spreadsheet-engine/src/plugins/index.ts

@@ -55,6 +55,7 @@ import { CarouselUIPlugin } from "./ui_stateful/carousel_ui";
 import { ClipboardPlugin } from "./ui_stateful/clipboard";
 import { FilterEvaluationPlugin } from "./ui_stateful/filter_evaluation";
 import { HeaderPositionsUIPlugin } from "./ui_stateful/header_positions";
+import { HoveredCellPlugin } from "./ui_stateful/hovered_cell_plugin";
 import { GridSelectionPlugin } from "./ui_stateful/selection";
 import { SheetViewPlugin } from "./ui_stateful/sheetview";
 
@@ -110,7 +111,9 @@ export const statefulUIPluginRegistry = new Registry<UIPluginConstructor>()
   .add("header_positions", HeaderPositionsUIPlugin)
   .add("viewport", SheetViewPlugin)
   .add("clipboard", ClipboardPlugin)
-  .add("carousel_ui", CarouselUIPlugin);
+  .add("carousel_ui", CarouselUIPlugin)
+  .add("hovered_cell", HoveredCellPlugin)
+  .add("cell_icon", CellIconPlugin);
 
 // Plugins which have a derived state from core data
 export const coreViewsPluginRegistry = new Registry<CoreViewPluginConstructor>()
@@ -121,5 +124,4 @@ export const coreViewsPluginRegistry = new Registry<CoreViewPluginConstructor>()
   .add("data_validation_ui", EvaluationDataValidationPlugin)
   .add("dynamic_tables", DynamicTablesPlugin)
   .add("custom_colors", CustomColorsPlugin)
-  .add("pivot_ui", PivotUIPlugin)
-  .add("cell_icon", CellIconPlugin);
+  .add("pivot_ui", PivotUIPlugin);

packages/o-spreadsheet-engine/src/plugins/ui_core_views/cell_icon_plugin.ts

@@ -7,9 +7,9 @@ import {
 import { Command } from "../../types/commands";
 import { Align, CellPosition } from "../../types/misc";
 import { Rect } from "../../types/rendering";
-import { CoreViewPlugin } from "../core_view_plugin";
+import { UIPlugin } from "../ui_plugin";
 
-export class CellIconPlugin extends CoreViewPlugin {
+export class CellIconPlugin extends UIPlugin {
   static getters = ["doesCellHaveGridIcon", "getCellIcons", "getCellIconRect"] as const;
 
   private cellIconsCache: Record<string, Record<number, Record<number, GridIcon[]>>> = {};

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

@@ -0,0 +1,20 @@
+import { Command } from "../../types/commands";
+import { CellPosition } from "../../types/misc";
+import { UIPlugin } from "../ui_plugin";
+
+export class HoveredCellPlugin extends UIPlugin {
+  static getters = ["getHoveredCell"] as const;
+
+  private hoveredCell: CellPosition | undefined = undefined;
+
+  handle(cmd: Command) {
+    switch (cmd.type) {
+      case "SET_HOVERED_CELL":
+        this.hoveredCell = cmd.cellPosition || undefined;
+        break;
+    }
+  }
+  getHoveredCell(): CellPosition | undefined {
+    return this.hoveredCell;
+  }
+}

packages/o-spreadsheet-engine/src/registries/icons_on_cell_registry.ts

@@ -8,6 +8,7 @@ import {
   getHoveredCaretDownSvg,
   getHoveredChipSvg,
   getPivotIconSvg,
+  getPivotSortSvg,
   ICONS,
 } from "../components/icons/icons";
 import {
@@ -38,6 +39,7 @@ export interface GridIcon {
   hoverSvg?: ImageSVG;
   priority: number;
   onClick?: (position: CellPosition, env: SpreadsheetChildEnv) => void;
+  preventIconAnimation?: boolean;
 }
 
 type ImageSvgCallback = (getters: Getters, position: CellPosition) => GridIcon | undefined;
@@ -175,9 +177,9 @@ iconsOnCellRegistry.add("pivot_collapse", (getters, position) => {
 });
 
 iconsOnCellRegistry.add("pivot_dashboard_sorting", (getters, position) => {
-  if (!getters.isDashboard()) {
-    return undefined;
-  }
+  // if (!getters.isDashboard()) {
+  //   return undefined;
+  // }
   const pivotCell = getters.getPivotCellFromPosition(position);
   if (pivotCell.type !== "MEASURE_HEADER") {
     return undefined;
@@ -195,6 +197,33 @@ iconsOnCellRegistry.add("pivot_dashboard_sorting", (getters, position) => {
     margin: GRID_ICON_MARGIN,
     svg: sortDirection === "asc" ? getCaretUpSvg(cellStyle) : getCaretDownSvg(cellStyle),
     position,
-    onClick: undefined, // click is managed by ClickableCellSortIcon
+    preventIconAnimation: true,
+    onClick: undefined, // click is managed by clickable cell
+  };
+});
+
+iconsOnCellRegistry.add("pivot_dashboard_sorting_none", (getters, position) => {
+  if (!deepEquals(position, getters.getHoveredCell())) {
+    return undefined;
+  }
+  const pivotCell = getters.getPivotCellFromPosition(position);
+  if (pivotCell.type !== "MEASURE_HEADER") {
+    return undefined;
+  }
+
+  // if( !getters.isDashboard()) {
+  //   return undefined;
+  // }
+  const cellStyle = getters.getCellComputedStyle(position);
+  return {
+    type: `pivot_dashboard_sorting_none`,
+    priority: 5,
+    horizontalAlign: "right",
+    size: 17,
+    margin: GRID_ICON_MARGIN,
+    svg: getPivotSortSvg(cellStyle),
+    position,
+    preventIconAnimation: true,
+    onClick: undefined, // click is managed by clickable cell
   };
 });

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

@@ -219,6 +219,7 @@ export const readonlyAllowedCommands = new Set<CommandTypes>([
   "UPDATE_CAROUSEL_ACTIVE_ITEM",
 
   "UPDATE_PIVOT",
+  "SET_HOVERED_CELL",
 ]);
 
 export const coreTypes = new Set<CoreCommandTypes>([
@@ -1126,6 +1127,11 @@ export interface ToggleCheckboxCommand extends TargetDependentCommand {
   type: "TOGGLE_CHECKBOX";
 }
 
+export interface SetHoveredCellCommand {
+  type: "SET_HOVERED_CELL";
+  cellPosition: CellPosition | null;
+}
+
 export type CoreCommand =
   // /** History */
   // | SelectiveUndoCommand
@@ -1288,7 +1294,8 @@ export type LocalCommand =
   | AddNewChartToCarouselCommand
   | AddFigureChartToCarouselCommand
   | UpdateCarouselActiveItemCommand
-  | PopOutChartFromCarouselCommand;
+  | PopOutChartFromCarouselCommand
+  | SetHoveredCellCommand;
 
 export type Command = CoreCommand | LocalCommand;
 

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

@@ -29,6 +29,7 @@ import { CarouselUIPlugin } from "../plugins/ui_stateful/carousel_ui";
 import { ClipboardPlugin } from "../plugins/ui_stateful/clipboard";
 import { FilterEvaluationPlugin } from "../plugins/ui_stateful/filter_evaluation";
 import { HeaderPositionsUIPlugin } from "../plugins/ui_stateful/header_positions";
+import { HoveredCellPlugin } from "../plugins/ui_stateful/hovered_cell_plugin";
 import { GridSelectionPlugin } from "../plugins/ui_stateful/selection";
 import { SheetViewPlugin } from "../plugins/ui_stateful/sheetview";
 // -----------------------------------------------------------------------------
@@ -72,4 +73,5 @@ export type Getters = {
   PluginGetters<typeof CheckboxTogglePlugin> &
   PluginGetters<typeof CellIconPlugin> &
   PluginGetters<typeof DynamicTranslate> &
-  PluginGetters<typeof CarouselUIPlugin>;
+  PluginGetters<typeof CarouselUIPlugin> &
+  PluginGetters<typeof HoveredCellPlugin>;