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

Conflicts:
	src/components/Toolbar.jsx

README.md

@@ -1,11 +1,23 @@
-# Maputnik [![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)](https://travis-ci.org/maputnik/editor) [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)](https://ci.appveyor.com/project/lukasmartinelli/editor) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license)
+# Maputnik
+
+[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
+[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
+[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
+
+[travis]:      https://travis-ci.org/maputnik/editor
+[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
+[dm-prod]:     https://david-dm.org/maputnik/editor
+[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
+[license]:     https://tldrlegal.com/license/mit-license
 
 <img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
 
 A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
 targeted at developers and map designers.
 
-- :link: Design your maps online at **http://maputnik.com/editor/** (all in local storage)
+- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
 - :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
 
 Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.
@@ -37,7 +49,12 @@ npm install
 npm start
 ```
 
-Build a production package for distribution.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
+
+> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
+Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
+
+To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
 
 ```
 npm run build

config/webpack.config.js

@@ -45,7 +45,13 @@ module.exports = {
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
-    host: HOST
+    host: HOST,
+    watchOptions: {
+      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
+      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+      watch: false
+    }
   },
   plugins: [
     new webpack.NoEmitOnErrorsPlugin(),

package.json

@@ -8,7 +8,7 @@
     "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
     "test": "wdio config/wdio.conf.js",
     "test-watch": "wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress --profile --colors --watch-poll --config config/webpack.config.js",
+    "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
     "lint": "eslint --ext js --ext jsx {src,test}",
     "lint-styles": "stylelint 'src/styles/*.scss'"
   },

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;
+}