From d2ffc3a0b10629a01e6f08384dc628b63a5f13d7 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 18 May 2019 18:54:10 +0100 Subject: [PATCH 1/4] Added semi-hidden debug modal and removed all this url param awkwardness --- src/components/App.jsx | 31 +++++++++++++++++--- src/components/modals/DebugModal.js | 36 ++++++++++++++++++++++++ src/components/modals/ShortcutsModal.jsx | 4 +++ 3 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 src/components/modals/DebugModal.js diff --git a/src/components/App.jsx b/src/components/App.jsx index 34216c84..8be737f5 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -19,6 +19,7 @@ import SourcesModal from './modals/SourcesModal' import OpenModal from './modals/OpenModal' import ShortcutsModal from './modals/ShortcutsModal' import SurveyModal from './modals/SurveyModal' +import DebugModal from './modals/DebugModal' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' import {latest, validate} from '@mapbox/mapbox-gl-style-spec' @@ -139,6 +140,12 @@ export default class App extends React.Component { document.querySelector(".mapboxgl-canvas").focus(); } }, + { + key: "!", + handler: () => { + this.toggleModal("debug"); + } + }, ] document.body.addEventListener("keyup", (e) => { @@ -203,12 +210,13 @@ export default class App extends React.Component { open: false, shortcuts: false, export: false, - survey: localStorage.hasOwnProperty('survey') ? false : true + survey: localStorage.hasOwnProperty('survey') ? false : true, + debug: false, }, mapOptions: { - showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries"), - showCollisionBoxes: queryUtil.asBool(queryObj, "show-collision-boxes"), - showOverdrawInspector: queryUtil.asBool(queryObj, "show-overdraw-inspector") + showTileBoundaries: false, + showCollisionBoxes: false, + showOverdrawInspector: false, }, } @@ -524,6 +532,15 @@ export default class App extends React.Component { this.setModal(modalName, !this.state.isOpen[modalName]); } + onChangeDebug = (key, value) => { + this.setState({ + mapOptions: { + ...this.state.mapOptions, + [key]: value, + } + }); + } + render() { const layers = this.state.mapStyle.layers || [] const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null @@ -575,6 +592,12 @@ export default class App extends React.Component { const modals =
+ this.shortcutEl = el} isOpen={this.state.isOpen.shortcuts} diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js new file mode 100644 index 00000000..48697aa2 --- /dev/null +++ b/src/components/modals/DebugModal.js @@ -0,0 +1,36 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Modal from './Modal' + + +class DebugModal extends React.Component { + static propTypes = { + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, + debugOptions: PropTypes.object, + } + + render() { + return +
+
    + {Object.entries(this.props.debugOptions).map(([key, val]) => { + return
  • + +
    • + })} +
+
+ + } +} + +export default DebugModal; diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx index df8312ee..1ec7448b 100644 --- a/src/components/modals/ShortcutsModal.jsx +++ b/src/components/modals/ShortcutsModal.jsx @@ -40,6 +40,10 @@ class ShortcutsModal extends React.Component { key: "m", text: "Focus map" }, + { + key: "!", + text: "Debug modal" + }, ] From eb2fc4c715d9c25d1297a7ab8ca8e97154abeede Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 18 May 2019 19:02:51 +0100 Subject: [PATCH 2/4] Fixed prop-type name. --- src/components/modals/DebugModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index 48697aa2..d1fce448 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -7,7 +7,7 @@ import Modal from './Modal' class DebugModal extends React.Component { static propTypes = { isOpen: PropTypes.bool.isRequired, - onOpenToggle: PropTypes.func.isRequired, + onChangeDebug: PropTypes.func.isRequired, debugOptions: PropTypes.object, } From 2776ac3ce06dfe9f6a1f351171e5034492cba29a Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 18 May 2019 19:06:54 +0100 Subject: [PATCH 3/4] Added back in onOpenToggle --- src/components/modals/DebugModal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index d1fce448..99730339 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -8,6 +8,7 @@ class DebugModal extends React.Component { static propTypes = { isOpen: PropTypes.bool.isRequired, onChangeDebug: PropTypes.func.isRequired, + onOpenToggle: PropTypes.func.isRequired, debugOptions: PropTypes.object, } From 87daf6fb76861634389399dadb34e0abeef05a24 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 19 May 2019 10:09:44 +0100 Subject: [PATCH 4/4] Fixes because I was incorrectly assuming mgljs only --- src/components/App.jsx | 23 +++++++++++++--------- src/components/modals/DebugModal.js | 30 ++++++++++++++++++----------- 2 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 8be737f5..7741969b 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -213,7 +213,7 @@ export default class App extends React.Component { survey: localStorage.hasOwnProperty('survey') ? false : true, debug: false, }, - mapOptions: { + mapboxGlDebugOptions: { showTileBoundaries: false, showCollisionBoxes: false, showOverdrawInspector: false, @@ -469,18 +469,22 @@ export default class App extends React.Component { } } + _getRenderer () { + const metadata = this.state.mapStyle.metadata || {}; + return metadata['maputnik:renderer'] || 'mbgljs'; + } + mapRenderer() { const mapProps = { mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}), - options: this.state.mapOptions, + options: this.state.mapboxGlDebugOptions, onDataChange: (e) => { this.layerWatcher.analyzeMap(e.map) this.fetchSources(); }, } - const metadata = this.state.mapStyle.metadata || {} - const renderer = metadata['maputnik:renderer'] || 'mbgljs' + const renderer = this._getRenderer(); let mapElement; @@ -532,10 +536,10 @@ export default class App extends React.Component { this.setModal(modalName, !this.state.isOpen[modalName]); } - onChangeDebug = (key, value) => { + onChangeMaboxGlDebug = (key, value) => { this.setState({ - mapOptions: { - ...this.state.mapOptions, + mapboxGlDebugOptions: { + ...this.state.mapboxGlDebugOptions, [key]: value, } }); @@ -593,8 +597,9 @@ export default class App extends React.Component { const modals =
diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index 99730339..bddb48f3 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -7,9 +7,10 @@ import Modal from './Modal' class DebugModal extends React.Component { static propTypes = { isOpen: PropTypes.bool.isRequired, - onChangeDebug: PropTypes.func.isRequired, + renderer: PropTypes.string.isRequired, + onChangeMaboxGlDebug: PropTypes.func.isRequired, onOpenToggle: PropTypes.func.isRequired, - debugOptions: PropTypes.object, + mapboxGlDebugOptions: PropTypes.object, } render() { @@ -20,15 +21,22 @@ class DebugModal extends React.Component { title={'Debug'} >
-
    - {Object.entries(this.props.debugOptions).map(([key, val]) => { - return
  • - -
    • - })} -
+ {this.props.renderer === 'mbgljs' && +
    + {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => { + return
  • + +
    • + })} +
+ } + {this.props.renderer === 'ol' && +
+ No debug options available for the OpenLayers renderer +
+ }
}