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