Merge remote-tracking branch 'upstream/master' into fix/issue-97-layer-list-cutoff

.travis.yml

@@ -3,24 +3,24 @@ addons:
   firefox: latest
 matrix:
   include:
-    # - os: linux
-    #   node_js: "4"
-    - os: linux
-      env: CXX=g++-4.8
-      node_js: "5"
     - os: linux
       node_js: "6"
     - os: linux
       env: CXX=g++-4.8
       node_js: "7"
-    # - os: osx
-    #   node_js: "4"
-    - os: osx
-      node_js: "5"
+    - os: linux
+      node_js: "8"
+    - os: linux
+      env: CXX=g++-4.8
+      node_js: "9"
     - os: osx
       node_js: "6"
     - os: osx
       node_js: "7"
+    - os: osx
+      node_js: "8"
+    - os: osx
+      node_js: "9"
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0

appveyor.yml

@@ -1,8 +1,9 @@
 environment:
   matrix:
-    # - nodejs_version: "4"
     - nodejs_version: "6"
     - nodejs_version: "7"
+    - nodejs_version: "8"
+    - nodejs_version: "9"
 platform:
   - x86
   - x64

config/wdio.conf.js

@@ -29,6 +29,9 @@ exports.config = {
   services: ['phantomjs'],
   framework: 'mocha',
   reporters: ['spec'],
+  phantomjsOpts: {
+    webdriverLogfile: 'phantomjs.log'
+  },
   mochaOpts: {
     ui: 'bdd',
     // Because we don't know how long the initial build will take...

config/webpack.production.config.js

@@ -5,6 +5,7 @@ var loaders = require('./webpack.loaders');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
+var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 var OUTPATH;
 if(process.env.CIRCLE_ARTIFACTS) {
@@ -78,6 +79,14 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './src/template.html',
       title: 'Maputnik'
+    }),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      defaultSizes: 'gzip',
+      openAnalyzer: false,
+      generateStatsFile: true,
+      reportFilename: 'bundle-stats.html',
+      statsFilename: 'bundle-stats.json',
     })
   ]
 };

package.json

@@ -39,14 +39,14 @@
     "ol-mapbox-style": "^1.0.1",
     "openlayers": "^4.4.2",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0",
+    "react": "16.0.0",
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-autocomplete": "^1.7.2",
     "react-codemirror": "^1.0.0",
     "react-collapse": "^4.0.3",
     "react-color": "^2.13.8",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.0.0",
+    "react-dom": "16.0.0",
     "react-file-reader-input": "^1.1.4",
     "react-height": "^3.0.0",
     "react-icon-base": "^2.1.1",
@@ -125,6 +125,7 @@
     "wdio-spec-reporter": "^0.1.2",
     "webdriverio": "^4.8.0",
     "webpack": "^3.8.1",
+    "webpack-bundle-analyzer": "^2.9.0",
     "webpack-cleanup-plugin": "^0.5.1",
     "webpack-dev-server": "^2.9.4"
   }

src/components/App.jsx

@@ -69,10 +69,10 @@ export default class App extends React.Component {
     this.layerWatcher = new LayerWatcher({
       onVectorLayersChange: v => this.setState({ vectorLayers: v })
     })
-    this.fetchSources();
   }
 
   componentDidMount() {
+    this.fetchSources();
     Mousetrap.bind(['ctrl+z'], this.onUndo.bind(this));
     Mousetrap.bind(['ctrl+y'], this.onRedo.bind(this));
   }
@@ -185,10 +185,13 @@ export default class App extends React.Component {
   }
 
   fetchSources() {
-    const sourceList = {...this.state.sources};
+    const sourceList = {};
 
     for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
-      sourceList[key] = sourceList[key] || [];
+      sourceList[key] = {
+        type: val.type,
+        layers: []
+      };
 
       if(val.type === "vector") {
         const url = val.url;
@@ -197,11 +200,12 @@ export default class App extends React.Component {
             return response.json();
           })
           .then((json) => {
+            // Create new objects before setState
             const sourceList = {...this.state.sources};
-            sourceList[key] = [];
+            sourceList[key] = {...sourceList[key]};
 
             for(let layer of json.vector_layers) {
-              sourceList[key].push(layer.id)
+              sourceList[key].layers.push(layer.id)
             }
 
             this.setState({

src/components/layers/LayerEditor.jsx

@@ -134,7 +134,7 @@ export default class LayerEditor extends React.Component {
         />
         }
         {this.props.layer.type !== 'raster' && this.props.layer.type !== 'background' && <LayerSourceLayerBlock
-          sourceLayerIds={this.props.sources[this.props.layer.source]}
+          sourceLayerIds={this.props.sources[this.props.layer.source].layers}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />

src/components/modals/AddModal.jsx

@@ -56,18 +56,54 @@ class AddModal extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const sourceIds = Object.keys(nextProps.sources)
-    if(!this.state.source && sourceIds.length > 0) {
+  componentWillUpdate(nextProps, nextState) {
+    // Check if source is valid for new type
+    const availableSources = this.getSources(nextState.type);
+    if(
+      this.state.source !== ""
+      && availableSources.indexOf(this.state.source) < 0
+    ) {
       this.setState({
-        source: sourceIds[0],
-        'source-layer': this.state['source-layer'] || (nextProps.sources[sourceIds[0]] || [])[0]
-      })
+        source: ""
+      });
     }
   }
 
+  getLayersForSource(source) {
+    const sourceObj = this.props.sources[source] || {};
+    return sourceObj.layers || [];
+  }
+
+  getSources(type) {
+    const sources = [];
+
+    const types = {
+      vector: [
+        "fill",
+        "line",
+        "symbol",
+        "circle",
+        "fill-extrusion"
+      ],
+      raster: [
+        "raster"
+      ]
+    }
+
+    for(let [key, val] of Object.entries(this.props.sources)) {
+      if(types[val.type].indexOf(type) > -1) {
+        sources.push(key);
+      }
+    }
+
+    return sources;
+  }
+
 
   render() {
+    const sources = this.getSources(this.state.type);
+    const layers = this.getLayersForSource(this.state.source);
+
     return <Modal
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
@@ -84,14 +120,14 @@ class AddModal extends React.Component {
       />
       {this.state.type !== 'background' &&
       <LayerSourceBlock
-        sourceIds={Object.keys(this.props.sources)}
+        sourceIds={sources}
         value={this.state.source}
         onChange={v => this.setState({ source: v })}
       />
       }
       {this.state.type !== 'background' && this.state.type !== 'raster' &&
       <LayerSourceLayerBlock
-        sourceLayerIds={this.props.sources[this.state.source] || []}
+        sourceLayerIds={layers}
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}
       />

src/components/modals/SourcesModal.jsx

@@ -139,7 +139,7 @@ class AddSource extends React.Component {
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}>
+      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],

src/components/sources/SourceTypeEditor.jsx

@@ -12,7 +12,7 @@ class TileJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_tile.url.doc}>
+    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
       <StringInput
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -43,7 +43,7 @@ class TileURLSourceEditor extends React.Component {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_tile.tiles.doc}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
         <StringInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -55,7 +55,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_tile.minzoom.doc}>
+      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -64,7 +64,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({

src/styles/_components.scss

@@ -35,6 +35,7 @@
     left: 0;
     width: 120px;
     z-index: 10;
+    pointer-events: none;
   }
 }