@reshape-biotech/design-system 2.4.1 → 2.4.2

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

@@ -1,669 +0,0 @@
-<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;
-    imageDimensions?: { width: number; height: number };
-  }
-
-  let {
-    imageUrl,
-    onclick,
-    onMarksChange,
-    disabled = false,
-    hideMarkers = false,
-    marks = $bindable([]),
-    allMarks = [],
-    activeMarkerColor = MARKER_COLOR,
-    activeMarkerName = '',
-    editableConfigIndex = null,
-    showMultiConfig = false,
-    imageDimensions = $bindable({ width: 0, height: 0 }),
-  }: 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();
-  });
-
-  $effect(() => {
-    imageDimensions.width = imageDisplayWidth;
-    imageDimensions.height = imageDisplayHeight;
-  });
-</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

@@ -1,36 +0,0 @@
-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;
-    imageDimensions?: {
-        width: number;
-        height: number;
-    };
-}
-declare const MultiCfuCounter: import("svelte").Component<Props, {}, "marks" | "imageDimensions">;
-type MultiCfuCounter = ReturnType<typeof MultiCfuCounter>;
-export default MultiCfuCounter;

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

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

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

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

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

@@ -1 +0,0 @@
-export {};