stream-charts 1.2.1 → 2.0.0

package/dist/app/charts/plots/hitTesting.js

@@ -0,0 +1,136 @@
+// Canvas has no per-shape mouse events (no SVG `.on("mouseover", ...)` equivalent) -- everything is
+// just pixels on a bitmap. So instead of attaching a handler to each `<path>`/`<circle>`, plots
+// register their drawn geometry (in canvas/pixel coordinates) here, and a single `mousemove`
+// listener on the shared canvas element hit-tests the mouse position against that geometry to
+// figure out which series (if any) the mouse is over.
+/**
+ * Squared distance from a point to a line segment (avoids a sqrt when just comparing distances).
+ * @param px The point's x-coordinate
+ * @param py The point's y-coordinate
+ * @param x1 The x-coordinate of the segment's start
+ * @param y1 The y-coordinate of the segment's start
+ * @param x2 The x-coordinate of the segment's end
+ * @param y2 The y-coordinate of the segment's end
+ * @return The squared distance from the point to the nearest point on the segment
+ */
+function distanceSquaredToSegment(px, py, x1, y1, x2, y2) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0) {
+        const ddx = px - x1;
+        const ddy = py - y1;
+        return ddx * ddx + ddy * ddy;
+    }
+    // project point onto the segment, clamped to the segment's extent
+    let t = ((px - x1) * dx + (py - y1) * dy) / lengthSquared;
+    t = Math.max(0, Math.min(1, t));
+    const closestX = x1 + t * dx;
+    const closestY = y1 + t * dy;
+    const ddx = px - closestX;
+    const ddy = py - closestY;
+    return ddx * ddx + ddy * ddy;
+}
+/**
+ * Finds the series (and specific point/segment within it) hit by the given mouse position.
+ * Entries are checked in *reverse* insertion order -- i.e. most-recently-added first -- and the
+ * first entry with any qualifying match wins, matching normal DOM/SVG hit-testing (the topmost
+ * element captures the pointer) rather than picking whichever entry happens to report the smallest
+ * geometric distance across all entries.
+ *
+ * This distinction matters whenever two entries visually overlap: e.g. a bar-chart's value-line
+ * segment is drawn on top of (and can extend slightly beyond) its min/max bar's rect. A rect is a
+ * containment test -- any point inside it is unambiguously "hit," with no notion of "how close" --
+ * so comparing it against a segment's proximity-based distance would let the rect win everywhere
+ * the two overlap, even dead-center on the line, since 0 distance beats any nonzero one. Since
+ * plots insert geometry in the same order they draw it, checking entries topmost-first resolves
+ * this the way it looks on screen: whichever shape is drawn last (visually on top) claims the
+ * pointer first, and only falls through to earlier (lower) entries where it doesn't match at all.
+ *
+ * Within a single entry (e.g. Scatter's many polyline segments, or Raster's many disjoint spikes)
+ * the closest qualifying point/segment still wins, since there's no z-order to speak of among
+ * pieces of the same drawn shape.
+ * @param mouseX The mouse's x-coordinate, in the same canvas coordinate space the geometry was recorded in
+ * @param mouseY The mouse's y-coordinate, in the same canvas coordinate space the geometry was recorded in
+ * @param geometry A `map(series_name -> SeriesGeometry)` as last drawn, in draw order
+ * @return The hit series and matched index, or `undefined` if the mouse isn't over any series
+ */
+export function seriesAt(mouseX, mouseY, geometry) {
+    const entries = Array.from(geometry.entries()).reverse();
+    for (const [name, { points, asLine, segments, rects, hitRadius }] of entries) {
+        const hitRadiusSquared = hitRadius * hitRadius;
+        if (rects !== undefined) {
+            const index = rects.findIndex(rect => mouseX >= rect.x && mouseX <= rect.x + rect.width &&
+                mouseY >= rect.y && mouseY <= rect.y + rect.height);
+            if (index >= 0)
+                return { name, index };
+            continue;
+        }
+        if (segments !== undefined) {
+            let bestIndex = -1;
+            let bestDistanceSquared = Infinity;
+            segments.forEach(([[x1, y1], [x2, y2]], index) => {
+                const distanceSquared = distanceSquaredToSegment(mouseX, mouseY, x1, y1, x2, y2);
+                if (distanceSquared <= hitRadiusSquared && distanceSquared < bestDistanceSquared) {
+                    bestDistanceSquared = distanceSquared;
+                    bestIndex = index;
+                }
+            });
+            if (bestIndex >= 0)
+                return { name, index: bestIndex };
+            continue;
+        }
+        if (points.length === 0)
+            continue;
+        if (asLine) {
+            let bestIndex = -1;
+            let bestDistanceSquared = Infinity;
+            for (let i = 0; i < points.length - 1; i++) {
+                const [x1, y1] = points[i];
+                const [x2, y2] = points[i + 1];
+                const distanceSquared = distanceSquaredToSegment(mouseX, mouseY, x1, y1, x2, y2);
+                if (distanceSquared <= hitRadiusSquared && distanceSquared < bestDistanceSquared) {
+                    bestDistanceSquared = distanceSquared;
+                    // attribute the hit to whichever endpoint of the segment is nearer
+                    const toStart = (mouseX - x1) ** 2 + (mouseY - y1) ** 2;
+                    const toEnd = (mouseX - x2) ** 2 + (mouseY - y2) ** 2;
+                    bestIndex = toStart <= toEnd ? i : i + 1;
+                }
+            }
+            if (bestIndex >= 0)
+                return { name, index: bestIndex };
+            continue;
+        }
+        let bestIndex = -1;
+        let bestDistanceSquared = Infinity;
+        points.forEach(([x, y], index) => {
+            const distanceSquared = (mouseX - x) ** 2 + (mouseY - y) ** 2;
+            if (distanceSquared <= hitRadiusSquared && distanceSquared < bestDistanceSquared) {
+                bestDistanceSquared = distanceSquared;
+                bestIndex = index;
+            }
+        });
+        if (bestIndex >= 0)
+            return { name, index: bestIndex };
+    }
+    return undefined;
+}
+/**
+ * Converts a `MouseEvent` (as received by a `canvas.addEventListener('mousemove', ...)` handler)
+ * into canvas-local coordinates, accounting for the canvas's on-page position and any CSS scaling
+ * between the canvas's backing-store size and its displayed size.
+ * @param event The mouse event
+ * @param canvas The canvas element the event was dispatched to
+ * @return The `[x, y]` position of the event, in the canvas's own CSS-pixel coordinate space
+ * (i.e. the same space `ctx` drawing calls use once the devicePixelRatio transform is applied)
+ */
+export function canvasLocalPoint(event, canvas) {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = rect.width > 0 ? canvas.clientWidth / rect.width : 1;
+    const scaleY = rect.height > 0 ? canvas.clientHeight / rect.height : 1;
+    return [
+        (event.clientX - rect.left) * scaleX,
+        (event.clientY - rect.top) * scaleY
+    ];
+}
+//# sourceMappingURL=hitTesting.js.map

package/dist/app/charts/plots/hitTesting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hitTesting.js","sourceRoot":"","sources":["../../../../src/app/charts/plots/hitTesting.ts"],"names":[],"mappings":"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"}

package/dist/app/charts/plots/plot.d.ts

@@ -1,24 +1,52 @@
-import { Dimensions } from "../styling/margins";
-import { GSelection } from "../d3types";
-export type Series<D> = Array<D>;
+import type { Dimensions } from "../styling/margins";
+import type { CanvasContext } from "../d3types";
+import type { FastShiftArray } from "fast-shift-array";
+import type { BaseAxisRange } from "../axes/BaseAxisRange";
+import type { AxisInterval } from "../axes/AxisInterval";
 /**
- * Creates the main SVG for holding the plot.
+ * A series' data: a plain array, or the `FastShiftArray` that backs a {@link BaseSeries}
+ */
+export type Series<D> = Array<D> | FastShiftArray<D>;
+/**
+ * Creates the {@link CanvasContext} for the chart -- the drawing context plus the redraw
+ * registration/scheduling API that axes, plots, and the tracker use to (re)paint themselves.
+ * Replaces the old `createPlotContainer`, which appended the root SVG `<g>`.
+ * Each redraw clears the canvas, and then calls every registered draw function in z-index order
+ * (lowest first); a draw function that throws is logged and skipped, so it doesn't blank the rest.
+ * The canvas isn't sized here: call {@link resizeCanvasTo} immediately after this with the actual
+ * container dimensions.
  * @param chartId A unique value identifying the chart.
- * @param container The SVG element interface
- * @param plotDimensions The dimensions of the plot
- * @param color The SVG `color` attribute used for the axis
+ * @param canvas The `<canvas>` DOM element backing the chart.
+ * @param color The default `color` used for text/strokes when nothing more specific is set.
+ * @return The canvas context
+ * @throws Error when the canvas has no 2D rendering context
+ */
+export declare function createCanvasContext(chartId: number, canvas: HTMLCanvasElement, color: string): CanvasContext;
+/**
+ * Resizes the canvas's backing store to match `dimensions` at the current devicePixelRatio, so
+ * that drawing stays crisp on high-DPI displays, and re-applies the dpr scale to the drawing
+ * context so that one drawing-unit equals one CSS pixel. Replaces the old SVG `width`/`height`
+ * attribute updates. Call this whenever the container's pixel dimensions change, before the next
+ * redraw.
+ * @param context The canvas context
+ * @param dimensions The new overall (plot + margin) dimensions, in CSS pixels
  */
-export declare function createPlotContainer(chartId: number, container: SVGSVGElement, plotDimensions: Dimensions, color: string): GSelection;
+export declare function resizeCanvasTo(context: CanvasContext, dimensions: Dimensions): void;
 /**
- * Adds a clip area for the chart to the specified SVG element. The clip-area is given
- * an `id` of `clip-series-<chart_id>`, which because the chart ID should be unique, makes
- * this unique as well.
- * @param chartId The ID of the chart to which the clip area is to be added.
- * @param plotGroup The SVG group element to which the clip area is to be added.
- * @param plotDimensions The dimensions of the plot.
- * @return The ID of the clip-path.
+ * Clips subsequent drawing to a rectangular area. Replaces the old SVG `<clipPath>`/
+ * `setClipPathG`/`setClipPath`. Canvas clip regions are stack-based: callers must `ctx.save()`
+ * before calling this and `ctx.restore()` once the clipped drawing is done, or the clip will leak
+ * into unrelated draw calls later in the same frame.
+ * @param context The canvas context
+ * @param dimensions The dimensions of the area to clip to
+ * @param origin The top-left corner of the clip area, in canvas drawing coordinates (defaults to
+ * `(0, 0)`; pass the margin's `(left, top)` when clipping to the plot area, which is offset from
+ * the canvas origin)
  */
-export declare function setClipPathG(chartId: number, plotGroup: GSelection, plotDimensions: Dimensions): string;
+export declare function clipToArea(context: CanvasContext, dimensions: Dimensions, origin?: {
+    x: number;
+    y: number;
+}): void;
 /**
  * Represents the assignment of an x-axis and y-axis to a series. Plots (see, for example,
  * {@link ScatterPlot} and {@link RasterPlot}) use this interface to manage the assignment
@@ -35,3 +63,11 @@ export interface AxesAssignment {
  * @return An {@link AxesAssignment}
  */
 export declare const assignAxes: (xAxis: string, yAxis: string) => AxesAssignment;
+/**
+ * Converts a map holding the axes' ranges into a map holding the axes' current intervals. Used
+ * when reporting the axes' bounds to the code using the chart (see the plots' `onUpdateAxesInterval`).
+ * @param ranges A map associating an axis ID with that axis' range
+ * @return A map associating an axis ID with that axis' current interval
+ */
+export declare function currentIntervalsFrom(ranges: Map<string, BaseAxisRange>): Map<string, AxisInterval>;
+//# sourceMappingURL=plot.d.ts.map

package/dist/app/charts/plots/plot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plot.d.ts","sourceRoot":"","sources":["../../../../src/app/charts/plots/plot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAC,aAAa,EAAqB,MAAM,YAAY,CAAC;AAClE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;AAQpD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,GACd,aAAa,CA4Df;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAG,IAAI,CAWnF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACtB,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,GAAE;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAgB,GAC9C,IAAI,CAIN;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,OAAO,MAAM,KAAG,cAAkC,CAAA;AAE5F;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAIlG"}

package/dist/app/charts/plots/plot.js

@@ -1,44 +1,106 @@
-import * as d3 from "d3";
 /**
- * Creates the main SVG for holding the plot.
+ * Creates the {@link CanvasContext} for the chart -- the drawing context plus the redraw
+ * registration/scheduling API that axes, plots, and the tracker use to (re)paint themselves.
+ * Replaces the old `createPlotContainer`, which appended the root SVG `<g>`.
+ * Each redraw clears the canvas, and then calls every registered draw function in z-index order
+ * (lowest first); a draw function that throws is logged and skipped, so it doesn't blank the rest.
+ * The canvas isn't sized here: call {@link resizeCanvasTo} immediately after this with the actual
+ * container dimensions.
  * @param chartId A unique value identifying the chart.
- * @param container The SVG element interface
- * @param plotDimensions The dimensions of the plot
- * @param color The SVG `color` attribute used for the axis
+ * @param canvas The `<canvas>` DOM element backing the chart.
+ * @param color The default `color` used for text/strokes when nothing more specific is set.
+ * @return The canvas context
+ * @throws Error when the canvas has no 2D rendering context
  */
-export function createPlotContainer(chartId, container, plotDimensions, color) {
-    const { width, height } = plotDimensions;
-    return d3.select(container)
-        .attr('width', Math.max(0, width))
-        .attr('height', Math.max(0, height))
-        .attr('color', color)
-        .append('g')
-        .attr('id', `main-container-${chartId}`);
+export function createCanvasContext(chartId, canvas, color) {
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw new Error(`Unable to acquire a 2D rendering context for chart ${chartId}`);
+    }
+    const dpr = window.devicePixelRatio || 1;
+    context.textBaseline = 'alphabetic';
+    context.strokeStyle = color;
+    context.fillStyle = color;
+    const drawFns = new Map();
+    let animationFrameId = null;
+    const redrawNow = () => {
+        animationFrameId = null;
+        // clear the full backing-store (not just the CSS-pixel size, since the backing store is
+        // scaled by devicePixelRatio and the current transform includes that scale)
+        context.save();
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.restore();
+        Array.from(drawFns.entries())
+            .sort(([, a], [, b]) => a.zIndex - b.zIndex)
+            .forEach(([id, { draw }]) => {
+            try {
+                draw(canvasContext);
+            }
+            catch (error) {
+                // one registrant's draw failure (e.g. a misconfigured axis assignment) must not
+                // blank every other plot/axis/tracker sharing this canvas for the frame -- and
+                // since this runs on every subsequent data tick too, an uncaught throw here would
+                // otherwise wedge the chart's rendering permanently rather than just once
+                console.error(`Error while drawing "${id}"; chart_id: ${chartId}`, error);
+            }
+        });
+    };
+    const canvasContext = {
+        chartId,
+        canvas,
+        context2D: context,
+        dpr,
+        register: (id, draw, zIndex = 0) => {
+            drawFns.set(id, { draw, zIndex });
+            canvasContext.requestRedraw();
+        },
+        unregister: (id) => {
+            drawFns.delete(id);
+            canvasContext.requestRedraw();
+        },
+        requestRedraw: () => {
+            if (animationFrameId === null) {
+                animationFrameId = window.requestAnimationFrame(redrawNow);
+            }
+        }
+    };
+    return canvasContext;
 }
 /**
- * Adds a clip area for the chart to the specified SVG element. The clip-area is given
- * an `id` of `clip-series-<chart_id>`, which because the chart ID should be unique, makes
- * this unique as well.
- * @param chartId The ID of the chart to which the clip area is to be added.
- * @param plotGroup The SVG group element to which the clip area is to be added.
- * @param plotDimensions The dimensions of the plot.
- * @return The ID of the clip-path.
+ * Resizes the canvas's backing store to match `dimensions` at the current devicePixelRatio, so
+ * that drawing stays crisp on high-DPI displays, and re-applies the dpr scale to the drawing
+ * context so that one drawing-unit equals one CSS pixel. Replaces the old SVG `width`/`height`
+ * attribute updates. Call this whenever the container's pixel dimensions change, before the next
+ * redraw.
+ * @param context The canvas context
+ * @param dimensions The new overall (plot + margin) dimensions, in CSS pixels
  */
-export function setClipPathG(chartId, plotGroup, plotDimensions) {
-    const clipPathId = `chart-clip-path-${chartId}`;
-    // remove the old clipping region and add a new one with the updated plot dimensions
-    plotGroup.select(`#${clipPathId}-defs`).remove();
-    plotGroup
-        .append('defs')
-        .attr('id', `${clipPathId}-defs`)
-        .append("clipPath")
-        .attr("id", clipPathId)
-        .append("rect")
-        .attr("x", 0)
-        .attr("y", 0)
-        .attr("width", Math.max(0, plotDimensions.width))
-        .attr("height", Math.max(0, plotDimensions.height));
-    return clipPathId;
+export function resizeCanvasTo(context, dimensions) {
+    const { canvas, context2D, dpr } = context;
+    const width = Math.max(0, dimensions.width);
+    const height = Math.max(0, dimensions.height);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    context2D.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+/**
+ * Clips subsequent drawing to a rectangular area. Replaces the old SVG `<clipPath>`/
+ * `setClipPathG`/`setClipPath`. Canvas clip regions are stack-based: callers must `ctx.save()`
+ * before calling this and `ctx.restore()` once the clipped drawing is done, or the clip will leak
+ * into unrelated draw calls later in the same frame.
+ * @param context The canvas context
+ * @param dimensions The dimensions of the area to clip to
+ * @param origin The top-left corner of the clip area, in canvas drawing coordinates (defaults to
+ * `(0, 0)`; pass the margin's `(left, top)` when clipping to the plot area, which is offset from
+ * the canvas origin)
+ */
+export function clipToArea(context, dimensions, origin = { x: 0, y: 0 }) {
+    context.context2D.beginPath();
+    context.context2D.rect(origin.x, origin.y, Math.max(0, dimensions.width), Math.max(0, dimensions.height));
+    context.context2D.clip();
 }
 /**
  * Factory function for the assignment of axes to series
@@ -47,4 +109,15 @@ export function setClipPathG(chartId, plotGroup, plotDimensions) {
  * @return An {@link AxesAssignment}
  */
 export const assignAxes = (xAxis, yAxis) => ({ xAxis, yAxis });
+/**
+ * Converts a map holding the axes' ranges into a map holding the axes' current intervals. Used
+ * when reporting the axes' bounds to the code using the chart (see the plots' `onUpdateAxesInterval`).
+ * @param ranges A map associating an axis ID with that axis' range
+ * @return A map associating an axis ID with that axis' current interval
+ */
+export function currentIntervalsFrom(ranges) {
+    const intervals = new Map();
+    ranges.forEach((range, axisId) => intervals.set(axisId, range.current));
+    return intervals;
+}
 //# sourceMappingURL=plot.js.map

package/dist/app/charts/plots/plot.js.map

@@ -1 +1 @@
-{"version":3,"file":"plot.js","sourceRoot":"","sources":["../../../../src/app/charts/plots/plot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAKzB;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAC/B,OAAe,EACf,SAAwB,EACxB,cAA0B,EAC1B,KAAa;IAEb,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,cAAc,CAAA;IACtC,OAAO,EAAE,CAAC,MAAM,CAAqB,SAAS,CAAC;SAC1C,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;SACjC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;SACnC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;SACpB,MAAM,CAAc,GAAG,CAAC;SACxB,IAAI,CAAC,IAAI,EAAE,kBAAkB,OAAO,EAAE,CAAC,CAAA;AAChD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,SAAqB,EAAE,cAA0B;IAC3F,MAAM,UAAU,GAAG,mBAAmB,OAAO,EAAE,CAAA;IAE/C,oFAAoF;IACpF,SAAS,CAAC,MAAM,CAAC,IAAI,UAAU,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;IACjD,SAAS;SACJ,MAAM,CAAC,MAAM,CAAC;SACV,IAAI,CAAC,IAAI,EAAE,GAAG,UAAU,OAAO,CAAC;SACpC,MAAM,CAAC,UAAU,CAAC;SACd,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC;SAC1B,MAAM,CAAC,MAAM,CAAC;SACV,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;SACZ,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;SACZ,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;SAChD,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAE3D,OAAO,UAAU,CAAA;AACrB,CAAC;AAYD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,KAAa,EAAkB,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA"}
+{"version":3,"file":"plot.js","sourceRoot":"","sources":["../../../../src/app/charts/plots/plot.ts"],"names":[],"mappings":"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"}

package/dist/app/charts/plots/useCanvasZoomPan.d.ts

@@ -0,0 +1,119 @@
+import type { CanvasContext } from "../d3types";
+/**
+ * A zoom gesture's step, as the plot's zoom handler gets it
+ */
+export interface ZoomStep {
+    /**
+     * The zoom factor of this step alone, relative to the previous step (d3-zoom's own scale is
+     * cumulative; the zoom math in `axes.ts` is incremental -- see `ContinuousAxisRange.scale`)
+     */
+    factor: number;
+    /**
+     * d3-zoom's cumulative scale (e.g. for ordinal axes, whose zoom snaps back to the original
+     * range exactly at 1 -- see `OrdinalAxisRange.scale`)
+     */
+    k: number;
+    /**
+     * Where the mouse is, relative to the canvas
+     */
+    x: number;
+    y: number;
+}
+/**
+ * The options for {@link useCanvasZoomPan}
+ */
+export interface CanvasZoomPanOptions {
+    /**
+     * Whether dragging pans the plot
+     */
+    panEnabled: boolean;
+    /**
+     * Whether the mouse wheel zooms the plot
+     */
+    zoomEnabled: boolean;
+    /**
+     * Whether zooming requires the shift (or ctrl) key to be held down
+     */
+    keyModifiersRequired: boolean;
+    /**
+     * The smallest and largest (cumulative) zoom scales
+     */
+    scaleExtent: [min: number, max: number];
+    /**
+     * Whether the wheel changes d3-zoom's scale the opposite way to d3-zoom's default, so that all
+     * the plots zoom the same way for the same gesture. Plots differ in which way their axes move
+     * with the scale: a continuous axis's range *widens* as the scale goes up (an incremental factor
+     * above 1 grows it), while an ordinal axis's (pixel) range widens its bands as the scale goes
+     * up. So the continuous-axis plots use d3-zoom's default, and the bar plot (with its ordinal
+     * axis) inverts the wheel to match them. Defaults to `false`.
+     */
+    invertWheel?: boolean;
+    /**
+     * The plot's margin and dimensions, which bound the zoom's translation
+     */
+    translateExtent: [[left: number, top: number], [right: number, bottom: number]];
+    /**
+     * Called when a pan (drag) starts (e.g. to suppress tooltips while panning)
+     */
+    onPanStart?: () => void;
+    /**
+     * Called for each step of a pan
+     * @param dx The horizontal distance (px) moved since the previous step
+     * @param dy The vertical distance (px) moved since the previous step
+     */
+    onPan: (dx: number, dy: number) => void;
+    /**
+     * Called when a pan ends
+     */
+    onPanEnd?: () => void;
+    /**
+     * Called for each step of a zoom gesture (a real one: programmatic changes to d3-zoom's
+     * transform, e.g. a reset, aren't reported)
+     * @param step The step's zoom factor, d3-zoom's cumulative scale, and the mouse position
+     */
+    onZoom: (step: ZoomStep) => void;
+    /**
+     * The plot's `onZoomReset` property: called (whenever zooming is set up) with a function that
+     * resets the zoom -- d3-zoom's own transform, and then the plot's view (see `resetView`)
+     */
+    onZoomReset?: (resetZoom: () => void) => void;
+    /**
+     * Restores the plot's view (its axes' original ranges) when the zoom is reset (see `onZoomReset`)
+     */
+    resetView?: () => void;
+}
+/**
+ * The zoom controls a plot gets back from {@link useCanvasZoomPan}
+ */
+export interface CanvasZoomPanControls {
+    /**
+     * Resets d3-zoom's own (cumulative) transform to identity, e.g. when the plot's axes are reset
+     * to their original ranges -- otherwise the next zoom gesture would continue from the stale,
+     * accumulated scale
+     */
+    resetZoomTransform: () => void;
+    /**
+     * Sets d3-zoom's own (cumulative) scale, e.g. when restoring a saved zoom state. Sets it
+     * directly (where d3-zoom keeps it), without dispatching a "zoom" event.
+     * @param k The scale
+     */
+    setZoomScale: (k: number) => void;
+}
+/**
+ * Sets up panning (dragging) and zooming (the mouse wheel) on a plot's canvas, with d3's drag and
+ * zoom behaviors, and detaches them when the plot unmounts (or the canvas, or the settings they
+ * depend on, change).
+ *
+ * - Zooming only responds to wheel events (and, when required, only with the shift or ctrl key
+ *   down): d3-zoom also handles mouse drags on its own, which would otherwise fire zoom events for
+ *   the same gesture the dedicated drag behavior pans with.
+ * - d3-zoom's scale is cumulative; each zoom step is also handed to the plot as an incremental
+ *   factor (relative to the previous step), which is reset whenever d3-zoom's transform is.
+ * - The handlers are always the plot's latest ones, so the behaviors needn't be re-attached when
+ *   the handlers change.
+ * @param canvasContext The plot's canvas context (`null` until the canvas exists)
+ * @param options Whether panning and zooming are enabled, their extents, and the handlers
+ * @return The controls for d3-zoom's own transform (reset it, or set its scale)
+ */
+export declare function useCanvasZoomPan(canvasContext: CanvasContext | null, options: CanvasZoomPanOptions): CanvasZoomPanControls;
+//# sourceMappingURL=useCanvasZoomPan.d.ts.map

package/dist/app/charts/plots/useCanvasZoomPan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasZoomPan.d.ts","sourceRoot":"","sources":["../../../../src/app/charts/plots/useCanvasZoomPan.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,QAAQ;IACrB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,oBAAoB,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,CAAA;IACvC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC/E;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;OAIG;IACH,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;;OAIG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B;;;;OAIG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAYD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,EAAE,OAAO,EAAE,oBAAoB,GAAG,qBAAqB,CAyG1H"}