Merge pull request #232 from pathsim/feature/grid-aligned-routing

fix annotation with new grid

Author: milanofthe

src/lib/components/canvas/flowConverters.ts

@@ -49,6 +49,8 @@ export function toAnnotationNode(annotation: Annotation): Node<Annotation> {
 		data: annotation,
 		width: annotation.width,
 		height: annotation.height,
+		// Annotations use top-left origin (overrides global nodeOrigin)
+		origin: [0, 0] as [number, number],
 		selectable: true,
 		draggable: true,
 		connectable: false,

src/lib/components/nodes/AnnotationNode.svelte

@@ -6,6 +6,7 @@
 	import { renderMarkdown } from '$lib/utils/markdownRenderer';
 	import { getKatexCssUrl } from '$lib/utils/katexLoader';
 	import { DEFAULT_NODE_COLOR } from '$lib/utils/colors';
+	import { GRID_SIZE } from '$lib/constants/grid';
 	import { tooltip } from '$lib/components/Tooltip.svelte';
 	import ColorPicker from '$lib/components/dialogs/shared/ColorPicker.svelte';
 	import Icon from '$lib/components/icons/Icon.svelte';
@@ -129,6 +130,15 @@
 		}
 	}
 
+	// Snap resize dimensions to grid
+	function handleResizeEnd(_event: unknown, params: { width: number; height: number }) {
+		const snappedWidth = Math.round(params.width / GRID_SIZE) * GRID_SIZE;
+		const snappedHeight = Math.round(params.height / GRID_SIZE) * GRID_SIZE;
+		graphStore.updateAnnotation(id, {
+			width: Math.max(100, snappedWidth),
+			height: Math.max(50, snappedHeight)
+		});
+	}
 </script>
 
 <svelte:head>
@@ -141,6 +151,7 @@
 		minWidth={100}
 		minHeight={50}
 		isVisible={selected}
+		onResizeEnd={handleResizeEnd}
 	/>
 
 	<!-- svelte-ignore a11y_no_static_element_interactions -->