add svgContainer offset
This commit is contained in:
parent
c65d6506f7
commit
16de3d9243
@ -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 && (
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user