react-spatial 1.11.5-beta.0 → 1.11.5-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js +16 -18
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +2 -2
- package/components/BasicMap/BasicMap.js +20 -8
- package/components/BasicMap/BasicMap.js.map +2 -2
- package/components/Copyright/Copyright.js +26 -15
- package/components/Copyright/Copyright.js.map +2 -2
- package/components/FeatureExportButton/FeatureExportButton.js +3 -3
- package/components/FeatureExportButton/FeatureExportButton.js.map +2 -2
- package/components/LayerTree/LayerTree.js +25 -91
- package/components/LayerTree/LayerTree.js.map +2 -2
- package/components/Permalink/Permalink.js +14 -19
- package/components/Permalink/Permalink.js.map +2 -2
- package/components/StopsFinder/StopsFinder.js +29 -19
- package/components/StopsFinder/StopsFinder.js.map +2 -2
- package/images/baselayer/osm.baselayer.hot.png +0 -0
- package/images/baselayer/osm.baselayer.png +0 -0
- package/package.json +12 -11
- package/utils/KML.js +24 -5
- package/utils/KML.js.map +2 -2
- package/utils/getLayersAsFlatArray.js +0 -14
- package/utils/getLayersAsFlatArray.js.map +0 -7
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { Component } from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
|
+
import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol";
|
|
3
4
|
import { unByKey } from "ol/Observable";
|
|
4
|
-
import Layer from "ol/layer/Layer";
|
|
5
|
-
import getLayersAsFlatArray from "../../utils/getLayersAsFlatArray";
|
|
6
5
|
const propTypes = {
|
|
7
6
|
/**
|
|
8
7
|
* Layers provider.
|
|
@@ -126,7 +125,7 @@ const defaultProps = {
|
|
|
126
125
|
renderCheckbox: null,
|
|
127
126
|
renderLabel: (layer, layerComp) => {
|
|
128
127
|
const { t } = layerComp.props;
|
|
129
|
-
return t(layer.
|
|
128
|
+
return t(layer.name);
|
|
130
129
|
},
|
|
131
130
|
titles: {
|
|
132
131
|
layerShow: "Show layer",
|
|
@@ -140,46 +139,20 @@ const defaultProps = {
|
|
|
140
139
|
expandChildren: false
|
|
141
140
|
};
|
|
142
141
|
class LayerTree extends Component {
|
|
143
|
-
static getChildren = (layer) => layer?.get("children") || layer?.children || // ol.layer.group
|
|
144
|
-
layer?.getLayers?.().getArray() || [];
|
|
145
|
-
static getVisible = (layer) => layer.getVisible ? layer.getVisible() : layer.visible;
|
|
146
|
-
static setVisible = (layer, visible) => {
|
|
147
|
-
if (layer.setVisible) {
|
|
148
|
-
layer.setVisible(visible);
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
layer.visible = visible;
|
|
152
|
-
};
|
|
153
|
-
static listenGroups = (layers) => {
|
|
154
|
-
const flat = getLayersAsFlatArray(layers);
|
|
155
|
-
const keys = flat.map((layer) => {
|
|
156
|
-
return layer.on("change:visible", (e) => {
|
|
157
|
-
const { target } = e;
|
|
158
|
-
if (target.getVisible() && target.get("group")) {
|
|
159
|
-
flat.forEach((l) => {
|
|
160
|
-
if (l.get("group") === target.get("group") && l !== target) {
|
|
161
|
-
l.setVisible(false);
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
return keys;
|
|
168
|
-
};
|
|
169
142
|
constructor(props) {
|
|
170
143
|
super(props);
|
|
171
144
|
const { layers, isItemHidden } = this.props;
|
|
172
145
|
const initialExpandedLayers = layers ? this.getExpandedLayers(
|
|
173
146
|
layers.filter((l) => {
|
|
174
|
-
return !isItemHidden(l) &&
|
|
175
|
-
return
|
|
147
|
+
return !isItemHidden(l) && (l.children || []).filter((child) => {
|
|
148
|
+
return child.visible;
|
|
176
149
|
}).filter((c) => {
|
|
177
150
|
return !isItemHidden(c);
|
|
178
151
|
}).length;
|
|
179
152
|
})
|
|
180
153
|
) : [];
|
|
181
154
|
this.state = {
|
|
182
|
-
rootLayer: new Layer(
|
|
155
|
+
rootLayer: new Layer(),
|
|
183
156
|
expandedLayers: initialExpandedLayers,
|
|
184
157
|
revision: 0
|
|
185
158
|
};
|
|
@@ -201,8 +174,10 @@ class LayerTree extends Component {
|
|
|
201
174
|
onInputClick(layer, toggle = false) {
|
|
202
175
|
if (toggle) {
|
|
203
176
|
this.onToggle(layer);
|
|
177
|
+
} else if (layer.setVisible) {
|
|
178
|
+
layer.setVisible(!layer.visible);
|
|
204
179
|
} else {
|
|
205
|
-
|
|
180
|
+
layer.visible = !layer.visible;
|
|
206
181
|
}
|
|
207
182
|
}
|
|
208
183
|
onToggle(layer) {
|
|
@@ -225,7 +200,7 @@ class LayerTree extends Component {
|
|
|
225
200
|
getExpandedLayers(layers) {
|
|
226
201
|
const { isItemHidden } = this.props;
|
|
227
202
|
const children = layers.flatMap((l) => {
|
|
228
|
-
return
|
|
203
|
+
return l.children.filter((c) => {
|
|
229
204
|
return !isItemHidden(c) && c.get("isAlwaysExpanded");
|
|
230
205
|
});
|
|
231
206
|
});
|
|
@@ -236,7 +211,7 @@ class LayerTree extends Component {
|
|
|
236
211
|
}
|
|
237
212
|
updateLayers() {
|
|
238
213
|
const { layers, expandChildren } = this.props;
|
|
239
|
-
let rootLayer = new Layer(
|
|
214
|
+
let rootLayer = new Layer();
|
|
240
215
|
if (Array.isArray(layers)) {
|
|
241
216
|
if (layers.length === 1) {
|
|
242
217
|
[rootLayer] = layers;
|
|
@@ -245,59 +220,17 @@ class LayerTree extends Component {
|
|
|
245
220
|
} else {
|
|
246
221
|
rootLayer = layers;
|
|
247
222
|
}
|
|
248
|
-
|
|
249
|
-
flat.forEach((layer) => {
|
|
223
|
+
getLayersAsFlatArray(rootLayer).forEach((layer) => {
|
|
250
224
|
this.olKeys.push(
|
|
251
225
|
layer.on("propertychange", () => {
|
|
252
226
|
const { revision } = this.state;
|
|
253
227
|
this.setState({ revision: revision + 1 });
|
|
254
|
-
}),
|
|
255
|
-
// Manage group visibility
|
|
256
|
-
layer.on("change:visible", (evt) => {
|
|
257
|
-
const { target } = evt;
|
|
258
|
-
if (target.getVisible() && target.get("group")) {
|
|
259
|
-
flat.forEach((l) => {
|
|
260
|
-
if (l.get("group") === target.get("group") && l !== target) {
|
|
261
|
-
l.setVisible(false);
|
|
262
|
-
}
|
|
263
|
-
});
|
|
264
|
-
}
|
|
265
|
-
}),
|
|
266
|
-
// Manage parent/children visibility
|
|
267
|
-
layer.on("change:visible", (evt) => {
|
|
268
|
-
const { target } = evt;
|
|
269
|
-
const parent = target.get("parent");
|
|
270
|
-
const children = LayerTree.getChildren(target);
|
|
271
|
-
if (target.getVisible()) {
|
|
272
|
-
if (parent) {
|
|
273
|
-
parent.setVisible(true);
|
|
274
|
-
}
|
|
275
|
-
if (children && !children.some((child) => child.getVisible())) {
|
|
276
|
-
children.forEach((child) => {
|
|
277
|
-
child.setVisible(true);
|
|
278
|
-
});
|
|
279
|
-
}
|
|
280
|
-
} else {
|
|
281
|
-
children.forEach((child) => {
|
|
282
|
-
child.setVisible(false);
|
|
283
|
-
});
|
|
284
|
-
if (parent?.getVisible() && !parent?.get("children").find((child) => child.getVisible())) {
|
|
285
|
-
parent.setVisible(false);
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
228
|
})
|
|
289
229
|
);
|
|
290
230
|
});
|
|
291
|
-
flat.forEach((layer) => {
|
|
292
|
-
const children = LayerTree.getChildren(layer);
|
|
293
|
-
children.forEach((child) => {
|
|
294
|
-
child.set("parent", layer);
|
|
295
|
-
});
|
|
296
|
-
});
|
|
297
231
|
const state = { rootLayer };
|
|
298
232
|
if (typeof expandChildren === "function" ? expandChildren(layers) : expandChildren) {
|
|
299
|
-
|
|
300
|
-
state.expandedLayers = children.flatMap((l) => {
|
|
233
|
+
state.expandedLayers = rootLayer.children.flatMap((l) => {
|
|
301
234
|
return this.expandLayer(l);
|
|
302
235
|
});
|
|
303
236
|
}
|
|
@@ -305,8 +238,8 @@ class LayerTree extends Component {
|
|
|
305
238
|
}
|
|
306
239
|
expandLayer(layer, expLayers = []) {
|
|
307
240
|
const { isItemHidden } = this.props;
|
|
308
|
-
if (
|
|
309
|
-
const children =
|
|
241
|
+
if (layer.visible && !isItemHidden(layer)) {
|
|
242
|
+
const children = layer.children.filter((c) => {
|
|
310
243
|
return !isItemHidden(c) && !c.get("isAlwaysExpanded");
|
|
311
244
|
}).flatMap((c) => {
|
|
312
245
|
return this.expandLayer(c, expLayers);
|
|
@@ -318,7 +251,7 @@ class LayerTree extends Component {
|
|
|
318
251
|
renderInput(layer, inputProps) {
|
|
319
252
|
const { titles, isItemHidden, renderCheckbox } = this.props;
|
|
320
253
|
let tabIndex = 0;
|
|
321
|
-
if (!
|
|
254
|
+
if (!(layer.children || []).filter((c) => {
|
|
322
255
|
return !isItemHidden(c);
|
|
323
256
|
}).length) {
|
|
324
257
|
tabIndex = -1;
|
|
@@ -331,7 +264,8 @@ class LayerTree extends Component {
|
|
|
331
264
|
{
|
|
332
265
|
className: `rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`,
|
|
333
266
|
tabIndex,
|
|
334
|
-
title:
|
|
267
|
+
title: layer.visible ? titles.layerHide : titles.layerShow,
|
|
268
|
+
"aria-label": layer.visible ? titles.layerHide : titles.layerShow,
|
|
335
269
|
onKeyPress: (e) => {
|
|
336
270
|
if (e.which === 13) {
|
|
337
271
|
this.onInputClick(layer);
|
|
@@ -343,7 +277,7 @@ class LayerTree extends Component {
|
|
|
343
277
|
{
|
|
344
278
|
type: inputType,
|
|
345
279
|
tabIndex: -1,
|
|
346
|
-
checked:
|
|
280
|
+
checked: layer.visible,
|
|
347
281
|
readOnly: true,
|
|
348
282
|
onClick: () => {
|
|
349
283
|
return this.onInputClick(layer);
|
|
@@ -358,7 +292,7 @@ class LayerTree extends Component {
|
|
|
358
292
|
renderArrow(layer) {
|
|
359
293
|
const { isItemHidden } = this.props;
|
|
360
294
|
const { expandedLayers } = this.state;
|
|
361
|
-
if (!
|
|
295
|
+
if (!(layer.children || []).filter((c) => {
|
|
362
296
|
return !isItemHidden(c);
|
|
363
297
|
}).length || layer.get("isAlwaysExpanded")) {
|
|
364
298
|
return null;
|
|
@@ -378,12 +312,12 @@ class LayerTree extends Component {
|
|
|
378
312
|
const onInputClick = () => {
|
|
379
313
|
this.onInputClick(
|
|
380
314
|
layer,
|
|
381
|
-
|
|
315
|
+
(layer.children || []).filter((c) => {
|
|
382
316
|
return !isItemHidden(c);
|
|
383
317
|
}).length && !layer.get("isAlwaysExpanded")
|
|
384
318
|
);
|
|
385
319
|
};
|
|
386
|
-
const title = `${t(layer.
|
|
320
|
+
const title = `${t(layer.name)} ${expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow}`;
|
|
387
321
|
return /* @__PURE__ */ React.createElement(
|
|
388
322
|
"div",
|
|
389
323
|
{
|
|
@@ -416,7 +350,7 @@ class LayerTree extends Component {
|
|
|
416
350
|
getParentClassName
|
|
417
351
|
} = this.props;
|
|
418
352
|
const children = expandedLayers.includes(layer) ? [
|
|
419
|
-
...
|
|
353
|
+
...(layer.children || []).filter((c) => {
|
|
420
354
|
return !isItemHidden(c);
|
|
421
355
|
})
|
|
422
356
|
] : [];
|
|
@@ -426,7 +360,7 @@ class LayerTree extends Component {
|
|
|
426
360
|
return /* @__PURE__ */ React.createElement("div", { className: getParentClassName(), key: layer.key }, /* @__PURE__ */ React.createElement(
|
|
427
361
|
"div",
|
|
428
362
|
{
|
|
429
|
-
className: `rs-layer-tree-item ${
|
|
363
|
+
className: `rs-layer-tree-item ${layer.visible ? "rs-visible" : ""}`,
|
|
430
364
|
style: {
|
|
431
365
|
paddingLeft: `${padding * level}px`
|
|
432
366
|
}
|
|
@@ -439,10 +373,10 @@ class LayerTree extends Component {
|
|
|
439
373
|
renderTree() {
|
|
440
374
|
const { isItemHidden } = this.props;
|
|
441
375
|
const { rootLayer } = this.state;
|
|
442
|
-
if (!
|
|
376
|
+
if (!rootLayer?.children?.length) {
|
|
443
377
|
return null;
|
|
444
378
|
}
|
|
445
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null,
|
|
379
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, rootLayer.children.filter((l) => {
|
|
446
380
|
return !isItemHidden(l);
|
|
447
381
|
}).reverse().map((l) => {
|
|
448
382
|
return this.renderItem(l, 0);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/LayerTree/LayerTree.js"],
|
|
4
|
-
"sourcesContent": ["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { unByKey } from \"ol/Observable\";\nimport Layer from \"ol/layer/Layer\";\nimport getLayersAsFlatArray from \"../../utils/getLayersAsFlatArray\";\n\nconst propTypes = {\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Padding left to apply on each level.\n */\n padding: PropTypes.number,\n\n /**\n * Determine if the item is hidden in the tree or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the tree\n */\n isItemHidden: PropTypes.func,\n\n /**\n * Determine the className used by the div containing the parent and its children.\n */\n getParentClassName: PropTypes.func,\n\n /**\n * Custom function to render an item in the tree.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderItem: PropTypes.func,\n\n /**\n * Custom function to render only the content of an item in the tree.\n * inputProps und toggleProps can be used when calling the default renderItemContent function\n * (comp.renderItemContent(layer, inputProps, toggleProps)) to overwrite the default input and label props\n *\n * @param {Layer} layer The layer the item content is created for\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderItemContent: PropTypes.func,\n\n /**\n * Custom function to render custom content before the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderBeforeItem: PropTypes.func,\n\n /**\n * Custom function to render custom content after the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderAfterItem: PropTypes.func,\n\n /**\n * Custom function to render the label.\n *\n * @param {string} item The label to render.\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderLabel: PropTypes.func,\n\n /**\n * Custom function to render the checkbox.\n */\n renderCheckbox: PropTypes.func,\n\n /**\n * Object holding title for the layer tree's buttons.\n */\n titles: PropTypes.shape({\n /**\n * aria-label on checkbox to show layer.\n */\n layerShow: PropTypes.string,\n /**\n * aria-label on checkbox to hide layer.\n */\n layerHide: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerShow: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerHide: PropTypes.string,\n }),\n\n /**\n * Boolean determining whether children collapse/expand when their parent is toggled\n * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.\n * @return {boolean} True or false\n */\n expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n};\n\nconst defaultProps = {\n layers: [],\n className: \"rs-layer-tree\",\n padding: 30,\n isItemHidden: () => {\n return false;\n },\n getParentClassName: () => {\n return undefined;\n },\n renderItem: null,\n renderItemContent: null,\n renderBeforeItem: null,\n renderAfterItem: null,\n renderCheckbox: null,\n renderLabel: (layer, layerComp) => {\n const { t } = layerComp.props;\n return t(layer.get(\"name\"));\n },\n titles: {\n layerShow: \"Show layer\",\n layerHide: \"Hide layer\",\n subLayerShow: \"Show sublayer\",\n subLayerHide: \"Hide sublayer\",\n },\n t: (s) => {\n return s;\n },\n expandChildren: false,\n};\n\n/**\n * The LayerTree component renders an interface for toggling layers visibility.\n * and their corresponding child layers.\n */\n\nclass LayerTree extends Component {\n static getChildren = (layer) =>\n layer?.get(\"children\") ||\n layer?.children ||\n // ol.layer.group\n layer?.getLayers?.().getArray() ||\n [];\n\n static getVisible = (layer) =>\n layer.getVisible ? layer.getVisible() : layer.visible;\n\n static setVisible = (layer, visible) => {\n if (layer.setVisible) {\n layer.setVisible(visible);\n return;\n }\n // eslint-disable-next-line no-param-reassign\n layer.visible = visible;\n };\n\n static listenGroups = (layers) => {\n const flat = getLayersAsFlatArray(layers);\n const keys = flat.map((layer) => {\n return layer.on(\"change:visible\", (e) => {\n const { target } = e;\n if (target.getVisible() && target.get(\"group\")) {\n flat.forEach((l) => {\n if (l.get(\"group\") === target.get(\"group\") && l !== target) {\n l.setVisible(false);\n }\n });\n }\n });\n });\n return keys;\n };\n\n constructor(props) {\n super(props);\n\n const { layers, isItemHidden } = this.props;\n const initialExpandedLayers = layers\n ? this.getExpandedLayers(\n layers.filter((l) => {\n return (\n !isItemHidden(l) &&\n LayerTree.getChildren(l)\n .filter((child) => {\n return LayerTree.getVisible(child);\n })\n .filter((c) => {\n return !isItemHidden(c);\n }).length\n );\n }),\n )\n : [];\n\n this.state = {\n rootLayer: new Layer({}),\n expandedLayers: initialExpandedLayers,\n revision: 0,\n };\n // this.updateLayers = this.updateLayers.bind(this);\n this.olKeys = [];\n }\n\n componentDidMount() {\n this.updateLayers();\n }\n\n componentDidUpdate(prevProps) {\n const { layers } = this.props;\n\n if (layers !== prevProps.layers) {\n this.updateLayers();\n }\n }\n\n componentWillUnmount() {\n unByKey(this.olKeys);\n this.olKeys = [];\n }\n\n onInputClick(layer, toggle = false) {\n if (toggle) {\n this.onToggle(layer);\n } else {\n LayerTree.setVisible(layer, !LayerTree.getVisible(layer));\n }\n }\n\n onToggle(layer) {\n const { expandedLayers } = this.state;\n const pos = expandedLayers.indexOf(layer);\n if (pos > -1) {\n expandedLayers.splice(pos, 1);\n } else {\n expandedLayers.push(...this.getExpandedLayers([layer]));\n }\n this.setState({ expandedLayers });\n }\n\n /**\n * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers\n * together with the (given) initially expanded layers\n *\n * @param {Layer} layers Initially expanded layers\n * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors\n */\n getExpandedLayers(layers) {\n const { isItemHidden } = this.props;\n const children = layers.flatMap((l) => {\n return LayerTree.getChildren(l).filter((c) => {\n return !isItemHidden(c) && c.get(\"isAlwaysExpanded\");\n });\n });\n\n if (!children.length) {\n return layers;\n }\n return [...layers, this.getExpandedLayers(children)].flat();\n }\n\n updateLayers() {\n const { layers, expandChildren } = this.props;\n\n // Update the root layer\n let rootLayer = new Layer({});\n if (Array.isArray(layers)) {\n if (layers.length === 1) {\n [rootLayer] = layers;\n }\n rootLayer = new Layer({ children: layers });\n } else {\n rootLayer = layers;\n }\n\n const flat = getLayersAsFlatArray(rootLayer);\n flat.forEach((layer) => {\n this.olKeys.push(\n layer.on(\"propertychange\", () => {\n const { revision } = this.state;\n this.setState({ revision: revision + 1 });\n }),\n\n // Manage group visibility\n layer.on(\"change:visible\", (evt) => {\n const { target } = evt;\n if (target.getVisible() && target.get(\"group\")) {\n flat.forEach((l) => {\n if (l.get(\"group\") === target.get(\"group\") && l !== target) {\n l.setVisible(false);\n }\n });\n }\n }),\n\n // Manage parent/children visibility\n layer.on(\"change:visible\", (evt) => {\n const { target } = evt;\n const parent = target.get(\"parent\");\n const children = LayerTree.getChildren(target);\n\n if (target.getVisible()) {\n // We make the parent visible\n if (parent) {\n parent.setVisible(true);\n }\n\n // If children doesn't contain any visible layers, we display all children.\n if (children && !children.some((child) => child.getVisible())) {\n children.forEach((child) => {\n child.setVisible(true);\n });\n }\n } else {\n // We hide all the children\n children.forEach((child) => {\n child.setVisible(false);\n });\n\n // If the parent has no more visible child we also hide it.\n if (\n parent?.getVisible() &&\n !parent?.get(\"children\").find((child) => child.getVisible())\n ) {\n parent.setVisible(false);\n }\n }\n }),\n );\n });\n\n // Set parent property.\n flat.forEach((layer) => {\n const children = LayerTree.getChildren(layer);\n children.forEach((child) => {\n child.set(\"parent\", layer);\n });\n });\n\n const state = { rootLayer };\n if (\n typeof expandChildren === \"function\"\n ? expandChildren(layers)\n : expandChildren\n ) {\n const children = LayerTree.getChildren(rootLayer);\n state.expandedLayers = children.flatMap((l) => {\n return this.expandLayer(l);\n });\n }\n\n this.setState(state);\n }\n\n expandLayer(layer, expLayers = []) {\n const { isItemHidden } = this.props;\n if (LayerTree.getVisible(layer) && !isItemHidden(layer)) {\n const children = LayerTree.getChildren(layer)\n .filter((c) => {\n return !isItemHidden(c) && !c.get(\"isAlwaysExpanded\");\n })\n .flatMap((c) => {\n return this.expandLayer(c, expLayers);\n });\n return [...expLayers, ...children, layer];\n }\n return expLayers;\n }\n\n renderInput(layer, inputProps) {\n const { titles, isItemHidden, renderCheckbox } = this.props;\n let tabIndex = 0;\n\n if (\n !LayerTree.getChildren(layer).filter((c) => {\n return !isItemHidden(c);\n }).length\n ) {\n // We forbid focus on keypress event for first level layers and layers without children.\n tabIndex = -1;\n }\n\n const inputType = layer.get(\"group\") ? \"radio\" : \"checkbox\";\n return renderCheckbox ? (\n renderCheckbox(layer, this, inputProps)\n ) : (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions\n <label\n className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}\n tabIndex={tabIndex}\n title={\n LayerTree.getVisible(layer) ? titles.layerHide : titles.layerShow\n }\n onKeyPress={(e) => {\n if (e.which === 13) {\n this.onInputClick(layer);\n }\n }}\n >\n <input\n type={inputType}\n tabIndex={-1}\n checked={LayerTree.getVisible(layer)}\n readOnly\n onClick={() => {\n return this.onInputClick(layer);\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...inputProps}\n />\n <span />\n </label>\n );\n }\n\n renderArrow(layer) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n\n if (\n !LayerTree.getChildren(layer).filter((c) => {\n return !isItemHidden(c);\n }).length ||\n layer.get(\"isAlwaysExpanded\")\n ) {\n return null;\n }\n\n return (\n <div\n className={`rs-layer-tree-arrow rs-layer-tree-arrow-${\n !expandedLayers.includes(layer) ? \"collapsed\" : \"expanded\"\n }`}\n />\n );\n }\n\n // Render a button which expands/collapse the layer if there is children\n // or simulate a click on the input otherwise.\n renderToggleButton(layer, toggleProps) {\n const { t, titles, isItemHidden, renderLabel } = this.props;\n const { expandedLayers } = this.state;\n\n const onInputClick = () => {\n this.onInputClick(\n layer,\n LayerTree.getChildren(layer).filter((c) => {\n return !isItemHidden(c);\n }).length && !layer.get(\"isAlwaysExpanded\"),\n );\n };\n const title = `${t(layer.get(\"name\"))} ${\n expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow\n }`;\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"rs-layer-tree-toggle\"\n title={title}\n aria-expanded={expandedLayers.includes(layer)}\n aria-label={title}\n onClick={onInputClick}\n onKeyPress={onInputClick}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...toggleProps}\n >\n <div>{renderLabel(layer, this)}</div>\n {this.renderArrow(layer)}\n </div>\n );\n }\n\n renderItemContent(layer, inputProps = {}, toggleProps = {}) {\n return (\n <>\n {this.renderInput(layer, inputProps)}\n {this.renderToggleButton(layer, toggleProps)}\n </>\n );\n }\n\n renderItem(layer, level) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n const {\n renderItem,\n renderItemContent,\n renderBeforeItem,\n renderAfterItem,\n padding,\n getParentClassName,\n } = this.props;\n\n const children = expandedLayers.includes(layer)\n ? [\n ...LayerTree.getChildren(layer).filter((c) => {\n return !isItemHidden(c);\n }),\n ]\n : [];\n\n if (renderItem) {\n return renderItem(layer, this.onInputClick, this.onToggle);\n }\n\n return (\n <div className={getParentClassName()} key={layer.key}>\n <div\n className={`rs-layer-tree-item ${LayerTree.getVisible(layer) ? \"rs-visible\" : \"\"}`}\n style={{\n paddingLeft: `${padding * level}px`,\n }}\n >\n {renderItemContent\n ? renderItemContent(layer, this)\n : this.renderItemContent(layer)}\n </div>\n {renderBeforeItem && renderBeforeItem(layer, level, this)}\n {[...children].reverse().map((child) => {\n return this.renderItem(child, level + 1);\n })}\n {renderAfterItem && renderAfterItem(layer, level, this)}\n </div>\n );\n }\n\n renderTree() {\n const { isItemHidden } = this.props;\n const { rootLayer } = this.state;\n\n if (!LayerTree.getChildren(rootLayer).length) {\n return null;\n }\n\n return (\n <>\n {LayerTree.getChildren(rootLayer)\n .filter((l) => {\n return !isItemHidden(l);\n })\n .reverse()\n .map((l) => {\n return this.renderItem(l, 0);\n })}\n </>\n );\n }\n\n render() {\n const { className } = this.props;\n return <div className={className}>{this.renderTree()}</div>;\n }\n}\n\nLayerTree.propTypes = propTypes;\nLayerTree.defaultProps = defaultProps;\n\nexport default LayerTree;\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,SAAS,iBAAiB;AACjC,OAAO,eAAe;AACtB,SAAS,
|
|
4
|
+
"sourcesContent": ["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Layer, getLayersAsFlatArray } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Padding left to apply on each level.\n */\n padding: PropTypes.number,\n\n /**\n * Determine if the item is hidden in the tree or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the tree\n */\n isItemHidden: PropTypes.func,\n\n /**\n * Determine the className used by the div containing the parent and its children.\n */\n getParentClassName: PropTypes.func,\n\n /**\n * Custom function to render an item in the tree.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderItem: PropTypes.func,\n\n /**\n * Custom function to render only the content of an item in the tree.\n * inputProps und toggleProps can be used when calling the default renderItemContent function\n * (comp.renderItemContent(layer, inputProps, toggleProps)) to overwrite the default input and label props\n *\n * @param {Layer} layer The layer the item content is created for\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderItemContent: PropTypes.func,\n\n /**\n * Custom function to render custom content before the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderBeforeItem: PropTypes.func,\n\n /**\n * Custom function to render custom content after the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderAfterItem: PropTypes.func,\n\n /**\n * Custom function to render the label.\n *\n * @param {string} item The label to render.\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderLabel: PropTypes.func,\n\n /**\n * Custom function to render the checkbox.\n */\n renderCheckbox: PropTypes.func,\n\n /**\n * Object holding title for the layer tree's buttons.\n */\n titles: PropTypes.shape({\n /**\n * aria-label on checkbox to show layer.\n */\n layerShow: PropTypes.string,\n /**\n * aria-label on checkbox to hide layer.\n */\n layerHide: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerShow: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerHide: PropTypes.string,\n }),\n\n /**\n * Boolean determining whether children collapse/expand when their parent is toggled\n * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.\n * @return {boolean} True or false\n */\n expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n};\n\nconst defaultProps = {\n layers: [],\n className: \"rs-layer-tree\",\n padding: 30,\n isItemHidden: () => {\n return false;\n },\n getParentClassName: () => {\n return undefined;\n },\n renderItem: null,\n renderItemContent: null,\n renderBeforeItem: null,\n renderAfterItem: null,\n renderCheckbox: null,\n renderLabel: (layer, layerComp) => {\n const { t } = layerComp.props;\n return t(layer.name);\n },\n titles: {\n layerShow: \"Show layer\",\n layerHide: \"Hide layer\",\n subLayerShow: \"Show sublayer\",\n subLayerHide: \"Hide sublayer\",\n },\n t: (s) => {\n return s;\n },\n expandChildren: false,\n};\n\n/**\n * The LayerTree component renders an interface for toggling\n * [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * and their corresponding child layers.\n */\n\nclass LayerTree extends Component {\n constructor(props) {\n super(props);\n\n const { layers, isItemHidden } = this.props;\n const initialExpandedLayers = layers\n ? this.getExpandedLayers(\n layers.filter((l) => {\n return (\n !isItemHidden(l) &&\n (l.children || [])\n .filter((child) => {\n return child.visible;\n })\n .filter((c) => {\n return !isItemHidden(c);\n }).length\n );\n }),\n )\n : [];\n\n this.state = {\n rootLayer: new Layer(),\n expandedLayers: initialExpandedLayers,\n revision: 0,\n };\n // this.updateLayers = this.updateLayers.bind(this);\n this.olKeys = [];\n }\n\n componentDidMount() {\n this.updateLayers();\n }\n\n componentDidUpdate(prevProps) {\n const { layers } = this.props;\n\n if (layers !== prevProps.layers) {\n this.updateLayers();\n }\n }\n\n componentWillUnmount() {\n unByKey(this.olKeys);\n this.olKeys = [];\n }\n\n onInputClick(layer, toggle = false) {\n if (toggle) {\n this.onToggle(layer);\n } else if (layer.setVisible) {\n layer.setVisible(!layer.visible);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = !layer.visible;\n }\n }\n\n onToggle(layer) {\n const { expandedLayers } = this.state;\n const pos = expandedLayers.indexOf(layer);\n if (pos > -1) {\n expandedLayers.splice(pos, 1);\n } else {\n expandedLayers.push(...this.getExpandedLayers([layer]));\n }\n this.setState({ expandedLayers });\n }\n\n /**\n * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers\n * together with the (given) initially expanded layers\n *\n * @param {Layer} layers Initially expanded layers\n * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors\n */\n getExpandedLayers(layers) {\n const { isItemHidden } = this.props;\n const children = layers.flatMap((l) => {\n return l.children.filter((c) => {\n return !isItemHidden(c) && c.get(\"isAlwaysExpanded\");\n });\n });\n\n if (!children.length) {\n return layers;\n }\n return [...layers, this.getExpandedLayers(children)].flat();\n }\n\n updateLayers() {\n const { layers, expandChildren } = this.props;\n\n // Update the root layer\n let rootLayer = new Layer();\n if (Array.isArray(layers)) {\n if (layers.length === 1) {\n [rootLayer] = layers;\n }\n rootLayer = new Layer({ children: layers });\n } else {\n rootLayer = layers;\n }\n\n getLayersAsFlatArray(rootLayer).forEach((layer) => {\n this.olKeys.push(\n layer.on(\"propertychange\", () => {\n const { revision } = this.state;\n this.setState({ revision: revision + 1 });\n }),\n );\n });\n\n const state = { rootLayer };\n if (\n typeof expandChildren === \"function\"\n ? expandChildren(layers)\n : expandChildren\n ) {\n state.expandedLayers = rootLayer.children.flatMap((l) => {\n return this.expandLayer(l);\n });\n }\n\n this.setState(state);\n }\n\n expandLayer(layer, expLayers = []) {\n const { isItemHidden } = this.props;\n if (layer.visible && !isItemHidden(layer)) {\n const children = layer.children\n .filter((c) => {\n return !isItemHidden(c) && !c.get(\"isAlwaysExpanded\");\n })\n .flatMap((c) => {\n return this.expandLayer(c, expLayers);\n });\n return [...expLayers, ...children, layer];\n }\n return expLayers;\n }\n\n renderInput(layer, inputProps) {\n const { titles, isItemHidden, renderCheckbox } = this.props;\n let tabIndex = 0;\n\n if (\n !(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length\n ) {\n // We forbid focus on keypress event for first level layers and layers without children.\n tabIndex = -1;\n }\n\n const inputType = layer.get(\"group\") ? \"radio\" : \"checkbox\";\n return renderCheckbox ? (\n renderCheckbox(layer, this, inputProps)\n ) : (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions\n <label\n className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}\n tabIndex={tabIndex}\n title={layer.visible ? titles.layerHide : titles.layerShow}\n aria-label={layer.visible ? titles.layerHide : titles.layerShow}\n onKeyPress={(e) => {\n if (e.which === 13) {\n this.onInputClick(layer);\n }\n }}\n >\n <input\n type={inputType}\n tabIndex={-1}\n checked={layer.visible}\n readOnly\n onClick={() => {\n return this.onInputClick(layer);\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...inputProps}\n />\n <span />\n </label>\n );\n }\n\n renderArrow(layer) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n\n if (\n !(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length ||\n layer.get(\"isAlwaysExpanded\")\n ) {\n return null;\n }\n\n return (\n <div\n className={`rs-layer-tree-arrow rs-layer-tree-arrow-${\n !expandedLayers.includes(layer) ? \"collapsed\" : \"expanded\"\n }`}\n />\n );\n }\n\n // Render a button which expands/collapse the layer if there is children\n // or simulate a click on the input otherwise.\n renderToggleButton(layer, toggleProps) {\n const { t, titles, isItemHidden, renderLabel } = this.props;\n const { expandedLayers } = this.state;\n\n const onInputClick = () => {\n this.onInputClick(\n layer,\n (layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length && !layer.get(\"isAlwaysExpanded\"),\n );\n };\n const title = `${t(layer.name)} ${\n expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow\n }`;\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"rs-layer-tree-toggle\"\n title={title}\n aria-expanded={expandedLayers.includes(layer)}\n aria-label={title}\n onClick={onInputClick}\n onKeyPress={onInputClick}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...toggleProps}\n >\n <div>{renderLabel(layer, this)}</div>\n {this.renderArrow(layer)}\n </div>\n );\n }\n\n renderItemContent(layer, inputProps = {}, toggleProps = {}) {\n return (\n <>\n {this.renderInput(layer, inputProps)}\n {this.renderToggleButton(layer, toggleProps)}\n </>\n );\n }\n\n renderItem(layer, level) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n const {\n renderItem,\n renderItemContent,\n renderBeforeItem,\n renderAfterItem,\n padding,\n getParentClassName,\n } = this.props;\n\n const children = expandedLayers.includes(layer)\n ? [\n ...(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }),\n ]\n : [];\n\n if (renderItem) {\n return renderItem(layer, this.onInputClick, this.onToggle);\n }\n\n return (\n <div className={getParentClassName()} key={layer.key}>\n <div\n className={`rs-layer-tree-item ${layer.visible ? \"rs-visible\" : \"\"}`}\n style={{\n paddingLeft: `${padding * level}px`,\n }}\n >\n {renderItemContent\n ? renderItemContent(layer, this)\n : this.renderItemContent(layer)}\n </div>\n {renderBeforeItem && renderBeforeItem(layer, level, this)}\n {[...children].reverse().map((child) => {\n return this.renderItem(child, level + 1);\n })}\n {renderAfterItem && renderAfterItem(layer, level, this)}\n </div>\n );\n }\n\n renderTree() {\n const { isItemHidden } = this.props;\n const { rootLayer } = this.state;\n\n if (!rootLayer?.children?.length) {\n return null;\n }\n\n return (\n <>\n {rootLayer.children\n .filter((l) => {\n return !isItemHidden(l);\n })\n .reverse()\n .map((l) => {\n return this.renderItem(l, 0);\n })}\n </>\n );\n }\n\n render() {\n const { className } = this.props;\n return <div className={className}>{this.renderTree()}</div>;\n }\n}\n\nLayerTree.propTypes = propTypes;\nLayerTree.defaultProps = defaultProps;\n\nexport default LayerTree;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,7 @@ import { PureComponent } from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import OLMap from "ol/Map";
|
|
4
4
|
import { unByKey } from "ol/Observable";
|
|
5
|
-
import Layer from "ol
|
|
6
|
-
import getLayersAsFlatArray from "../../utils/getLayersAsFlatArray";
|
|
5
|
+
import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol";
|
|
7
6
|
const propTypes = {
|
|
8
7
|
/**
|
|
9
8
|
* Either 'react-router' history object:
|
|
@@ -84,14 +83,14 @@ class Permalink extends PureComponent {
|
|
|
84
83
|
if (urlParams.get("layers")) {
|
|
85
84
|
const visibleLayers = urlParams.get("layers").split(",");
|
|
86
85
|
getLayersAsFlatArray(layers).forEach((l) => {
|
|
87
|
-
if (visibleLayers.includes(l.key
|
|
86
|
+
if (visibleLayers.includes(l.key)) {
|
|
88
87
|
if (l.setVisible) {
|
|
89
88
|
l.setVisible(true);
|
|
90
89
|
} else {
|
|
91
90
|
l.visible = true;
|
|
92
91
|
}
|
|
93
|
-
} else if (!isBaseLayer(l) && !isLayerHidden(l) && !
|
|
94
|
-
return ll.
|
|
92
|
+
} else if (!isBaseLayer(l) && !isLayerHidden(l) && !l.children.some((ll) => {
|
|
93
|
+
return ll.visible;
|
|
95
94
|
})) {
|
|
96
95
|
if (l.setVisible) {
|
|
97
96
|
l.setVisible(false);
|
|
@@ -106,8 +105,7 @@ class Permalink extends PureComponent {
|
|
|
106
105
|
)[0];
|
|
107
106
|
if (visibleBaseLayer) {
|
|
108
107
|
getLayersAsFlatArray(layers).filter(isBaseLayer).forEach((baseLayer) => {
|
|
109
|
-
const
|
|
110
|
-
const visible = key === visibleBaseLayer;
|
|
108
|
+
const visible = baseLayer.key === visibleBaseLayer;
|
|
111
109
|
if (baseLayer.setVisible) {
|
|
112
110
|
baseLayer.setVisible(visible);
|
|
113
111
|
} else {
|
|
@@ -171,40 +169,37 @@ class Permalink extends PureComponent {
|
|
|
171
169
|
let layersParam;
|
|
172
170
|
if (layers.length) {
|
|
173
171
|
layersParam = getLayersAsFlatArray(layers).filter((l) => {
|
|
174
|
-
const children = l.
|
|
172
|
+
const children = l.children || [];
|
|
175
173
|
const allChildrenHidden = children.every((child) => {
|
|
176
174
|
return isLayerHidden(child);
|
|
177
175
|
});
|
|
178
176
|
const hasVisibleChildren = children.some((child) => {
|
|
179
|
-
return child.
|
|
177
|
+
return child.visible;
|
|
180
178
|
});
|
|
181
|
-
|
|
182
|
-
return !isBaseLayer(l) && !isLayerHidden(l) && isVisible && (!hasVisibleChildren || allChildrenHidden);
|
|
179
|
+
return !isBaseLayer(l) && !isLayerHidden(l) && l.visible && (!hasVisibleChildren || allChildrenHidden);
|
|
183
180
|
}).map((l) => {
|
|
184
|
-
return l.key
|
|
181
|
+
return l.key;
|
|
185
182
|
}).join();
|
|
186
183
|
}
|
|
187
184
|
let baseLayersParam;
|
|
188
185
|
const baseLayers = getLayersAsFlatArray(layers).filter(isBaseLayer);
|
|
189
186
|
if (baseLayers.length) {
|
|
190
187
|
const visibleBaseLayers = (baseLayers.filter((l) => {
|
|
191
|
-
return l.
|
|
188
|
+
return l.visible;
|
|
192
189
|
}) || []).reverse();
|
|
193
190
|
const nonVisibleBaseLayers = baseLayers.filter((l) => {
|
|
194
|
-
return !
|
|
191
|
+
return !l.visible;
|
|
195
192
|
}) || [];
|
|
196
193
|
baseLayersParam = [...visibleBaseLayers, ...nonVisibleBaseLayers].sort((a, b) => {
|
|
197
|
-
|
|
198
|
-
const bVisible = b.getVisible ? b.getVisible() : b.visible;
|
|
199
|
-
if (aVisible === bVisible) {
|
|
194
|
+
if (a.visible === b.visible) {
|
|
200
195
|
return 0;
|
|
201
196
|
}
|
|
202
|
-
if (
|
|
197
|
+
if (a.visible && !b.visible) {
|
|
203
198
|
return -1;
|
|
204
199
|
}
|
|
205
200
|
return 1;
|
|
206
201
|
}).map((l) => {
|
|
207
|
-
return l.key
|
|
202
|
+
return l.key;
|
|
208
203
|
}).join();
|
|
209
204
|
}
|
|
210
205
|
this.setState({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Permalink/Permalink.js"],
|
|
4
|
-
"sourcesContent": ["import { PureComponent } from \"react\";\nimport PropTypes from \"prop-types\";\nimport OLMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport
|
|
5
|
-
"mappings": "AAAA,SAAS,qBAAqB;AAC9B,OAAO,eAAe;AACtB,OAAO,WAAW;AAClB,SAAS,eAAe;AACxB,
|
|
4
|
+
"sourcesContent": ["import { PureComponent } from \"react\";\nimport PropTypes from \"prop-types\";\nimport OLMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport { Layer, getLayersAsFlatArray } from \"mobility-toolbox-js/ol\";\n\nconst propTypes = {\n /**\n * Either 'react-router' history object:\n * https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md<br>\n * or default fallback as HTML5 History:\n * https://developer.mozilla.org/en-US/docs/Web/API/History\n */\n history: PropTypes.shape({\n replace: PropTypes.func,\n }),\n\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n */\n map: PropTypes.instanceOf(OLMap),\n\n /**\n * Params to be written in url.\n */\n params: PropTypes.object,\n\n /**\n * Maximum number of decimals allowed for coordinates.\n */\n coordinateDecimals: PropTypes.number,\n\n /**\n * Determine if the layer is hidden in the permalink or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the permalink\n */\n isLayerHidden: PropTypes.func,\n\n /**\n * Determine if the layer appears in the baselayers permalink parameter or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the baselayers permalink parameter\n */\n isBaseLayer: PropTypes.func,\n\n /**\n * Custom function to be called when the permalink is updated.\n * This property has priority over the history parameter and window.history.replaceState calls.\n */\n replace: PropTypes.func,\n};\n\nconst defaultProps = {\n history: null,\n replace: null,\n layers: [],\n map: null,\n params: {},\n coordinateDecimals: 2,\n isLayerHidden: () => {\n return false;\n },\n isBaseLayer: (layer) => {\n return layer.get(\"isBaseLayer\");\n },\n};\n\n/**\n * This component handles permalink logic. Injecting an\n * __[ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)__\n * will add the *map center* (x, y) and the *zoom* (z) parameters to the permalink.\n * Injecting layers will add the *baselayers* and/or *layers* parameters. Further parameters can\n * be added using __params__.\n */\nclass Permalink extends PureComponent {\n constructor(props) {\n super(props);\n this.state = { revision: 0 };\n this.onPropertyChangeKeys = [];\n }\n\n componentDidMount() {\n const { map, layers, isLayerHidden, isBaseLayer } = this.props;\n if (map) {\n this.moveEndRef = map.on(\"moveend\", () => {\n this.onMapMoved();\n });\n }\n\n if (layers) {\n // set layer visibility based on 'layers' parameter.\n const urlParams = new URLSearchParams(window.location.search);\n\n if (urlParams.get(\"layers\")) {\n const visibleLayers = urlParams.get(\"layers\").split(\",\");\n getLayersAsFlatArray(layers).forEach((l) => {\n if (visibleLayers.includes(l.key)) {\n if (l.setVisible) {\n l.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = true;\n }\n } else if (\n !isBaseLayer(l) &&\n !isLayerHidden(l) &&\n !l.children.some((ll) => {\n return ll.visible;\n })\n ) {\n if (l.setVisible) {\n l.setVisible(false);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = false;\n }\n }\n });\n }\n\n // Set baser layer visibility based on 'baseLayers' parameter.\n // Show the first of the list then hide the others\n const visibleBaseLayer = (urlParams.get(\"baselayers\") || \"\").split(\n \",\",\n )[0];\n if (visibleBaseLayer) {\n getLayersAsFlatArray(layers)\n .filter(isBaseLayer)\n .forEach((baseLayer) => {\n const visible = baseLayer.key === visibleBaseLayer;\n if (baseLayer.setVisible) {\n baseLayer.setVisible(visible);\n } else {\n // eslint-disable-next-line no-param-reassign\n baseLayer.visible = visible;\n }\n });\n }\n this.updateLayers();\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { map, layers } = this.props;\n const { revision } = this.state;\n\n if (layers !== prevProps.layers || revision !== prevState.revision) {\n this.updateLayers();\n }\n\n if (map !== prevProps.map) {\n unByKey(this.moveEndRef);\n this.moveEndRef = map.on(\"moveend\", () => {\n return this.onMapMoved();\n });\n }\n\n this.updateHistory();\n }\n\n componentWillUnmount() {\n const { map } = this.props;\n\n if (map) {\n unByKey(this.moveEndRef);\n }\n unByKey(this.onPropertyChangeKeys);\n this.onPropertyChangeKeys = [];\n }\n\n onMapMoved() {\n const { map } = this.props;\n const mapView = map.getView();\n const center = mapView.getCenter();\n const params = {};\n\n if (\n center !== undefined &&\n center[0] !== undefined &&\n center[1] !== undefined\n ) {\n params.x = this.roundCoord(center[0]);\n params.y = this.roundCoord(center[1]);\n }\n\n this.setState({\n ...params,\n // rounds zoom to two digits max.\n z: +`${Math.round(`${parseFloat(mapView.getZoom())}e+2`)}e-2`,\n });\n }\n\n roundCoord(val) {\n const { coordinateDecimals } = this.props;\n return parseFloat(val.toFixed(coordinateDecimals));\n }\n\n updateLayers() {\n const { layers, isLayerHidden, isBaseLayer } = this.props;\n const { revision } = this.state;\n\n unByKey(this.onPropertyChangeKeys);\n this.onPropertyChangeKeys = getLayersAsFlatArray(layers).map((layer) => {\n return layer.on(\"change:visible\", () => {\n this.setState({ revision: revision + 1 });\n });\n });\n\n // layers param\n let layersParam;\n if (layers.length) {\n layersParam = getLayersAsFlatArray(layers)\n .filter((l) => {\n const children = l.children || [];\n const allChildrenHidden = children.every((child) => {\n return isLayerHidden(child);\n });\n const hasVisibleChildren = children.some((child) => {\n return child.visible;\n });\n return (\n !isBaseLayer(l) &&\n !isLayerHidden(l) &&\n l.visible &&\n (!hasVisibleChildren || allChildrenHidden)\n );\n })\n .map((l) => {\n return l.key;\n })\n .join();\n }\n\n // baselayers param\n let baseLayersParam;\n const baseLayers = getLayersAsFlatArray(layers).filter(isBaseLayer);\n if (baseLayers.length) {\n // First baselayers in order of visibility, top layer is first\n const visibleBaseLayers = (\n baseLayers.filter((l) => {\n return l.visible;\n }) || []\n ).reverse();\n const nonVisibleBaseLayers =\n baseLayers.filter((l) => {\n return !l.visible;\n }) || [];\n baseLayersParam = [...visibleBaseLayers, ...nonVisibleBaseLayers]\n .sort((a, b) => {\n if (a.visible === b.visible) {\n return 0;\n }\n if (a.visible && !b.visible) {\n return -1;\n }\n return 1;\n })\n .map((l) => {\n return l.key;\n })\n .join();\n }\n\n // Only add parameters if there is actually some layers added.\n this.setState({\n layers: layersParam,\n baselayers: baseLayersParam,\n });\n }\n\n updateHistory() {\n const { params, history, replace } = this.props;\n const oldParams = new URLSearchParams(window.location.search);\n const parameters = {\n ...Object.fromEntries(oldParams.entries()),\n ...this.state,\n ...params,\n };\n\n delete parameters.revision;\n\n // Remove parameters that are undefined or null\n Object.entries(parameters).forEach(([key, value]) => {\n if (value === undefined || value === null) {\n delete parameters[key];\n }\n });\n\n // We don't encode the , to leave the permalink lisible\n const qStr = new URLSearchParams(parameters)\n .toString()\n .replace(/%2C/g, \",\");\n const search = qStr ? `?${qStr}` : \"\";\n\n if (\n (!qStr && window.location.search) ||\n (qStr && search !== window.location.search)\n ) {\n if (replace) {\n replace({ parameters, search });\n } else if (history) {\n history.replace({ search });\n } else {\n const { hash } = window.location;\n window.history.replaceState(\n undefined,\n undefined,\n `${search}${hash || \"\"}`,\n );\n }\n }\n }\n\n render() {\n return null;\n }\n}\n\nPermalink.propTypes = propTypes;\nPermalink.defaultProps = defaultProps;\n\nexport default Permalink;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import { Autocomplete, autocompleteClasses, styled } from "@mui/material";
|
|
|
4
4
|
import { FaSearch } from "react-icons/fa";
|
|
5
5
|
import TextField from "@mui/material/TextField";
|
|
6
6
|
import CircularProgress from "@mui/material/CircularProgress";
|
|
7
|
-
import {
|
|
7
|
+
import { StopFinderControl } from "mobility-toolbox-js/ol";
|
|
8
8
|
import { Map } from "ol";
|
|
9
9
|
import StopsFinderOption from "./StopsFinderOption";
|
|
10
10
|
const StyledAutocomplete = styled(Autocomplete)(() => ({
|
|
@@ -35,12 +35,17 @@ function StopsFinder({
|
|
|
35
35
|
const [suggestions, setSuggestions] = useState([]);
|
|
36
36
|
const [isLoading, setLoading] = useState(false);
|
|
37
37
|
const [isOpen, setOpen] = useState(false);
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
const control = useMemo(() => {
|
|
39
|
+
return new StopFinderControl({
|
|
40
|
+
url,
|
|
41
|
+
apiKey,
|
|
42
|
+
target: document.createElement("div"),
|
|
43
|
+
element: document.createElement("div"),
|
|
44
|
+
render(newSuggestions = { features: [] }) {
|
|
45
|
+
setSuggestions(newSuggestions.features);
|
|
46
|
+
setLoading(false);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
44
49
|
}, [apiKey, url]);
|
|
45
50
|
useEffect(() => {
|
|
46
51
|
if (!inputValue) {
|
|
@@ -51,8 +56,7 @@ function StopsFinder({
|
|
|
51
56
|
}
|
|
52
57
|
const abortController = new AbortController();
|
|
53
58
|
setLoading(true);
|
|
54
|
-
|
|
55
|
-
q: inputValue,
|
|
59
|
+
control.apiParams = {
|
|
56
60
|
prefAgencies: agencies && agencies.toString(),
|
|
57
61
|
bbox: bbox && bbox.toString(),
|
|
58
62
|
field: field && field.toString(),
|
|
@@ -61,21 +65,14 @@ function StopsFinder({
|
|
|
61
65
|
radius,
|
|
62
66
|
ref_location: refLocation && refLocation.toString()
|
|
63
67
|
};
|
|
64
|
-
|
|
65
|
-
setSuggestions(featureCollection?.features || []);
|
|
66
|
-
setLoading(false);
|
|
67
|
-
}).catch((error) => {
|
|
68
|
-
if (error.code !== 20) {
|
|
69
|
-
console.error(error);
|
|
70
|
-
}
|
|
71
|
-
});
|
|
68
|
+
control.search(inputValue, abortController);
|
|
72
69
|
return () => {
|
|
73
70
|
abortController.abort();
|
|
74
71
|
};
|
|
75
72
|
}, [
|
|
76
73
|
agencies,
|
|
77
74
|
bbox,
|
|
78
|
-
|
|
75
|
+
control,
|
|
79
76
|
field,
|
|
80
77
|
inputValue,
|
|
81
78
|
limit,
|
|
@@ -83,6 +80,19 @@ function StopsFinder({
|
|
|
83
80
|
radius,
|
|
84
81
|
refLocation
|
|
85
82
|
]);
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
if (!control) {
|
|
85
|
+
return () => {
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
control.map = map;
|
|
89
|
+
return () => {
|
|
90
|
+
control.map = null;
|
|
91
|
+
};
|
|
92
|
+
}, [map, control]);
|
|
93
|
+
if (!control) {
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
86
96
|
if (renderAutocomplete) {
|
|
87
97
|
return renderAutocomplete(
|
|
88
98
|
suggestions,
|
|
@@ -226,4 +236,4 @@ StopsFinder.propTypes = {
|
|
|
226
236
|
*/
|
|
227
237
|
url: PropTypes.string
|
|
228
238
|
};
|
|
229
|
-
export default
|
|
239
|
+
export default StopsFinder;
|