feat(chart): refine viewport interaction and rendering

2026-08-08 10:43:39 +08:00
parent 7646bf4907
commit 9b42e3797b
21 changed files with 838 additions and 325 deletions
--- a/src/components/core/useWaveformChartController.ts
+++ b/src/components/core/useWaveformChartController.ts
@@ -18,7 +18,6 @@ import { useWaveformChartAnnotations } from '../annotation/useWaveformChartAnnot
 import { useWaveformHover } from '../interaction/useWaveformHover'
 import { useWaveformViewport } from '../interaction/useWaveformViewport'
 import { useWaveformZoom } from '../interaction/useWaveformZoom'
-import { ViewportInteractionStateMachine } from '../interaction/viewportInteractionState'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
 import { margin } from './constants'
 import { getPageSize } from './grid'
@@ -80,7 +79,6 @@ export function useWaveformChartController(
    { deep: true },
  )
  const selection = shallowRef<ViewportSelectionState | null>(null)
-  const viewportInteraction = shallowRef(markRaw(new ViewportInteractionStateMachine()))
  const spacePressed = ref(false)
  const pointerInsideChart = ref(false)
  let handleDataReferenceChange: () => void = () => undefined
@@ -195,7 +193,6 @@ export function useWaveformChartController(
    props,
    emit,
    selection,
-    viewportInteraction,
    spacePressed,
    trackLayouts,
    chartTracks,
--- a/src/components/interaction/WaveformTooltip.test.ts
+++ b/src/components/interaction/WaveformTooltip.test.ts
@@ -38,9 +38,48 @@ describe('WaveformTooltip', () => {
    const tooltip = mountTooltip(100, 200).get('.waveform-tooltip')

    expect(tooltip.attributes('style')).toContain('left: 8px')
+    expect(tooltip.attributes('style')).toContain('max-width: 184px')
    expect(tooltip.attributes('style')).not.toContain('right:')
  })

+  it('keeps short content content-sized while exposing the available width cap', () => {
+    const tooltip = mountTooltip(100).get('.waveform-tooltip')
+
+    expect(tooltip.attributes('style')).toContain('left: 112px')
+    expect(tooltip.attributes('style')).toContain('max-width: 280px')
+  })
+
+  it('keeps long series content in a wrapping content container', () => {
+    const longName = 'ENG8KJXAc-very-long-series-name-10001'
+    const pointWithErrors = { x: 1, y: 12, error: 1, upperError: 2 }
+    const wrapper = mount(WaveformTooltip, {
+      props: {
+        visible: true,
+        position: { x: 100, y: 100 },
+        timeUnit: 'ms',
+        hoveredPoint: pointWithErrors,
+        seriesPoints: [
+          {
+            trackIndex: 0,
+            name: longName,
+            color: '#f00',
+            unit: 'very-long-unit',
+            point: pointWithErrors,
+          },
+        ],
+        containerWidth: 400,
+        containerHeight: 300,
+      },
+    })
+
+    const tooltip = wrapper.get('.waveform-tooltip')
+    expect(tooltip.get('.waveform-tooltip__series-content').text()).toContain(longName)
+    expect(tooltip.get('.waveform-tooltip__series-content').classes()).toContain(
+      'waveform-tooltip__series-content',
+    )
+    expect(tooltip.attributes('style')).toContain('max-width: 280px')
+  })
+
  it('shows resolved asymmetric errors beside the hovered value', () => {
    const pointWithErrors = { x: 1, y: 12, error: 1, upperError: 2 }
    const wrapper = mount(WaveformTooltip, {
--- a/src/components/interaction/WaveformTooltip.vue
+++ b/src/components/interaction/WaveformTooltip.vue
@@ -33,24 +33,68 @@ const props = defineProps<Props>()

 const tooltipGap = 12
 const containerPadding = 8
-const tooltipMaxWidth = 238
+const tooltipPlacementWidth = 238
+const tooltipMaxWidth = 320
+const tooltipHorizontalPadding = 20
+const tooltipLineHeight = 20
+
+function estimateLineCount(text: string, width: number): number {
+  const contentWidth = Math.max(1, width - tooltipHorizontalPadding - 14)
+  const charactersPerLine = Math.max(1, Math.floor(contentWidth / 7.2))
+  return Math.max(1, Math.ceil([...text].length / charactersPerLine))
+}
+
+function formatSeriesText(seriesPoint: SeriesPoint): string {
+  const error = formatError(seriesPoint.point)
+  return `${seriesPoint.name ? `${seriesPoint.name}: ` : ''}${formatTooltipNumber(seriesPoint.point.y)}${
+    seriesPoint.unit ? ` ${seriesPoint.unit}` : ''
+  }${error ? ` ${error}` : ''}`
+}
+
+function estimateTooltipHeight(width: number, timeText: string): number {
+  const seriesLines = props.seriesPoints.reduce(
+    (total, seriesPoint) => total + estimateLineCount(formatSeriesText(seriesPoint), width),
+    0,
+  )
+  return 16 + tooltipLineHeight * (estimateLineCount(timeText, width) + seriesLines) + 5
+}

 const tooltipStyle = computed(() => {
  if (!props.visible || !props.hoveredPoint) return { display: 'none' }

-  const estimatedHeight = 44 + props.seriesPoints.length * 22
  const rightPlacement = props.position.x + tooltipGap
-  const leftPlacement = props.position.x - tooltipGap - tooltipMaxWidth
+  const leftPlacement = props.position.x - tooltipGap - tooltipPlacementWidth
+  const rightAvailableWidth = props.containerWidth - containerPadding - rightPlacement
+  const leftAvailableWidth = props.position.x - tooltipGap - containerPadding
+  const availableWidth = Math.max(
+    1,
+    Math.min(tooltipMaxWidth, props.containerWidth - containerPadding * 2),
+  )
  const horizontalStyle =
-    rightPlacement + tooltipMaxWidth <= props.containerWidth - containerPadding
-      ? { left: `${rightPlacement}px` }
+    rightPlacement + tooltipPlacementWidth <= props.containerWidth - containerPadding
+      ? {
+          left: `${rightPlacement}px`,
+          maxWidth: `${Math.min(tooltipMaxWidth, rightAvailableWidth)}px`,
+        }
      : leftPlacement >= containerPadding
-        ? { right: `${props.containerWidth - props.position.x + tooltipGap}px` }
-        : { left: `${containerPadding}px` }
+        ? {
+            right: `${props.containerWidth - props.position.x + tooltipGap}px`,
+            maxWidth: `${Math.min(tooltipMaxWidth, leftAvailableWidth)}px`,
+          }
+        : { left: `${containerPadding}px`, maxWidth: `${availableWidth}px` }
+
+  const maxWidth = Number.parseFloat(horizontalStyle.maxWidth)
+  const timeText = `${props.timeUnit}: ${formatTooltipTime(props.hoveredPoint.x, props.timeUnit)}`

  return {
    ...horizontalStyle,
-    top: `${Math.max(8, Math.min(props.position.y - 18, props.containerHeight - estimatedHeight - 8))}px`,
+    top: `${Math.max(
+      8,
+      Math.min(
+        props.position.y - 18,
+        props.containerHeight - estimateTooltipHeight(maxWidth, timeText) - 8,
+      ),
+    )}px`,
  }
 })

@@ -76,11 +120,13 @@ function formatError(point: WaveformPoint): string | null {
      class="waveform-tooltip__series waveform-chart__tooltip-series"
    >
      <i :style="{ backgroundColor: seriesPoint.color }" />
-      <strong v-if="seriesPoint.name">{{ seriesPoint.name }}:</strong>
-      <span class="waveform-tooltip__value">
-        {{ formatTooltipNumber(seriesPoint.point.y)
-        }}{{ seriesPoint.unit ? ` ${seriesPoint.unit}` : '' }}
-        <small v-if="formatError(seriesPoint.point)">{{ formatError(seriesPoint.point) }}</small>
+      <span class="waveform-tooltip__series-content">
+        <strong v-if="seriesPoint.name">{{ seriesPoint.name }}:</strong>
+        <span class="waveform-tooltip__value">
+          {{ formatTooltipNumber(seriesPoint.point.y)
+          }}{{ seriesPoint.unit ? ` ${seriesPoint.unit}` : '' }}
+          <small v-if="formatError(seriesPoint.point)">{{ formatError(seriesPoint.point) }}</small>
+        </span>
      </span>
    </span>
  </div>
@@ -93,8 +139,8 @@ function formatError(point: WaveformPoint): string | null {
  z-index: 2;
  display: grid;
  gap: 3px;
-  min-width: 180px;
-  max-width: 238px;
+  width: max-content;
+  max-width: min(320px, calc(100% - 16px));
  padding: 8px 10px;
  color: #333;
  font:
@@ -116,30 +162,34 @@ function formatError(point: WaveformPoint): string | null {

 .waveform-tooltip__series {
  display: grid;
-  grid-template-columns: 8px minmax(0, 1fr) auto;
+  grid-template-columns: 8px minmax(0, 1fr);
  gap: 6px;
-  align-items: center;
+  align-items: start;
 }

 .waveform-tooltip__series i {
+  flex: 0 0 auto;
  width: 8px;
  height: 8px;
+  margin-top: 4px;
  border-radius: 50%;
 }

+.waveform-tooltip__series-content {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
 .waveform-tooltip__series strong {
-  overflow: hidden;
  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }

 .waveform-tooltip__value {
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }

 .waveform-tooltip__series small {
  color: #667085;
-  white-space: nowrap;
 }
 </style>
--- a/src/components/interaction/pointerCapture.ts
+++ b/src/components/interaction/pointerCapture.ts
@@ -0,0 +1,10 @@
+export function tryReleasePointerCapture(
+  target: SVGRectElement | null | undefined,
+  pointerId: number,
+): void {
+  try {
+    target?.releasePointerCapture?.(pointerId)
+  } catch {
+    // The target may already be detached or have released the pointer.
+  }
+}
--- a/src/components/interaction/useWaveformViewport.ts
+++ b/src/components/interaction/useWaveformViewport.ts
@@ -1,6 +1,5 @@
 import { pointer, scaleLinear, 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'
@@ -10,13 +9,12 @@ import type {
  WaveformChartEmit,
 } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
-import type { ViewportInteractionStateMachine } from './viewportInteractionState'
-
+import { tryReleasePointerCapture } from './pointerCapture'
+import { transitionViewportInteraction } from './viewportInteractionState'
 interface ViewportContext {
  props: ResolvedWaveformChartProps
  emit: WaveformChartEmit
  selection: Ref<ViewportSelectionState | null>
-  viewportInteraction: ShallowRef<ViewportInteractionStateMachine>
  spacePressed: Ref<boolean>
  trackLayouts: ComputedRef<TrackLayout[]>
  chartTracks: ComputedRef<DisplayTrack[]>
@@ -39,13 +37,11 @@ interface ViewportContext {
  clearHover: () => void
  resolveTrackAtPointer: (pointerX: number, pointerY: number) => TrackLayout | undefined
 }
-
 export function useWaveformViewport(context: ViewportContext) {
  const {
    props,
    emit,
    selection,
-    viewportInteraction,
    spacePressed,
    trackLayouts,
    chartTracks,
@@ -69,8 +65,21 @@ export function useWaveformViewport(context: ViewportContext) {
    resolveTrackAtPointer,
  } = context
  const activeOverlay = shallowRef<SVGRectElement>()
-  const syncSelection = () => {
-    selection.value = viewportInteraction.value.state
+  const releasePointerCapture = (pointerId: number, event?: PointerEvent) => {
+    const overlay = activeOverlay.value
+    const eventTarget = event?.currentTarget as SVGRectElement | null
+    tryReleasePointerCapture(overlay, pointerId)
+    if (eventTarget && eventTarget !== overlay) tryReleasePointerCapture(eventTarget, pointerId)
+  }
+  const cleanupViewportDrag = (pointerId: number, event?: PointerEvent) => {
+    const active = selection.value
+    if (!active || active.pointerId !== pointerId) return
+    releasePointerCapture(pointerId, event)
+    selection.value = transitionViewportInteraction(selection.value, {
+      type: 'cancel',
+      pointerId,
+    }).state
+    activeOverlay.value = undefined
  }
  const selectionBox = computed(() => {
    const active = selection.value
@@ -150,19 +159,22 @@ export function useWaveformViewport(context: ViewportContext) {
    const [rawX, rawY] = pointer(event, overlay)
    const x = Math.max(0, Math.min(independent ? track.width : innerWidth.value, rawX))
    const y = Math.max(0, Math.min(independent ? track.height : innerHeight.value, rawY))
-    const started = viewportInteraction.value.begin({
-      trackIndex,
-      independent,
-      startX: x,
-      startY: y,
-      pointerId: event.pointerId,
-      kind: panRequested ? 'pan' : 'box',
-      xDomain: track.xScale.domain() as [number, number],
-      yDomains: currentYDomains(),
+    const started = transitionViewportInteraction(selection.value, {
+      type: 'begin',
+      gesture: {
+        trackIndex,
+        independent,
+        startX: x,
+        startY: y,
+        pointerId: event.pointerId,
+        kind: panRequested ? 'pan' : 'box',
+        xDomain: track.xScale.domain() as [number, number],
+        yDomains: currentYDomains(),
+      },
    })
-    if (!started) return
+    if (!started.accepted) return
+    selection.value = started.state
    activeOverlay.value = overlay
-    syncSelection()
    overlay.setPointerCapture?.(event.pointerId)
    clearHover()
    event.preventDefault()
@@ -233,8 +245,13 @@ export function useWaveformViewport(context: ViewportContext) {
      0,
      Math.min(active.independent ? track.height : innerHeight.value, rawY),
    )
-    const next = viewportInteraction.value.move(event.pointerId, { currentX, currentY })
-    if (!next) return
+    const transition = transitionViewportInteraction(selection.value, {
+      type: 'move',
+      pointerId: event.pointerId,
+      position: { currentX, currentY },
+    })
+    if (!transition.accepted || !transition.state) return
+    const next = transition.state
    selection.value = next
    if (next.kind === 'pan') applyPan(next, track)
    event.preventDefault()
@@ -242,11 +259,7 @@ export function useWaveformViewport(context: ViewportContext) {
  const cancelViewportDrag = (event?: PointerEvent) => {
    const active = selection.value
    if (!active || (event && event.pointerId !== active.pointerId)) return
-    activeOverlay.value?.releasePointerCapture?.(active.pointerId)
-    if (viewportInteraction.value.cancel(event?.pointerId)) {
-      activeOverlay.value = undefined
-      syncSelection()
-    }
+    cleanupViewportDrag(active.pointerId, event)
  }
  const applyBoxZoom = (active: ViewportSelectionState) => {
    const track = trackLayouts.value.find((item) => item.index === active.trackIndex)
@@ -314,9 +327,11 @@ export function useWaveformViewport(context: ViewportContext) {
    const active = selection.value
    if (!active || event.pointerId !== active.pointerId) return
    const track = trackLayouts.value.find((item) => item.index === active.trackIndex)
-    if (!track) return
    const overlay = activeOverlay.value
-    if (!overlay) return
+    if (!track || !overlay || !overlay.parentNode) {
+      cleanupViewportDrag(active.pointerId, event)
+      return
+    }
    const [rawX, rawY] = pointer(event, overlay)
    const currentX = Math.max(
      0,
@@ -326,11 +341,15 @@ export function useWaveformViewport(context: ViewportContext) {
      0,
      Math.min(active.independent ? track.height : innerHeight.value, rawY),
    )
-    const completed = viewportInteraction.value.finish(event.pointerId, { currentX, currentY })
+    const completed = transitionViewportInteraction(selection.value, {
+      type: 'finish',
+      pointerId: event.pointerId,
+      position: { currentX, currentY },
+    }).completed
    if (!completed) return
-    overlay.releasePointerCapture?.(completed.pointerId)
+    selection.value = null
+    releasePointerCapture(completed.pointerId, event)
    activeOverlay.value = undefined
-    syncSelection()
    event.preventDefault()
    if (completed.kind === 'pan') {
      applyPan(completed, track)
@@ -367,7 +386,6 @@ export function useWaveformViewport(context: ViewportContext) {
    resetViewport()
    emit('zoom-reset')
  }
-
  return {
    selectionBox,
    beginViewportDrag,
--- a/src/components/interaction/viewportInteractionState.test.ts
+++ b/src/components/interaction/viewportInteractionState.test.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest'

-import { ViewportInteractionStateMachine } from './viewportInteractionState'
+import {
+  reduceViewportInteraction,
+  transitionViewportInteraction,
+  type ViewportInteractionEvent,
+} from './viewportInteractionState'

 const gesture = {
  trackIndex: 2,
@@ -13,64 +17,85 @@ const gesture = {
  yDomains: { track: [-1, 1] as [number, number] },
 }

-describe('ViewportInteractionStateMachine', () => {
-  it('accepts one gesture and rejects a conflicting start', () => {
-    const machine = new ViewportInteractionStateMachine()
-
-    expect(machine.begin(gesture)).toBe(true)
-    expect(machine.begin({ ...gesture, pointerId: 8 })).toBe(false)
-    expect(machine.state).toMatchObject({ kind: 'box', pointerId: 7 })
-  })
-
-  it('rejects moves and completion from a different pointer', () => {
-    const machine = new ViewportInteractionStateMachine()
-    machine.begin(gesture)
-
-    expect(machine.move(8, { currentX: 30, currentY: 40 })).toBeNull()
-    expect(machine.finish(8, { currentX: 30, currentY: 40 })).toBeNull()
-    expect(machine.state?.currentX).toBe(10)
-  })
-
-  it('updates a valid pointer, completes it, and returns to idle', () => {
-    const machine = new ViewportInteractionStateMachine()
-    machine.begin({ ...gesture, kind: 'pan' })
-
-    expect(machine.move(7, { currentX: 30, currentY: 40 })).toMatchObject({
-      kind: 'pan',
-      currentX: 30,
-      currentY: 40,
+describe('viewport interaction reducer', () => {
+  it('accepts one begin and rejects a conflicting begin', () => {
+    const started = transitionViewportInteraction(null, { type: 'begin', gesture })
+    const conflicting = transitionViewportInteraction(started.state, {
+      type: 'begin',
+      gesture: { ...gesture, pointerId: 8 },
    })
-    expect(machine.finish(7, { currentX: 50, currentY: 60 })).toMatchObject({
-      kind: 'pan',
-      currentX: 50,
-      currentY: 60,
+
+    expect(started.accepted).toBe(true)
+    expect(started.state).toMatchObject({ kind: 'box', pointerId: 7 })
+    expect(conflicting.accepted).toBe(false)
+    expect(conflicting.state).toMatchObject({ kind: 'box', pointerId: 7 })
+  })
+
+  it('rejects move and finish from a different pointer without changing state', () => {
+    const state = reduceViewportInteraction(null, { type: 'begin', gesture })
+    const move = transitionViewportInteraction(state, {
+      type: 'move',
+      pointerId: 8,
+      position: { currentX: 30, currentY: 40 },
    })
-    expect(machine.state).toBeNull()
+    const finish = transitionViewportInteraction(move.state, {
+      type: 'finish',
+      pointerId: 8,
+      position: { currentX: 30, currentY: 40 },
+    })
+
+    expect(move.accepted).toBe(false)
+    expect(finish.accepted).toBe(false)
+    expect(finish.state).toMatchObject({ currentX: 10, currentY: 20 })
  })

-  it('only cancels the owning pointer and supports explicit reset', () => {
-    const machine = new ViewportInteractionStateMachine()
-    machine.begin(gesture)
+  it('updates a valid pointer and returns the completed snapshot on finish', () => {
+    const state = reduceViewportInteraction(null, {
+      type: 'begin',
+      gesture: { ...gesture, kind: 'pan' },
+    })
+    const moved = transitionViewportInteraction(state, {
+      type: 'move',
+      pointerId: 7,
+      position: { currentX: 30, currentY: 40 },
+    })
+    const finished = transitionViewportInteraction(moved.state, {
+      type: 'finish',
+      pointerId: 7,
+      position: { currentX: 50, currentY: 60 },
+    })

-    expect(machine.cancel(8)).toBe(false)
-    expect(machine.state).not.toBeNull()
-    expect(machine.cancel(7)).toBe(true)
-    expect(machine.state).toBeNull()
-
-    machine.begin(gesture)
-    machine.reset()
-    expect(machine.state).toBeNull()
+    expect(moved.state).toMatchObject({ kind: 'pan', currentX: 30, currentY: 40 })
+    expect(finished.completed).toMatchObject({ kind: 'pan', currentX: 50, currentY: 60 })
+    expect(finished.state).toBeNull()
  })

-  it('returns defensive copies from its state getter', () => {
-    const machine = new ViewportInteractionStateMachine()
-    machine.begin(gesture)
-    const snapshot = machine.state!
-    snapshot.currentX = 99
-    snapshot.xDomain[0] = 50
-    snapshot.yDomains.track![0] = 50
+  it('cancels only the owning pointer and supports cancel/reset events', () => {
+    const state = reduceViewportInteraction(null, { type: 'begin', gesture })
+    const rejectedCancel = transitionViewportInteraction(state, { type: 'cancel', pointerId: 8 })
+    const cancelled = transitionViewportInteraction(rejectedCancel.state, {
+      type: 'cancel',
+      pointerId: 7,
+    })
+    const restarted = reduceViewportInteraction(null, { type: 'begin', gesture })
+    const reset = transitionViewportInteraction(restarted, { type: 'reset' })

-    expect(machine.state).toMatchObject({ currentX: 10, xDomain: [0, 100] })
-    expect(machine.state?.yDomains.track).toEqual([-1, 1])
+    expect(rejectedCancel.accepted).toBe(false)
+    expect(rejectedCancel.state).not.toBeNull()
+    expect(cancelled.accepted).toBe(true)
+    expect(cancelled.state).toBeNull()
+    expect(reset.accepted).toBe(true)
+    expect(reset.state).toBeNull()
+  })
+
+  it('keeps events discriminated and does not mutate the begin input', () => {
+    const event: ViewportInteractionEvent = { type: 'begin', gesture }
+    const state = reduceViewportInteraction(null, event)
+
+    expect(state).not.toBeNull()
+    expect(state?.xDomain).toEqual([0, 100])
+    expect(state?.yDomains.track).toEqual([-1, 1])
+    expect(event.gesture.xDomain).toEqual([0, 100])
+    expect(event.gesture.yDomains.track).toEqual([-1, 1])
  })
 })
--- a/src/components/interaction/viewportInteractionState.ts
+++ b/src/components/interaction/viewportInteractionState.ts
@@ -16,65 +16,74 @@ export interface ViewportGesturePosition {
  currentY: number
 }

-function cloneState(state: ViewportSelectionState | null): ViewportSelectionState | null {
-  if (!state) return null
+export type ViewportInteractionEvent =
+  | { type: 'begin'; gesture: ViewportGestureStart }
+  | { type: 'move'; pointerId: number; position: ViewportGesturePosition }
+  | { type: 'finish'; pointerId: number; position: ViewportGesturePosition }
+  | { type: 'cancel'; pointerId?: number }
+  | { type: 'reset' }
+
+export interface ViewportInteractionTransition {
+  state: ViewportSelectionState | null
+  accepted: boolean
+  completed: ViewportSelectionState | null
+}
+
+function createSelectionState(input: ViewportGestureStart): ViewportSelectionState {
  return {
-    ...state,
-    xDomain: [...state.xDomain],
+    ...input,
+    currentX: input.startX,
+    currentY: input.startY,
+    xDomain: [...input.xDomain],
    yDomains: Object.fromEntries(
-      Object.entries(state.yDomains).map(([key, domain]) => [key, [...domain] as [number, number]]),
+      Object.entries(input.yDomains).map(([key, domain]) => [key, [...domain] as [number, number]]),
    ),
  }
 }

-/** Owns the legal lifecycle of one active viewport pointer gesture. */
-export class ViewportInteractionStateMachine {
-  private current: ViewportSelectionState | null = null
+function withPosition(
+  state: ViewportSelectionState,
+  position: ViewportGesturePosition,
+): ViewportSelectionState {
+  return { ...state, ...position }
+}

-  get state(): ViewportSelectionState | null {
-    return cloneState(this.current)
-  }
+function rejectedTransition(state: ViewportSelectionState | null): ViewportInteractionTransition {
+  return { state, accepted: false, completed: null }
+}

-  begin(input: ViewportGestureStart): boolean {
-    if (this.current) return false
-    this.current = {
-      ...input,
-      currentX: input.startX,
-      currentY: input.startY,
-      xDomain: [...input.xDomain],
-      yDomains: Object.fromEntries(
-        Object.entries(input.yDomains).map(([key, domain]) => [
-          key,
-          [...domain] as [number, number],
-        ]),
-      ),
-    }
-    return true
-  }
-
-  move(pointerId: number, position: ViewportGesturePosition): ViewportSelectionState | null {
-    if (!this.current || this.current.pointerId !== pointerId) return null
-    this.current = { ...this.current, ...position }
-    return this.state
-  }
-
-  finish(pointerId: number, position: ViewportGesturePosition): ViewportSelectionState | null {
-    if (!this.current || this.current.pointerId !== pointerId) return null
-    this.current = { ...this.current, ...position }
-    const completed = this.state
-    this.current = null
-    return completed
-  }
-
-  cancel(pointerId?: number): boolean {
-    if (!this.current || (pointerId !== undefined && this.current.pointerId !== pointerId)) {
-      return false
-    }
-    this.current = null
-    return true
-  }
-
-  reset(): void {
-    this.current = null
+export function transitionViewportInteraction(
+  state: ViewportSelectionState | null,
+  event: ViewportInteractionEvent,
+): ViewportInteractionTransition {
+  switch (event.type) {
+    case 'begin':
+      return state
+        ? rejectedTransition(state)
+        : { state: createSelectionState(event.gesture), accepted: true, completed: null }
+    case 'move':
+      if (!state || state.pointerId !== event.pointerId) return rejectedTransition(state)
+      return { state: withPosition(state, event.position), accepted: true, completed: null }
+    case 'finish':
+      if (!state || state.pointerId !== event.pointerId) return rejectedTransition(state)
+      return {
+        state: null,
+        accepted: true,
+        completed: withPosition(state, event.position),
+      }
+    case 'cancel':
+      if (!state || (event.pointerId !== undefined && state.pointerId !== event.pointerId)) {
+        return rejectedTransition(state)
+      }
+      return { state: null, accepted: true, completed: null }
+    case 'reset':
+      return { state: null, accepted: true, completed: null }
  }
 }
+
+export function reduceViewportInteraction(
+  state: ViewportSelectionState | null,
+  event: ViewportInteractionEvent,
+): ViewportSelectionState | null {
+  return transitionViewportInteraction(state, event).state
+}
--- a/src/components/waveformChartCases/viewportLifecycle.test.ts
+++ b/src/components/waveformChartCases/viewportLifecycle.test.ts
@@ -0,0 +1,132 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+import WaveformChartView from '../WaveformChartView.vue'
+
+describe('WaveformChart viewport lifecycle', () => {
+  it('cleans an active shared gesture when its track is removed', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), {
+      displayMode: 'separated',
+      grid: { rowCount: 2, columnCount: 1 },
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    const releasePointerCapture = vi.fn()
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    Object.defineProperty(overlay.element, 'setPointerCapture', { value: vi.fn() })
+    Object.defineProperty(overlay.element, 'releasePointerCapture', {
+      value: releasePointerCapture,
+    })
+
+    const dispatchPointer = (type: string, pointerId: number, clientY: number) => {
+      const event = new MouseEvent(type, {
+        button: 0,
+        clientX: width / 2,
+        clientY,
+        bubbles: true,
+      })
+      Object.defineProperty(event, 'pointerId', { value: pointerId })
+      overlay.element.dispatchEvent(event)
+    }
+
+    dispatchPointer('pointerdown', 41, height * 0.75)
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+
+    await wrapper.setProps({ data: gridSeries(1) })
+    await flushPromises()
+    dispatchPointer('pointerup', 41, height * 0.75)
+    await flushPromises()
+
+    expect(releasePointerCapture).toHaveBeenCalledWith(41)
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
+
+    dispatchPointer('pointerdown', 42, height / 2)
+    dispatchPointer('pointermove', 42, height / 2 + 20)
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+  })
+
+  it('cleans an active gesture when its overlay leaves the DOM', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+        ],
+      },
+      { displayMode: 'separated' },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    const releasePointerCapture = vi.fn(() => {
+      throw new DOMException('Pointer capture is no longer available', 'NotFoundError')
+    })
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    Object.defineProperty(overlay.element, 'setPointerCapture', { value: vi.fn() })
+    Object.defineProperty(overlay.element, 'releasePointerCapture', {
+      value: releasePointerCapture,
+    })
+
+    const down = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(down, 'pointerId', { value: 43 })
+    overlay.element.dispatchEvent(down)
+    await wrapper.setProps({ hiddenSeriesIds: ['series-0'] })
+    await flushPromises()
+
+    expect(wrapper.find('.waveform-chart__overlay--shared').exists()).toBe(false)
+    const view = wrapper.findComponent(WaveformChartView)
+    const finishViewportDrag = (
+      view.vm as unknown as { finishViewportDrag: (event: PointerEvent) => void }
+    ).finishViewportDrag
+    const up = new MouseEvent('pointerup', {
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(up, 'pointerId', { value: 43 })
+    finishViewportDrag(up as unknown as PointerEvent)
+    await flushPromises()
+
+    expect(releasePointerCapture).toHaveBeenCalledWith(43)
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
+
+    await wrapper.setProps({ hiddenSeriesIds: [] })
+    await flushPromises()
+    const nextOverlay = wrapper.get('.waveform-chart__overlay--shared')
+    Object.defineProperty(nextOverlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    const nextDown = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(nextDown, 'pointerId', { value: 44 })
+    nextOverlay.element.dispatchEvent(nextDown)
+    const nextMove = new MouseEvent('pointermove', {
+      clientX: width * 0.75,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(nextMove, 'pointerId', { value: 44 })
+    nextOverlay.element.dispatchEvent(nextMove)
+    await flushPromises()
+
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+  })
+})