diff --git a/src/components/FlowEditor/editor/FlowCanvas.tsx b/src/components/FlowEditor/editor/FlowCanvas.tsx index 2b16f63..5f04fe3 100644 --- a/src/components/FlowEditor/editor/FlowCanvas.tsx +++ b/src/components/FlowEditor/editor/FlowCanvas.tsx @@ -1253,7 +1253,7 @@ export const FlowCanvas = forwardRef(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(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(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) => {