matterviz 0.4.1 → 0.4.3

package/dist/plot/core/marginals.js

@@ -0,0 +1,436 @@
+// Shared marginal-distribution model for all 2D plots. Pure and unit-tested: types,
+// shorthand resolution, pad reservation, strip geometry, and the curve math (histogram /
+// kde / cdf / rug). The PlotMarginals.svelte renderer consumes these; each plot only adapts
+// its data to MarginalSeriesInput and folds reserve_marginal_pad into its `pad`.
+import { sorted_range } from './interactions';
+import { get_scale_type_name } from './types';
+import { gaussian_kde } from '../box/kde';
+import { bin } from 'd3-array';
+export const MARGINAL_SIDES = [`top`, `bottom`, `left`, `right`];
+// Top/bottom strips run along the x (horizontal) positional axis; left/right run along y
+const is_x_side = (side) => side === `top` || side === `bottom`;
+// Build a MarginalAxis from a host plot's scale fn + current range, reading scale_type/format/label
+// off the plot's AxisConfig (DRYs the per-axis object every host plot passes to PlotMarginals; the
+// renderer defaults a missing scale_type to `linear`). `tick_label` maps a position to a label.
+export const marginal_axis = (scale, range, axis, tick_label) => ({
+    scale,
+    range,
+    scale_type: axis.scale_type,
+    format: axis.format,
+    label: axis.label,
+    tick_label,
+});
+// Pixel tolerance for rug-tick hit-testing (a tick farther than this from the pointer is a miss)
+export const MARGINAL_HIT_TOLERANCE_PX = 10;
+// Pure hit-test: given a strip's render context and a pointer position in wrapper px, return the
+// nearest datum as a MarginalHover (or null for a miss). ctx.curves is kind-homogeneous, so we
+// branch once on the first curve's kind, matching only along the shared positional axis. Non-finite
+// data is skipped (consistent with the renderer) so custom reduce/data curves can't yield ghost hits.
+export function marginal_hit(ctx, px, py) {
+    const { side, curves, positional_scale, value_scale, baseline, config, scale_type } = ctx;
+    const is_x = is_x_side(side);
+    const pointer_pos = is_x ? px : py; // along the shared positional axis
+    const pointer_cross = is_x ? py : px; // across the strip thickness (the value direction)
+    const kind = curves[0]?.curve.kind;
+    if (!kind)
+        return null;
+    const contains_cross = (value_px) => Number.isFinite(value_px) &&
+        pointer_cross >= Math.min(baseline, value_px) &&
+        pointer_cross <= Math.max(baseline, value_px);
+    const hover = (curve, extra) => ({
+        side,
+        x: px,
+        y: py,
+        color: config.color ?? curve.color,
+        label: curve.label,
+        kind,
+        config,
+        scale_type,
+        format: ctx.format,
+        pos_label: ctx.tick_label?.(extra.pos),
+        axis_title: ctx.axis_title,
+        ...extra,
+    });
+    if (kind === `bars`) {
+        // Among bins whose rendered rect contains the pointer, pick the largest-value (tallest) bar.
+        // Baseline-anchored bars nest, so the tallest containing bar wins render-order independently.
+        let best = null;
+        for (const series_curve of curves) {
+            if (series_curve.curve.kind !== `bars`)
+                continue;
+            for (const bar of series_curve.curve.bins) {
+                if (!Number.isFinite(bar.value) || bar.value <= 0)
+                    continue; // finite positive only (matches renderer)
+                const edge_a = positional_scale(bar.pos0);
+                const edge_b = positional_scale(bar.pos1);
+                if (!Number.isFinite(edge_a) || !Number.isFinite(edge_b))
+                    continue;
+                if (pointer_pos < Math.min(edge_a, edge_b) || pointer_pos > Math.max(edge_a, edge_b)) {
+                    continue;
+                }
+                if (!contains_cross(value_scale(bar.value)))
+                    continue;
+                if (!best || bar.value > best.bar.value)
+                    best = { curve: series_curve, bar };
+            }
+        }
+        if (!best)
+            return null;
+        const { bar } = best;
+        return hover(best.curve, {
+            pos: (bar.pos0 + bar.pos1) / 2,
+            pos0: bar.pos0,
+            pos1: bar.pos1,
+            value: bar.value,
+        });
+    }
+    if (kind === `line`) {
+        let chosen = null;
+        let best_extent = -1;
+        for (const series_curve of curves) {
+            if (series_curve.curve.kind !== `line`)
+                continue;
+            const pts = [];
+            let min_pos = Infinity;
+            let max_pos = -Infinity;
+            for (const pt of series_curve.curve.points) {
+                const px_pos = positional_scale(pt.pos);
+                const px_val = value_scale(pt.value);
+                if (!Number.isFinite(px_pos) || !Number.isFinite(px_val))
+                    continue;
+                pts.push({ curve: series_curve, pos: pt.pos, value: pt.value, px_pos, px_val });
+                min_pos = Math.min(min_pos, px_pos);
+                max_pos = Math.max(max_pos, px_pos);
+            }
+            if (pts.length < 2)
+                continue; // renderer skips line/area paths without two finite points
+            if (pointer_pos < min_pos || pointer_pos > max_pos)
+                continue;
+            let near = null;
+            let near_dist = Infinity;
+            for (const pt of pts) {
+                const pos_dist = Math.abs(pt.px_pos - pointer_pos);
+                if (pos_dist < near_dist) {
+                    near_dist = pos_dist;
+                    near = pt;
+                }
+            }
+            if (!near || !contains_cross(near.px_val))
+                continue;
+            const extent = Math.abs(near.px_val - baseline);
+            if (extent > best_extent)
+                [best_extent, chosen] = [extent, near];
+        }
+        return chosen ? hover(chosen.curve, { pos: chosen.pos, value: chosen.value }) : null;
+    }
+    // rug: nearest tick along the positional axis, within a pixel tolerance (no value/cross axis)
+    let best = null;
+    for (const series_curve of curves) {
+        if (series_curve.curve.kind !== `rug`)
+            continue;
+        for (const pos of series_curve.curve.positions) {
+            const px_pos = positional_scale(pos);
+            if (!Number.isFinite(px_pos))
+                continue;
+            const dist = Math.abs(px_pos - pointer_pos);
+            if (dist < (best?.dist ?? Infinity))
+                best = { curve: series_curve, pos, dist };
+        }
+    }
+    if (!best || best.dist > MARGINAL_HIT_TOLERANCE_PX)
+        return null;
+    return hover(best.curve, { pos: best.pos });
+}
+// Co-located defaults (mirrors REF_LINE_STYLE_DEFAULTS in types.ts). Deliberately NOT part of
+// settings.ts DEFAULTS to avoid pulling marginals into the settings-UI JSON schema.
+export const MARGINAL_DEFAULTS = {
+    type: `histogram`,
+    size: 64,
+    gap: 6,
+    placement: `auto`,
+    per_series: true,
+    bins: 60,
+    bandwidth: `silverman`,
+    stroke_width: 1.5,
+    opacity: 1,
+    value_axis: true,
+};
+// Normalize a single side's shorthand to a MarginalConfig, `false` (explicit disable), or
+// undefined (not specified -> fall back to default)
+const to_config = (input) => {
+    if (input === undefined)
+        return undefined;
+    if (input === false)
+        return false;
+    if (input === true)
+        return {};
+    if (typeof input === `string`)
+        return { type: input };
+    return input;
+};
+// Merge a user side-input over the plot's default side-input into a resolved config (or null)
+const resolve_side = (user_input, default_input) => {
+    const user = to_config(user_input);
+    if (user === false)
+        return null; // explicit disable wins over any default
+    const base = to_config(default_input);
+    const base_cfg = base === false ? undefined : base;
+    if (user === undefined && base_cfg === undefined)
+        return null; // side inactive
+    return { ...MARGINAL_DEFAULTS, ...base_cfg, ...user };
+};
+// Expand the `marginals` prop into a per-side resolved config, merging with the plot's
+// `default_sides` (the sensible defaults a given plot enables when `marginals` is `true`).
+// - `true`: enable exactly the plot's default sides
+// - a type string: that type on the plot's default sides (or top+right if none), inheriting
+//   each default side's config (e.g. shared bins)
+// - a per-side map: enable ONLY the sides the user lists (default sides do not auto-activate),
+//   merging the plot's per-side default config under the user's
+export function normalize_marginals(prop, default_sides = {}) {
+    const result = { top: null, bottom: null, left: null, right: null };
+    if (prop == null || prop === false)
+        return result;
+    if (prop === true) {
+        for (const side of MARGINAL_SIDES)
+            result[side] = resolve_side(undefined, default_sides[side]);
+        return result;
+    }
+    if (typeof prop === `string`) {
+        const sides = Object.keys(default_sides).length > 0 ? default_sides : { top: true, right: true };
+        for (const side of MARGINAL_SIDES) {
+            if (!(side in sides))
+                continue;
+            result[side] = resolve_side(prop, default_sides[side]);
+        }
+        return result;
+    }
+    // Explicit per-side map: only sides the user names become active
+    for (const side of MARGINAL_SIDES) {
+        if (prop[side] === undefined)
+            continue;
+        result[side] = resolve_side(prop[side], default_sides[side]);
+    }
+    return result;
+}
+// Padding (px) each plot must add to its `pad` to make room for active marginal strips
+export function reserve_marginal_pad(resolved) {
+    const reserve = (cfg) => (cfg ? cfg.size + cfg.gap : 0);
+    return {
+        t: reserve(resolved.top),
+        b: reserve(resolved.bottom),
+        l: reserve(resolved.left),
+        r: reserve(resolved.right),
+    };
+}
+// Sum two padding objects (used to fold marginal reservation into the decoration pad)
+export const add_sides = (a, b) => ({
+    t: a.t + b.t,
+    b: a.b + b.b,
+    l: a.l + b.l,
+    r: a.r + b.r,
+});
+// Default axis a side binds to when `config.axis` is unset
+export const default_axis_for_side = (side) => is_x_side(side) ? `x1` : `y1`;
+// Which sides carry an axis (drives `auto` placement). Bottom/left hold the primary x/y axes and
+// are always present; top/right only when the plot shows a secondary axis there.
+export const marginal_axis_presence = (top, right) => ({ top, bottom: true, left: true, right });
+// Whether the strip should hug the plot edge (`flush`) vs sit beyond the ticks (`outer`)
+const is_flush = (placement, has_axis) => placement === `flush` || (placement === `auto` && !has_axis);
+// Pixel rect of a marginal strip. The cross dimension spans the plot area (so it aligns with
+// the shared positional scale); the thickness is `config.size`, positioned per placement.
+export function marginal_strip_rect(side, pad, width, height, config, has_axis) {
+    const { size, gap } = config;
+    const flush = is_flush(config.placement, has_axis);
+    const is_x = is_x_side(side);
+    const grows_negative = side === `top` || side === `left`;
+    // thickness-axis position of the strip's near edge: flush sits a gap from the plot, outer at
+    // the container edge (top/left strips go before the plot, bottom/right strips after it)
+    const plot_near = is_x ? pad.t : pad.l;
+    const plot_far = is_x ? height - pad.b : width - pad.r;
+    const container_far = is_x ? height : width;
+    const thick = flush
+        ? grows_negative
+            ? plot_near - gap - size
+            : plot_far + gap
+        : grows_negative
+            ? 0
+            : container_far - size;
+    // cross axis spans the plot area so the strip aligns with the shared positional scale
+    const cross_min = is_x ? pad.l : pad.t;
+    const cross = Math.max(0, (is_x ? width - pad.r : height - pad.b) - cross_min);
+    return is_x
+        ? { x: cross_min, y: thick, width: cross, height: size }
+        : { x: thick, y: cross_min, width: size, height: cross };
+}
+// Linear value scale across a strip's thickness, growing away from the plot. `domain` is the
+// marginal value range (typically [0, max]); `baseline` is the plot-facing value=domain[0] edge.
+export function marginal_value_scale(side, rect, domain) {
+    const [lo, hi] = domain;
+    const span = hi - lo || 1;
+    const is_x = is_x_side(side);
+    const thickness = is_x ? rect.height : rect.width;
+    const near = is_x ? rect.y : rect.x; // strip edge at the smaller pixel coordinate
+    // top/left strips grow toward smaller pixel coords; their baseline (value=lo, plot-facing) sits
+    // at the far edge, and value increases in the negative pixel direction
+    const grows_negative = side === `top` || side === `left`;
+    const baseline = grows_negative ? near + thickness : near;
+    const sign = grows_negative ? -1 : 1;
+    return { scale: (val) => baseline + sign * ((val - lo) / span) * thickness, baseline };
+}
+// Drop non-finite positions (and matching weights), restrict to the current positional range
+// so every marginal type tracks zoom/pan consistently (histogram already clips via bin domain),
+// and drop non-positive positions on a log axis.
+const clean_pairs = (positions, weights, positional_range, scale_type) => {
+    const [lo, hi] = positional_range; // ascending (canonicalized by compute_marginal_curve)
+    const require_positive = get_scale_type_name(scale_type) === `log`;
+    const out_pos = [];
+    const out_wts = weights ? [] : undefined;
+    for (let idx = 0; idx < positions.length; idx++) {
+        const pos = positions[idx];
+        if (!Number.isFinite(pos) || pos < lo || pos > hi)
+            continue;
+        if (require_positive && pos <= 0)
+            continue;
+        if (weights && out_wts) {
+            const weight = weights[idx];
+            // skip non-finite and negative weights: a negative makes a weighted CDF non-monotone and
+            // skews histogram normalization. zero is kept (it contributes nothing and the renderer
+            // already drops zero-value bars, so skipping it would only needlessly drop rug/kde positions)
+            if (!Number.isFinite(weight) || weight < 0)
+                continue;
+            out_wts.push(weight);
+        }
+        out_pos.push(pos);
+    }
+    return { positions: out_pos, weights: out_wts };
+};
+function compute_histogram(positions, weights, config, positional_range) {
+    const indices = positions.map((_, idx) => idx);
+    const binner = bin()
+        .domain(positional_range)
+        .thresholds(config.bins)
+        .value((idx) => positions[idx]);
+    const binned = binner(indices);
+    let max = 0;
+    const bins = binned.map((items) => {
+        const value = weights ? items.reduce((sum, idx) => sum + weights[idx], 0) : items.length;
+        if (value > max)
+            max = value;
+        return { pos0: items.x0 ?? 0, pos1: items.x1 ?? 0, value };
+    });
+    // count: raw; probability: value/total; density: value/(total*bin_width)
+    if (config.normalize && config.normalize !== `count`) {
+        const grand = bins.reduce((sum, item) => sum + item.value, 0) || 1;
+        max = 0;
+        for (const item of bins) {
+            const width = item.pos1 - item.pos0;
+            item.value =
+                config.normalize === `density`
+                    ? item.value / (grand * (width || 1))
+                    : item.value / grand;
+            if (item.value > max)
+                max = item.value;
+        }
+    }
+    return { kind: `bars`, bins, max };
+}
+function compute_cdf(positions, weights) {
+    const order = positions.map((_, idx) => idx).sort((a, b) => positions[a] - positions[b]);
+    const total = weights ? weights.reduce((sum, weight) => sum + weight, 0) : positions.length;
+    const points = [];
+    let cum = 0;
+    for (const idx of order) {
+        cum += weights ? weights[idx] : 1;
+        const pos = positions[idx];
+        const value = total > 0 ? cum / total : 0;
+        // collapse ties so positions stay strictly increasing (keeps monotone curves well-behaved)
+        const last = points[points.length - 1];
+        if (last?.pos === pos)
+            last.value = value;
+        else
+            points.push({ pos, value });
+    }
+    return { kind: `line`, points, max: 1 };
+}
+// Smallest strictly-positive value (Infinity if none): repairs a degenerate log lower bound (<= 0)
+// so kde grids / histogram bins don't dip to non-renderable positions
+const smallest_positive = (vals) => vals.reduce((min, val) => (val > 0 && val < min ? val : min), Infinity);
+function compute_kde(positions, config, positional_range, scale_type) {
+    // The grid spans the current positional range, so on a normal log axis (range[0] > 0) no
+    // clamping is needed. Only repair a degenerate log range whose lower bound is <= 0 (would
+    // otherwise emit grid points at <= 0 -> NaN pixels) by clamping to the smallest positive sample.
+    let clip;
+    if (get_scale_type_name(scale_type) === `log` && positional_range[0] <= 0) {
+        const min_pos = smallest_positive(positions);
+        if (Number.isFinite(min_pos))
+            clip = [min_pos, null];
+    }
+    const kde = gaussian_kde(positions, {
+        bandwidth: config.bandwidth,
+        n_points: 100,
+        range: positional_range,
+        clip,
+        max_samples: 5000,
+    });
+    let max = 0;
+    for (const density of kde.density)
+        if (density > max)
+            max = density;
+    const points = kde.grid.map((pos, idx) => ({ pos, value: kde.density[idx] }));
+    return { kind: `line`, points, max };
+}
+// Summarize 1-D values into a renderable curve per the marginal type. Filters non-finite
+// inputs and returns an empty curve for empty input (so nothing renders).
+export function compute_marginal_curve(positions, weights, config, positional_range, scale_type) {
+    // Canonicalize to an ascending range so a reversed (inverted-axis) range doesn't crash
+    // d3.bin (negative-length bin array) or empty the kde grid
+    const range = sorted_range(positional_range[0], positional_range[1]);
+    const { positions: pos, weights: wts } = clean_pairs(positions, weights, range, scale_type);
+    // rug returns the raw positions (empty or not); other types short-circuit on empty input
+    if (config.type === `rug`)
+        return { kind: `rug`, positions: pos };
+    if (pos.length === 0) {
+        return config.type === `histogram`
+            ? { kind: `bars`, bins: [], max: 0 }
+            : { kind: `line`, points: [], max: 0 };
+    }
+    if (config.type === `histogram`) {
+        // on a degenerate log axis (lower bound <= 0) bin over the smallest positive sample instead, so
+        // bins aren't spread below the smallest renderable position (mirrors compute_kde's clip)
+        const hist_range = get_scale_type_name(scale_type) === `log` && range[0] <= 0
+            ? [smallest_positive(pos), range[1]]
+            : range;
+        return compute_histogram(pos, wts, config, hist_range);
+    }
+    if (config.type === `cdf`)
+        return compute_cdf(pos, wts);
+    return compute_kde(pos, config, range, scale_type);
+}
+// Max value across a set of curves (for a shared per-side value scale)
+export const curves_max = (curves) => curves.reduce((max, curve) => (curve.kind === `rug` ? max : Math.max(max, curve.max)), 0);
+// Value-axis title for a strip: explicit `config.label` wins, else auto per type (histogram uses
+// its normalization). `rug` has no value axis so returns an empty string.
+export const default_marginal_label = (config) => {
+    if (config.label != null)
+        return config.label;
+    if (config.type === `cdf`)
+        return `CDF`;
+    if (config.type === `kde`)
+        return `density`;
+    if (config.type === `histogram`)
+        return config.normalize ?? `count`;
+    return ``;
+};
+// d3-format spec for the strip's value-axis tick labels, picked to suit each type's value units
+export const marginal_value_format = (config) => {
+    if (config.type === `cdf`)
+        return `.0%`;
+    if (config.type === `histogram`) {
+        if (config.normalize === `probability`)
+            return `.0%`;
+        if (config.normalize === `density`)
+            return `.2~g`;
+        return `.3~s`;
+    }
+    return `.2~g`; // kde density
+};

package/dist/plot/core/pan-zoom.svelte.d.ts

@@ -1,13 +1,11 @@
 import type { Point2D, Vec2 } from '../../math';
+import { type Rect } from './layout';
 import type { AxisRanges, PanConfig, ScaleType } from './types';
 type Axis = `x` | `x2` | `y` | `y2`;
 export interface PanZoomOptions {
     ranges: () => AxisRanges;
     scale_type: (axis: Axis) => ScaleType | undefined;
-    plot_dims: () => {
-        width: number;
-        height: number;
-    };
+    plot_bounds: () => Rect;
     pan: () => PanConfig | undefined;
     set_range: (axis: Axis, range: Vec2) => void;
     svg: () => SVGElement | null;

package/dist/plot/core/pan-zoom.svelte.js

@@ -3,17 +3,18 @@
 // per-component policy (which axis props to write on rect-zoom, reset semantics)
 // stays in the component via the on_rect_zoom/on_reset/set_range callbacks.
 import { MIN_TOUCH_DISTANCE_PIXELS, pan_range_by_pixels, PINCH_ZOOM_THRESHOLD, remove_drag_listeners, snapshot_ranges, zoom_range_by_factor, } from './interactions';
+import { point_in_rect } from './layout';
 const AXES = [`x`, `x2`, `y`, `y2`];
 export function create_pan_zoom(opts) {
     // Rect-zoom drag state
-    let drag_state = $state({ start: null, current: null, bounds: null });
+    let drag_state = $state(null);
     // Pan state
     let is_focused = $state(false);
     let shift_held = $state(false);
     let pan_drag_state = $state(null);
     let touch_state = $state(null);
     const cancel_rect_drag = () => {
-        drag_state = { start: null, current: null, bounds: null };
+        drag_state = null;
         if (typeof window !== `undefined`) {
             window.removeEventListener(`mousemove`, on_window_mouse_move);
             window.removeEventListener(`mouseup`, on_window_mouse_up);
@@ -21,7 +22,7 @@ export function create_pan_zoom(opts) {
         }
     };
     const on_window_mouse_move = (evt) => {
-        if (!drag_state.start || !drag_state.bounds)
+        if (!drag_state)
             return;
         const coords = {
             x: evt.clientX - drag_state.bounds.left,
@@ -35,7 +36,7 @@ export function create_pan_zoom(opts) {
         opts.on_drag_move?.(coords, inside_svg);
     };
     const on_window_mouse_up = () => {
-        if (drag_state.start && drag_state.current) {
+        if (drag_state) {
             // Ignore minuscule drag rects (e.g. accidental clicks)
             const dx = Math.abs(drag_state.start.x - drag_state.current.x);
             const dy = Math.abs(drag_state.start.y - drag_state.current.y);
@@ -47,7 +48,7 @@ export function create_pan_zoom(opts) {
     // Pan/zoom all four axes from an interaction-start snapshot, each in its own
     // scale's transform space (log axes pan by a constant factor, linear by a shift)
     const pan_all_axes = (init, dx_px, dy_px) => {
-        const dims = opts.plot_dims();
+        const dims = opts.plot_bounds();
         for (const axis of AXES) {
             const horizontal = axis === `x` || axis === `x2`;
             opts.set_range(axis, pan_range_by_pixels(init[`initial_${axis}_range`], horizontal ? dx_px : dy_px, horizontal ? dims.width : dims.height, opts.scale_type(axis)));
@@ -72,9 +73,17 @@ export function create_pan_zoom(opts) {
         window.removeEventListener(`mouseup`, on_pan_end);
     };
     const on_mouse_down = (evt) => {
+        if (evt.button !== 0)
+            return;
         const svg = opts.svg();
         if (!svg)
             return;
+        // The SVG also contains axes, tick labels, and titles. Only the padded data
+        // rectangle may start a drag interaction.
+        const svg_bounds = svg.getBoundingClientRect();
+        const coords = { x: evt.clientX - svg_bounds.left, y: evt.clientY - svg_bounds.top };
+        if (!point_in_rect(coords, opts.plot_bounds()))
+            return;
         // Shift+drag pans (when enabled); plain drag draws the zoom rect
         const pan_enabled = opts.pan()?.enabled !== false;
         if (pan_enabled && evt.shiftKey) {
@@ -89,9 +98,7 @@ export function create_pan_zoom(opts) {
             return;
         }
         // Cache bounds at drag start so window mousemove can compute relative coords
-        const bounds = svg.getBoundingClientRect();
-        const coords = { x: evt.clientX - bounds.left, y: evt.clientY - bounds.top };
-        drag_state = { start: coords, current: coords, bounds };
+        drag_state = { start: coords, current: coords, bounds: svg_bounds };
         window.addEventListener(`mousemove`, on_window_mouse_move);
         window.addEventListener(`mouseup`, on_window_mouse_up);
         document.body.style.cursor = `crosshair`;
@@ -104,7 +111,7 @@ export function create_pan_zoom(opts) {
         if (pan_cfg?.enabled === false || !is_focused || !shift_held)
             return;
         evt.preventDefault();
-        const dims = opts.plot_dims();
+        const dims = opts.plot_bounds();
         const sensitivity = pan_cfg?.wheel_sensitivity ?? 1;
         const ranges = opts.ranges();
         // Pan along the dominant wheel direction
@@ -125,12 +132,22 @@ export function create_pan_zoom(opts) {
         const touch_enabled = pan_cfg?.enabled !== false && pan_cfg?.touch_enabled !== false;
         if (!touch_enabled || evt.touches.length !== 2)
             return;
+        const svg_bounds = opts.svg()?.getBoundingClientRect();
+        if (!svg_bounds)
+            return;
+        const plot_bounds = opts.plot_bounds();
+        const start_touches = Array.from(evt.touches).map((touch) => ({
+            x: touch.clientX,
+            y: touch.clientY,
+        }));
+        // Every contact must start in the data rectangle; touching an axis or label
+        // must not arm a gesture that later moves into the plot.
+        const starts_outside_plot = start_touches.some((touch) => !point_in_rect({ x: touch.x - svg_bounds.left, y: touch.y - svg_bounds.top }, plot_bounds));
+        if (starts_outside_plot)
+            return;
         evt.preventDefault();
         touch_state = {
-            start_touches: Array.from(evt.touches).map((touch) => ({
-                x: touch.clientX,
-                y: touch.clientY,
-            })),
+            start_touches,
             ...snapshot_ranges(opts.ranges()),
         };
     };
@@ -168,7 +185,7 @@ export function create_pan_zoom(opts) {
     const on_key_down = (evt) => {
         if (evt.target !== evt.currentTarget)
             return;
-        if (evt.key === `Escape` && drag_state.start)
+        if (evt.key === `Escape` && drag_state)
             cancel_rect_drag();
         if ([`Enter`, ` `].includes(evt.key)) {
             evt.preventDefault();
@@ -177,10 +194,10 @@ export function create_pan_zoom(opts) {
     };
     return {
         get drag_start() {
-            return drag_state.start;
+            return drag_state?.start ?? null;
         },
         get drag_current() {
-            return drag_state.current;
+            return drag_state?.current ?? null;
         },
         get is_pan_dragging() {
             return pan_drag_state !== null;
@@ -213,7 +230,7 @@ export function create_pan_zoom(opts) {
         // stuck cursor). Safe during SSR teardown, where window/document don't exist.
         destroy: () => {
             remove_drag_listeners([on_window_mouse_move, on_pan_move], [on_window_mouse_up, on_pan_end]);
-            drag_state = { start: null, current: null, bounds: null };
+            drag_state = null;
             pan_drag_state = null;
             touch_state = null;
         },

package/dist/plot/core/placed-tween.svelte.d.ts

@@ -14,8 +14,11 @@ export declare function create_placed_tween(opts: {
     tween?: () => TweenOptions<Point> | undefined;
     suspended?: () => boolean;
     manual_position?: () => Point | null;
+    on_element_resize?: () => void;
+    placement_revision?: () => unknown;
 }): {
     coords: Tween<Point>;
+    placed: () => boolean;
     set_locked: (locked: boolean) => void;
 };
 export {};