waveform-analysis 0.1.70 → 0.1.72

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,
+  }
+}

package/src/components/controls/useChartCommands.ts

@@ -0,0 +1,294 @@
+import { computed, nextTick, watch, type Ref, type ShallowRef } from 'vue'
+import type { ZoomTransform } from 'd3'
+import type {
+  WaveformControlAction,
+  WaveformControlResult,
+  WaveformControlState,
+  WaveformControlTarget,
+  WaveformTargetResult,
+  WaveformViewportSnapshot,
+} from '../../types/controls'
+import type { TrackLayout } from '../core/types'
+import type { useWaveformLayout } from '../core/useWaveformLayout'
+import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
+import { applyXDomainStrategy } from '../core/xDomain'
+import { paddedDomain } from '../../utils'
+import { transformForDomain } from '../interaction/zoomConstraints'
+import { constrainViewportZoom } from '../interaction/remoteViewport'
+import { normalizeIntegerZoomDomain } from '../interaction/integerZoom'
+import type { useControlMode } from './useControlMode'
+
+type Domain = [number, number]
+interface Context {
+  props: ResolvedWaveformChartProps
+  emit: WaveformChartEmit
+  layout: ReturnType<typeof useWaveformLayout>
+  mode: ReturnType<typeof useControlMode>
+  boundaries: ShallowRef<Record<string, Domain>>
+  independentTransforms: ShallowRef<ZoomTransform[]>
+  sharedTransform: ShallowRef<ZoomTransform>
+  independentYDomains: Ref<Record<number, Domain>>
+  sharedYDomains: Ref<Record<string, Domain>>
+  cancel: () => void
+  configure: () => void
+  legacyReset: (index?: number) => void
+  legacySet: (domain: Domain, index?: number) => void
+}
+const same = (a: Domain, b: Domain) => a.every((v, i) => Math.abs(v - b[i]!) < 1e-12)
+export function useChartCommands(c: Context) {
+  let sequence = 0
+  const independent = computed(() => c.props.displayMode === 'independent')
+  const groups = () =>
+    independent.value
+      ? c.layout.trackLayouts.value.map((t) => ({ id: t.id, tracks: [t] }))
+      : [{ id: 'shared', tracks: c.layout.trackLayouts.value }]
+  const snapshot = (tracks: TrackLayout[]): WaveformViewportSnapshot => ({
+    xDomain: [
+      ...(independent.value ? tracks[0]!.xScale.domain() : c.layout.sharedZoomDomain.value),
+    ] as Domain,
+    yDomains: Object.fromEntries(
+      tracks.flatMap((t) => t.seriesPaths.map((p) => [p.series.id, p.yScale.domain() as Domain])),
+    ),
+  })
+  const boundary = (tracks: TrackLayout[], original = false): Domain =>
+    independent.value
+      ? (original ? c.layout.resolveOriginalTrackDomain : c.layout.resolveInitialTrackDomain)(
+          tracks[0]!,
+        )
+      : (original ? c.layout.originalXDomain : c.layout.initialXDomain).value
+  const clearBoundaries = (index?: number) => {
+    if (!independent.value || index === undefined) c.boundaries.value = {}
+    else {
+      const id = c.layout.trackLayouts.value.find((t) => t.index === index)?.id
+      const next = { ...c.boundaries.value }
+      if (id) delete next[id]
+      c.boundaries.value = next
+    }
+  }
+  function restoreInitialBoundaries() {
+    if (!Object.keys(c.boundaries.value).length) return
+    const previous = groups()
+      .filter((g) => g.tracks.length)
+      .map((g) => ({
+        index: independent.value ? g.tracks[0]!.index : undefined,
+        domain: snapshot(g.tracks).xDomain,
+      }))
+    clearBoundaries()
+    previous.forEach((p) => c.legacySet(p.domain, p.index))
+  }
+  function plan(
+    action: WaveformControlAction,
+    target: WaveformControlTarget = {},
+    domain?: Domain,
+  ) {
+    const all = groups()
+    if (
+      target.trackId !== undefined &&
+      (!independent.value || !all.some((g) => g.id === target.trackId))
+    )
+      return { error: 'invalid-target' as const, entries: [] }
+    if (
+      action === 'set-domain' &&
+      (!domain || !domain.every(Number.isFinite) || domain[0] === domain[1])
+    )
+      return { error: 'invalid-domain' as const, entries: [] }
+    const selected = target.trackId === undefined ? all : all.filter((g) => g.id === target.trackId)
+    const entries = selected.map(({ id, tracks }) => {
+      const nonempty = tracks.some((t) =>
+        t.seriesList.some((s) => (s.source?.length ?? s.points.length) > 0),
+      )
+      const before = tracks.length ? snapshot(tracks) : undefined
+      let bounds: Domain = tracks.length ? boundary(tracks, action === 'reset') : [0, 1]
+      if (action === 'fit')
+        bounds = applyXDomainStrategy(
+          paddedDomain(tracks.flatMap((t) => t.seriesList.flatMap((s) => s.xDomain))),
+          c.props.xDomainStrategy,
+        )
+      let requested: Domain = domain ?? bounds
+      if (before && (action === 'zoom-in' || action === 'zoom-out')) {
+        const [a, b] = before.xDomain
+        const half = (b - a) * (action === 'zoom-in' ? 0.25 : 1)
+        requested = [(a + b) / 2 - half, (a + b) / 2 + half]
+      }
+      const xDomain = constrainViewportZoom(
+        normalizeIntegerZoomDomain(requested, c.props),
+        bounds,
+        tracks.filter((t) => t.hasVisibleSeries).map((t) => t.seriesList),
+        c.props,
+      )
+      const resetsY = action === 'reset' || action === 'fit'
+      const hasY =
+        resetsY &&
+        (independent.value
+          ? 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'
+      return { id, tracks, before, bounds, xDomain, status, resetsY }
+    })
+    return { entries }
+  }
+  function execute(
+    action: WaveformControlAction,
+    target: WaveformControlTarget = {},
+    domain?: Domain,
+    source: 'toolbar' | 'api' = 'api',
+  ): WaveformControlResult {
+    const planned = plan(action, target, domain)
+    if (planned.error) return { kind: 'viewport', status: planned.error, targets: [] }
+    const { entries } = planned
+    const isIndependent = independent.value
+    const metadata = { commandId: `command-${++sequence}`, source, action }
+    // Capture identities before host event handlers can replace the data.
+    const identities = entries.map((e) => ({
+      trackIndex: isIndependent ? e.tracks[0]?.index : undefined,
+      seriesIds: e.tracks.flatMap((t) => t.seriesList.map((s) => s.id)),
+    }))
+    if (
+      entries.some(
+        (e) => e.status === 'applied' || (action === 'reset' && e.status === 'unchanged'),
+      )
+    )
+      c.cancel()
+    const transforms = [...c.independentTransforms.value]
+    const bounds = { ...c.boundaries.value }
+    const ys = { ...c.independentYDomains.value }
+    for (const e of entries) {
+      if (e.status !== 'applied') continue
+      if (action === 'fit') bounds[e.id] = e.bounds
+      if (action === 'reset') delete bounds[e.id]
+      if (isIndependent) {
+        const track = e.tracks[0]!
+        transforms[track.index] = transformForDomain(e.xDomain, e.bounds, track.width)
+        if (e.resetsY) delete ys[track.index]
+      } else {
+        c.sharedTransform.value = transformForDomain(e.xDomain, e.bounds, c.layout.innerWidth.value)
+        if (e.resetsY) c.sharedYDomains.value = {}
+      }
+    }
+    if (entries.some((e) => e.status === 'applied')) {
+      c.boundaries.value = bounds
+      c.independentTransforms.value = transforms
+      c.independentYDomains.value = ys
+    }
+    const current = groups()
+    const targets: WaveformTargetResult[] = entries.map((e) => ({
+      trackId: e.id,
+      status: e.status,
+      before: e.before,
+      after: current.find((g) => g.id === e.id)?.tracks.length
+        ? snapshot(current.find((g) => g.id === e.id)!.tracks)
+        : undefined,
+    }))
+    const yPayloads = entries.map((e) => {
+      const tracks = current.find((g) => g.id === e.id)?.tracks ?? []
+      const ranges = Object.fromEntries(
+        tracks.map((t) => [t.series?.trackId ?? t.series?.id ?? t.id, t.yScale.domain()]),
+      )
+      const range = Object.values(ranges)[0]
+      return isIndependent || tracks.length === 1
+        ? { yStart: range?.[0], yEnd: range?.[1] }
+        : { yRanges: ranges as Record<string, Domain> }
+    })
+    targets.forEach((result, index) => {
+      if (action === 'reset' && (result.status === 'applied' || result.status === 'unchanged')) {
+        c.emit('zoom-reset', { ...metadata, ...identities[index] })
+      } else if (result.status === 'applied' && result.after) {
+        const [start, end] = result.after.xDomain
+        const payload = {
+          ...metadata,
+          ...identities[index],
+          start,
+          end,
+          gesture: 'command' as const,
+          ...yPayloads[index],
+        }
+        if (action !== 'fit') c.emit('zoom-intent', payload)
+        c.emit('zoom-change', [start, end])
+        c.emit('zoom-end', payload)
+      }
+    })
+    if (targets.some((t) => t.status === 'applied')) void nextTick(c.configure)
+    const status =
+      (['applied', 'unchanged', 'disabled', 'empty-data'] as const).find((value) =>
+        targets.some((t) => t.status === value),
+      ) ?? 'empty-data'
+    return { kind: 'viewport', status, targets }
+  }
+  function resetViewport(index?: number): void
+  function resetViewport(target: WaveformControlTarget): WaveformControlResult
+  function resetViewport(target?: number | WaveformControlTarget) {
+    if (typeof target === 'object') return execute('reset', target)
+    c.legacyReset(target)
+  }
+  function setViewportDomain(domain: Domain, index?: number): void
+  function setViewportDomain(domain: Domain, target: WaveformControlTarget): WaveformControlResult
+  function setViewportDomain(domain: Domain, target?: number | WaveformControlTarget) {
+    if (typeof target === 'object') return execute('set-domain', target, domain)
+    if (domain.every(Number.isFinite) && domain[0] !== domain[1]) clearBoundaries(target)
+    c.legacySet(domain, target)
+  }
+  const state = computed<WaveformControlState>(() => {
+    const actions: WaveformControlAction[] = ['zoom-in', 'zoom-out', 'reset', 'fit', 'set-domain']
+    const targets = groups()
+      .filter((g) => g.tracks.length)
+      .map((g) => ({
+        trackId: g.id,
+        label: independent.value ? g.tracks[0]!.series?.name || g.id : '共享范围',
+        viewport: snapshot(g.tracks),
+        available: Object.fromEntries(
+          actions.map((action) => {
+            const p = plan(
+              action,
+              independent.value ? { trackId: g.id } : {},
+              snapshot(g.tracks).xDomain,
+            ).entries[0]
+            return [
+              action,
+              p?.status === 'applied' ||
+                ((action === 'reset' || action === 'set-domain') && p?.status === 'unchanged'),
+            ]
+          }),
+        ) as Record<WaveformControlAction, boolean>,
+      }))
+    return {
+      mode: c.mode.mode.value,
+      independent: independent.value,
+      targets,
+      available: {
+        'zoom-box': c.mode.canSetMode('zoom'),
+        pan: c.mode.canSetMode('pan'),
+        annotate: c.mode.canSetMode('annotation'),
+        export: true,
+        'zoom-in': targets.some((t) => t.available['zoom-in']),
+        'zoom-out': targets.some((t) => t.available['zoom-out']),
+        reset: targets.some((t) => t.available.reset),
+        fit: targets.some((t) => t.available.fit),
+      },
+    }
+  })
+  const getControlState = () => JSON.parse(JSON.stringify(state.value)) as WaveformControlState
+  watch(
+    () => JSON.stringify(state.value),
+    () => c.emit('control-state-change', getControlState()),
+  )
+  return {
+    controlState: state,
+    getControlState,
+    execute,
+    clearBoundaries,
+    restoreInitialBoundaries,
+    resetViewport,
+    setViewportDomain,
+    zoomIn: (target?: WaveformControlTarget) => execute('zoom-in', target),
+    zoomOut: (target?: WaveformControlTarget) => execute('zoom-out', target),
+    fitToData: (target?: WaveformControlTarget) => execute('fit', target),
+    setInteractionMode: c.mode.setInteractionMode,
+  }
+}