insomni-plot 0.1.0-alpha.0

package/src/navigator.test.ts

@@ -0,0 +1,174 @@
+import { describe, expect, test, vi } from "vite-plus/test";
+
+import {
+  rgba,
+  viewportFrame,
+  type DragPointerInfo,
+  type InteractionManager,
+  type InteractionNode,
+  type InteractionNodeSpec,
+  type PointerInfo,
+} from "insomni";
+import { createDataNavigator } from "./navigator.ts";
+import { createDataViewport } from "./viewport.ts";
+
+function fakeManager(): {
+  manager: InteractionManager;
+  spec(): InteractionNodeSpec | null;
+  destroyed: { value: boolean };
+} {
+  let captured: InteractionNodeSpec | null = null;
+  const destroyed = { value: false };
+  const element = {
+    style: { cursor: "" },
+    clientWidth: 200,
+    width: 200,
+  } as unknown as HTMLElement;
+  const manager = {
+    element,
+    add(spec: InteractionNodeSpec): InteractionNode {
+      captured = spec;
+      return {
+        id: Symbol("nav"),
+        update: vi.fn(),
+        destroy: () => {
+          destroyed.value = true;
+        },
+      };
+    },
+    addPointCloud: vi.fn(),
+    onBackgroundTap: vi.fn(() => () => {}),
+    onChange: vi.fn(() => () => {}),
+    destroy: vi.fn(),
+  } as unknown as InteractionManager;
+  return { manager, spec: () => captured, destroyed };
+}
+
+const RED = rgba(1, 0, 0, 1);
+
+function makePair() {
+  const source = createDataViewport({
+    frame: viewportFrame(400, 300),
+    x: { type: "linear", domain: [0, 100] },
+    y: { type: "linear", domain: [0, 100] },
+  });
+  const overview = createDataViewport({
+    frame: viewportFrame(400, 300),
+    x: { type: "linear", domain: [0, 100] },
+    y: { type: "linear", domain: [0, 100] },
+  });
+  return { source, overview };
+}
+
+describe("createDataNavigator", () => {
+  test("render callback runs at construction and on overview change", () => {
+    const { source, overview } = makePair();
+    let calls = 0;
+    createDataNavigator({
+      source,
+      overview,
+      render: () => {
+        calls++;
+      },
+    });
+    expect(calls).toBe(1);
+    overview.panBy(10, 0);
+    expect(calls).toBe(2);
+  });
+
+  test("indicator screen rect tracks source's visible domain via overview.dataToScreen", () => {
+    const { source, overview } = makePair();
+    const nav = createDataNavigator({
+      source,
+      overview,
+      render: (target) => {
+        target.pushRect({ x: 0, y: 0, width: 1, height: 1, fill: RED });
+      },
+    });
+
+    const indicator = nav.layers[nav.layers.length - 1];
+    expect(indicator._pack.commands.length).toBe(1);
+
+    source.setVisibleDomain({ x: [25, 75] });
+    expect(indicator.shapeCount).toBe(1);
+    const left = overview.dataToScreen(25, 0).x;
+    const right = overview.dataToScreen(75, 0).x;
+    expect(right - left).toBeCloseTo(200, 5);
+  });
+
+  test("drag in overview pans source's visible X domain", () => {
+    const { source, overview } = makePair();
+    source.setVisibleDomain({ x: [40, 60] });
+    const fake = fakeManager();
+    createDataNavigator({
+      source,
+      overview,
+      render: () => {},
+      interaction: { manager: fake.manager },
+    });
+
+    const spec = fake.spec();
+    const press = (x: number, y: number): PointerInfo => ({
+      pointerId: 1,
+      type: "mouse",
+      x,
+      y,
+      localX: x,
+      localY: y,
+      buttons: 1,
+      mods: { shift: false, ctrl: false, meta: false, alt: false },
+      stopPropagation: () => {},
+    });
+    const drag = (x: number, y: number, dx: number, dy: number): DragPointerInfo => ({
+      ...press(x, y),
+      dx,
+      dy,
+    });
+
+    spec?.onDragStart?.(press(200, 150));
+    spec?.onDragMove?.(drag(280, 150, 80, 0));
+    const x = source.visibleXDomain as readonly [number, number];
+    // 80 px in a 400 px / 100-unit overview → +20 units.
+    expect(x[0]).toBeCloseTo(60, 4);
+    expect(x[1]).toBeCloseTo(80, 4);
+  });
+
+  test("axes:'x' drag on left edge sets source's visible-x lower bound", () => {
+    const { source, overview } = makePair();
+    source.setVisibleDomain({ x: [40, 60] });
+    const fake = fakeManager();
+    createDataNavigator({
+      source,
+      overview,
+      axes: "x",
+      render: () => {},
+      interaction: { manager: fake.manager },
+    });
+    const spec = fake.spec();
+    const press = (x: number, y: number): PointerInfo => ({
+      pointerId: 1,
+      type: "mouse",
+      x,
+      y,
+      localX: x,
+      localY: y,
+      buttons: 1,
+      mods: { shift: false, ctrl: false, meta: false, alt: false },
+      stopPropagation: () => {},
+    });
+    const drag = (x: number, y: number, dx: number, dy: number): DragPointerInfo => ({
+      ...press(x, y),
+      dx,
+      dy,
+    });
+
+    // Left edge near screen x = 160.
+    spec?.onPress?.(press(161, 150));
+    spec?.onDragStart?.(press(161, 150));
+    spec?.onDragMove?.(drag(80, 150, -81, 0));
+
+    const x = source.visibleXDomain as readonly [number, number];
+    expect(x[0]).toBeCloseTo(20, 5);
+    expect(x[1]).toBeCloseTo(60, 5);
+  });
+});

package/src/navigator.ts

@@ -0,0 +1,393 @@
+import {
+  createLayer,
+  rgba,
+  type Color,
+  type FrameRect,
+  type InteractionManager,
+  type InteractionNode,
+  type Layer,
+} from "insomni";
+import type { DataViewport, VisibleDomainInput } from "./viewport.ts";
+
+const DEFAULT_INDICATOR_FILL = rgba(1, 1, 1, 0.08);
+const DEFAULT_INDICATOR_STROKE = rgba(1, 1, 1, 0.85);
+
+/** Which axes the navigator's indicator (and interaction) tracks. */
+export type DataNavigatorAxes = "xy" | "x" | "y";
+
+export interface DataNavigatorIndicatorOptions {
+  fill?: Color;
+  stroke?: Color;
+  strokeWidth?: number;
+  cornerRadius?: number;
+}
+
+export interface DataNavigatorInteractionOptions {
+  manager: InteractionManager;
+  /** Drag inside the overview to pan/reframe the source. Default: true. */
+  drag?: boolean;
+  /** Press outside the indicator to recenter. Default: `"center"`. */
+  click?: "center" | false;
+  /**
+   * Drag the indicator's outer edges to reframe the source instead of panning.
+   * 1D-only — only meaningful for `axes: "x"` or `"y"`. Default: `true` for 1D,
+   * `false` for `"xy"`.
+   */
+  resizeEdges?: boolean;
+  /** Edge hit-zone width in CSS pixels. Default: 6. */
+  edgeHitPx?: number;
+  /** Override the interaction-node bounds. Default: `overview.absoluteFrame`. */
+  bounds?: () => FrameRect;
+  /** Interaction node z-index. Default: 50. */
+  zIndex?: number;
+}
+
+export interface DataNavigatorOptions<X = unknown, Y = unknown> {
+  /** Source data viewport the user navigates in the main view. */
+  source: DataViewport<X, Y>;
+  /** Overview data viewport that hosts the navigator. */
+  overview: DataViewport<X, Y>;
+  /** Required: callback that populates the navigator-owned content layer. */
+  render: (target: Layer) => void;
+  /** Which axes the indicator tracks. Default: `"xy"`. */
+  axes?: DataNavigatorAxes;
+  indicator?: DataNavigatorIndicatorOptions;
+  interaction?: DataNavigatorInteractionOptions;
+  /** Bake the render-callback target to an offscreen texture. */
+  cache?: {
+    renderer: { cacheLayer(layer: Layer): void };
+  };
+}
+
+export interface DataNavigator {
+  readonly layers: readonly Layer[];
+  readonly interacting: boolean;
+  refresh(): void;
+  dispose(): void;
+}
+
+/**
+ * Build a Navigator for a data viewport: a secondary view of the same data
+ * with a rect that tracks the source's visible domain. Drag inside the
+ * overview pans/reframes the source.
+ */
+export function createDataNavigator<X = unknown, Y = unknown>(
+  opts: DataNavigatorOptions<X, Y>,
+): DataNavigator {
+  const source = opts.source as DataViewport;
+  const overview = opts.overview as DataViewport;
+  const axes: DataNavigatorAxes = opts.axes ?? "xy";
+  const renderFn = opts.render;
+  const cache = opts.cache;
+  const interactionState = { active: false };
+
+  // v3 `LayerOptions` no longer accepts `viewport`. A `DataViewport` uses an
+  // identity camera (data-mode pan/zoom flows through the axis scales, not the
+  // camera), so binding the overview camera here was a no-op transform — the
+  // navigator content is already emitted in overview pixel space by `renderFn`.
+  //
+  // v3 cache: the old v1 `{ cache: "texture" }` option became the `cache` HINT
+  // ("auto"|"always"|"never"). The navigator's overview content is static
+  // between source-domain changes, so an opted-in cache maps to "always" (force
+  // a retained RTT bake). The old v1 `cacheSize` had no v3 equivalent — the core
+  // bakes at canvas resolution — so it was dropped.
+  const target = createLayer({
+    space: "ui",
+    ...(cache ? { cache: "always" as const } : {}),
+  });
+  const indicator = createLayer({ space: "ui" });
+  const style = resolveIndicatorStyle(opts.indicator);
+
+  const refreshContent = () => {
+    target.clear();
+    renderFn(target);
+    if (cache) cache.renderer.cacheLayer(target);
+  };
+
+  const refreshIndicator = () => {
+    indicator.clear();
+    const rect = computeDataIndicatorRect(source, overview, axes);
+    if (!rect) return;
+    indicator.pushRect({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      fill: style.fill,
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      cornerRadius: style.cornerRadius,
+    });
+  };
+
+  const refresh = () => {
+    refreshContent();
+    refreshIndicator();
+  };
+
+  refresh();
+
+  // Indicator depends on both source's visible domain and overview's domain
+  // (dataToScreen). Content depends on overview's domain.
+  const unsubSource = source.onChange(refreshIndicator);
+  const unsubOverview = overview.onChange(refresh);
+
+  const node = opts.interaction
+    ? bindDataInteraction(opts.interaction, source, overview, axes, interactionState)
+    : null;
+
+  let disposed = false;
+
+  return {
+    layers: [target, indicator],
+    get interacting() {
+      return interactionState.active;
+    },
+    refresh,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      unsubSource();
+      unsubOverview();
+      node?.destroy();
+      target.destroy();
+      indicator.destroy();
+    },
+  };
+}
+
+function bindDataInteraction(
+  opts: DataNavigatorInteractionOptions,
+  source: DataViewport,
+  overview: DataViewport,
+  axes: DataNavigatorAxes,
+  interactionState: { active: boolean },
+): InteractionNode {
+  const dragEnabled = opts.drag ?? true;
+  const clickMode = opts.click ?? "center";
+  const useX = axes === "xy" || axes === "x";
+  const useY = axes === "xy" || axes === "y";
+  const resizeEnabled = opts.resizeEdges ?? axes !== "xy";
+  const edgeHitPx = opts.edgeHitPx ?? 6;
+
+  type DragMode = "pan" | "resize-x0" | "resize-x1" | "resize-y0" | "resize-y1";
+  let mode: DragMode = "pan";
+  let startDataX = 0;
+  let startDataY = 0;
+  let startSrcX0 = 0;
+  let startSrcX1 = 0;
+  let startSrcY0 = 0;
+  let startSrcY1 = 0;
+  let dragHasX = false;
+  let dragHasY = false;
+  let dragging = false;
+
+  const detectEdge = (evt: { x: number; y: number }): DragMode | null => {
+    if (!resizeEnabled) return null;
+    const r = computeDataIndicatorRect(source, overview, axes);
+    if (!r) return null;
+    if (axes === "x") {
+      if (Math.abs(evt.x - r.x) <= edgeHitPx) return "resize-x0";
+      if (Math.abs(evt.x - (r.x + r.width)) <= edgeHitPx) return "resize-x1";
+      return null;
+    }
+    if (axes === "y") {
+      if (Math.abs(evt.y - r.y) <= edgeHitPx) return "resize-y0";
+      if (Math.abs(evt.y - (r.y + r.height)) <= edgeHitPx) return "resize-y1";
+      return null;
+    }
+    return null;
+  };
+
+  return opts.manager.add({
+    zIndex: opts.zIndex ?? 50,
+    space: "ui",
+    bounds: opts.bounds ?? (() => overview.absoluteFrame),
+    cursor: dragEnabled ? "grab" : "pointer",
+    dragCursor: "grabbing",
+
+    onPress: (evt) => {
+      const edge = detectEdge(evt);
+      if (edge) {
+        mode = edge;
+        return;
+      }
+      const indRect = computeDataIndicatorRect(source, overview, axes);
+      if (indRect) {
+        const inside =
+          evt.x >= indRect.x &&
+          evt.x <= indRect.x + indRect.width &&
+          evt.y >= indRect.y &&
+          evt.y <= indRect.y + indRect.height;
+        if (inside) {
+          mode = "pan";
+          return;
+        }
+      }
+      mode = "pan";
+      if (clickMode !== "center") return;
+      const data = overview.screenToData(evt.x, evt.y);
+      if (!data) return;
+      const update: { x?: VisibleDomainInput; y?: VisibleDomainInput } = {};
+      if (useX) {
+        const span = visibleNumericSpan(source, "x");
+        if (span !== null) {
+          const c = toNumber(data.x);
+          update.x = [c - span / 2, c + span / 2];
+        }
+      }
+      if (useY) {
+        const span = visibleNumericSpan(source, "y");
+        if (span !== null) {
+          const c = toNumber(data.y);
+          update.y = [c - span / 2, c + span / 2];
+        }
+      }
+      source.setVisibleDomain(update);
+    },
+
+    onDragStart: dragEnabled
+      ? (evt) => {
+          const data = overview.screenToData(evt.x, evt.y);
+          if (!data) return;
+          startDataX = toNumber(data.x);
+          startDataY = toNumber(data.y);
+          dragHasX = false;
+          dragHasY = false;
+          if (useX) {
+            const dom = source.visibleXDomain;
+            if (Array.isArray(dom) && dom.length === 2) {
+              startSrcX0 = toNumber(dom[0]);
+              startSrcX1 = toNumber(dom[1]);
+              dragHasX = Number.isFinite(startSrcX0) && Number.isFinite(startSrcX1);
+            }
+          }
+          if (useY) {
+            const dom = source.visibleYDomain;
+            if (Array.isArray(dom) && dom.length === 2) {
+              startSrcY0 = toNumber(dom[0]);
+              startSrcY1 = toNumber(dom[1]);
+              dragHasY = Number.isFinite(startSrcY0) && Number.isFinite(startSrcY1);
+            }
+          }
+          dragging = dragHasX || dragHasY;
+          interactionState.active = dragging;
+        }
+      : undefined,
+    onDragMove: dragEnabled
+      ? (evt) => {
+          if (!dragging) return;
+          const data = overview.screenToData(evt.x, evt.y);
+          if (!data) return;
+          if (mode === "resize-x0" && dragHasX) {
+            source.setVisibleDomain({ x: [toNumber(data.x), startSrcX1] });
+            return;
+          }
+          if (mode === "resize-x1" && dragHasX) {
+            source.setVisibleDomain({ x: [startSrcX0, toNumber(data.x)] });
+            return;
+          }
+          if (mode === "resize-y0" && dragHasY) {
+            source.setVisibleDomain({ y: [toNumber(data.y), startSrcY1] });
+            return;
+          }
+          if (mode === "resize-y1" && dragHasY) {
+            source.setVisibleDomain({ y: [startSrcY0, toNumber(data.y)] });
+            return;
+          }
+          const update: { x?: VisibleDomainInput; y?: VisibleDomainInput } = {};
+          if (dragHasX) {
+            const dx = toNumber(data.x) - startDataX;
+            update.x = [startSrcX0 + dx, startSrcX1 + dx];
+          }
+          if (dragHasY) {
+            const dy = toNumber(data.y) - startDataY;
+            update.y = [startSrcY0 + dy, startSrcY1 + dy];
+          }
+          source.setVisibleDomain(update);
+        }
+      : undefined,
+    onDragEnd: dragEnabled
+      ? () => {
+          dragging = false;
+          interactionState.active = false;
+          mode = "pan";
+        }
+      : undefined,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface ResolvedStyle {
+  fill: Color;
+  stroke: Color;
+  strokeWidth: number;
+  cornerRadius: number;
+}
+
+function resolveIndicatorStyle(opts: DataNavigatorIndicatorOptions | undefined): ResolvedStyle {
+  return {
+    fill: opts?.fill ?? DEFAULT_INDICATOR_FILL,
+    stroke: opts?.stroke ?? DEFAULT_INDICATOR_STROKE,
+    strokeWidth: opts?.strokeWidth ?? 1,
+    cornerRadius: opts?.cornerRadius ?? 0,
+  };
+}
+
+function toNumber(v: unknown): number {
+  if (typeof v === "number") return v;
+  if (v instanceof Date) return v.getTime();
+  return Number(v);
+}
+
+function visibleNumericSpan(vp: DataViewport, axis: "x" | "y"): number | null {
+  const dom = axis === "x" ? vp.visibleXDomain : vp.visibleYDomain;
+  if (!Array.isArray(dom) || dom.length !== 2) return null;
+  const a = toNumber(dom[0]);
+  const b = toNumber(dom[1]);
+  if (!Number.isFinite(a) || !Number.isFinite(b)) return null;
+  return b - a;
+}
+
+function computeDataIndicatorRect(
+  source: DataViewport,
+  overview: DataViewport,
+  axes: DataNavigatorAxes,
+): FrameRect | null {
+  const useX = axes === "xy" || axes === "x";
+  const useY = axes === "xy" || axes === "y";
+  const f = overview.absoluteFrame;
+
+  let x = f.x;
+  let width = f.width;
+  let y = f.y;
+  let height = f.height;
+
+  const srcX = source.visibleXDomain;
+  const srcY = source.visibleYDomain;
+
+  // Pick a Y anchor for X-axis pixel mapping (and vice versa). Any value works
+  // — dataToScreen treats axes independently for continuous/time inputs.
+  const yAnchor = Array.isArray(srcY) && srcY.length > 0 ? srcY[0] : null;
+  const xAnchor = Array.isArray(srcX) && srcX.length > 0 ? srcX[0] : null;
+
+  if (useX) {
+    if (!Array.isArray(srcX) || srcX.length !== 2 || yAnchor === null) return null;
+    const left = overview.dataToScreen(srcX[0] as never, yAnchor as never);
+    const right = overview.dataToScreen(srcX[1] as never, yAnchor as never);
+    x = Math.min(left.x, right.x);
+    width = Math.abs(right.x - left.x);
+  }
+  if (useY) {
+    if (!Array.isArray(srcY) || srcY.length !== 2 || xAnchor === null) return null;
+    const top = overview.dataToScreen(xAnchor as never, srcY[0] as never);
+    const bottom = overview.dataToScreen(xAnchor as never, srcY[1] as never);
+    y = Math.min(top.y, bottom.y);
+    height = Math.abs(bottom.y - top.y);
+  }
+
+  return { x, y, width, height };
+}

package/src/range-presets.d.ts

@@ -0,0 +1,113 @@
+import type { DateDomain, NumericDomain } from "./scales.ts";
+import type { DataViewport } from "./viewport.ts";
+/** Axis the controller drives. */
+export type RangePresetAxis = "x" | "y";
+/**
+ * Resolved domain a preset applies to the viewport. Numeric pair for linear /
+ * log / score axes; Date pair for time axes.
+ */
+export type RangePresetDomain = NumericDomain | DateDomain;
+/** Optional getter form for the data-extent fallback. */
+export type RangePresetDataDomain = RangePresetDomain | (() => RangePresetDomain);
+/**
+ * Context passed to a preset's `resolve` function. `dataDomain` is the full
+ * extent of the underlying data (either provided by the consumer at
+ * construction time or, if omitted, the viewport's current visible domain
+ * sampled at construction). `now` is the current time (epoch ms) — relevant
+ * for time presets; helpers like `linearPreset` ignore it.
+ */
+export interface RangePresetContext {
+    dataDomain: RangePresetDomain;
+    now: number;
+}
+/**
+ * A single preset entry. `resolve` returns the domain the viewport should be
+ * set to when the user activates this key. Return `null` to express "this
+ * preset has no valid domain given the current data" — the controller will
+ * leave the viewport untouched and not mark itself active.
+ */
+export interface RangePreset {
+    key: string;
+    label: string;
+    resolve: (ctx: RangePresetContext) => RangePresetDomain | null;
+}
+export interface RangePresetsOptions {
+    /**
+     * Any `DataViewport` regardless of axis-value type — accepts the
+     * `DataViewport<number, number>` returned by `MountedPlot.viewport` as
+     * well as the unparameterized form. The controller only reads visible
+     * domains and applies new ones through the viewport's continuous-axis
+     * API, so X/Y value types are not constrained at this layer.
+     */
+    viewport: DataViewport<any, any>;
+    axis: RangePresetAxis;
+    presets: readonly RangePreset[];
+    /**
+     * Full data extent. Either a fixed `[min, max]` (numbers or Dates) or a
+     * getter that re-reads on each preset evaluation. If omitted, the
+     * controller snapshots the viewport's current visible domain at
+     * construction time and reuses it as the data domain.
+     */
+    dataDomain?: RangePresetDataDomain;
+    /** Defaults to `Date.now`. Re-evaluated on every `setActive`. */
+    now?: () => number;
+    /**
+     * Relative tolerance for the diff-against-snapshot custom check. A change
+     * smaller than `epsilon * max(|a|, |b|, 1)` on either endpoint is ignored.
+     * Defaults to `1e-6` — tight enough to detect a one-pixel pan, loose
+     * enough to absorb float round-trips through the axis scale.
+     */
+    epsilon?: number;
+}
+/** Subscriber receives the new active key, or `null` for "custom". */
+export type RangePresetsSubscriber = (active: string | null) => void;
+export interface RangePresetsController {
+    readonly presets: readonly RangePreset[];
+    /**
+     * Activate a preset by key. Re-resolves the preset, applies the resulting
+     * domain to the viewport, and remembers the resolved snapshot so future
+     * `onChange` events can detect manual changes. Passing `null` clears the
+     * active state without touching the viewport.
+     */
+    setActive(key: string | null): void;
+    /** Currently active preset key, or `null` if user has panned/zoomed manually. */
+    getActive(): string | null;
+    /** Subscribe to active-state changes. Returns an unsubscribe fn. */
+    subscribe(fn: RangePresetsSubscriber): () => void;
+    dispose(): void;
+}
+export declare function createRangePresets(opts: RangePresetsOptions): RangePresetsController;
+/**
+ * Recognized time-preset keys. Each maps to a window relative to `now`
+ * (except `MAX`, which uses the full data extent, and `YTD` which goes
+ * from January 1 of the current year to `now`).
+ */
+export type TimePresetKey = "24H" | "7D" | "1M" | "3M" | "6M" | "1Y" | "YTD" | "MAX";
+/**
+ * Time-axis preset. Resolves to a `DateDomain` ending at `now` (or the data
+ * domain's end, for `MAX`). Built-in months use calendar-approximate
+ * constants (30/90/182/365 days) — close enough for chart UI.
+ */
+export declare function timePreset(key: TimePresetKey, label?: string): RangePreset;
+/**
+ * Linear / numeric preset showing the last `span` units of `dataDomain` —
+ * i.e. `[max - span, max]`. Useful for "last 100m", "last 50 errors", etc.
+ * `MAX`-style behavior comes from passing `Infinity` (will clamp to the
+ * full data domain).
+ */
+export declare function linearPreset(opts: {
+    key: string;
+    label: string;
+    span: number;
+}): RangePreset;
+/**
+ * Log-axis preset showing the last `decades` decades of the data — i.e.
+ * `[max / 10^decades, max]`, clamped to the data domain's lower bound.
+ * The viewport itself stays linear-or-log depending on its scale config;
+ * this helper just picks the domain endpoints.
+ */
+export declare function logPreset(opts: {
+    key: string;
+    label: string;
+    decades: number;
+}): RangePreset;