fix overlaps

src/routes/canvas/chat-node.svelte

@@ -23,7 +23,7 @@
 	};
 	let { id, data }: Props = $props();
 
-	let { updateNodeData, updateNode, getNode } = useSvelteFlow();
+	let { updateNodeData, updateNode, getNode, getViewport } = useSvelteFlow();
 	onMount(() => {
 		if (!data.modelId) data.modelId = models.trending[0]?.id;
 		if (!data.provider) data.provider = "auto";
@@ -140,6 +140,110 @@
 		if (!data.response) return "";
 		return marked(data.response);
 	});
+
+	// Helper function to get actual node dimensions from DOM, converted to flow coordinates
+	function getNodeDimensions(nodeId: string) {
+		const nodeElement = document.querySelector(`[data-id="${nodeId}"]`);
+		if (nodeElement) {
+			const rect = nodeElement.getBoundingClientRect();
+			const viewport = getViewport();
+			// Convert from screen coordinates to flow coordinates
+			const flowWidth = rect.width / viewport.zoom;
+			const flowHeight = rect.height / viewport.zoom;
+			return { width: flowWidth, height: flowHeight };
+		}
+		// Fallback to default size
+		return { width: 500, height: 200 };
+	}
+
+	// Helper function to find a non-overlapping position
+	function findAvailablePosition(
+		startX: number,
+		startY: number,
+		newNodeWidth = 500,
+		newNodeHeight = 200,
+		constrainBelow = false,
+	) {
+		const spacing = 40;
+		let x = startX;
+		let y = startY;
+
+		// Check if position overlaps with any existing node
+		const isOverlapping = (testX: number, testY: number) => {
+			return nodes.current.some(node => {
+				if (node.id === id) return false; // Don't check against self
+
+				const existingDims = getNodeDimensions(node.id);
+				const nodeWidth = existingDims.width;
+				const nodeHeight = existingDims.height;
+
+				// Check for overlap with proper spacing
+				return !(
+					testX >= node.position.x + nodeWidth + spacing ||
+					testX + newNodeWidth + spacing <= node.position.x ||
+					testY >= node.position.y + nodeHeight + spacing ||
+					testY + newNodeHeight + spacing <= node.position.y
+				);
+			});
+		};
+
+		// For add node (constrainBelow = true), maintain same Y level and search horizontally
+		if (constrainBelow) {
+			const fixedY = y; // Always use the same Y distance from parent
+
+			// Try the preferred X position first
+			if (!isOverlapping(x, fixedY)) return { x, y: fixedY };
+
+			// Search horizontally at the fixed Y level, checking each position carefully
+			let testX = x;
+			let attempts = 0;
+			while (attempts < 50) {
+				// Try moving right by small increments
+				testX += 50;
+				if (!isOverlapping(testX, fixedY)) {
+					return { x: testX, y: fixedY };
+				}
+				attempts++;
+			}
+
+			// Try going left from original position
+			testX = x;
+			attempts = 0;
+			while (attempts < 50) {
+				testX -= 50;
+				if (!isOverlapping(testX, fixedY)) {
+					return { x: testX, y: fixedY };
+				}
+				attempts++;
+			}
+
+			// Fallback: force position far to the right
+			return { x: x + 2000, y: fixedY };
+		}
+
+		// For duplicate (constrainBelow = false), use spiral pattern
+		let offset = 0;
+		while (offset < 1000) {
+			// Try right
+			if (!isOverlapping(x + offset, y)) return { x: x + offset, y };
+			// Try left
+			if (!isOverlapping(x - offset, y)) return { x: x - offset, y };
+			// Try down
+			if (!isOverlapping(x, y + offset)) return { x, y: y + offset };
+			// Try up
+			if (!isOverlapping(x, y - offset)) return { x, y: y - offset };
+			// Try diagonal combinations
+			if (!isOverlapping(x + offset, y + offset)) return { x: x + offset, y: y + offset };
+			if (!isOverlapping(x - offset, y + offset)) return { x: x - offset, y: y + offset };
+			if (!isOverlapping(x + offset, y - offset)) return { x: x + offset, y: y - offset };
+			if (!isOverlapping(x - offset, y - offset)) return { x: x - offset, y: y - offset };
+
+			offset += 50;
+		}
+
+		// Fallback: return original position with larger offset
+		return { x: x + 150, y: y + 150 };
+	}
 </script>
 
 <div
@@ -221,9 +325,16 @@
 			onclick={() => {
 				const curr = getNode(id);
 				const newNodeId = crypto.randomUUID();
+				const currentDims = getNodeDimensions(id);
+				const preferredPos = findAvailablePosition(
+					(curr?.position.x ?? 100) + 50,
+					(curr?.position.y ?? 0) + 50,
+					currentDims.width,
+					currentDims.height,
+				);
 				const newNode: Node = {
 					id: newNodeId,
-					position: { x: (curr?.position.x ?? 100) + 50, y: (curr?.position.y ?? 0) + 50 },
+					position: preferredPos,
 					data: {
 						query: data.query,
 						response: data.response,
@@ -263,9 +374,17 @@
 			hover:bg-gray-900 focus:ring-2 focus:ring-gray-900/20 focus:outline-none active:scale-[0.98]"
 			onclick={() => {
 				const curr = getNode(id);
+				const currentDims = getNodeDimensions(id);
+				const preferredPos = findAvailablePosition(
+					curr?.position.x ?? 100,
+					(curr?.position.y ?? 0) + size.height + 40,
+					currentDims.width,
+					currentDims.height,
+					true, // constrainBelow = true for Add Node
+				);
 				const newNode: Node = {
 					id: crypto.randomUUID(),
-					position: { x: curr?.position.x ?? 100, y: (curr?.position.y ?? 0) + size.height + 40 },
+					position: preferredPos,
 					data: { query: "", response: "", modelId: data.modelId, provider: data.provider },
 					type: "chat",
 					width: undefined,