From 6056170d4b6c231861be8c75097694492a5a116f Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 28 Mar 2020 14:30:41 -0700
Subject: [PATCH] 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 | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index e805c58f..46f6e2f8 100644
--- a/src/components/App.tsx
+++ b/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 =
-          this.state.scrollX +
-          elementClickedInside.x +
-          elementClickedInside.width / 2;
-        const wysiwygY =
-          this.state.scrollY +
-          elementClickedInside.y +
-          elementClickedInside.height / 2;
+        const { x: wysiwygX, y: wysiwygY } = sceneCoordsToViewportCoords(
+          { sceneX: elementCenterX, sceneY: elementCenterY },
+          state,
+          canvas,
+          scale,
+        );
         return { wysiwygX, wysiwygY, elementCenterX, elementCenterY };
       }
     }