svelteplot 0.4.2-pr-185.1 → 0.4.2-pr-186.0

package/dist/marks/helpers/RectPath.svelte

@@ -28,18 +28,12 @@ Helper component for rendering rectangular marks in SVG
 
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
     import { roundedRect } from '../../helpers/roundedRect';
-    import type {
-        BaseMarkProps,
-        BaseRectMarkProps,
-        BorderRadius,
-        ScaledDataRecord,
-        UsedScales,
-        PlotContext,
-        DataRecord
-    } from '../../index.js';
     import { addEventHandlers } from './events.js';
     import { getContext } from 'svelte';
     import Anchor from './Anchor.svelte';
+    import type { BaseMarkProps, BaseRectMarkProps, BorderRadius } from '../../types/mark.js';
+    import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
+    import type { PlotContext, UsedScales } from '../../types/index.js';
 
     let {
         datum,

package/dist/marks/helpers/RectPath.svelte.d.ts

@@ -1,4 +1,6 @@
-import type { BaseMarkProps, BaseRectMarkProps, ScaledDataRecord, UsedScales, DataRecord } from '../../index.js';
+import type { BaseMarkProps, BaseRectMarkProps } from '../../types/mark.js';
+import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
+import type { UsedScales } from '../../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): {
         datum: ScaledDataRecord<Datum_1>;

package/dist/marks/helpers/events.js

@@ -56,19 +56,23 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
     for (const [eventName, eventHandler] of Object.entries(events)) {
         if (eventHandler) {
             const wrappedHandler = (origEvent) => {
-                const { scales } = getPlotState();
-                if (origEvent.layerX !== undefined) {
+                const { scales, body, options } = getPlotState();
+                if (origEvent instanceof MouseEvent || origEvent instanceof PointerEvent) {
+                    let facetEl = origEvent.target;
+                    while (facetEl && !facetEl.classList.contains('facet')) {
+                        facetEl = facetEl.parentElement;
+                    }
+                    const facetRect = (facetEl?.firstChild ?? body).getBoundingClientRect();
+                    const relativeX = origEvent.clientX - facetRect.left + (options.marginLeft ?? 0);
+                    const relativeY = origEvent.clientY - facetRect.top + (options.marginTop ?? 0);
                     if (scales.projection) {
-                        const [x, y] = scales.projection.invert([
-                            origEvent.layerX,
-                            origEvent.layerY
-                        ]);
+                        const [x, y] = scales.projection.invert([relativeX, relativeY]);
                         origEvent.dataX = x;
                         origEvent.dataY = y;
                     }
                     else {
-                        origEvent.dataX = invertScale(scales.x, origEvent.layerX);
-                        origEvent.dataY = invertScale(scales.y, origEvent.layerY);
+                        origEvent.dataX = invertScale(scales.x, relativeX);
+                        origEvent.dataY = invertScale(scales.y, relativeY);
                     }
                 }
                 eventHandler(origEvent, datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
@@ -91,10 +95,13 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
 }
 function invertScale(scale, position) {
     if (scale.type === 'band') {
-        // invert band scale since scaleBand doesn't have an invert function
+        const range = scale.fn.range();
+        const domain = scale.fn.domain();
         const eachBand = scale.fn.step();
-        const index = Math.floor(position / eachBand);
-        return scale.fn.domain()[index];
+        const extent = range[1] - range[0];
+        const posInRange = ((position - range[0]) / extent) * Math.abs(extent);
+        const index = Math.floor(posInRange / eachBand);
+        return domain[index];
     }
     return scale.fn.invert ? scale.fn.invert(position) : undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.4.2-pr-185.1",
+    "version": "0.4.2-pr-186.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",