Merge remote-tracking branch 'upstream/master' into feature/add-range-slider

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,
       },
     }
 
@@ -217,20 +225,24 @@ export default class App extends React.Component {
     })
   }
 
-  handleKeyPress(e) {
+  handleKeyPress = (e) => {
     if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
       if(e.metaKey && e.shiftKey && e.keyCode === 90) {
+        e.preventDefault();
         this.onRedo(e);
       }
       else if(e.metaKey && e.keyCode === 90) {
+        e.preventDefault();
         this.onUndo(e);
       }
     }
     else {
       if(e.ctrlKey && e.keyCode === 90) {
+        e.preventDefault();
         this.onUndo(e);
       }
       else if(e.ctrlKey && e.keyCode === 89) {
+        e.preventDefault();
         this.onRedo(e);
       }
     }
@@ -461,18 +473,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 +540,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 +600,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/Toolbar.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {detect} from 'detect-browser';
 
 import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
 
@@ -9,6 +10,11 @@ import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
 
 
+// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
+const browser = detect();
+const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
+
+
 class IconText extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -137,18 +143,22 @@ export default class Toolbar extends React.Component {
       {
         id: "filter-deuteranopia",
         title: "Map (deuteranopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-protanopia",
         title: "Map (protanopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-tritanopia",
         title: "Map (tritanopia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-achromatopsia",
         title: "Map (achromatopsia)",
+        disabled: !colorAccessibilityFiltersEnabled,
       },
     ];
 
@@ -201,7 +211,7 @@ export default class Toolbar extends React.Component {
             <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
               {views.map((item) => {
                 return (
-                  <option key={item.id} value={item.id}>
+                  <option key={item.id} value={item.id} disabled={item.disabled}>
                     {item.title}
                   </option>
                 );

src/components/inputs/NumberInput.jsx

@@ -19,20 +19,28 @@ class NumberInput extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      value: props.value
+      editing: false,
+      value: props.value,
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
     }
   }
 
   changeValue(newValue) {
+    this.setState({editing: true});
     const value = parseFloat(newValue)
 
     const hasChanged = this.state.value !== value
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
-      this.setState({ value: value })
-    } else {
-      this.setState({ value: newValue })
     }
+    this.setState({ value: newValue })
   }
 
   isValid(v) {
@@ -53,6 +61,7 @@ class NumberInput extends React.Component {
   }
 
   resetValue = () => {
+    this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
       return this.changeValue(this.props.default)

src/components/inputs/StringInput.jsx

@@ -14,13 +14,16 @@ class StringInput extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
+      editing: false,
       value: props.value || ''
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if(this.props.value !== prevProps.value) {
-      this.setState({value: this.props.value})
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
     }
   }
 
@@ -51,11 +54,15 @@ class StringInput extends React.Component {
       placeholder: this.props.default,
       onChange: e => {
         this.setState({
+          editing: true,
           value: e.target.value
         })
       },
       onBlur: () => {
-        if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
+        if(this.state.value!==this.props.value) {
+          this.setState({editing: false});
+          this.props.onChange(this.state.value);
+        }
       }
     });
   }

src/components/map/OpenLayersMap.jsx

@@ -51,12 +51,8 @@ export default class OpenLayersMap extends React.Component {
     return <div
       ref={x => this.container = x}
       style={{
-        position: "fixed",
-        top: 40,
-        right: 0,
-        bottom: 0,
-        height: 'calc(100% - 40px)',
-        width: "75%",
+        width: "100%",
+        height: "100%",
         backgroundColor: '#fff',
         ...this.props.style,
       }}>

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"
+      },
     ]