From 563a78ed42d2909838953fb1e528263517b6bf4e Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 15 Oct 2019 17:34:36 +0100 Subject: [PATCH 1/7] Moved away from react-codemirror2 to interacting with codemirror directly. --- src/components/layers/JSONEditor.jsx | 97 ++++++++++++++++++++-------- 1 file changed, 69 insertions(+), 28 deletions(-) diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 2f01b824..466c8652 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/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' @@ -25,36 +25,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() { @@ -69,12 +115,7 @@ class JSONEditor extends React.Component { scrollbarStyle: "null", } - return this.onCodeUpdate(value)} - onFocusChange={focused => focused ? true : this.resetValue()} - options={codeMirrorOptions} - /> + return
this._el = el} /> } } From 22b6a4a2bfec1985ceee1e262dd95e34439bb13d Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 06:46:30 +0100 Subject: [PATCH 2/7] Added max-width to allow overfow scroll on JSONEditor --- src/components/layers/JSONEditor.jsx | 5 ++++- src/styles/_codemirror.scss | 3 +++ src/styles/_react-codemirror.scss | 3 --- src/styles/index.scss | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 src/styles/_codemirror.scss delete mode 100644 src/styles/_react-codemirror.scss diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 466c8652..310ed137 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -115,7 +115,10 @@ class JSONEditor extends React.Component { scrollbarStyle: "null", } - return
this._el = el} /> + return
this._el = el} + /> } } diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss new file mode 100644 index 00000000..85d7aa84 --- /dev/null +++ b/src/styles/_codemirror.scss @@ -0,0 +1,3 @@ +.codemirror-container { + max-width: 100%; +} diff --git a/src/styles/_react-codemirror.scss b/src/styles/_react-codemirror.scss deleted file mode 100644 index c054ca2f..00000000 --- a/src/styles/_react-codemirror.scss +++ /dev/null @@ -1,3 +0,0 @@ -.react-codemirror2 { - max-width: 100%; -} diff --git a/src/styles/index.scss b/src/styles/index.scss index b27341de..bfef57f0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -38,7 +38,7 @@ $toolbar-offset: 0; @import 'popup'; @import 'map'; @import 'react-collapse'; -@import 'react-codemirror'; +@import 'codemirror'; /** * Hacks for webdriverio isVisibleWithinViewport From ef23f01e676f74bbac691ba76a9405c8c353040f Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 06:49:11 +0100 Subject: [PATCH 3/7] Removed react-codemirror2 as we no longer use it --- package-lock.json | 5 ----- package.json | 1 - 2 files changed, 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4599d8c5..ecc57ecc 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b7d9a6b1..4a9f54fa 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,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", From eb8686325c878ffcbaba3f08441b4107d8e16104 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 08:13:37 +0100 Subject: [PATCH 4/7] Fixed typo in export. --- src/components/inputs/EnumInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/inputs/EnumInput.jsx b/src/components/inputs/EnumInput.jsx index 0c6039cc..e7041104 100644 --- a/src/components/inputs/EnumInput.jsx +++ b/src/components/inputs/EnumInput.jsx @@ -42,4 +42,4 @@ class EnumInput extends React.Component { } } -export default StringInput +export default EnumInput From c27deefdef8bf66dbbc5d2d0a67d0912d9ab7fd9 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 09:56:26 +0100 Subject: [PATCH 5/7] Added profiling build to CI --- .circleci/config.yml | 1 + config/webpack.profiling.config.js | 20 ++++++++++++++++++++ package.json | 1 + 3 files changed, 22 insertions(+) create mode 100644 config/webpack.profiling.config.js diff --git a/.circleci/config.yml b/.circleci/config.yml index 27bf9933..2328ded7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -18,6 +18,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 - store_artifacts: diff --git a/config/webpack.profiling.config.js b/config/webpack.profiling.config.js new file mode 100644 index 00000000..84c4da23 --- /dev/null +++ b/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', + } + } +}; diff --git a/package.json b/package.json index b7d9a6b1..1e6045fe 100644 --- a/package.json +++ b/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", From 26de95a263bf1150667ded37b9cd5b145dd66deb Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 16 Oct 2019 15:34:24 +0200 Subject: [PATCH 6/7] Fix the layer type test in LayerEditor component `LayerSourceLayerBlock` was always included --- src/components/layers/LayerEditor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 39c862d9..ed161163 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/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 && Date: Sat, 19 Oct 2019 12:33:54 +0100 Subject: [PATCH 7/7] Moved profiling to wdio-steps --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 2328ded7..0948946e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -18,7 +18,6 @@ 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 - store_artifacts: @@ -42,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