waveform-analysis 0.1.71 → 0.1.73

package/src/components/controls/WaveformToolbar.vue

@@ -0,0 +1,247 @@
+<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 + 2}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: 2px;
+  right: 2px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+  max-width: calc(100% - 4px);
+  background: rgb(255 255 255 / 96%);
+}
+.waveform-toolbar--collapsed > :not(.waveform-toolbar__toggle):not(.waveform-toolbar__feedback) {
+  display: none;
+}
+.waveform-toolbar--top-left {
+  left: 2px;
+  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;
+  padding-left: 8px;
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 24px;
+  height: 22px;
+  padding: 3px 4px;
+  font-size: 12px;
+  line-height: normal;
+  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: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+select {
+  min-width: 0;
+  max-width: 120px;
+  box-sizing: border-box;
+  height: 22px;
+  padding: 0 2px;
+  font-size: 12px;
+  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]]))
+}

package/src/components/controls/chartSnapshot.ts

@@ -0,0 +1,132 @@
+import { snapshotTitle } from './snapshotTitle'
+const NS = 'http://www.w3.org/2000/svg'
+function svgNode(name: string, attributes: Record<string, string | number> = {}) {
+  const node = document.createElementNS(NS, name)
+  Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)))
+  return node
+}
+const styleKeys = [
+  'fill',
+  'fill-opacity',
+  'stroke',
+  'stroke-width',
+  'stroke-opacity',
+  'stroke-dasharray',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'opacity',
+  'font-family',
+  'font-size',
+  'font-weight',
+  'font-style',
+  'text-decoration',
+  'letter-spacing',
+  'text-anchor',
+  'dominant-baseline',
+  'visibility',
+  'display',
+]
+export function copySvgStyles(source: Element, clone: Element) {
+  const originals = [source, ...source.querySelectorAll('*')]
+  const copies = [clone, ...clone.querySelectorAll('*')]
+  originals.forEach((node, i) => {
+    const target = copies[i] as SVGElement
+    const style = getComputedStyle(node)
+    styleKeys.forEach((key) => {
+      const value = style.getPropertyValue(key)
+      if (value) target.style.setProperty(key, value)
+    })
+    // Make fragment references independent of the host URL.
+    for (const attr of ['clip-path', 'mask', 'filter']) {
+      const value = target.getAttribute(attr)
+      if (value?.includes('#'))
+        target.setAttribute(attr, `url(#${value.split('#')[1]!.replace(/[)'"].*$/, '')})`)
+    }
+  })
+}
+function replaceLegends(source: SVGSVGElement, clone: SVGSVGElement) {
+  const originals = source.querySelectorAll('foreignObject')
+  clone.querySelectorAll('foreignObject').forEach((foreign, index) => {
+    const original = originals[index]!
+    const origin = original.getBoundingClientRect()
+    const group = svgNode('g', { class: 'waveform-export-legend' })
+    const width = Number(original.getAttribute('width')) || origin.width
+    const ratio = origin.width > 0 ? width / origin.width : 1
+    const panel = original.querySelector('.waveform-legend__panel')
+    if (panel) {
+      const rect = panel.getBoundingClientRect()
+      group.appendChild(
+        svgNode('rect', {
+          x: (rect.left - origin.left) * ratio,
+          y: (rect.top - origin.top) * ratio,
+          width: rect.width * ratio,
+          height: rect.height * ratio,
+          rx: 4,
+          fill: getComputedStyle(panel).backgroundColor,
+          stroke: '#d0d5dd',
+        }),
+      )
+    }
+    original.querySelectorAll('.waveform-legend__item').forEach((item) => {
+      const rect = item.getBoundingClientRect()
+      const row = svgNode('g', {
+        transform: `translate(${(rect.left - origin.left) * ratio},${(rect.top - origin.top) * ratio})`,
+        opacity: getComputedStyle(item).opacity,
+      })
+      const swatch = item.querySelector('svg')
+      if (swatch) {
+        const copy = swatch.cloneNode(true) as SVGSVGElement
+        copySvgStyles(swatch, copy)
+        copy.setAttribute('width', '26')
+        copy.setAttribute('height', '16')
+        row.appendChild(copy)
+      }
+      const label = item.querySelector('.waveform-legend__label')
+      if (label) {
+        const text = svgNode('text', {
+          x: 32,
+          y: 12,
+          fill: getComputedStyle(label).color,
+          'font-size': 12,
+          'font-family': 'sans-serif',
+          'text-decoration': getComputedStyle(label).textDecorationLine,
+        })
+        text.textContent = label.textContent
+        row.appendChild(text)
+      }
+      group.appendChild(row)
+    })
+    foreign.replaceWith(group)
+  })
+}
+export function createChartSnapshot(
+  container: HTMLElement,
+  source: SVGSVGElement,
+  width: number,
+  height: number,
+  titleHeight: number,
+  background?: string,
+) {
+  const root = svgNode('svg', {
+    width,
+    height,
+    viewBox: `0 0 ${width} ${height}`,
+  }) as SVGSVGElement
+  const color = background ?? getComputedStyle(container).backgroundColor
+  root.appendChild(svgNode('rect', { width, height, fill: color || '#fff' }))
+  const clone = source.cloneNode(true) as SVGSVGElement
+  copySvgStyles(source, clone)
+  replaceLegends(source, clone)
+  clone
+    .querySelectorAll(
+      '.waveform-chart__overlay, .waveform-chart__hover-layer, .waveform-chart__zoom-selection',
+    )
+    .forEach((n) => n.remove())
+  clone.setAttribute('y', String(titleHeight))
+  clone.removeAttribute('role')
+  clone.removeAttribute('aria-label')
+  root.appendChild(clone)
+  const title = snapshotTitle(container, titleHeight, width)
+  if (title) root.appendChild(title)
+  return new XMLSerializer().serializeToString(root)
+}

package/src/components/controls/snapshotTitle.ts

@@ -0,0 +1,73 @@
+const NS = 'http://www.w3.org/2000/svg'
+/** Recreate the HTML title in SVG, retaining wrapping, rotation and fitted scale. */
+export function snapshotTitle(container: HTMLElement, titleHeight: number, width: number) {
+  const title = container.querySelector<HTMLElement>('.waveform-chart__title-text')
+  if (!title) return undefined
+  const style = getComputedStyle(title)
+  const rect = title.getBoundingClientRect()
+  const origin = container.getBoundingClientRect()
+  const ratio = origin.width ? width / origin.width : 1
+  const group = document.createElementNS(NS, 'g')
+  const matrix =
+    typeof DOMMatrix !== 'undefined' && style.transform !== 'none' && style.transform
+      ? new DOMMatrix(style.transform)
+      : undefined
+  const angle = matrix ? (Math.atan2(matrix.b, matrix.a) * 180) / Math.PI : 0
+  const scale = matrix ? Math.hypot(matrix.a, matrix.b) : 1
+  group.setAttribute(
+    'transform',
+    `translate(${(rect.left - origin.left + rect.width / 2) * ratio},${titleHeight / 2}) rotate(${angle}) scale(${scale})`,
+  )
+  const text = document.createElementNS(NS, 'text')
+  text.setAttribute('fill', style.color)
+  for (const key of [
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'text-decoration',
+    'letter-spacing',
+  ])
+    text.style.setProperty(key, style.getPropertyValue(key))
+  const fontSize = parseFloat(style.fontSize) || 14
+  const lineHeight = parseFloat(style.lineHeight) || fontSize * 1.4
+  const logicalWidth = title.clientWidth || parseFloat(style.width) || rect.width || width
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  if (ctx) ctx.font = `${style.fontStyle} ${style.fontWeight} ${fontSize}px ${style.fontFamily}`
+  const lines: string[] = []
+  let line = ''
+  for (const char of title.textContent ?? '') {
+    if (char === '\n') {
+      lines.push(line)
+      line = ''
+      continue
+    }
+    const measured = ctx?.measureText(line + char).width ?? (line.length + 1) * fontSize
+    if (style.whiteSpace !== 'nowrap' && line && measured > logicalWidth) {
+      lines.push(line)
+      line = char
+    } else line += char
+  }
+  lines.push(line)
+  const align = style.textAlign
+  text.setAttribute(
+    'text-anchor',
+    align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle',
+  )
+  lines.forEach((value, index) => {
+    const span = document.createElementNS(NS, 'tspan')
+    span.setAttribute(
+      'x',
+      String(align === 'left' ? -logicalWidth / 2 : align === 'right' ? logicalWidth / 2 : 0),
+    )
+    span.setAttribute('y', String((index - (lines.length - 1) / 2) * lineHeight))
+    span.setAttribute('dominant-baseline', 'middle')
+    span.textContent = value
+    text.appendChild(span)
+  })
+  canvas.width = 0
+  canvas.height = 0
+  group.appendChild(text)
+  return group
+}

package/src/components/controls/toolbarRegistry.ts

@@ -0,0 +1,92 @@
+import type {
+  WaveformControlState,
+  WaveformToolbarItem,
+  WaveformToolbarOptions,
+} from '../../types/controls'
+import type { useChartCommands } from './useChartCommands'
+
+type Commands = Pick<ReturnType<typeof useChartCommands>, 'execute' | 'setInteractionMode'>
+interface ButtonDefinition {
+  id: WaveformToolbarItem
+  label: string
+  icon: string
+  group: 'mode' | 'viewport' | 'export'
+  active: (state: WaveformControlState) => boolean
+  enabled: (state: WaveformControlState, trackId?: string) => boolean
+  run: (commands: Commands, trackId?: string) => void
+}
+const paths = {
+  'zoom-box': 'M3 3h6M3 3v6M21 3h-6M21 3v6M3 21h6M3 21v-6M21 21h-6M21 21v-6',
+  pan: 'M12 2v20M2 12h20M8 6l4-4 4 4M8 18l4 4 4-4M6 8l-4 4 4 4M18 8l4 4-4 4',
+  annotate: 'M4 4h16v12H9l-5 4V4M8 8h8M8 12h5',
+  'zoom-in': 'M12 5v14M5 12h14',
+  'zoom-out': 'M5 12h14',
+  reset: 'M4 11a8 8 0 1 1 1 6M4 4v7h7',
+  fit: 'M8 3H3v5M16 3h5v5M3 16v5h5M21 16v5h-5M8 8h8v8H8z',
+  export: 'M12 3v12M7 10l5 5 5-5M4 15v6h16v-6',
+}
+const modeItems = { 'zoom-box': 'zoom', pan: 'pan', annotate: 'annotation' } as const
+const labels = {
+  'zoom-box': '框选缩放',
+  pan: '平移',
+  annotate: '注解',
+  'zoom-in': '放大',
+  'zoom-out': '缩小',
+  reset: '重置',
+  fit: '显示全部',
+  export: '导出图片',
+}
+export const defaultToolbarItems: WaveformToolbarItem[] = [
+  'zoom-box',
+  'pan',
+  'annotate',
+  'zoom-in',
+  'zoom-out',
+  'reset',
+  'fit',
+  'export',
+]
+export const toolbarRegistry = Object.fromEntries(
+  defaultToolbarItems.map((id) => {
+    const mode = modeItems[id as keyof typeof modeItems]
+    const action =
+      id === 'zoom-in' || id === 'zoom-out' || id === 'reset' || id === 'fit' ? id : undefined
+    return [
+      id,
+      {
+        id,
+        label: labels[id],
+        icon: paths[id],
+        group: mode ? 'mode' : action ? 'viewport' : 'export',
+        active: (state: WaveformControlState) => !!mode && state.mode === mode,
+        enabled: (state: WaveformControlState, trackId?: string) =>
+          action && trackId
+            ? !!state.targets.find((t) => t.trackId === trackId)?.available[action]
+            : state.available[id],
+        run: (commands: Commands, trackId?: string) => {
+          if (mode) commands.setInteractionMode(mode)
+          else if (action)
+            commands.execute(action, trackId ? { trackId } : {}, undefined, 'toolbar')
+        },
+      } satisfies ButtonDefinition,
+    ]
+  }),
+) as Record<WaveformToolbarItem, ButtonDefinition>
+export function resolveToolbar(options?: boolean | WaveformToolbarOptions) {
+  const config = typeof options === 'object' ? options : {}
+  const items = [...new Set(config.items ?? defaultToolbarItems)].filter(
+    (id) => toolbarRegistry[id],
+  )
+  const groups: ButtonDefinition[][] = []
+  items.forEach((id) => {
+    const item = toolbarRegistry[id]
+    if (groups.at(-1)?.[0]?.group === item.group) groups.at(-1)!.push(item)
+    else groups.push([item])
+  })
+  return {
+    visible: !!options && config.visible !== false && items.length > 0,
+    display: config.display ?? 'hover',
+    position: config.position ?? 'top-right',
+    groups,
+  }
+}