Merge remote-tracking branch 'upstream/master' into feature/issue-559-add-raw-geojson-as-source

.circleci/config.yml

@@ -41,6 +41,7 @@ templates:
 
     - run: mkdir -p /tmp/artifacts/logs
     - run: npm run build
+    - run: npm run profiling-build
     - run: npm run lint
     - run: npm run lint-styles
     - run: DOCKER_HOST=localhost npm test

config/webpack.profiling.config.js

@@ -0,0 +1,20 @@
+const webpackProdConfig = require('./webpack.production.config');
+const artifacts = require("../test/artifacts");
+
+const OUTPATH = artifacts.pathSync("/profiling");
+
+module.exports = {
+  ...webpackProdConfig,
+  output: {
+    ...webpackProdConfig.output,
+    path: OUTPATH,
+  },
+  resolve: {
+    ...webpackProdConfig.resolve,
+    alias: {
+      ...webpackProdConfig.resolve.alias,
+      'react-dom$': 'react-dom/profiling',
+      'scheduler/tracing': 'scheduler/tracing-profiling',
+    }
+  }
+};

package-lock.json

@@ -9069,11 +9069,6 @@
         "prop-types": "^15.5.10"
       }
     },
-    "react-codemirror2": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.0.tgz",
-      "integrity": "sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag=="
-    },
     "react-collapse": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz",

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
     "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
+    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress --profile --colors",
     "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
     "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
     "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
@@ -47,7 +48,6 @@
     "react-aria-modal": "^4.0.0",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
-    "react-codemirror2": "^6.0.0",
     "react-collapse": "^4.0.3",
     "react-color": "^2.17.3",
     "react-dom": "^16.10.2",

src/components/inputs/EnumInput.jsx

@@ -42,4 +42,4 @@ class EnumInput extends React.Component {
   }
 }
 
-export default StringInput
+export default EnumInput

src/components/layers/JSONEditor.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import CodeMirror from 'codemirror';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -26,36 +26,82 @@ class JSONEditor extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      code: JSON.stringify(props.layer, null, 2)
-    }
+      isEditing: false,
+      prevValue: this.getValue(),
+    };
+  }
+
+  getValue () {
+    return JSON.stringify(this.props.layer, null, 2);
+  }
+
+  componentDidMount () {
+    this._doc = CodeMirror(this._el, {
+      value: this.getValue(),
+      mode: {
+        name: "javascript",
+        json: true
+      },
+      tabSize: 2,
+      theme: 'maputnik',
+      viewportMargin: Infinity,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
+      scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onFocus = () => {
+    this.setState({
+      isEditing: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isEditing: false
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.layer !== this.props.layer) {
-      this.setState({
-        code: JSON.stringify(this.props.layer, null, 2)
-      })
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+      this._cancelNextChange = true;
+      this._doc.setValue(
+        this.getValue(),
+      )
     }
   }
 
-  onCodeUpdate(newCode) {
-    try {
-      const parsedLayer = JSON.parse(newCode)
-      this.props.onChange(parsedLayer)
-    } catch(err) {
-      console.warn(err)
-    } finally {
-      this.setState({
-        code: newCode
-      })
+  onChange = (e) => {
+    if (this._cancelNextChange) {
+      this._cancelNextChange = false;
+      return;
+    }
+    const newCode = this._doc.getValue();
+
+    if (this.state.prevValue !== newCode) {
+      try {
+        const parsedLayer = JSON.parse(newCode)
+        this.props.onChange(parsedLayer)
+      } catch(err) {
+        console.warn(err)
+      }
     }
-  }
 
-  resetValue() {
-    console.log('reset')
     this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
-    })
+      prevValue: newCode,
+    });
   }
 
   render() {
@@ -75,14 +121,11 @@ class JSONEditor extends React.Component {
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div className="CodeMirror-wrapper" style={style}>
-      <CodeMirror
-        value={this.state.code}
-        onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
-        onFocusChange={focused => focused ? true : this.resetValue()}
-        options={codeMirrorOptions}
-      />
-    </div>
+    return <div
+      className="codemirror-container"
+      ref={(el) => this._el = el}
+      style={style}
+    />
   }
 }
 

src/components/layers/LayerEditor.jsx

@@ -141,7 +141,7 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source', v)}
         />
         }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
         <LayerSourceLayerBlock
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}

src/styles/_codemirror.scss

@@ -2,7 +2,8 @@
   z-index: 2000 !important;
 }
 
-.CodeMirror-wrapper {
+.codemirror-container {
+  max-width: 100%;
   position: relative;
   overflow: auto;
 }

src/styles/_react-codemirror.scss

@@ -1,3 +0,0 @@
-.react-codemirror2 {
-  max-width: 100%;
-}

src/styles/index.scss

@@ -39,7 +39,7 @@ $toolbar-offset: 0;
 @import 'map';
 @import 'codemirror';
 @import 'react-collapse';
-@import 'react-codemirror';
+@import 'codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport