waveform-analysis 0.1.76 → 0.1.78

package/src/components/animation/useWaveformAnimations.ts

@@ -13,7 +13,12 @@ import { chartExportOptions } from '../controls/chartExportOptions'
 import { layoutAnnotations } from '../annotation/annotationLayout'
 import { useWaveformInstanceId } from '@/utils/waveformId'
 
-import { animationLayoutSignature, wrapAnimationCommands, type AnimationContext } from './context'
+import {
+  animationGridShape,
+  animationLayoutSignature,
+  wrapAnimationCommands,
+  type AnimationContext,
+} from './context'
 import { createPaginationPresentation } from './paginationPresentation'
 
 export function useWaveformAnimations(context: AnimationContext) {
@@ -26,6 +31,8 @@ export function useWaveformAnimations(context: AnimationContext) {
   const seen = new Set<string>()
   const prefix = useWaveformInstanceId('waveform-animation')
   let clipSequence = 0
+  let presentationGeneration = 0
+  let previousGrid = animationGridShape(context)
   let previousAnnotations = props.annotations
   let previousData = props.data
   let previousLayout = ''
@@ -63,9 +70,12 @@ export function useWaveformAnimations(context: AnimationContext) {
       states.has(track.id) ? projectTrack(states.get(track.id)!) : track,
     )
   })
-  const pagination = createPaginationPresentation(context, controller, config, effective, () =>
-    commit(true),
-  )
+  const pagination = createPaginationPresentation(context, controller, config, effective, () => {
+    commit(true)
+    for (const track of tracks.value) for (const series of track.seriesList) seen.delete(series.id)
+    skipSignature = undefined
+    annotations.clear()
+  })
   const projectedAnnotations = computed(() => {
     const anchors = new Map([...states.values()].flatMap((state) => [...state.anchors]))
     const values = visibleAnnotations().flatMap((annotation) => {
@@ -100,12 +110,10 @@ export function useWaveformAnimations(context: AnimationContext) {
         [...state.series].map(([id, series]) => [id, series.opacity] as const),
       ),
     )
-    return annotations.project(projectedAnnotations.value, opacities).map((annotation) => ({
-      ...annotation,
-      seriesOpacity: (annotation.seriesOpacity ?? 1) * pagination.opacity.value,
-    }))
+    return annotations.project(projectedAnnotations.value, opacities)
   })
   function commit(preservePagination = false) {
+    presentationGeneration++
     if (!preservePagination) pagination.reset()
     const previous = new Map(states)
     states.clear()
@@ -130,6 +138,8 @@ export function useWaveformAnimations(context: AnimationContext) {
     if (disposed) return
     const nextConfig = config.value
     const dataChanged = props.data !== previousData
+    // The post-flush grid watcher waits for lifecycle page resets before requesting replay.
+    if (!dataChanged && seen.size && animationGridShape(context) !== previousGrid) return
     if (dataChanged) {
       pendingFrom = new Map(states)
       previousData = props.data
@@ -162,8 +172,9 @@ export function useWaveformAnimations(context: AnimationContext) {
     previousTracks = tracks.value
     previousSamplingState = sampling.state.value
     controller.setEnabled(effective.value)
-    if (pagination.reconcile(dataChanged)) return
-    if (!effective.value || layoutChanged) {
+    const replay = pagination.reconcile(dataChanged)
+    if (replay === 'static') return
+    if (!effective.value || (layoutChanged && !replay)) {
       controller.finishAll()
       commit()
       return
@@ -224,6 +235,7 @@ export function useWaveformAnimations(context: AnimationContext) {
           if (
             !seen.has(id) &&
             nextConfig.animation.enabled &&
+            nextConfig.animation.duration > 0 &&
             skipSignature !== sampling.requestSignature.value
           ) {
             const state = states.get(track.id)!
@@ -255,8 +267,10 @@ export function useWaveformAnimations(context: AnimationContext) {
             invalidate()
           },
         }
+        const generation = presentationGeneration
         controller.animateSeriesEnter(id, binding, track.width, {
           ...nextConfig.animation,
+          duration: pagination.enterDuration(),
           delay:
             nextConfig.animation.delay + visibleIds.indexOf(id) * nextConfig.animation.staggerDelay,
           onComplete: () => {
@@ -264,7 +278,7 @@ export function useWaveformAnimations(context: AnimationContext) {
             entering.delete(id)
             invalidate()
             queueMicrotask(() => {
-              if (!disposed) annotations.release(id)
+              if (!disposed && presentationGeneration === generation) annotations.release(id)
             })
             nextConfig.animation.onComplete?.()
           },
@@ -311,6 +325,17 @@ export function useWaveformAnimations(context: AnimationContext) {
     reconcile,
     { immediate: true },
   )
+  watch(
+    [() => animationGridShape(context), () => props.data],
+    ([shape, data], [previousShape, previousData]) => {
+      previousGrid = shape
+      if (disposed || shape === previousShape || data !== previousData || !seen.size) return
+      // Lifecycle page resets have now selected the final grid and page.
+      pagination.requestLayout()
+      reconcile()
+    },
+    { flush: 'post' },
+  )
   watch(
     () => props.annotationsVisible,
     (visible) => {
@@ -343,7 +368,6 @@ export function useWaveformAnimations(context: AnimationContext) {
         controller.finishWhere(
           (key) => key.scope === 'update' || key.scope === 'domain',
           () => {
-            pagination.reset()
             for (const track of tracks.value) {
               const old = states.get(track.id),
                 next = staticTrack(track, visibleAnnotations(), old, true)
@@ -405,7 +429,6 @@ export function useWaveformAnimations(context: AnimationContext) {
   return {
     presentationTracks,
     presentationAnnotations,
-    paginationOpacity: pagination.opacity,
     stabilizeAnimations,
     wrap: <T extends object>(commands: T) => wrapAnimationCommands(commands, stabilizeAnimations),
     wrapPagination: pagination.wrapPagination,

package/src/components/controls/useChartCommands.ts

@@ -122,13 +122,15 @@ export function useChartCommands(c: Context) {
           ? tracks.some((t) => c.independentYDomains.value[t.index])
           : Object.keys(c.sharedYDomains.value).length > 0)
       const boundaryChanged = tracks.length && !same(bounds, boundary(tracks))
-      const status: WaveformTargetResult['status'] = !nonempty
-        ? 'empty-data'
-        : c.props.presentationMode || !c.props.zoomable
-          ? 'disabled'
-          : before && same(before.xDomain, xDomain) && !hasY && !boundaryChanged
-            ? 'unchanged'
-            : 'applied'
+      const hasSeries = tracks.some((t) => t.seriesList.length > 0)
+      const status: WaveformTargetResult['status'] =
+        !hasSeries || (action === 'fit' && !nonempty)
+          ? 'empty-data'
+          : c.props.presentationMode || !c.props.zoomable
+            ? 'disabled'
+            : before && same(before.xDomain, xDomain) && !hasY && !boundaryChanged
+              ? 'unchanged'
+              : 'applied'
       return { id, tracks, before, bounds, xDomain, status, resetsY }
     })
     return { entries }

package/src/components/core/useWaveformChartController.ts

@@ -32,7 +32,6 @@ import { resolveCompactPaginationBand } from './pagination'
 import type { WaveformHoverState } from './types'
 import { useWaveformChartLifecycle } from './useWaveformChartLifecycle'
 import { usePreparedWaveformSeries } from './useWaveformData'
-import { remotePanBoundary } from '../interaction/remoteViewport'
 import { useWaveformLayout } from './useWaveformLayout'
 import { useWaveformPresentation } from './useWaveformPresentation'
 import { usePlotLabelLayout } from './usePlotLabelLayout'
@@ -103,7 +102,7 @@ export function useWaveformChartController(
       handleBeforeDataReferenceChange()
     },
     () => handleDataReferenceChange(),
-    () => Boolean(remotePanBoundary(props)),
+    () => true,
   )
 
   const presentation = useWaveformPresentation({
@@ -422,7 +421,6 @@ export function useWaveformChartController(
     ...animations.wrap(commands),
     presentationTracks: animations.presentationTracks,
     presentationAnnotations: animations.presentationAnnotations,
-    paginationOpacity: animations.paginationOpacity,
     stabilizeAnimations: animations.stabilizeAnimations,
     ...imageExport,
     margin,

package/src/components/core/useWaveformData.ts

@@ -71,7 +71,19 @@ export function usePreparedWaveformSeries(
   )
   watch([data, retainEmpty], ([nextData, preserveEmpty]) => {
     onBeforeDataChange()
-    preparedSeries.value = prepareWaveformSeries(nextData, preserveEmpty)
+    const previousById = new Map(preparedSeries.value.map((series) => [series.id, series]))
+    preparedSeries.value = prepareWaveformSeries(nextData, preserveEmpty).map((series) => {
+      const previous = previousById.get(series.id)
+      // Preserve axes, never geometry, across empty windows of the same channel/track.
+      if (series.source.length || !previous || series.trackId !== previous.trackId) return series
+      return {
+        ...series,
+        xDomain: previous.xDomain,
+        yDomain: previous.yDomain,
+        rawYMaximum: previous.rawYMaximum,
+        rawYMinimum: previous.rawYMinimum,
+      }
+    })
     onDataChange()
   })
   return preparedSeries

package/src/components/core/useWaveformLayout.ts

@@ -149,6 +149,9 @@ export function useWaveformLayout(context: LayoutContext) {
     yAxisTickCount,
   })
   const hasWaveformData = computed(() => chartSeries.value.length > 0)
+  const hasWaveformSamples = computed(() =>
+    chartSeries.value.some((series) => (series.source?.length ?? series.points.length) > 0),
+  )
   const hasChartArea = computed(() => innerWidth.value > 0 && innerHeight.value > 0)
   const resolvedXLabel = computed(() => props.xLabel ?? `时间（${props.timeUnit}）`)
   const activeInteractionMode = computed(() => props.interactionMode)
@@ -349,6 +352,7 @@ export function useWaveformLayout(context: LayoutContext) {
     innerWidth,
     hasVisibleWaveformData,
     hasWaveformData,
+    hasWaveformSamples,
     hasChartArea,
     resolvedXLabel,
     activeInteractionMode,

package/src/components/interaction/zoomConstraints.ts

@@ -56,6 +56,7 @@ function minimumPointSpan(
   let minimumSpan = 0
   for (const group of groups) {
     const values = uniqueXValues(group, boundary)
+    if (!group.some((series) => (series.source?.length ?? series.points.length) > 0)) continue
     if (values.length < required) return boundary[1] - boundary[0]
     let groupSpan = Number.POSITIVE_INFINITY
     for (let index = 0; index + required <= values.length; index += 1) {
@@ -104,6 +105,7 @@ function expandToMinimumPoints(
   let expanded = domain
   for (const group of groups) {
     const values = uniqueXValues(group, boundary)
+    if (!group.some((series) => (series.source?.length ?? series.points.length) > 0)) continue
     if (values.length < required) return [...boundary]
     const visibleCount = values.filter(
       (value) => value >= expanded[0] && value <= expanded[1],

package/src/components/rendering/WaveformSeriesLayer.vue

@@ -7,7 +7,6 @@ import { waveformLineDasharray, waveformPointSeriesPath } from './seriesStyle'
 
 const props = defineProps<{
   track: TrackLayout
-  paginationOpacity?: number
   clipPathId: string
 }>()
 
@@ -53,7 +52,7 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
     <g
       v-for="seriesPath in renderedSeriesPaths"
       :key="seriesPath.presentationKey ?? seriesPath.series.id"
-      :opacity="(seriesPath.opacity ?? 1) * (paginationOpacity ?? 1)"
+      :opacity="seriesPath.opacity ?? 1"
       :clip-path="seriesPath.animationClip ? `url(#${seriesPath.animationClip.id})` : undefined"
       class="waveform-track__series-item waveform-chart__series"
       :data-series-id="seriesPath.series.id"

package/src/components/rendering/WaveformTrack.vue

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

package/src/demo/remoteWaveformLoader.ts

@@ -52,14 +52,19 @@ export function mergeWaveformWindow(
   response: WaveformData,
   seriesIds?: string[],
 ): WaveformData {
-  if (!seriesIds || current.kind !== 'series' || response.kind !== 'series') return response
-  const selected = new Set(seriesIds)
+  if (current.kind !== 'series' || response.kind !== 'series') return response
+  const selected = seriesIds ? new Set(seriesIds) : undefined
   const byId = new Map(response.series.map((series) => [series.id, series]))
+  const knownIds = new Set(current.series.map((series) => series.id))
   return {
     kind: 'series',
-    series: current.series.map((series) =>
-      series.id && selected.has(series.id) ? (byId.get(series.id) ?? series) : series,
-    ),
+    series: [
+      ...current.series.map((series) => {
+        if (selected && (!series.id || !selected.has(series.id))) return series
+        return byId.get(series.id) ?? { ...series, data: { kind: 'points' as const, points: [] } }
+      }),
+      ...response.series.filter((series) => !knownIds.has(series.id)),
+    ],
   }
 }
 

package/src/views/AnimationDemo.vue

@@ -13,6 +13,7 @@ const enter = ref(true)
 const update = ref(true)
 const annotationEnabled = ref(true)
 const effect = ref<AnnotationAnimationType>('scale')
+const gridShape = ref('1x1')
 const direction = ref<LineDrawingDirection>('left-to-right')
 let generation = 0
 function generate(count = 500): WaveformData {
@@ -55,13 +56,13 @@ function toggleAnnotation() {
   <main class="animation-demo">
     <h1>波形动画</h1>
     <p>
-      分别控制入场、更新 /
-      切页和标注效果。切换分页时波形与标注同步淡入，坐标轴立即更新。拖动、缩放与导出会提交最终画面。
+      分别控制入场、更新和标注效果。分页与网格调整重播波形绘制，标注等待对应系列完成，
+      坐标轴立即更新。拖动、缩放与导出会提交最终画面。
     </p>
     <div class="animation-demo__controls">
       <label><input v-model="enabled" type="checkbox" /> 动画</label>
-      <label><input v-model="enter" type="checkbox" /> 入场</label>
-      <label><input v-model="update" type="checkbox" /> 更新 / 切页</label>
+      <label><input v-model="enter" type="checkbox" /> 入场 / 切页 / 网格</label>
+      <label><input v-model="update" type="checkbox" /> 更新</label>
       <label><input v-model="annotationEnabled" type="checkbox" /> 标注</label>
       <label
         >入场方向
@@ -80,6 +81,14 @@ function toggleAnnotation() {
           <option value="bounce">弹跳</option>
         </select></label
       >
+      <label
+        >网格
+        <select v-model="gridShape" aria-label="网格">
+          <option value="1x1">1×1</option>
+          <option value="1x2">1×2</option>
+          <option value="2x2">2×2</option>
+        </select>
+      </label>
       <button @click="key++">重新入场</button>
       <button @click="replace(true)">更新振幅</button>
       <button @click="replace(false)">改变点数</button>
@@ -89,7 +98,7 @@ function toggleAnnotation() {
       :key="key"
       :data="data"
       :height="360"
-      :grid="{ rowCount: 1, columnCount: 1 }"
+      :grid="{ rowCount: Number(gridShape[0]), columnCount: Number(gridShape[2]) }"
       :animation-enabled="enabled"
       :animation="{ enabled: enter, direction }"
       :animation-update="{ enabled: update }"