@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte

@@ -0,0 +1,662 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Button } from '../button';
+  import { textColor } from '../../tokens';
+  import { Icon, type IconColor } from '../icons';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import Divider from '../divider/Divider.svelte';
+
+  const BASE_IMAGE_SIZE = 464;
+  const BASE_MARKER_SIZE = 8;
+  const BASE_MARKER_FONT_SIZE = 8;
+  const MAX_ZOOM = 10;
+  const MIN_ZOOM = 1;
+  const ZOOM_STEP = 0.001;
+  const MARKER_COLOR = textColor['icon-blue'];
+  const TEXT_COLOR = textColor['primary-inverse'];
+  const DRAG_THRESHOLD = 5;
+
+  function getMarkerColorHex(semanticColor: string): string {
+    switch (semanticColor) {
+      case 'icon-blue':
+        return textColor['icon-blue'];
+      case 'icon-orange':
+        return textColor['icon-orange'];
+      case 'icon-pink':
+        return textColor['icon-pink'];
+      case 'icon-lime':
+        return textColor['icon-lime'];
+      default:
+        return textColor['icon-blue'];
+    }
+  }
+
+  interface ConfiguratedMark {
+    x: number;
+    y: number;
+    configIndex: number;
+    color: string;
+    id?: string;
+  }
+
+  interface Props {
+    imageUrl: string;
+    marks?: Array<{ x: number; y: number }>;
+    onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+    onMarksChange?: (marks: Array<{ x: number; y: number }>) => void;
+    disabled?: boolean;
+    hideMarkers?: boolean;
+    allMarks?: ConfiguratedMark[];
+    activeMarkerColor?: string;
+    activeMarkerName?: string;
+    editableConfigIndex?: number | null;
+    showMultiConfig?: boolean;
+  }
+
+  let {
+    imageUrl,
+    onclick,
+    onMarksChange,
+    disabled = false,
+    hideMarkers = false,
+    marks = $bindable([]),
+    allMarks = [],
+    activeMarkerColor = MARKER_COLOR,
+    activeMarkerName = '',
+    editableConfigIndex = null,
+    showMultiConfig = false,
+  }: Props = $props();
+
+  let previousConfigIndex = $state<number | null>(null);
+
+  let resolvedActiveMarkerColor = $derived(() => {
+    if (!activeMarkerColor) return MARKER_COLOR;
+
+    // If it starts with #, it's already a hex color
+    if (activeMarkerColor.startsWith('#')) {
+      return activeMarkerColor;
+    }
+
+    return getMarkerColorHex(activeMarkerColor);
+  });
+
+  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 });
+
+  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);
+  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 (oldWidth > 0 && oldHeight > 0 && marks.length > 0) {
+        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;
+
+      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() {
+    const containerRatio = containerW / containerH;
+
+    if (containerRatio > imageAspectRatio) {
+      imageDisplayHeight = containerH;
+      imageDisplayWidth = containerH * imageAspectRatio;
+    } else {
+      imageDisplayWidth = containerW;
+      imageDisplayHeight = containerW / imageAspectRatio;
+    }
+
+    updateTransform();
+  }
+
+  function clampTransform() {
+    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) {
+      transform.scale = 1;
+      transform.x = 0;
+      transform.y = 0;
+    } else {
+      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;
+
+    viewport.setAttribute(
+      'transform',
+      `translate(${transform.x}, ${transform.y}) scale(${transform.scale})`
+    );
+
+    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));
+    }
+
+    renderMarkers();
+  }
+
+  function getSvgPoint(event: MouseEvent) {
+    if (!svgElement || !container) return { x: 0, y: 0 };
+
+    const rect = container.getBoundingClientRect();
+
+    const relativeX = event.clientX - rect.left;
+    const relativeY = event.clientY - rect.top;
+
+    const svgX = (relativeX - transform.x) / transform.scale;
+    const svgY = (relativeY - transform.y) / transform.scale;
+
+    const offsetX = (containerW - imageDisplayWidth) / 2;
+    const offsetY = (containerH - imageDisplayHeight) / 2;
+
+    return {
+      x: svgX - offsetX,
+      y: svgY - offsetY,
+    };
+  }
+
+  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;
+
+    if (showMultiConfig && allMarks && allMarks.length > 0) {
+      // Group marks by configuration to number them separately
+      const marksByConfig = new Map<number, ConfiguratedMark[]>();
+      allMarks.forEach((mark) => {
+        if (!marksByConfig.has(mark.configIndex)) {
+          marksByConfig.set(mark.configIndex, []);
+        }
+        marksByConfig.get(mark.configIndex)!.push(mark);
+      });
+
+      // Render multi-configuration marks with per-configuration numbering
+      marksByConfig.forEach((configMarks, configIndex) => {
+        configMarks.forEach((mark, configMarkIndex) => {
+          const group = document.createElementNS(svgns, 'g');
+          group.setAttribute(
+            'data-testid',
+            `config-marker-${mark.configIndex}-${configMarkIndex + 1}`
+          );
+
+          const markX = mark.x + offsetX;
+          const markY = mark.y + offsetY;
+
+          // Resolve mark color - supports both hex colors and semantic color names
+          const resolvedMarkColor = mark.color.startsWith('#')
+            ? mark.color
+            : getMarkerColorHex(mark.color);
+
+          const circle = document.createElementNS(svgns, 'circle');
+          circle.setAttribute('cx', String(markX));
+          circle.setAttribute('cy', String(markY));
+          circle.setAttribute('r', String(adjustedMarkerSize));
+          circle.setAttribute('fill', resolvedMarkColor);
+          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(configMarkIndex + 1); // Number per configuration
+          group.appendChild(text);
+
+          dotsGroup.appendChild(group);
+        });
+      });
+    } else {
+      // Render single-configuration marks (existing behavior)
+      marks.forEach((mark, index) => {
+        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', resolvedActiveMarkerColor());
+        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;
+    }
+
+    // In multi-config mode, only allow editing if there's an active editable configuration
+    if (showMultiConfig && editableConfigIndex === null) {
+      return;
+    }
+
+    const pt = getSvgPoint(event);
+    marks.push({ x: pt.x, y: pt.y });
+
+    renderMarkers();
+
+    if (onclick) {
+      onclick(event, marks);
+    }
+
+    onMarksChange?.(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 (shouldResetReadyState && panningState === 'ready') {
+      panningState = null;
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    const isPanningTrigger = event.button === 2 || (event.button === 0 && isShiftPressed);
+    if (!isPanningTrigger) return;
+
+    event.preventDefault();
+    panningState = 'ready';
+    startPoint = { x: event.clientX, y: event.clientY };
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (panningState === null) return;
+
+    const dx = event.clientX - startPoint.x;
+    const dy = event.clientY - startPoint.y;
+
+    if (panningState === 'ready' && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+      panningState = 'active';
+    }
+
+    if (panningState === 'active') {
+      startPoint = { x: event.clientX, y: event.clientY };
+
+      transform.x += dx;
+      transform.y += dy;
+
+      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;
+
+    containerW = container.clientWidth;
+    containerH = container.clientHeight;
+
+    const zoomIntensity = ZOOM_STEP;
+    const delta = event.deltaY;
+    const zoomFactor = 1 - delta * zoomIntensity;
+    const currentScale = transform.scale;
+
+    let potentialNewScale = currentScale * zoomFactor;
+
+    let finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
+
+    if (finalScale <= MIN_ZOOM) {
+      transform.scale = MIN_ZOOM;
+      transform.x = 0;
+      transform.y = 0;
+    } else {
+      const rect = container.getBoundingClientRect();
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+
+      const distX = mouseX - transform.x;
+      const distY = mouseY - transform.y;
+
+      const scaleRatio = finalScale / currentScale;
+      const newDistX = distX * scaleRatio;
+      const newDistY = distY * scaleRatio;
+
+      transform.x = mouseX - newDistX;
+      transform.y = mouseY - newDistY;
+      transform.scale = finalScale;
+    }
+
+    clampTransform();
+    updateTransform();
+  }
+
+  function undo() {
+    if (marks.length === 0) return;
+
+    marks.pop();
+    marks = marks;
+    renderMarkers();
+
+    onMarksChange?.(marks);
+  }
+
+  function reset() {
+    if (marks.length === 0) return;
+
+    marks = [];
+    renderMarkers();
+    onMarksChange?.(marks);
+  }
+
+  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 (finalScale === currentScale) return;
+
+    const centerX = containerW / 2;
+    const centerY = containerH / 2;
+
+    const distX = centerX - transform.x;
+    const distY = centerY - transform.y;
+
+    const scaleRatio = finalScale / currentScale;
+    const newDistX = distX * scaleRatio;
+    const newDistY = distY * scaleRatio;
+
+    transform.x = centerX - newDistX;
+    transform.y = centerY - newDistY;
+    transform.scale = finalScale;
+
+    clampTransform();
+    updateTransform();
+  }
+
+  function zoomIn() {
+    applyZoom(1.2);
+  }
+
+  function zoomOut() {
+    applyZoom(1 / 1.2);
+  }
+
+  $effect(() => {
+    if (editableConfigIndex !== previousConfigIndex) {
+      previousConfigIndex = editableConfigIndex;
+    }
+  });
+
+  onMount(() => {
+    if (container) {
+      containerW = container.clientWidth;
+      containerH = container.clientHeight;
+
+      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);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  });
+
+  $effect(() => {
+    renderMarkers();
+  });
+</script>
+
+{#snippet UndoResetControls()}
+  <div class="flex items-center gap-1">
+    <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>
+{/snippet}
+
+{#snippet TopLeftActions()}
+  {#if activeMarkerName && !hideMarkers && !disabled}
+    <div
+      class="absolute left-2 top-2 z-20 flex w-full max-w-[calc(100%-1rem)] items-center justify-between rounded-lg border border-interactive-inverse bg-base-inverse px-3 py-2"
+    >
+      <div class="flex items-center gap-2">
+        <div
+          class="flex !h-6 !w-6 shrink-0 items-center justify-center rounded-md"
+          style="background-color: {resolvedActiveMarkerColor()}"
+        >
+          <Icon iconName={'CursorClick'} size={16} color="primary-inverse" />
+        </div>
+
+        <span class="text-sm text-primary-inverse">
+          Click to count each object in <strong>{activeMarkerName}</strong>
+        </span>
+      </div>
+
+      {@render UndoResetControls()}
+    </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"
+  data-testid="manual-cfu-counter"
+>
+  {#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>

package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte.d.ts

@@ -0,0 +1,32 @@
+interface ConfiguratedMark {
+    x: number;
+    y: number;
+    configIndex: number;
+    color: string;
+    id?: string;
+}
+interface Props {
+    imageUrl: string;
+    marks?: Array<{
+        x: number;
+        y: number;
+    }>;
+    onclick?: (event: MouseEvent, marks: Array<{
+        x: number;
+        y: number;
+    }>) => void;
+    onMarksChange?: (marks: Array<{
+        x: number;
+        y: number;
+    }>) => void;
+    disabled?: boolean;
+    hideMarkers?: boolean;
+    allMarks?: ConfiguratedMark[];
+    activeMarkerColor?: string;
+    activeMarkerName?: string;
+    editableConfigIndex?: number | null;
+    showMultiConfig?: boolean;
+}
+declare const MultiCfuCounter: import("svelte").Component<Props, {}, "marks">;
+type MultiCfuCounter = ReturnType<typeof MultiCfuCounter>;
+export default MultiCfuCounter;

package/dist/components/multi-cfu-counter/index.d.ts

@@ -0,0 +1 @@
+export { default as MultiCFUCounter } from './MultiCFUCounter.svelte';

package/dist/components/multi-cfu-counter/index.js

@@ -0,0 +1 @@
+export { default as MultiCFUCounter } from './MultiCFUCounter.svelte';