add svgContainer offset

This commit is contained in:
zsviczian 2023-10-07 10:35:06 +02:00 committed by GitHub
parent c65d6506f7
commit 16de3d9243
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 17 deletions

View File

@ -1217,10 +1217,7 @@ class App extends React.Component<AppProps, AppState> {
<div className="excalidraw-textEditorContainer" /> <div className="excalidraw-textEditorContainer" />
<div className="excalidraw-contextMenuContainer" /> <div className="excalidraw-contextMenuContainer" />
<div className="excalidraw-eye-dropper-container" /> <div className="excalidraw-eye-dropper-container" />
<LaserToolOverlay <LaserToolOverlay manager={this.laserPathManager} />
manager={this.laserPathManager}
appState={this.state}
/>
{selectedElements.length === 1 && {selectedElements.length === 1 &&
!this.state.contextMenu && !this.state.contextMenu &&
this.state.showHyperlinkPopup && ( this.state.showHyperlinkPopup && (

View File

@ -106,6 +106,13 @@ export class LaserPathManager {
} }
startPath(x: number, y: number) { 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 = instantiatePath();
this.ownState.currentPath.addPoint([x, y, performance.now()]); this.ownState.currentPath.addPoint([x, y, performance.now()]);
this.updatePath(this.ownState); this.updatePath(this.ownState);

View File

@ -1,17 +1,12 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { LaserPathManager } from "./LaserPathManager"; import { LaserPathManager } from "./LaserPathManager";
import "./LaserToolOverlay.scss"; import "./LaserToolOverlay.scss";
import { UIAppState } from "../../types";
type LaserToolOverlayProps = { type LaserToolOverlayProps = {
manager: LaserPathManager; manager: LaserPathManager;
appState: UIAppState;
}; };
export const LaserToolOverlay = ({ export const LaserToolOverlay = ({ manager }: LaserToolOverlayProps) => {
manager,
appState,
}: LaserToolOverlayProps) => {
const svgRef = useRef<SVGSVGElement | null>(null); const svgRef = useRef<SVGSVGElement | null>(null);
useEffect(() => { useEffect(() => {
@ -25,13 +20,7 @@ export const LaserToolOverlay = ({
}, [manager]); }, [manager]);
return ( return (
<div <div className="LaserToolOverlay">
className="LaserToolOverlay"
style={{
top: `-${appState.offsetTop}px`,
left: `-${appState.offsetLeft}px`,
}}
>
<svg ref={svgRef} className="LaserToolOverlayCanvas" /> <svg ref={svgRef} className="LaserToolOverlayCanvas" />
</div> </div>
); );