@opendata-ai/openchart-vanilla 8.0.0-rc.9 → 8.0.0

package/src/interactions/invert.ts

@@ -1,54 +0,0 @@
-import type { ScaleInvert } from '@opendata-ai/openchart-core';
-
-/**
- * Convert a pixel position back to a data-space value using the serialized
- * scale inversion anchors from ChartLayout. For band/point scales, snaps to
- * the nearest domain value. For continuous scales, applies the inverse of
- * the scale transform (log, pow, sqrt, symlog, or linear).
- */
-export function invertScale(invert: ScaleInvert, pixel: number): string | number {
-  // Band/point: snap to nearest domain value
-  if (invert.domain && invert.positions && invert.domain.length > 0) {
-    let closest = 0;
-    let minDist = Infinity;
-    for (let i = 0; i < invert.positions.length; i++) {
-      const dist = Math.abs(invert.positions[i] - pixel);
-      if (dist < minDist) {
-        minDist = dist;
-        closest = i;
-      }
-    }
-    return invert.domain[closest];
-  }
-  // Continuous: interpolate in the scale's native space
-  const span = invert.bottomPixel - invert.topPixel;
-  if (span === 0) return invert.topData;
-  const t = (pixel - invert.topPixel) / span;
-
-  const { topData, bottomData, scaleType } = invert;
-
-  if (scaleType === 'log') {
-    if (topData <= 0 || bottomData <= 0) return topData + t * (bottomData - topData);
-    return Math.exp(Math.log(topData) + t * (Math.log(bottomData) - Math.log(topData)));
-  }
-  if (scaleType === 'sqrt') {
-    const sqrtTop = Math.sqrt(Math.abs(topData)) * Math.sign(topData);
-    const sqrtBottom = Math.sqrt(Math.abs(bottomData)) * Math.sign(bottomData);
-    const sqrtVal = sqrtTop + t * (sqrtBottom - sqrtTop);
-    return sqrtVal * Math.abs(sqrtVal);
-  }
-  if (scaleType === 'pow') {
-    const powTop = Math.sign(topData) * Math.abs(topData) ** 0.5;
-    const powBottom = Math.sign(bottomData) * Math.abs(bottomData) ** 0.5;
-    const powVal = powTop + t * (powBottom - powTop);
-    return Math.sign(powVal) * Math.abs(powVal) ** 2;
-  }
-  if (scaleType === 'symlog') {
-    const symlog = (x: number) => Math.sign(x) * Math.log1p(Math.abs(x));
-    const symexp = (x: number) => Math.sign(x) * Math.expm1(Math.abs(x));
-    return symexp(symlog(topData) + t * (symlog(bottomData) - symlog(topData)));
-  }
-
-  // linear, time, or unspecified
-  return topData + t * (bottomData - topData);
-}

package/src/interactions/keyboard-nav.ts

@@ -1,111 +0,0 @@
-import type { ChartLayout, TooltipContent } from '@opendata-ai/openchart-core';
-import type { TooltipManager } from '../tooltip';
-
-/**
- * Wire keyboard navigation on the SVG element.
- * Arrow keys move focus between mark elements. Enter/Space shows tooltip.
- * Escape hides tooltip. Returns a cleanup function.
- */
-export function wireKeyboardNav(
-  svg: SVGElement,
-  container: HTMLElement,
-  tooltipDescriptors: Map<string, TooltipContent>,
-  tooltipManager: TooltipManager,
-  layout: ChartLayout,
-): () => void {
-  container.setAttribute('tabindex', '0');
-  container.setAttribute('aria-roledescription', 'chart');
-  container.setAttribute('aria-label', layout.a11y.altText);
-
-  const markElements: SVGElement[] = [];
-  const allMarkEls = svg.querySelectorAll('[data-mark-id]');
-  for (const el of allMarkEls) {
-    const markId = el.getAttribute('data-mark-id');
-    if (markId && tooltipDescriptors.has(markId)) {
-      markElements.push(el as SVGElement);
-    }
-  }
-
-  let focusIndex = -1;
-
-  function highlightMark(index: number): void {
-    if (focusIndex >= 0 && focusIndex < markElements.length) {
-      markElements[focusIndex].classList.remove('oc-mark-focused');
-      markElements[focusIndex].removeAttribute('aria-selected');
-    }
-
-    focusIndex = index;
-
-    if (focusIndex >= 0 && focusIndex < markElements.length) {
-      const el = markElements[focusIndex];
-      el.classList.add('oc-mark-focused');
-      el.setAttribute('aria-selected', 'true');
-    }
-  }
-
-  function showTooltipForFocused(): void {
-    if (focusIndex < 0 || focusIndex >= markElements.length) return;
-
-    const el = markElements[focusIndex];
-    const markId = el.getAttribute('data-mark-id');
-    if (!markId) return;
-
-    const content = tooltipDescriptors.get(markId);
-    if (!content) return;
-
-    const bbox = el.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const x = bbox.left + bbox.width / 2 - containerRect.left;
-    const y = bbox.top - containerRect.top;
-    tooltipManager.show(content, x, y);
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (markElements.length === 0) return;
-
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowDown': {
-        e.preventDefault();
-        const next = focusIndex < markElements.length - 1 ? focusIndex + 1 : 0;
-        highlightMark(next);
-        showTooltipForFocused();
-        break;
-      }
-      case 'ArrowLeft':
-      case 'ArrowUp': {
-        e.preventDefault();
-        const prev = focusIndex > 0 ? focusIndex - 1 : markElements.length - 1;
-        highlightMark(prev);
-        showTooltipForFocused();
-        break;
-      }
-      case 'Enter':
-      case ' ': {
-        e.preventDefault();
-        if (focusIndex >= 0) {
-          showTooltipForFocused();
-        } else if (markElements.length > 0) {
-          highlightMark(0);
-          showTooltipForFocused();
-        }
-        break;
-      }
-      case 'Escape': {
-        e.preventDefault();
-        tooltipManager.hide();
-        highlightMark(-1);
-        break;
-      }
-    }
-  };
-
-  container.addEventListener('keydown', handleKeyDown);
-
-  return () => {
-    container.removeEventListener('keydown', handleKeyDown);
-    container.removeAttribute('tabindex');
-    container.removeAttribute('aria-roledescription');
-    container.removeAttribute('aria-label');
-  };
-}

package/src/interactions/legend-interaction.ts

@@ -1,46 +0,0 @@
-import type { ChartLayout, ElementEdit } from '@opendata-ai/openchart-core';
-
-/**
- * Wire click handlers on legend entries to toggle series visibility.
- * Returns a cleanup function.
- */
-export function wireLegendInteraction(
-  svg: SVGElement,
-  _layout: ChartLayout,
-  toggleSeries: (series: string) => boolean,
-  onLegendToggle?: (series: string, visible: boolean) => void,
-  onEdit?: (edit: ElementEdit) => void,
-): () => void {
-  // Scoped OUT of the size legend explicitly. Clicking a legend entry toggles a
-  // *series*, and a size legend's circles are values, not series -- clicking
-  // "500M" must not try to hide a series by that name. The size legend already
-  // emits no `data-legend-index`, but a bare `[data-legend-index]` sweep would
-  // silently pick one up the moment that changed, and the failure would be a
-  // click that quietly hides the wrong thing rather than an error.
-  const legendEntries = svg.querySelectorAll(
-    '.oc-legend:not(.oc-legend--size) [data-legend-index]',
-  );
-  const cleanups: Array<() => void> = [];
-
-  for (const entry of legendEntries) {
-    if (entry.getAttribute('data-legend-overflow') === 'true') continue;
-
-    const handleClick = () => {
-      const label = entry.getAttribute('data-legend-label');
-      if (!label) return;
-
-      const nowHidden = toggleSeries(label);
-      onLegendToggle?.(label, !nowHidden);
-      onEdit?.({ type: 'legend-toggle', series: label, hidden: nowHidden });
-    };
-
-    entry.addEventListener('click', handleClick);
-    cleanups.push(() => entry.removeEventListener('click', handleClick));
-  }
-
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}

package/src/interactions/selection.ts

@@ -1,286 +0,0 @@
-import type {
-  Annotation,
-  ChartLayout,
-  ChartSpec,
-  ChromeKey,
-  ElementRef,
-  GraphSpec,
-  LayerSpec,
-  TextAnnotation,
-} from '@opendata-ai/openchart-core';
-import { elementRef } from '@opendata-ai/openchart-core';
-
-/**
- * Find a DOM element inside the SVG that matches the given ElementRef.
- */
-export function findElementByRef(svg: SVGElement, ref: ElementRef): SVGElement | null {
-  switch (ref.type) {
-    case 'annotation': {
-      if (ref.id) {
-        const byId = svg.querySelector(`[data-annotation-id="${ref.id}"]`);
-        if (byId) return byId as SVGElement;
-      }
-      return svg.querySelector(`[data-annotation-index="${ref.index}"]`) as SVGElement | null;
-    }
-    case 'chrome':
-      return svg.querySelector(`[data-chrome-key="${ref.key}"]`) as SVGElement | null;
-    case 'series-label':
-      return svg.querySelector(`.oc-mark-label[data-series="${ref.series}"]`) as SVGElement | null;
-    // The editable legend is the color legend. Excluding the size legend
-    // explicitly rather than relying on it rendering second: `querySelector`
-    // takes the first match, so a bare `.oc-legend` would silently retarget
-    // (and drag) the wrong legend if render order ever changed.
-    case 'legend':
-      return svg.querySelector('.oc-legend:not(.oc-legend--size)') as SVGElement | null;
-    case 'legend-entry':
-      return svg.querySelector(
-        `.oc-legend:not(.oc-legend--size) [data-legend-index="${ref.index}"]`,
-      ) as SVGElement | null;
-  }
-}
-
-/**
- * Build an ElementRef from a DOM element's data attributes.
- */
-export function encodePointerToken(token: string): string {
-  return token.replace(/~/g, '~0').replace(/\//g, '~1');
-}
-
-export function buildElementRef(
-  element: Element,
-  _specAnnotations: Annotation[],
-): ElementRef | null {
-  const annotationEl = element.closest('[data-annotation-index]');
-  if (annotationEl) {
-    const index = Number(annotationEl.getAttribute('data-annotation-index'));
-    const id = annotationEl.getAttribute('data-annotation-id') ?? undefined;
-    return elementRef.annotation(index, id, `/annotations/${index}`);
-  }
-
-  const chromeEl = element.closest('[data-chrome-key]');
-  if (chromeEl) {
-    const key = chromeEl.getAttribute('data-chrome-key') as ChromeKey;
-    if (key) return elementRef.chrome(key, `/chrome/${key}`);
-  }
-
-  const seriesLabelEl = element.closest('.oc-mark-label[data-series]');
-  if (seriesLabelEl) {
-    const series = seriesLabelEl.getAttribute('data-series');
-    if (series)
-      return elementRef.seriesLabel(series, `/labels/offsets/${encodePointerToken(series)}`);
-  }
-
-  const legendEntryEl = element.closest('[data-legend-index]');
-  if (legendEntryEl) {
-    const index = Number(legendEntryEl.getAttribute('data-legend-index'));
-    const series = legendEntryEl.getAttribute('data-legend-label') ?? '';
-    return elementRef.legendEntry(series, index);
-  }
-
-  // Only the color legend is selectable/editable. A click inside the size legend
-  // resolves to no ref rather than reporting the *color* legend's ref, which is
-  // what a bare `.oc-legend` match would do.
-  const legendEl = element.closest('.oc-legend');
-  if (legendEl && !legendEl.classList.contains('oc-legend--size'))
-    return elementRef.legend('/legend');
-
-  return null;
-}
-
-/**
- * Get an ordered list of all editable ElementRefs from the current spec and layout.
- */
-export function getEditableElements(
-  spec: ChartSpec | LayerSpec | GraphSpec,
-  layout: ChartLayout,
-): ElementRef[] {
-  const refs: ElementRef[] = [];
-
-  const chromeKeys: ChromeKey[] = ['title', 'subtitle', 'source', 'byline', 'footer'];
-  for (const key of chromeKeys) {
-    if (layout.chrome[key]) {
-      refs.push(elementRef.chrome(key));
-    }
-  }
-
-  const annotations: Annotation[] =
-    'annotations' in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
-  for (let i = 0; i < annotations.length; i++) {
-    refs.push(elementRef.annotation(i, annotations[i].id));
-  }
-
-  const seriesLabels: string[] = [];
-  for (const mark of layout.marks) {
-    if (mark.type === 'line' && mark.label?.visible && mark.seriesKey) {
-      seriesLabels.push(mark.seriesKey);
-    }
-  }
-  seriesLabels.sort();
-  for (const series of seriesLabels) {
-    refs.push(elementRef.seriesLabel(series));
-  }
-
-  if ('entries' in layout.legend && layout.legend.entries.length > 0) {
-    refs.push(elementRef.legend());
-  }
-
-  return refs;
-}
-
-/**
- * Check if an ElementRef points to a text-editable element.
- */
-export function isTextEditable(ref: ElementRef, specAnnotations: Annotation[]): boolean {
-  if (ref.type === 'chrome') return true;
-  if (ref.type === 'annotation') {
-    const annotation = specAnnotations[ref.index];
-    return annotation?.type === 'text';
-  }
-  return false;
-}
-
-/**
- * Get the current text content for an element ref.
- */
-export function getElementText(
-  ref: ElementRef,
-  spec: ChartSpec | LayerSpec | GraphSpec,
-): string | null {
-  if (ref.type === 'chrome') {
-    const chromeConfig = 'chrome' in spec ? spec.chrome : undefined;
-    if (!chromeConfig) return null;
-    const entry = chromeConfig[ref.key];
-    if (typeof entry === 'string') return entry;
-    if (typeof entry === 'object' && entry !== null && 'text' in entry) {
-      return (entry as { text: string }).text;
-    }
-    return null;
-  }
-  if (ref.type === 'annotation') {
-    const annotations: Annotation[] =
-      'annotations' in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
-    const annotation = annotations[ref.index];
-    if (annotation?.type === 'text') return (annotation as TextAnnotation).text ?? null;
-    if (annotation?.label) return annotation.label;
-    return null;
-  }
-  return null;
-}
-
-/**
- * Compare two ElementRefs for equality.
- */
-export function refsEqual(a: ElementRef | null, b: ElementRef | null): boolean {
-  if (a === null || b === null) return a === b;
-  if (a.type !== b.type) return false;
-  switch (a.type) {
-    case 'annotation': {
-      const bAnno = b as typeof a;
-      if (a.id && bAnno.id) return a.id === bAnno.id;
-      return a.index === bAnno.index;
-    }
-    case 'chrome':
-      return a.key === (b as typeof a).key;
-    case 'series-label':
-      return a.series === (b as typeof a).series;
-    case 'legend':
-      return true;
-    case 'legend-entry': {
-      const bEntry = b as typeof a;
-      return a.index === bEntry.index && a.series === bEntry.series;
-    }
-  }
-}
-
-/**
- * Render a selection overlay rectangle around a target element.
- */
-export function renderSelectionOverlay(
-  svg: SVGElement,
-  ref: ElementRef,
-  layout: ChartLayout,
-): SVGGElement | null {
-  const target = findElementByRef(svg, ref);
-  if (!target) return null;
-
-  const bbox = (target as SVGGraphicsElement).getBBox();
-  const padding = 4;
-
-  const accentColor = layout.theme.colors.categorical?.[0] ?? '#4f46e5';
-
-  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-  g.setAttribute('class', 'oc-selection-overlay');
-
-  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-  rect.setAttribute('x', String(bbox.x - padding));
-  rect.setAttribute('y', String(bbox.y - padding));
-  rect.setAttribute('width', String(bbox.width + padding * 2));
-  rect.setAttribute('height', String(bbox.height + padding * 2));
-  rect.setAttribute('rx', '3');
-  rect.setAttribute('fill', 'transparent');
-  rect.setAttribute('stroke', accentColor);
-  rect.setAttribute('stroke-width', '1.5');
-  rect.setAttribute('pointer-events', 'none');
-
-  g.appendChild(rect);
-  svg.appendChild(g);
-
-  return g;
-}
-
-/**
- * Create a visually-hidden data table from the chart's a11y fallback data.
- */
-export function createScreenReaderTable(
-  layout: ChartLayout,
-  container: HTMLElement,
-): HTMLTableElement | null {
-  const data = layout.a11y.dataTableFallback;
-  if (!data || data.length === 0) return null;
-
-  const table = document.createElement('table');
-  table.className = 'oc-sr-only';
-  table.style.position = 'absolute';
-  table.style.width = '1px';
-  table.style.height = '1px';
-  table.style.padding = '0';
-  table.style.margin = '-1px';
-  table.style.overflow = 'hidden';
-  table.style.clipPath = 'inset(50%)';
-  table.style.whiteSpace = 'nowrap';
-  table.style.borderWidth = '0';
-  table.setAttribute('role', 'table');
-  table.setAttribute('aria-label', `Data table: ${layout.a11y.altText}`);
-
-  if (data.length > 0) {
-    const thead = document.createElement('thead');
-    const headerRow = document.createElement('tr');
-    const headers = data[0] as unknown[];
-    for (const header of headers) {
-      const th = document.createElement('th');
-      th.textContent = String(header ?? '');
-      th.setAttribute('scope', 'col');
-      headerRow.appendChild(th);
-    }
-    thead.appendChild(headerRow);
-    table.appendChild(thead);
-  }
-
-  if (data.length > 1) {
-    const tbody = document.createElement('tbody');
-    for (let i = 1; i < data.length; i++) {
-      const tr = document.createElement('tr');
-      const cells = data[i] as unknown[];
-      for (const cell of cells) {
-        const td = document.createElement('td');
-        td.textContent = String(cell ?? '');
-        tr.appendChild(td);
-      }
-      tbody.appendChild(tr);
-    }
-    table.appendChild(tbody);
-  }
-
-  container.appendChild(table);
-  return table;
-}

package/src/interactions/tooltip-events.ts

@@ -1,72 +0,0 @@
-import type { TooltipContent } from '@opendata-ai/openchart-core';
-import type { TooltipManager } from '../tooltip';
-
-/**
- * Wire tooltip events on mark elements inside an SVG.
- * Returns a cleanup function to remove all listeners.
- */
-export function wireTooltipEvents(
-  svg: SVGElement,
-  tooltipDescriptors: Map<string, TooltipContent>,
-  tooltipManager: TooltipManager,
-): () => void {
-  const markElements = svg.querySelectorAll('[data-mark-id]');
-  const cleanups: Array<() => void> = [];
-
-  for (const el of markElements) {
-    const markId = el.getAttribute('data-mark-id');
-    if (!markId) continue;
-
-    const content = tooltipDescriptors.get(markId);
-    if (!content) continue;
-
-    const handleMouseEnter = (e: Event) => {
-      const mouseEvent = e as MouseEvent;
-      const svgRect = svg.getBoundingClientRect();
-      const x = mouseEvent.clientX - svgRect.left;
-      const y = mouseEvent.clientY - svgRect.top;
-      tooltipManager.show(content, x, y);
-    };
-
-    const handleMouseMove = (e: Event) => {
-      const mouseEvent = e as MouseEvent;
-      const svgRect = svg.getBoundingClientRect();
-      const x = mouseEvent.clientX - svgRect.left;
-      const y = mouseEvent.clientY - svgRect.top;
-      tooltipManager.show(content, x, y);
-    };
-
-    const handleMouseLeave = () => {
-      tooltipManager.hide();
-    };
-
-    const handleTouchStart = (e: Event) => {
-      const touchEvent = e as TouchEvent;
-      if (touchEvent.touches.length > 0) {
-        const touch = touchEvent.touches[0];
-        const svgRect = svg.getBoundingClientRect();
-        const x = touch.clientX - svgRect.left;
-        const y = touch.clientY - svgRect.top;
-        tooltipManager.show(content, x, y);
-      }
-    };
-
-    el.addEventListener('mouseenter', handleMouseEnter);
-    el.addEventListener('mousemove', handleMouseMove);
-    el.addEventListener('mouseleave', handleMouseLeave);
-    el.addEventListener('touchstart', handleTouchStart);
-
-    cleanups.push(() => {
-      el.removeEventListener('mouseenter', handleMouseEnter);
-      el.removeEventListener('mousemove', handleMouseMove);
-      el.removeEventListener('mouseleave', handleMouseLeave);
-      el.removeEventListener('touchstart', handleTouchStart);
-    });
-  }
-
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}

package/src/map-camera.ts

@@ -1,111 +0,0 @@
-/**
- * Map camera utilities: zoom, pan, and focus for map visualizations.
- *
- * Reuses the existing camera-math infrastructure from the scrollytelling
- * system. The camera transform is applied as an SVG `transform` attribute
- * on the `[data-oc-map-camera]` group, never as a CSS transform.
- */
-
-import type { MapLayout } from '@opendata-ai/openchart-core';
-import type { Camera, CameraTarget } from './story/camera-math';
-import { cameraTransform, FULL_VIEW, fitTarget } from './story/camera-math';
-
-export type { Camera } from './story/camera-math';
-
-/** Resting opacity for features outside the current focus set. */
-export const FOCUS_DIM_OPACITY = 0.25;
-
-export interface MapCameraOptions {
-  /** Transition duration in ms. 0 snaps instantly. Default 600. */
-  duration?: number;
-  /** Padding in map-local units around the target. Default 16. */
-  padding?: number;
-}
-
-/**
- * Compute a CameraTarget from the union of feature bounds.
- * Returns null if no matching features found.
- */
-export function focusTargetForFeatures(
-  layout: MapLayout,
-  ids: Array<string | number>,
-  padding = 16,
-): CameraTarget | null {
-  const idSet = new Set(ids.map(String));
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  let found = false;
-
-  for (const f of layout.features) {
-    if (idSet.has(String(f.id))) {
-      found = true;
-      minX = Math.min(minX, f.bounds.x);
-      minY = Math.min(minY, f.bounds.y);
-      maxX = Math.max(maxX, f.bounds.x + f.bounds.width);
-      maxY = Math.max(maxY, f.bounds.y + f.bounds.height);
-    }
-  }
-
-  if (!found) return null;
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY, padding };
-}
-
-/**
- * Compute the Camera for a target, fitting against mapSize.
- * Returns the full-view camera if no target provided.
- */
-export function cameraForTarget(layout: MapLayout, target?: CameraTarget | null): Camera {
-  const vb = layout.mapSize;
-  if (!target) return fitTarget(FULL_VIEW(vb), vb);
-  const cam = fitTarget(target, vb);
-  return { ...cam, k: Math.max(1, Math.min(40, cam.k)) };
-}
-
-/**
- * Apply a camera transform to the map's camera group.
- * Toggles vector-effect="non-scaling-stroke" on features/borders while zoomed.
- */
-export function applyMapCamera(svg: SVGElement, camera: Camera, layout: MapLayout): void {
-  const cameraGroup = svg.querySelector('[data-oc-map-camera]');
-  if (!cameraGroup) return;
-
-  const vb = layout.mapSize;
-  const isZoomed = Math.abs(camera.k - 1) > 1e-3;
-
-  if (isZoomed) {
-    cameraGroup.setAttribute('transform', cameraTransform(camera, vb));
-    // Toggle non-scaling-stroke so strokes don't fatten when zoomed
-    const paths = svg.querySelectorAll('.oc-map-feature, .oc-map-borders path');
-    for (const p of paths) {
-      p.setAttribute('vector-effect', 'non-scaling-stroke');
-    }
-    // Counter-scale point radii so dots keep constant screen size through zoom.
-    // Only use attribute counter-scaling (r/k, stroke-width/k) without
-    // vector-effect: the group transform scales both back to constant screen
-    // size. Adding vector-effect on top would double-compensate stroke.
-    const points = svg.querySelectorAll('.oc-map-point');
-    for (const p of points) {
-      const baseR = Number(p.getAttribute('data-base-r') ?? 5);
-      const baseSW = Number(p.getAttribute('data-base-stroke-width') ?? 1);
-      p.setAttribute('r', String(baseR / camera.k));
-      p.setAttribute('stroke-width', String(baseSW / camera.k));
-    }
-  } else {
-    cameraGroup.removeAttribute('transform');
-    const paths = svg.querySelectorAll('.oc-map-feature, .oc-map-borders path');
-    for (const p of paths) {
-      p.removeAttribute('vector-effect');
-    }
-    // Reset point radii when not zoomed
-    const points = svg.querySelectorAll('.oc-map-point');
-    for (const p of points) {
-      const baseR = Number(p.getAttribute('data-base-r') ?? 5);
-      const baseSW = Number(p.getAttribute('data-base-stroke-width') ?? 1);
-      p.setAttribute('r', String(baseR));
-      p.setAttribute('stroke-width', String(baseSW));
-      p.removeAttribute('vector-effect');
-    }
-  }
-}