Merge remote-tracking branch 'upstream/master' into feature/os-open-zoomstack

Conflicts:
	src/config/styles.json

.travis.yml

@@ -1,22 +0,0 @@
-language: node_js
-matrix:
-  include:
-    - os: osx
-      node_js: "6"
-    - os: osx
-      node_js: "8"
-    - os: osx
-      node_js: "9"
-install:
-  - npm install
-script:
-  - mkdir public
-  - node --stack_size=100000 $(which npm) run build
-  - npm run lint
-  - npm run lint-styles
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - g++-4.8

appveyor.yml

@@ -1,8 +1,9 @@
+image: Visual Studio 2017
 environment:
   matrix:
-    - nodejs_version: "6"
     - nodejs_version: "8"
     - nodejs_version: "9"
+    - nodejs_version: "10"
 platform:
   - x86
   - x64

src/components/fields/_ZoomProperty.jsx

@@ -13,6 +13,30 @@ import docUid from '../../libs/document-uid'
 import sortNumerically from '../../libs/sort-numerically'
 
 
+/**
+ * We cache a reference for each stop by its index.
+ *
+ * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
+ */
+function setStopRefs(props, state) {
+  // This is initialsed below only if required to improved performance.
+  let newRefs;
+
+  if(props.value && props.value.stops) {
+    props.value.stops.forEach((val, idx) => {
+      if(!state.refs.hasOwnProperty(idx)) {
+        if(!newRefs) {
+          newRefs = {...state};
+        }
+        newRefs[idx] = docUid("stop-");
+      }
+    })
+  }
+
+  return newRefs;
+}
+
+
 export default class ZoomProperty extends React.Component {
   static propTypes = {
     onChange: PropTypes.func,
@@ -34,36 +58,8 @@ export default class ZoomProperty extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({
-      refs: this.setStopRefs(this.props)
-    })
-  }
+    const newRefs = setStopRefs(this.props, this.state);
 
-  /**
-   * We cache a reference for each stop by its index.
-   *
-   * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
-   */
-  setStopRefs(props) {
-    // This is initialsed below only if required to improved performance.
-    let newRefs;
-
-    if(props.value && props.value.stops) {
-      props.value.stops.forEach((val, idx) => {
-        if(!this.state.refs.hasOwnProperty(idx)) {
-          if(!newRefs) {
-            newRefs = {...this.state.refs};
-          }
-          newRefs[idx] = docUid("stop-");
-        }
-      })
-    }
-
-    return newRefs;
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const newRefs = this.setStopRefs(nextProps);
     if(newRefs) {
       this.setState({
         refs: newRefs
@@ -71,6 +67,16 @@ export default class ZoomProperty extends React.Component {
     }
   }
 
+  static getDerivedStateFromProps(props, state) {
+    const newRefs = setStopRefs(props, state);
+    if(newRefs) {
+      return {
+        refs: newRefs
+      };
+    }
+    return null;
+  }
+
   // Order the stops altering the refs to reflect their new position.
   orderStopsByZoom(stops) {
     const mappedWithRef = stops

src/components/inputs/NumberInput.jsx

@@ -17,8 +17,10 @@ class NumberInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      value: props.value
+    };
   }
 
   changeValue(newValue) {

src/components/inputs/StringInput.jsx

@@ -18,8 +18,10 @@ class StringInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value || '' })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      value: props.value || ''
+    };
   }
 
   render() {

src/components/layers/Collapse.jsx

@@ -10,6 +10,10 @@ export default class CollapseAlt extends React.Component {
     children: PropTypes.element.isRequired
   }
 
+  static defaultProps = {
+    isActive: true
+  }
+
   render() {
     if (accessibility.reducedMotionEnabled()) {
       return (

src/components/layers/JSONEditor.jsx

@@ -29,10 +29,10 @@ class JSONEditor extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      code: JSON.stringify(nextProps.layer, null, 2)
-    })
+  static getDerivedStateFromProps(props, state) {
+    return {
+      code: JSON.stringify(props.layer, null, 2)
+    };
   }
 
   shouldComponentUpdate(nextProps, nextState) {

src/components/layers/LayerEditor.jsx

@@ -76,18 +76,18 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const additionalGroups = { ...this.state.editorGroups }
+  static getDerivedStateFromProps(props, state) {
+    const additionalGroups = { ...state.editorGroups }
 
-    layout[nextProps.layer.type].groups.forEach(group => {
+    layout[props.layer.type].groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
     })
 
-    this.setState({
+    return {
       editorGroups: additionalGroups
-    })
+    };
   }
 
   getChildContext () {

src/components/layers/LayerListItem.jsx

@@ -114,7 +114,7 @@ class LayerListItem extends React.Component {
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
+          action={this.props.visibility === 'visible' ? 'show' : 'hide'}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>

src/components/map/MapboxGlMap.jsx

@@ -83,17 +83,17 @@ export default class MapboxGlMap extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  updateMapFromProps(props) {
     if(!IS_SUPPORTED) return;
 
     if(!this.state.map) return
-    const metadata = nextProps.mapStyle.metadata || {}
+    const metadata = props.mapStyle.metadata || {}
     MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
 
-    if(!nextProps.inspectModeEnabled) {
+    if(!props.inspectModeEnabled) {
       //Mapbox GL now does diffing natively so we don't need to calculate
       //the necessary operations ourselves!
-      this.state.map.setStyle(nextProps.mapStyle, { diff: true})
+      this.state.map.setStyle(props.mapStyle, { diff: true})
     }
   }
 
@@ -102,6 +102,8 @@ export default class MapboxGlMap extends React.Component {
 
     const map = this.state.map;
 
+    this.updateMapFromProps(this.props);
+
     if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
       this.state.inspect.toggleInspector()
     }
@@ -109,8 +111,10 @@ export default class MapboxGlMap extends React.Component {
       this.state.inspect.render()
     }
 
-    map.showTileBoundaries = this.props.options.showTileBoundaries;
-    map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+    if (map) {
+      map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+    }
   }
 
   componentDidMount() {

src/components/map/OpenLayers3Map.jsx

@@ -27,10 +27,10 @@ class OpenLayers3Map extends React.Component {
     const styleFunc = olms.apply(this.map, newMapStyle)
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
     require.ensure(["ol", "ol-mapbox-style"], () => {
       if(!this.map) return
-      this.updateStyle(nextProps.mapStyle)
+      this.updateStyle(this.props.mapStyle)
     })
   }
 

src/components/modals/OpenModal.jsx

@@ -76,6 +76,8 @@ class OpenModal extends React.Component {
   onStyleSelect = (styleUrl) => {
     this.clearError();
 
+    let canceled;
+
     const activeRequest = fetch(styleUrl, {
       mode: 'cors',
       credentials: "same-origin"
@@ -84,6 +86,10 @@ class OpenModal extends React.Component {
       return response.json();
     })
     .then((body) => {
+      if(canceled) {
+        return;
+      }
+
       this.setState({
         activeRequest: null,
         activeRequestUrl: null
@@ -104,7 +110,11 @@ class OpenModal extends React.Component {
     })
 
     this.setState({
-      activeRequest: activeRequest,
+      activeRequest: {
+        abort: function() {
+          canceled = true;
+        }
+      },
       activeRequestUrl: styleUrl
     })
   }
@@ -165,49 +175,53 @@ class OpenModal extends React.Component {
       );
     }
 
-    return <Modal
-      data-wd-key="open-modal"
-      isOpen={this.props.isOpen}
-      onOpenToggle={() => this.onOpenToggle()}
-      title={'Open Style'}
-    >
-      {errorElement}
-      <section className="maputnik-modal-section">
-        <h2>Upload Style</h2>
-        <p>Upload a JSON style from your computer.</p>
-        <FileReaderInput onChange={this.onUpload} tabIndex="-1">
-          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
-        </FileReaderInput>
-      </section>
+    return  (
+      <div>
+        <Modal
+          data-wd-key="open-modal"
+          isOpen={this.props.isOpen}
+          onOpenToggle={() => this.onOpenToggle()}
+          title={'Open Style'}
+        >
+          {errorElement}
+          <section className="maputnik-modal-section">
+            <h2>Upload Style</h2>
+            <p>Upload a JSON style from your computer.</p>
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+              <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+            </FileReaderInput>
+          </section>
 
-      <section className="maputnik-modal-section">
-        <h2>Load from URL</h2>
-        <p>
-          Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
-        </p>
-        <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
-        <div>
-          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
-        </div>
-      </section>
+          <section className="maputnik-modal-section">
+            <h2>Load from URL</h2>
+            <p>
+              Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+            </p>
+            <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
+            <div>
+              <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
+            </div>
+          </section>
 
-      <section className="maputnik-modal-section maputnik-modal-section--shrink">
-        <h2>Gallery Styles</h2>
-        <p>
-          Open one of the publicly available styles to start from.
-        </p>
-        <div className="maputnik-style-gallery-container">
-        {styleOptions}
-        </div>
-      </section>
+          <section className="maputnik-modal-section maputnik-modal-section--shrink">
+            <h2>Gallery Styles</h2>
+            <p>
+              Open one of the publicly available styles to start from.
+            </p>
+            <div className="maputnik-style-gallery-container">
+            {styleOptions}
+            </div>
+          </section>
+        </Modal>
 
-      <LoadingModal
-        isOpen={!!this.state.activeRequest}
-        title={'Loading style'}
-        onCancel={(e) => this.onCancelActiveRequest(e)}
-        message={"Loading: "+this.state.activeRequestUrl}
-      />
-    </Modal>
+        <LoadingModal
+          isOpen={!!this.state.activeRequest}
+          title={'Loading style'}
+          onCancel={(e) => this.onCancelActiveRequest(e)}
+          message={"Loading: "+this.state.activeRequestUrl}
+        />
+      </div>
+    )
   }
 }
 

src/config/styles.json

@@ -34,25 +34,6 @@
     "title": "Empty Style",
     "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
     "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
-  },
-  {
-    "id": "mapbox-satellite",
-    "title": "Mapbox Satellite",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/satellite-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-satellite.png"
-  },
-  {
-    "id": "mapbox-bright",
-    "title": "Mapbox Bright",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/bright-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-bright.png"
-  },
-  {
-    "id": "mapbox-basic",
-    "title": "Mapbox Basic",
-    "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/basic-v9.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-basic.png"
-  },
   {
     "id": "os-zoomstack-outdoor",
     "title": "Zoomstack Outdoor",

src/config/tilesets.json

@@ -1,9 +1,4 @@
 {
-  "mapbox-streets": {
-    "type": "vector",
-    "url": "mapbox://mapbox.mapbox-streets-v7",
-    "title": "Mapbox Streets"
-  },
   "openmaptiles": {
     "type": "vector",
     "url": "https://free.tilehosting.com/data/v3.json?key={key}",

src/libs/style.js

@@ -102,9 +102,12 @@ function replaceAccessTokens(mapStyle, opts={}) {
   })
 
   if (mapStyle.glyphs && mapStyle.glyphs.match(/\.tilehosting\.com/)) {
-    changedStyle = {
-      ...changedStyle,
-      glyphs: mapStyle.glyphs.replace('{key}', getAccessToken("openmaptiles", mapStyle, opts))
+    const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
+    if (newAccessToken) {
+      changedStyle = {
+        ...changedStyle,
+        glyphs: mapStyle.glyphs.replace('{key}', newAccessToken)
+      }
     }
   }
 

test/functional/modals/index.js

@@ -171,7 +171,7 @@ describe("modals", function() {
       assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
     })
 
-    it("style renderer", function() {
+    it.skip("style renderer", function() {
       var selector = wd.$("modal-settings.maputnik:renderer");
       browser.selectByValue(selector, "ol3");
       browser.click(wd.$("modal-settings.name"))

test/functional/util/webdriverio-ext.js

@@ -46,10 +46,10 @@ try {
   browser.addCommand('flushReactUpdates', function() {
     browser.executeAsync(function(done) {
       // For any events to propogate
-      setImmediate(function() {
+      setTimeout(function() {
         // For the DOM to be updated.
-        setImmediate(done);
-      })
+        setTimeout(done, 0);
+      }, 0)
     })
   })