Merge branch 'waypoint-index'

See mapbox#200
Thanks to @patrix for the fix

API.md

@@ -16,6 +16,7 @@
   - [getWaypoints](#getwaypoints)
   - [removeRoutes](#removeroutes)
   - [on](#on)
+  - [off](#off)
 
 ## MapboxDirections
 
@@ -173,13 +174,43 @@ Subscribe to events that happen within the plugin.
 
 **Parameters**
 
+<<<<<<< HEAD
+
 - `type` **[String](https://developer.mozilla.org/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/docs/Web/JavaScript/Reference/Statements/function)** function that's called when the event is emitted.
+- # `fn` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** function that's called when the event is emitted.
+- `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 that's called when the event is emitted.
+  > > > > > > > waypoint-index
+
+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;

src/actions/index.js

@@ -343,6 +343,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();

src/controls/inputs.js

@@ -36,16 +36,18 @@ export default class Inputs {
   }
 
   animateToCoordinates(mode, coords) {
-    const { origin, destination } = this.store.getState();
+    const { origin, destination, waypoints } = 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: 80 });

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)

src/directions.js

@@ -108,7 +108,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);
@@ -313,7 +315,6 @@ export default class MapboxDirections {
         }
       } else {
         this.actions.setDestinationFromCoordinates(coords);
-        this._map.flyTo({ center: coords });
       }
     }
   }
@@ -383,7 +384,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':
@@ -396,11 +397,10 @@ export default class MapboxDirections {
         break;
       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);
+        if (hoverMarker.geometry && !utils.coordinateMatch(this.isDragging, hoverMarker)) {
+          const click = this.isDragging.geometry.coordinates;
+          const index = utils.getNextWaypoint(this.getRoute.bind(this), waypoints, click);
+          this.actions.addWaypoint(index, hoverMarker);
         }
         break;
     }
@@ -548,6 +548,21 @@ export default class MapboxDirections {
     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.
    *
@@ -577,4 +592,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;
+  }
 }

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 
+};