waveform-analysis 0.1.71 → 0.1.73

package/dist/types/types/index.d.ts

@@ -1,5 +1,6 @@
 /**
  * 类型定义统一导出
  */
-export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformZeroLineOptions, } from './chart';
+export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, } from './chart';
 export type { SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './data';
+export type { WaveformToolbarItem, WaveformToolbarOptions, WaveformControlTarget, WaveformControlAction, WaveformCommandMetadata, WaveformTargetStatus, WaveformViewportSnapshot, WaveformTargetResult, WaveformControlResult, WaveformControlState, WaveformImageExportOptions, WaveformImageExportErrorCode, WaveformImageExportError, WaveformChartHandle, } from './controls';

package/dist/types/utils/formatters.d.ts

@@ -9,6 +9,7 @@ export interface ScientificAxisLabelOptions {
     axisMin?: number;
     axisMax?: number;
     topTickValue?: number;
+    /** Unit prefix for ordinary top ticks; scientific ticks omit it. */
     unit?: string;
 }
 /** @deprecated Use ScientificAxisLabelOptions. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -55,20 +55,21 @@
   "scripts": {
     "dev": "vite",
     "build": "pnpm typecheck && pnpm build:lib && pnpm build:types && pnpm build:demo",
-    "build:wasm": "wasm-pack build wasm --target web --release --out-dir pkg --locked",
+    "build:wasm": "node scripts/prepare-wasm.mjs --force",
     "build:lib": "vite build --config vite.lib.config.ts",
     "build:types": "node scripts/clean-types.mjs && vue-tsc -p tsconfig.lib.json && node scripts/prepare-package-types.mjs",
     "build:demo": "vite build",
     "preview": "vite preview --outDir dist-demo",
-    "typecheck": "pnpm build:wasm && vue-tsc -b",
+    "typecheck": "pnpm prepare:wasm && vue-tsc -b",
     "check:file-length": "node scripts/check-file-length.mjs",
     "lint": "eslint . --max-warnings=0",
     "lint:oxlint": "oxlint . --deny-warnings",
     "lint:all": "pnpm lint:oxlint && pnpm lint",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "test": "pnpm build:wasm && vitest run",
-    "test:coverage": "pnpm build:wasm && vitest run --coverage",
-    "test:package": "node scripts/test-package.mjs"
+    "test": "pnpm prepare:wasm && vitest run",
+    "test:coverage": "pnpm prepare:wasm && vitest run --coverage",
+    "test:package": "node scripts/test-package.mjs",
+    "prepare:wasm": "node scripts/prepare-wasm.mjs"
   }
 }

package/src/App.vue

@@ -26,11 +26,23 @@ import DemoControlPanel from './demo/DemoControlPanel.vue'
 import type { DemoChartModel, DemoControlPanelModel } from './demo/types'
 import { useDemoXAxisLabelControls } from './demo/useDemoXAxisLabelControls'
 
-const fullChartData = createSimulatedWaveformData()
-const displayMode = ref<WaveformDisplayMode>('independent')
+const demoPreset = new URLSearchParams(window.location.search).get('demo')
+const compactNineDemo = demoPreset === 'compact-nine'
+const compactFourteenDemo = demoPreset === 'compact-fourteen'
+const fullChartData = createSimulatedWaveformData(compactFourteenDemo ? 14 : undefined)
+if (compactNineDemo && fullChartData.kind === 'series') {
+  const trackIds = [...new Set(fullChartData.series.map((series) => series.trackId ?? series.id))]
+  const demoTrackIds = new Set(trackIds.slice(0, 9))
+  fullChartData.series = fullChartData.series.filter((series) =>
+    demoTrackIds.has(series.trackId ?? series.id),
+  )
+}
+const displayMode = ref<WaveformDisplayMode>(
+  compactNineDemo || compactFourteenDemo ? 'compact' : 'independent',
+)
 const overlayMode = ref<WaveformOverlayMode>('single-axis')
-const rowCount = ref(4)
-const columnCount = ref(1)
+const rowCount = ref(compactNineDemo ? 5 : 4)
+const columnCount = ref(compactNineDemo || compactFourteenDemo ? 2 : 1)
 const frameBorderColor = ref('#1f2937')
 const frameBorderWidth = ref(2)
 const frameBorderStyle = ref<NonNullable<WaveformFrameStyle['borderStyle']>>('solid')
@@ -42,6 +54,11 @@ const verticalGridVisible = ref(true)
 const verticalGridColor = ref('#dfe5ef')
 const xAxisLineVisible = ref(false)
 const yAxisLineVisible = ref(false)
+const upperPaddingEnabled = ref(true)
+const lowerPaddingEnabled = ref(true)
+const extremaTicksVisible = ref(true)
+const upperPaddingPercent = ref(10)
+const lowerPaddingPercent = ref(10)
 const { controlModel: xAxisLabelControlModel, xAxisLabelFormatter } = useDemoXAxisLabelControls()
 const annotations = ref<WaveformAnnotation[]>([])
 const annotationsVisible = ref(true)
@@ -49,13 +66,14 @@ const cleanView = ref(false)
 const presentationMode = ref(false)
 const showTooltip = ref(true)
 const integerZoom = ref(true)
-const plotMarginTop = ref(18)
-const plotMarginBottom = ref(52)
+const plotMarginTop = ref(10)
+const plotMarginBottom = ref(44)
 const zeroLineVisible = ref(true)
 const zeroLineColor = ref('#ff0000')
 const zeroLineWidth = ref(1)
 const zeroLineOpacity = ref(0.5)
 const zeroLineDash = ref('6 4')
+const toolbarVisible = ref(true)
 const interactionMode = ref<WaveformInteractionMode>('zoom')
 const legendPosition = ref<WaveformLegendPosition>('top-right')
 const legendOrientation = ref<WaveformLegendOrientation>('auto')
@@ -65,10 +83,10 @@ const titleVisible = ref(true)
 const titleText = ref('模拟波形分析')
 const titleAlign = ref<NonNullable<WaveformTitleOptions['align']>>('center')
 const titleFontFamily = ref('"Microsoft YaHei", "微软雅黑", sans-serif')
-const titleFontSize = ref(14)
+const titleFontSize = ref(18)
 const titleRotation = ref(0)
 const titleColor = ref('#1f2937')
-const titleBold = ref(false)
+const titleBold = ref(true)
 const titleItalic = ref(false)
 const titleUnderline = ref(false)
 const controlsOpen = ref(false)
@@ -123,7 +141,14 @@ const axes = computed<WaveformAxesOptions>(() => ({
     lineVisible: xAxisLineVisible.value,
     ...(xAxisLabelFormatter.value ? { labelFormatter: xAxisLabelFormatter.value } : {}),
   },
-  y: { lineVisible: yAxisLineVisible.value },
+  y: {
+    lineVisible: yAxisLineVisible.value,
+    upperPaddingEnabled: upperPaddingEnabled.value,
+    lowerPaddingEnabled: lowerPaddingEnabled.value,
+    extremaTicksVisible: extremaTicksVisible.value,
+    upperPaddingRatio: upperPaddingPercent.value / 100,
+    lowerPaddingRatio: lowerPaddingPercent.value / 100,
+  },
 }))
 const zeroLine = computed<WaveformZeroLineOptions>(() => ({
   visible: zeroLineVisible.value,
@@ -243,7 +268,17 @@ function mergeIndependentWindow(
   }
 }
 
+let pendingCommandId: string | undefined
+let pendingPayloads: WaveformZoomEndPayload[] = []
 async function handleZoomEnd(payload: WaveformZoomEndPayload) {
+  if (payload.action === 'fit') return
+  if (payload.commandId && payload.commandId === pendingCommandId) {
+    pendingPayloads.push(payload)
+    return
+  }
+  pendingCommandId = payload.commandId
+  const batch = [payload]
+  pendingPayloads = batch
   // Demo-only sequence number cancellation. Production code should use AbortController
   // to cancel in-flight requests when a newer zoom gesture arrives.
   const requestSequence = ++zoomRequestSequence
@@ -252,11 +287,16 @@ async function handleZoomEnd(payload: WaveformZoomEndPayload) {
 
   // Demo-only stand-in for the backend response. Production code should replace this
   // with a request using payload.start/payload.end and the optional channel metadata.
-  const responseData = filterWaveformData(fullChartData, payload.start, payload.end)
-  chartData.value =
-    payload.trackIndex !== undefined && payload.seriesIds?.length
-      ? mergeIndependentWindow(chartData.value, responseData, payload.seriesIds)
-      : responseData
+  let nextData = chartData.value
+  batch.forEach((item) => {
+    const responseData = filterWaveformData(fullChartData, item.start, item.end)
+    nextData =
+      item.trackIndex !== undefined && item.seriesIds?.length
+        ? mergeIndependentWindow(nextData, responseData, item.seriesIds)
+        : responseData
+  })
+  chartData.value = nextData
+  pendingCommandId = undefined
 }
 
 function resetWaveformViewport() {
@@ -297,6 +337,7 @@ onMounted(() => window.addEventListener('keydown', handleWindowKeydown))
 onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown))
 
 const controlPanelModel = reactive({
+  toolbarVisible,
   controlsOpen,
   displayMode,
   overlayMode,
@@ -324,6 +365,11 @@ const controlPanelModel = reactive({
   verticalGridColor,
   xAxisLineVisible,
   yAxisLineVisible,
+  upperPaddingEnabled,
+  lowerPaddingEnabled,
+  extremaTicksVisible,
+  upperPaddingPercent,
+  lowerPaddingPercent,
   ...xAxisLabelControlModel,
   frameBorderColor,
   frameBackgroundColor,
@@ -354,6 +400,7 @@ const controlPanelModel = reactive({
 }) satisfies DemoControlPanelModel
 
 const chartModel = reactive({
+  toolbarVisible,
   data: displayChartData,
   initialXDomain,
   displayMode,

package/src/components/WaveformChart.css

@@ -117,8 +117,17 @@
   font-size: 12px;
 }
 
+.waveform-chart--interaction-pan:not(.waveform-chart--presentation) .waveform-chart__overlay {
+  cursor: grab;
+}
+.waveform-chart--interaction-pan.waveform-chart--panning .waveform-chart__overlay {
+  cursor: grabbing;
+}
+.waveform-chart--interaction-none .waveform-chart__overlay {
+  cursor: default;
+}
+
 .waveform-chart--edge-compact .waveform-chart__x-label {
-  font-size: 18px;
   font-weight: 600;
 }
 

package/src/components/WaveformChart.vue

@@ -38,6 +38,12 @@ const emit = defineEmits<WaveformChartEmit>()
 const controller = useWaveformChartController(props as ResolvedWaveformChartProps, emit)
 
 defineExpose({
+  exportImage: controller.exportImage,
+  zoomIn: controller.zoomIn,
+  zoomOut: controller.zoomOut,
+  fitToData: controller.fitToData,
+  setInteractionMode: controller.setInteractionMode,
+  getControlState: controller.getControlState,
   resetViewport: controller.resetViewport,
   setViewportDomain: controller.setViewportDomain,
 })

package/src/components/WaveformChartView.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
+import WaveformToolbar from './controls/WaveformToolbar.vue'
 import { Pagination } from 'ant-design-vue'
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 
 import { WaveformAnnotationContextMenu, WaveformAnnotationLayer } from './annotation'
 import WaveformAnnotationEditor from './annotation/WaveformAnnotationEditor.vue'
 import type { WaveformChartController } from './core/useWaveformChartController'
-import type { TrackLayout } from './core/types'
 import { WaveformHoverHost } from './interaction'
 import { WaveformHoverLayer, WaveformLegend, WaveformTrack } from './rendering'
+import { compactFramePath } from './rendering/compactFrame'
 
 const props = defineProps<{ controller: WaveformChartController }>()
+const compactFrameInset = computed(() => {
+  const width = props.controller.frameStyle?.borderWidth
+  return props.controller.isEdgeCompact
+    ? (typeof width === 'number' && Number.isFinite(width) && width >= 0 ? width : 1) / 2
+    : 0
+})
 const {
   displayMode,
   activeInteractionMode,
@@ -55,7 +62,6 @@ const {
   cancelViewportDrag,
   handlePointerLeave,
   handleAnnotationClick,
-  handleAnnotationContextMenu,
   resolveFrameNumber,
   frameStyle,
   axes,
@@ -111,21 +117,6 @@ function handleChartPointerLeave() {
   pointerInsideChart.value = false
   handlePointerLeave.value()
 }
-
-function sharesFrameTop(track: TrackLayout): boolean {
-  return (
-    displayMode.value === 'compact' &&
-    trackLayouts.value.some(
-      (above) =>
-        !above.isEmpty &&
-        above !== track &&
-        above.column === track.column &&
-        Math.abs(above.left - track.left) < 1e-6 &&
-        Math.abs(above.width - track.width) < 1e-6 &&
-        Math.abs(above.top + above.height - track.top) < 1e-6,
-    )
-  )
-}
 </script>
 
 <template>
@@ -205,7 +196,7 @@ function sharesFrameTop(track: TrackLayout): boolean {
 
       <g :transform="`translate(${resolvedChartLeftMargin}, ${chartTopMargin})`">
         <g
-          v-if="displayMode !== 'compact' && !isCleanView"
+          v-if="displayMode !== 'compact' && !hasWaveformData && !isCleanView"
           class="waveform-chart__grid-slots"
           aria-hidden="true"
         >
@@ -238,7 +229,6 @@ function sharesFrameTop(track: TrackLayout): boolean {
           @pointercancel="cancelViewportDrag"
           @pointerleave="handlePointerLeave"
           @click="handleAnnotationClick"
-          @contextmenu="handleAnnotationContextMenu"
         />
 
         <!-- 轨道渲染 -->
@@ -246,21 +236,28 @@ function sharesFrameTop(track: TrackLayout): boolean {
           v-for="track in trackLayouts"
           :key="`${track.index}-${track.id}`"
           :track="track"
+          :frame-path="
+            displayMode === 'compact'
+              ? compactFramePath(track, trackLayouts, compactFrameInset)
+              : undefined
+          "
           :clip-path-id="clipPathId"
           :inner-width="innerWidth"
           :zoomable="zoomable"
           :interactive="!isPresentationMode"
           :display-mode="displayMode"
           :interaction-mode="activeInteractionMode"
-          :frame-number="resolveFrameNumber(track.id)"
+          :frame-number="
+            resolveFrameNumber(track.id, (currentPage - 1) * getPageSize(gridOptions) + track.index)
+          "
           :frame-style="frameStyle"
           :axes="axes"
           :show-axis-units="unitDisplayMode === 'axis'"
-          :show-label-units="unitDisplayMode === 'channel-label-or-legend'"
+          :show-label-units="
+            unitDisplayMode === 'channel-label-or-legend' || unitDisplayMode === 'channel-label'
+          "
           :hide-y-axis-titles="hideYAxisTitles"
-          :contain-y-axis-endpoints="isEdgeCompact"
           :contain-frame-stroke="isEdgeCompact"
-          :omit-frame-top="sharesFrameTop(track)"
           :clean-view="isCleanView"
           :zero-line="resolvedZeroLine"
           :time-unit="timeUnit"
@@ -271,7 +268,6 @@ function sharesFrameTop(track: TrackLayout): boolean {
           @pointer-cancel="cancelViewportDrag"
           @pointer-leave="handlePointerLeave"
           @click="handleAnnotationClick($event, track.index)"
-          @contextmenu="handleAnnotationContextMenu($event, track.index)"
         />
 
         <WaveformHoverLayer
@@ -292,10 +288,12 @@ function sharesFrameTop(track: TrackLayout): boolean {
         />
 
         <WaveformAnnotationLayer
+          :cancel-key="activeInteractionMode"
+          :data-version="controller.data"
           v-if="!isCleanView"
           :annotations="renderedAnnotations"
           :visible="annotationsVisible"
-          :interactive="!isPresentationMode"
+          :interactive="!isPresentationMode && activeInteractionMode !== 'none'"
           @contextmenu="handleExistingAnnotationContextMenu"
           @drag-start="beginAnnotationDrag"
           @move="handleAnnotationMove"
@@ -331,6 +329,7 @@ function sharesFrameTop(track: TrackLayout): boolean {
       <text
         v-if="resolvedXLabel && !isCleanView"
         class="waveform-chart__label waveform-chart__x-label"
+        :style="isEdgeCompact ? { fontSize: titleTextStyle.fontSize } : undefined"
         :x="plotCenterX"
         :y="xAxisTitleY"
         text-anchor="middle"
@@ -349,6 +348,8 @@ function sharesFrameTop(track: TrackLayout): boolean {
       </text>
     </svg>
 
+    <WaveformToolbar :controller="controller" />
+
     <Pagination
       v-if="paginationVisible"
       class="waveform-chart__pagination"

package/src/components/annotation/WaveformAnnotationLayer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onBeforeUnmount } from 'vue'
 
 import type { RenderedAnnotation } from './types'
 import { ANNOTATION_TEXT_FONT, ANNOTATION_TEXT_LINE_HEIGHT } from './markup'
@@ -8,6 +8,8 @@ interface Props {
   annotations: RenderedAnnotation[]
   visible: boolean
   interactive?: boolean
+  cancelKey?: string
+  dataVersion?: unknown
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -211,6 +213,9 @@ watch(
   },
 )
 
+watch([() => props.cancelKey, () => props.dataVersion, () => props.visible], cancelActiveDrag)
+onBeforeUnmount(cancelActiveDrag)
+
 function handleContextMenu(annotationId: string, event: MouseEvent) {
   if (!props.interactive) return
   event.preventDefault()

package/src/components/annotation/useWaveformChartAnnotations.ts

@@ -257,17 +257,21 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
     if (
       isPresentationMode.value ||
       !props.annotationsVisible ||
+      event.button !== 0 ||
       activeInteractionMode.value !== 'annotation'
     ) {
       return
     }
     const candidateContext = resolveAnnotationCandidates(event, trackIndex)
-    if (!candidateContext) return
+    if (!candidateContext || !candidateContext.candidates.length) return
     const nearby = nearbyCandidates(candidateContext.candidates)
-    if (!nearby.length) return
     event.preventDefault()
     event.stopPropagation()
-    beginCreate(nearby[0], candidateContext.editorAnchor, candidateContext.candidates)
+    beginCreate(
+      nearby[0] ?? candidateContext.candidates[0],
+      candidateContext.editorAnchor,
+      candidateContext.candidates,
+    )
   }
 
   function handleNativeContextMenu(event: MouseEvent) {
@@ -281,20 +285,6 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
     event.preventDefault()
   }
 
-  function handleAnnotationContextMenu(event: MouseEvent, trackIndex?: number) {
-    if (isPresentationMode.value || !props.annotationsVisible) return
-    event.preventDefault()
-    event.stopPropagation()
-    const candidateContext = resolveAnnotationCandidates(event, trackIndex)
-    if (!candidateContext || !candidateContext.candidates.length) return
-    const nearby = nearbyCandidates(candidateContext.candidates)
-    beginCreate(
-      nearby[0] ?? candidateContext.candidates[0],
-      candidateContext.editorAnchor,
-      candidateContext.candidates,
-    )
-  }
-
   function handleExistingAnnotationContextMenu(annotationId: string, event: MouseEvent) {
     if (isPresentationMode.value || !props.annotationsVisible || !container.value) return
     editorSeriesOptions.value = []
@@ -387,7 +377,6 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
     resolveTrackAtPointer,
     handleAnnotationClick,
     handleNativeContextMenu,
-    handleAnnotationContextMenu,
     handleExistingAnnotationContextMenu,
     handleAnnotationMove,
     editContextAnnotation,