waveform-analysis 0.1.70 → 0.1.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "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,10 @@ 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 upperPaddingPercent = ref(10)
+const lowerPaddingPercent = ref(10)
 const { controlModel: xAxisLabelControlModel, xAxisLabelFormatter } = useDemoXAxisLabelControls()
 const annotations = ref<WaveformAnnotation[]>([])
 const annotationsVisible = ref(true)
@@ -49,13 +65,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 +82,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 +140,13 @@ 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,
+    upperPaddingRatio: upperPaddingPercent.value / 100,
+    lowerPaddingRatio: lowerPaddingPercent.value / 100,
+  },
 }))
 const zeroLine = computed<WaveformZeroLineOptions>(() => ({
   visible: zeroLineVisible.value,
@@ -243,7 +266,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 +285,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 +335,7 @@ onMounted(() => window.addEventListener('keydown', handleWindowKeydown))
 onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown))
 
 const controlPanelModel = reactive({
+  toolbarVisible,
   controlsOpen,
   displayMode,
   overlayMode,
@@ -324,6 +363,10 @@ const controlPanelModel = reactive({
   verticalGridColor,
   xAxisLineVisible,
   yAxisLineVisible,
+  upperPaddingEnabled,
+  lowerPaddingEnabled,
+  upperPaddingPercent,
+  lowerPaddingPercent,
   ...xAxisLabelControlModel,
   frameBorderColor,
   frameBackgroundColor,
@@ -354,6 +397,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,
@@ -111,21 +118,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 +197,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"
         >
@@ -246,21 +238,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"
@@ -292,10 +291,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 +332,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 +351,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

@@ -282,7 +282,12 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
   }
 
   function handleAnnotationContextMenu(event: MouseEvent, trackIndex?: number) {
-    if (isPresentationMode.value || !props.annotationsVisible) return
+    if (
+      isPresentationMode.value ||
+      !props.annotationsVisible ||
+      activeInteractionMode.value === 'none'
+    )
+      return
     event.preventDefault()
     event.stopPropagation()
     const candidateContext = resolveAnnotationCandidates(event, trackIndex)

package/src/components/controls/WaveformToolbar.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import type { WaveformChartController } from '../core/useWaveformChartController'
+import { resolveToolbar } from './toolbarRegistry'
+const props = defineProps<{ controller: WaveformChartController }>()
+const config = computed(() => resolveToolbar(props.controller.toolbar))
+const compact = computed(() => props.controller.chartWidth < 440)
+const expanded = ref(false)
+const selected = ref('')
+const menu = ref(false)
+const busy = ref(false)
+const feedback = ref('')
+let disposed = false
+onBeforeUnmount(() => {
+  disposed = true
+})
+watch(
+  () => props.controller.controlState,
+  (state) => {
+    if (!state.independent || !state.targets.some((t) => t.trackId === selected.value))
+      selected.value = ''
+  },
+)
+watch(
+  () => config.value.visible,
+  () => {
+    menu.value = false
+  },
+)
+async function download(format: 'png' | 'svg') {
+  menu.value = false
+  busy.value = true
+  feedback.value = ''
+  try {
+    const blob = await props.controller.exportImage({ format })
+    if (disposed) return
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    try {
+      link.href = url
+      link.download = `waveform.${format}`
+      document.body.appendChild(link)
+      link.click()
+    } finally {
+      link.remove()
+      URL.revokeObjectURL(url)
+    }
+  } catch (error) {
+    if (!disposed) feedback.value = error instanceof Error ? error.message : '导出失败，请重试'
+  } finally {
+    busy.value = false
+  }
+}
+function toggleExpanded() {
+  expanded.value = !expanded.value
+  menu.value = false
+}
+function escape() {
+  menu.value = false
+  expanded.value = false
+  props.controller.cancelViewportDrag()
+}
+</script>
+<template>
+  <div
+    v-if="config.visible"
+    class="waveform-toolbar"
+    :class="[
+      `waveform-toolbar--${config.display}`,
+      `waveform-toolbar--${config.position}`,
+      { 'waveform-toolbar--collapsed': compact && !expanded },
+    ]"
+    :style="{ top: `${controller.titleAreaHeight + 4}px` }"
+    role="toolbar"
+    aria-label="波形工具栏"
+    @pointerdown.stop
+    @click.stop
+    @dblclick.stop
+    @wheel.stop
+    @contextmenu.stop
+    @keydown.esc.stop="escape"
+  >
+    <button
+      v-if="compact"
+      type="button"
+      class="waveform-toolbar__toggle"
+      aria-label="图表工具"
+      :aria-expanded="expanded"
+      @click="toggleExpanded"
+    >
+      工具
+    </button>
+    <select v-if="controller.controlState.independent" v-model="selected" aria-label="操作图框">
+      <option value="">当前页全部</option>
+      <option
+        v-for="target in controller.controlState.targets"
+        :key="target.trackId"
+        :value="target.trackId"
+      >
+        {{ target.label }}
+      </option>
+    </select>
+    <span v-else class="waveform-toolbar__scope">共享范围</span>
+    <div
+      v-for="(group, index) in config.groups"
+      :key="index"
+      class="waveform-toolbar__group"
+      :data-group="group[0]?.group"
+    >
+      <button
+        v-for="item in group"
+        :key="item.id"
+        type="button"
+        :data-command="item.id"
+        :title="item.label"
+        :aria-label="item.label"
+        :aria-pressed="item.group === 'mode' ? item.active(controller.controlState) : undefined"
+        :aria-expanded="item.id === 'export' ? menu : undefined"
+        :disabled="
+          !item.enabled(controller.controlState, selected || undefined) ||
+          (item.id === 'export' && busy)
+        "
+        @click="item.id === 'export' ? (menu = !menu) : item.run(controller, selected || undefined)"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
+      </button>
+    </div>
+    <div v-if="menu" class="waveform-toolbar__menu" role="group" aria-label="图片格式">
+      <button type="button" @click="download('png')">下载 PNG</button>
+      <button type="button" @click="download('svg')">下载 SVG</button>
+    </div>
+    <span v-if="busy || feedback" class="waveform-toolbar__feedback" role="status">{{
+      busy ? '正在导出…' : feedback
+    }}</span>
+  </div>
+</template>
+<style scoped>
+.waveform-toolbar {
+  position: absolute;
+  z-index: 10;
+  top: 4px;
+  right: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  max-width: calc(100% - 12px);
+  padding: 4px;
+  background: rgb(255 255 255 / 96%);
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px #0001;
+}
+.waveform-toolbar--collapsed > :not(.waveform-toolbar__toggle):not(.waveform-toolbar__feedback) {
+  display: none;
+}
+.waveform-toolbar--top-left {
+  left: 6px;
+  right: auto;
+}
+.waveform-toolbar--hover {
+  opacity: 0;
+  pointer-events: none;
+}
+.waveform-chart:hover .waveform-toolbar--hover,
+.waveform-toolbar:focus-within,
+.waveform-toolbar:has(.waveform-toolbar__menu),
+.waveform-toolbar:has(.waveform-toolbar__feedback) {
+  opacity: 1;
+  pointer-events: auto;
+}
+.waveform-toolbar__group {
+  display: flex;
+  gap: 2px;
+}
+.waveform-toolbar__group + .waveform-toolbar__group {
+  border-left: 1px solid #d0d5dd;
+  padding-left: 4px;
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  min-height: 30px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #344054;
+  cursor: pointer;
+}
+button:hover,
+button[aria-pressed='true'] {
+  background: #e6f4ff;
+  color: #0960bd;
+}
+button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+button:focus-visible,
+select:focus-visible {
+  outline: 2px solid #0960bd;
+  outline-offset: 1px;
+}
+svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+select {
+  min-width: 0;
+  max-width: 120px;
+  height: 30px;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  background: white;
+}
+.waveform-toolbar__scope {
+  font-size: 12px;
+  color: #667085;
+}
+.waveform-toolbar__menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  padding: 6px;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  background: white;
+  display: flex;
+}
+.waveform-toolbar__feedback {
+  flex-basis: 100%;
+  font-size: 12px;
+  max-width: 300px;
+}
+@media (hover: none) {
+  .waveform-toolbar--hover {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+</style>

package/src/components/controls/chartExportOptions.ts

@@ -0,0 +1,32 @@
+import type { ResolvedWaveformChartProps } from '../core/waveformChartTypes'
+
+/** Presentation changes invalidate an in-flight image snapshot, without serializing input data. */
+export function chartExportOptions(props: ResolvedWaveformChartProps) {
+  const keys = [
+    'annotations',
+    'annotationsVisible',
+    'title',
+    'axes',
+    'frameStyle',
+    'frameNumber',
+    'frameNumbers',
+    'legend',
+    'cleanView',
+    'rendering',
+    'displayMode',
+    'overlayMode',
+    'initialXDomain',
+    'initialXDomains',
+    'yDomain',
+    'yDomains',
+    'grid',
+    'plotMargin',
+    'xLabel',
+    'yLabel',
+    'timeUnit',
+    'zeroLine',
+    'layoutPreset',
+    'unitDisplayMode',
+  ] as const satisfies readonly (keyof ResolvedWaveformChartProps)[]
+  return Object.fromEntries(keys.map((key) => [key, props[key]]))
+}