Go to file
ghybs fe9e0f2333
Fix(Draggable): compensate for container CSS scale (#6055)
* Test(MapDragSpec): add mouse drag with CSS scaled container

This test is failing as of this commit.

* Fix(Draggable): measure drag compensating for CSS scale

so that the computed offset (i.e. user drag length) is divided by the CSS scale applied on the `_element`'s container. Later on when `Draggable` updates the `_element`'s position, the latter is affected by the CSS scale by the browser.
Added a `getSizedParentNode` function in `DomUtil` in order to automatically retrieve the closest parent node in the DOM hierarchy tree that has a non null size (so that we can compute the scale in `DomEvent.getMousePosition`), without having to specify the parent node explicitly (which is ugly).

* Fix(getMousePosition): getBoundingClientRect is in page scale

therefore it must also be divided by the container scale in order to compute the relative position of the event in the scaled container.

* Test(MarkerDragSpec): add drag with CSS scaled container

this should pass automatically at this commit, thanks to the previous modification of Draggable.

* Debug(map-scaled): add draggable marker

as well as another CSS scaled wrapper, plus some border and padding, and debugging console logs, to make sure the computations of `getMousePosition` are correct (correctly removing the border width, and compensating for CSS scale).

* Docs(getMousePosition): explicitly exclude border

* Docs(DomUtil): add return value of getSizedParentNode

was missing in docstring.

* Feat(DomUtil): add getScale function

so that it can be used by DomEvent.getMousePosition and Draggable.

* Refactor(Draggable): cache container scale

to avoid triggering browser reflow continuously during _onMove, but only on drag start (_onDown).
By compensating for the scale within Draggable instead of delegating to DomEvent.getMousePosition, it also becomes possible to check first for the clickTolerance, so that we prevents user's small movement based on screen, irrespective of rendered scale.

* Test(Map+MarkerDrag): remove scale on initial movement

that is intended to overcome Draggable clickTolerance, since now it is based on screen pixels, irrespective of applied CSS scale on the map.
Thanks to the tolerance in the expected final position, this has no effect on the result of the test, even though the overall drag is now slightly shorter.

* Refactor(DomEvent): use DomUtil.getScale in getMousePosition

to factorize scale computation (also used within Draggable).
2018-03-16 19:46:44 +04:00
build Use https everywhere for OSM links (#6082) 2018-03-12 08:46:20 +01:00
debug Fix(Draggable): compensate for container CSS scale (#6055) 2018-03-16 19:46:44 +04:00
dist Fix map pan when touchZoom is disabled (#5952) 2017-12-15 16:36:00 +01:00
docs Plugins: Adding Leaflet-Shades (#6095) 2018-03-15 15:39:20 +01:00
spec Fix(Draggable): compensate for container CSS scale (#6055) 2018-03-16 19:46:44 +04:00
src Fix(Draggable): compensate for container CSS scale (#6055) 2018-03-16 19:46:44 +04:00
.gitignore Merge branch 'gh-pages' into master-docs 2016-08-18 11:27:28 +02:00
.travis.yml Chore(scripts): Remove jake dependency and use NPM scripts instead (#5828) 2018-02-05 11:15:32 +04:00
bower.json ES6 modules & Rollup (#4989) 2017-01-30 11:35:16 +01:00
CHANGELOG.md Release 1.3.1 (#6010) 2018-01-18 13:56:04 +01:00
CONTRIBUTING.md Chore(scripts): Remove jake dependency and use NPM scripts instead (#5828) 2018-02-05 11:15:32 +04:00
FAQ.md Correct Here Maps URL (#5482) 2017-04-26 16:37:15 +02:00
ISSUE_TEMPLATE.md Docs(issueTemplate): use generic reference URL 2017-12-12 22:59:58 +04:00
LICENSE 2018 (#6076) 2018-03-05 22:46:47 +02:00
package.json update ssri dependency to 5.2.2 (#6086) 2018-03-09 12:20:31 +01:00
PLUGIN-GUIDE.md Small typo (#5849) 2017-10-19 09:07:55 +02:00
README.md Update README.md: Leaflet 1.0.0 weights 37KiB, not 33KiB 2016-09-29 12:46:46 +02:00
RELEASE.md update RELEASE.md 2018-01-09 17:52:26 +01:00

Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 37 KB of gzipped JS code, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

For more info, docs and tutorials, check out the official website.
For Leaflet downloads (including the built master version), check out the download page.

We're happy to meet new contributors. If you want to get involved with Leaflet development, check out the contribution guide. Let's make the best mapping library that will ever exist, and push the limits of what's possible with online maps!

Build Status