calculate coords based on container viewport position (#1955)

* feat: calculate coords based on parent left and top so it renders correctly in host App

* fix text

* move offsets to state & fix bugs

* fix text jumping

* account for zoom in textWysiwyg & undo incorrect offsetting

Co-authored-by: dwelle <luzar.david@gmail.com>

src/element/textWysiwyg.tsx

@@ -4,6 +4,7 @@ import { globalSceneState } from "../scene";
 import { isTextElement } from "./typeChecks";
 import { CLASSES } from "../constants";
 import { ExcalidrawElement } from "./types";
+import { AppState } from "../types";
 
 const normalizeText = (text: string) => {
   return (
@@ -19,23 +20,26 @@ const getTransform = (
   width: number,
   height: number,
   angle: number,
-  zoom: number,
+  appState: AppState,
 ) => {
+  const { zoom, offsetTop, offsetLeft } = appState;
   const degree = (180 * angle) / Math.PI;
-  return `translate(${(width * (zoom - 1)) / 2}px, ${
-    (height * (zoom - 1)) / 2
+  // offsets must be multiplied by 2 to account for the division by 2 of
+  //  the whole expression afterwards
+  return `translate(${((width - offsetLeft * 2) * (zoom - 1)) / 2}px, ${
+    ((height - offsetTop * 2) * (zoom - 1)) / 2
   }px) scale(${zoom}) rotate(${degree}deg)`;
 };
 
 export const textWysiwyg = ({
   id,
-  zoom,
+  appState,
   onChange,
   onSubmit,
   getViewportCoords,
 }: {
   id: ExcalidrawElement["id"];
-  zoom: number;
+  appState: AppState;
   onChange?: (text: string) => void;
   onSubmit: (text: string) => void;
   getViewportCoords: (x: number, y: number) => [number, number];
@@ -66,7 +70,7 @@ export const textWysiwyg = ({
           updatedElement.width,
           updatedElement.height,
           angle,
-          zoom,
+          appState,
         ),
         textAlign: textAlign,
         color: updatedElement.strokeColor,