waveform-analysis 0.1.70 → 0.1.72

package/src/components/core/yAxisLayoutMetrics.ts

@@ -1,7 +1,6 @@
 import type { WaveformOverlayMode } from '../data/types'
 import {
   Y_AXIS_CHARACTER_WIDTH,
-  Y_AXIS_LABEL_BAND_WIDTH,
   Y_AXIS_LABEL_GAP,
   Y_AXIS_OUTER_PADDING,
   Y_AXIS_TICK_PADDING,
@@ -9,6 +8,8 @@ import {
 import { axisTextMetrics, resolveRenderedYAxisSeriesGroups } from './layout'
 import type { DisplayTrack } from './types'
 import type { WaveformYDomain } from './yDomain'
+import type { YAxisPaddingOptions } from './yAxisPadding'
+import { resolveYAxisLabelBandWidth } from './yAxisLabelStyle'
 
 export interface YAxisLayoutMetrics {
   tickClearance: number
@@ -40,10 +41,13 @@ export function resolveYAxisLayoutMetrics(
   nice: boolean,
   tickCount: number,
   compact: boolean,
-  upperPaddingRatio = 0,
+  padding?: YAxisPaddingOptions | number,
   showUnits = true,
   measureTextWidth?: (text: string) => number,
 ): YAxisLayoutMetrics {
+  const labelBandWidth = resolveYAxisLabelBandWidth(
+    typeof padding === 'object' ? padding.labelTextStyle : undefined,
+  )
   const axisText = chartTracks
     .filter((track) => track.series.length > 0)
     .flatMap((track) =>
@@ -53,7 +57,7 @@ export function resolveYAxisLayoutMetrics(
         yDomain,
         yDomains,
         viewportYDomains,
-        upperPaddingRatio,
+        padding,
       ),
     )
     .map(
@@ -66,6 +70,7 @@ export function resolveYAxisLayoutMetrics(
           tickCount,
           compact,
           measureTextWidth,
+          group.maximumTick,
         ).tickTextWidth,
     )
   const tickTextWidth = Math.max(Y_AXIS_CHARACTER_WIDTH, ...axisText)
@@ -74,13 +79,9 @@ export function resolveYAxisLayoutMetrics(
     Y_AXIS_TICK_PADDING +
     tickTextWidth +
     Y_AXIS_LABEL_GAP +
-    Y_AXIS_LABEL_BAND_WIDTH / 2
+    labelBandWidth / 2
   )
   const fullClearance =
-    tickTextWidth +
-    Y_AXIS_TICK_PADDING +
-    Y_AXIS_LABEL_GAP +
-    Y_AXIS_LABEL_BAND_WIDTH +
-    Y_AXIS_OUTER_PADDING
+    tickTextWidth + Y_AXIS_TICK_PADDING + Y_AXIS_LABEL_GAP + labelBandWidth + Y_AXIS_OUTER_PADDING
   return { tickClearance, fullClearance, labelCenterX }
 }

package/src/components/core/yAxisPadding.ts

@@ -0,0 +1,45 @@
+import type { WaveformAxesOptions } from '../../types'
+import type { YAxisSeriesGroup } from './layout'
+
+export type YAxisPaddingOptions = WaveformAxesOptions['y']
+
+export function paddingRatio(enabled?: boolean, ratio?: number): number {
+  if (enabled === false) return 0
+  const value = ratio ?? (enabled === true ? 0.1 : 0)
+  return Number.isFinite(value) && value > 0 ? value : 0
+}
+
+export function applyYAxisPadding(
+  group: YAxisSeriesGroup,
+  viewport: [number, number] | undefined,
+  options: YAxisPaddingOptions | number,
+): YAxisSeriesGroup {
+  if (group.fixed) return group
+  const config = typeof options === 'number' ? { upperPaddingRatio: options } : options
+  const upper = paddingRatio(config?.upperPaddingEnabled, config?.upperPaddingRatio)
+  const lower = paddingRatio(config?.lowerPaddingEnabled, config?.lowerPaddingRatio)
+  const maxima = group.seriesList.flatMap((series) =>
+    Number.isFinite(series.rawYMaximum) ? [series.rawYMaximum!] : [],
+  )
+  const maximumTick = upper > 0 && maxima.length ? Math.max(...maxima) : undefined
+  const [a, b] = group.domain
+  const span = b - a
+  const min = lower > 0 ? a - span * lower : a
+  const max = upper > 0 ? b + span * upper : b
+  return {
+    ...group,
+    maximumTick,
+    domain: viewport ?? [Number.isFinite(min) ? min : a, Number.isFinite(max) ? max : b],
+  }
+}
+
+export function withMaximumTick(values: number[], maximum?: number): number[] {
+  if (maximum === undefined || !Number.isFinite(maximum)) return values
+  return [...values.filter((value) => !sameTick(value, maximum)), maximum].sort((a, b) => a - b)
+}
+
+export function sameTick(a: number, b: number): boolean {
+  return (
+    Math.abs(a - b) <= Number.EPSILON * 8 * Math.max(Math.abs(a), Math.abs(b), Number.MIN_VALUE)
+  )
+}

package/src/components/core/yAxisTitleLayout.ts

@@ -1,23 +1,21 @@
 import { formatYAxisTickLayoutLabel } from './layout'
 import type { TrackLayout, WaveformYAxisLayout } from './types'
-import {
-  Y_AXIS_CHARACTER_WIDTH,
-  Y_AXIS_LABEL_BAND_WIDTH,
-  Y_AXIS_TICK_PADDING,
-} from './yAxisConstants'
+import type { WaveformYAxisLabelTextStyle } from '../../types'
+import { resolveYAxisLabelBandWidth, resolveYAxisLabelFontSize } from './yAxisLabelStyle'
+import { Y_AXIS_CHARACTER_WIDTH, Y_AXIS_TICK_PADDING } from './yAxisConstants'
 
-// Match the 12px channel names and 11px ticks in WaveformTrack.css.
-const TITLE_FONT_SIZE = 12
+// Match the 11px ticks in WaveformTrack.css.
 const TICK_FONT_SIZE = 11
 const TEXT_GAP = 2
 
 interface TitleLayoutOptions {
+  labelTextStyle?: WaveformYAxisLabelTextStyle
   showUnits?: boolean
   compact?: boolean
   measureTextWidth?: (text: string) => number
 }
 
-function estimateTitleWidth(title: string): number {
+function estimateTitleWidth(title: string, fontSize: number): 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)
@@ -27,7 +25,7 @@ function estimateTitleWidth(title: string): number {
         : /[ilI1., :;|'!]/u.test(character)
           ? 0.4
           : 0.65
-    return width + em * TITLE_FONT_SIZE
+    return width + em * fontSize
   }, 0)
 }
 
@@ -41,7 +39,8 @@ function titleDistance(
 ): number {
   const series = axis.seriesList[0]
   const title = series?.name.trim() || yLabel || ''
-  const halfTitleHeight = estimateTitleWidth(title) / 2
+  const halfTitleHeight =
+    estimateTitleWidth(title, resolveYAxisLabelFontSize(options.labelTextStyle)) / 2
   const titleTop = track.height / 2 - halfTitleHeight - TEXT_GAP
   const titleBottom = track.height / 2 + halfTitleHeight + TEXT_GAP
   const lowestTick = Math.min(...axis.tickValues)
@@ -63,11 +62,11 @@ function titleDistance(
     )
     return [options.measureTextWidth?.(text) ?? text.length * Y_AXIS_CHARACTER_WIDTH]
   })
-  // The 20px title band leaves 4px beside a 12px glyph.
+  // The title band leaves 4px beside each glyph.
   return (
     Math.max(Y_AXIS_CHARACTER_WIDTH, ...tickWidths) +
     Y_AXIS_TICK_PADDING +
-    Y_AXIS_LABEL_BAND_WIDTH / 2
+    resolveYAxisLabelBandWidth(options.labelTextStyle) / 2
   )
 }
 

package/src/components/interaction/useWaveformViewport.ts

@@ -13,6 +13,7 @@ import { createViewportPan } from './viewportPan'
 import { transformForDomain } from './zoomConstraints'
 import { emitBoxZoomIntent } from './zoomEventPayload'
 export interface ViewportContext {
+  clearBoundaries?: (trackIndex?: number) => void
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
   selection: Ref<ViewportSelectionState | null>
@@ -104,8 +105,15 @@ export function useWaveformViewport(context: ViewportContext) {
     )
   const beginViewportDrag = (event: PointerEvent, trackIndex: number, independent: boolean) => {
     if (isPresentationMode.value) return
-    const panRequested = props.pannable && spacePressed.value
-    if ((!props.zoomable && !panRequested) || !isZoomMode.value || event.button !== 0) return
+    const panRequested =
+      props.pannable &&
+      (props.interactionMode === 'pan' || (isZoomMode.value && spacePressed.value))
+    if (
+      (!props.zoomable && !panRequested) ||
+      (!isZoomMode.value && !panRequested) ||
+      event.button !== 0
+    )
+      return
     const overlay = event.currentTarget as SVGRectElement
     const track = trackLayouts.value.find((item) => item.index === trackIndex)
     if (!track) return
@@ -291,6 +299,7 @@ export function useWaveformViewport(context: ViewportContext) {
     }
   }
   const resetViewport = (trackIndex?: number) => {
+    context.clearBoundaries?.(trackIndex)
     cancelPendingZoom()
     cancelViewportDrag()
     if (props.displayMode === 'independent' && trackIndex !== undefined) {

package/src/components/rendering/WaveformTrack.css

@@ -4,8 +4,7 @@
 }
 
 .waveform-track__y-axis-label-bg {
-  fill: white;
-  opacity: 0.9;
+  fill: transparent;
   pointer-events: none;
 }
 

package/src/components/rendering/WaveformTrack.vue

@@ -20,15 +20,14 @@ interface Props {
   interactionMode?: WaveformInteractionMode
   frameNumber?: string | number
   frameStyle?: WaveformFrameStyle
+  framePath?: string
   axes?: WaveformAxesOptions
   timeUnit: 's' | 'ms'
   yLabel?: string
   showAxisUnits?: boolean
   showLabelUnits?: boolean
   hideYAxisTitles?: boolean
-  containYAxisEndpoints?: boolean
   containFrameStroke?: boolean
-  omitFrameTop?: boolean
   cleanView?: boolean
   zeroLine?: Required<WaveformZeroLineOptions>
 }
@@ -77,12 +76,6 @@ const resolvedFrameStyle = computed(() => {
 const frameInset = computed(() =>
   props.containFrameStroke ? resolvedFrameStyle.value.borderWidth / 2 : 0,
 )
-const openFramePath = computed(() => {
-  const inset = frameInset.value
-  const right = Math.max(inset, (props.track.width ?? props.innerWidth) - inset)
-  const bottom = Math.max(inset, props.track.height - inset)
-  return `M ${inset} ${inset} V ${bottom} H ${right} V ${inset}`
-})
 </script>
 
 <template>
@@ -106,6 +99,7 @@ const openFramePath = computed(() => {
       :clean-view="cleanView"
       :frame-number="frameNumber"
       :frame-style="resolvedFrameStyle"
+      show-empty-frame
     />
     <WaveformTrackAxes
       :track="track"
@@ -117,14 +111,12 @@ const openFramePath = computed(() => {
       :show-units="showAxisUnits"
       :show-label-units="showLabelUnits"
       :hide-y-axis-titles="hideYAxisTitles"
-      :contain-y-axis-endpoints="containYAxisEndpoints || displayMode === 'compact'"
     />
 
     <component
-      :is="omitFrameTop ? 'path' : 'rect'"
-      v-if="!track.isEmpty"
+      :is="framePath ? 'path' : 'rect'"
       class="waveform-track__plot-frame waveform-chart__plot-frame"
-      :d="omitFrameTop ? openFramePath : undefined"
+      :d="framePath"
       :x="containFrameStroke ? frameInset : undefined"
       :y="containFrameStroke ? frameInset : undefined"
       :width="Math.max(0, (track.width ?? innerWidth) - frameInset * 2)"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { axisBottom, axisLeft, axisRight, select } from 'd3'
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 import type { WaveformAxesOptions } from '../../types'
 import { formatXAxisLabel } from '../../utils'
 import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
-import { Y_AXIS_LABEL_BAND_WIDTH } from '../core/yAxisConstants'
+import { updateMaximumTickVisibility } from './yAxisTickVisibility'
+import { sameTick } from '../core/yAxisPadding'
+import { resolveYAxisLabelBandWidth, resolveYAxisLabelFontSize } from '../core/yAxisLabelStyle'
 import { formatChannelLabel } from './channelLabel'
 
 interface Props {
@@ -19,10 +21,19 @@ interface Props {
   showUnits?: boolean
   showLabelUnits?: boolean
   hideYAxisTitles?: boolean
-  containYAxisEndpoints?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), { showUnits: true })
+const labelBandWidth = computed(() => resolveYAxisLabelBandWidth(props.axes?.y?.labelTextStyle))
+const labelTextStyle = computed(() => {
+  const style = props.axes?.y?.labelTextStyle
+  return {
+    fontSize: `${resolveYAxisLabelFontSize(style)}px`,
+    fontWeight: style?.fontWeight ?? 600,
+    fontFamily: style?.fontFamily,
+    fontStyle: style?.fontStyle ?? 'normal',
+  }
+})
 const xAxisElement = ref<SVGGElement>()
 const yAxisElements = ref<SVGGElement[]>([])
 
@@ -62,24 +73,24 @@ function renderAxes() {
 
     const selection = select(element)
     selection.call(yAxis)
-    const lowestTick = Math.min(...axis.tickValues)
-    const highestTick = props.containYAxisEndpoints ? Math.max(...axis.tickValues) : undefined
     selection
       .selectAll<SVGTextElement, number>('.tick text')
       .attr('y', null)
-      .attr('dy', (value) => (value === lowestTick || value === highestTick ? '0' : '0.32em'))
-      .attr('dominant-baseline', (value) =>
-        value === lowestTick
-          ? 'text-after-edge'
-          : value === highestTick
-            ? 'text-before-edge'
-            : null,
+      .attr('dy', '0')
+      .attr('dominant-baseline', 'central')
+    selection
+      .selectAll<SVGGElement, number>('.tick')
+      .attr('data-maximum-tick', (value) =>
+        axis.maximumTick !== undefined && sameTick(value, axis.maximumTick) ? 'true' : null,
       )
+      .attr('data-tick-value', (value) => value)
+      .attr('data-tick-y', (value) => axis.scale(value))
     selection
       .selectAll('path.domain')
       .attr('display', props.axes?.y?.lineVisible === false ? 'none' : null)
   })
 
+  scheduleVisibility()
   if (!xAxisElement.value) return
   const selection = select(xAxisElement.value)
   selection.call(
@@ -103,7 +114,24 @@ function renderAxes() {
     .attr('display', props.axes?.x?.lineVisible === false ? 'none' : null)
 }
 
+let disposed = false
+function scheduleVisibility() {
+  if (disposed) return
+  const apply = () => {
+    const svg = yAxisElements.value[0]?.ownerSVGElement
+    if (svg) updateMaximumTickVisibility(svg)
+  }
+  apply()
+}
+onBeforeUnmount(() => {
+  disposed = true
+  document.fonts?.removeEventListener?.('loadingdone', scheduleVisibility)
+})
 onMounted(async () => {
+  document.fonts?.addEventListener?.('loadingdone', scheduleVisibility)
+  void document.fonts?.ready.then(() => {
+    if (!disposed) scheduleVisibility()
+  })
   await nextTick()
   renderAxes()
 })
@@ -116,7 +144,6 @@ watch(
     () => props.track.yAxisTickValues,
     () => props.timeUnit,
     () => props.showUnits,
-    () => props.containYAxisEndpoints,
     () => props.axes?.x?.labelFormatter,
     () => props.axes?.x?.lineVisible,
     () => props.axes?.y?.lineVisible,
@@ -191,15 +218,16 @@ watch(
   >
     <rect
       class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
-      :x="track.yAxes[0].labelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
+      :x="track.yAxes[0].labelX - labelBandWidth / 2"
       :y="track.height / 2 - 40"
-      :width="Y_AXIS_LABEL_BAND_WIDTH"
+      :width="labelBandWidth"
       height="80"
       rx="2"
     />
     <text
       class="waveform-track__y-axis-label waveform-chart__y-axis-label"
-      :fill="track.series?.color"
+      :fill="axes?.y?.labelTextStyle?.color || track.series?.color"
+      :style="labelTextStyle"
       :transform="`translate(${track.yAxes[0].labelX}, ${track.height / 2}) rotate(-90)`"
       text-anchor="middle"
       dominant-baseline="central"
@@ -218,15 +246,16 @@ watch(
   >
     <rect
       class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
-      :x="axis.labelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
+      :x="axis.labelX - labelBandWidth / 2"
       :y="track.height / 2 - 40"
-      :width="Y_AXIS_LABEL_BAND_WIDTH"
+      :width="labelBandWidth"
       height="80"
       rx="2"
     />
     <text
       class="waveform-track__y-axis-label waveform-chart__y-axis-label"
-      :fill="axis.seriesList[0].color"
+      :fill="axes?.y?.labelTextStyle?.color || axis.seriesList[0].color"
+      :style="labelTextStyle"
       :transform="`translate(${axis.labelX}, ${track.height / 2}) rotate(-90)`"
       text-anchor="middle"
       dominant-baseline="central"

package/src/components/rendering/WaveformTrackBackdrop.vue

@@ -6,6 +6,7 @@ interface Props {
   clipPathId: string
   innerWidth: number
   cleanView: boolean
+  showEmptyFrame?: boolean
   frameNumber?: string | number
   frameStyle: {
     backgroundColor: string
@@ -17,7 +18,7 @@ defineProps<Props>()
 
 <template>
   <rect
-    v-if="!track.isEmpty && !cleanView"
+    v-if="(!track.isEmpty || showEmptyFrame) && !cleanView"
     class="waveform-track__plot-background waveform-chart__plot-background"
     :width="track.width ?? innerWidth"
     :height="track.height"
@@ -26,7 +27,7 @@ defineProps<Props>()
   />
 
   <g
-    v-if="!track.isEmpty && !cleanView"
+    v-if="(!track.isEmpty || showEmptyFrame) && !cleanView"
     :clip-path="`url(#${clipPathId}-${track.index})`"
     aria-hidden="true"
   >
@@ -89,7 +90,11 @@ defineProps<Props>()
   </g>
 
   <text
-    v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined && !cleanView"
+    v-if="
+      (track.hasVisibleSeries || (track.isEmpty && showEmptyFrame)) &&
+      frameNumber !== undefined &&
+      !cleanView
+    "
     class="waveform-track__watermark waveform-chart__watermark"
     :x="(track.width ?? innerWidth) / 2"
     :y="track.height / 2"

package/src/components/rendering/compactFrame.ts

@@ -0,0 +1,31 @@
+import type { TrackLayout } from '../core/types'
+
+type Frame = Pick<TrackLayout, 'left' | 'top' | 'width' | 'height' | 'isEmpty'>
+
+/** Keep the lower frame's top edge as the single owner of a shared boundary. */
+export function compactFramePath(track: Frame, tracks: Frame[], inset = 0): string | undefined {
+  let uncovered: [number, number][] = [[0, track.width]]
+  for (const below of tracks) {
+    if (below === track) continue
+    if (Math.abs(track.top + track.height - below.top) > 1e-6) continue
+    const start = Math.max(0, below.left - track.left)
+    const end = Math.min(track.width, below.left + below.width - track.left)
+    if (end <= start) continue
+    uncovered = uncovered.flatMap(([left, right]): [number, number][] => {
+      if (end <= left || start >= right) return [[left, right]]
+      const parts: [number, number][] = []
+      if (left < start) parts.push([left, start])
+      if (right > end) parts.push([end, right])
+      return parts
+    })
+  }
+  if (uncovered.length === 1 && uncovered[0][0] === 0 && uncovered[0][1] === track.width)
+    return undefined
+  inset = Number.isFinite(inset) ? Math.max(0, inset) : 0
+  const rightEdge = Math.max(inset, track.width - inset)
+  const bottomEdge = Math.max(inset, track.height - inset)
+  const bottom = uncovered
+    .map(([left, right]) => `M${Math.max(inset, left)},${bottomEdge}H${Math.min(rightEdge, right)}`)
+    .join('')
+  return `M${inset},${bottomEdge}V${inset}H${rightEdge}V${bottomEdge}${bottom}`
+}

package/src/components/rendering/yAxisTickVisibility.ts

@@ -0,0 +1,95 @@
+import { sameTick } from '../core/yAxisPadding'
+
+interface Box {
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+function textBox(text: SVGTextElement): Box {
+  const rect = text.getBoundingClientRect()
+  if (rect.width && rect.height) return rect
+  const height = Number.parseFloat(getComputedStyle(text).fontSize) || 11
+  const width = (text.textContent?.length ?? 0) * height * 0.65
+  let x = Number(text.getAttribute('x')) || 0
+  let y = Number(text.getAttribute('y')) || 0
+  for (let parent: Element | null = text.parentElement; parent; parent = parent.parentElement) {
+    const match = parent
+      .getAttribute('transform')
+      ?.match(/translate\(([-\d.e+]+)[ ,]+([-\d.e+]+)\)/)
+    if (match) {
+      x += Number(match[1])
+      y += Number(match[2])
+    }
+  }
+  return { left: x - width, right: x, top: y - height / 2, bottom: y + height / 2 }
+}
+
+export function labelsOverlap(a: Box, b: Box): boolean {
+  return a.left < b.right && b.left < a.right && a.top < b.bottom + 4 && b.top < a.bottom + 4
+}
+
+export function linesOverlap(a: number, b: number, widthA = 1, widthB = 1): boolean {
+  return Math.abs(a - b) < (widthA + widthB) / 2 + 1
+}
+
+function hide(element: Element) {
+  element.setAttribute('display', 'none')
+  element.setAttribute('data-maximum-hidden', 'true')
+}
+
+function strokeWidth(element: Element): number {
+  return Number.parseFloat(getComputedStyle(element).strokeWidth) || 1
+}
+
+/** Apply after axes and grid are in the DOM; never feed the filtered set back into layout. */
+export function updateMaximumTickVisibility(svg: SVGSVGElement) {
+  svg.querySelectorAll('[data-maximum-hidden]').forEach((el) => {
+    el.removeAttribute('display')
+    el.removeAttribute('data-maximum-hidden')
+  })
+  svg.querySelectorAll<SVGGElement>('.waveform-track__axis--y .tick').forEach((tick) => {
+    const position = Number(tick.getAttribute('data-tick-y'))
+    const height = Number(tick.closest('.waveform-track')?.getAttribute('data-track-height'))
+    const line = tick.querySelector('line')
+    if (sameTick(position, 0) || sameTick(position, height)) line?.setAttribute('display', 'none')
+    else line?.removeAttribute('display')
+  })
+  const maximumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-maximum-tick]')]
+  const labels = [...svg.querySelectorAll<SVGTextElement>('.waveform-track__axis--y .tick text')]
+  maximumTicks.forEach((tick) => {
+    const text = tick.querySelector('text')
+    const line = tick.querySelector('line')
+    if (!text || !line) return
+    const box = textBox(text)
+    labels.forEach((other) => {
+      if (other.parentElement?.hasAttribute('data-maximum-tick')) return
+      if (labelsOverlap(box, textBox(other))) hide(other)
+    })
+    const axis = tick.parentElement!
+    const value = Number(tick.getAttribute('data-tick-value'))
+    const position = Number(tick.getAttribute('data-tick-y'))
+    axis.querySelectorAll<SVGGElement>('.tick:not([data-maximum-tick])').forEach((other) => {
+      const otherLine = other.querySelector('line')
+      if (
+        otherLine &&
+        linesOverlap(
+          position,
+          Number(other.getAttribute('data-tick-y')),
+          strokeWidth(line),
+          strokeWidth(otherLine),
+        )
+      )
+        hide(otherLine)
+    })
+    // Only the primary Y axis owns the existing horizontal grid.
+    if (axis.getAttribute('data-y-axis-index') !== '0') return
+    const track = axis.closest('.waveform-track')!
+    track.querySelectorAll('[data-grid-direction="horizontal"]').forEach((gridLine) => {
+      const gridY = Number(gridLine.getAttribute('y1'))
+      if (linesOverlap(position, gridY, strokeWidth(line), strokeWidth(gridLine))) hide(gridLine)
+    })
+    tick.setAttribute('data-maximum-value', String(value))
+  })
+}

package/src/core/lineBoundary.ts

@@ -0,0 +1,24 @@
+import type { WaveformPointRange } from './waveformPointSource'
+
+/** Outside neighbors join the curve without changing visible-point statistics. */
+export function lineBoundaryIndexes(range: WaveformPointRange, length: number): number[] {
+  if (!length || (range.start === range.end && (range.start === 0 || range.end === length)))
+    return []
+  return [range.start > 0 ? range.start - 1 : -1, range.end < length ? range.end : -1].filter(
+    (index) => index >= 0,
+  )
+}
+
+export function withLineBoundaries<T>(
+  points: T[],
+  range: WaveformPointRange,
+  length: number,
+  pointAt: (index: number) => T,
+): T[] {
+  const boundaries = lineBoundaryIndexes(range, length)
+  return [
+    ...boundaries.filter((index) => index < range.start).map(pointAt),
+    ...points,
+    ...boundaries.filter((index) => index >= range.end).map(pointAt),
+  ]
+}