@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte

@@ -1,573 +1,573 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { Button } from '../button';
-	import { textColor, borderColor } from '../../tokens';
-	import { Icon } from '../icons';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import Divider from '../divider/Divider.svelte';
-
-	// Constants for the component
-	const BASE_IMAGE_SIZE = 464; // Base size, will be overriden by container dimensions
-	const BASE_MARKER_SIZE = 8; // Base size at zoom level 1
-	const BASE_MARKER_FONT_SIZE = 8; // Base font size at zoom level 1
-	const MAX_ZOOM = 10;
-	const MIN_ZOOM = 1;
-	const ZOOM_STEP = 0.001;
-	const MARKER_COLOR = textColor['icon-blue'] || '#2563eb';
-	const MARKER_BORDER_COLOR = borderColor['interactive'] || '#12192A1A';
-	const TEXT_COLOR = textColor['primary-inverse'];
-	const DRAG_THRESHOLD = 5;
-
-	interface Props {
-		imageUrl: string;
-		marks?: Array<{ x: number; y: number }>;
-		onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
-		disabled?: boolean;
-		hideMarkers?: boolean;
-	}
-
-	let {
-		imageUrl,
-		onclick,
-		disabled = false,
-		hideMarkers = false,
-		marks = $bindable([])
-	}: Props = $props();
-
-	let svgElement: SVGSVGElement;
-	let viewport: SVGGraphicsElement;
-	let dotsGroup: SVGElement;
-	let container: HTMLDivElement;
-
-	let containerW = BASE_IMAGE_SIZE;
-	let containerH = BASE_IMAGE_SIZE;
-
-	let transform = $state({ x: 0, y: 0, scale: 1 });
-
-	// Panning state: null = not panning, 'ready' = mouse button down, 'active' = dragging
-	let panningState = $state<null | 'ready' | 'active'>(null);
-	let startPoint = $state({ x: 0, y: 0 });
-	let isShiftPressed = $state(false);
-	let resizeObserver: ResizeObserver;
-
-	let imageAspectRatio = $state(1); // default 1:1 ratio
-	let imageDisplayWidth = $state(0);
-	let imageDisplayHeight = $state(0);
-
-	function handleResize(entries: ResizeObserverEntry[]) {
-		const entry = entries[0];
-		if (entry) {
-			const oldWidth = imageDisplayWidth || containerW;
-			const oldHeight = imageDisplayHeight || containerH;
-
-			containerW = entry.contentRect.width;
-			containerH = entry.contentRect.height;
-
-			// If we already had dimensions and marks, update their positions
-			if (oldWidth > 0 && oldHeight > 0 && marks.length > 0) {
-				// Adjust marks positions based on new container dimensions
-				marks = marks.map((mark) => ({
-					x: (mark.x / oldWidth) * containerW,
-					y: (mark.y / oldHeight) * containerH
-				}));
-			}
-
-			updateImageDimensions();
-		}
-	}
-
-	function onImageLoad() {
-		if (container) {
-			containerW = container.clientWidth;
-			containerH = container.clientHeight;
-
-			// get original image aspect ratio
-			const img = new Image();
-			img.src = imageUrl;
-			img.onload = () => {
-				imageAspectRatio = img.naturalWidth / img.naturalHeight;
-				updateImageDimensions();
-			};
-
-			if (img.complete && img.naturalWidth) {
-				imageAspectRatio = img.naturalWidth / img.naturalHeight;
-				updateImageDimensions();
-			}
-		}
-	}
-
-	function updateImageDimensions() {
-		// calculate dimensions that maintain aspect ratio within container
-		const containerRatio = containerW / containerH;
-
-		if (containerRatio > imageAspectRatio) {
-			// container is wider than image - fit to height
-			imageDisplayHeight = containerH;
-			imageDisplayWidth = containerH * imageAspectRatio;
-		} else {
-			// container is taller than image - fit to width
-			imageDisplayWidth = containerW;
-			imageDisplayHeight = containerW / imageAspectRatio;
-		}
-
-		updateTransform();
-	}
-
-	// Properly constrain the transform to prevent moving outside container
-	function clampTransform() {
-		// Calculate maximum translation offsets based on scale > 1
-		const maxX = 0;
-		const maxY = 0;
-		// Prevent division by zero or unexpected behavior if container dimensions aren't ready
-		const safeContainerW = containerW || 1;
-		const safeContainerH = containerH || 1;
-		const minX = safeContainerW * (1 - transform.scale);
-		const minY = safeContainerH * (1 - transform.scale);
-
-		if (transform.scale <= 1) {
-			// If scale is 1 or less, center the view
-			// Check if scale is exactly 1 before modifying to avoid floating point issues if needed
-			// Or simply reset if it goes below
-			transform.scale = 1;
-			transform.x = 0;
-			transform.y = 0;
-		} else {
-			// Apply clamping for scale > 1
-			transform.x = Math.max(minX, Math.min(maxX, transform.x));
-			transform.y = Math.max(minY, Math.min(maxY, transform.y));
-		}
-	}
-
-	function updateTransform() {
-		if (!viewport) return;
-
-		// update viewport transform
-		viewport.setAttribute(
-			'transform',
-			`translate(${transform.x}, ${transform.y}) scale(${transform.scale})`
-		);
-
-		// set image dimensions based on calculated size that maintains aspect ratio
-		const imageElement = viewport.querySelector('image');
-		if (imageElement) {
-			imageElement.setAttribute('width', String(imageDisplayWidth));
-			imageElement.setAttribute('height', String(imageDisplayHeight));
-
-			// center the image in the container
-			const offsetX = (containerW - imageDisplayWidth) / 2;
-			const offsetY = (containerH - imageDisplayHeight) / 2;
-
-			imageElement.setAttribute('x', String(offsetX));
-			imageElement.setAttribute('y', String(offsetY));
-		}
-
-		// update markers to maintain consistent size
-		renderMarkers();
-	}
-
-	function getSvgPoint(event: MouseEvent) {
-		if (!svgElement || !container) return { x: 0, y: 0 };
-
-		// get container bounding rect
-		const rect = container.getBoundingClientRect();
-
-		// calculate position relative to container
-		const relativeX = event.clientX - rect.left;
-		const relativeY = event.clientY - rect.top;
-
-		// apply inverse of current transform to get SVG coordinates
-		const svgX = (relativeX - transform.x) / transform.scale;
-		const svgY = (relativeY - transform.y) / transform.scale;
-
-		// adjust for image position within container (letterboxing)
-		const offsetX = (containerW - imageDisplayWidth) / 2;
-		const offsetY = (containerH - imageDisplayHeight) / 2;
-
-		// return coordinates relative to the image, not the container
-		return {
-			x: svgX - offsetX,
-			y: svgY - offsetY
-		};
-	}
-
-	// Render SVG markers from the marks array
-	function renderMarkers() {
-		if (!dotsGroup) return;
-
-		while (dotsGroup.firstChild) {
-			dotsGroup.removeChild(dotsGroup.firstChild);
-		}
-
-		const offsetX = (containerW - imageDisplayWidth) / 2;
-		const offsetY = (containerH - imageDisplayHeight) / 2;
-
-		const svgns = 'http://www.w3.org/2000/svg';
-		const adjustedMarkerSize = BASE_MARKER_SIZE / transform.scale;
-		const adjustedFontSize = BASE_MARKER_FONT_SIZE / transform.scale;
-
-		marks.forEach((mark, index) => {
-			// Create a marker group
-			const group = document.createElementNS(svgns, 'g');
-			group.setAttribute('data-testid', `marker-${index + 1}`);
-
-			const markX = mark.x + offsetX;
-			const markY = mark.y + offsetY;
-
-			const circle = document.createElementNS(svgns, 'circle');
-			circle.setAttribute('cx', String(markX));
-			circle.setAttribute('cy', String(markY));
-			circle.setAttribute('r', String(adjustedMarkerSize));
-			circle.setAttribute('fill', MARKER_COLOR);
-			circle.setAttribute('class', 'drop-shadow-sm');
-			circle.setAttribute('opacity', '0.75');
-			circle.setAttribute('stroke', MARKER_BORDER_COLOR);
-			circle.setAttribute('stroke-width', String(1 / transform.scale));
-			group.appendChild(circle);
-
-			const text = document.createElementNS(svgns, 'text');
-			text.setAttribute('x', String(markX));
-			text.setAttribute('y', String(markY));
-			text.setAttribute('text-anchor', 'middle');
-			text.setAttribute('dominant-baseline', 'central');
-			text.setAttribute('fill', TEXT_COLOR);
-			text.setAttribute('font-size', String(adjustedFontSize));
-			text.setAttribute('font-weight', 'bold');
-			text.textContent = String(index + 1);
-			group.appendChild(text);
-
-			dotsGroup.appendChild(group);
-		});
-	}
-
-	function handleClick(event: MouseEvent) {
-		if (disabled || hideMarkers || !dotsGroup || isShiftPressed || panningState !== null) {
-			panningState = null;
-			return;
-		}
-		const pt = getSvgPoint(event);
-		marks.push({ x: pt.x, y: pt.y });
-
-		renderMarkers();
-		if (onclick) {
-			onclick(event, marks);
-		}
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.shiftKey) {
-			isShiftPressed = true;
-		}
-	}
-
-	function handleKeyUp(event: KeyboardEvent) {
-		let shouldResetReadyState = false;
-
-		if (!event.shiftKey && isShiftPressed) {
-			isShiftPressed = false;
-			shouldResetReadyState = true;
-		}
-
-		// If panning was in 'ready' state and the relevant key was released, reset state
-		if (shouldResetReadyState && panningState === 'ready') {
-			panningState = null;
-		}
-	}
-
-	function handleMouseDown(event: MouseEvent) {
-		// Only start panning on right click, shift+left click
-		const isPanningTrigger = event.button === 2 || (event.button === 0 && isShiftPressed);
-		if (!isPanningTrigger) return;
-
-		event.preventDefault(); // Prevent default context menu or text selection
-		panningState = 'ready';
-		startPoint = { x: event.clientX, y: event.clientY };
-	}
-
-	// Handle panning on mouse move
-	function handleMouseMove(event: MouseEvent) {
-		if (panningState === null) return;
-
-		const dx = event.clientX - startPoint.x;
-		const dy = event.clientY - startPoint.y;
-
-		// Detect if we're dragging (moved beyond threshold)
-		if (panningState === 'ready' && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
-			panningState = 'active';
-		}
-
-		// Only update position if we're actually panning
-		if (panningState === 'active') {
-			startPoint = { x: event.clientX, y: event.clientY };
-
-			transform.x += dx;
-			transform.y += dy;
-
-			// Ensure pan stays within bounds
-			clampTransform();
-			updateTransform();
-		}
-	}
-
-	function handleMouseUp() {
-		panningState = null;
-	}
-
-	function handleMouseLeave() {
-		panningState = null;
-	}
-
-	function handleContextMenu(event: MouseEvent) {
-		event.preventDefault();
-	}
-
-	function handleWheel(event: WheelEvent) {
-		event.preventDefault();
-
-		if (!svgElement || !viewport || !container) return;
-
-		// Update container dimensions just in case they changed
-		containerW = container.clientWidth;
-		containerH = container.clientHeight;
-
-		const zoomIntensity = ZOOM_STEP;
-		const delta = event.deltaY;
-		const zoomFactor = 1 - delta * zoomIntensity;
-		const currentScale = transform.scale; // Store current scale before modification
-
-		let potentialNewScale = currentScale * zoomFactor;
-
-		// Clamp the scale
-		let finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
-
-		if (finalScale <= MIN_ZOOM) {
-			// Reset view if zooming out below minimum or exactly at minimum
-			transform.scale = MIN_ZOOM;
-			transform.x = 0;
-			transform.y = 0;
-		} else {
-			// Calculate transform based on finalScale (which might be MAX_ZOOM)
-			const rect = container.getBoundingClientRect();
-			const mouseX = event.clientX - rect.left;
-			const mouseY = event.clientY - rect.top;
-
-			// Calculate distance from origin at current scale
-			const distX = mouseX - transform.x;
-			const distY = mouseY - transform.y;
-
-			// Calculate what the distance should be at the final scale
-			// Use currentScale from *before* this zoom event for the ratio
-			const scaleRatio = finalScale / currentScale;
-			const newDistX = distX * scaleRatio;
-			const newDistY = distY * scaleRatio;
-
-			// Update the transform to maintain the mouse position relative to the final scale
-			transform.x = mouseX - newDistX;
-			transform.y = mouseY - newDistY;
-			transform.scale = finalScale;
-		}
-
-		clampTransform();
-		updateTransform();
-	}
-
-	// Simplified undo function - just pop the last mark
-	function undo() {
-		if (marks.length === 0) return;
-
-		marks.pop();
-		marks = marks;
-		renderMarkers();
-	}
-
-	function reset() {
-		if (marks.length === 0) return;
-
-		marks = [];
-		renderMarkers();
-	}
-
-	// --- Zoom Functions ---
-	function applyZoom(zoomFactor: number) {
-		if (!container) return;
-
-		const currentScale = transform.scale;
-		const potentialNewScale = currentScale * zoomFactor;
-		const finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
-
-		// If scale didn't change (already at min/max), do nothing
-		if (finalScale === currentScale) return;
-
-		// Get center of the container view
-		const centerX = containerW / 2;
-		const centerY = containerH / 2;
-
-		// Calculate distance from origin at current scale
-		const distX = centerX - transform.x;
-		const distY = centerY - transform.y;
-
-		// Calculate what the distance should be at the final scale
-		const scaleRatio = finalScale / currentScale;
-		const newDistX = distX * scaleRatio;
-		const newDistY = distY * scaleRatio;
-
-		// Update the transform to maintain the center position relative to the final scale
-		transform.x = centerX - newDistX;
-		transform.y = centerY - newDistY;
-		transform.scale = finalScale;
-
-		clampTransform();
-		updateTransform();
-	}
-
-	function zoomIn() {
-		applyZoom(1.2); // Zoom in by 20%
-	}
-
-	function zoomOut() {
-		applyZoom(1 / 1.2); // Zoom out by 20%
-	}
-
-	onMount(() => {
-		if (container) {
-			containerW = container.clientWidth;
-			containerH = container.clientHeight;
-
-			// setup resize observer
-			resizeObserver = new ResizeObserver(handleResize);
-			resizeObserver.observe(container);
-		}
-
-		window.addEventListener('keydown', handleKeyDown);
-		window.addEventListener('keyup', handleKeyUp);
-
-		updateTransform();
-		renderMarkers();
-
-		const img = new Image();
-		img.onload = onImageLoad;
-		img.src = imageUrl;
-
-		if (img.complete) {
-			onImageLoad();
-		}
-
-		return () => {
-			window.removeEventListener('keydown', handleKeyDown);
-			window.removeEventListener('keyup', handleKeyUp);
-			// cleanup resize observer
-			if (resizeObserver) {
-				resizeObserver.disconnect();
-			}
-		};
-	});
-
-	// Effect to render when marks prop changes from parent or internally
-	$effect(() => {
-		renderMarkers();
-	});
+  import { onMount } from 'svelte';
+  import { Button } from '../button';
+  import { textColor, borderColor } from '../../tokens';
+  import { Icon } from '../icons';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import Divider from '../divider/Divider.svelte';
+
+  // Constants for the component
+  const BASE_IMAGE_SIZE = 464; // Base size, will be overriden by container dimensions
+  const BASE_MARKER_SIZE = 8; // Base size at zoom level 1
+  const BASE_MARKER_FONT_SIZE = 8; // Base font size at zoom level 1
+  const MAX_ZOOM = 10;
+  const MIN_ZOOM = 1;
+  const ZOOM_STEP = 0.001;
+  const MARKER_COLOR = textColor['icon-blue'] || '#2563eb';
+  const MARKER_BORDER_COLOR = borderColor['interactive'] || '#12192A1A';
+  const TEXT_COLOR = textColor['primary-inverse'];
+  const DRAG_THRESHOLD = 5;
+
+  interface Props {
+    imageUrl: string;
+    marks?: Array<{ x: number; y: number }>;
+    onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+    disabled?: boolean;
+    hideMarkers?: boolean;
+  }
+
+  let {
+    imageUrl,
+    onclick,
+    disabled = false,
+    hideMarkers = false,
+    marks = $bindable([]),
+  }: Props = $props();
+
+  let svgElement: SVGSVGElement;
+  let viewport: SVGGraphicsElement;
+  let dotsGroup: SVGElement;
+  let container: HTMLDivElement;
+
+  let containerW = BASE_IMAGE_SIZE;
+  let containerH = BASE_IMAGE_SIZE;
+
+  let transform = $state({ x: 0, y: 0, scale: 1 });
+
+  // Panning state: null = not panning, 'ready' = mouse button down, 'active' = dragging
+  let panningState = $state<null | 'ready' | 'active'>(null);
+  let startPoint = $state({ x: 0, y: 0 });
+  let isShiftPressed = $state(false);
+  let resizeObserver: ResizeObserver;
+
+  let imageAspectRatio = $state(1); // default 1:1 ratio
+  let imageDisplayWidth = $state(0);
+  let imageDisplayHeight = $state(0);
+
+  function handleResize(entries: ResizeObserverEntry[]) {
+    const entry = entries[0];
+    if (entry) {
+      const oldWidth = imageDisplayWidth || containerW;
+      const oldHeight = imageDisplayHeight || containerH;
+
+      containerW = entry.contentRect.width;
+      containerH = entry.contentRect.height;
+
+      // If we already had dimensions and marks, update their positions
+      if (oldWidth > 0 && oldHeight > 0 && marks.length > 0) {
+        // Adjust marks positions based on new container dimensions
+        marks = marks.map((mark) => ({
+          x: (mark.x / oldWidth) * containerW,
+          y: (mark.y / oldHeight) * containerH,
+        }));
+      }
+
+      updateImageDimensions();
+    }
+  }
+
+  function onImageLoad() {
+    if (container) {
+      containerW = container.clientWidth;
+      containerH = container.clientHeight;
+
+      // get original image aspect ratio
+      const img = new Image();
+      img.src = imageUrl;
+      img.onload = () => {
+        imageAspectRatio = img.naturalWidth / img.naturalHeight;
+        updateImageDimensions();
+      };
+
+      if (img.complete && img.naturalWidth) {
+        imageAspectRatio = img.naturalWidth / img.naturalHeight;
+        updateImageDimensions();
+      }
+    }
+  }
+
+  function updateImageDimensions() {
+    // calculate dimensions that maintain aspect ratio within container
+    const containerRatio = containerW / containerH;
+
+    if (containerRatio > imageAspectRatio) {
+      // container is wider than image - fit to height
+      imageDisplayHeight = containerH;
+      imageDisplayWidth = containerH * imageAspectRatio;
+    } else {
+      // container is taller than image - fit to width
+      imageDisplayWidth = containerW;
+      imageDisplayHeight = containerW / imageAspectRatio;
+    }
+
+    updateTransform();
+  }
+
+  // Properly constrain the transform to prevent moving outside container
+  function clampTransform() {
+    // Calculate maximum translation offsets based on scale > 1
+    const maxX = 0;
+    const maxY = 0;
+    // Prevent division by zero or unexpected behavior if container dimensions aren't ready
+    const safeContainerW = containerW || 1;
+    const safeContainerH = containerH || 1;
+    const minX = safeContainerW * (1 - transform.scale);
+    const minY = safeContainerH * (1 - transform.scale);
+
+    if (transform.scale <= 1) {
+      // If scale is 1 or less, center the view
+      // Check if scale is exactly 1 before modifying to avoid floating point issues if needed
+      // Or simply reset if it goes below
+      transform.scale = 1;
+      transform.x = 0;
+      transform.y = 0;
+    } else {
+      // Apply clamping for scale > 1
+      transform.x = Math.max(minX, Math.min(maxX, transform.x));
+      transform.y = Math.max(minY, Math.min(maxY, transform.y));
+    }
+  }
+
+  function updateTransform() {
+    if (!viewport) return;
+
+    // update viewport transform
+    viewport.setAttribute(
+      'transform',
+      `translate(${transform.x}, ${transform.y}) scale(${transform.scale})`
+    );
+
+    // set image dimensions based on calculated size that maintains aspect ratio
+    const imageElement = viewport.querySelector('image');
+    if (imageElement) {
+      imageElement.setAttribute('width', String(imageDisplayWidth));
+      imageElement.setAttribute('height', String(imageDisplayHeight));
+
+      // center the image in the container
+      const offsetX = (containerW - imageDisplayWidth) / 2;
+      const offsetY = (containerH - imageDisplayHeight) / 2;
+
+      imageElement.setAttribute('x', String(offsetX));
+      imageElement.setAttribute('y', String(offsetY));
+    }
+
+    // update markers to maintain consistent size
+    renderMarkers();
+  }
+
+  function getSvgPoint(event: MouseEvent) {
+    if (!svgElement || !container) return { x: 0, y: 0 };
+
+    // get container bounding rect
+    const rect = container.getBoundingClientRect();
+
+    // calculate position relative to container
+    const relativeX = event.clientX - rect.left;
+    const relativeY = event.clientY - rect.top;
+
+    // apply inverse of current transform to get SVG coordinates
+    const svgX = (relativeX - transform.x) / transform.scale;
+    const svgY = (relativeY - transform.y) / transform.scale;
+
+    // adjust for image position within container (letterboxing)
+    const offsetX = (containerW - imageDisplayWidth) / 2;
+    const offsetY = (containerH - imageDisplayHeight) / 2;
+
+    // return coordinates relative to the image, not the container
+    return {
+      x: svgX - offsetX,
+      y: svgY - offsetY,
+    };
+  }
+
+  // Render SVG markers from the marks array
+  function renderMarkers() {
+    if (!dotsGroup) return;
+
+    while (dotsGroup.firstChild) {
+      dotsGroup.removeChild(dotsGroup.firstChild);
+    }
+
+    const offsetX = (containerW - imageDisplayWidth) / 2;
+    const offsetY = (containerH - imageDisplayHeight) / 2;
+
+    const svgns = 'http://www.w3.org/2000/svg';
+    const adjustedMarkerSize = BASE_MARKER_SIZE / transform.scale;
+    const adjustedFontSize = BASE_MARKER_FONT_SIZE / transform.scale;
+
+    marks.forEach((mark, index) => {
+      // Create a marker group
+      const group = document.createElementNS(svgns, 'g');
+      group.setAttribute('data-testid', `marker-${index + 1}`);
+
+      const markX = mark.x + offsetX;
+      const markY = mark.y + offsetY;
+
+      const circle = document.createElementNS(svgns, 'circle');
+      circle.setAttribute('cx', String(markX));
+      circle.setAttribute('cy', String(markY));
+      circle.setAttribute('r', String(adjustedMarkerSize));
+      circle.setAttribute('fill', MARKER_COLOR);
+      circle.setAttribute('class', 'drop-shadow-sm');
+      circle.setAttribute('opacity', '0.75');
+      circle.setAttribute('stroke', MARKER_BORDER_COLOR);
+      circle.setAttribute('stroke-width', String(1 / transform.scale));
+      group.appendChild(circle);
+
+      const text = document.createElementNS(svgns, 'text');
+      text.setAttribute('x', String(markX));
+      text.setAttribute('y', String(markY));
+      text.setAttribute('text-anchor', 'middle');
+      text.setAttribute('dominant-baseline', 'central');
+      text.setAttribute('fill', TEXT_COLOR);
+      text.setAttribute('font-size', String(adjustedFontSize));
+      text.setAttribute('font-weight', 'bold');
+      text.textContent = String(index + 1);
+      group.appendChild(text);
+
+      dotsGroup.appendChild(group);
+    });
+  }
+
+  function handleClick(event: MouseEvent) {
+    if (disabled || hideMarkers || !dotsGroup || isShiftPressed || panningState !== null) {
+      panningState = null;
+      return;
+    }
+    const pt = getSvgPoint(event);
+    marks.push({ x: pt.x, y: pt.y });
+
+    renderMarkers();
+    if (onclick) {
+      onclick(event, marks);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.shiftKey) {
+      isShiftPressed = true;
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    let shouldResetReadyState = false;
+
+    if (!event.shiftKey && isShiftPressed) {
+      isShiftPressed = false;
+      shouldResetReadyState = true;
+    }
+
+    // If panning was in 'ready' state and the relevant key was released, reset state
+    if (shouldResetReadyState && panningState === 'ready') {
+      panningState = null;
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    // Only start panning on right click, shift+left click
+    const isPanningTrigger = event.button === 2 || (event.button === 0 && isShiftPressed);
+    if (!isPanningTrigger) return;
+
+    event.preventDefault(); // Prevent default context menu or text selection
+    panningState = 'ready';
+    startPoint = { x: event.clientX, y: event.clientY };
+  }
+
+  // Handle panning on mouse move
+  function handleMouseMove(event: MouseEvent) {
+    if (panningState === null) return;
+
+    const dx = event.clientX - startPoint.x;
+    const dy = event.clientY - startPoint.y;
+
+    // Detect if we're dragging (moved beyond threshold)
+    if (panningState === 'ready' && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+      panningState = 'active';
+    }
+
+    // Only update position if we're actually panning
+    if (panningState === 'active') {
+      startPoint = { x: event.clientX, y: event.clientY };
+
+      transform.x += dx;
+      transform.y += dy;
+
+      // Ensure pan stays within bounds
+      clampTransform();
+      updateTransform();
+    }
+  }
+
+  function handleMouseUp() {
+    panningState = null;
+  }
+
+  function handleMouseLeave() {
+    panningState = null;
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+  }
+
+  function handleWheel(event: WheelEvent) {
+    event.preventDefault();
+
+    if (!svgElement || !viewport || !container) return;
+
+    // Update container dimensions just in case they changed
+    containerW = container.clientWidth;
+    containerH = container.clientHeight;
+
+    const zoomIntensity = ZOOM_STEP;
+    const delta = event.deltaY;
+    const zoomFactor = 1 - delta * zoomIntensity;
+    const currentScale = transform.scale; // Store current scale before modification
+
+    let potentialNewScale = currentScale * zoomFactor;
+
+    // Clamp the scale
+    let finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
+
+    if (finalScale <= MIN_ZOOM) {
+      // Reset view if zooming out below minimum or exactly at minimum
+      transform.scale = MIN_ZOOM;
+      transform.x = 0;
+      transform.y = 0;
+    } else {
+      // Calculate transform based on finalScale (which might be MAX_ZOOM)
+      const rect = container.getBoundingClientRect();
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+
+      // Calculate distance from origin at current scale
+      const distX = mouseX - transform.x;
+      const distY = mouseY - transform.y;
+
+      // Calculate what the distance should be at the final scale
+      // Use currentScale from *before* this zoom event for the ratio
+      const scaleRatio = finalScale / currentScale;
+      const newDistX = distX * scaleRatio;
+      const newDistY = distY * scaleRatio;
+
+      // Update the transform to maintain the mouse position relative to the final scale
+      transform.x = mouseX - newDistX;
+      transform.y = mouseY - newDistY;
+      transform.scale = finalScale;
+    }
+
+    clampTransform();
+    updateTransform();
+  }
+
+  // Simplified undo function - just pop the last mark
+  function undo() {
+    if (marks.length === 0) return;
+
+    marks.pop();
+    marks = marks;
+    renderMarkers();
+  }
+
+  function reset() {
+    if (marks.length === 0) return;
+
+    marks = [];
+    renderMarkers();
+  }
+
+  // --- Zoom Functions ---
+  function applyZoom(zoomFactor: number) {
+    if (!container) return;
+
+    const currentScale = transform.scale;
+    const potentialNewScale = currentScale * zoomFactor;
+    const finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
+
+    // If scale didn't change (already at min/max), do nothing
+    if (finalScale === currentScale) return;
+
+    // Get center of the container view
+    const centerX = containerW / 2;
+    const centerY = containerH / 2;
+
+    // Calculate distance from origin at current scale
+    const distX = centerX - transform.x;
+    const distY = centerY - transform.y;
+
+    // Calculate what the distance should be at the final scale
+    const scaleRatio = finalScale / currentScale;
+    const newDistX = distX * scaleRatio;
+    const newDistY = distY * scaleRatio;
+
+    // Update the transform to maintain the center position relative to the final scale
+    transform.x = centerX - newDistX;
+    transform.y = centerY - newDistY;
+    transform.scale = finalScale;
+
+    clampTransform();
+    updateTransform();
+  }
+
+  function zoomIn() {
+    applyZoom(1.2); // Zoom in by 20%
+  }
+
+  function zoomOut() {
+    applyZoom(1 / 1.2); // Zoom out by 20%
+  }
+
+  onMount(() => {
+    if (container) {
+      containerW = container.clientWidth;
+      containerH = container.clientHeight;
+
+      // setup resize observer
+      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(container);
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    updateTransform();
+    renderMarkers();
+
+    const img = new Image();
+    img.onload = onImageLoad;
+    img.src = imageUrl;
+
+    if (img.complete) {
+      onImageLoad();
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      // cleanup resize observer
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  });
+
+  // Effect to render when marks prop changes from parent or internally
+  $effect(() => {
+    renderMarkers();
+  });
 </script>
 
 {#snippet TopLeftActions()}
-	{#if marks.length > 0}
-		<div
-			class="absolute left-2 top-2 z-20 flex items-center gap-1 rounded-lg border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-		>
-			<IconButton
-				variant="transparent-inverse"
-				rounded={false}
-				onclick={undo}
-				disabled={marks.length === 0 || disabled}
-				aria-label="Undo last mark"
-			>
-				<Icon iconName={'ArrowUUpLeft'} />
-			</IconButton>
-			<Divider vertical inverse class="!h-5" />
-			<Button
-				variant="transparent-inverse"
-				size="sm"
-				onClick={reset}
-				disabled={marks.length === 0 || disabled}
-				accessibilityLabel="Reset all marks"
-				class="!text-primary-inverse"
-			>
-				Clear all
-			</Button>
-		</div>
-	{/if}
+  {#if marks.length > 0}
+    <div
+      class="absolute left-2 top-2 z-20 flex items-center gap-1 rounded-lg border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+    >
+      <IconButton
+        variant="transparent-inverse"
+        rounded={false}
+        onclick={undo}
+        disabled={marks.length === 0 || disabled}
+        aria-label="Undo last mark"
+      >
+        <Icon iconName={'ArrowUUpLeft'} />
+      </IconButton>
+      <Divider vertical inverse class="!h-5" />
+      <Button
+        variant="transparent-inverse"
+        size="sm"
+        onClick={reset}
+        disabled={marks.length === 0 || disabled}
+        accessibilityLabel="Reset all marks"
+        class="!text-primary-inverse"
+      >
+        Clear all
+      </Button>
+    </div>
+  {/if}
 {/snippet}
 
 {#snippet ZoomControls()}
-	<div
-		class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-md border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-	>
-		<IconButton
-			variant="transparent-inverse"
-			rounded={false}
-			onclick={zoomIn}
-			aria-label="Zoom In"
-			disabled={transform.scale >= MAX_ZOOM || disabled}
-		>
-			<Icon iconName={'Plus'} />
-		</IconButton>
-		<IconButton
-			variant="transparent-inverse"
-			rounded={false}
-			onclick={zoomOut}
-			aria-label="Zoom Out"
-			disabled={transform.scale <= MIN_ZOOM || disabled}
-		>
-			<Icon iconName={'Minus'} />
-		</IconButton>
-	</div>
+  <div
+    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-md border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+  >
+    <IconButton
+      variant="transparent-inverse"
+      rounded={false}
+      onclick={zoomIn}
+      aria-label="Zoom In"
+      disabled={transform.scale >= MAX_ZOOM || disabled}
+    >
+      <Icon iconName={'Plus'} />
+    </IconButton>
+    <IconButton
+      variant="transparent-inverse"
+      rounded={false}
+      onclick={zoomOut}
+      aria-label="Zoom Out"
+      disabled={transform.scale <= MIN_ZOOM || disabled}
+    >
+      <Icon iconName={'Minus'} />
+    </IconButton>
+  </div>
 {/snippet}
 
 <div bind:this={container} class="group relative h-full w-full overflow-hidden rounded-lg border">
-	{#if !hideMarkers && !disabled}
-		{@render TopLeftActions()}
-		{@render ZoomControls()}
-	{/if}
+  {#if !hideMarkers && !disabled}
+    {@render TopLeftActions()}
+    {@render ZoomControls()}
+  {/if}
 
-	<!-- 
+  <!-- 
 		We need to use SVG for this interactive component.
 		The SVG element is treated as a canvas for clicking, panning, and zooming.
 		We add accessibility attributes to make it more accessible despite the interactive nature.
 	-->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<svg
-		bind:this={svgElement}
-		onclick={handleClick}
-		onmousedown={handleMouseDown}
-		onmousemove={handleMouseMove}
-		onmouseup={handleMouseUp}
-		onmouseleave={handleMouseLeave}
-		oncontextmenu={handleContextMenu}
-		onwheel={handleWheel}
-		class:cursor-grabbing={panningState === 'active'}
-		class:cursor-grab={!disabled && (panningState === 'ready' || (isShiftPressed && !panningState))}
-		class:cursor-not-allowed={disabled}
-		class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
-		class="h-full w-full"
-		role="application"
-		aria-label={disabled
-			? 'CFU Counter (disabled)'
-			: 'CFU Counter - Click to add markers, right click or shift+click to pan'}
-		tabindex="0"
-	>
-		<g bind:this={viewport} id="viewport" class="h-full w-full">
-			<image href={imageUrl} x="0" y="0" width="100%" />
-			<g
-				bind:this={dotsGroup}
-				id="dots"
-				class="pointer-events-none"
-				aria-hidden={hideMarkers}
-				class:hidden={hideMarkers}
-			/>
-		</g>
-	</svg>
-
-	<!-- Debug info for marks count - useful for testing -->
-	<span class="sr-only" data-testid="marks-count">{marks.length}</span>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <svg
+    bind:this={svgElement}
+    onclick={handleClick}
+    onmousedown={handleMouseDown}
+    onmousemove={handleMouseMove}
+    onmouseup={handleMouseUp}
+    onmouseleave={handleMouseLeave}
+    oncontextmenu={handleContextMenu}
+    onwheel={handleWheel}
+    class:cursor-grabbing={panningState === 'active'}
+    class:cursor-grab={!disabled && (panningState === 'ready' || (isShiftPressed && !panningState))}
+    class:cursor-not-allowed={disabled}
+    class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
+    class="h-full w-full"
+    role="application"
+    aria-label={disabled
+      ? 'CFU Counter (disabled)'
+      : 'CFU Counter - Click to add markers, right click or shift+click to pan'}
+    tabindex="0"
+  >
+    <g bind:this={viewport} id="viewport" class="h-full w-full">
+      <image href={imageUrl} x="0" y="0" width="100%" />
+      <g
+        bind:this={dotsGroup}
+        id="dots"
+        class="pointer-events-none"
+        aria-hidden={hideMarkers}
+        class:hidden={hideMarkers}
+      />
+    </g>
+  </svg>
+
+  <!-- Debug info for marks count - useful for testing -->
+  <span class="sr-only" data-testid="marks-count">{marks.length}</span>
 </div>