From c65d6506f71e299a1ed139c791c67a2787402363 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Sat, 7 Oct 2023 08:49:32 +0200
Subject: [PATCH] fix lasertool offset

---
 src/components/App.tsx                         |  5 ++++-
 src/components/LaserTool/LaserTool.tsx         | 15 +++++++++++++--
 src/components/LaserTool/LaserToolOverlay.scss |  3 ---
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 737d2bed7..80da988ee 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1217,7 +1217,10 @@ 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} />
+                        <LaserToolOverlay
+                          manager={this.laserPathManager}
+                          appState={this.state}
+                        />
                         {selectedElements.length === 1 &&
                           !this.state.contextMenu &&
                           this.state.showHyperlinkPopup && (
diff --git a/src/components/LaserTool/LaserTool.tsx b/src/components/LaserTool/LaserTool.tsx
index e93d72dfc..cdaa53aea 100644
--- a/src/components/LaserTool/LaserTool.tsx
+++ b/src/components/LaserTool/LaserTool.tsx
@@ -1,12 +1,17 @@
 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 }: LaserToolOverlayProps) => {
+export const LaserToolOverlay = ({
+  manager,
+  appState,
+}: LaserToolOverlayProps) => {
   const svgRef = useRef<SVGSVGElement | null>(null);
 
   useEffect(() => {
@@ -20,7 +25,13 @@ export const LaserToolOverlay = ({ manager }: LaserToolOverlayProps) => {
   }, [manager]);
 
   return (
-    <div className="LaserToolOverlay">
+    <div
+      className="LaserToolOverlay"
+      style={{
+        top: `-${appState.offsetTop}px`,
+        left: `-${appState.offsetLeft}px`,
+      }}
+    >
       <svg ref={svgRef} className="LaserToolOverlayCanvas" />
     </div>
   );
diff --git a/src/components/LaserTool/LaserToolOverlay.scss b/src/components/LaserTool/LaserToolOverlay.scss
index da874b452..1ad4397cc 100644
--- a/src/components/LaserTool/LaserToolOverlay.scss
+++ b/src/components/LaserTool/LaserToolOverlay.scss
@@ -4,9 +4,6 @@
     width: 100vw;
     height: 100vh;
     position: fixed;
-    top: 0;
-    left: 0;
-
     z-index: 2;
 
     .LaserToolOverlayCanvas {