Merge remote-tracking branch 'upstream/master' into fix/update-deps

Conflicts:
	src/components/Toolbar.jsx

src/components/Toolbar.jsx

@@ -46,7 +46,8 @@ class ToolbarLink extends React.Component {
     return <a
       className={classnames('maputnik-toolbar-link', this.props.className)}
       href={this.props.href}
-      target={"blank"}
+      rel="noopener noreferrer"
+      target="_blank"
     >
       {this.props.children}
     </a>
@@ -129,40 +130,44 @@ export default class Toolbar extends React.Component {
           isOpen={this.state.isOpen.sources}
           onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
-      <ToolbarLink
-        href={"https://github.com/maputnik/editor"}
-        className="maputnik-toolbar-logo"
-      >
-        <img src={logoImage} alt="Maputnik" />
-        <h1>Maputnik</h1>
-      </ToolbarLink>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
-        <OpenIcon />
-        <IconText>Open</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
-        <MdFileDownload />
-        <IconText>Export</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
-        <SourcesIcon />
-        <IconText>Sources</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
-        <SettingsIcon />
-        <IconText>Style Settings</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.props.onInspectModeToggle}>
-        <InspectionIcon />
-        <IconText>
-          { this.props.inspectModeEnabled && <span>Map Mode</span> }
-          { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
-        </IconText>
-      </ToolbarAction>
-      <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-        <HelpIcon />
-        <IconText>Help</IconText>
-      </ToolbarLink>
+      <div className="maputnik-toolbar__inner">
+        <ToolbarLink
+          href={"https://github.com/maputnik/editor"}
+          className="maputnik-toolbar-logo"
+        >
+          <img src={logoImage} alt="Maputnik" />
+          <h1>Maputnik</h1>
+        </ToolbarLink>
+        <div className="maputnik-toolbar__actions">
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
+            <OpenIcon />
+            <IconText>Open</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
+            <MdFileDownload />
+            <IconText>Export</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
+            <SourcesIcon />
+            <IconText>Sources</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
+            <SettingsIcon />
+            <IconText>Style Settings</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.props.onInspectModeToggle}>
+            <InspectionIcon />
+            <IconText>
+              { this.props.inspectModeEnabled && <span>Map Mode</span> }
+              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
+            </IconText>
+          </ToolbarAction>
+          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
+            <HelpIcon />
+            <IconText>Help</IconText>
+          </ToolbarLink>
+        </div>
+      </div>
     </div>
   }
 }

src/components/fields/FunctionSpecField.jsx

@@ -90,6 +90,16 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.function === "interpolated") {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
   getDataFunctionTypes(functionType) {
     if (functionType === "interpolated") {
       return ["categorical", "interval", "exponential"]
@@ -132,6 +142,9 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 
   renderDataProperty() {
+    if (typeof this.props.value.type === "undefined") {
+      this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
+    }
     const dataFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0].zoom
       const dataLevel = stop[0].value

src/components/map/MapboxGlMap.jsx

@@ -9,6 +9,7 @@ import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
+import ZoomControl from '../../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -110,6 +111,9 @@ export default class MapboxGlMap extends React.Component {
       hash: true,
     })
 
+    const zoom = new ZoomControl;
+    map.addControl(zoom, 'top-right');
+
     const nav = new MapboxGl.NavigationControl();
     map.addControl(nav, 'top-right');
 

src/libs/zoomcontrol.js

@@ -0,0 +1,26 @@
+export default class ZoomControl {
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement('div');
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
+    
+    this.addEventListeners();
+    
+    return this._container;
+  }
+  
+  updateZoomLevel() {
+    this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
+  }
+  
+  addEventListeners (){
+    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+  }
+
+  onRemove() {
+    this._container.parentNode.removeChild(this._container);
+    this._map = undefined;
+  }
+}

src/mapboxgl.css

@@ -25,6 +25,13 @@
   color: white;
 }
 
+.mapboxgl-ctrl-zoom {
+  color: rgb(138, 138, 138);
+  font-weight: bold;
+  padding: 4px 8px;
+  user-select: none;
+}
+
 .mapboxgl-ctrl-group {
   background: rgb(28, 31, 36);
 }

src/styles/_scrollbar.scss

@@ -1,12 +1,15 @@
-::-webkit-scrollbar {
-  background-color: #26282e;
-  width: 5px;
-}
+// HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar
+div:not(.maputnik-toolbar__actions) {
+  &::-webkit-scrollbar {
+    background-color: #26282e;
+    width: 5px;
+  }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #666;
-  padding-left: 2px;
-  padding-right: 2px;
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #666;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
 }

src/styles/_toolbar.scss

@@ -54,3 +54,17 @@
   display: inline;
   margin-left: $margin-1;
 }
+
+.maputnik-toolbar-logo {
+  flex: 0 0 140px;
+}
+
+.maputnik-toolbar__inner {
+  display: flex;
+}
+
+.maputnik-toolbar__actions {
+  white-space: nowrap;
+  flex: 1;
+  overflow-y: auto;
+}