|
@@ -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>
|
|
|
);
|