Chart cursor does not stop at the left edge on mobile

[aronsommer]

Description

On mobile devices, when dragging the cursor in the elevation chart, the vertical line (.mouse-focus-line) does not stop at the left edge of the chart. It is possible to drag the line far to the left of the chart's visible area.

Steps to Reproduce

1. Open a map with the elevation plugin on a mobile device.
2. Tap and hold on the elevation chart to show the cursor.
3. Drag your finger to the left, past the beginning of the chart.

Expected Behavior

The cursor should stop at the left edge of the chart.

Actual Behavior

The cursor continues to move to the left, off of the chart.

Suggested Fix

This can be fixed by clamping the xCoord value in src/components/chart.js.

In the _initBrush function, inside the focus constant, change the following line:

let xCoord  = coords[0];

to this:

let xCoord  = _.clamp(coords[0], [0, this._width()]); // Clamps the cursor position to the chart's bounds.

[hupe13]

There is an open issue. Your code seems to solve the problem. If I change src/components/chart.js with your code it works for me too. Thank you very much.

@Raruto, can you change this please?

I'm sorry, it was to late yesterday night. It does not work!

[Raruto]

@hupe13 @aronsommer Have you tried with a later version of d3?

I saw that the PR has been merged.

[aronsommer]

@Raruto @hupe13

I have tested it again with the original d3.min.js (version 7.8.4) from leaflet-elevation-2.5.1 on my Android in Chrome.

With or without my fix I get this errors in console:

d3.min.js:2 Uncaught TypeError: s(...).moved is not a function
    at SVGGElement.d (d3.min.js:2:68112)
    at SVGGElement.<anonymous> (d3.min.js:2:20686)

Uncaught TypeError: s(...).ended is not a function
    at SVGGElement.p (d3.min.js:2:68153)
    at SVGGElement.<anonymous> (d3.min.js:2:20686)

But I can confirm again my fix has resolved the issue for me.

The cursor does now stop at the left edge of the chart.

Here is my fixed script: https://github.com/openmapeditor/openmapeditor/blob/main/leaflet-elevation-2.5.1/src/components/chart.js

And you can test it yourself here: https://www.openmapeditor.com/

[hupe13]

The PR has not been merged yet. Since I have no idea how to install this, I changed it manually.

With the fix of @aronsommer and the PR it works! Tested with Samsung Internet browser, Chrome and Fennec on Android.

[aronsommer]

@hupe13 @aronsommer Have you tried with a later version of d3?

I saw that the PR has been merged.

@Raruto To update d3 is it enough to include it in the head of index or do we need update it in leaflet-elevation.js on line 348?

It seems I can confirm again: Also when using d3.min.js version 7.9.0 without my fix the cursor does not stop at the left edge of the chart.

[Raruto]

To update d3 is it enough to include it in the head of index or do we need update it in leaflet-elevation.js on line 348?

When included first, the html <script> takes precedence over the built-in lazy loader.

I changed it manually. With the fix of @aronsommer and the PR it works!

Ok, thank you @hupe13.

--

@aronsommer Feel free to open a PR, if you can include some tests too :)

👋 Raruto

[aronsommer]

#302