From bfca411b2025f9c7ac531bdcd891d5dc5c0c56fb Mon Sep 17 00:00:00 2001 From: Aleksandr Shoronov Date: Mon, 15 Jan 2024 16:52:19 +0200 Subject: [PATCH] Make a store object per API instance --- package-lock.json | 3 +-- package.json | 3 ++- src/directions.js | 38 +++++++++++++++++++++----------------- src/reducers/index.js | 7 ++++--- test/index.js | 1 - test/test.directions.js | 21 +++++++++++---------- test/test.instructions.js | 27 +++++++++++++-------------- test/utils/setup.js | 2 ++ 8 files changed, 54 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 51bc597..924b111 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5904,8 +5904,7 @@ "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, "lodash.once": { "version": "4.1.1", diff --git a/package.json b/package.json index aae926c..00af582 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "prepublish": "npm run build", "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live", "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js && cp src/mapbox-gl-directions.css dist", - "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status", + "test": "NODE_ENV=test browserify test/index.js | smokestack -b firefox | tap-status", "docs": "documentation build src/directions.js --shallow --format=md > API.md", "lint": "eslint --no-eslintrc -c .eslintrc src" }, @@ -71,6 +71,7 @@ "deep-assign": "^3.0.0", "lodash.debounce": "^4.0.6", "lodash.isequal": "^4.2.0", + "lodash.merge": "^4.6.2", "lodash.template": "^4.2.5", "redux": "^4.2.0", "redux-thunk": "^2.4.2", diff --git a/src/directions.js b/src/directions.js index 824f2c6..6a2b712 100644 --- a/src/directions.js +++ b/src/directions.js @@ -4,9 +4,6 @@ import { decode } from '@mapbox/polyline'; import utils from './utils'; import rootReducer from './reducers'; -const storeWithMiddleware = applyMiddleware(thunk)(createStore); -const store = storeWithMiddleware(rootReducer); - // State object management via redux import * as actions from './actions'; import directionsStyle from './directions_style'; @@ -56,7 +53,9 @@ import Instructions from './controls/instructions'; export default class MapboxDirections { constructor(options) { - this.actions = bindActionCreators(actions, store.dispatch); + this._store = this._initStore(); + + this.actions = bindActionCreators(actions, this._store.dispatch); this.actions.setOptions(options || {}); this.options = options || {}; @@ -70,7 +69,7 @@ export default class MapboxDirections { onAdd(map) { this._map = map; - const { controls } = store.getState(); + const { controls } = this._store.getState(); var el = this.container = document.createElement('div'); el.className = 'mapboxgl-ctrl-directions mapboxgl-ctrl'; @@ -78,12 +77,12 @@ export default class MapboxDirections { // Add controls to the page const inputEl = document.createElement('div'); inputEl.className = 'directions-control directions-control-inputs'; - new Inputs(inputEl, store, this.actions, this._map); + new Inputs(inputEl, this._store, this.actions, this._map); const directionsEl = document.createElement('div'); directionsEl.className = 'directions-control directions-control-instructions'; - new Instructions(directionsEl, store, { + new Instructions(directionsEl, this._store, { hoverMarker: this.actions.hoverMarker, setRouteIndex: this.actions.setRouteIndex }, this._map); @@ -127,7 +126,7 @@ export default class MapboxDirections { } mapState() { - const { profile, alternatives, congestion, styles, interactive, compile } = store.getState(); + const { profile, alternatives, congestion, styles, interactive, compile } = this._store.getState(); // Emit any default or option set config this.actions.eventEmit('profile', { profile }); @@ -162,14 +161,14 @@ export default class MapboxDirections { } subscribedActions() { - this.storeUnsubscribe = store.subscribe(() => { + this.storeUnsubscribe = this._store.subscribe(() => { const { origin, destination, hoverMarker, directions, routeIndex - } = store.getState(); + } = this._store.getState(); const geojson = { type: 'FeatureCollection', @@ -253,6 +252,11 @@ export default class MapboxDirections { }); } + _initStore() { + const storeWithMiddleware = applyMiddleware(thunk)(createStore); + return storeWithMiddleware(rootReducer); + } + _clickHandler() { var timer = null; var delay = 250; @@ -274,7 +278,7 @@ export default class MapboxDirections { } _onSingleClick(e) { - const { origin } = store.getState(); + const { origin } = this._store.getState(); const coords = [e.lngLat.lng, e.lngLat.lat]; if (!origin.geometry) { @@ -311,7 +315,7 @@ export default class MapboxDirections { } _move(e) { - const { hoverMarker } = store.getState(); + const { hoverMarker } = this._store.getState(); const features = this._map.queryRenderedFeatures(e.point, { layers: [ @@ -376,7 +380,7 @@ export default class MapboxDirections { _onDragUp() { if (!this.isDragging) return; - const { hoverMarker, origin, destination } = store.getState(); + const { hoverMarker, origin, destination } = this._store.getState(); switch (this.isDragging.layer.id) { case 'directions-origin-point': @@ -436,7 +440,7 @@ export default class MapboxDirections { * @returns {Object} origin */ getOrigin() { - return store.getState().origin; + return this._store.getState().origin; } /** @@ -460,7 +464,7 @@ export default class MapboxDirections { * @returns {Object} destination */ getDestination() { - return store.getState().destination; + return this._store.getState().destination; } /** @@ -521,7 +525,7 @@ export default class MapboxDirections { * @returns {MapboxDirections} this; */ removeWaypoint(index) { - const { waypoints } = store.getState(); + const { waypoints } = this._store.getState(); this.actions.removeWaypoint(waypoints[index]); return this; } @@ -531,7 +535,7 @@ export default class MapboxDirections { * @returns {Array} waypoints */ getWaypoints() { - return store.getState().waypoints; + return this._store.getState().waypoints; } /** diff --git a/src/reducers/index.js b/src/reducers/index.js index a398004..02c4d5d 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,5 +1,5 @@ import * as types from '../constants/action_types.js'; -import deepAssign from 'deep-assign'; +import merge from 'lodash.merge'; const initialState = { // Options set on initialization @@ -52,8 +52,9 @@ const initialState = { function data(state = initialState, action) { switch (action.type) { - case types.SET_OPTIONS: - return deepAssign({}, state, action.options); + case types.SET_OPTIONS: { + return merge({}, state, action.options); + } case types.DIRECTIONS_PROFILE: return Object.assign({}, state, { diff --git a/test/index.js b/test/index.js index 8b4ac09..5a1b9c0 100644 --- a/test/index.js +++ b/test/index.js @@ -2,7 +2,6 @@ const test = require('tape'); window.mapboxgl = require('mapbox-gl'); -require('../src/index'); mapboxgl.accessToken = process.env.MapboxAccessToken; diff --git a/test/test.directions.js b/test/test.directions.js index 54e70ed..66f9ac9 100644 --- a/test/test.directions.js +++ b/test/test.directions.js @@ -74,7 +74,6 @@ test('Directions with custom styles', t => { }) }); - test('Directions#onRemove', t => { const { map, directions } = setup({ geocoder: { @@ -82,12 +81,14 @@ test('Directions#onRemove', t => { } }); - directions.setOrigin('Queen Street NY'); - directions.setDestination([-77, 41]); - directions.on('route', once(()=>{ - t.true(!!map.getSource('directions'), 'directions source is added'); - map.removeControl(directions); - t.false(!!map.getSource('directions'), 'directions source is removed'); - t.end(); - })); -}); + map.on('load', () => { + directions.on('route', once(()=>{ + t.true(!!map.getSource('directions'), 'directions source is added'); + map.removeControl(directions); + t.false(!!map.getSource('directions'), 'directions source is removed'); + t.end(); + })); + directions.setOrigin('Queen Street NY'); + directions.setDestination([-77, 41]); + }); +}); \ No newline at end of file diff --git a/test/test.instructions.js b/test/test.instructions.js index 7c64ed0..e939537 100644 --- a/test/test.instructions.js +++ b/test/test.instructions.js @@ -19,9 +19,17 @@ test('Directions#instructionControl', tt => { tt.test('direction with waypoints are displayed', t => { const { directions, container } = setup(); - directions.setOrigin([-79.4486679946892, 43.66968384056892]) directions.on('route', once(() => { + directions.on('route', once((e) => { + t.ok(e.route, 'route is emitted'); + t.ok( + container.querySelector('.directions-icon-waypoint'), + 'instructions for waypoint shown' + ); + t.end(); + })); + directions.addWaypoint(0, { type: 'Feature', geometry: { @@ -30,20 +38,11 @@ test('Directions#instructionControl', tt => { }, properties: {} }); - - directions.on('route', once(() => { - directions.setDestination([-79.39708375091327, 43.677009321432536]); - - directions.on('route', once((e) => { - t.ok(e.route, 'route is emitted'); - t.ok( - container.querySelector('.directions-icon-waypoint'), - 'instructions for waypoint shown' - ); - t.end(); - })); - })); })); + + + directions.setOrigin([-79.4486679946892, 43.66968384056892]) + directions.setDestination([-79.39708375091327, 43.677009321432536]); }); tt.test('error', t => { diff --git a/test/utils/setup.js b/test/utils/setup.js index 094261d..7060aca 100644 --- a/test/utils/setup.js +++ b/test/utils/setup.js @@ -1,3 +1,5 @@ +'use strict'; + const MapboxDirections = require('../..'); module.exports = function setup(opts) {