diff --git a/API.md b/API.md index b9db3a3..b57f625 100644 --- a/API.md +++ b/API.md @@ -16,6 +16,7 @@ - [getWaypoints](#getwaypoints) - [removeRoutes](#removeroutes) - [on](#on) + - [off](#off) ## MapboxDirections @@ -185,3 +186,21 @@ Subscribe to events that happen within the plugin. - `fn` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** function that's called when the event is emitted. Returns **[MapboxDirections](#mapboxdirections)** this; + +### off + +Unsubscribe to events previously registered. + +**Parameters** + +- `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** name of event. Available events and the data passed into their respective event objects are: + - **clear** `{ type: } Type is one of 'origin' or 'destination'` + - **loading** `{ type: } Type is one of 'origin' or 'destination'` + - **profile** `{ profile } Profile is one of 'driving', 'walking', or 'cycling'` + - **origin** `{ feature } Fired when origin is set` + - **destination** `{ feature } Fired when destination is set` + - **route** `{ route } Fired when a route is updated` + - **error** \`{ error } Error as string +- `fn` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** function used when the event was registered. + +Returns **[MapboxDirections](#mapboxdirections)** this; diff --git a/src/actions/index.js b/src/actions/index.js index d599549..7b169e4 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -321,6 +321,34 @@ export function eventSubscribe(type, fn) { }; } +export function eventUnsubscribe(type, fn) { + return (dispatch, getState) => { + const { events } = getState(); + + if (!events[type]) { + return { + type: types.EVENTS, + events + }; + } + + if (fn) { + // Drop the event if it exists in the events object + const fnToDelete = events[type].indexOf(fn); + if (fnToDelete >= 0) { + events[type].splice(fnToDelete, 1); + } + } else { + delete events[type]; + } + + return { + type: types.EVENTS, + events: events + }; + }; +} + export function eventEmit(type, data) { return (dispatch, getState) => { const { events } = getState(); diff --git a/src/controls/inputs.js b/src/controls/inputs.js index 3499590..d5ee0d2 100644 --- a/src/controls/inputs.js +++ b/src/controls/inputs.js @@ -36,15 +36,18 @@ export default class Inputs { } animateToCoordinates(mode, coords) { - const { origin, destination, routePadding } = this.store.getState(); - + const { origin, destination, waypoints, routePadding } = this.store.getState(); + if (origin.geometry && destination.geometry && !isEqual(origin.geometry, destination.geometry)) { + + const ways = waypoints.filter((waypoint) => (waypoint.geometry)) + // Animate map to fit bounds. const bb = extent({ type: 'FeatureCollection', - features: [origin, destination] + features: [origin, destination, ...ways] }); this._map.fitBounds([[bb[0], bb[1]], [bb[2], bb[3]]], {padding: routePadding}); diff --git a/src/controls/instructions.js b/src/controls/instructions.js index 9f28434..7bec5f2 100644 --- a/src/controls/instructions.js +++ b/src/controls/instructions.js @@ -38,6 +38,7 @@ export default class Instructions { if (directions.length && shouldRender) { const direction = this.directions = directions[routeIndex]; + const allSteps = direction.legs.reduce((legs, leg) => legs.concat(leg.steps), []); if (compile) { direction.legs.forEach(function(leg) { @@ -50,7 +51,7 @@ export default class Instructions { this.container.innerHTML = instructionsTemplate({ routeIndex, routes: directions.length, - steps: direction.legs[0].steps, // Todo: Respect all legs, + steps: allSteps, format: utils.format[unit], duration: utils.format[unit](direction.distance), distance: utils.format.duration(direction.duration) diff --git a/src/directions.js b/src/directions.js index bc21f57..6755489 100644 --- a/src/directions.js +++ b/src/directions.js @@ -105,7 +105,9 @@ export default class MapboxDirections { * @returns {Control} `this` */ onRemove(map) { - this.container.parentNode.removeChild(this.container); + if (this.container.parentNode !== null) { + this.container.parentNode.removeChild(this.container); + } this.removeRoutes(); map.off('mousedown', this.onDragDown); map.off('mousemove', this.move); @@ -300,7 +302,6 @@ export default class MapboxDirections { } } else { this.actions.setDestinationFromCoordinates(coords); - this._map.flyTo({ center: coords }); } } } @@ -371,7 +372,7 @@ export default class MapboxDirections { _onDragUp() { if (!this.isDragging) return; - const { hoverMarker, origin, destination } = store.getState(); + const { hoverMarker, origin, destination, waypoints } = store.getState(); switch (this.isDragging.layer.id) { case 'directions-origin-point': @@ -383,7 +384,9 @@ export default class MapboxDirections { case 'directions-hover-point': // Add waypoint if a sufficent amount of dragging has occurred. if (hoverMarker.geometry && !utils.coordinateMatch(this.isDragging, hoverMarker)) { - this.actions.addWaypoint(0, hoverMarker); + const click = this.isDragging.geometry.coordinates; + const index = utils.getNextWaypoint(this.getRoute.bind(this), waypoints, click); + this.actions.addWaypoint(index, hoverMarker); } break; } @@ -528,7 +531,22 @@ export default class MapboxDirections { getWaypoints() { return store.getState().waypoints; } - + + /** + * Fetch all current points in a route. + * @returns {Array} route points + */ + getRoute() { + return this + ._map + .getSource('directions') + ._data + .features + .find(({geometry}) => geometry.type === 'LineString') + .geometry + .coordinates; + } + /** * Removes all routes and waypoints from the map. * @@ -558,4 +576,15 @@ export default class MapboxDirections { this.actions.eventSubscribe(type, fn); return this; } + + /** + * Unsubscribe to events + * @param {String} type name of event. Available events are outlined in `on` + * @param {Function} fn optional. The function that's called when the event is emitted. + * @returns {Directions} this; + */ + off(type, fn) { + this.actions.eventUnsubscribe(type, fn); + return this; + } } diff --git a/src/utils.js b/src/utils.js index d0c2937..2c0aee3 100644 --- a/src/utils.js +++ b/src/utils.js @@ -62,4 +62,43 @@ const format = { } }; -export default { format, coordinateMatch, createPoint, validCoords, wrap, roundWithOriginalPrecision }; +const distance = ([x1, y1], [x2, y2]) => + Math.hypot((x1 - x2), (y1 - y2)); + +const nearest = origin => + (p1, p2, index) => + (distance(origin, p1) < distance(origin, p2)) + ? p1 + : p2.concat(index); + + +const find = (route, origin) => route + .reduce(nearest(origin), [Infinity, Infinity, -1])[2]; + +const compare = point => + waypoint => + coordinateMatch(point, waypoint); + +const getNextWaypoint = (getRoute, waypoints, origin) => { + if (waypoints.length === 0) return 0; + + const route = getRoute(); + + for(let i = find(route, origin); i < route.length; i++) { + const index = waypoints.findIndex(compare({ geometry: { coordinates: route[i] } })); + if (index !== -1) { + return index; + } + } + return waypoints.length; +}; + +export default { + format, + coordinateMatch, + createPoint, + validCoords, + wrap, + roundWithOriginalPrecision, + getNextWaypoint +};