waveform-analysis 0.1.65 → 0.1.67

package/src/components/core/useWaveformYAxisLayout.ts

@@ -0,0 +1,140 @@
+import { computed, type ComputedRef } from 'vue'
+
+import { margin, MINIMUM_PLOT_WIDTH } from './constants'
+import { getGridGap, type NormalizedWaveformGridOptions } from './grid'
+import { buildYAxisSlots } from './layout'
+import type { DisplayTrack } from './types'
+import type { ResolvedWaveformChartProps } from './waveformChartTypes'
+import { resolveYAxisLayoutMetrics } from './yAxisLayoutMetrics'
+import { Y_AXIS_OUTER_PADDING } from './yAxisConstants'
+
+interface YAxisLayoutContext {
+  props: ResolvedWaveformChartProps
+  chartTracks: ComputedRef<DisplayTrack[]>
+  layoutTracks: ComputedRef<DisplayTrack[]>
+  chartWidth: ComputedRef<number>
+  gridOptions: ComputedRef<NormalizedWaveformGridOptions>
+  viewportYDomains: ComputedRef<Record<string, [number, number]>>
+  yAxisTickCount: ComputedRef<number>
+}
+
+export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
+  const {
+    props,
+    chartTracks,
+    layoutTracks,
+    chartWidth,
+    gridOptions,
+    viewportYDomains,
+    yAxisTickCount,
+  } = context
+  const isEdgeCompact = computed(() => props.layoutPreset === 'edge-compact')
+  const showUnits = computed(() => !isEdgeCompact.value || props.unitDisplayMode === 'axis')
+  const yAxisMetrics = computed(() =>
+    resolveYAxisLayoutMetrics(
+      chartTracks.value,
+      props.overlayMode,
+      props.yDomain,
+      props.yDomains,
+      viewportYDomains.value,
+      props.axes?.y?.nice !== false,
+      yAxisTickCount.value,
+      props.displayMode === 'compact',
+      props.axes?.y?.upperPaddingRatio,
+      showUnits.value,
+    ),
+  )
+  const hasYAxisLabels = computed(() =>
+    chartTracks.value.some(
+      (track) =>
+        track.visibleSeries.length === 1 &&
+        Boolean(track.visibleSeries[0]?.name.trim() || props.yLabel),
+    ),
+  )
+  const hasVisibleWaveformData = computed(() =>
+    chartTracks.value.some((track) => track.visibleSeries.length > 0),
+  )
+  const chartLeftMargin = computed(() =>
+    Math.max(
+      margin.left,
+      hasYAxisLabels.value
+        ? yAxisMetrics.value.fullClearance
+        : hasVisibleWaveformData.value
+          ? yAxisMetrics.value.tickClearance
+          : 0,
+    ),
+  )
+  const yAxisSlots = computed(() =>
+    buildYAxisSlots(
+      layoutTracks.value.filter((track) => track.visibleSeries.length > 0),
+      props.overlayMode,
+      props.yDomain,
+      props.yDomains,
+      yAxisTickCount.value,
+      props.axes?.y?.nice !== false,
+      props.displayMode === 'compact',
+      viewportYDomains.value,
+      props.axes?.y?.upperPaddingRatio,
+      showUnits.value,
+    ),
+  )
+  const resolvedChartLeftMargin = computed(() =>
+    isEdgeCompact.value
+      ? margin.right + Math.max(0, compactLeftClearance.value - Y_AXIS_OUTER_PADDING)
+      : props.overlayMode === 'multi-axis'
+        ? Math.max(chartLeftMargin.value, yAxisSlots.value.clearance.left)
+        : chartLeftMargin.value,
+  )
+  // The same slot places the title and reserves its entire 20px band. The outer
+  // padding belongs to the chart edge, rather than the old fixed 48px minimum.
+  const compactLeftClearance = computed(() =>
+    !hasVisibleWaveformData.value
+      ? 0
+      : props.overlayMode === 'multi-axis' || hasYAxisLabels.value
+        ? yAxisSlots.value.clearance.left
+        : yAxisMetrics.value.tickClearance,
+  )
+  const chartRightMargin = computed(() =>
+    props.overlayMode === 'multi-axis'
+      ? Math.max(margin.right, yAxisSlots.value.clearance.right)
+      : margin.right,
+  )
+  const innerWidth = computed(() =>
+    Math.max(0, chartWidth.value - resolvedChartLeftMargin.value - chartRightMargin.value),
+  )
+  const yAxisLayout = computed(() => {
+    const baseGap = getGridGap(props.displayMode)
+    const columnCount = gridOptions.value.columnCount
+    const hasMultipleColumns = columnCount > 1
+    const fullGap = Math.max(
+      baseGap,
+      isEdgeCompact.value ? yAxisSlots.value.clearance.left : yAxisMetrics.value.fullClearance,
+    )
+    const tickGap = Math.max(baseGap, yAxisMetrics.value.tickClearance)
+    const plotWidth = (innerWidth.value - fullGap * Math.max(0, columnCount - 1)) / columnCount
+    const canReserveLabelClearance = plotWidth >= MINIMUM_PLOT_WIDTH
+    return {
+      horizontalGap:
+        props.overlayMode === 'multi-axis' && hasMultipleColumns && hasVisibleWaveformData.value
+          ? Math.max(baseGap, yAxisSlots.value.clearance.left + yAxisSlots.value.clearance.right)
+          : hasMultipleColumns && hasVisibleWaveformData.value
+            ? hasYAxisLabels.value && canReserveLabelClearance
+              ? fullGap
+              : tickGap
+            : baseGap,
+      hideSecondaryLabels:
+        props.overlayMode !== 'multi-axis' &&
+        hasMultipleColumns &&
+        hasYAxisLabels.value &&
+        !canReserveLabelClearance,
+    }
+  })
+  return {
+    yAxisMetrics,
+    yAxisSlots,
+    resolvedChartLeftMargin,
+    innerWidth,
+    yAxisLayout,
+    hasVisibleWaveformData,
+  }
+}

package/src/components/core/waveformChartTypes.ts

@@ -3,6 +3,8 @@ import type {
   WaveformAxesOptions,
   WaveformData,
   WaveformDisplayMode,
+  WaveformUnitDisplayMode,
+  WaveformLayoutPreset,
   WaveformFrameStyle,
   WaveformInteractionMode,
   WaveformLegendOptions,
@@ -18,6 +20,7 @@ import type {
   WaveformZeroLineOptions,
   WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
+  WaveformPanEndPayload,
   WaveformZoomResetPayload,
 } from '../data/types'
 import type { WaveformGridOptions } from './grid'
@@ -26,6 +29,10 @@ export interface WaveformChartProps {
   data: WaveformData
   displayMode?: WaveformDisplayMode
   overlayMode?: WaveformOverlayMode
+  /** Default axis units; optional chart-wide single-series legend units. */
+  unitDisplayMode?: WaveformUnitDisplayMode
+  /** Default spacing or compact title/time labels with a separate pagination band. */
+  layoutPreset?: WaveformLayoutPreset
   width?: number
   height?: number
   xLabel?: string
@@ -33,7 +40,11 @@ export interface WaveformChartProps {
   lineColor?: string
   showTooltip?: boolean
   zoomable?: boolean
+  /** Snap viewport endpoints outwards to integer X-axis display units. */
+  integerZoom?: boolean
   pannable?: boolean
+  /** Global record bounds in seconds; enables horizontal panning beyond loaded data. */
+  panXDomain?: [number, number]
   minZoomSpan?: number
   minVisiblePoints?: number
   maxZoomScale?: number | null
@@ -66,10 +77,13 @@ export interface WaveformChartProps {
 type DefaultedProp =
   | 'displayMode'
   | 'overlayMode'
+  | 'unitDisplayMode'
+  | 'layoutPreset'
   | 'yLabel'
   | 'lineColor'
   | 'showTooltip'
   | 'zoomable'
+  | 'integerZoom'
   | 'pannable'
   | 'minVisiblePoints'
   | 'xDomainStrategy'
@@ -94,6 +108,7 @@ export interface WaveformChartEmit {
   (event: 'zoom-intent', payload: WaveformZoomIntentPayload): void
   (event: 'zoom-change', domain: [number, number]): void
   (event: 'zoom-end', payload: WaveformZoomEndPayload): void
+  (event: 'pan-end', payload: WaveformPanEndPayload): void
   (event: 'zoom-reset', payload: WaveformZoomResetPayload): void
   (event: 'update:annotations', annotations: WaveformAnnotation[]): void
   (event: 'update:hidden-series-ids', ids: string[]): void

package/src/components/core/yAxisLayoutMetrics.ts

@@ -40,11 +40,20 @@ export function resolveYAxisLayoutMetrics(
   nice: boolean,
   tickCount: number,
   compact: boolean,
+  upperPaddingRatio = 0,
+  showUnits = true,
 ): YAxisLayoutMetrics {
   const axisText = chartTracks
     .filter((track) => track.visibleSeries.length > 0)
     .flatMap((track) =>
-      resolveRenderedYAxisSeriesGroups(track, overlayMode, yDomain, yDomains, viewportYDomains),
+      resolveRenderedYAxisSeriesGroups(
+        track,
+        overlayMode,
+        yDomain,
+        yDomains,
+        viewportYDomains,
+        upperPaddingRatio,
+      ),
     )
     .map(
       (group) =>
@@ -52,7 +61,7 @@ export function resolveYAxisLayoutMetrics(
           group.domain,
           nice,
           undefined,
-          group.seriesList[0]?.unit,
+          showUnits ? group.seriesList[0]?.unit : undefined,
           tickCount,
           compact,
         ).tickTextWidth,

package/src/components/core/yAxisTitleLayout.ts

@@ -0,0 +1,78 @@
+import { formatYAxisTickLabel } from './layout'
+import type { TrackLayout, WaveformYAxisLayout } from './types'
+import {
+  Y_AXIS_CHARACTER_WIDTH,
+  Y_AXIS_LABEL_BAND_WIDTH,
+  Y_AXIS_TICK_PADDING,
+} from './yAxisConstants'
+
+// Match the existing 14px channel names and 11px ticks in WaveformTrack.css.
+const TITLE_FONT_SIZE = 14
+const TICK_FONT_SIZE = 11
+const TEXT_GAP = 2
+
+function estimateTitleWidth(title: string): number {
+  return Array.from(title).reduce((width, character) => {
+    // Latin labels average well below one em; full-width characters occupy one em.
+    const em = /[\u2e80-\u9fff\uf900-\ufaff\uff01-\uff60]/u.test(character)
+      ? 1
+      : /[MW@%]/u.test(character)
+        ? 0.95
+        : /[ilI1., :;|'!]/u.test(character)
+          ? 0.4
+          : 0.65
+    return width + em * TITLE_FONT_SIZE
+  }, 0)
+}
+
+type TitleTrack = Pick<TrackLayout, 'height' | 'column' | 'yAxes'>
+
+function titleDistance(track: TitleTrack, axis: WaveformYAxisLayout, yLabel?: string): number {
+  const series = axis.seriesList[0]
+  const title = series?.name.trim() || yLabel || ''
+  const halfTitleHeight = estimateTitleWidth(title) / 2
+  const titleTop = track.height / 2 - halfTitleHeight - TEXT_GAP
+  const titleBottom = track.height / 2 + halfTitleHeight + TEXT_GAP
+  const lowestTick = Math.min(...axis.tickValues)
+  const tickWidths = axis.tickValues.flatMap((value) => {
+    // D3 places ticks at scale(value) + 0.5. The lowest label is bottom-aligned;
+    // all other labels are vertically centered using dy="0.32em".
+    const y = axis.scale(value) + 0.5
+    const top = y - (value === lowestTick ? TICK_FONT_SIZE : TICK_FONT_SIZE / 2)
+    const bottom = value === lowestTick ? y : y + TICK_FONT_SIZE / 2
+    if (bottom < titleTop || top > titleBottom) return []
+    return [
+      formatYAxisTickLabel(
+        value,
+        axis.scale.domain() as [number, number],
+        axis.tickValues,
+        series?.unit,
+      ).length * Y_AXIS_CHARACTER_WIDTH,
+    ]
+  })
+  // The 20px title band already leaves 3px beside a 14px glyph.
+  return (
+    Math.max(Y_AXIS_CHARACTER_WIDTH, ...tickWidths) +
+    Y_AXIS_TICK_PADDING +
+    Y_AXIS_LABEL_BAND_WIDTH / 2
+  )
+}
+
+export function alignLeftYAxisTitles(layouts: TitleTrack[], yLabel?: string): void {
+  const distances = new Map<string, number>()
+  for (const track of layouts) {
+    let leftIndex = 0
+    for (const axis of track.yAxes) {
+      if (axis.side !== 'left') continue
+      const key = `${track.column}:${leftIndex++}`
+      distances.set(key, Math.max(distances.get(key) ?? 0, titleDistance(track, axis, yLabel)))
+    }
+  }
+  for (const track of layouts) {
+    let leftIndex = 0
+    for (const axis of track.yAxes) {
+      if (axis.side !== 'left') continue
+      axis.labelX = axis.x - distances.get(`${track.column}:${leftIndex++}`)!
+    }
+  }
+}

package/src/components/data/types.ts

@@ -7,11 +7,14 @@
 export type {
   WaveformPoint,
   WaveformDisplayMode,
+  WaveformUnitDisplayMode,
+  WaveformLayoutPreset,
   WaveformOverlayMode,
   WaveformInteractionMode,
   WaveformXDomainStrategy,
   WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
+  WaveformPanEndPayload,
   WaveformZoomResetPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,

package/src/components/interaction/integerZoom.ts

@@ -0,0 +1,64 @@
+import { scaleLinear } from 'd3'
+
+export interface IntegerZoomOptions {
+  integerZoom?: boolean
+  timeUnit?: 's' | 'ms'
+}
+
+export function integerZoomTicks(
+  domain: [number, number],
+  count: number,
+  options: IntegerZoomOptions,
+) {
+  if (!options.integerZoom) return scaleLinear().domain(domain).ticks(count)
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  return scaleLinear()
+    .domain(domain.map((value) => value * factor))
+    .ticks(count)
+    .filter(Number.isInteger)
+    .map((value) => value / factor)
+}
+
+export function formatIntegerZoomLabel(value: number): string {
+  return String(Math.round(value))
+}
+
+function stableInteger(value: number): number {
+  const rounded = Math.round(value)
+  return Math.abs(value - rounded) <= Number.EPSILON * Math.max(1, Math.abs(value)) * 16
+    ? rounded
+    : value
+}
+
+/** Align outwards in display units; all returned coordinates remain in seconds. */
+export function alignIntegerZoomDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  if (!options.integerZoom) return domain
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  const start = stableInteger(Math.min(domain[0], domain[1]) * factor)
+  const end = stableInteger(Math.max(domain[0], domain[1]) * factor)
+  if (!Number.isSafeInteger(Math.floor(start)) || !Number.isSafeInteger(Math.ceil(end)))
+    return domain
+  const left = Math.floor(start)
+  return [left / factor, Math.max(left + 1, Math.ceil(end)) / factor]
+}
+
+/** Recover aligned endpoints after a D3 transform, tolerating floating-point round-off. */
+export function normalizeIntegerZoomDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  return alignIntegerZoomDomain(domain, options)
+}
+
+/** Translation snaps to the nearest unit so panning preserves the visible span. */
+export function alignIntegerPanDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  if (!options.integerZoom) return domain
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  return [Math.round(domain[0] * factor) / factor, Math.round(domain[1] * factor) / factor]
+}

package/src/components/interaction/interactionTarget.ts

@@ -0,0 +1,10 @@
+export function isEditableTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    Boolean(
+      target.closest(
+        'button, input, select, textarea, [contenteditable]:not([contenteditable="false"])',
+      ),
+    )
+  )
+}

package/src/components/interaction/remoteViewport.ts

@@ -0,0 +1,53 @@
+import type { ResolvedWaveformChartProps } from '../core/waveformChartTypes'
+import {
+  constrainZoomDomain,
+  resolveMinimumZoomSpan,
+  type ZoomSeriesGroup,
+} from './zoomConstraints'
+
+export function clampViewportDomain(
+  domain: [number, number],
+  boundary: [number, number],
+): [number, number] {
+  const span = domain[1] - domain[0]
+  const boundarySpan = boundary[1] - boundary[0]
+  if (span >= boundarySpan) return [...boundary]
+  if (domain[0] < boundary[0]) return [boundary[0], boundary[0] + span]
+  if (domain[1] > boundary[1]) return [boundary[1] - span, boundary[1]]
+  return domain
+}
+
+export function remotePanBoundary(props: Pick<ResolvedWaveformChartProps, 'panXDomain'>) {
+  const domain = props.panXDomain
+  return domain && domain.every(Number.isFinite) && domain[0] < domain[1] ? domain : undefined
+}
+
+/** Restore remote windows without requiring points inside a not-yet-loaded interval. */
+export function restoreViewportDomain(
+  domain: [number, number],
+  baseDomain: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  props: ResolvedWaveformChartProps,
+): [number, number] {
+  const boundary = remotePanBoundary(props)
+  return boundary
+    ? clampViewportDomain(domain, boundary)
+    : constrainZoomDomain(domain, baseDomain, groups, props)
+}
+
+/** Wheel/box zoom keeps the remote position and uses loaded data for scale limits. */
+export function constrainViewportZoom(
+  domain: [number, number],
+  baseDomain: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  props: ResolvedWaveformChartProps,
+) {
+  const boundary = remotePanBoundary(props)
+  if (!boundary) return constrainZoomDomain(domain, baseDomain, groups, props)
+  return constrainZoomDomain(domain, boundary, [], {
+    ...props,
+    minVisiblePoints: 0,
+    maxZoomScale: null,
+    minZoomSpan: resolveMinimumZoomSpan(baseDomain, groups, props),
+  })
+}

package/src/components/interaction/useWaveformViewport.ts

@@ -2,16 +2,17 @@ import { pointer, zoomIdentity, type ZoomTransform } from 'd3'
 import { computed, nextTick, shallowRef, type ComputedRef, type Ref, type ShallowRef } from 'vue'
 import { MINIMUM_SELECTION_SIZE } from '../core/constants'
 import type { DisplayTrack, TrackLayout } from '../core/types'
-import { hasFixedYDomainForTrack } from '../core/yDomain'
 import type { ResolvedWaveformChartProps, ViewportSelectionState } from '../core/waveformChartTypes'
 import type { WaveformChartEmit } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
 import { tryReleasePointerCapture } from './pointerCapture'
 import { transitionViewportInteraction } from './viewportInteractionState'
 import { createViewportDomainSetter } from './viewportDomain'
-import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
+import { constrainViewportZoom } from './remoteViewport'
+import { createViewportPan } from './viewportPan'
+import { transformForDomain } from './zoomConstraints'
 import { emitBoxZoomIntent } from './zoomEventPayload'
-interface ViewportContext {
+export interface ViewportContext {
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
   selection: Ref<ViewportSelectionState | null>
@@ -92,14 +93,6 @@ export function useWaveformViewport(context: ViewportContext) {
       height: Math.abs(active.currentY - active.startY),
     }
   })
-  const clampDomain = (domain: [number, number], boundary: [number, number]): [number, number] => {
-    const span = domain[1] - domain[0]
-    const boundarySpan = boundary[1] - boundary[0]
-    if (span >= boundarySpan) return [...boundary]
-    if (domain[0] < boundary[0]) return [boundary[0], boundary[0] + span]
-    if (domain[1] > boundary[1]) return [boundary[1] - span, boundary[1]]
-    return domain
-  }
   const currentYDomains = (): Record<string, [number, number]> =>
     Object.fromEntries(
       trackLayouts.value
@@ -148,51 +141,7 @@ export function useWaveformViewport(context: ViewportContext) {
       trackLayouts.value.find((item) => item.hasVisibleSeries)
     if (track) beginViewportDrag(event, track.index, false)
   }
-  const applyPan = (active: ViewportSelectionState, track: TrackLayout) => {
-    const width = track.width || 1
-    const height = track.height || 1
-    const dx = active.currentX - active.startX
-    const dy = active.currentY - active.startY
-    const xSpan = active.xDomain[1] - active.xDomain[0]
-    const sourceXDomain = active.independent
-      ? resolveInitialTrackDomain(track)
-      : initialXDomain.value
-    const nextX = clampDomain(
-      [active.xDomain[0] - (dx / width) * xSpan, active.xDomain[1] - (dx / width) * xSpan],
-      sourceXDomain,
-    )
-    if (active.independent) {
-      const nextTransforms = [...independentTransforms.value]
-      nextTransforms[track.index] = transformForDomain(nextX, sourceXDomain, width)
-      independentTransforms.value = nextTransforms
-    } else {
-      sharedTransform.value = transformForDomain(nextX, sourceXDomain, innerWidth.value)
-    }
-    const targets = active.independent
-      ? [track]
-      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
-    const nextIndependentDomains = { ...independentYDomains.value }
-    const nextSharedDomains = { ...sharedYDomains.value }
-    targets.forEach((target) => {
-      const chartTrack = chartTracks.value.find((item) => item.id === target.id)
-      if (chartTrack && hasFixedYDomainForTrack(chartTrack, props.yDomain, props.yDomains)) {
-        return
-      }
-      const key = target.series?.trackId ?? target.series?.id ?? target.id
-      const source = active.yDomains[key] ?? (target.yScale.domain() as [number, number])
-      const boundary = chartTrack?.yDomain ?? source
-      const ySpan = source[1] - source[0]
-      const nextY = clampDomain(
-        [source[0] + (dy / height) * ySpan, source[1] + (dy / height) * ySpan],
-        boundary,
-      )
-      if (active.independent) nextIndependentDomains[target.index] = nextY
-      else nextSharedDomains[key] = nextY
-    })
-    if (active.independent) independentYDomains.value = nextIndependentDomains
-    else sharedYDomains.value = nextSharedDomains
-    emit('zoom-change', nextX)
-  }
+  const applyPan = createViewportPan(context)
   const updateViewportDrag = (event: PointerEvent) => {
     if (isPresentationMode.value) return
     const active = selection.value
@@ -242,7 +191,7 @@ export function useWaveformViewport(context: ViewportContext) {
     const groups = active.independent
       ? [track.seriesList]
       : trackLayouts.value.filter((item) => item.hasVisibleSeries).map((item) => item.seriesList)
-    const xDomain = constrainZoomDomain(
+    const xDomain = constrainViewportZoom(
       [track.xScale.invert(left), track.xScale.invert(right)],
       baseXDomain,
       groups,
@@ -324,7 +273,16 @@ export function useWaveformViewport(context: ViewportContext) {
     activeOverlay.value = undefined
     event.preventDefault()
     if (completed.kind === 'pan') {
-      applyPan(completed, track)
+      const domain = applyPan(completed, track)
+      if (domain.some((value, index) => Math.abs(value - completed.xDomain[index]) > 1e-12)) {
+        emit('pan-end', {
+          start: domain[0],
+          end: domain[1],
+          ...(completed.independent
+            ? { trackIndex: track.index, seriesIds: track.seriesList.map((series) => series.id) }
+            : {}),
+        })
+      }
       void nextTick(configureZoom)
       return
     }

package/src/components/interaction/useWaveformZoom.ts

@@ -15,12 +15,9 @@ import { WHEEL_ZOOM_DEBOUNCE_MS, ZOOM_CONSTRAINTS } from '../core/constants'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
-import {
-  constrainZoomDomain,
-  resolveMinimumZoomSpan,
-  transformForDomain,
-  type ZoomSeriesGroup,
-} from './zoomConstraints'
+import { constrainViewportZoom } from './remoteViewport'
+import { normalizeIntegerZoomDomain } from './integerZoom'
+import { resolveMinimumZoomSpan, transformForDomain, type ZoomSeriesGroup } from './zoomConstraints'
 import {
   emitIndependentWheelZoomEnds,
   emitSharedWheelZoomEnd,
@@ -90,7 +87,8 @@ export function useWaveformZoom(context: ZoomContext) {
     const domain = event.transform
       .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
       .domain()
-    emit('zoom-intent', { start: domain[0], end: domain[1], gesture: 'wheel' })
+    const [start, end] = normalizeIntegerZoomDomain(domain as [number, number], props)
+    emit('zoom-intent', { start, end, gesture: 'wheel' })
     scheduleZoomCommit()
   }
   const handleIndependentZoom = (
@@ -108,8 +106,8 @@ export function useWaveformZoom(context: ZoomContext) {
         .rescaleX(scaleLinear(resolveInitialTrackDomain(track), [0, track.width]))
         .domain()
       emit('zoom-intent', {
-        start: domain[0],
-        end: domain[1],
+        start: normalizeIntegerZoomDomain(domain as [number, number], props)[0],
+        end: normalizeIntegerZoomDomain(domain as [number, number], props)[1],
         trackIndex,
         seriesIds: track.seriesList.map((series) => series.id),
         gesture: 'wheel',
@@ -131,7 +129,7 @@ export function useWaveformZoom(context: ZoomContext) {
       const domain = transform
         .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
         .domain()
-      emit('zoom-change', [domain[0], domain[1]])
+      emit('zoom-change', normalizeIntegerZoomDomain([domain[0], domain[1]], props))
     }
     if (!pendingIndependentZoomTransforms.size) return
     const nextTransforms = [...independentTransforms.value]
@@ -238,7 +236,11 @@ export function useWaveformZoom(context: ZoomContext) {
       number,
       number,
     ]
-    return transformForDomain(constrainZoomDomain(requested, domain, groups, props), domain, width)
+    return transformForDomain(
+      constrainViewportZoom(requested, domain, groups, props),
+      domain,
+      width,
+    )
   }
   const canZoomTrack = (track: TrackLayout): boolean => {
     const minimum = Number(props.minVisiblePoints)

package/src/components/interaction/viewportDomain.ts

@@ -4,7 +4,8 @@ import type { ZoomTransform } from 'd3'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
-import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
+import { transformForDomain } from './zoomConstraints'
+import { constrainViewportZoom } from './remoteViewport'
 
 interface ViewportDomainContext {
   props: ResolvedWaveformChartProps
@@ -21,6 +22,8 @@ interface ViewportDomainContext {
   configureZoom: () => void
 }
 
+export { clampViewportDomain } from './remoteViewport'
+
 export function createViewportDomainSetter(context: ViewportDomainContext) {
   return (domain: [number, number], trackIndex?: number) => {
     if (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) || domain[0] === domain[1])
@@ -37,7 +40,12 @@ export function createViewportDomainSetter(context: ViewportDomainContext) {
         const track = context.trackLayouts.value.find((item) => item.index === index)
         if (!track) return
         const boundary = context.resolveInitialTrackDomain(track)
-        const constrained = constrainZoomDomain(domain, boundary, [track.seriesList], context.props)
+        const constrained = constrainViewportZoom(
+          domain,
+          boundary,
+          [track.seriesList],
+          context.props,
+        )
         nextTransforms[index] = transformForDomain(constrained, boundary, track.width)
       })
       context.independentTransforms.value = nextTransforms
@@ -46,7 +54,7 @@ export function createViewportDomainSetter(context: ViewportDomainContext) {
       const groups = context.trackLayouts.value
         .filter((track) => track.hasVisibleSeries)
         .map((track) => track.seriesList)
-      const constrained = constrainZoomDomain(domain, boundary, groups, context.props)
+      const constrained = constrainViewportZoom(domain, boundary, groups, context.props)
       context.sharedTransform.value = transformForDomain(
         constrained,
         boundary,