From 4214e45e21be029e105fa1ff11f8097e1ea4f597 Mon Sep 17 00:00:00 2001 From: Aleksandr Shoronov Date: Thu, 22 Feb 2024 15:20:53 +0200 Subject: [PATCH] [GLJS-647] Added configuration for waypoint instructions (#313) --- API.md | 2 ++ src/controls/instructions.js | 8 ++++++-- src/directions.js | 2 ++ src/reducers/index.js | 4 ++++ src/utils.js | 10 ++++++++-- test/test.instructions.js | 31 +++++++++++++++++++++++++++++++ 6 files changed, 53 insertions(+), 4 deletions(-) diff --git a/API.md b/API.md index b9db3a3..b3036fd 100644 --- a/API.md +++ b/API.md @@ -38,6 +38,8 @@ The Directions control - `options.controls.inputs` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display the inputs control. (optional, default `true`) - `options.controls.instructions` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display the instructions control. (optional, default `true`) - `options.controls.profileSwitcher` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display the default profile switch with options for traffic, driving, walking and cycling. (optional, default `true`) + - `options.instructions` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** + - `options.instructions.showWaypointInstructions` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display instructions for waypoints in the route. (optional, default `true`) - `options.zoom` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** If no bbox exists from the geocoder result, the zoom you set here will be used in the flyTo. (optional, default `16`) - `options.language` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The language of returned turn-by-turn text instructions. See supported languages : (optional, default `"en"`) - `options.placeholderOrigin` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** If set, this text will appear as the placeholder attribute for the origin input element. (optional, default `"Choose a starting place"`) diff --git a/src/controls/instructions.js b/src/controls/instructions.js index 01d412b..64a520a 100644 --- a/src/controls/instructions.js +++ b/src/controls/instructions.js @@ -28,7 +28,7 @@ export default class Instructions { render() { this.store.subscribe(() => { const { hoverMarker, setRouteIndex } = this.actions; - const { routeIndex, unit, directions, error, compile } = this.store.getState(); + const { routeIndex, unit, directions, error, compile, instructions: instructionsOptions } = this.store.getState(); const shouldRender = !isEqual(directions[routeIndex], this.directions); if (error) { @@ -36,9 +36,13 @@ export default class Instructions { return; } + const filterStepsBy = instructionsOptions.showWaypointInstructions + ? undefined + : (step) => step.maneuver.type !== 'waypoint'; + if (directions.length && shouldRender) { const direction = this.directions = directions[routeIndex]; - const allSteps = utils.getAllSteps(direction); + const allSteps = utils.getAllSteps(direction, filterStepsBy); if (compile) { direction.legs.forEach(function(leg) { diff --git a/src/directions.js b/src/directions.js index 6a2b712..9c7b769 100644 --- a/src/directions.js +++ b/src/directions.js @@ -31,6 +31,8 @@ import Instructions from './controls/instructions'; * @param {Boolean} [options.controls.inputs=true] Hide or display the inputs control. * @param {Boolean} [options.controls.instructions=true] Hide or display the instructions control. * @param {Boolean} [options.controls.profileSwitcher=true] Hide or display the default profile switch with options for traffic, driving, walking and cycling. + * @param {Object} [options.instructions] + * @param {Boolean} [options.instructions.showWaypointInstructions=true] Hide or display instructions for waypoints in the route * @param {Number} [options.zoom=16] If no bbox exists from the geocoder result, the zoom you set here will be used in the flyTo. * @param {String} [options.language="en"] The language of returned turn-by-turn text instructions. See supported languages : https://docs.mapbox.com/api/navigation/#instructions-languages * @param {String} [options.placeholderOrigin="Choose a starting place"] If set, this text will appear as the placeholder attribute for the origin input element. diff --git a/src/reducers/index.js b/src/reducers/index.js index f9a3675..44c45cf 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -24,6 +24,10 @@ const getInitialState = () => ({ instructions: true }, + instructions: { + showWaypointInstructions: true + }, + // Optional setting to pass options available to mapbox-gl-geocoder geocoder: {}, diff --git a/src/utils.js b/src/utils.js index 4fb6815..d9ea1d9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -35,14 +35,20 @@ function createPoint(coordinates, properties) { }; } -function getAllSteps(feature) { +function getAllSteps(feature, filterBy) { return feature.legs.reduce((steps, leg, idx) => { if (idx > 0) { steps[steps.length - 1].maneuver.type = 'waypoint'; leg.steps[0].maneuver.type = ''; } - return steps.concat(leg.steps) + const allSteps = steps.concat(leg.steps); + + if (filterBy) { + return allSteps.filter(filterBy); + } else { + return allSteps; + } }, []); } diff --git a/test/test.instructions.js b/test/test.instructions.js index e939537..c514663 100644 --- a/test/test.instructions.js +++ b/test/test.instructions.js @@ -45,6 +45,37 @@ test('Directions#instructionControl', tt => { directions.setDestination([-79.39708375091327, 43.677009321432536]); }); + tt.test('hide waypoint instructions if showWaypointInstructions equals false', t => { + const { directions, container } = setup({ + instructions: { + showWaypointInstructions: false + } + }); + + directions.on('route', once(() => { + directions.on('route', once((e) => { + t.ok(e.route, 'route is emitted'); + t.false( + container.querySelector('.directions-icon-waypoint'), + 'instructions for waypoint not shown' + ); + t.end(); + })); + + directions.addWaypoint(0, { + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [-79.41523694152666, 43.68393045837692] + }, + properties: {} + }); + })); + + directions.setOrigin([-79.4486679946892, 43.66968384056892]) + directions.setDestination([-79.39708375091327, 43.677009321432536]); + }); + tt.test('error', t => { const { directions } = setup(); t.plan(1);