Fix wysiwyg center (#1101)

This wasn't taking into account zoom properly.

The logic should probably get refactored a bit, it's not ideal that we're passing canvas, state and scale as different arguments. Also it's weird that the function that returns the center is computing the viewport translation. But I'm not motivated enough to fix it right now...

Fixes #1100

src/components/App.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import socketIOClient from "socket.io-client";
 import rough from "roughjs/bin/rough";
 import { RoughCanvas } from "roughjs/bin/canvas";
+import { FlooredNumber } from "../types";
 
 import {
   newElement,
@@ -1128,6 +1129,9 @@ export class App extends React.Component<any, AppState> {
       const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
         x,
         y,
+        this.state,
+        this.canvas,
+        window.devicePixelRatio,
       );
 
       if (snappedToCenterPosition) {
@@ -1615,7 +1619,13 @@ export class App extends React.Component<any, AppState> {
 
       const snappedToCenterPosition = event.altKey
         ? null
-        : this.getTextWysiwygSnappedToCenterPosition(x, y);
+        : this.getTextWysiwygSnappedToCenterPosition(
+            x,
+            y,
+            this.state,
+            this.canvas,
+            window.devicePixelRatio,
+          );
 
       const element = newTextElement({
         x: snappedToCenterPosition?.elementCenterX ?? x,
@@ -2491,7 +2501,17 @@ export class App extends React.Component<any, AppState> {
     }));
   });
 
-  private getTextWysiwygSnappedToCenterPosition(x: number, y: number) {
+  private getTextWysiwygSnappedToCenterPosition(
+    x: number,
+    y: number,
+    state: {
+      scrollX: FlooredNumber;
+      scrollY: FlooredNumber;
+      zoom: number;
+    },
+    canvas: HTMLCanvasElement | null,
+    scale: number,
+  ) {
     const elementClickedInside = getElementContainingPosition(
       globalSceneState.getAllElements(),
       x,
@@ -2509,14 +2529,12 @@ export class App extends React.Component<any, AppState> {
       const isSnappedToCenter =
         distanceToCenter < TEXT_TO_CENTER_SNAP_THRESHOLD;
       if (isSnappedToCenter) {
-        const wysiwygX =
+        const { x: wysiwygX, y: wysiwygY } = sceneCoordsToViewportCoords(
-          this.state.scrollX +
+          { sceneX: elementCenterX, sceneY: elementCenterY },
-          elementClickedInside.x +
+          state,
-          elementClickedInside.width / 2;
+          canvas,
-        const wysiwygY =
+          scale,
-          this.state.scrollY +
+        );
-          elementClickedInside.y +
-          elementClickedInside.height / 2;
         return { wysiwygX, wysiwygY, elementCenterX, elementCenterY };
       }
     }