Master fix zoom safari rar

src/components/grid/grid.ts

@@ -267,7 +267,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
         this.env.model.dispatch("CLEAN_CLIPBOARD_HIGHLIGHT");
       }
     },
-    "Ctrl+A": () => this.env.model.selection.loopSelection(),
+    "Ctrl+A": (ev) => {this.env.model.selection.loopSelection(); ev.stopPropagation();},
     "Ctrl+Z": () => this.env.model.dispatch("REQUEST_UNDO"),
     "Ctrl+Y": () => this.env.model.dispatch("REQUEST_REDO"),
     F4: () => this.env.model.dispatch("REQUEST_REDO"),

src/components/grid_overlay/grid_overlay.ts

@@ -1,6 +1,6 @@
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component, onMounted, onWillUnmount, useExternalListener, useRef } from "@odoo/owl";
-import { deepEquals, positionToZone } from "../../helpers";
+import { deepEquals, positionToZone, zoneToDimension } from "../../helpers";
 import { isPointInsideRect } from "../../helpers/rectangle";
 import { Store, useStore } from "../../store_engine";
 import {
@@ -253,6 +253,7 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
   onCellClicked(zoomedMouseEvent: ZoomedMouseEvent<MouseEvent | PointerEvent>) {
     const openedPopover = this.cellPopovers.persistentCellPopover;
     const [col, row] = this.getCartesianCoordinates(zoomedMouseEvent);
+    console.log("Cell clicked:", { col, row, zoomedMouseEvent });
     const clickedIcon = this.getInteractiveIconAtEvent(zoomedMouseEvent);
     if (clickedIcon) {
       this.env.model.selection.getBackToDefault();

src/components/helpers/dom_helpers.ts

@@ -1,5 +1,6 @@
 import { Ref } from "@odoo/o-spreadsheet-engine/types/misc";
 import { Rect } from "@odoo/o-spreadsheet-engine/types/rendering";
+import { getZoomedDomRect } from "./zoom";
 
 const macRegex = /Mac/i;
 
@@ -14,10 +15,10 @@ export function isChildEvent(parent: HTMLElement | null | undefined, ev: Event):
   return !!ev.target && parent!.contains(ev.target as Node);
 }
 
-export function gridOverlayPosition() {
+export function gridOverlayPosition(zoom = 1) {
   const spreadsheetElement = document.querySelector(".o-grid-overlay");
   if (spreadsheetElement) {
-    return spreadsheetElement.getBoundingClientRect();
+    return getZoomedDomRect(zoom, spreadsheetElement.getBoundingClientRect());
   }
   throw new Error("Can't find spreadsheet position");
 }
@@ -234,6 +235,10 @@ export function isIOS() {
   );
 }
 
+export function isBrowserSafari() {
+  return /Safari/i.test(navigator.userAgent);
+}
+
 function isOtherMobileOS() {
   return /(webOS|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
 }

src/components/helpers/drag_and_drop_grid_hook.ts

@@ -20,7 +20,7 @@ export type DnDDirection = "all" | "vertical" | "horizontal";
 export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
   let timeOutId: any = null;
   let currentEv: PointerEvent;
-  let previousEvClientPosition: { clientX: number; clientY: number };
+  let previousEvClientPosition: { clientX: number; clientY: number, offsetX: number; offsetY: number };
   let startingX: number;
   let startingY: number;
   let scrollDirection: DnDDirection = "all";
@@ -45,7 +45,8 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
     }
 
     const sheetId = getters.getActiveSheetId();
-    const position = gridOverlayPosition();
+    const zoomLevel = getters.getViewportZoomLevel();
+    const position = gridOverlayPosition(zoomLevel);
     const zoomedMouseEvent = withZoom(env, currentEv, position);
     const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
     const { top, left, bottom, right } = getters.getActiveMainViewport();
@@ -54,7 +55,7 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
     let canEdgeScroll = false;
     let timeoutDelay = MAX_DELAY;
 
-    const x = zoomedMouseEvent.clientX - position.left;
+    const x = (zoomedMouseEvent.clientX - position.left) / 1;
     let colIndex = getters.getColIndex(x);
 
     if (scrollDirection !== "vertical") {
@@ -84,11 +85,14 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
       }
     }
 
-    const y = zoomedMouseEvent.clientY - position.top;
+    debugger
+    const y =  (zoomedMouseEvent.clientY - position.top);
     let rowIndex = getters.getRowIndex(y);
 
     if (scrollDirection !== "horizontal") {
-      const previousY = previousEvClientPosition.clientY - position.top;
+      console.log("edge scroll Y");
+      const previousY = previousEvClientPosition.clientY - position.top //previousEvClientPosition.offsetY //previousEvClientPosition.clientY - position.top;
+      console.log("edge scroll Y");
       const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
       if (edgeScrollInfoY.canEdgeScroll) {
         canEdgeScroll = true;
@@ -130,6 +134,8 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
     previousEvClientPosition = {
       clientX: zoomedMouseEvent.clientX,
       clientY: zoomedMouseEvent.clientY,
+      offsetX: zoomedMouseEvent.offsetX,
+      offsetY: zoomedMouseEvent.offsetY,
     };
   };
 
@@ -145,13 +151,18 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
     startScrollDirection: DnDDirection = "all"
   ) => {
     cleanUp();
-    const position = gridOverlayPosition();
+    // const position = gridOverlayPosition();
+    const zoomLevel = getters.getViewportZoomLevel();
+    const position = gridOverlayPosition(zoomLevel);
     scrollDirection = startScrollDirection;
     startingX = initialPointerCoordinates.clientX - position.left;
     startingY = initialPointerCoordinates.clientY - position.top;
+    console.log("startingY", {startingY, initialPointerCoordinates, position});
     previousEvClientPosition = {
       clientX: initialPointerCoordinates.clientX,
       clientY: initialPointerCoordinates.clientY,
+      offsetX: startingX,
+      offsetY: startingY,
     };
     pointerMoveCallback = onPointerMove;
     pointerUpCallback = onPointerUp;

src/components/helpers/zoom.ts

@@ -1,5 +1,6 @@
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Pixel, Rect } from "../..";
+import { isBrowserSafari } from "./dom_helpers";
 
 export type ZoomedMouseEvent<T extends MouseEvent | PointerEvent> = {
   clientX: Pixel;
@@ -24,18 +25,27 @@ export function withZoom<T extends MouseEvent>(
   const zoomLevel = env.model.getters.getViewportZoomLevel();
   if (originalTargetRect === undefined) {
     originalTargetRect = getZoomTargetBoundingRect(ev);
+    //  => this is fucked up in safari because the "closest o-zoomable" is actually zoomed already
+    // il faut probablement limiter ce truc de rect magique avec 
   }
   if (!originalTargetRect) return withNoZoom(ev);
-  const baseOffsetX = ev.clientX - originalTargetRect.left;
-  const baseOffsetY = ev.clientY - originalTargetRect.top;
+
+  const correctionFactor = isBrowserSafari() ? zoomLevel : 1;
+
+  if (isBrowserSafari()) {
+    console.log("withZoom", { zoomLevel, originalTargetRect, ev });
+  }
+
+  const baseOffsetX = ev.clientX - originalTargetRect.left * correctionFactor;
+  const baseOffsetY = ev.clientY - originalTargetRect.top * correctionFactor;
   const offsetX = baseOffsetX / zoomLevel;
   const offsetY = baseOffsetY / zoomLevel;
   return {
     ev,
-    clientX: ev.clientX - baseOffsetX + offsetX,
-    clientY: ev.clientY - baseOffsetY + offsetY,
-    offsetX,
-    offsetY,
+    clientX: (ev.clientX - baseOffsetX + offsetX) / 1,
+    clientY: (ev.clientY - baseOffsetY + offsetY) / 1,
+    offsetX: offsetX / 1,
+    offsetY: offsetY / 1,
   };
 }
 
@@ -61,6 +71,21 @@ export function getZoomedRect(zoom: number, rect: Rect): Rect {
   };
 }
 
+export function getZoomedDomRect(zoom: number, rect: DOMRect): DOMRect {
+  return {
+    ...rect,
+    height: rect.height * zoom,
+    width: rect.width * zoom,
+    x: rect.x * zoom,
+    y: rect.y * zoom,
+    top: rect.top * zoom,
+    right: rect.right * zoom,
+    bottom: rect.bottom * zoom,
+    left: rect.left * zoom,
+  };
+
+}
+
 /**
  * Returns the bounding rect of the closest or self element who is targetable by a ZoomedMouseEvent
  */
@@ -71,5 +96,6 @@ function getZoomTargetBoundingRect(ev: MouseEvent): DOMRect | null {
   }
   const targetEl = target.classList.contains("o-zoomable") ? target : target.closest(".o-zoomable");
   if (!targetEl) return null;
+  // add a proxy for safari that divides the x.y pretty much everything
   return targetEl.getBoundingClientRect();
 }

src/components/highlight/highlight/highlight.ts

@@ -121,7 +121,6 @@ export class Highlight extends Component<HighlightProps, SpreadsheetChildEnv> {
 
     const position = gridOverlayPosition();
     const activeSheetId = this.env.model.getters.getActiveSheetId();
-
     const initCol = this.env.model.getters.getColIndex(ev.clientX - position.left);
     const initRow = this.env.model.getters.getRowIndex(ev.clientY - position.top);
 

src/components/scrollbar/scrollbar_horizontal.ts

@@ -1,6 +1,6 @@
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component, xml } from "@odoo/owl";
-import { isBrowserFirefox } from "../helpers/dom_helpers";
+import { isBrowserFirefox, isBrowserSafari } from "../helpers/dom_helpers";
 import { ScrollBar } from "./scrollbar";
 
 interface Props {
@@ -47,7 +47,7 @@ export class HorizontalScrollBar extends Component<Props, SpreadsheetChildEnv> {
       left: `${this.props.leftOffset + x}px`,
       bottom: "0px",
       height: `${scrollbarWidth}px`,
-      right: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
+      right: isBrowserFirefox() || isBrowserSafari() ? `${scrollbarWidth}px` : "0",
     };
   }
 

src/components/scrollbar/scrollbar_vertical.ts

@@ -1,6 +1,6 @@
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component, xml } from "@odoo/owl";
-import { isBrowserFirefox } from "../helpers/dom_helpers";
+import { isBrowserFirefox, isBrowserSafari } from "../helpers/dom_helpers";
 import { ScrollBar } from "./scrollbar";
 
 interface Props {
@@ -47,7 +47,7 @@ export class VerticalScrollBar extends Component<Props, SpreadsheetChildEnv> {
       top: `${this.props.topOffset + y}px`,
       right: "0px",
       width: `${scrollbarWidth}px`,
-      bottom: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
+      bottom: isBrowserFirefox() || isBrowserSafari() ? `${scrollbarWidth}px` : "0",
     };
   }
 

src/components/spreadsheet/spreadsheet.ts

@@ -291,7 +291,8 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
         ?.getBoundingClientRect().height || 0;
 
     const gridWidth =
-      this.spreadsheetRef.el?.querySelector(".o-grid")?.getBoundingClientRect().width || 0;
+      (this.spreadsheetRef.el?.getBoundingClientRect().width || 0) -
+      (this.spreadsheetRef.el?.querySelector(".o-sidePanel")?.getBoundingClientRect().width || 0);
     const gridHeight =
       (this.spreadsheetRef.el?.getBoundingClientRect().height || 0) -
       (this.spreadsheetRef.el?.querySelector(".o-column-groups")?.getBoundingClientRect().height ||