Skip to content

Commit 220ad00

Browse files
author
candux
authored
Merge pull request #37 from geops/olivier/fixmodify
Make currentStopsGeoJSON an array and fix modify end callback
2 parents b73a7c4 + c5571f6 commit 220ad00

File tree

10 files changed

+180
-193
lines changed

10 files changed

+180
-193
lines changed

‎src/Components/FloorSelect/FloorSelect.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { setFloorInfo, showNotification } from '../../store/actions/Map';
1010

1111
const propTypes = {
1212
index: PropTypes.number.isRequired,
13-
singleStop: PropTypes.array, // array of coordinate
13+
singleStop: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), // array for an array of coordinate, string for a station name
1414
};
1515

1616
const defaultProps = {
17-
singleStop: undefined,
17+
singleStop: null,
1818
};
1919

2020
const useStyles = makeStyles(() => ({
@@ -87,7 +87,7 @@ function FloorSelect({ index, singleStop }) {
8787
<Select
8888
renderValue={val => (!val || val === '' ? '0' : val)}
8989
labelId="rd-floor-select-label"
90-
value={floor}
90+
value={floor || '0'}
9191
displayEmpty
9292
onChange={evt => {
9393
const newFloorInfo = [...floorInfo];
@@ -111,4 +111,4 @@ function FloorSelect({ index, singleStop }) {
111111
FloorSelect.propTypes = propTypes;
112112
FloorSelect.defaultProps = defaultProps;
113113

114-
export default FloorSelect;
114+
export default React.memo(FloorSelect);

‎src/Components/MapComponent/MapComponent.jsx‎

Lines changed: 67 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { Component } from 'react';
1+
import React, { PureComponent } from 'react';
22
import { connect } from 'react-redux';
33
import qs from 'query-string';
44
import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
55
import BasicMap from 'react-spatial/components/BasicMap';
66
import { Map, Feature } from 'ol';
77
import { Vector as VectorLayer } from 'ol/layer';
88
import _ from 'lodash/core';
9-
import { Point } from 'ol/geom';
9+
import { MultiLineString, Point } from 'ol/geom';
1010
import GeoJSON from 'ol/format/GeoJSON';
1111
import { Vector as VectorSource } from 'ol/source';
1212
import {
@@ -53,7 +53,7 @@ const zoom = 6;
5353
* The only true map that shows inside the application.
5454
* @category Map
5555
*/
56-
class MapComponent extends Component {
56+
class MapComponent extends PureComponent {
5757
static getExtentCenter = extent => {
5858
const X = extent[0] + (extent[2] - extent[0]) / 2;
5959
const Y = extent[1] + (extent[3] - extent[1]) / 2;
@@ -187,9 +187,9 @@ class MapComponent extends Component {
187187
onSetCurrentStops,
188188
onSetCurrentStopsGeoJSON,
189189
} = this.props;
190-
const newTracks = _.clone(tracks);
191-
const newCurrentStops = _.clone(currentStops);
192-
const newCurentStopsGeoJSON = _.clone(currentStopsGeoJSON);
190+
const newTracks = [...tracks];
191+
const newCurrentStops = [...currentStops];
192+
const newCurentStopsGeoJSON = [...currentStopsGeoJSON];
193193

194194
const { name, id } = evt.features.getArray()[0].getProperties();
195195
let featureIndex;
@@ -204,9 +204,14 @@ class MapComponent extends Component {
204204
coords = to4326(id.slice().reverse());
205205
} else {
206206
el = element;
207-
coords = id.slice().reverse();
207+
coords = id.slice();
208208
}
209-
return el[0] === coords[0] && el[1] === coords[1];
209+
// because of a call of reverse somewhere, coord are not always in the same order
210+
// TO FIX
211+
return (
212+
(el[0] === coords[0] && el[1] === coords[1]) ||
213+
(el[1] === coords[0] && el[0] === coords[1])
214+
);
210215
};
211216
featureIndex = currentStops.findIndex(isCoordPresent);
212217
}
@@ -280,16 +285,38 @@ class MapComponent extends Component {
280285
let newHopIdx = -1;
281286

282287
// Drag
283-
const flatCoords = features
288+
// Create only 1 feature between 2 hops
289+
const featuresBetwenHops = [];
290+
291+
let currHop = null;
292+
let multiLineString = null;
293+
294+
// Geometries are all lineString.
295+
for (let i = 0; i < features.length; i += 1) {
296+
const feature = features[i];
297+
let hop = null;
298+
if (feature.get('src')) {
299+
hop = `${feature.get('src').join()}-${feature.get('trg').join()}`;
300+
}
301+
if (currHop === hop || !hop) {
302+
multiLineString.appendLineString(feature.getGeometry());
303+
} else {
304+
currHop = hop;
305+
multiLineString = new MultiLineString(feature.getGeometry().clone());
306+
featuresBetwenHops.push(new Feature(multiLineString));
307+
}
308+
}
309+
310+
const flatCoords = featuresBetwenHops
284311
.map(f => f.getGeometry())
285-
.map(lineString => {
286-
return [
287-
...lineString.getFirstCoordinate(),
288-
...lineString.getLastCoordinate(),
289-
];
312+
.map(geom => {
313+
return [...geom.getFirstCoordinate(), ...geom.getLastCoordinate()];
290314
});
291315

292-
const closestSegment = this.routeVectorSource
316+
const multiLineSource = new VectorSource({
317+
features: featuresBetwenHops,
318+
});
319+
const closestSegment = multiLineSource
293320
.getClosestFeatureToCoordinate(this.initialRouteDrag.coordinate)
294321
.getGeometry();
295322

@@ -310,41 +337,29 @@ class MapComponent extends Component {
310337
});
311338

312339
if (newHopIdx >= 0) {
340+
newTracks.splice(newHopIdx, 0, '');
313341
updatedCurrentStops.splice(
314342
newHopIdx,
315343
0,
316344
evt.mapBrowserEvent.coordinate,
317345
);
346+
updatedCurrentStopsGeoJSON.splice(newHopIdx, 0, {
347+
type: 'FeatureCollection',
348+
features: [
349+
{
350+
type: 'Feature',
351+
properties: {
352+
id: evt.mapBrowserEvent.coordinate.slice().reverse(),
353+
type: 'coordinates',
354+
},
355+
geometry: {
356+
type: 'Point',
357+
coordinates: evt.mapBrowserEvent.coordinate,
358+
},
359+
},
360+
],
361+
});
318362

319-
newTracks.splice(newHopIdx, 0, '');
320-
321-
if (updatedCurrentStopsGeoJSON[newHopIdx]) {
322-
const keys = Object.keys(updatedCurrentStopsGeoJSON).reverse();
323-
keys.forEach(k => {
324-
if (parseInt(k, 10) >= newHopIdx) {
325-
updatedCurrentStopsGeoJSON[`${parseInt(k, 10) + 1}`] =
326-
updatedCurrentStopsGeoJSON[k];
327-
}
328-
if (parseInt(k, 10) === newHopIdx) {
329-
updatedCurrentStopsGeoJSON[newHopIdx] = {
330-
type: 'FeatureCollection',
331-
features: [
332-
{
333-
type: 'Feature',
334-
properties: {
335-
id: evt.mapBrowserEvent.coordinate.slice().reverse(),
336-
type: 'coordinates',
337-
},
338-
geometry: {
339-
type: 'Point',
340-
coordinates: evt.mapBrowserEvent.coordinate,
341-
},
342-
},
343-
],
344-
};
345-
}
346-
});
347-
}
348363
onSetTracks(newTracks);
349364
onSetCurrentStops(updatedCurrentStops);
350365
onSetCurrentStopsGeoJSON(updatedCurrentStopsGeoJSON);
@@ -429,13 +444,13 @@ class MapComponent extends Component {
429444
activeFloorChanged
430445
) {
431446
this.markerVectorSource.clear();
432-
Object.keys(currentStopsGeoJSON).forEach(key => {
447+
currentStopsGeoJSON.forEach((val, key) => {
433448
this.markerVectorSource.addFeatures(
434449
new GeoJSON().readFeatures(currentStopsGeoJSON[key]),
435450
);
436451
if (currentMot === 'foot') {
437-
this.markerVectorSource.getFeatures().forEach((f, idx) => {
438-
f.setStyle(
452+
this.markerVectorSource.getFeatures().forEach((feature, idx) => {
453+
feature.setStyle(
439454
pointStyleFunction(currentMot, floorInfo[idx], activeFloor),
440455
);
441456
});
@@ -450,7 +465,7 @@ class MapComponent extends Component {
450465
this.setIsActiveRoute(false);
451466

452467
// Draw a new route if more than 1 stop is defined
453-
if (Object.keys(currentStopsGeoJSON).length > 1) {
468+
if (currentStopsGeoJSON.length > 1) {
454469
this.drawNewRoute();
455470
}
456471

@@ -528,11 +543,11 @@ class MapComponent extends Component {
528543
onSetShowLoadingBar(true);
529544

530545
// find the index and use this instead.
531-
Object.keys(currentStopsGeoJSON).forEach((key, idx) => {
532-
if (currentStopsGeoJSON[key].features) {
546+
currentStopsGeoJSON.forEach((val, idx) => {
547+
if (currentStopsGeoJSON[idx].features) {
533548
// If the current item is a point selected on the map, not a station.
534549
hops.push(
535-
`${to4326(currentStopsGeoJSON[key].features[0].geometry.coordinates)
550+
`${to4326(currentStopsGeoJSON[idx].features[0].geometry.coordinates)
536551
.slice()
537552
.reverse()}${
538553
floorInfo && floorInfo[idx] !== null
@@ -542,7 +557,7 @@ class MapComponent extends Component {
542557
);
543558
} else {
544559
hops.push(
545-
`!${currentStopsGeoJSON[key].properties.uid}${
560+
`!${currentStopsGeoJSON[idx].properties.uid}${
546561
tracks[idx] !== null
547562
? `${tracks[idx] ? `$${tracks[idx]}` : ''}`
548563
: ''

‎src/Components/Permalink/Permalink.jsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -94,18 +94,18 @@ const getGeoJson = (viaString, APIKey, stationSearchUrl) => {
9494
});
9595
};
9696

97-
const compileViaString = (currentStopsGeoJson, tracks) => {
98-
if (!currentStopsGeoJson || Object.keys(currentStopsGeoJson).length < 2) {
97+
const compileViaString = (currentStopsGeoJson = [], tracks) => {
98+
if (!currentStopsGeoJson || currentStopsGeoJson.length < 2) {
9999
return null;
100100
}
101101

102-
const uidStrings = Object.keys(currentStopsGeoJson).map((key, idx) => {
103-
if (currentStopsGeoJson[key].features) {
102+
const uidStrings = currentStopsGeoJson.map((val, idx) => {
103+
if (currentStopsGeoJson[idx].features) {
104104
return `${to4326(
105-
currentStopsGeoJson[key].features[0].geometry.coordinates,
105+
currentStopsGeoJson[idx].features[0].geometry.coordinates,
106106
)}`;
107107
}
108-
return `!${currentStopsGeoJson[key].properties.uid}${
108+
return `!${currentStopsGeoJson[idx].properties.uid}${
109109
tracks[idx] ? `$${tracks[idx]}` : ''
110110
}`;
111111
});
@@ -187,12 +187,8 @@ function Permalink({ mots, APIKey, stationSearchUrl }) {
187187
}),
188188
),
189189
);
190-
const geoJsonObject = {};
191-
values
192-
.filter(stop => !!stop)
193-
// eslint-disable-next-line no-return-assign
194-
.forEach((stop, idx) => (geoJsonObject[`${idx}`] = stop));
195-
dispatch(setCurrentStopsGeoJSON(geoJsonObject));
190+
const newCurrentStopsGeoJSON = [...values.filter(stop => !!stop)];
191+
dispatch(setCurrentStopsGeoJSON(newCurrentStopsGeoJSON));
196192
});
197193
}
198194

@@ -221,7 +217,7 @@ function Permalink({ mots, APIKey, stationSearchUrl }) {
221217

222218
newParams.mot = currentMot;
223219
newParams['resolve-hops'] = resolveHops;
224-
if (Object.keys(currentStopsGeoJSON).length !== 0) {
220+
if (currentStopsGeoJSON.length !== 0) {
225221
newParams.via = compileViaString(currentStopsGeoJSON, tracks);
226222
}
227223
setParams(newParams);

‎src/Components/Permalink/Permalink.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('Permalink', () => {
2626
resolveHops: false,
2727
currentStops: ['', ''],
2828
floorInfo: [null, null],
29-
currentStopsGeoJSON: {},
29+
currentStopsGeoJSON: [],
3030
olMap: new Map({
3131
controls: [],
3232
}),

0 commit comments

Comments
 (0)