@reshape-biotech/design-system 0.0.52 → 1.1.1

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

@@ -0,0 +1,125 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ManualCFUCounter from './ManualCFUCounter.svelte';
+	const { Story } = defineMeta({
+		component: ManualCFUCounter,
+		title: 'Design System/ManualCFUCounter',
+		tags: ['autodocs'],
+		args: {
+			imageUrl: '/imgs/ris.jpg',
+			marks: [],
+			disabled: false,
+			hideMarkers: false
+		},
+		argTypes: {
+			imageUrl: {
+				control: 'text',
+				description: 'URL of the image to display'
+			},
+			marks: {
+				control: 'object',
+				description: 'Array of marker coordinates. Bindable for two-way data flow.'
+			},
+			onclick: {
+				action: 'clicked',
+				description: 'Event handler for when a marker is added'
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Disables interaction with the counter'
+			},
+			hideMarkers: {
+				control: 'boolean',
+				description: 'Hides the markers and prevents new ones from being added'
+			}
+		}
+	});
+
+	const largeImage = '/imgs/ris.jpg';
+
+	function handleUpdate(event: MouseEvent, marks: Array<{ x: number; y: number }>) {
+		console.log('Marker count:', marks.length);
+		console.log('Marker positions:', marks);
+	}
+</script>
+
+<script lang="ts">
+	// For two-way binding examples
+	let boundMarksArray = $state<Array<{ x: number; y: number }>>([]);
+
+	// For initial markers example
+	let presetMarks = [
+		{ x: 100, y: 100 },
+		{ x: 200, y: 200 },
+		{ x: 300, y: 300 }
+	];
+</script>
+
+<Story name="Default" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Manual CFU Counter</h3>
+		<p class="mb-4 text-sm text-secondary">
+			Click to add markers. Pan by clicking and dragging. Zoom with the mouse wheel.
+		</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<ManualCFUCounter imageUrl={largeImage} onclick={handleUpdate} />
+		</div>
+	</div>
+</Story>
+
+<Story name="With Initial Data (marks prop)" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Pre-populated Markers (via marks prop)</h3>
+		<p class="mb-4 text-sm text-secondary">
+			This example starts with 3 pre-defined markers passed via the `marks` prop.
+		</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<ManualCFUCounter imageUrl={largeImage} marks={presetMarks} onclick={handleUpdate} />
+		</div>
+	</div>
+</Story>
+
+<Story name="Two-way Binding (bind:marks)" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Two-way Binding</h3>
+		<p class="mb-4 text-sm text-secondary">
+			This example uses `bind:marks` to synchronize state between the story and the component. Click
+			inside the counter, then check the count below.
+		</p>
+		<p class="mb-2 text-sm">Marks count in story state: {boundMarksArray.length}</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<ManualCFUCounter imageUrl={largeImage} bind:marks={boundMarksArray} onclick={handleUpdate} />
+		</div>
+		<details class="mt-2 text-sm">
+			<summary>Current boundMarksArray:</summary>
+			<pre>{JSON.stringify(boundMarksArray, null, 2)}</pre>
+		</details>
+	</div>
+</Story>
+
+<Story name="Hide Markers" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Without Markers</h3>
+		<p class="mb-4 text-sm text-secondary">
+			In this mode, markers are hidden and you cannot add new ones.
+		</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<ManualCFUCounter
+				imageUrl={largeImage}
+				onclick={handleUpdate}
+				hideMarkers
+				marks={presetMarks}
+			/>
+		</div>
+	</div>
+</Story>
+
+<Story name="Disabled" asChild>
+	<div class="p-4">
+		<h3 class="mb-4 text-lg font-semibold">Disabled Counter</h3>
+		<p class="mb-4 text-sm text-secondary">No interactions are possible in disabled mode.</p>
+		<div class="h-[600px] rounded-lg border border-static p-4">
+			<ManualCFUCounter imageUrl={largeImage} onclick={handleUpdate} disabled />
+		</div>
+	</div>
+</Story>

package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ManualCfuCounter: import("svelte").Component<Record<string, never>, {}, "">;
+type ManualCfuCounter = ReturnType<typeof ManualCfuCounter>;
+export default ManualCfuCounter;

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

@@ -0,0 +1,577 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Button } from '../button';
+	import { textColor } 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 = 12; // Base size at zoom level 1
+	const BASE_MARKER_FONT_SIZE = 10; // 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 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 marksHistory: Array<Array<{ x: number; y: number }>> = $state([]);
+	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');
+			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;
+		}
+		saveCurrentState();
+		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();
+	}
+
+	function saveCurrentState() {
+		marksHistory.push([...marks]);
+	}
+
+	function undo() {
+		if (marksHistory.length === 0) return;
+		const previousState = marksHistory.pop();
+		if (previousState) {
+			marks.splice(0, marks.length, ...previousState);
+			marks = marks;
+			renderMarkers();
+		}
+	}
+
+	function reset() {
+		if (marks.length === 0) return;
+		saveCurrentState();
+
+		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={marksHistory.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>
+{/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}
+
+	<!-- 
+		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>
+</div>