From 16de3d92439093c47ec5c00484c4d170ccd1eaf2 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Sat, 7 Oct 2023 10:35:06 +0200
Subject: [PATCH] add svgContainer offset

---
 src/components/App.tsx                       |  5 +----
 src/components/LaserTool/LaserPathManager.ts |  7 +++++++
 src/components/LaserTool/LaserTool.tsx       | 15 ++-------------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 80da988ee..737d2bed7 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1217,10 +1217,7 @@ class App extends React.Component<AppProps, AppState> {
                         <div className="excalidraw-textEditorContainer" />
                         <div className="excalidraw-contextMenuContainer" />
                         <div className="excalidraw-eye-dropper-container" />
-                        <LaserToolOverlay
-                          manager={this.laserPathManager}
-                          appState={this.state}
-                        />
+                        <LaserToolOverlay manager={this.laserPathManager} />
                         {selectedElements.length === 1 &&
                           !this.state.contextMenu &&
                           this.state.showHyperlinkPopup && (
diff --git a/src/components/LaserTool/LaserPathManager.ts b/src/components/LaserTool/LaserPathManager.ts
index 2f0c63955..c76363daa 100644
--- a/src/components/LaserTool/LaserPathManager.ts
+++ b/src/components/LaserTool/LaserPathManager.ts
@@ -106,6 +106,13 @@ export class LaserPathManager {
   }
 
   startPath(x: number, y: number) {
+    if (this.container) {
+      this.container.style.top = "0px";
+      this.container.style.left = "0px";
+      const { x, y } = this.container.getBoundingClientRect();
+      this.container.style.top = `${-y}px`;
+      this.container.style.left = `${-x}px`;
+    }    
     this.ownState.currentPath = instantiatePath();
     this.ownState.currentPath.addPoint([x, y, performance.now()]);
     this.updatePath(this.ownState);
diff --git a/src/components/LaserTool/LaserTool.tsx b/src/components/LaserTool/LaserTool.tsx
index cdaa53aea..e93d72dfc 100644
--- a/src/components/LaserTool/LaserTool.tsx
+++ b/src/components/LaserTool/LaserTool.tsx
@@ -1,17 +1,12 @@
 import { useEffect, useRef } from "react";
 import { LaserPathManager } from "./LaserPathManager";
 import "./LaserToolOverlay.scss";
-import { UIAppState } from "../../types";
 
 type LaserToolOverlayProps = {
   manager: LaserPathManager;
-  appState: UIAppState;
 };
 
-export const LaserToolOverlay = ({
-  manager,
-  appState,
-}: LaserToolOverlayProps) => {
+export const LaserToolOverlay = ({ manager }: LaserToolOverlayProps) => {
   const svgRef = useRef<SVGSVGElement | null>(null);
 
   useEffect(() => {
@@ -25,13 +20,7 @@ export const LaserToolOverlay = ({
   }, [manager]);
 
   return (
-    <div
-      className="LaserToolOverlay"
-      style={{
-        top: `-${appState.offsetTop}px`,
-        left: `-${appState.offsetLeft}px`,
-      }}
-    >
+    <div className="LaserToolOverlay">
       <svg ref={svgRef} className="LaserToolOverlayCanvas" />
     </div>
   );