Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/draggable markers #6687

Merged
merged 2 commits into from
May 18, 2018
Merged

Feature/draggable markers #6687

merged 2 commits into from
May 18, 2018

Conversation

ryanhamley
Copy link
Contributor

@ryanhamley ryanhamley commented May 17, 2018

Launch Checklist

  • briefly describe the changes in this PR

  • Adds drag functionality to markers either via a draggable option or a setDraggable method

  • Adds dragstart, drag and dragend events on Marker

  • Updates JSDocs

  • Adds new drag-a-marker example (leaves drag-a-point example as is)

  • Adds tests for dragging a marker

  • Makes evented._addEventListener idempotent to avoid adding the same listener multiple times

  • write tests for all new functionality

  • document any changes to public APIs

  • manually test the debug page

Closes #6102
Closes #3087
Closes #4597

@ryanhamley ryanhamley requested a review from jfirebaugh May 17, 2018 01:25
@ryanhamley
Copy link
Contributor Author

I am unsure about the final two tests in marker.test.js and would love some feedback on them. The idea was to have tests where we would create a marker, simulate a mouse/touch drag through the combination of mousedown, mousemove and mouseup events then compare the start and end positions to see that the marker was actually moved. The tests pass, but I'm not convinced that Marker with draggable:true moves to new position in response to a mouse-triggered drag is doing what I think it's doing. Setting clientX and clientY when creating a new mousemove event works, but is it actually moving the mouse around? AFAIK, it's not possible to move the mouse with Javascript due to a variety of security concerns. Is there a better way to write this test? Should it be included at all? Is this type of interaction really better suited for an integration test (which we don't have) than a unit test?

Note that I also deleted the equivalent TouchEvent test because TouchEvents don't have clientX and clientY properties or anything like them to set when creating the event.

Copy link
Contributor

@jfirebaugh jfirebaugh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The drag-simulation tests look fine. Yes, it's not actually moving the actual cursor on screen; it's sufficient just to provide the input events that should trigger the marker to move position.

@@ -1,118 +0,0 @@

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep this example around; it's still useful to show how to implement draggability for symbol layers.

// e.g. when setDraggable is called before addTo
if (this._map) {
if (shouldBeDraggable) {
this._map.on('mousedown', this._addDragHandler);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to either fix #4597 or check that this._draggable state is actually changing, so as not to register duplicate handlers if setDraggable(true) is called when the marker is already draggable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a5da36c addresses #4597 which would resolve this comment. Is that an acceptable solution? It definitely works.

src/ui/marker.js Outdated

/**
* Returns the marker's draggable property
* @returns {boolean} `this._draggable`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't reference the private property here.

@@ -6,6 +6,7 @@ type Listener = (Object) => any;
type Listeners = { [string]: Array<Listener> };

function _addEventListener(type: string, listener: Listener, listenerList: Listeners) {
_removeEventListener(type, listener, listenerList);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than remove and re-add, make this an affirmative check for the current presence of listener, so that a redundant on doesn't change the relative order of listeners. E.g. given map.on('click', listenerA); map.on('click', listenerB); map.on('click', listenerA);, listenerA should be the first one called.

Copy link
Contributor

@jfirebaugh jfirebaugh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@ryanhamley ryanhamley force-pushed the feature/draggable-markers branch from 549c6cd to bac1f67 Compare May 18, 2018 22:35
@ryanhamley ryanhamley merged commit bac1f67 into master May 18, 2018
@ryanhamley ryanhamley deleted the feature/draggable-markers branch May 18, 2018 22:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants