[IMP] figures: add anchor to figures

demo/data.js

@@ -187,8 +187,9 @@ export const demoData = {
           tag: "chart",
           width: 400,
           height: 300,
-          x: 100,
-          y: 100,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           data: {
             type: "line",
             dataSetsHaveTitle: true,
@@ -205,8 +206,9 @@ export const demoData = {
           tag: "chart",
           width: 400,
           height: 300,
-          x: 600,
-          y: 100,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           data: {
             type: "bar",
             dataSetsHaveTitle: false,
@@ -223,8 +225,9 @@ export const demoData = {
           tag: "chart",
           width: 900,
           height: 400,
-          x: 100,
-          y: 420,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           data: {
             type: "pie",
             dataSetsHaveTitle: true,
@@ -237,8 +240,9 @@ export const demoData = {
         },
         {
           id: "4",
-          x: 1015,
-          y: 102,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           height: 296,
           width: 465,
           tag: "chart",
@@ -255,8 +259,9 @@ export const demoData = {
         },
         {
           id: "5",
-          x: 1015,
-          y: 420,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           height: 400,
           width: 465,
           tag: "chart",
@@ -279,8 +284,9 @@ export const demoData = {
           tag: "chart",
           width: 500,
           height: 300,
-          x: 100,
-          y: 850,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           data: {
             type: "scatter",
             dataSetsHaveTitle: true,
@@ -293,8 +299,9 @@ export const demoData = {
         },
         {
           id: "7",
-          x: 619,
-          y: 850,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           width: 500,
           height: 300,
           tag: "chart",
@@ -311,8 +318,9 @@ export const demoData = {
         },
         {
           id: "8",
-          x: 1138,
-          y: 850,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           width: 500,
           height: 300,
           tag: "chart",
@@ -332,8 +340,9 @@ export const demoData = {
         },
         {
           id: "9",
-          x: 100,
-          y: 1175,
+          anchor: { col: 0, row: 0 },
+          offset: { x: 0, y: 0 },
+          fixed_position: false,
           height: 300,
           width: 500,
           tag: "chart",

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);
   }