diff --git a/src/components/App.jsx b/src/components/App.jsx index 34216c84..7741969b 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") + mapboxGlDebugOptions: { + showTileBoundaries: false, + showCollisionBoxes: false, + showOverdrawInspector: false, }, } @@ -461,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; @@ -524,6 +536,15 @@ export default class App extends React.Component { this.setModal(modalName, !this.state.isOpen[modalName]); } + onChangeMaboxGlDebug = (key, value) => { + this.setState({ + mapboxGlDebugOptions: { + ...this.state.mapboxGlDebugOptions, + [key]: value, + } + }); + } + render() { const layers = this.state.mapStyle.layers || [] const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null @@ -575,6 +596,13 @@ 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..bddb48f3 --- /dev/null +++ b/src/components/modals/DebugModal.js @@ -0,0 +1,45 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Modal from './Modal' + + +class DebugModal extends React.Component { + static propTypes = { + isOpen: PropTypes.bool.isRequired, + renderer: PropTypes.string.isRequired, + onChangeMaboxGlDebug: PropTypes.func.isRequired, + onOpenToggle: PropTypes.func.isRequired, + mapboxGlDebugOptions: PropTypes.object, + } + + render() { + 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 +
+ } +
+
+ } +} + +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" + }, ]