PowerOn/frontend_nyla
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: pfeile zeichnen nicht mehr verbugged

Browse source
This commit is contained in:
Ida 2026-05-13 16:46:10 +02:00
parent 6890a38546
commit ef9955257e
1 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/FlowEditor/editor/FlowCanvas.tsx
View file

@ -1253,7 +1253,7 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
); );
React.useEffect(() => { React.useEffect(() => {
if (!connectingFrom || !dragPos) return; if (!connectingFrom) return;
const onMove = (e: MouseEvent) => setDragPos({ x: e.clientX, y: e.clientY }); const onMove = (e: MouseEvent) => setDragPos({ x: e.clientX, y: e.clientY });
const onUp = (e: MouseEvent) => { const onUp = (e: MouseEvent) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
@ -1272,7 +1272,7 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
window.removeEventListener('mousemove', onMove); window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp); window.removeEventListener('mouseup', onUp);
}; };
}, [connectingFrom, dragPos]); }, [connectingFrom]);
const handleNodeMouseDown = useCallback( const handleNodeMouseDown = useCallback(
(e: React.MouseEvent, nodeId: string) => { (e: React.MouseEvent, nodeId: string) => {
@ -1410,26 +1410,16 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
[] []
); );
const [containerBounds, setContainerBounds] = useState({ left: 0, top: 0 }); /** Immer aktuelle Viewport-Lage (Scroll, Resize, verschobene Panels) — sonst klebt die Verbindungs-Hilfslinie falsch. */
React.useEffect(() => { const clientToCanvas = useCallback((clientX: number, clientY: number) => {
const el = containerRef.current; const el = containerRef.current;
if (!el) return; if (!el) return { x: 0, y: 0 };
const update = () => { const r = el.getBoundingClientRect();
const r = el.getBoundingClientRect(); return {
setContainerBounds({ left: r.left, top: r.top }); x: (clientX - r.left - panOffset.x) / zoom,
y: (clientY - r.top - panOffset.y) / zoom,
}; };
update(); }, [panOffset, zoom]);
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
const clientToCanvas = useCallback(
(clientX: number, clientY: number) => ({
x: (clientX - containerBounds.left - panOffset.x) / zoom,
y: (clientY - containerBounds.top - panOffset.y) / zoom,
}),
[containerBounds, panOffset, zoom]
);
const handleCanvasMouseDown = useCallback( const handleCanvasMouseDown = useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {