From 19d42db9ce75886622a09ec7daeff6f1f81f3a53 Mon Sep 17 00:00:00 2001 From: Jason Mandel Date: Mon, 15 Jan 2018 23:31:51 -0500 Subject: [PATCH 1/4] added mouseover event --- src/ui/bind_handlers.js | 10 ++++++++++ src/ui/events.js | 16 +++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/ui/bind_handlers.js b/src/ui/bind_handlers.js index 8a7240baee0..d6dd53f8470 100644 --- a/src/ui/bind_handlers.js +++ b/src/ui/bind_handlers.js @@ -33,6 +33,7 @@ module.exports = function bindHandlers(map: Map, options: {}) { el.addEventListener('mousedown', onMouseDown, false); el.addEventListener('mouseup', onMouseUp, false); el.addEventListener('mousemove', onMouseMove, false); + el.addEventListener('mouseover', onMouseOver, false); el.addEventListener('touchstart', onTouchStart, false); el.addEventListener('touchend', onTouchEnd, false); el.addEventListener('touchmove', onTouchMove, false); @@ -80,6 +81,15 @@ module.exports = function bindHandlers(map: Map, options: {}) { fireMouseEvent('mousemove', e); } + function onMouseOver(e: MouseEvent) { + + let target: any = e.toElement || e.target; + while (target && target !== el) target = target.parentNode; + if (target !== el) return; + + fireMouseEvent('mouseover', e); + } + function onTouchStart(e: TouchEvent) { map.stop(); fireTouchEvent('touchstart', e); diff --git a/src/ui/events.js b/src/ui/events.js index 9c65d6e71df..ae6bbdd26dd 100644 --- a/src/ui/events.js +++ b/src/ui/events.js @@ -20,6 +20,7 @@ export type MapMouseEvent = { | 'click' | 'dblclick' | 'mousemove' + | 'mouseover' | 'mouseenter' | 'mouseleave' | 'mouseover' @@ -130,7 +131,7 @@ export type MapEvent = /** * Fired when a pointing device (usually a mouse) is moved within the map. * - * @event mousemove + * @event mouseover * @memberof Map * @instance * @property {MapMouseEvent} data @@ -138,6 +139,19 @@ export type MapEvent = * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) */ + | 'mouseover' + + /** + * Fired when a pointing device (usually a mouse) is moved within the map. + * + * @event mousemove + * @memberof Map + * @instance + * @property {MapMouseEvent} data + * @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) + * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) + * @see [Display a popup on over](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + */ | 'mousemove' /** From 5ad57895de9a6bc8ec299e2c93e3cfac10506de1 Mon Sep 17 00:00:00 2001 From: Jason Mandel Date: Tue, 16 Jan 2018 10:44:50 -0500 Subject: [PATCH 2/4] testing mouseover event handler --- src/ui/bind_handlers.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/bind_handlers.js b/src/ui/bind_handlers.js index d6dd53f8470..d91e941c11c 100644 --- a/src/ui/bind_handlers.js +++ b/src/ui/bind_handlers.js @@ -83,11 +83,11 @@ module.exports = function bindHandlers(map: Map, options: {}) { function onMouseOver(e: MouseEvent) { - let target: any = e.toElement || e.target; - while (target && target !== el) target = target.parentNode; - if (target !== el) return; + let target: any = e.toElement || e.target; + while (target && target !== el) target = target.parentNode; + if (target !== el) return; - fireMouseEvent('mouseover', e); + fireMouseEvent('mouseover', e); } function onTouchStart(e: TouchEvent) { From 47d1243057b5b4e6324ee0508051ad4f7499eca0 Mon Sep 17 00:00:00 2001 From: Jason Mandel Date: Thu, 18 Jan 2018 23:01:36 -0500 Subject: [PATCH 3/4] added anchor option for marker --- src/ui/marker.js | 18 +++++++++++++++--- test/unit/ui/marker.test.js | 2 +- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/ui/marker.js b/src/ui/marker.js index 831dc02a31a..75d627f4921 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -11,11 +11,20 @@ import type Popup from './popup'; import type {LngLatLike} from "../geo/lng_lat"; import type {MapMouseEvent} from './events'; +export type Anchor = number | PointLike; +export type Offset = number | PointLike | Anchor; + +export type MarkerOptions = { + anchor: Anchor, + offset: Offset +} + /** * Creates a marker component * @param element DOM element to use as a marker. If left unspecified a default SVG will be created as the DOM element to use. * @param options * @param options.offset The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up. + *@param options.anchor The sets anchor in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up. * @example * var marker = new mapboxgl.Marker() * .setLngLat([30.5, 50.5]) @@ -24,14 +33,17 @@ import type {MapMouseEvent} from './events'; */ class Marker { _map: Map; + options: MarkerOptions; _offset: Point; + _anchor: Anchor; _element: HTMLElement; _popup: ?Popup; _lngLat: LngLat; _pos: ?Point; - constructor(element: ?HTMLElement, options?: {offset: PointLike}) { + constructor(element: ?HTMLElement, options?: {offset: PointLike, anchor: Anchor}) { this._offset = Point.convert(options && options.offset || [0, 0]); + this._anchor = Point.convert(options && options.anchor || [0, 0]); bindAll(['_update', '_onMapClick'], this); @@ -268,7 +280,7 @@ class Marker { this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform); } - this._pos = this._map.project(this._lngLat)._add(this._offset); + this._pos = this._map.project(this._lngLat)._add(this._anchor)._add(this._offset); // because rounding the coordinates at every `move` event causes stuttered zooming // we only round them when _update is called with `moveend` or when its called with @@ -277,7 +289,7 @@ class Marker { this._pos = this._pos.round(); } - DOM.setTransform(this._element, `translate(-50%, -50%) translate(${this._pos.x}px, ${this._pos.y}px)`); + DOM.setTransform(this._element, `translate(${this._pos.x}px, ${this._pos.y}px)`); } /** diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js index 6018bbb8fe5..8b273d56b53 100644 --- a/test/unit/ui/marker.test.js +++ b/test/unit/ui/marker.test.js @@ -80,7 +80,7 @@ test('Marker', (t) => { const element = window.document.createElement('div'); const marker = new Marker(element).setLngLat([0, 0]).addTo(map); const translate = Math.round(map.getContainer().offsetWidth / 2); - t.equal(marker.getElement().style.transform, `translate(-50%, -50%) translate(${translate}px, ${translate}px)`, 'Marker centered'); + t.equal(marker.getElement().style.transform, `translate(${translate}px, ${translate}px)`, 'Marker centered'); t.end(); }); From ada8e9239a7151d73bc74b28dee1cd63d286c2bc Mon Sep 17 00:00:00 2001 From: Jason Mandel Date: Fri, 19 Jan 2018 00:14:43 -0500 Subject: [PATCH 4/4] Revert "added anchor option for marker" --- src/ui/marker.js | 18 +++--------------- test/unit/ui/marker.test.js | 2 +- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/ui/marker.js b/src/ui/marker.js index 75d627f4921..831dc02a31a 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -11,20 +11,11 @@ import type Popup from './popup'; import type {LngLatLike} from "../geo/lng_lat"; import type {MapMouseEvent} from './events'; -export type Anchor = number | PointLike; -export type Offset = number | PointLike | Anchor; - -export type MarkerOptions = { - anchor: Anchor, - offset: Offset -} - /** * Creates a marker component * @param element DOM element to use as a marker. If left unspecified a default SVG will be created as the DOM element to use. * @param options * @param options.offset The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up. - *@param options.anchor The sets anchor in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up. * @example * var marker = new mapboxgl.Marker() * .setLngLat([30.5, 50.5]) @@ -33,17 +24,14 @@ export type MarkerOptions = { */ class Marker { _map: Map; - options: MarkerOptions; _offset: Point; - _anchor: Anchor; _element: HTMLElement; _popup: ?Popup; _lngLat: LngLat; _pos: ?Point; - constructor(element: ?HTMLElement, options?: {offset: PointLike, anchor: Anchor}) { + constructor(element: ?HTMLElement, options?: {offset: PointLike}) { this._offset = Point.convert(options && options.offset || [0, 0]); - this._anchor = Point.convert(options && options.anchor || [0, 0]); bindAll(['_update', '_onMapClick'], this); @@ -280,7 +268,7 @@ class Marker { this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform); } - this._pos = this._map.project(this._lngLat)._add(this._anchor)._add(this._offset); + this._pos = this._map.project(this._lngLat)._add(this._offset); // because rounding the coordinates at every `move` event causes stuttered zooming // we only round them when _update is called with `moveend` or when its called with @@ -289,7 +277,7 @@ class Marker { this._pos = this._pos.round(); } - DOM.setTransform(this._element, `translate(${this._pos.x}px, ${this._pos.y}px)`); + DOM.setTransform(this._element, `translate(-50%, -50%) translate(${this._pos.x}px, ${this._pos.y}px)`); } /** diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js index 8b273d56b53..6018bbb8fe5 100644 --- a/test/unit/ui/marker.test.js +++ b/test/unit/ui/marker.test.js @@ -80,7 +80,7 @@ test('Marker', (t) => { const element = window.document.createElement('div'); const marker = new Marker(element).setLngLat([0, 0]).addTo(map); const translate = Math.round(map.getContainer().offsetWidth / 2); - t.equal(marker.getElement().style.transform, `translate(${translate}px, ${translate}px)`, 'Marker centered'); + t.equal(marker.getElement().style.transform, `translate(-50%, -50%) translate(${translate}px, ${translate}px)`, 'Marker centered'); t.end(); });