[IMP] figures: add anchor to figures

src/actions/menu_items_actions.ts

@@ -1,10 +1,7 @@
 import { CellPopoverStore } from "../components/popover";
 import { DEFAULT_FIGURE_HEIGHT, DEFAULT_FIGURE_WIDTH } from "../constants";
 import { parseOSClipboardContent } from "../helpers/clipboard/clipboard_helpers";
-import {
-  getChartPositionAtCenterOfViewport,
-  getSmartChartDefinition,
-} from "../helpers/figures/charts";
+import { getSmartChartDefinition } from "../helpers/figures/charts";
 import { centerFigurePosition, getMaxFigureSize } from "../helpers/figures/figure/figure";
 import {
   areZonesContinuous,
@@ -389,12 +386,13 @@ export const CREATE_CHART = (env: SpreadsheetChildEnv) => {
   }
 
   const size = { width: DEFAULT_FIGURE_WIDTH, height: DEFAULT_FIGURE_HEIGHT };
-  const position = getChartPositionAtCenterOfViewport(getters, size);
+  const { anchor, offset } = centerFigurePosition(getters, size);
 
   const result = env.model.dispatch("CREATE_CHART", {
     sheetId,
     id,
-    position,
+    anchor,
+    offset,
     size,
     definition: getSmartChartDefinition(env.model.getters.getSelectedZone(), env.model.getters),
   });
@@ -474,17 +472,18 @@ async function requestImage(env: SpreadsheetChildEnv): Promise<Image | undefined
 export const CREATE_IMAGE = async (env: SpreadsheetChildEnv) => {
   if (env.imageProvider) {
     const sheetId = env.model.getters.getActiveSheetId();
-    const figureId = env.model.uuidGenerator.uuidv4();
+    const id = env.model.uuidGenerator.uuidv4();
     const image = await requestImage(env);
     if (!image) {
       throw new Error("No image provider was given to the environment");
     }
     const size = getMaxFigureSize(env.model.getters, image.size);
-    const position = centerFigurePosition(env.model.getters, size);
+    const { anchor, offset } = centerFigurePosition(env.model.getters, size);
     env.model.dispatch("CREATE_IMAGE", {
       sheetId,
-      figureId,
-      position,
+      id,
+      anchor,
+      offset,
       size,
       definition: image,
     });

src/clipboard_handlers/chart_clipboard.ts

@@ -56,22 +56,15 @@ export class ChartClipboardHandler extends AbstractFigureClipboardHandler<Clipbo
     }
     const { zones, figureId } = target;
     const sheetId = target.sheetId;
-    const numCols = this.getters.getNumberCols(sheetId);
-    const numRows = this.getters.getNumberRows(sheetId);
-    const targetX = this.getters.getColDimensions(sheetId, zones[0].left).start;
-    const targetY = this.getters.getRowDimensions(sheetId, zones[0].top).start;
-    const maxX = this.getters.getColDimensions(sheetId, numCols - 1).end;
-    const maxY = this.getters.getRowDimensions(sheetId, numRows - 1).end;
     const { width, height } = clippedContent.copiedFigure;
-    const position = {
-      x: maxX < width ? 0 : Math.min(targetX, maxX - width),
-      y: maxY < height ? 0 : Math.min(targetY, maxY - height),
-    };
+    const anchor = { col: zones[0].left, row: zones[0].top };
+    const offset = { x: 0, y: 0 };
     const copy = clippedContent.copiedChart.copyInSheetId(sheetId);
     this.dispatch("CREATE_CHART", {
       id: figureId,
       sheetId,
-      position,
+      anchor,
+      offset,
       size: { height, width },
       definition: copy.getDefinition(),
     });

src/clipboard_handlers/image_clipboard.ts

@@ -55,22 +55,16 @@ export class ImageClipboardHandler extends AbstractFigureClipboardHandler<Clipbo
     }
     const { zones, figureId } = target;
     const sheetId = this.getters.getActiveSheetId();
-    const numCols = this.getters.getNumberCols(sheetId);
-    const numRows = this.getters.getNumberRows(sheetId);
-    const targetX = this.getters.getColDimensions(sheetId, zones[0].left).start;
-    const targetY = this.getters.getRowDimensions(sheetId, zones[0].top).start;
-    const maxX = this.getters.getColDimensions(sheetId, numCols - 1).end;
-    const maxY = this.getters.getRowDimensions(sheetId, numRows - 1).end;
     const { width, height } = clippedContent.copiedFigure;
-    const position = {
-      x: maxX < width ? 0 : Math.min(targetX, maxX - width),
-      y: maxY < height ? 0 : Math.min(targetY, maxY - height),
-    };
+    const anchor = { col: zones[0].left, row: zones[0].top };
+    const offset = { x: 0, y: 0 };
     const copy = deepCopy(clippedContent.copiedImage);
+    // TODO see offset + limit
     this.dispatch("CREATE_IMAGE", {
-      figureId,
+      id: figureId,
       sheetId,
-      position,
+      anchor,
+      offset,
       size: { height, width },
       definition: copy,
     });

src/components/figures/chart/chartJs/chartjs.ts

@@ -1,13 +1,13 @@
 import { Component, onMounted, onWillUnmount, useEffect, useRef } from "@odoo/owl";
 import { Chart, ChartConfiguration } from "chart.js/auto";
 import { deepCopy } from "../../../../helpers";
-import { Figure, SpreadsheetChildEnv } from "../../../../types";
+import { FigureUI, SpreadsheetChildEnv } from "../../../../types";
 import { ChartJSRuntime } from "../../../../types/chart/chart";
 import { chartShowValuesPlugin } from "./chartjs_show_values_plugin";
 import { waterfallLinesPlugin } from "./chartjs_waterfall_plugin";
 
 interface Props {
-  figure: Figure;
+  figureUI: FigureUI;
 }
 
 window.Chart?.register(waterfallLinesPlugin);
@@ -16,7 +16,7 @@ window.Chart?.register(chartShowValuesPlugin);
 export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartJsComponent";
   static props = {
-    figure: Object,
+    figureUI: Object,
   };
 
   private canvas = useRef("graphContainer");
@@ -32,7 +32,7 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   }
 
   get chartRuntime(): ChartJSRuntime {
-    const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
+    const runtime = this.env.model.getters.getChartRuntime(this.props.figureUI.figure.id);
     if (!("chartJsConfig" in runtime)) {
       throw new Error("Unsupported chart runtime");
     }

src/components/figures/chart/gauge/gauge_chart_component.ts

@@ -1,18 +1,20 @@
 import { Component, useEffect, useRef } from "@odoo/owl";
 import { drawGaugeChart } from "../../../../helpers/figures/charts/gauge_chart_rendering";
-import { Figure, SpreadsheetChildEnv } from "../../../../types";
+import { FigureUI, SpreadsheetChildEnv } from "../../../../types";
 import { GaugeChartRuntime } from "../../../../types/chart";
 
 interface Props {
-  figure: Figure;
+  figureUI: FigureUI;
 }
 
 export class GaugeChartComponent extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-GaugeChartComponent";
   private canvas = useRef("chartContainer");
 
   get runtime(): GaugeChartRuntime {
-    return this.env.model.getters.getChartRuntime(this.props.figure.id) as GaugeChartRuntime;
+    return this.env.model.getters.getChartRuntime(
+      this.props.figureUI.figure.id
+    ) as GaugeChartRuntime;
   }
 
   setup() {
@@ -28,5 +30,5 @@ export class GaugeChartComponent extends Component<Props, SpreadsheetChildEnv> {
 }
 
 GaugeChartComponent.props = {
-  figure: Object,
+  figureUI: Object,
 };

src/components/figures/chart/scorecard/chart_scorecard.ts

@@ -2,26 +2,29 @@ import { Component, useEffect, useRef } from "@odoo/owl";
 import { drawScoreChart } from "../../../../helpers/figures/charts/scorecard_chart";
 import { getScorecardConfiguration } from "../../../../helpers/figures/charts/scorecard_chart_config_builder";
 import { _t } from "../../../../translation";
-import { Figure, SpreadsheetChildEnv } from "../../../../types";
+import { FigureUI, SpreadsheetChildEnv } from "../../../../types";
 import { ScorecardChartRuntime } from "../../../../types/chart/scorecard_chart";
 
 interface Props {
-  figure: Figure;
+  figureUI: FigureUI;
 }
 
 export class ScorecardChart extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ScorecardChart";
   static props = {
-    figure: Object,
+    figureUI: Object,
   };
   private canvas = useRef("chartContainer");
 
   get runtime(): ScorecardChartRuntime {
-    return this.env.model.getters.getChartRuntime(this.props.figure.id) as ScorecardChartRuntime;
+    return this.env.model.getters.getChartRuntime(
+      this.props.figureUI.figure.id
+    ) as ScorecardChartRuntime;
   }
 
   get title(): string {
-    const title = this.env.model.getters.getChartDefinition(this.props.figure.id).title.text ?? "";
+    const title =
+      this.env.model.getters.getChartDefinition(this.props.figureUI.figure.id).title.text ?? "";
     // chart titles are extracted from .json files and they are translated at runtime here
     return _t(title);
   }

src/components/figures/figure/figure.ts

@@ -9,7 +9,7 @@ import { figureRegistry } from "../../../registries/index";
 import {
   CSSProperties,
   DOMCoordinates,
-  Figure,
+  FigureUI,
   Pixel,
   ResizeDirection,
   SpreadsheetChildEnv,
@@ -113,7 +113,7 @@ css/*SCSS*/ `
 `;
 
 interface Props {
-  figure: Figure;
+  figureUI: FigureUI;
   style: string;
   onFigureDeleted: () => void;
   onMouseDown: (ev: MouseEvent) => void;
@@ -123,7 +123,7 @@ interface Props {
 export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-FigureComponent";
   static props = {
-    figure: Object,
+    figureUI: Object,
     style: { type: String, optional: true },
     onFigureDeleted: { type: Function, optional: true },
     onMouseDown: { type: Function, optional: true },
@@ -145,7 +145,7 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
   private borderWidth!: number;
 
   get isSelected(): boolean {
-    return this.env.model.getters.getSelectedFigureId() === this.props.figure.id;
+    return this.env.model.getters.getSelectedFigureId() === this.props.figureUI.figure.id;
   }
 
   get figureRegistry() {
@@ -164,7 +164,8 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
   }
 
   get wrapperStyle() {
-    const { x, y, width, height } = this.props.figure;
+    const { x, y, figure } = this.props.figureUI;
+    const { width, height } = figure;
     return cssPropertiesToCss({
       left: `${x}px`,
       top: `${y}px`,
@@ -196,7 +197,7 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
   }
 
   setup() {
-    const borderWidth = figureRegistry.get(this.props.figure.tag).borderWidth;
+    const borderWidth = figureRegistry.get(this.props.figureUI.figure.tag).borderWidth;
     this.borderWidth = borderWidth !== undefined ? borderWidth : BORDER_WIDTH;
     useEffect(
       (selectedFigureId: UID | null, thisFigureId: UID, el: HTMLElement | null) => {
@@ -212,7 +213,11 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
           el?.focus({ preventScroll: true });
         }
       },
-      () => [this.env.model.getters.getSelectedFigureId(), this.props.figure.id, this.figureRef.el]
+      () => [
+        this.env.model.getters.getSelectedFigureId(),
+        this.props.figureUI.figure.id,
+        this.figureRef.el,
+      ]
     );
 
     onWillUnmount(() => {
@@ -229,7 +234,7 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
   }
 
   onKeyDown(ev: KeyboardEvent) {
-    const figure = this.props.figure;
+    const figure = this.props.figureUI.figure;
     const keyDownShortcut = keyboardEventToShortcutString(ev);
 
     switch (keyDownShortcut) {
@@ -253,12 +258,15 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
           ArrowRight: [1, 0],
           ArrowUp: [0, -1],
         };
+        // TODO check cell change
         const delta = deltaMap[ev.key];
         this.env.model.dispatch("UPDATE_FIGURE", {
           sheetId: this.env.model.getters.getActiveSheetId(),
           id: figure.id,
-          x: figure.x + delta[0],
-          y: figure.y + delta[1],
+          offset: {
+            x: figure.offset.x + delta[0],
+            y: figure.offset.y + delta[1],
+          },
         });
         ev.preventDefault();
         ev.stopPropagation();
@@ -303,7 +311,7 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
     this.menuState.isOpen = true;
     this.menuState.position = position;
     this.menuState.menuItems = figureRegistry
-      .get(this.props.figure.tag)
-      .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);
+      .get(this.props.figureUI.figure.tag)
+      .menuBuilder(this.props.figureUI.figure.id, this.props.onFigureDeleted, this.env);
   }
 }

src/components/figures/figure/figure.xml

@@ -7,15 +7,15 @@
         t-on-contextmenu.prevent.stop="(ev) => !env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="figure"
         t-att-style="props.style"
-        t-att-data-id="props.figure.id"
+        t-att-data-id="props.figureUI.figure.id"
         tabindex="0"
         t-on-keydown="(ev) => this.onKeyDown(ev)"
         t-on-keyup.stop="">
         <t
-          t-component="figureRegistry.get(props.figure.tag).Component"
-          t-key="props.figure.id"
+          t-component="figureRegistry.get(props.figureUI.figure.tag).Component"
+          t-key="props.figureUI.figure.id"
           onFigureDeleted="props.onFigureDeleted"
-          figure="props.figure"
+          figureUI="props.figureUI"
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">
           <div

src/components/figures/figure_chart/figure_chart.ts

@@ -1,6 +1,6 @@
 import { Component } from "@odoo/owl";
 import { chartComponentRegistry } from "../../../registries/chart_types";
-import { ChartType, Figure, SpreadsheetChildEnv } from "../../../types";
+import { ChartType, FigureUI, SpreadsheetChildEnv } from "../../../types";
 import { css } from "../../helpers/css";
 
 // -----------------------------------------------------------------------------
@@ -17,25 +17,25 @@ css/* scss */ `
 interface Props {
   // props figure is currently necessary scorecards, we need the chart dimension at render to avoid having to force the
   // style by hand in the useEffect()
-  figure: Figure;
+  figureUI: FigureUI;
   onFigureDeleted: () => void;
 }
 
 export class ChartFigure extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartFigure";
   static props = {
-    figure: Object,
+    figureUI: Object,
     onFigureDeleted: Function,
   };
   static components = {};
 
   onDoubleClick() {
-    this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
+    this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figureUI.figure.id });
     this.env.openSidePanel("ChartPanel");
   }
 
   get chartType(): ChartType {
-    return this.env.model.getters.getChartType(this.props.figure.id);
+    return this.env.model.getters.getChartType(this.props.figureUI.figure.id);
   }
 
   get chartComponent(): new (...args: any) => Component {

src/components/figures/figure_chart/figure_chart.xml

@@ -3,8 +3,8 @@
     <div class="o-chart-container w-100 h-100" t-on-dblclick="onDoubleClick">
       <t
         t-component="chartComponent"
-        figure="this.props.figure"
-        t-key="this.props.figure.id + '-' + chartType"
+        figureUI="this.props.figureUI"
+        t-key="this.props.figureUI.figure.id"
       />
     </div>
   </t>