2017-09-29 22:11:14 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Leaflet debug page</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../css/screen.css" />
|
|
|
|
|
|
|
|
|
|
<style>
|
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 23:46:44 +08:00
|
|
|
html, body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
#wrapper {
|
|
|
|
|
transform: scale(.5, .25); /* scaleX0 = .5 ; scaleY0 = .25 */
|
|
|
|
|
transform-origin: 0 0;
|
|
|
|
|
padding: 40px 100px; /* displayed padding-top = scaleY0 * 40px = 10px ; displayed padding-left = scaleX0 * 100px = 50px */
|
|
|
|
|
}
|
2017-09-29 22:11:14 +08:00
|
|
|
#map {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 300px;
|
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 23:46:44 +08:00
|
|
|
transform: scale(3, 8); /* scaleX = .5 * 3 = 1.5 ; scaleY = .25 * 8 = 2 */
|
2017-09-29 22:11:14 +08:00
|
|
|
transform-origin: 0 0;
|
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 23:46:44 +08:00
|
|
|
border-width: 30px 70px; /* displayed border-top-width = scaleY * 30px = 60px ; displayed border-left-width = scaleX * 70px = 105px */
|
2017-09-29 22:11:14 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="../leaflet-include.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
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 23:46:44 +08:00
|
|
|
<div id="wrapper">
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
</div>
|
2017-09-29 22:11:14 +08:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
2018-03-12 15:46:20 +08:00
|
|
|
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
|
|
|
osmAttrib = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
2017-09-29 22:11:14 +08:00
|
|
|
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
|
|
|
|
|
|
|
|
|
var map = L.map('map')
|
|
|
|
|
.setView([50.5, 30.51], 15)
|
|
|
|
|
.addLayer(osm);
|
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 23:46:44 +08:00
|
|
|
|
|
|
|
|
var mapContainer = map.getContainer();
|
|
|
|
|
|
|
|
|
|
var marker = L.marker([50.5, 30.51], {
|
|
|
|
|
draggable: true
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
map.on('drag', function (event) {
|
|
|
|
|
console.log('map:');
|
|
|
|
|
console.log(L.DomEvent.getMousePosition(event.originalEvent, mapContainer));
|
|
|
|
|
});
|
|
|
|
|
marker.on('drag', function (event) {
|
|
|
|
|
console.log('marker:');
|
|
|
|
|
console.log(L.DomEvent.getMousePosition(event.originalEvent, mapContainer));
|
|
|
|
|
});
|
2017-09-29 22:11:14 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|