Merge pull request #519 from orangemug/feature/debug-modal

Added semi-hidden debug modal

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: {
+      mapboxGlDebugOptions: {
-        showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries"),
+        showTileBoundaries: false,
-        showCollisionBoxes: queryUtil.asBool(queryObj, "show-collision-boxes"),
+        showCollisionBoxes: false,
-        showOverdrawInspector: queryUtil.asBool(queryObj, "show-overdraw-inspector")
+        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 = this._getRenderer();
-    const renderer = metadata['maputnik:renderer'] || 'mbgljs'
 
     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 = <div>
+      <DebugModal
+        renderer={this._getRenderer()}
+        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
+        isOpen={this.state.isOpen.debug}
+        onOpenToggle={this.toggleModal.bind(this, 'debug')}
+      />
       <ShortcutsModal
         ref={(el) => this.shortcutEl = el}
         isOpen={this.state.isOpen.shortcuts}

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 <Modal
+      data-wd-key="debug-modal"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Debug'}
+    >
+      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+        {this.props.renderer === 'mbgljs' &&
+          <ul>
+            {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
+        }
+        {this.props.renderer === 'ol' &&
+          <div>
+            No debug options available for the OpenLayers renderer
+          </div>
+        }
+      </div>
+    </Modal>
+  }
+}
+
+export default DebugModal;

src/components/modals/ShortcutsModal.jsx

@@ -40,6 +40,10 @@ class ShortcutsModal extends React.Component {
         key: "m",
         text: "Focus map"
       },
+      {
+        key: "!",
+        text: "Debug modal"
+      },
     ]