svelteplot 0.3.10 → 0.3.11

package/dist/core/FacetGrid.svelte

@@ -64,6 +64,14 @@
             transform="translate({useFacetX ? facetXScale(facetX) : 0}, {useFacetY
                 ? facetYScale(facetY)
                 : 0})">
+            <!-- facets need invisible rect -->
+            <rect
+                x={plot.options.marginLeft}
+                y={plot.options.marginTop}
+                width={facetWidth}
+                height={facetHeight}
+                fill="transparent"
+                pointer-events="all" />
             <Facet
                 fx={facetX}
                 fy={facetY}

package/dist/marks/Pointer.svelte

@@ -1,14 +1,21 @@
 <script lang="ts" generics="Datum extends DataRow">
     interface PointerMarkProps {
         data: Datum[];
-        children: Snippet<[{ data: Datum[] }]>;
+        children?: Snippet<[{ data: Datum[] }]>;
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         z?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points
          */
         maxDistance?: number;
+        /**
+         * tolerance for considering points as "the same" when sharing x or y values
+         * defaults to 0 pixel
+         */
+        tolerance?: number;
         /**
          * called whenever the selection changes
          * @param data
@@ -24,10 +31,14 @@
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
+    const POINTER_X = Symbol('pointerX');
+    const POINTER_Y = Symbol('pointerY');
+
     let markProps: PointerMarkProps = $props();
 
     const DEFAULTS = {
@@ -40,7 +51,10 @@
         x,
         y,
         z,
+        fx,
+        fy,
         maxDistance = 15,
+        tolerance = Number.NEGATIVE_INFINITY,
         onupdate = null
     }: PointerMarkProps = $derived({
         ...DEFAULTS,
@@ -49,27 +63,21 @@
 
     let selectedData = $state([]);
 
-    function onMouseMove(evt: MouseEvent) {
-        updateSelection(evt.layerX, evt.layerY);
-    }
-
-    function onTouchMove(evt: TouchEvent) {
-        if (evt.touches) {
-            const rect = (evt.target as HTMLElement).getBoundingClientRect();
-            const pageTop = window.scrollY || document.documentElement.scrollTop;
-            const ox = rect.left;
-            const oy = rect.top + pageTop;
-
-            const touch = evt.touches[0] || evt.changedTouches[0];
-            if (touch) {
-                const ex = touch.pageX - ox;
-                const ey = touch.pageY - oy;
-                updateSelection(ex, ey);
-            }
+    function onPointerMove(evt: MouseEvent) {
+        let facetEl = evt.target as SVGElement;
+        while (facetEl && !facetEl.classList.contains('facet')) {
+            facetEl = facetEl.parentElement;
         }
+        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+
+        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
+        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+
+        // console.log({ relativeX, relativeY }, evt);
+        updateSelection(relativeX, relativeY);
     }
 
-    function onMouseLeave() {
+    function onPointerLeave() {
         selectedData = [];
         if (onupdate) onupdate(selectedData);
     }
@@ -79,31 +87,44 @@
         const points = trees.map((tree) =>
             tree.find(x != null ? ex : 0, y != null ? ey : 0, maxDistance)
         );
-        selectedData = points.filter((d) => d != null);
+        // also include other points that share the same x or y value
+        const otherPoints = trees.flatMap((tree, i) => {
+            return tree
+                .data()
+                .filter((d) => d !== points[i])
+                .filter(
+                    (d) =>
+                        (!isFinite(d[POINTER_X]) ||
+                            Math.abs(d[POINTER_X] - points[i]?.[POINTER_X]) < tolerance) &&
+                        (!isFinite(d[POINTER_Y]) ||
+                            Math.abs(d[POINTER_Y] - points[i]?.[POINTER_Y]) < tolerance)
+                );
+        });
+        selectedData = [...points, ...otherPoints].filter((d) => d != null);
         if (onupdate) onupdate(selectedData);
     }
 
     $effect(() => {
-        plot.body?.addEventListener('mousemove', onMouseMove);
-        plot.body?.addEventListener('mouseleave', onMouseLeave);
-        plot.body?.addEventListener('touchmove', onTouchMove);
+        plot.body?.addEventListener('pointermove', onPointerMove);
+        plot.body?.addEventListener('pointerleave', onPointerLeave);
 
         return () => {
-            plot.body?.removeEventListener('mousemove', onMouseMove);
-            plot.body?.removeEventListener('mouseleave', onMouseLeave);
-            plot.body?.removeEventListener('touchmove', onTouchMove);
+            plot.body?.removeEventListener('pointermove', onPointerMove);
+            plot.body?.removeEventListener('pointerleave', onPointerLeave);
         };
     });
 
-    const groups = $derived(
-        z != null ? d3Groups(data, (d) => resolveChannel('z', d, { x, z })) : [[null, data]]
-    );
+    const groups = $derived.by(() => {
+        const groups = [];
+        groupFacetsAndZ(data, { x, y, z, fx, fy }, (d) => groups.push(d));
+        return groups;
+    });
 
     const trees = $derived(
-        groups.map(([, items]) =>
+        groups.map((items) =>
             quadtree()
-                .x(x != null ? (d) => d.__pointerX : () => 0)
-                .y(y != null ? (d) => d.__pointerY : () => 0)
+                .x(x != null ? (d) => d[POINTER_X] : () => 0)
+                .y(y != null ? (d) => d[POINTER_Y] : () => 0)
                 .addAll(
                     items?.map((d) => {
                         const [px, py] = projectXY(
@@ -115,8 +136,8 @@
                         );
                         return {
                             ...(isDataRecord(d) ? d : { [RAW_VALUE]: d }),
-                            __pointerX: px,
-                            __pointerY: py
+                            [POINTER_X]: px,
+                            [POINTER_Y]: py
                         };
                     }) ?? []
                 )

package/dist/marks/Pointer.svelte.d.ts

@@ -3,16 +3,23 @@ import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): {
         data: Datum[];
-        children: Snippet<[{
+        children?: Snippet<[{
             data: Datum[];
-        }]>;
+        }]> | undefined;
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         z?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points
          */
         maxDistance?: number;
+        /**
+         * tolerance for considering points as "the same" when sharing x or y values
+         * defaults to 0 pixel
+         */
+        tolerance?: number;
         /**
          * called whenever the selection changes
          * @param data

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteplot",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "license": "ISC",
   "author": {
     "name": "Gregor Aisch",