waveform-analysis 0.1.74 → 0.1.76

package/src/components/interaction/useWaveformZoom.ts

@@ -1,23 +1,13 @@
-import {
-  scaleLinear,
-  select,
-  zoom,
-  zoomIdentity,
-  zoomTransform,
-  type D3ZoomEvent,
-  type ZoomBehavior,
-  type ZoomTransform,
-} from 'd3'
+import { pointer, scaleLinear, select, zoomIdentity, zoomTransform, type ZoomTransform } from 'd3'
 import type { ComputedRef, ShallowRef } from 'vue'
 
-import { hasMinimumVisibleXValues } from '../../core/rendering'
-import { WHEEL_ZOOM_DEBOUNCE_MS, ZOOM_CONSTRAINTS } from '../core/constants'
+import { WHEEL_ZOOM_DEBOUNCE_MS } from '../core/constants'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
-import { constrainViewportZoom, remotePanBoundary } from './remoteViewport'
+import { resolveStepZoomDomain, sameZoomDomain } from './stepZoom'
 import { normalizeIntegerZoomDomain } from './integerZoom'
-import { resolveMinimumZoomSpan, transformForDomain, type ZoomSeriesGroup } from './zoomConstraints'
+import { transformForDomain, type ZoomSeriesGroup } from './zoomConstraints'
 import {
   emitIndependentWheelZoomEnds,
   emitSharedWheelZoomEnd,
@@ -57,16 +47,13 @@ export function useWaveformZoom(context: ZoomContext) {
     initialXDomain,
     sharedZoomDomain,
     innerWidth,
-    innerHeight,
     hasChartArea,
     isZoomMode,
     isPresentationMode,
     resolveInitialTrackDomain,
     cancelPendingHover,
   } = context
-  const zoomBehaviors = new Map<number | 'shared', ZoomBehavior<SVGRectElement, unknown>>()
   const zoomThrottle = useAnimationFrameThrottle()
-  let synchronizingZoomTransform = false
   let pendingSharedZoomTransform: ZoomTransform | null = null
   let pendingSharedZoomGesture: ZoomGestureKind | null = null
   let lastSharedZoomGesture: ZoomGestureKind | null = null
@@ -75,11 +62,10 @@ export function useWaveformZoom(context: ZoomContext) {
   const lastIndependentWheelSeriesIds = new Map<string, string[]>()
   let wheelZoomEndTimer: ReturnType<typeof setTimeout> | undefined
   let preservePendingWheelDuringDataRebind = false
-  let zoomBindingEpoch = 0
 
   const scheduleZoomCommit = () => zoomThrottle.schedule(commitPendingZoom)
-  const handleSharedZoom = (event: D3ZoomEvent<SVGRectElement, unknown>) => {
-    if (synchronizingZoomTransform || isPresentationMode.value) return
+  const handleSharedZoom = (event: { transform: ZoomTransform }) => {
+    if (isPresentationMode.value) return
     cancelPendingHover()
     pendingSharedZoomTransform = event.transform
     pendingSharedZoomGesture = 'wheel'
@@ -91,11 +77,8 @@ export function useWaveformZoom(context: ZoomContext) {
     emit('zoom-intent', { start, end, gesture: 'wheel' })
     scheduleZoomCommit()
   }
-  const handleIndependentZoom = (
-    event: D3ZoomEvent<SVGRectElement, unknown>,
-    trackIndex: number,
-  ) => {
-    if (synchronizingZoomTransform || isPresentationMode.value) return
+  const handleIndependentZoom = (event: { transform: ZoomTransform }, trackIndex: number) => {
+    if (isPresentationMode.value) return
     cancelPendingHover()
     pendingIndependentZoomTransforms.set(trackIndex, event.transform)
     pendingIndependentZoomGestures.set(trackIndex, 'wheel')
@@ -166,16 +149,6 @@ export function useWaveformZoom(context: ZoomContext) {
     emitSharedWheelZoomEnd(emit, sharedZoomDomain.value, trackLayouts.value)
     lastSharedZoomGesture = null
   }
-  const flushPendingZoom = () => {
-    zoomThrottle.flush()
-    commitPendingZoom()
-    if (lastSharedZoomGesture === 'wheel' || lastIndependentWheelSeriesIds.size) return
-    emitZoomEnd()
-  }
-  const handleD3ZoomEnd = (bindingEpoch: number) => {
-    if (bindingEpoch !== zoomBindingEpoch) return
-    flushPendingZoom()
-  }
   function scheduleWheelZoomEnd() {
     if (wheelZoomEndTimer !== undefined) clearTimeout(wheelZoomEndTimer)
     wheelZoomEndTimer = setTimeout(() => {
@@ -207,81 +180,50 @@ export function useWaveformZoom(context: ZoomContext) {
     }
   }
   const clearZoomBindings = (preservePendingWheel = false) => {
-    zoomBindingEpoch += 1
     if (!preservePendingWheel) cancelPendingZoom()
     svgElement.value
       ?.querySelectorAll<SVGRectElement>('.waveform-chart__overlay')
       .forEach((overlay) => select(overlay).on('.zoom', null))
-    zoomBehaviors.clear()
   }
-  const resolveMaximumZoomScale = (
-    domain: [number, number],
-    groups: readonly ZoomSeriesGroup[],
-  ): number => {
-    const domainSpan = Math.abs(domain[1] - domain[0])
-    if (!Number.isFinite(domainSpan) || domainSpan <= 0) return ZOOM_CONSTRAINTS.MIN_SCALE
-    const minimumSpan = resolveMinimumZoomSpan(domain, groups, props)
-    return Math.max(
-      ZOOM_CONSTRAINTS.MIN_SCALE,
-      minimumSpan > 0 ? domainSpan / minimumSpan : Number.POSITIVE_INFINITY,
-    )
-  }
-  const constrainTransform = (
-    transform: ZoomTransform,
-    domain: [number, number],
+  const bindWheelZoom = (
+    overlay: SVGRectElement,
+    baseDomain: [number, number],
     width: number,
     groups: readonly ZoomSeriesGroup[],
-  ): ZoomTransform => {
-    const requested = transform.rescaleX(scaleLinear(domain, [0, width])).domain() as [
-      number,
-      number,
-    ]
-    return transformForDomain(
-      constrainViewportZoom(requested, domain, groups, props),
-      domain,
-      width,
-    )
-  }
-  const canZoomTrack = (track: TrackLayout): boolean => {
-    const minimum = Number(props.minVisiblePoints)
-    return hasMinimumVisibleXValues(
-      track.seriesList,
-      track.xScale.domain() as [number, number],
-      Number.isFinite(minimum) && minimum > 0 ? Math.ceil(minimum) + 1 : minimum,
-    )
-  }
-  const canZoomSharedTracks = (): boolean => {
-    const tracks = trackLayouts.value.filter((track) => track.hasVisibleSeries)
-    return tracks.length > 0 && tracks.every(canZoomTrack)
-  }
-  const resolveMinimumZoomScale = (domain: [number, number]): number => {
-    const boundary = remotePanBoundary(props)
-    return boundary
-      ? Math.min(1, (domain[1] - domain[0]) / (boundary[1] - boundary[0]))
-      : ZOOM_CONSTRAINTS.MIN_SCALE
-  }
-  const canHandleWheelZoom = (event: Event, canZoomIn: boolean, minimumScale: number): boolean => {
-    if (event.type !== 'wheel') return false
-    const deltaY = (event as WheelEvent).deltaY
-    const currentScale = zoomTransform(event.currentTarget as Element).k
-
-    // 放大操作：需要检查是否还有足够的数据点支持继续放大
-    if (deltaY < 0) return canZoomIn
-
-    // 缩小操作：只要当前缩放级别大于最小比例就允许
-    // 即使已达到最小可见点数限制，用户也应该能够缩小视图
-    if (deltaY > 0) {
-      // 使用小的容差避免浮点精度问题导致无法缩小到边界
-      const scaleTolerance = 1e-6
-      return currentScale > minimumScale * (1 + scaleTolerance)
-    }
-
-    return false
+    transform: ZoomTransform,
+    trackIndex?: number,
+  ) => {
+    select(overlay)
+      .property('__zoom', transform)
+      .on(
+        'wheel.zoom',
+        (event: WheelEvent) => {
+          if (!Number.isFinite(event.deltaY) || event.deltaY === 0) return
+          const current = zoomTransform(overlay)
+            .rescaleX(scaleLinear(baseDomain, [0, width]))
+            .domain() as [number, number]
+          const next = resolveStepZoomDomain(
+            current,
+            event.deltaY < 0 ? 'zoom-in' : 'zoom-out',
+            baseDomain,
+            groups,
+            props,
+            pointer(event, overlay)[0] / width,
+          )
+          if (sameZoomDomain(current, next)) return
+          event.preventDefault()
+          event.stopImmediatePropagation()
+          const transform = transformForDomain(next, baseDomain, width)
+          select(overlay).property('__zoom', transform)
+          if (trackIndex === undefined) handleSharedZoom({ transform })
+          else handleIndependentZoom({ transform }, trackIndex)
+        },
+        { passive: false },
+      )
   }
   const configureZoom = () => {
     const preservePendingWheel = preservePendingWheelDuringDataRebind
     clearZoomBindings(preservePendingWheel)
-    const bindingEpoch = zoomBindingEpoch
     if (
       isPresentationMode.value ||
       !props.zoomable ||
@@ -299,35 +241,14 @@ export function useWaveformZoom(context: ZoomContext) {
         if (!overlay) return
         const dataDomain = resolveInitialTrackDomain(track)
         const groups = [track.seriesList]
-        const minimumScale = resolveMinimumZoomScale(dataDomain)
-        const behavior = zoom<SVGRectElement, unknown>()
-          .filter((event) => {
-            const currentTrack =
-              trackLayouts.value.find((item) => item.index === track.index) ?? track
-            return canHandleWheelZoom(event, canZoomTrack(currentTrack), minimumScale)
-          })
-          .scaleExtent([minimumScale, resolveMaximumZoomScale(dataDomain, groups)])
-          .constrain((transform) => constrainTransform(transform, dataDomain, track.width, groups))
-          .extent([
-            [0, 0],
-            [track.width, track.height],
-          ])
-          .translateExtent([
-            [0, 0],
-            [track.width, track.height],
-          ])
-          .on('zoom', (event) => handleIndependentZoom(event, track.index))
-          .on('end', () => handleD3ZoomEnd(bindingEpoch))
-        zoomBehaviors.set(track.index, behavior)
-        synchronizingZoomTransform = true
-        try {
-          select(overlay)
-            .call(behavior)
-            .on('dblclick.zoom', null)
-            .call(behavior.transform, independentTransforms.value[track.index] ?? zoomIdentity)
-        } finally {
-          synchronizingZoomTransform = false
-        }
+        bindWheelZoom(
+          overlay,
+          dataDomain,
+          track.width,
+          groups,
+          independentTransforms.value[track.index] ?? zoomIdentity,
+          track.index,
+        )
       })
       return
     }
@@ -336,40 +257,12 @@ export function useWaveformZoom(context: ZoomContext) {
     const groups = trackLayouts.value
       .filter((track) => track.hasVisibleSeries)
       .map((track) => track.seriesList)
-    const minimumScale = resolveMinimumZoomScale(initialXDomain.value)
-    const behavior = zoom<SVGRectElement, unknown>()
-      .filter((event) => canHandleWheelZoom(event, canZoomSharedTracks(), minimumScale))
-      .scaleExtent([minimumScale, resolveMaximumZoomScale(initialXDomain.value, groups)])
-      .constrain((transform) =>
-        constrainTransform(transform, initialXDomain.value, innerWidth.value, groups),
-      )
-      .extent([
-        [0, 0],
-        [innerWidth.value, innerHeight.value],
-      ])
-      .translateExtent([
-        [0, 0],
-        [innerWidth.value, innerHeight.value],
-      ])
-      .on('zoom', handleSharedZoom)
-      .on('end', () => handleD3ZoomEnd(bindingEpoch))
-    zoomBehaviors.set('shared', behavior)
-    synchronizingZoomTransform = true
-    try {
-      select(overlay)
-        .call(behavior)
-        .on('dblclick.zoom', null)
-        .call(behavior.transform, sharedTransform.value)
-    } finally {
-      synchronizingZoomTransform = false
-    }
+    bindWheelZoom(overlay, initialXDomain.value, innerWidth.value, groups, sharedTransform.value)
   }
 
   return {
     cancelPendingZoom,
     clearZoomBindings,
-    canZoomTrack,
-    canZoomSharedTracks,
     configureZoom,
     prepareForDataChange,
   }

package/src/components/interaction/zoomConstraints.ts

@@ -73,7 +73,7 @@ export function resolveMinimumZoomSpan(
   groups: readonly ZoomSeriesGroup[],
   options: ZoomConstraintOptions,
 ): number {
-  const normalized = alignIntegerZoomDomain(normalizedBoundary(boundary), options)
+  const normalized = normalizedBoundary(boundary)
   const boundarySpan = normalized[1] - normalized[0]
   if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return 0
   const configuredSpan =
@@ -89,8 +89,7 @@ export function resolveMinimumZoomSpan(
       : options.maxZoomScale !== null && configuredSpan === 0 && required === 0
         ? boundarySpan / ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE
         : 0
-  const integerSpan = options.integerZoom ? (options.timeUnit === 's' ? 1 : 0.001) : 0
-  return Math.max(configuredSpan, pointSpan, scaleSpan, integerSpan)
+  return Math.max(configuredSpan, pointSpan, scaleSpan)
 }
 
 function expandToMinimumPoints(
@@ -141,7 +140,7 @@ export function constrainZoomDomain(
   groups: readonly ZoomSeriesGroup[],
   options: ZoomConstraintOptions,
 ): [number, number] {
-  const normalized = alignIntegerZoomDomain(normalizedBoundary(boundary), options)
+  const normalized = normalizedBoundary(boundary)
   const boundarySpan = normalized[1] - normalized[0]
   if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return normalized
   if (Math.abs(domain[1] - domain[0]) >= boundarySpan * (1 - 1e-12)) return normalized
@@ -159,7 +158,8 @@ export function constrainZoomDomain(
   const span = Math.max(minimumSpan, Math.min(boundarySpan, expanded[1] - expanded[0]))
   const center = (expanded[0] + expanded[1]) / 2
   const start = Math.max(normalized[0], Math.min(center - span / 2, normalized[1] - span))
-  return alignIntegerZoomDomain([start, start + span], options)
+  const aligned = alignIntegerZoomDomain([start, start + span], options)
+  return [Math.max(normalized[0], aligned[0]), Math.min(normalized[1], aligned[1])]
 }
 
 export function transformForDomain(

package/src/components/rendering/WaveformSeriesLayer.vue

@@ -7,6 +7,7 @@ import { waveformLineDasharray, waveformPointSeriesPath } from './seriesStyle'
 
 const props = defineProps<{
   track: TrackLayout
+  paginationOpacity?: number
   clipPathId: string
 }>()
 
@@ -51,11 +52,22 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
   >
     <g
       v-for="seriesPath in renderedSeriesPaths"
-      :key="seriesPath.series.id"
+      :key="seriesPath.presentationKey ?? seriesPath.series.id"
+      :opacity="(seriesPath.opacity ?? 1) * (paginationOpacity ?? 1)"
+      :clip-path="seriesPath.animationClip ? `url(#${seriesPath.animationClip.id})` : undefined"
       class="waveform-track__series-item waveform-chart__series"
       :data-series-id="seriesPath.series.id"
       :data-series-name="seriesPath.series.name || undefined"
     >
+      <defs v-if="seriesPath.animationClip">
+        <clipPath :id="seriesPath.animationClip.id" clipPathUnits="userSpaceOnUse">
+          <rect
+            :x="seriesPath.animationClip.x"
+            :width="seriesPath.animationClip.width"
+            :height="track.height"
+          />
+        </clipPath>
+      </defs>
       <path
         v-if="seriesPath.path"
         class="waveform-track__line waveform-chart__line"

package/src/components/rendering/WaveformTrack.vue

@@ -12,6 +12,7 @@ import WaveformTrackBackdrop from './WaveformTrackBackdrop.vue'
 
 interface Props {
   track: TrackLayout
+  paginationOpacity?: number
   clipPathId: string
   innerWidth: number
   zoomable: boolean
@@ -136,7 +137,11 @@ const frameInset = computed(() =>
       aria-hidden="true"
     />
 
-    <WaveformSeriesLayer :track="track" :clip-path-id="clipPathId" />
+    <WaveformSeriesLayer
+      :track="track"
+      :clip-path-id="clipPathId"
+      :pagination-opacity="paginationOpacity"
+    />
     <WaveformZeroLines
       :track="track"
       :clip-path-id="clipPathId"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -6,10 +6,11 @@ import type { WaveformAxesOptions } from '../../types'
 import { formatXAxisLabel } from '../../utils'
 import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
-import { updateMaximumTickVisibility } from './yAxisTickVisibility'
+import { scheduleMaximumTickVisibility } from './yAxisTickVisibility'
 import { sameTick } from '../core/yAxisPadding'
 import { resolveYAxisLabelBandWidth, resolveYAxisLabelFontSize } from '../core/yAxisLabelStyle'
 import { formatChannelLabel } from './channelLabel'
+import { updateAxis, updateSvgAttribute } from './updateAxis'
 
 interface Props {
   track: TrackLayout
@@ -58,77 +59,89 @@ function renderAxes() {
     if (!element) return
     const unit = props.showUnits ? axis.seriesList[0]?.unit : undefined
     const highestTick = Math.max(...axis.tickValues)
-    const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
-      .tickFormat((value) =>
-        formatYAxisTickLabel(
-          Number(value),
-          axis.scale.domain() as [number, number],
-          axis.tickValues,
-          unit,
-          axis.side,
-        ),
+    const lowestTick = Math.min(...axis.tickValues)
+    const format = (value: number) =>
+      formatYAxisTickLabel(
+        value,
+        axis.scale.domain() as [number, number],
+        axis.tickValues,
+        unit,
+        axis.side,
       )
+    const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
+      .tickFormat((value) => format(Number(value)))
       .tickSize(-4)
       .tickPadding(7)
       .tickSizeOuter(0)
       .tickValues(axis.tickValues)
 
     const selection = select(element)
-    selection.call(yAxis)
-    selection
-      .selectAll<SVGTextElement, number>('.tick text')
-      .attr('y', null)
-      .attr('dy', '0')
-      .attr('dominant-baseline', 'central')
-      .attr('data-axis-maximum-label', (value) =>
-        props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
-      )
-      .attr('data-axis-minimum-label', (value) =>
-        props.hideOverlappingMaximumLabel && sameTick(value, Math.min(...axis.tickValues))
-          ? 'true'
-          : null,
-      )
-    selection
-      .attr('data-label-domain-min', axis.scale.domain()[0])
-      .attr('data-label-domain-max', axis.scale.domain()[1])
-      .attr('data-label-unit', unit ?? null)
-    selection
-      .selectAll<SVGGElement, number>('.tick')
-      .attr('data-maximum-tick', (value) =>
+    updateAxis(element, yAxis, axis.scale, axis.tickValues, axis.side, format)
+    updateSvgAttribute(element, 'data-label-domain-min', axis.scale.domain()[0])
+    updateSvgAttribute(element, 'data-label-domain-max', axis.scale.domain()[1])
+    updateSvgAttribute(element, 'data-label-unit', unit ?? null)
+    selection.selectAll<SVGGElement, number>('.tick').each(function (value) {
+      const text = this.querySelector('text')
+      if (text) {
+        updateSvgAttribute(text, 'y', null)
+        updateSvgAttribute(text, 'dy', '0')
+        updateSvgAttribute(text, 'dominant-baseline', 'central')
+        updateSvgAttribute(
+          text,
+          'data-axis-maximum-label',
+          props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
+        )
+        updateSvgAttribute(
+          text,
+          'data-axis-minimum-label',
+          props.hideOverlappingMaximumLabel && sameTick(value, lowestTick) ? 'true' : null,
+        )
+      }
+      updateSvgAttribute(
+        this,
+        'data-maximum-tick',
         axis.maximumTick !== undefined && sameTick(value, axis.maximumTick) ? 'true' : null,
       )
-      .attr('data-minimum-tick', (value) =>
+      updateSvgAttribute(
+        this,
+        'data-minimum-tick',
         axis.minimumTick !== undefined && sameTick(value, axis.minimumTick) ? '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)
+      updateSvgAttribute(this, 'data-tick-value', value)
+      updateSvgAttribute(this, 'data-tick-y', axis.scale(value))
+    })
+    selection.selectAll<SVGPathElement, unknown>('path.domain').each(function () {
+      updateSvgAttribute(this, 'display', props.axes?.y?.lineVisible === false ? 'none' : null)
+    })
   })
 
   scheduleVisibility()
   if (!xAxisElement.value) return
   const selection = select(xAxisElement.value)
-  selection.call(
+  const format = (value: number) =>
+    formatXAxisLabel(
+      value,
+      props.track.xScale.domain() as [number, number],
+      props.timeUnit,
+      'tick',
+      props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
+    )
+  updateAxis(
+    xAxisElement.value,
     axisBottom(props.track.xScale)
       .tickValues(props.track.xAxisTickValues)
-      .tickFormat((value) =>
-        formatXAxisLabel(
-          Number(value),
-          props.track.xScale.domain() as [number, number],
-          props.timeUnit,
-          'tick',
-          props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
-        ),
-      )
+      .tickFormat((value) => format(Number(value)))
       .tickSize(-4)
       .tickPadding(7)
       .tickSizeOuter(0),
+    props.track.xScale,
+    props.track.xAxisTickValues,
+    'bottom',
+    format,
   )
-  selection
-    .selectAll('path.domain')
-    .attr('display', props.axes?.x?.lineVisible === false ? 'none' : null)
+  selection.selectAll<SVGPathElement, unknown>('path.domain').each(function () {
+    updateSvgAttribute(this, 'display', props.axes?.x?.lineVisible === false ? 'none' : null)
+  })
 }
 
 let disposed = false
@@ -136,7 +149,7 @@ function scheduleVisibility() {
   if (disposed) return
   const apply = () => {
     const svg = yAxisElements.value[0]?.ownerSVGElement
-    if (svg) updateMaximumTickVisibility(svg)
+    if (svg) scheduleMaximumTickVisibility(svg)
   }
   apply()
 }

package/src/components/rendering/WaveformTrackBackdrop.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { updateGrid } from './updateGrid'
 import type { TrackLayout } from '../core/types'
 
 interface Props {
@@ -13,7 +15,35 @@ interface Props {
   }
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+const minorVertical = ref<SVGGElement>()
+const minorHorizontal = ref<SVGGElement>()
+const majorVertical = ref<SVGGElement>()
+const majorHorizontal = ref<SVGGElement>()
+watchEffect(
+  () => {
+    const track = props.track
+    for (const [element, direction, ticks] of [
+      [minorVertical.value, 'vertical', track.xMinorTicks],
+      [minorHorizontal.value, 'horizontal', track.yMinorTicks],
+      [majorVertical.value, 'vertical', track.xMajorTicks],
+      [majorHorizontal.value, 'horizontal', track.yMajorTicks],
+    ] as const) {
+      if (element)
+        updateGrid(
+          element,
+          track.gridLines[direction] ? ticks : [],
+          direction === 'vertical' ? track.xScale : track.yScale,
+          direction,
+          direction === 'vertical' ? track.height : (track.width ?? props.innerWidth),
+          direction === 'vertical'
+            ? track.gridLines.verticalColor
+            : track.gridLines.horizontalColor,
+        )
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
@@ -34,58 +64,14 @@ defineProps<Props>()
     <g
       class="waveform-track__grid waveform-track__grid--minor waveform-chart__grid waveform-chart__grid--minor"
     >
-      <template v-if="track.gridLines.vertical">
-        <line
-          v-for="tick in track.xMinorTicks"
-          :key="`x-minor-${track.index}-${tick}`"
-          data-grid-direction="vertical"
-          :stroke="track.gridLines.verticalColor"
-          :x1="track.xScale(tick)"
-          :x2="track.xScale(tick)"
-          y1="0"
-          :y2="track.height"
-        />
-      </template>
-      <template v-if="track.gridLines.horizontal">
-        <line
-          v-for="tick in track.yMinorTicks"
-          :key="`y-minor-${track.index}-${tick}`"
-          data-grid-direction="horizontal"
-          :stroke="track.gridLines.horizontalColor"
-          x1="0"
-          :x2="track.width ?? innerWidth"
-          :y1="track.yScale(tick)"
-          :y2="track.yScale(tick)"
-        />
-      </template>
+      <g ref="minorVertical" />
+      <g ref="minorHorizontal" />
     </g>
     <g
       class="waveform-track__grid waveform-track__grid--major waveform-chart__grid waveform-chart__grid--major"
     >
-      <template v-if="track.gridLines.vertical">
-        <line
-          v-for="tick in track.xMajorTicks"
-          :key="`x-major-${track.index}-${tick}`"
-          data-grid-direction="vertical"
-          :stroke="track.gridLines.verticalColor"
-          :x1="track.xScale(tick)"
-          :x2="track.xScale(tick)"
-          y1="0"
-          :y2="track.height"
-        />
-      </template>
-      <template v-if="track.gridLines.horizontal">
-        <line
-          v-for="tick in track.yMajorTicks"
-          :key="`y-major-${track.index}-${tick}`"
-          data-grid-direction="horizontal"
-          :stroke="track.gridLines.horizontalColor"
-          x1="0"
-          :x2="track.width ?? innerWidth"
-          :y1="track.yScale(tick)"
-          :y2="track.yScale(tick)"
-        />
-      </template>
+      <g ref="majorVertical" />
+      <g ref="majorHorizontal" />
     </g>
   </g>