waveform-analysis 0.1.65 → 0.1.66

package/dist/types/components/WaveformChart.vue.d.ts

@@ -53,18 +53,19 @@ declare const __VLS_export: import("vue").DefineComponent<WaveformChartProps, {
 }>, {
     legend: import("..").WaveformLegendOptions;
     annotations: import("..").WaveformAnnotation[];
+    grid: import("..").WaveformGridOptions;
     displayMode: import("..").WaveformDisplayMode;
     overlayMode: import("..").WaveformOverlayMode;
+    xDomainStrategy: import("..").WaveformXDomainStrategy;
     yLabel: string;
     lineColor: string;
     showTooltip: boolean;
     zoomable: boolean;
+    integerZoom: boolean;
     pannable: boolean;
     minVisiblePoints: number;
-    xDomainStrategy: import("..").WaveformXDomainStrategy;
     timeUnit: "s" | "ms";
     annotationsVisible: boolean;
-    grid: import("..").WaveformGridOptions;
     rendering: import("..").WaveformRenderingOptions;
     plotMargin: import("..").WaveformPlotMargin;
     defaultHiddenSeriesIds: string[];

package/dist/types/components/core/constants.d.ts

@@ -121,6 +121,8 @@ export declare const ZERO_LINE_DEFAULTS: {
     WIDTH: number;
     /** 虚线样式 */
     DASH: string;
+    OPACITY: number;
+    BOUNDARY_THRESHOLD: number;
 };
 /**
  * 图例默认配置

package/dist/types/components/core/trackLayoutBuilder.d.ts

@@ -17,6 +17,7 @@ export interface BuildTrackLayoutsOptions {
     initialXDomain?: [number, number];
     initialXDomains?: Record<string, [number, number]>;
     xDomainStrategy?: WaveformXDomainStrategy;
+    integerZoom?: boolean;
     fixedYDomain?: [number, number];
     fixedYDomains?: Record<string, [number, number]>;
     yDomains?: Record<string, [number, number]>;

package/dist/types/components/core/types.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleLinear } from 'd3';
-import type { ResolvedWaveformErrorBarOptions, WaveformLineType, WaveformLineStyle, WaveformPoint, WaveformPointType } from '../../types';
+import type { ResolvedWaveformErrorBarOptions, WaveformLineType, WaveformLineStyle, WaveformPoint, WaveformPointType, WaveformXAxisLabelFormatter } from '../../types';
 import type { WaveformPointSource } from '../../core/waveformPointSource';
 import type { NormalizedWaveformGridLineOptions } from './grid';
 /**
@@ -104,6 +104,7 @@ export interface TrackLayout {
     yMinorTicks: number[];
     yAxisTickValues: number[];
     xAxisTickValues: number[];
+    xAxisLabelFormatter?: WaveformXAxisLabelFormatter;
     endpointLabels: {
         start: string;
         end: string;

package/dist/types/components/core/useWaveformChartController.d.ts

@@ -298,6 +298,8 @@ export declare function useWaveformChartController(props: ResolvedWaveformChartP
         color: string;
         width: number;
         dash: string;
+        opacity: number;
+        boundaryThreshold: number;
     };
     legendBackgroundColor: string;
     legendInteractive: boolean;
@@ -332,6 +334,7 @@ export declare function useWaveformChartController(props: ResolvedWaveformChartP
     lineColor: string;
     showTooltip: boolean;
     zoomable: boolean;
+    integerZoom: boolean;
     pannable: boolean;
     minZoomSpan?: number | undefined;
     minVisiblePoints: number;

package/dist/types/components/core/useWaveformPresentation.d.ts

@@ -26,6 +26,8 @@ export declare function useWaveformPresentation(context: PresentationContext): {
         color: string;
         width: number;
         dash: string;
+        opacity: number;
+        boundaryThreshold: number;
     }>;
     legendBackgroundColor: import("vue").ComputedRef<string>;
     legendInteractive: import("vue").ComputedRef<boolean>;

package/dist/types/components/core/waveformChartTypes.d.ts

@@ -11,6 +11,8 @@ export interface WaveformChartProps {
     lineColor?: string;
     showTooltip?: boolean;
     zoomable?: boolean;
+    /** Snap viewport endpoints outwards to integer X-axis display units. */
+    integerZoom?: boolean;
     pannable?: boolean;
     minZoomSpan?: number;
     minVisiblePoints?: number;
@@ -40,7 +42,7 @@ export interface WaveformChartProps {
     presentationMode?: boolean;
     zeroLine?: WaveformZeroLineOptions;
 }
-type DefaultedProp = 'displayMode' | 'overlayMode' | 'yLabel' | 'lineColor' | 'showTooltip' | 'zoomable' | 'pannable' | 'minVisiblePoints' | 'xDomainStrategy' | 'timeUnit' | 'annotations' | 'annotationsVisible' | 'grid' | 'rendering' | 'plotMargin' | 'legend' | 'defaultHiddenSeriesIds' | 'cleanView' | 'presentationMode' | 'zeroLine';
+type DefaultedProp = 'displayMode' | 'overlayMode' | 'yLabel' | 'lineColor' | 'showTooltip' | 'zoomable' | 'integerZoom' | 'pannable' | 'minVisiblePoints' | 'xDomainStrategy' | 'timeUnit' | 'annotations' | 'annotationsVisible' | 'grid' | 'rendering' | 'plotMargin' | 'legend' | 'defaultHiddenSeriesIds' | 'cleanView' | 'presentationMode' | 'zeroLine';
 export type ResolvedWaveformChartProps = Readonly<WaveformChartProps & Required<Pick<WaveformChartProps, DefaultedProp>>>;
 export interface WaveformChartEmit {
     (event: 'point-hover', point: WaveformPoint | null): void;

package/dist/types/components/core/yAxisTitleLayout.d.ts

@@ -0,0 +1,4 @@
+import type { TrackLayout } from './types';
+type TitleTrack = Pick<TrackLayout, 'height' | 'column' | 'yAxes'>;
+export declare function alignLeftYAxisTitles(layouts: TitleTrack[], yLabel?: string): void;
+export {};

package/dist/types/components/interaction/integerZoom.d.ts

@@ -0,0 +1,12 @@
+export interface IntegerZoomOptions {
+    integerZoom?: boolean;
+    timeUnit?: 's' | 'ms';
+}
+export declare function integerZoomTicks(domain: [number, number], count: number, options: IntegerZoomOptions): number[];
+export declare function formatIntegerZoomLabel(value: number): string;
+/** Align outwards in display units; all returned coordinates remain in seconds. */
+export declare function alignIntegerZoomDomain(domain: [number, number], options: IntegerZoomOptions): [number, number];
+/** Recover aligned endpoints after a D3 transform, tolerating floating-point round-off. */
+export declare function normalizeIntegerZoomDomain(domain: [number, number], options: IntegerZoomOptions): [number, number];
+/** Translation snaps to the nearest unit so panning preserves the visible span. */
+export declare function alignIntegerPanDomain(domain: [number, number], options: IntegerZoomOptions): [number, number];

package/dist/types/components/interaction/viewportDomain.d.ts

@@ -17,5 +17,6 @@ interface ViewportDomainContext {
     editorSeriesOptions: Ref<AnnotationSeriesCandidate[]>;
     configureZoom: () => void;
 }
+export declare function clampViewportDomain(domain: [number, number], boundary: [number, number]): [number, number];
 export declare function createViewportDomainSetter(context: ViewportDomainContext): (domain: [number, number], trackIndex?: number) => void;
 export {};

package/dist/types/components/interaction/zoomConstraints.d.ts

@@ -1,12 +1,13 @@
 import { type ZoomTransform } from 'd3';
 import type { WaveformPoint } from '../../types';
 import { type WaveformPointSource } from '../../core/waveformPointSource';
+import { type IntegerZoomOptions } from './integerZoom';
 interface PointSeriesSource {
     points: WaveformPoint[];
     source?: WaveformPointSource;
 }
 export type ZoomSeriesGroup = readonly PointSeriesSource[];
-interface ZoomConstraintOptions {
+interface ZoomConstraintOptions extends IntegerZoomOptions {
     minZoomSpan?: number;
     minVisiblePoints?: number;
     maxZoomScale?: number | null;

package/dist/types/components/rendering/WaveformTrack.vue.d.ts

@@ -15,9 +15,7 @@ interface Props {
     timeUnit: 's' | 'ms';
     yLabel?: string;
     cleanView?: boolean;
-    zeroLine?: Required<Pick<WaveformZeroLineOptions, 'color' | 'width' | 'dash'>> & {
-        visible: boolean;
-    };
+    zeroLine?: Required<WaveformZeroLineOptions>;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     contextmenu: (mouseEvent: MouseEvent) => any;
@@ -38,9 +36,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }>, {
     interactive: boolean;
     cleanView: boolean;
-    zeroLine: Required<Pick<WaveformZeroLineOptions, "color" | "width" | "dash">> & {
-        visible: boolean;
-    };
+    zeroLine: Required<WaveformZeroLineOptions>;
     interactionMode: WaveformInteractionMode;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/types/components/rendering/WaveformTrackBackdrop.vue.d.ts

@@ -1,4 +1,3 @@
-import type { WaveformZeroLineOptions } from '../../types';
 import type { TrackLayout } from '../core/types';
 interface Props {
     track: TrackLayout;
@@ -9,9 +8,6 @@ interface Props {
     frameStyle: {
         backgroundColor: string;
     };
-    zeroLine: Required<Pick<WaveformZeroLineOptions, 'color' | 'width' | 'dash'>> & {
-        visible: boolean;
-    };
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/types/components/rendering/WaveformZeroLines.vue.d.ts

@@ -0,0 +1,12 @@
+import type { WaveformZeroLineOptions } from '../../types';
+import type { TrackLayout } from '../core/types';
+type __VLS_Props = {
+    track: TrackLayout;
+    clipPathId: string;
+    innerWidth: number;
+    cleanView: boolean;
+    zeroLine: Required<WaveformZeroLineOptions>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/demo/types.d.ts

@@ -9,6 +9,7 @@ export interface DemoControlPanelModel {
     displayMode: WaveformDisplayMode;
     overlayMode: WaveformOverlayMode;
     showTooltip: boolean;
+    integerZoom: boolean;
     plotMarginTop: number;
     plotMarginBottom: number;
     cleanView: boolean;
@@ -20,6 +21,7 @@ export interface DemoControlPanelModel {
     zeroLineVisible: boolean;
     zeroLineColor: string;
     zeroLineWidth: number;
+    zeroLineOpacity: number;
     zeroLineDash: string;
     zeroLineDashOptions: Array<SelectOption<string>>;
     rowCount: number;
@@ -82,6 +84,7 @@ export interface DemoChartModel {
     cleanView: boolean;
     presentationMode: boolean;
     showTooltip: boolean;
+    integerZoom: boolean;
     plotMargin: WaveformPlotMargin;
     zeroLine: WaveformZeroLineOptions;
     frameWatermarkVisible: boolean;

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@
  * @packageDocumentation
  */
 export { default as WaveformChart } from './components/WaveformChart.vue';
+export type { WaveformChartProps } from './components/core/waveformChartTypes';
 export type { WaveformPoint, WaveformDisplayMode, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformZeroLineOptions, SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './types';
 export type { WaveformGridOptions, WaveformGridLineOptions, WaveformGridTrackLines, } from './components/core/grid';
 export { normalizeWaveformData, normalizeWaveformSeries } from './core';

package/dist/types/types/chart.d.ts

@@ -233,4 +233,8 @@ export interface WaveformZeroLineOptions {
     width?: number;
     /** SVG stroke-dasharray. Defaults to '6 4'; use '' for a solid line. */
     dash?: string;
+    /** Stroke opacity from 0 to 1. Defaults to 0.5; multiplies the color's alpha. */
+    opacity?: number;
+    /** Hide within this fraction of a Y-axis tick interval from either boundary. Defaults to 0.02. */
+    boundaryThreshold?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.65",
+  "version": "0.1.66",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/src/App.vue

@@ -48,11 +48,13 @@ const annotationsVisible = ref(true)
 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 zeroLineVisible = ref(true)
 const zeroLineColor = ref('#ff0000')
 const zeroLineWidth = ref(1)
+const zeroLineOpacity = ref(0.5)
 const zeroLineDash = ref('6 4')
 const interactionMode = ref<WaveformInteractionMode>('zoom')
 const legendPosition = ref<WaveformLegendPosition>('top-right')
@@ -127,6 +129,7 @@ const zeroLine = computed<WaveformZeroLineOptions>(() => ({
   visible: zeroLineVisible.value,
   color: zeroLineColor.value,
   width: zeroLineWidth.value,
+  opacity: zeroLineOpacity.value,
   dash: zeroLineDash.value,
 }))
 const plotMargin = computed<WaveformPlotMargin>(() => ({
@@ -298,6 +301,7 @@ const controlPanelModel = reactive({
   displayMode,
   overlayMode,
   showTooltip,
+  integerZoom,
   plotMarginTop,
   plotMarginBottom,
   cleanView,
@@ -309,6 +313,7 @@ const controlPanelModel = reactive({
   zeroLineVisible,
   zeroLineColor,
   zeroLineWidth,
+  zeroLineOpacity,
   zeroLineDash,
   zeroLineDashOptions,
   rowCount,
@@ -365,6 +370,7 @@ const chartModel = reactive({
   cleanView,
   presentationMode,
   showTooltip,
+  integerZoom,
   plotMargin,
   zeroLine,
   frameWatermarkVisible,

package/src/components/WaveformChart.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<WaveformChartProps>(), {
   lineColor: '#0960bd',
   showTooltip: true,
   zoomable: true,
+  integerZoom: false,
   pannable: false,
   minVisiblePoints: 0,
   xDomainStrategy: () => ({ type: 'integer-ms' }),

package/src/components/core/constants.ts

@@ -182,6 +182,8 @@ export const ZERO_LINE_DEFAULTS = {
   WIDTH: 1,
   /** 虚线样式 */
   DASH: '6 4',
+  OPACITY: 0.5,
+  BOUNDARY_THRESHOLD: 0.02,
 }
 
 /**

package/src/components/core/trackLayoutBuilder.ts

@@ -27,7 +27,6 @@ import {
 } from './grid'
 import {
   axisTextMetrics,
-  formatYAxisTickLabel,
   resolveRenderedYAxisSeriesGroups,
   resolveYAxisTicks,
   resolveYAxisTickCount,
@@ -35,9 +34,15 @@ import {
 } from './layout'
 import type { DisplayTrack, TrackLayout, WaveformYAxisLayout } from './types'
 import { applyXDomainStrategy } from './xDomain'
+import { alignLeftYAxisTitles } from './yAxisTitleLayout'
+import {
+  alignIntegerZoomDomain,
+  normalizeIntegerZoomDomain,
+  integerZoomTicks,
+  formatIntegerZoomLabel,
+} from '../interaction/integerZoom'
 import {
   Y_AXIS_LABEL_BAND_WIDTH,
-  Y_AXIS_CHARACTER_WIDTH,
   Y_AXIS_LABEL_GAP,
   Y_AXIS_OUTER_PADDING,
   Y_AXIS_RIGHT_LABEL_OFFSET,
@@ -58,6 +63,7 @@ export interface BuildTrackLayoutsOptions {
   initialXDomain?: [number, number]
   initialXDomains?: Record<string, [number, number]>
   xDomainStrategy?: WaveformXDomainStrategy
+  integerZoom?: boolean
   fixedYDomain?: [number, number]
   fixedYDomains?: Record<string, [number, number]>
   yDomains?: Record<string, [number, number]>
@@ -85,9 +91,12 @@ function resolveIndependentXDomain(
     options.initialXDomains?.[track.id] ??
     options.initialXDomains?.[seriesId] ??
     options.initialXDomain
-  return explicitDomain
-    ? applyXDomainStrategy(explicitDomain, strategy, true)
-    : applyXDomainStrategy(track.xDomain, strategy)
+  return alignIntegerZoomDomain(
+    explicitDomain
+      ? applyXDomainStrategy(explicitDomain, strategy, true)
+      : applyXDomainStrategy(track.xDomain, strategy),
+    options,
+  )
 }
 
 export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayout[] {
@@ -119,6 +128,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         ? (options.independentTransforms[index] ?? zoomIdentity)
         : zoomIdentity
     const xScale = transform.rescaleX(baseXScale)
+    xScale.domain(normalizeIntegerZoomDomain(xScale.domain() as [number, number], options))
     const yAxisGroups = resolveRenderedYAxisSeriesGroups(
       displayTrack,
       options.overlayMode,
@@ -181,25 +191,19 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     const fallbackYScale = scaleLinear(displayTrack.yDomain, [cell.plotHeight, 0])
     if (options.yAxisNice !== false) fallbackYScale.nice()
     const yScale = yAxes[0]?.scale ?? fallbackYScale
-    const xMajorTicks = xScale.ticks(Math.max(2, Math.floor(cell.width / 100)))
+    const xMajorTicks = integerZoomTicks(
+      xScale.domain() as [number, number],
+      Math.max(2, Math.floor(cell.width / 100)),
+      options,
+    )
+    const xAxisLabelFormatter =
+      options.xAxisLabelFormatter ?? (options.integerZoom ? formatIntegerZoomLabel : undefined)
     const yMajorTicks = yAxes[0]?.majorTicks ?? []
     const yAxisTickValues = yAxes[0]?.tickValues ?? []
     const domain = xScale.domain() as [number, number]
     const endpointLabels = {
-      start: formatXAxisLabel(
-        domain[0],
-        domain,
-        options.timeUnit,
-        'start',
-        options.xAxisLabelFormatter,
-      ),
-      end: formatXAxisLabel(
-        domain[1],
-        domain,
-        options.timeUnit,
-        'end',
-        options.xAxisLabelFormatter,
-      ),
+      start: formatXAxisLabel(domain[0], domain, options.timeUnit, 'start', xAxisLabelFormatter),
+      end: formatXAxisLabel(domain[1], domain, options.timeUnit, 'end', xAxisLabelFormatter),
     }
     const leftClearance = endpointLabels.start.length * 7 + 10
     const rightClearance = endpointLabels.end.length * 7 + 10
@@ -262,6 +266,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       yScale,
       yAxes,
       xMajorTicks,
+      xAxisLabelFormatter,
       xMinorTicks: buildMinorTicks(xMajorTicks, 3, domain),
       yMajorTicks,
       yMinorTicks: yAxes[0]?.minorTicks ?? [],
@@ -283,41 +288,6 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     }
   })
 
-  // Align names using the widest nearby tick text in each column and left-axis slot.
-  const titleDistances = new Map<string, number>()
-  for (const track of layouts) {
-    let leftIndex = 0
-    for (const axis of track.yAxes) {
-      if (axis.side !== 'left') continue
-      const key = `${track.column}:${leftIndex++}`
-      const series = axis.seriesList[0]
-      const title = series?.name.trim() || options.yLabel || ''
-      const halfTitleHeight = title.length * 8 + 6
-      const nearbyTicks = axis.tickValues.filter(
-        (value) => Math.abs(axis.scale(value) - track.height / 2) <= halfTitleHeight,
-      )
-      const tickWidth = Math.max(
-        Y_AXIS_CHARACTER_WIDTH,
-        ...nearbyTicks.map(
-          (value) =>
-            formatYAxisTickLabel(
-              value,
-              axis.scale.domain() as [number, number],
-              axis.tickValues,
-              series?.unit,
-            ).length * Y_AXIS_CHARACTER_WIDTH,
-        ),
-      )
-      const distance = tickWidth + Y_AXIS_TICK_PADDING + Y_AXIS_LABEL_BAND_WIDTH / 2
-      titleDistances.set(key, Math.max(titleDistances.get(key) ?? 0, distance))
-    }
-  }
-  for (const track of layouts) {
-    let leftIndex = 0
-    for (const axis of track.yAxes) {
-      if (axis.side !== 'left') continue
-      axis.labelX = axis.x - titleDistances.get(`${track.column}:${leftIndex++}`)!
-    }
-  }
+  alignLeftYAxisTitles(layouts, options.yLabel)
   return layouts
 }

package/src/components/core/types.ts

@@ -5,6 +5,7 @@ import type {
   WaveformLineStyle,
   WaveformPoint,
   WaveformPointType,
+  WaveformXAxisLabelFormatter,
 } from '../../types'
 import type { WaveformPointSource } from '../../core/waveformPointSource'
 import type { NormalizedWaveformGridLineOptions } from './grid'
@@ -114,6 +115,7 @@ export interface TrackLayout {
   yMinorTicks: number[]
   yAxisTickValues: number[]
   xAxisTickValues: number[]
+  xAxisLabelFormatter?: WaveformXAxisLabelFormatter
   endpointLabels: { start: string; end: string }
   path: string | null
   seriesPaths: TrackSeriesPath[]

package/src/components/core/useWaveformChartLifecycle.ts

@@ -239,7 +239,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
   )
 
   watch(
-    () => props.displayMode,
+    () => [props.displayMode, props.integerZoom, props.integerZoom ? props.timeUnit : undefined],
     () => {
       const previousPage = currentPage.value
       currentPage.value = 1

package/src/components/core/useWaveformLayout.ts

@@ -21,6 +21,7 @@ import { createFrameNumberResolver, resolvePageableTracks } from './trackPaginat
 import type { PreparedWaveformSeries } from './useWaveformData'
 import type { ResolvedWaveformChartProps } from './waveformChartTypes'
 import { applyXDomainStrategy } from './xDomain'
+import { alignIntegerZoomDomain, normalizeIntegerZoomDomain } from '../interaction/integerZoom'
 import { resolveYAxisLayoutMetrics, resolveViewportYDomains } from './yAxisLayoutMetrics'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
@@ -220,13 +221,19 @@ export function useWaveformLayout(context: LayoutContext) {
       Number.isFinite(domain[1]) &&
       domain[0] !== domain[1]
     ) {
-      return applyXDomainStrategy(
-        domain[0] < domain[1] ? domain : [domain[1], domain[0]],
-        props.xDomainStrategy,
-        true,
+      return alignIntegerZoomDomain(
+        applyXDomainStrategy(
+          domain[0] < domain[1] ? domain : [domain[1], domain[0]],
+          props.xDomainStrategy,
+          true,
+        ),
+        props,
       )
     }
-    return applyXDomainStrategy(sharedXDomain.value, props.xDomainStrategy)
+    return alignIntegerZoomDomain(
+      applyXDomainStrategy(sharedXDomain.value, props.xDomainStrategy),
+      props,
+    )
   })
   const resolveInitialTrackDomain = (track: TrackLayout): [number, number] => {
     const configuredDomain =
@@ -239,24 +246,32 @@ export function useWaveformLayout(context: LayoutContext) {
       Number.isFinite(configuredDomain[1]) &&
       configuredDomain[0] !== configuredDomain[1]
     ) {
-      return applyXDomainStrategy(
-        configuredDomain[0] < configuredDomain[1]
-          ? configuredDomain
-          : [configuredDomain[1], configuredDomain[0]],
-        props.xDomainStrategy,
-        true,
+      return alignIntegerZoomDomain(
+        applyXDomainStrategy(
+          configuredDomain[0] < configuredDomain[1]
+            ? configuredDomain
+            : [configuredDomain[1], configuredDomain[0]],
+          props.xDomainStrategy,
+          true,
+        ),
+        props,
       )
     }
-    return applyXDomainStrategy(
-      paddedDomain(track.seriesList.flatMap((series) => series.xDomain)),
-      props.xDomainStrategy,
+    return alignIntegerZoomDomain(
+      applyXDomainStrategy(
+        paddedDomain(track.seriesList.flatMap((series) => series.xDomain)),
+        props.xDomainStrategy,
+      ),
+      props,
     )
   }
-  const sharedZoomDomain = computed(
-    () =>
+  const sharedZoomDomain = computed(() =>
+    normalizeIntegerZoomDomain(
       sharedTransform.value
         .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
         .domain() as [number, number],
+      props,
+    ),
   )
   const gridCells = computed(() => {
     const cells = resolveGridCellGeometry(
@@ -280,6 +295,7 @@ export function useWaveformLayout(context: LayoutContext) {
       initialXDomain: props.initialXDomain ? initialXDomain.value : undefined,
       initialXDomains: props.initialXDomains,
       xDomainStrategy: props.xDomainStrategy,
+      integerZoom: props.integerZoom,
       fixedYDomain: props.yDomain,
       fixedYDomains: props.yDomains,
       yDomains: viewportYDomains.value,

package/src/components/core/useWaveformPresentation.ts

@@ -53,6 +53,8 @@ export function useWaveformPresentation(context: PresentationContext) {
   const isPresentationMode = computed(() => props.presentationMode === true)
   const resolvedZeroLine = computed(() => {
     const width = props.zeroLine.width
+    const opacity = props.zeroLine.opacity
+    const threshold = props.zeroLine.boundaryThreshold
     return {
       visible: props.zeroLine.visible !== false,
       color: props.zeroLine.color || ZERO_LINE_DEFAULTS.COLOR,
@@ -61,6 +63,14 @@ export function useWaveformPresentation(context: PresentationContext) {
           ? width
           : ZERO_LINE_DEFAULTS.WIDTH,
       dash: props.zeroLine.dash ?? ZERO_LINE_DEFAULTS.DASH,
+      opacity:
+        typeof opacity === 'number' && Number.isFinite(opacity) && opacity >= 0 && opacity <= 1
+          ? opacity
+          : ZERO_LINE_DEFAULTS.OPACITY,
+      boundaryThreshold:
+        typeof threshold === 'number' && Number.isFinite(threshold) && threshold >= 0
+          ? threshold
+          : ZERO_LINE_DEFAULTS.BOUNDARY_THRESHOLD,
     }
   })
   const legendBackgroundColor = computed(

package/src/components/core/waveformChartTypes.ts

@@ -33,6 +33,8 @@ export interface WaveformChartProps {
   lineColor?: string
   showTooltip?: boolean
   zoomable?: boolean
+  /** Snap viewport endpoints outwards to integer X-axis display units. */
+  integerZoom?: boolean
   pannable?: boolean
   minZoomSpan?: number
   minVisiblePoints?: number
@@ -70,6 +72,7 @@ type DefaultedProp =
   | 'lineColor'
   | 'showTooltip'
   | 'zoomable'
+  | 'integerZoom'
   | 'pannable'
   | 'minVisiblePoints'
   | 'xDomainStrategy'