From 5433a4193ba817dfa8da8313f980e7d9780f6331 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 22 Mar 2017 10:36:20 +0000 Subject: [PATCH 001/144] Move from mapbox-gl-style-spec -> mapbox-gl. --- package.json | 3 +-- src/components/App.jsx | 6 +++--- src/components/filter/FilterEditor.jsx | 2 +- src/components/layers/LayerIdBlock.jsx | 2 +- src/components/layers/LayerSourceBlock.jsx | 2 +- src/components/layers/LayerSourceLayerBlock.jsx | 2 +- src/components/layers/LayerTypeBlock.jsx | 2 +- src/components/layers/MaxZoomBlock.jsx | 2 +- src/components/layers/MinZoomBlock.jsx | 2 +- src/components/map/MapboxGlMap.jsx | 2 +- src/components/modals/ExportModal.jsx | 4 ++-- src/components/modals/SettingsModal.jsx | 2 +- src/components/modals/SourcesModal.jsx | 2 +- src/components/sources/SourceTypeEditor.jsx | 2 +- src/libs/diffmessage.js | 2 +- src/libs/filterops.js | 2 +- src/libs/layer.js | 2 +- src/libs/style.js | 4 ++-- webpack.production.config.js | 2 -- 19 files changed, 22 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 644250ac..1a34ac91 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,8 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", - "mapbox-gl": "^0.33.0", + "mapbox-gl": "^0.34.0", "mapbox-gl-inspect": "^1.2.2", - "mapbox-gl-style-spec": "^8.11.0", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", diff --git a/src/components/App.jsx b/src/components/App.jsx index ba10485b..cccd958c 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -10,9 +10,9 @@ import AppLayout from './AppLayout' import MessagePanel from './MessagePanel' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' -import validateStyleMin from 'mapbox-gl-style-spec/lib/validate_style.min' -import formatStyle from 'mapbox-gl-style-spec/lib/format' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import validateStyleMin from 'mapbox-gl/src/style-spec/validate_style.min' +import formatStyle from 'mapbox-gl/src/style-spec/format' import style from '../libs/style.js' import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen' import { undoMessages, redoMessages } from '../libs/diffmessage' diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index fcfe7d8d..0c8dbace 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -1,7 +1,7 @@ import React from 'react' import { combiningFilterOps } from '../../libs/filterops.js' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import DocLabel from '../fields/DocLabel' import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx index 7cdc9d26..7404c0e7 100644 --- a/src/components/layers/LayerIdBlock.jsx +++ b/src/components/layers/LayerIdBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx index ea60b8a0..2b3400fd 100644 --- a/src/components/layers/LayerSourceBlock.jsx +++ b/src/components/layers/LayerSourceBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx index 01b05a92..f1b24eab 100644 --- a/src/components/layers/LayerSourceLayerBlock.jsx +++ b/src/components/layers/LayerSourceLayerBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx index 82869004..58176898 100644 --- a/src/components/layers/LayerTypeBlock.jsx +++ b/src/components/layers/LayerTypeBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx index ecf26467..16ebb9fc 100644 --- a/src/components/layers/MaxZoomBlock.jsx +++ b/src/components/layers/MaxZoomBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index 9585d67f..aa2323cf 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 729585ed..2cdb6d0c 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -4,7 +4,7 @@ import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js' import MapboxInspect from 'mapbox-gl-inspect' import FeatureLayerPopup from './FeatureLayerPopup' import FeaturePropertyPopup from './FeaturePropertyPopup' -import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' +import validateColor from 'mapbox-gl/src/style-spec/validate/validate_color' import style from '../../libs/style.js' import tokens from '../../config/tokens.json' import colors from 'mapbox-gl-inspect/lib/colors' diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index 0a065714..4a330233 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -1,7 +1,7 @@ import React from 'react' import { saveAs } from 'file-saver' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' @@ -10,7 +10,7 @@ import Button from '../Button' import Modal from './Modal' import MdFileDownload from 'react-icons/lib/md/file-download' import style from '../../libs/style.js' -import formatStyle from 'mapbox-gl-style-spec/lib/format' +import formatStyle from 'mapbox-gl/src/style-spec/format' import GitHub from 'github-api' diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 66967c25..f3de03b3 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index ba4d8419..0e5058a4 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/src/components/modals/SourcesModal.jsx @@ -1,5 +1,5 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import Modal from './Modal' import Button from '../Button' import InputBlock from '../inputs/InputBlock' diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index 344e8823..fc37e3e2 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -1,5 +1,5 @@ import React from 'react' -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import NumberInput from '../inputs/NumberInput' diff --git a/src/libs/diffmessage.js b/src/libs/diffmessage.js index 502c59e8..80b26885 100644 --- a/src/libs/diffmessage.js +++ b/src/libs/diffmessage.js @@ -1,4 +1,4 @@ -import diffStyles from 'mapbox-gl-style-spec/lib/diff' +import diffStyles from 'mapbox-gl/src/style-spec/diff' export function diffMessages(beforeStyle, afterStyle) { const changes = diffStyles(beforeStyle, afterStyle) diff --git a/src/libs/filterops.js b/src/libs/filterops.js index 65984fdc..da77be89 100644 --- a/src/libs/filterops.js +++ b/src/libs/filterops.js @@ -1,4 +1,4 @@ -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' export const combiningFilterOps = ['all', 'any', 'none'] export const setFilterOps = ['in', '!in'] export const otherFilterOps = Object diff --git a/src/libs/layer.js b/src/libs/layer.js index f018c464..f6418c57 100644 --- a/src/libs/layer.js +++ b/src/libs/layer.js @@ -1,4 +1,4 @@ -import GlSpec from 'mapbox-gl-style-spec/reference/latest.js' +import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' export function changeType(layer, newType) { const changedPaintProps = { ...layer.paint } diff --git a/src/libs/style.js b/src/libs/style.js index 3f012d2b..0fd0c1f7 100644 --- a/src/libs/style.js +++ b/src/libs/style.js @@ -1,6 +1,6 @@ import React from 'react'; -import spec from 'mapbox-gl-style-spec/reference/latest.min.js' -import derefLayers from 'mapbox-gl-style-spec/lib/deref' +import spec from 'mapbox-gl/src/style-spec/reference/latest' +import derefLayers from 'mapbox-gl/src/style-spec/deref' import tokens from '../config/tokens.json' // Empty style is always used if no style could be restored or fetched diff --git a/webpack.production.config.js b/webpack.production.config.js index 185fb9a2..0ad94107 100644 --- a/webpack.production.config.js +++ b/webpack.production.config.js @@ -12,8 +12,6 @@ module.exports = { vendor: [ 'file-saver', 'mapbox-gl/dist/mapbox-gl.js', - //TODO: Build failure because cannot resolve migrations file - //"mapbox-gl-style-spec", "lodash.clonedeep", "lodash.throttle", 'color', From a76ce64e1d2463041a7bbcd620d417bf389baa21 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 22 Mar 2017 10:54:11 +0000 Subject: [PATCH 002/144] Temp updated to fix peer dependency issue --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1a34ac91..b7570f60 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", "mapbox-gl": "^0.34.0", - "mapbox-gl-inspect": "^1.2.2", + "mapbox-gl-inspect": "orangemug/mapbox-gl-inspect#fix/update-peer-dep", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", From a112c29c21687fffb9f9eaca53f9a074ad077d49 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 4 Apr 2017 08:55:45 +0100 Subject: [PATCH 003/144] Moved mapbox-gl-inspect to point at lukasmartinelli/mapbox-gl-inspect repo. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b7570f60..6137fd69 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", "mapbox-gl": "^0.34.0", - "mapbox-gl-inspect": "orangemug/mapbox-gl-inspect#fix/update-peer-dep", + "mapbox-gl-inspect": "lukasmartinelli/mapbox-gl-inspect#7108dab80f", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", From 1e429550c676f8c1abd6fbe936c3812355f25289 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 4 Apr 2017 19:18:41 +0100 Subject: [PATCH 004/144] Moved to mapbox-gl-inspect^1.2.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6137fd69..2380ebb2 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", "mapbox-gl": "^0.34.0", - "mapbox-gl-inspect": "lukasmartinelli/mapbox-gl-inspect#7108dab80f", + "mapbox-gl-inspect": "^1.2.3", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", From c3174a0c725ac7ddcc1e9b611a5e0b4a3ffb2091 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 10 Apr 2017 13:29:57 +0100 Subject: [PATCH 005/144] Moved to using @mapbox/mapbox-gl-style-spec --- config/webpack.loaders.js | 2 +- package.json | 3 ++- src/components/App.jsx | 8 +++----- src/components/filter/FilterEditor.jsx | 4 ++-- src/components/layers/LayerIdBlock.jsx | 4 ++-- src/components/layers/LayerSourceBlock.jsx | 4 ++-- src/components/layers/LayerSourceLayerBlock.jsx | 4 ++-- src/components/layers/LayerTypeBlock.jsx | 4 ++-- src/components/layers/MaxZoomBlock.jsx | 10 +++++----- src/components/layers/MinZoomBlock.jsx | 10 +++++----- src/components/map/MapboxGlMap.jsx | 3 +-- src/components/modals/ExportModal.jsx | 9 ++++----- src/components/modals/SettingsModal.jsx | 8 ++++---- src/components/modals/SourcesModal.jsx | 4 ++-- src/components/sources/SourceTypeEditor.jsx | 12 ++++++------ src/libs/diffmessage.js | 4 ++-- src/libs/filterops.js | 4 ++-- src/libs/layer.js | 6 +++--- src/libs/style.js | 5 ++--- 19 files changed, 52 insertions(+), 56 deletions(-) diff --git a/config/webpack.loaders.js b/config/webpack.loaders.js index 438c3b82..7d9e5289 100644 --- a/config/webpack.loaders.js +++ b/config/webpack.loaders.js @@ -6,7 +6,7 @@ module.exports = [ }, { test: /\.jsx?$/, - exclude: /(node_modules|bower_components|public)/, + exclude: /(.*node_modules(?!\/@mapbox\/mapbox-gl-style-spec)|bower_components|public)/, loader: 'babel', query: { presets: ['es2015', 'react'], diff --git a/package.json b/package.json index 5ddc740a..b2dd2dc3 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "license": "MIT", "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { + "@mapbox/mapbox-gl-style-spec": "^8.11.0", "classnames": "^2.2.5", "codemirror": "^5.18.2", "color": "^1.0.3", @@ -30,7 +31,7 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", - "mapbox-gl": "^0.34.0", + "mapbox-gl": "^0.35.0", "mapbox-gl-inspect": "^1.2.3", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", diff --git a/src/components/App.jsx b/src/components/App.jsx index cccd958c..4f0f68c7 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -10,9 +10,7 @@ import AppLayout from './AppLayout' import MessagePanel from './MessagePanel' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' -import validateStyleMin from 'mapbox-gl/src/style-spec/validate_style.min' -import formatStyle from 'mapbox-gl/src/style-spec/format' +import styleSpec from '@mapbox/mapbox-gl-style-spec' import style from '../libs/style.js' import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen' import { undoMessages, redoMessages } from '../libs/diffmessage' @@ -65,7 +63,7 @@ export default class App extends React.Component { sources: {}, vectorLayers: {}, inspectModeEnabled: false, - spec: GlSpec, + spec: styleSpec.latest, } this.layerWatcher = new LayerWatcher({ @@ -115,7 +113,7 @@ export default class App extends React.Component { this.updateIcons(newStyle.sprite) } - const errors = validateStyleMin(newStyle, GlSpec) + const errors = styleSpec.validate(newStyle, styleSpec.latest) if(errors.length === 0) { this.revisionStore.addRevision(newStyle) if(save) this.saveStyle(newStyle) diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index 0c8dbace..8641548e 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -1,7 +1,7 @@ import React from 'react' import { combiningFilterOps } from '../../libs/filterops.js' -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import styleSpec from '@mapbox/mapbox-gl-style-spec' import DocLabel from '../fields/DocLabel' import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' @@ -91,7 +91,7 @@ export default class CombiningFilterEditor extends React.Component {
+ return + return + return + return + return } diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index aa2323cf..c4a7f360 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' @@ -11,13 +11,13 @@ class MinZoomBlock extends React.Component { } render() { - return + return } diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 2cdb6d0c..bc2950e0 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -1,10 +1,9 @@ import React from 'react' import ReactDOM from 'react-dom' -import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js' +import MapboxGl from 'mapbox-gl' import MapboxInspect from 'mapbox-gl-inspect' import FeatureLayerPopup from './FeatureLayerPopup' import FeaturePropertyPopup from './FeaturePropertyPopup' -import validateColor from 'mapbox-gl/src/style-spec/validate/validate_color' import style from '../../libs/style.js' import tokens from '../../config/tokens.json' import colors from 'mapbox-gl-inspect/lib/colors' diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index 4a330233..b6db301d 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -1,7 +1,7 @@ import React from 'react' import { saveAs } from 'file-saver' -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' @@ -10,7 +10,6 @@ import Button from '../Button' import Modal from './Modal' import MdFileDownload from 'react-icons/lib/md/file-download' import style from '../../libs/style.js' -import formatStyle from 'mapbox-gl/src/style-spec/format' import GitHub from 'github-api' @@ -44,8 +43,8 @@ class Gist extends React.Component { const preview = this.state.preview && (this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']; const mapStyleStr = preview ? - formatStyle(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) : - formatStyle(stripAccessTokens(this.props.mapStyle)); + styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) : + styleSpec.format(stripAccessTokens(this.props.mapStyle)); const styleTitle = this.props.mapStyle.name || 'Style'; const htmlStr = ` @@ -197,7 +196,7 @@ class ExportModal extends React.Component { } downloadStyle() { - const blob = new Blob([formatStyle(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"}); + const blob = new Blob([styleSpec.format(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"}); saveAs(blob, this.props.mapStyle.id + ".json"); } diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index f3de03b3..d3bc5b96 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -1,6 +1,6 @@ import React from 'react' -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' @@ -46,7 +46,7 @@ class SettingsModal extends React.Component { title={'Style Settings'} >
- + - + - + this.setState({ sourceId: v})} /> - + + return this.props.onChange({ @@ -42,7 +42,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 + return {this.renderTileUrls()} - + this.props.onChange({ @@ -63,7 +63,7 @@ class TileURLSourceEditor extends React.Component { })} /> - + this.props.onChange({ @@ -84,7 +84,7 @@ class GeoJSONSourceEditor extends React.Component { } render() { - return + return this.props.onChange({ diff --git a/src/libs/diffmessage.js b/src/libs/diffmessage.js index 80b26885..a4c01cdd 100644 --- a/src/libs/diffmessage.js +++ b/src/libs/diffmessage.js @@ -1,7 +1,7 @@ -import diffStyles from 'mapbox-gl/src/style-spec/diff' +import styleSpec from '@mapbox/mapbox-gl-style-spec' export function diffMessages(beforeStyle, afterStyle) { - const changes = diffStyles(beforeStyle, afterStyle) + const changes = styleSpec.diff(beforeStyle, afterStyle) return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' ')) } diff --git a/src/libs/filterops.js b/src/libs/filterops.js index da77be89..892e224d 100644 --- a/src/libs/filterops.js +++ b/src/libs/filterops.js @@ -1,6 +1,6 @@ -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import styleSpec from '@mapbox/mapbox-gl-style-spec' export const combiningFilterOps = ['all', 'any', 'none'] export const setFilterOps = ['in', '!in'] export const otherFilterOps = Object - .keys(GlSpec.filter_operator.values) + .keys(styleSpec.latest.filter_operator.values) .filter(op => combiningFilterOps.indexOf(op) < 0) diff --git a/src/libs/layer.js b/src/libs/layer.js index f6418c57..d6ee928c 100644 --- a/src/libs/layer.js +++ b/src/libs/layer.js @@ -1,16 +1,16 @@ -import GlSpec from 'mapbox-gl/src/style-spec/reference/latest' +import styleSpec from '@mapbox/mapbox-gl-style-spec' export function changeType(layer, newType) { const changedPaintProps = { ...layer.paint } Object.keys(changedPaintProps).forEach(propertyName => { - if(!(propertyName in GlSpec['paint_' + newType])) { + if(!(propertyName in styleSpec.latest['paint_' + newType])) { delete changedPaintProps[propertyName] } }) const changedLayoutProps = { ...layer.layout } Object.keys(changedLayoutProps).forEach(propertyName => { - if(!(propertyName in GlSpec['layout_' + newType])) { + if(!(propertyName in styleSpec.latest['layout_' + newType])) { delete changedLayoutProps[propertyName] } }) diff --git a/src/libs/style.js b/src/libs/style.js index fefa987d..cf2cff65 100644 --- a/src/libs/style.js +++ b/src/libs/style.js @@ -1,6 +1,5 @@ import React from 'react'; -import spec from 'mapbox-gl/src/style-spec/reference/latest' -import derefLayers from 'mapbox-gl/src/style-spec/deref' +import deref from '@mapbox/mapbox-gl-style-spec/deref' import tokens from '../config/tokens.json' // Empty style is always used if no style could be restored or fetched @@ -37,7 +36,7 @@ function ensureHasNoInteractive(style) { function ensureHasNoRefs(style) { const derefedStyle = { ...style, - layers: derefLayers(style.layers) + layers: deref(style.layers) } return derefedStyle } From d8e84d67da5515bdd0133adcb14b61ba61672892 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 10 Apr 2017 13:58:08 +0100 Subject: [PATCH 006/144] Revert to mapbox-gl 0.34 because of mapbox-gl-inspect. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b2dd2dc3..1d6ae52b 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", - "mapbox-gl": "^0.35.0", + "mapbox-gl": "^0.34.0", "mapbox-gl-inspect": "^1.2.3", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", From 45942e604bb88b75f014cc263e71266b08a21206 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 13 Apr 2017 08:24:49 +0100 Subject: [PATCH 007/144] Updated @mapbox/mapbox-gl-style-spec to v9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1d6ae52b..65dccd89 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "license": "MIT", "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { - "@mapbox/mapbox-gl-style-spec": "^8.11.0", + "@mapbox/mapbox-gl-style-spec": "^9.0.0", "classnames": "^2.2.5", "codemirror": "^5.18.2", "color": "^1.0.3", From df04064e819c921e0a4ca4f50df8e94f4e9e90bf Mon Sep 17 00:00:00 2001 From: Torben Barsballe Date: Mon, 29 May 2017 13:15:25 -0700 Subject: [PATCH 008/144] Improved OpenLayers support Added support for gejson sources Fix toVectorLayer map callback (this was undefined) Improved ol css; show map controls --- src/components/map/OpenLayers3Map.jsx | 37 +++++++++++++++++++-------- src/styles/_map.scss | 22 ++++++++++++++++ src/styles/index.scss | 1 + 3 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 src/styles/_map.scss diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index 28fa73af..650b90f2 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/src/components/map/OpenLayers3Map.jsx @@ -2,6 +2,7 @@ import React from 'react' import style from '../../libs/style.js' import isEqual from 'lodash.isequal' import { loadJSON } from '../../libs/urlopen' +import 'openlayers/dist/ol.css' function suitableVectorSource(mapStyle) { const sources = Object.keys(mapStyle.sources) @@ -11,7 +12,7 @@ function suitableVectorSource(mapStyle) { source: mapStyle.sources[sourceId] } }) - .filter(({source}) => source.type === 'vector') + .filter(({source}) => (source.type === 'vector' || source.type === 'geojson')) return sources[0] } @@ -28,12 +29,25 @@ function toVectorLayer(source, tilegrid, cb) { }) } - if(!source.tiles) { - sourceFromTileJSON(source.url, tileSource => { - cb(newMVTLayer(tileSource.tiles[0])) + function newGeoJSONLayer(sourceUrl) { + const ol = require('openlayers') + return new ol.layer.Vector({ + source: new ol.source.Vector({ + format: new ol.format.GeoJSON(), + url: sourceUrl + }) }) - } else { - cb(newMVTLayer(source.tiles[0])) + } + if (source.type === 'vector') { + if(!source.tiles) { + sourceFromTileJSON(source.url, tileSource => { + cb(newMVTLayer(tileSource.tiles[0])) + }) + } else { + cb(newMVTLayer(source.tiles[0])) + } + } else if (source.type === 'geojson') { + cb(newGeoJSONLayer(source.data)) } } @@ -91,10 +105,11 @@ class OpenLayers3Map extends React.Component { } if(!this.layer) { + var self = this toVectorLayer(newSource.source, this.tilegrid, vectorLayer => { - this.layer = vectorLayer - this.map.addLayer(this.layer) - setStyleFunc(this.map, this.layer) + self.layer = vectorLayer + self.map.addLayer(self.layer) + setStyleFunc(self.map, self.layer) }) } else { setStyleFunc(this.map, this.layer) @@ -140,10 +155,10 @@ class OpenLayers3Map extends React.Component { ref={x => this.container = x} style={{ position: "fixed", - top: 0, + top: 40, right: 0, bottom: 0, - height: "100%", + height: 'calc(100% - 40px)', width: "75%", backgroundColor: '#fff', ...this.props.style, diff --git a/src/styles/_map.scss b/src/styles/_map.scss new file mode 100644 index 00000000..951c654a --- /dev/null +++ b/src/styles/_map.scss @@ -0,0 +1,22 @@ +//OPENLAYERS +.maputnik-layout { + .ol-zoom { + top: 10px; + right: 10px; + left: auto; + } + + .ol-attribution.ol-logo-only { + height: 20px; + } + + .ol-control { + button { + background-color: rgb(28, 31, 36); + } + + button:hover { + background-color: rgb(86, 83, 83); + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 16a9740a..1472bf67 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -35,3 +35,4 @@ $toolbar-offset: 0; @import 'filtereditor'; @import 'zoomproperty'; @import 'popup'; +@import 'map'; From 2825dd7e04573bca554c41e00318cc96f7ae6ef1 Mon Sep 17 00:00:00 2001 From: Torben Barsballe Date: Thu, 25 May 2017 15:56:00 -0700 Subject: [PATCH 009/144] Improve autocomplete styling Use "position: absolute" so that autocomplete follows the field when you scroll. --- src/styles/_input.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 11bf1971..093297a6 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -122,7 +122,8 @@ &-menu { border: none; padding: 2px 0; - position: fixed; + margin-right: 10px; + position: absolute; overflow: auto; max-height: 50%; background: $color-gray; From 2adb1bf9172ebb01bed30b062aa1016ff37f0869 Mon Sep 17 00:00:00 2001 From: Torben Barsballe Date: Thu, 25 May 2017 13:00:34 -0700 Subject: [PATCH 010/144] Add DynamicArrayInput for handling variable-length array fields --- src/components/fields/SpecField.jsx | 18 ++-- src/components/inputs/DynamicArrayInput.jsx | 99 +++++++++++++++++++++ src/styles/_input.scss | 19 ++++ 3 files changed, 131 insertions(+), 5 deletions(-) create mode 100644 src/components/inputs/DynamicArrayInput.jsx diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx index 813f65ef..4ec17242 100644 --- a/src/components/fields/SpecField.jsx +++ b/src/components/fields/SpecField.jsx @@ -8,6 +8,7 @@ import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' import MultiButtonInput from '../inputs/MultiButtonInput' import ArrayInput from '../inputs/ArrayInput' +import DynamicArrayInput from '../inputs/DynamicArrayInput' import FontInput from '../inputs/FontInput' import IconInput from '../inputs/IconInput' import capitalize from 'lodash.capitalize' @@ -105,11 +106,18 @@ export default class SpecField extends React.Component { fonts={this.props.fieldSpec.values} /> } else { - return + if (this.props.fieldSpec.length) { + return + } else { + return + } } default: return null } diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx new file mode 100644 index 00000000..e43bc3bb --- /dev/null +++ b/src/components/inputs/DynamicArrayInput.jsx @@ -0,0 +1,99 @@ +import React from 'react' +import StringInput from './StringInput' +import NumberInput from './NumberInput' +import Button from '../Button' +import DeleteIcon from 'react-icons/lib/md/delete' +import DocLabel from '../fields/DocLabel' + + +class DynamicArrayInput extends React.Component { + static propTypes = { + value: React.PropTypes.array, + type: React.PropTypes.string, + default: React.PropTypes.array, + onChange: React.PropTypes.func, + } + + changeValue(idx, newValue) { + console.log(idx, newValue) + const values = this.values.slice(0) + values[idx] = newValue + this.props.onChange(values) + } + + get values() { + return this.props.value || this.props.default || [] + } + + addValue() { + const values = this.values.slice(0) + if (this.props.type === 'number') { + values.push(0) + } else { + values.push("") + } + + + this.props.onChange(values) + } + + deleteValue(valueIdx) { + const values = this.values.slice(0) + values.splice(valueIdx, 1) + + this.props.onChange(values) + } + + render() { + const inputs = this.values.map((v, i) => { + const deleteValueBtn= + const input = this.props.type === 'number' + ? + : + + return
+
+ {deleteValueBtn} +
+
+ {input} +
+
+ }) + + return
+ {inputs} + +
+ } +} + +function DeleteValueButton(props) { + return + } + +export default DynamicArrayInput diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 11bf1971..82ad5a50 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -52,6 +52,25 @@ > * { margin-bottom: $margin-3; } + + .maputnik-array-block { + .maputnik-array-block-action { + vertical-align: top; + display: inline-block; + width: 14%; + } + + .maputnik-array-block-content { + vertical-align: top; + display: inline-block; + width: 86%; + } + } + + .maputnik-array-add-value { + display: inline-block; + float: right; + } } // SELECT From b8205f4c387a129096f62927dab05358107171fa Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 22 Apr 2017 17:31:37 -0600 Subject: [PATCH 011/144] Close the "open" dialog after choosing a new style --- src/components/modals/OpenModal.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 0f333478..ef0556ca 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -68,6 +68,7 @@ class OpenModal extends React.Component { const mapStyle = style.ensureStyleValidity(JSON.parse(body)) console.log('Loaded style ', mapStyle.id) this.props.onStyleOpen(mapStyle) + this.onOpenToggle() } else { console.warn('Could not open the style URL', styleUrl) } @@ -94,6 +95,7 @@ class OpenModal extends React.Component { } mapStyle = style.ensureStyleValidity(mapStyle) this.props.onStyleOpen(mapStyle); + this.onOpenToggle(); } reader.onerror = e => console.log(e.target); } From a7df8afd6e09823fba70c877112f67d07e906192 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 22 Apr 2017 16:50:47 -0600 Subject: [PATCH 012/144] Animated loading indicator --- src/template.html | 66 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/src/template.html b/src/template.html index 1b750b69..94eceb44 100644 --- a/src/template.html +++ b/src/template.html @@ -4,8 +4,72 @@ <%= htmlWebpackPlugin.options.title %> + -
Loading...
+
+
Loading...
+
From b32d926b56fe7a7161320bbfe38480c44c837735 Mon Sep 17 00:00:00 2001 From: bartvde Date: Fri, 23 Jun 2017 15:47:15 +0200 Subject: [PATCH 013/144] Move babel config out of package.json --- .babelrc | 4 ++++ package.json | 9 --------- 2 files changed, 4 insertions(+), 9 deletions(-) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..47c9aceb --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015", "react"], + "plugins": ["transform-object-rest-spread"] +} diff --git a/package.json b/package.json index ebf64f77..5a709b45 100644 --- a/package.json +++ b/package.json @@ -53,15 +53,6 @@ "request": "^2.79.0", "url": "^0.11.0" }, - "babel": { - "presets": [ - "es2015", - "react" - ], - "plugins": [ - "transform-object-rest-spread" - ] - }, "jshintConfig": { "esversion": 6 }, From e4477db41362793f529b5fd1ffa639227fad94db Mon Sep 17 00:00:00 2001 From: bartvde Date: Fri, 23 Jun 2017 16:00:43 +0200 Subject: [PATCH 014/144] Prevent warning for ColorField --- src/components/fields/ColorField.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index 2d6d4249..a71aebc7 100644 --- a/src/components/fields/ColorField.jsx +++ b/src/components/fields/ColorField.jsx @@ -91,7 +91,7 @@ class ColorField extends React.Component {
var swatchStyle = { - "background-color": this.props.value + backgroundColor: this.props.value }; return
From 0edbfd89ffd049c8403475e9f25c5edd2b6a9ab5 Mon Sep 17 00:00:00 2001 From: bartvde Date: Mon, 26 Jun 2017 11:35:44 -0500 Subject: [PATCH 015/144] Add transform-class-properties plugin to babel config --- .babelrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index 47c9aceb..49d176dd 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { "presets": ["es2015", "react"], - "plugins": ["transform-object-rest-spread"] + "plugins": ["transform-object-rest-spread", "transform-class-properties"] } From abbce3e9d1321d25a809d34a021f55629e2e3403 Mon Sep 17 00:00:00 2001 From: bartvde Date: Mon, 26 Jun 2017 16:54:46 -0500 Subject: [PATCH 016/144] Make sure propTypes accept what gets passed in --- src/components/fields/SpecField.jsx | 1 + src/components/fields/ZoomSpecField.jsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx index 4ec17242..9f081444 100644 --- a/src/components/fields/SpecField.jsx +++ b/src/components/fields/SpecField.jsx @@ -43,6 +43,7 @@ export default class SpecField extends React.Component { React.PropTypes.string, React.PropTypes.number, React.PropTypes.array, + React.PropTypes.bool ]), /** Override the style of the field */ style: React.PropTypes.object, diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx index 42c838e8..9f8e755e 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/ZoomSpecField.jsx @@ -31,6 +31,7 @@ export default class ZoomSpecProperty extends React.Component { React.PropTypes.string, React.PropTypes.number, React.PropTypes.bool, + React.PropTypes.array ]), } From a3e3b9dfe3da2330ec2febe13fb531097af45e57 Mon Sep 17 00:00:00 2001 From: bartvde Date: Thu, 29 Jun 2017 10:20:24 -0500 Subject: [PATCH 017/144] Put key on the right element --- src/components/inputs/DynamicArrayInput.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx index e43bc3bb..1a864dd7 100644 --- a/src/components/inputs/DynamicArrayInput.jsx +++ b/src/components/inputs/DynamicArrayInput.jsx @@ -49,18 +49,17 @@ class DynamicArrayInput extends React.Component { const deleteValueBtn= const input = this.props.type === 'number' ? : return
From 53711966d2bbde333f8487e42810d4e5d28fbf68 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 6 Jul 2017 19:53:39 +0100 Subject: [PATCH 018/144] Added circleci build artifacts. --- circle.yml | 4 ++++ config/webpack.production.config.js | 10 +++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 circle.yml diff --git a/circle.yml b/circle.yml new file mode 100644 index 00000000..08d035da --- /dev/null +++ b/circle.yml @@ -0,0 +1,4 @@ +machine: + node: + version: 6 + diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index 9f5a5e10..66d582ca 100644 --- a/config/webpack.production.config.js +++ b/config/webpack.production.config.js @@ -6,6 +6,14 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var WebpackCleanupPlugin = require('webpack-cleanup-plugin'); +var OUTPATH; +if(process.env.CIRCLE_ARTIFACTS) { + OUTPATH = path.join(process.env.CIRCLE_ARTIFACTS, "build"); +} +else { + OUTPATH = path.join(__dirname, '..', 'public'); +} + module.exports = { entry: { app: './src/index.jsx', @@ -32,7 +40,7 @@ module.exports = { ] }, output: { - path: path.join(__dirname, '..', 'public'), + path: OUTPATH, filename: '[name].[chunkhash].js', chunkFilename: '[chunkhash].js' }, From 0005698c107db85f9ce6754fb0f0b7045ffce552 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 6 Jul 2017 19:59:12 +0100 Subject: [PATCH 019/144] Added build to post test step. --- circle.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/circle.yml b/circle.yml index 08d035da..5e66cd33 100644 --- a/circle.yml +++ b/circle.yml @@ -1,4 +1,6 @@ machine: node: version: 6 - +test: + post: + - npm run build From 4bbfe1040ed84c7829f5a2eed1ad238677fbd641 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 11 Jul 2017 06:30:37 +0100 Subject: [PATCH 020/144] Fixed regexp for windows. --- config/webpack.loaders.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/webpack.loaders.js b/config/webpack.loaders.js index 7d9e5289..05e34160 100644 --- a/config/webpack.loaders.js +++ b/config/webpack.loaders.js @@ -6,7 +6,7 @@ module.exports = [ }, { test: /\.jsx?$/, - exclude: /(.*node_modules(?!\/@mapbox\/mapbox-gl-style-spec)|bower_components|public)/, + exclude: /(.*node_modules(?![\/\\]@mapbox[\/\\]mapbox-gl-style-spec)|bower_components|public)/, loader: 'babel', query: { presets: ['es2015', 'react'], From e057fcaea11ea0907297a0f7a094533728a754b9 Mon Sep 17 00:00:00 2001 From: pjsier Date: Sun, 1 Oct 2017 14:49:32 -0500 Subject: [PATCH 021/144] Add data-driven styling to editor Builds off of the ZoomSpecField component with separate options for handling data-driven properties. Reuses most of the zoom field functionality with tweaks that I tried to keep as small as possible, and the layout is based off of comments on the existing issue. --- src/components/fields/ZoomSpecField.jsx | 195 +++++++++++++++++++++--- src/styles/_components.scss | 4 +- src/styles/_zoomproperty.scss | 60 ++++++++ 3 files changed, 238 insertions(+), 21 deletions(-) diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx index 9f8e755e..3cb867c1 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/ZoomSpecField.jsx @@ -4,17 +4,24 @@ import Color from 'color' import Button from '../Button' import SpecField from './SpecField' import NumberInput from '../inputs/NumberInput' +import StringInput from '../inputs/StringInput' +import SelectInput from '../inputs/SelectInput' import DocLabel from './DocLabel' import InputBlock from '../inputs/InputBlock' import AddIcon from 'react-icons/lib/md/add-circle-outline' import DeleteIcon from 'react-icons/lib/md/delete' import FunctionIcon from 'react-icons/lib/md/functions' +import MdInsertChart from 'react-icons/lib/md/insert-chart' import capitalize from 'lodash.capitalize' function isZoomField(value) { - return typeof value === 'object' && value.stops + return typeof value === 'object' && value.stops && typeof value.property === 'undefined' +} + +function isDataField(value) { + return typeof value === 'object' && value.stops && typeof value.property !== 'undefined' } /** Supports displaying spec field for zoom function objects @@ -38,7 +45,15 @@ export default class ZoomSpecProperty extends React.Component { addStop() { const stops = this.props.value.stops.slice(0) const lastStop = stops[stops.length - 1] - stops.push([lastStop[0] + 1, lastStop[1]]) + if (typeof lastStop[0] === "object") { + stops.push([ + {zoom: lastStop[0].zoom, value: lastStop[0].value}, + lastStop[1] + ]) + } + else { + stops.push([lastStop[0] + 1, lastStop[1]]) + } const changedValue = { ...this.props.value, @@ -74,9 +89,21 @@ export default class ZoomSpecProperty extends React.Component { this.props.onChange(this.props.fieldName, zoomFunc) } - changeStop(changeIdx, zoomLevel, value) { + makeDataFunction() { + const dataFunc = { + property: "", + type: "exponential", + stops: [ + [{zoom: 6, value: 0}, this.props.value], + [{zoom: 10, value: 0}, this.props.value] + ] + } + this.props.onChange(this.props.fieldName, dataFunc) + } + + changeStop(changeIdx, stopData, value) { const stops = this.props.value.stops.slice(0) - stops[changeIdx] = [zoomLevel, value] + stops[changeIdx] = [stopData, value] const changedValue = { ...this.props.value, stops: stops, @@ -84,6 +111,111 @@ export default class ZoomSpecProperty extends React.Component { this.props.onChange(this.props.fieldName, changedValue) } + changeDataProperty(propName, propVal) { + this.props.value[propName] = propVal + this.props.onChange(this.props.fieldName, this.props.value) + } + + getDataInput(value, dataLevel, zoomLevel) { + const dataProps = { + label: "Data value", + value: dataLevel, + onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value) + } + if (this.props.value.type === "categorical") { + return + } + else { + return + } + } + + renderDataProperty() { + const dataFields = this.props.value.stops.map((stop, idx) => { + const zoomLevel = stop[0].zoom + const dataLevel = stop[0].value + const value = stop[1] + const deleteStopBtn = + return +
+ this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)} + min={0} + max={22} + /> +
+
+ {this.getDataInput(value, dataLevel, zoomLevel)} +
+
+ this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)} + /> +
+ + }) + + return
+
+ +
+ +
+ this.changeDataProperty("property", propVal)} + /> +
+
+
+ +
+ this.changeDataProperty("type", propVal)} + options={["exponential", "interval", "categorical", "identity"]} + /> +
+
+
+ +
+ this.changeStop(idx, { zoom: zoomLevel, value: dataLevel }, newValue)} + /> +
+
+ +
+ {dataFields} + +
+ } + renderZoomProperty() { const zoomFields = this.props.value.stops.map((stop, idx) => { const zoomLevel = stop[0] @@ -129,14 +261,17 @@ export default class ZoomSpecProperty extends React.Component { } renderProperty() { - let zoomBtn = null + let functionBtn = null if(this.props.fieldSpec['zoom-function']) { - zoomBtn = + functionBtn = } return @@ -144,23 +279,45 @@ export default class ZoomSpecProperty extends React.Component { render() { const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property" + let specField + if (isZoomField(this.props.value)) { + specField = this.renderZoomProperty() + } + else if (isDataField(this.props.value)) { + specField = this.renderDataProperty() + } + else { + specField = this.renderProperty() + } return
- {isZoomField(this.props.value) ? this.renderZoomProperty() : this.renderProperty()} + {specField}
} } -function MakeZoomFunctionButton(props) { - return +function MakeFunctionButtons(props) { + return
+ + +
} function DeleteStopButton(props) { diff --git a/src/styles/_components.scss b/src/styles/_components.scss index b4032a5d..67310214 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -104,13 +104,13 @@ .maputnik-action-block { .maputnik-input-block-label { display: inline-block; - width: 43%; + width: 35%; } .maputnik-input-block-action { vertical-align: top; display: inline-block; - width: 7%; + width: 15%; } } diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss index 22984961..a5b8900a 100644 --- a/src/styles/_zoomproperty.scss +++ b/src/styles/_zoomproperty.scss @@ -67,3 +67,63 @@ .maputnik-zoom-spec-property .maputnik-input-block:not(:first-child) .maputnik-input-block-label { visibility: hidden; } + +// DATA FUNC +.maputnik-make-data-function { + background-color: transparent; + display: inline-block; + padding-bottom: 0; + padding-top: 0; + vertical-align: middle; + + @extend .maputnik-icon-button; +} + +// DATA PROPERTY +.maputnik-data-spec-block { + overflow: auto; +} +.maputnik-data-spec-property { + .maputnik-input-block-label { + width: 30%; + } + + .maputnik-input-block-content { + width: 70%; + } + .maputnik-data-spec-property-group { + margin-bottom: 3%; + + .maputnik-doc-wrapper { + width: 25%; + color: $color-lowgray; + } + .maputnik-doc-wrapper:hover { + color: inherit; + } + .maputnik-data-spec-property-input { + width: 75%; + display: inline-block; + + .maputnik-string { + margin-bottom: 3%; + } + } + } +} + +.maputnik-data-spec-block { + .maputnik-data-spec-property-stop-edit, + .maputnik-data-spec-property-stop-data { + display: inline-block; + margin-bottom: 3%; + } + + .maputnik-data-spec-property-stop-edit { + width: 18%; + margin-right: 3%; + } + .maputnik-data-spec-property-stop-data { + width: 78%; + } +} \ No newline at end of file From d731fb2caeaa3df45e13f605b8fc7f0ffec9b85f Mon Sep 17 00:00:00 2001 From: pjsier Date: Sun, 1 Oct 2017 19:17:43 -0500 Subject: [PATCH 022/144] Fix scss linter errors --- src/styles/_zoomproperty.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss index a5b8900a..d6510c9b 100644 --- a/src/styles/_zoomproperty.scss +++ b/src/styles/_zoomproperty.scss @@ -83,6 +83,7 @@ .maputnik-data-spec-block { overflow: auto; } + .maputnik-data-spec-property { .maputnik-input-block-label { width: 30%; @@ -91,6 +92,7 @@ .maputnik-input-block-content { width: 70%; } + .maputnik-data-spec-property-group { margin-bottom: 3%; @@ -98,9 +100,11 @@ width: 25%; color: $color-lowgray; } + .maputnik-doc-wrapper:hover { color: inherit; } + .maputnik-data-spec-property-input { width: 75%; display: inline-block; @@ -123,7 +127,8 @@ width: 18%; margin-right: 3%; } + .maputnik-data-spec-property-stop-data { width: 78%; } -} \ No newline at end of file +} From 9e52b0b7dc96bbbc75f87bff95bddddf104ef367 Mon Sep 17 00:00:00 2001 From: pjsier Date: Sun, 1 Oct 2017 21:07:55 -0500 Subject: [PATCH 023/144] Remove default from data properties It looks like default is not supported in this version of the style spec, so pending the PR to update it I'm removing it as an input. --- src/components/fields/ZoomSpecField.jsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx index 3cb867c1..ab1cd79c 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/ZoomSpecField.jsx @@ -190,20 +190,6 @@ export default class ZoomSpecProperty extends React.Component { />
-
- -
- this.changeStop(idx, { zoom: zoomLevel, value: dataLevel }, newValue)} - /> -
-
{dataFields} From e32c2e865c59be53320061819a2208920ccee557 Mon Sep 17 00:00:00 2001 From: Chris Whong Date: Wed, 4 Oct 2017 22:42:04 -0400 Subject: [PATCH 024/144] Add --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index e535aa73..27f86acd 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,10 @@ npm run lint npm run lint-styles ``` +## Related Projects + +- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik. + ## Sponsors Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors. From 2ffb3e73e1e610ab41dc8a1ef12b0bc16448f5f5 Mon Sep 17 00:00:00 2001 From: pjsier Date: Thu, 5 Oct 2017 05:50:47 -0500 Subject: [PATCH 025/144] Re-add default field after style update --- src/components/fields/ZoomSpecField.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx index ab1cd79c..42883c0b 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/ZoomSpecField.jsx @@ -190,6 +190,20 @@ export default class ZoomSpecProperty extends React.Component { />
+
+ +
+ this.changeDataProperty("default", propVal)} + /> +
+
{dataFields} From 1d29f670652609a20f0d3aea0f2b7e3e5671ff8a Mon Sep 17 00:00:00 2001 From: pjsier Date: Thu, 5 Oct 2017 06:08:55 -0500 Subject: [PATCH 026/144] Check for property-function support on data styles --- src/components/fields/ZoomSpecField.jsx | 46 ++++++++++++++----------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx index 42883c0b..44686dc1 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/ZoomSpecField.jsx @@ -261,13 +261,11 @@ export default class ZoomSpecProperty extends React.Component { } renderProperty() { - let functionBtn = null - if(this.props.fieldSpec['zoom-function']) { - functionBtn = - } + const functionBtn = return - - - + + if (props.fieldSpec['property-function']) { + makeDataButton = + } + return
{makeZoomButton}{makeDataButton}
+ } + else { + return null + } } function DeleteStopButton(props) { From 8a6e24e5e73ad237b2dbf3592c22470fca838c73 Mon Sep 17 00:00:00 2001 From: Gregory Wolanski Date: Sun, 8 Oct 2017 21:42:04 +0200 Subject: [PATCH 027/144] Modal scrolling #156 --- src/components/modals/Modal.jsx | 4 +++- src/styles/_modal.scss | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx index 7f9a31be..cafbdfad 100644 --- a/src/components/modals/Modal.jsx +++ b/src/components/modals/Modal.jsx @@ -21,7 +21,9 @@ class Modal extends React.Component { -
{this.props.children}
+
+
{this.props.children}
+
} diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 69ee2e49..9a2fd80f 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -2,6 +2,7 @@ .maputnik-modal { min-width: 350px; max-width: 600px; + overflow: hidden; background-color: $color-black; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); z-index: 3; @@ -39,9 +40,13 @@ cursor: pointer; } +.maputnik-modal-scroller { + max-height: 90vh; + overflow-y: auto; +} + .maputnik-modal-content { padding: $margin-3; - max-height: 90vh; @include flex-column; } From 2c3f47d3cbbe88b6e40838bafb18192a4b8efe57 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 10 Oct 2017 16:27:16 +0100 Subject: [PATCH 028/144] Added 'Load from URL' option in open modal. Fixes #120 --- src/components/modals/OpenModal.jsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index ef0556ca..08d7e9d7 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -75,6 +75,11 @@ class OpenModal extends React.Component { }) } + onOpenUrl() { + const url = this.refs.styleUrl.value; + this.onStyleSelect(url); + } + onUpload(_, files) { const [e, file] = files[0]; const reader = new FileReader(); @@ -139,6 +144,18 @@ class OpenModal extends React.Component { + +
+

Load from URL

+

+ Load from a URL. Note that the URL must have CORS enabled. +

+ +
+ +
+
+

Gallery Styles

From 148f64c2618e68a8f9e4d8943316c6ed095b9f35 Mon Sep 17 00:00:00 2001 From: pjsier Date: Tue, 10 Oct 2017 10:30:06 -0500 Subject: [PATCH 029/144] Restrict data function types, reorder buttons Checking the Mapbox style spec properties to see whether or not exponential should be allowed as the property type, defaulting to categorical which appears to work for either type. Also re-orders zoom and data function buttons, aligning zoom right if data not supplied. --- src/components/fields/ZoomSpecField.jsx | 23 ++++++++++++++++------- src/styles/_components.scss | 5 +++++ 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx index 44686dc1..b045c057 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/ZoomSpecField.jsx @@ -47,7 +47,7 @@ export default class ZoomSpecProperty extends React.Component { const lastStop = stops[stops.length - 1] if (typeof lastStop[0] === "object") { stops.push([ - {zoom: lastStop[0].zoom, value: lastStop[0].value}, + {zoom: lastStop[0].zoom + 1, value: lastStop[0].value}, lastStop[1] ]) } @@ -89,10 +89,19 @@ export default class ZoomSpecProperty extends React.Component { this.props.onChange(this.props.fieldName, zoomFunc) } + getDataFunctionTypes(functionType) { + if (functionType === "interpolated") { + return ["categorical", "interval", "exponential"] + } + else { + return ["categorical", "interval"] + } + } + makeDataFunction() { const dataFunc = { property: "", - type: "exponential", + type: "categorical", stops: [ [{zoom: 6, value: 0}, this.props.value], [{zoom: 10, value: 0}, this.props.value] @@ -180,13 +189,13 @@ export default class ZoomSpecProperty extends React.Component {

this.changeDataProperty("type", propVal)} - options={["exponential", "interval", "categorical", "identity"]} + options={this.getDataFunctionTypes(this.props.fieldSpec.function)} />
@@ -307,7 +316,7 @@ function MakeFunctionButtons(props) { /> - if (props.fieldSpec['property-function']) { + if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) { makeDataButton = } - return
{makeZoomButton}{makeDataButton}
+ return
{makeDataButton}{makeZoomButton}
} else { return null diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 67310214..12415faa 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -40,6 +40,7 @@ .maputnik-doc-target:hover .maputnik-doc-popup { display: block; + text-align: left; } // BUTTON @@ -112,6 +113,10 @@ display: inline-block; width: 15%; } + + .maputnik-input-block-action > div { + text-align: right; + } } // SPACE HELPER From 611e170b5ed3cbce7feef28c48fa8938fe9c15a3 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 10 Oct 2017 18:40:32 +0100 Subject: [PATCH 030/144] Added true/false conversion to filter fields. Fixes #114 --- src/components/filter/SingleFilterEditor.jsx | 25 +++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/filter/SingleFilterEditor.jsx b/src/components/filter/SingleFilterEditor.jsx index 8902625b..f7af98d4 100644 --- a/src/components/filter/SingleFilterEditor.jsx +++ b/src/components/filter/SingleFilterEditor.jsx @@ -11,6 +11,29 @@ function tryParseInt(v) { return parseFloat(v) } +function tryParseBool(v) { + const isString = (typeof(v) === "string"); + if(!isString) { + return v; + } + + if(v.match(/^\s*true\s*$/)) { + return true; + } + else if(v.match(/^\s*false\s*$/)) { + return false; + } + else { + return v; + } +} + +function parseFilter(v) { + v = tryParseInt(v); + v = tryParseBool(v); + return v; +} + class SingleFilterEditor extends React.Component { static propTypes = { filter: React.PropTypes.array.isRequired, @@ -23,7 +46,7 @@ class SingleFilterEditor extends React.Component { } onFilterPartChanged(filterOp, propertyName, filterArgs) { - let newFilter = [filterOp, propertyName, ...filterArgs.map(tryParseInt)] + let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)] if(filterOp === 'has' || filterOp === '!has') { newFilter = [filterOp, propertyName] } else if(filterArgs.length === 0) { From 4af7a7122006fac05ebd3ca24eeee727e14b6bd6 Mon Sep 17 00:00:00 2001 From: pjsier Date: Tue, 10 Oct 2017 14:23:20 -0500 Subject: [PATCH 031/144] Rename ZoomSpecField to FunctionSpecField --- .../fields/{ZoomSpecField.jsx => FunctionSpecField.jsx} | 2 +- src/components/fields/PropertyGroup.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/components/fields/{ZoomSpecField.jsx => FunctionSpecField.jsx} (99%) diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/FunctionSpecField.jsx similarity index 99% rename from src/components/fields/ZoomSpecField.jsx rename to src/components/fields/FunctionSpecField.jsx index b045c057..3adc77cc 100644 --- a/src/components/fields/ZoomSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -27,7 +27,7 @@ function isDataField(value) { /** Supports displaying spec field for zoom function objects * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property */ -export default class ZoomSpecProperty extends React.Component { +export default class FunctionSpecProperty extends React.Component { static propTypes = { onChange: React.PropTypes.func.isRequired, fieldName: React.PropTypes.string.isRequired, diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx index 8de8b342..fc178929 100644 --- a/src/components/fields/PropertyGroup.jsx +++ b/src/components/fields/PropertyGroup.jsx @@ -1,6 +1,6 @@ import React from 'react' -import ZoomSpecField from './ZoomSpecField' +import FunctionSpecField from './FunctionSpecField' const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image'] /** Extract field spec by {@fieldName} from the {@layerType} in the @@ -54,7 +54,7 @@ export default class PropertyGroup extends React.Component { const layout = this.props.layer.layout || {} const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName] - return Date: Tue, 10 Oct 2017 22:34:16 +0100 Subject: [PATCH 032/144] Added comments field doc and updated react-collapse to fix styling. --- package.json | 2 +- src/components/layers/CommentBlock.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 5471a5dd..c324f00c 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "react-addons-pure-render-mixin": "^15.4.0", "react-autocomplete": "^1.4.0", "react-codemirror": "^0.3.0", - "react-collapse": "^4.0.2", + "react-collapse": "^4.0.3", "react-color": "^2.10.0", "react-dom": "^15.4.0", "react-file-reader-input": "^1.1.0", diff --git a/src/components/layers/CommentBlock.jsx b/src/components/layers/CommentBlock.jsx index 996ca1ca..ac8bee61 100644 --- a/src/components/layers/CommentBlock.jsx +++ b/src/components/layers/CommentBlock.jsx @@ -10,7 +10,7 @@ class MetadataBlock extends React.Component { } render() { - return + return Date: Wed, 11 Oct 2017 11:17:02 +0100 Subject: [PATCH 033/144] Fixed logo stying in toolbar, also switched to the logo in github:maputnik/design. --- package.json | 1 + src/components/Toolbar.jsx | 2 +- src/styles/_toolbar.scss | 3 +-- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 5471a5dd..0bd184d2 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "lodash.throttle": "^4.1.1", "mapbox-gl": "^0.34.0", "mapbox-gl-inspect": "^1.2.3", + "maputnik-design": "github:maputnik/design", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index bcb60f8d..9bf7ad68 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -16,7 +16,7 @@ import MdFontDownload from 'react-icons/lib/md/font-download' import HelpIcon from 'react-icons/lib/md/help-outline' import InspectionIcon from 'react-icons/lib/md/find-in-page' -import logoImage from '../img/maputnik.png' +import logoImage from 'maputnik-design/logos/logo-color.svg' import SettingsModal from './modals/SettingsModal' import ExportModal from './modals/ExportModal' import SourcesModal from './modals/SourcesModal' diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index e9459645..77dbea87 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -22,9 +22,8 @@ img { width: 30px; - height: 30px; padding-right: $margin-2; - vertical-align: middle; + vertical-align: top; } } From b4292028c29490c1a8f14cec948df8b4de7b89e1 Mon Sep 17 00:00:00 2001 From: pjsier Date: Wed, 11 Oct 2017 05:58:32 -0500 Subject: [PATCH 034/144] Fix default field bug --- src/components/fields/FunctionSpecField.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index 3adc77cc..c85cb7a4 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -121,7 +121,12 @@ export default class FunctionSpecProperty extends React.Component { } changeDataProperty(propName, propVal) { - this.props.value[propName] = propVal + if (propVal) { + this.props.value[propName] = propVal + } + else { + delete this.props.value[propName] + } this.props.onChange(this.props.fieldName, this.props.value) } @@ -209,7 +214,7 @@ export default class FunctionSpecProperty extends React.Component { fieldName={this.props.fieldName} fieldSpec={this.props.fieldSpec} value={this.props.value.default} - onChange={propVal => this.changeDataProperty("default", propVal)} + onChange={(_, propVal) => this.changeDataProperty("default", propVal)} /> From 9beacf7ef3c928eed3920ae89fc19a5eb137f00d Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 11 Oct 2017 13:16:04 +0100 Subject: [PATCH 035/144] Fixed image path in test --- test/specs/simple.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/specs/simple.js b/test/specs/simple.js index 56b27695..fb6ca499 100644 --- a/test/specs/simple.js +++ b/test/specs/simple.js @@ -9,7 +9,7 @@ describe('maputnik', function() { browser.waitForExist(".maputnik-toolbar-link"); var src = browser.getAttribute(".maputnik-toolbar-link img", "src"); - assert.equal(src, config.baseUrl+'/img/maputnik.png'); + assert.equal(src, config.baseUrl+'/img/logo-color.svg'); }); }); From fa0067ce7bcfe412ed58e62428d6e1aaf9db747b Mon Sep 17 00:00:00 2001 From: pjsier Date: Wed, 11 Oct 2017 08:01:55 -0500 Subject: [PATCH 036/144] Update mapbox deps, clarify data prop scope --- package.json | 4 ++-- src/components/fields/FunctionSpecField.jsx | 24 ++++++++------------- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 5471a5dd..efe05ab5 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "license": "MIT", "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { - "@mapbox/mapbox-gl-style-spec": "^9.0.0", "@mapbox/mapbox-gl-rtl-text": "^0.1.0", + "@mapbox/mapbox-gl-style-spec": "^9.0.1", "classnames": "^2.2.5", "codemirror": "^5.18.2", "color": "^1.0.3", @@ -32,7 +32,7 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", - "mapbox-gl": "^0.34.0", + "mapbox-gl": "^0.40.1", "mapbox-gl-inspect": "^1.2.3", "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index c85cb7a4..2b7383b9 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -130,26 +130,20 @@ export default class FunctionSpecProperty extends React.Component { this.props.onChange(this.props.fieldName, this.props.value) } - getDataInput(value, dataLevel, zoomLevel) { - const dataProps = { - label: "Data value", - value: dataLevel, - onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value) - } - if (this.props.value.type === "categorical") { - return - } - else { - return - } - } - renderDataProperty() { const dataFields = this.props.value.stops.map((stop, idx) => { const zoomLevel = stop[0].zoom const dataLevel = stop[0].value const value = stop[1] const deleteStopBtn = + + const dataProps = { + label: "Data value", + value: dataLevel, + onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value) + } + const dataInput = this.props.value.type === "categorical" ? : + return
- {this.getDataInput(value, dataLevel, zoomLevel)} + {dataInput}
Date: Wed, 11 Oct 2017 23:11:40 +0200 Subject: [PATCH 037/144] Modal scrolling #156: Issue fixed --- src/styles/_modal.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 9a2fd80f..56740608 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -41,7 +41,7 @@ } .maputnik-modal-scroller { - max-height: 90vh; + max-height: calc(100vh - 35px); overflow-y: auto; } @@ -85,7 +85,6 @@ } .maputnik-style-gallery-container { - overflow-y: scroll; flex-shrink: 1; } From c881534554d0281a6f81d404962d8b9a573153f9 Mon Sep 17 00:00:00 2001 From: pjsier Date: Thu, 12 Oct 2017 14:33:24 -0500 Subject: [PATCH 038/144] Fix insecure asset loading --- src/config/styles.json | 16 ++++++++-------- src/config/tilesets.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/config/styles.json b/src/config/styles.json index 4137da25..09c118d5 100644 --- a/src/config/styles.json +++ b/src/config/styles.json @@ -3,25 +3,25 @@ "id": "klokantech-basic", "title": "Klokantech Basic", "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/master/style.json", - "thumbnail": "http://maputnik.com/thumbnails/klokantech-basic.png" + "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png" }, { "id": "dark-matter", "title": "Dark Matter", "url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/master/style.json", - "thumbnail": "http://maputnik.com/thumbnails/dark-matter.png" + "thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png" }, { "id": "positron", "title": "Positron", "url": "https://rawgit.com/openmaptiles/positron-gl-style/master/style.json", - "thumbnail": "http://maputnik.com/thumbnails/positron.png" + "thumbnail": "https://maputnik.github.io/thumbnails/positron.png" }, { "id": "osm-bright", "title": "OSM Bright", "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/master/style.json", - "thumbnail": "http://maputnik.com/thumbnails/osm-bright.png" + "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png" }, { "id": "osm-liberty", @@ -39,24 +39,24 @@ "id": "mapbox-satellite", "title": "Mapbox Satellite", "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/satellite-v9.json", - "thumbnail": "http://maputnik.com/thumbnails/mapbox-satellite.png" + "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": "http://maputnik.com/thumbnails/mapbox-bright.png" + "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": "http://maputnik.com/thumbnails/mapbox-basic.png" + "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-basic.png" }, { "id": "tilezen", "title": "Tilezen", "url": "https://rawgit.com/lukasmartinelli/tilezen-gl-style/master/style.json", - "thumbnail": "http://maputnik.com/thumbnails/tilezen.png" + "thumbnail": "https://maputnik.github.io/thumbnails/tilezen.png" } ] diff --git a/src/config/tilesets.json b/src/config/tilesets.json index bfc545f4..4b336f65 100644 --- a/src/config/tilesets.json +++ b/src/config/tilesets.json @@ -12,7 +12,7 @@ "tilezen": { "type": "vector", "tiles": [ - "http://tile.mapzen.com/mapzen/vector/v1/{layers}/{z}/{x}/{y}.pbf?api_key=mapzen-RVcyVL7" + "https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=mapzen-RVcyVL7" ], "minZoom": 0, "maxZoom": 15, From 2e671250b94e004583cf7d4c1b725ce36961171f Mon Sep 17 00:00:00 2001 From: pjsier Date: Thu, 12 Oct 2017 15:13:57 -0500 Subject: [PATCH 039/144] Remove tilezen tileset and style --- src/config/styles.json | 6 ------ src/config/tilesets.json | 9 --------- 2 files changed, 15 deletions(-) diff --git a/src/config/styles.json b/src/config/styles.json index 09c118d5..1359febf 100644 --- a/src/config/styles.json +++ b/src/config/styles.json @@ -52,11 +52,5 @@ "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": "tilezen", - "title": "Tilezen", - "url": "https://rawgit.com/lukasmartinelli/tilezen-gl-style/master/style.json", - "thumbnail": "https://maputnik.github.io/thumbnails/tilezen.png" } ] diff --git a/src/config/tilesets.json b/src/config/tilesets.json index 4b336f65..ee321ce5 100644 --- a/src/config/tilesets.json +++ b/src/config/tilesets.json @@ -8,14 +8,5 @@ "type": "vector", "url": "https://free.tilehosting.com/data/v3.json?key={key}", "title": "OpenMapTiles" - }, - "tilezen": { - "type": "vector", - "tiles": [ - "https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=mapzen-RVcyVL7" - ], - "minZoom": 0, - "maxZoom": 15, - "title": "Mapzen Vector Tile Service" } } From cda855f1b72492ca116f327af880204a24f6e907 Mon Sep 17 00:00:00 2001 From: pjsier Date: Sun, 15 Oct 2017 19:59:06 -0500 Subject: [PATCH 040/144] Add share style link, copy button This adds a copy to clipboard button and input with the style parameter pre-populated after exporting a style to an anonymous gist. Also includes the URL as an input next to the button. --- package.json | 1 + src/components/modals/ExportModal.jsx | 22 +++++++++++++++++----- src/styles/_export.scss | 12 ++++++++++++ 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index aed9b823..260623bc 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-codemirror": "^0.3.0", "react-collapse": "^4.0.3", "react-color": "^2.10.0", + "react-copy-to-clipboard": "^5.0.1", "react-dom": "^15.4.0", "react-file-reader-input": "^1.1.0", "react-height": "^3.0.0", diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index b6db301d..fd00a6f9 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -9,8 +9,10 @@ import CheckboxInput from '../inputs/CheckboxInput' import Button from '../Button' import Modal from './Modal' import MdFileDownload from 'react-icons/lib/md/file-download' +import TiClipboard from 'react-icons/lib/ti/clipboard' import style from '../../libs/style.js' import GitHub from 'github-api' +import { CopyToClipboard } from 'react-copy-to-clipboard' class Gist extends React.Component { @@ -136,11 +138,21 @@ class Gist extends React.Component { return

Saving...

} else if(gist) { const user = gist.user || 'anonymous'; - return

- Latest saved gist:{' '} - {this.renderPreviewLink(this)} - Source -

+ const rawGistLink = "https://gist.githubusercontent.com/" + user + "/" + gist.id + "/raw/" + gist.history[0].version + "/style.json" + const maputnikStyleLink = "https://maputnik.github.io/editor/?style=" + rawGistLink + return
+

+ Latest saved gist:{' '} + {this.renderPreviewLink(this)} + Source +

+

+ + Share this style: + + +

+
} } diff --git a/src/styles/_export.scss b/src/styles/_export.scss index 8cace42a..ce000ec0 100644 --- a/src/styles/_export.scss +++ b/src/styles/_export.scss @@ -3,3 +3,15 @@ display: inline-block; } } + +.maputnik-render-gist { + p { + margin: 10px 0; + } + + input.maputnik-string { + margin-left: 5px; + width: 60%; + display: inline-block; + } +} From 06e1be716eb6328c3c6a5671cf1d796a661d0dae Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 16 Oct 2017 09:34:05 +0100 Subject: [PATCH 041/144] Changed link from maputnik.com -> maputnik.github.io --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 27f86acd..10eb62f7 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ 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 **** (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. From 3f350c30da0791f542909f665f381e509e68c6c1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 16 Oct 2017 15:01:35 +0100 Subject: [PATCH 042/144] Added rel="noopener noreferrer" to external links. --- src/components/Toolbar.jsx | 3 ++- src/components/modals/ExportModal.jsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 9bf7ad68..81550b58 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -32,7 +32,8 @@ function ToolbarLink(props) { return {props.children} diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index fd00a6f9..d711d7ea 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -126,7 +126,7 @@ class Gist extends React.Component { const user = gist.user || 'anonymous'; const preview = !!gist.files['index.html']; if(preview) { - return Preview,{' '} + return Preview,{' '} } return null; } @@ -144,7 +144,7 @@ class Gist extends React.Component {

Latest saved gist:{' '} {this.renderPreviewLink(this)} - Source + Source

@@ -177,7 +177,7 @@ class Gist extends React.Component { value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']} onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/> - Get your free access token + Get your free access token

: null} {this.renderLatestGist()} From c38547d4e7e8aa03450d6bea86bd4ac3e75e9547 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 16 Oct 2017 15:18:29 +0100 Subject: [PATCH 043/144] Removed {} from props. --- src/components/Toolbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 81550b58..40235fc8 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -33,7 +33,7 @@ function ToolbarLink(props) { className={classnames('maputnik-toolbar-link', props.className)} href={props.href} rel="noopener noreferrer" - target={"_blank"} + target="_blank" > {props.children} From d32b15d42539d9526813fea1a592e1138e3bbe9b Mon Sep 17 00:00:00 2001 From: pjsier Date: Mon, 16 Oct 2017 14:10:47 -0500 Subject: [PATCH 044/144] Assigning default function type from spec --- src/components/fields/FunctionSpecField.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index 2b7383b9..e1cc467f 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -89,6 +89,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"] @@ -131,6 +141,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 From 06ea1d16970735d23fc04167ba5a486b04dd85f4 Mon Sep 17 00:00:00 2001 From: Gregory Wolanski Date: Thu, 19 Oct 2017 20:41:38 +0200 Subject: [PATCH 045/144] Display zoom level #87 --- src/components/map/MapboxGlMap.jsx | 4 ++++ src/libs/zoomcontrol.js | 26 ++++++++++++++++++++++++++ src/mapboxgl.css | 7 +++++++ 3 files changed, 37 insertions(+) create mode 100644 src/libs/zoomcontrol.js diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 11b50193..3c472f12 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -8,6 +8,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' @@ -109,6 +110,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'); diff --git a/src/libs/zoomcontrol.js b/src/libs/zoomcontrol.js new file mode 100644 index 00000000..2f7900df --- /dev/null +++ b/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; + } +} diff --git a/src/mapboxgl.css b/src/mapboxgl.css index 5038759c..afe45f1a 100644 --- a/src/mapboxgl.css +++ b/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); } From 06554b83dc03259711414bc67f63ff70a3106553 Mon Sep 17 00:00:00 2001 From: Gregory Wolanski Date: Wed, 25 Oct 2017 21:35:19 +0200 Subject: [PATCH 046/144] Add expand/collapse all layer groups feature (#130) --- src/components/layers/LayerList.jsx | 49 ++++++++++++++++++++++++++--- src/styles/_layer.scss | 2 +- 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index 00bf33ef..d18c3568 100644 --- a/src/components/layers/LayerList.jsx +++ b/src/components/layers/LayerList.jsx @@ -49,6 +49,7 @@ class LayerListContainer extends React.Component { super(props) this.state = { collapsedGroups: {}, + areAllGroupsExpanded: false, isOpen: { add: false, } @@ -94,6 +95,31 @@ class LayerListContainer extends React.Component { }) } + toggleLayers() { + let idx=0 + + let newGroups=[] + + this.groupedLayers().forEach(layers => { + const groupPrefix = layerPrefix(layers[0].id) + const lookupKey = [groupPrefix, idx].join('-') + + + if (layers.length > 1) { + newGroups[lookupKey] = this.state.areAllGroupsExpanded + } + + layers.forEach((layer) => { + idx += 1 + }) + }); + + this.setState({ + collapsedGroups: newGroups, + areAllGroupsExpanded: !this.state.areAllGroupsExpanded + }) + } + groupedLayers() { const groups = [] for (let i = 0; i < this.props.layers.length; i++) { @@ -176,12 +202,25 @@ class LayerListContainer extends React.Component { />
Layers + - +
    {listItems} diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index 50b841a3..08cbd457 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -1,7 +1,7 @@ // LAYER LIST .maputnik-layer-list { &-header { - padding: $margin-2; + padding: $margin-2 $margin-2 $margin-3; @include flex-row; From 1119ff06c9a4c091b7339c2635f17c562cd6719f Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 1 Nov 2017 16:51:26 +0000 Subject: [PATCH 047/144] Added more badges. --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 10eb62f7..ea44fc8f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,16 @@ -# 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 Maputnik From da0b4d79119202799ba066d59f51f27978ab74ce Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 3 Nov 2017 11:04:15 +0000 Subject: [PATCH 048/144] Disable webpack-dev-server polling by default. --- config/webpack.config.js | 9 ++++++++- package.json | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index a50402a4..1fc02d54 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -41,7 +41,14 @@ 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 for details + poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false), + watch: false, + ignored: /node_modules/ + } }, plugins: [ new webpack.NoErrorsPlugin(), diff --git a/package.json b/package.json index 260623bc..5b1beb4a 100644 --- a/package.json +++ b/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'" }, From ea5568717110c31f34eb0fea38a2ab701a813cfa Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 3 Nov 2017 11:12:23 +0000 Subject: [PATCH 049/144] Added note to the docs regarding `WEBPACK_DEV_SERVER_POLLING` --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 27f86acd..8c5edbbe 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,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 + +To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment. ``` npm run build From 89f6343abd50f645b2b7093a8f230c2112824faf Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 4 Nov 2017 14:24:36 +0000 Subject: [PATCH 050/144] Removed ignoring node_modules in webpack watch --- config/webpack.config.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index 1fc02d54..a0f80f8c 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -46,8 +46,7 @@ module.exports = { // 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 for details poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false), - watch: false, - ignored: /node_modules/ + watch: false } }, plugins: [ From ae370f04c1f1182bc382dbd3031691a64605a269 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 10:23:13 +0000 Subject: [PATCH 051/144] Added css overflow scroll to toolbar actions. --- src/components/Toolbar.jsx | 72 ++++++++++++++++++++------------------ src/styles/_scrollbar.scss | 23 ++++++------ src/styles/_toolbar.scss | 14 ++++++++ 3 files changed, 65 insertions(+), 44 deletions(-) diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 9bf7ad68..7d954e81 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -106,40 +106,44 @@ export default class Toolbar extends React.Component { isOpen={this.state.isOpen.sources} onOpenToggle={this.toggleModal.bind(this, 'sources')} /> - - Maputnik -

    Maputnik

    -     - - - Open - - - - Export - - - - Sources - - - - Style Settings - - - - - { this.props.inspectModeEnabled && Map Mode } - { !this.props.inspectModeEnabled && Inspect Mode } - - - - - Help - +
    + + Maputnik +

    Maputnik

    +     +
    + + + Open + + + + Export + + + + Sources + + + + Style Settings + + + + + { this.props.inspectModeEnabled && Map Mode } + { !this.props.inspectModeEnabled && Inspect Mode } + + + + + Help + +
    +
    } } diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss index c3058791..8b2156d3 100644 --- a/src/styles/_scrollbar.scss +++ b/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; + } } diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 77dbea87..3e4ed2ca 100644 --- a/src/styles/_toolbar.scss +++ b/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; +} From e148607c7a11e68a4c72981b8d48a08363cee1db Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 14:13:45 +0000 Subject: [PATCH 052/144] Removed required prop and fixed component name. --- src/components/layers/LayerListGroup.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/layers/LayerListGroup.jsx b/src/components/layers/LayerListGroup.jsx index 09476b8d..7694014d 100644 --- a/src/components/layers/LayerListGroup.jsx +++ b/src/components/layers/LayerListGroup.jsx @@ -1,10 +1,9 @@ import React from 'react' import Collapser from './Collapser' -export default class LayerEditorGroup extends React.Component { +export default class LayerListGroup extends React.Component { static propTypes = { title: React.PropTypes.string.isRequired, - children: React.PropTypes.element.isRequired, isActive: React.PropTypes.bool.isRequired, onActiveToggle: React.PropTypes.func.isRequired } From bb4f3482ad299ea9a996b4f0e6c1dfadfb21190b Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 14:45:03 +0000 Subject: [PATCH 053/144] Removed required from minzoom/maxzoom as it can be undefined. See --- src/components/layers/MaxZoomBlock.jsx | 2 +- src/components/layers/MinZoomBlock.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx index b2ba45db..1989de46 100644 --- a/src/components/layers/MaxZoomBlock.jsx +++ b/src/components/layers/MaxZoomBlock.jsx @@ -6,7 +6,7 @@ import NumberInput from '../inputs/NumberInput' class MaxZoomBlock extends React.Component { static propTypes = { - value: React.PropTypes.number.isRequired, + value: React.PropTypes.number, onChange: React.PropTypes.func.isRequired, } diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index c4a7f360..5483376c 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -6,7 +6,7 @@ import NumberInput from '../inputs/NumberInput' class MinZoomBlock extends React.Component { static propTypes = { - value: React.PropTypes.number.isRequired, + value: React.PropTypes.number, onChange: React.PropTypes.func.isRequired, } From 9801f49f4ec5d82432ff34692d5a4b0c72cf090c Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 14:58:23 +0000 Subject: [PATCH 054/144] Added noParse for prebuilt openlayers and mapbox-gl modules. --- config/webpack.config.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index a50402a4..fba07dcd 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -23,7 +23,11 @@ module.exports = { extensions: ['', '.js', '.jsx'] }, module: { - loaders + noParse: [ + /mapbox-gl\/dist\/mapbox-gl.js/, + /openlayers\/dist\/ol.js/ + ], + loaders: loaders }, node: { fs: "empty", From 365a0518a545ec0dbd0d470a377be8c90c2ef422 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 15:05:00 +0000 Subject: [PATCH 055/144] Removed the console.warn because the logging wasn't helpful. --- src/components/fields/ColorField.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index a71aebc7..2f5343c2 100644 --- a/src/components/fields/ColorField.jsx +++ b/src/components/fields/ColorField.jsx @@ -37,7 +37,6 @@ class ColorField extends React.Component { left: pos.left + 196, } } else { - console.warn('Color field has no element to adjust position') return { top: 160, left: 555, From af25fb926ba069c139bcf8c4d3b4666de754e50a Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 15:12:51 +0000 Subject: [PATCH 056/144] Bumped react-codemirror to 1.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 260623bc..af959ac0 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "react": "^15.4.0", "react-addons-pure-render-mixin": "^15.4.0", "react-autocomplete": "^1.4.0", - "react-codemirror": "^0.3.0", + "react-codemirror": "^1.0.0", "react-collapse": "^4.0.3", "react-color": "^2.10.0", "react-copy-to-clipboard": "^5.0.1", From 9bc603a5106ddb5a2fbef0f9bbaebb0f877c24d1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 15:32:04 +0000 Subject: [PATCH 057/144] Update to use prop-types module in components. --- package.json | 1 + src/components/AppLayout.jsx | 13 ++++----- src/components/Button.jsx | 7 ++--- src/components/MessagePanel.jsx | 5 ++-- src/components/Toolbar.jsx | 13 ++++----- src/components/fields/ColorField.jsx | 13 ++++----- src/components/fields/DocLabel.jsx | 9 ++++--- src/components/fields/FunctionSpecField.jsx | 19 ++++++------- src/components/fields/PropertyGroup.jsx | 9 ++++--- src/components/fields/SpecField.jsx | 19 ++++++------- src/components/filter/FilterEditor.jsx | 7 ++--- src/components/filter/FilterEditorBlock.jsx | 5 ++-- src/components/filter/SingleFilterEditor.jsx | 7 ++--- src/components/icons/LayerIcon.jsx | 5 ++-- src/components/inputs/ArrayInput.jsx | 11 ++++---- src/components/inputs/AutocompleteInput.jsx | 7 ++--- src/components/inputs/CheckboxInput.jsx | 7 ++--- src/components/inputs/DynamicArrayInput.jsx | 9 ++++--- src/components/inputs/FontInput.jsx | 9 ++++--- src/components/inputs/IconInput.jsx | 9 ++++--- src/components/inputs/InputBlock.jsx | 15 ++++++----- src/components/inputs/MultiButtonInput.jsx | 7 ++--- src/components/inputs/NumberInput.jsx | 11 ++++---- src/components/inputs/SelectInput.jsx | 9 ++++--- src/components/inputs/StringInput.jsx | 9 ++++--- src/components/layers/Collapser.jsx | 5 ++-- src/components/layers/CommentBlock.jsx | 5 ++-- src/components/layers/JSONEditor.jsx | 5 ++-- src/components/layers/LayerEditor.jsx | 15 ++++++----- src/components/layers/LayerEditorGroup.jsx | 9 ++++--- src/components/layers/LayerIdBlock.jsx | 5 ++-- src/components/layers/LayerList.jsx | 11 ++++---- src/components/layers/LayerListGroup.jsx | 7 ++--- src/components/layers/LayerListItem.jsx | 25 ++++++++--------- src/components/layers/LayerSourceBlock.jsx | 7 ++--- .../layers/LayerSourceLayerBlock.jsx | 7 ++--- src/components/layers/LayerTypeBlock.jsx | 5 ++-- src/components/layers/MaxZoomBlock.jsx | 5 ++-- src/components/layers/MinZoomBlock.jsx | 5 ++-- src/components/map/MapboxGlMap.jsx | 9 ++++--- src/components/map/OpenLayers3Map.jsx | 7 ++--- src/components/modals/AddModal.jsx | 11 ++++---- src/components/modals/ExportModal.jsx | 13 ++++----- src/components/modals/Modal.jsx | 7 ++--- src/components/modals/OpenModal.jsx | 15 ++++++----- src/components/modals/Overlay.jsx | 5 ++-- src/components/modals/SettingsModal.jsx | 9 ++++--- src/components/modals/SourcesModal.jsx | 27 ++++++++++--------- src/components/sources/SourceTypeEditor.jsx | 19 ++++++------- 49 files changed, 261 insertions(+), 212 deletions(-) diff --git a/package.json b/package.json index af959ac0..69a8829f 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "mousetrap": "^1.6.0", "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", + "prop-types": "^15.6.0", "react": "^15.4.0", "react-addons-pure-render-mixin": "^15.4.0", "react-autocomplete": "^1.4.0", diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx index 3d8ac00d..1804686d 100644 --- a/src/components/AppLayout.jsx +++ b/src/components/AppLayout.jsx @@ -1,17 +1,18 @@ import React from 'react' +import PropTypes from 'prop-types' import ScrollContainer from './ScrollContainer' class AppLayout extends React.Component { static propTypes = { - toolbar: React.PropTypes.element.isRequired, - layerList: React.PropTypes.element.isRequired, - layerEditor: React.PropTypes.element, - map: React.PropTypes.element.isRequired, - bottom: React.PropTypes.element, + toolbar: PropTypes.element.isRequired, + layerList: PropTypes.element.isRequired, + layerEditor: PropTypes.element, + map: PropTypes.element.isRequired, + bottom: PropTypes.element, } static childContextTypes = { - reactIconBase: React.PropTypes.object + reactIconBase: PropTypes.object } getChildContext() { diff --git a/src/components/Button.jsx b/src/components/Button.jsx index f922b9bd..d3c6ee14 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' class Button extends React.Component { static propTypes = { - onClick: React.PropTypes.func, - style: React.PropTypes.object, - className: React.PropTypes.string, + onClick: PropTypes.func, + style: PropTypes.object, + className: PropTypes.string, } render() { diff --git a/src/components/MessagePanel.jsx b/src/components/MessagePanel.jsx index f374ebd6..f5e4c819 100644 --- a/src/components/MessagePanel.jsx +++ b/src/components/MessagePanel.jsx @@ -1,9 +1,10 @@ import React from 'react' +import PropTypes from 'prop-types' class MessagePanel extends React.Component { static propTypes = { - errors: React.PropTypes.array, - infos: React.PropTypes.array, + errors: PropTypes.array, + infos: PropTypes.array, } render() { diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 9bf7ad68..91f56207 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import FileReaderInput from 'react-file-reader-input' import classnames from 'classnames' @@ -49,14 +50,14 @@ function ToolbarAction(props) { export default class Toolbar extends React.Component { static propTypes = { - mapStyle: React.PropTypes.object.isRequired, - inspectModeEnabled: React.PropTypes.bool.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + inspectModeEnabled: PropTypes.bool.isRequired, + onStyleChanged: PropTypes.func.isRequired, // A new style has been uploaded - onStyleOpen: React.PropTypes.func.isRequired, + onStyleOpen: PropTypes.func.isRequired, // A dict of source id's and the available source layers - sources: React.PropTypes.object.isRequired, - onInspectModeToggle: React.PropTypes.func.isRequired + sources: PropTypes.object.isRequired, + onInspectModeToggle: PropTypes.func.isRequired } constructor(props) { diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index 2f5343c2..7599533f 100644 --- a/src/components/fields/ColorField.jsx +++ b/src/components/fields/ColorField.jsx @@ -1,6 +1,7 @@ import React from 'react' import Color from 'color' import ChromePicker from 'react-color/lib/components/chrome/Chrome' +import PropTypes from 'prop-types' function formatColor(color) { const rgb = color.rgb @@ -10,12 +11,12 @@ function formatColor(color) { /*** Number fields with support for min, max and units and documentation*/ class ColorField extends React.Component { static propTypes = { - onChange: React.PropTypes.func.isRequired, - name: React.PropTypes.string.isRequired, - value: React.PropTypes.string, - doc: React.PropTypes.string, - style: React.PropTypes.object, - default: React.PropTypes.string, + onChange: PropTypes.func.isRequired, + name: PropTypes.string.isRequired, + value: PropTypes.string, + doc: PropTypes.string, + style: PropTypes.object, + default: PropTypes.string, } constructor(props) { diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index d13efb62..9af6a860 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -1,12 +1,13 @@ import React from 'react' +import PropTypes from 'prop-types' export default class DocLabel extends React.Component { static propTypes = { - label: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.string + label: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string ]).isRequired, - doc: React.PropTypes.string.isRequired, + doc: PropTypes.string.isRequired, } render() { diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index 2b7383b9..9f5b3f6d 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -14,6 +14,7 @@ import DeleteIcon from 'react-icons/lib/md/delete' import FunctionIcon from 'react-icons/lib/md/functions' import MdInsertChart from 'react-icons/lib/md/insert-chart' +import PropTypes from 'prop-types' import capitalize from 'lodash.capitalize' function isZoomField(value) { @@ -29,16 +30,16 @@ function isDataField(value) { */ export default class FunctionSpecProperty extends React.Component { static propTypes = { - onChange: React.PropTypes.func.isRequired, - fieldName: React.PropTypes.string.isRequired, - fieldSpec: React.PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + fieldName: PropTypes.string.isRequired, + fieldSpec: PropTypes.object.isRequired, - value: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.bool, - React.PropTypes.array + value: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.number, + PropTypes.bool, + PropTypes.array ]), } diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx index fc178929..5d3c72c1 100644 --- a/src/components/fields/PropertyGroup.jsx +++ b/src/components/fields/PropertyGroup.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import FunctionSpecField from './FunctionSpecField' const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image'] @@ -35,10 +36,10 @@ function getGroupName(spec, layerType, fieldName) { export default class PropertyGroup extends React.Component { static propTypes = { - layer: React.PropTypes.object.isRequired, - groupFields: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func.isRequired, - spec: React.PropTypes.object.isRequired, + layer: PropTypes.object.isRequired, + groupFields: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + spec: PropTypes.object.isRequired, } onPropertyChange(property, newValue) { diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx index 9f081444..00796ef4 100644 --- a/src/components/fields/SpecField.jsx +++ b/src/components/fields/SpecField.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import color from 'color' import ColorField from './ColorField' @@ -36,17 +37,17 @@ function optionsLabelLength(options) { * to display @{value}. */ export default class SpecField extends React.Component { static propTypes = { - onChange: React.PropTypes.func.isRequired, - fieldName: React.PropTypes.string.isRequired, - fieldSpec: React.PropTypes.object.isRequired, - value: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.array, - React.PropTypes.bool + onChange: PropTypes.func.isRequired, + fieldName: PropTypes.string.isRequired, + fieldSpec: PropTypes.object.isRequired, + value: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.array, + PropTypes.bool ]), /** Override the style of the field */ - style: React.PropTypes.object, + style: PropTypes.object, } render() { diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index 8641548e..c16f5e65 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import { combiningFilterOps } from '../../libs/filterops.js' import styleSpec from '@mapbox/mapbox-gl-style-spec' @@ -26,9 +27,9 @@ function hasNestedCombiningFilter(filter) { export default class CombiningFilterEditor extends React.Component { static propTypes = { /** Properties of the vector layer and the available fields */ - properties: React.PropTypes.object, - filter: React.PropTypes.array, - onChange: React.PropTypes.func.isRequired, + properties: PropTypes.object, + filter: PropTypes.array, + onChange: PropTypes.func.isRequired, } // Convert filter to combining filter diff --git a/src/components/filter/FilterEditorBlock.jsx b/src/components/filter/FilterEditorBlock.jsx index 8395b723..3c2b9b1b 100644 --- a/src/components/filter/FilterEditorBlock.jsx +++ b/src/components/filter/FilterEditorBlock.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' import Button from '../Button' import DeleteIcon from 'react-icons/lib/md/delete' class FilterEditorBlock extends React.Component { static propTypes = { - onDelete: React.PropTypes.func.isRequired, - children: React.PropTypes.element.isRequired, + onDelete: PropTypes.func.isRequired, + children: PropTypes.element.isRequired, } render() { diff --git a/src/components/filter/SingleFilterEditor.jsx b/src/components/filter/SingleFilterEditor.jsx index f7af98d4..92057657 100644 --- a/src/components/filter/SingleFilterEditor.jsx +++ b/src/components/filter/SingleFilterEditor.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import { otherFilterOps } from '../../libs/filterops.js' import StringInput from '../inputs/StringInput' @@ -36,9 +37,9 @@ function parseFilter(v) { class SingleFilterEditor extends React.Component { static propTypes = { - filter: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func.isRequired, - properties: React.PropTypes.object, + filter: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + properties: PropTypes.object, } static defaultProps = { diff --git a/src/components/icons/LayerIcon.jsx b/src/components/icons/LayerIcon.jsx index 5c75c455..790ca3ad 100644 --- a/src/components/icons/LayerIcon.jsx +++ b/src/components/icons/LayerIcon.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import LineIcon from './LineIcon.jsx' import FillIcon from './FillIcon.jsx' @@ -8,8 +9,8 @@ import CircleIcon from './CircleIcon.jsx' class LayerIcon extends React.Component { static propTypes = { - type: React.PropTypes.string.isRequired, - style: React.PropTypes.object, + type: PropTypes.string.isRequired, + style: PropTypes.object, } render() { diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx index cbf3a256..69a01d52 100644 --- a/src/components/inputs/ArrayInput.jsx +++ b/src/components/inputs/ArrayInput.jsx @@ -1,14 +1,15 @@ import React from 'react' +import PropTypes from 'prop-types' import StringInput from './StringInput' import NumberInput from './NumberInput' class ArrayInput extends React.Component { static propTypes = { - value: React.PropTypes.array, - type: React.PropTypes.string, - length: React.PropTypes.number, - default: React.PropTypes.array, - onChange: React.PropTypes.func, + value: PropTypes.array, + type: PropTypes.string, + length: PropTypes.number, + default: PropTypes.array, + onChange: PropTypes.func, } changeValue(idx, newValue) { diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx index c2b4c1f6..2ee4c42f 100644 --- a/src/components/inputs/AutocompleteInput.jsx +++ b/src/components/inputs/AutocompleteInput.jsx @@ -1,13 +1,14 @@ import React from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' import Autocomplete from 'react-autocomplete' class AutocompleteInput extends React.Component { static propTypes = { - value: React.PropTypes.string, - options: React.PropTypes.array, - onChange: React.PropTypes.func, + value: PropTypes.string, + options: PropTypes.array, + onChange: PropTypes.func, } static defaultProps = { diff --git a/src/components/inputs/CheckboxInput.jsx b/src/components/inputs/CheckboxInput.jsx index cfe5b3d1..94e89024 100644 --- a/src/components/inputs/CheckboxInput.jsx +++ b/src/components/inputs/CheckboxInput.jsx @@ -1,10 +1,11 @@ import React from 'react' +import PropTypes from 'prop-types' class CheckboxInput extends React.Component { static propTypes = { - value: React.PropTypes.bool.isRequired, - style: React.PropTypes.object, - onChange: React.PropTypes.func, + value: PropTypes.bool.isRequired, + style: PropTypes.object, + onChange: PropTypes.func, } render() { diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx index 1a864dd7..edbc9b51 100644 --- a/src/components/inputs/DynamicArrayInput.jsx +++ b/src/components/inputs/DynamicArrayInput.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import StringInput from './StringInput' import NumberInput from './NumberInput' import Button from '../Button' @@ -8,10 +9,10 @@ import DocLabel from '../fields/DocLabel' class DynamicArrayInput extends React.Component { static propTypes = { - value: React.PropTypes.array, - type: React.PropTypes.string, - default: React.PropTypes.array, - onChange: React.PropTypes.func, + value: PropTypes.array, + type: PropTypes.string, + default: PropTypes.array, + onChange: PropTypes.func, } changeValue(idx, newValue) { diff --git a/src/components/inputs/FontInput.jsx b/src/components/inputs/FontInput.jsx index fa1b3726..c879ceaa 100644 --- a/src/components/inputs/FontInput.jsx +++ b/src/components/inputs/FontInput.jsx @@ -1,12 +1,13 @@ import React from 'react' +import PropTypes from 'prop-types' import AutocompleteInput from './AutocompleteInput' class FontInput extends React.Component { static propTypes = { - value: React.PropTypes.array.isRequired, - fonts: React.PropTypes.array, - style: React.PropTypes.object, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.array.isRequired, + fonts: PropTypes.array, + style: PropTypes.object, + onChange: PropTypes.func.isRequired, } static defaultProps = { diff --git a/src/components/inputs/IconInput.jsx b/src/components/inputs/IconInput.jsx index 9f6bc33f..daff7e7c 100644 --- a/src/components/inputs/IconInput.jsx +++ b/src/components/inputs/IconInput.jsx @@ -1,13 +1,14 @@ import React from 'react' +import PropTypes from 'prop-types' import AutocompleteInput from './AutocompleteInput' class IconInput extends React.Component { static propTypes = { - value: React.PropTypes.array, - icons: React.PropTypes.array, - style: React.PropTypes.object, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.array, + icons: PropTypes.array, + style: PropTypes.object, + onChange: PropTypes.func.isRequired, } static defaultProps = { diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index b537a521..0550fbe2 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -1,18 +1,19 @@ import React from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' import DocLabel from '../fields/DocLabel' /** Wrap a component with a label */ class InputBlock extends React.Component { static propTypes = { - label: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.element, + label: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, ]).isRequired, - doc: React.PropTypes.string, - action: React.PropTypes.element, - children: React.PropTypes.element.isRequired, - style: React.PropTypes.object, + doc: PropTypes.string, + action: PropTypes.element, + children: PropTypes.element.isRequired, + style: PropTypes.object, } onChange(e) { diff --git a/src/components/inputs/MultiButtonInput.jsx b/src/components/inputs/MultiButtonInput.jsx index 20265be1..4b8891da 100644 --- a/src/components/inputs/MultiButtonInput.jsx +++ b/src/components/inputs/MultiButtonInput.jsx @@ -1,12 +1,13 @@ import React from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' import Button from '../Button' class MultiButtonInput extends React.Component { static propTypes = { - value: React.PropTypes.string.isRequired, - options: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + options: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index 9ae6dd4d..c57af00c 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -1,12 +1,13 @@ import React from 'react' +import PropTypes from 'prop-types' class NumberInput extends React.Component { static propTypes = { - value: React.PropTypes.number, - default: React.PropTypes.number, - min: React.PropTypes.number, - max: React.PropTypes.number, - onChange: React.PropTypes.func, + value: PropTypes.number, + default: PropTypes.number, + min: PropTypes.number, + max: PropTypes.number, + onChange: PropTypes.func, } constructor(props) { diff --git a/src/components/inputs/SelectInput.jsx b/src/components/inputs/SelectInput.jsx index 13a8b274..145c78f4 100644 --- a/src/components/inputs/SelectInput.jsx +++ b/src/components/inputs/SelectInput.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' class SelectInput extends React.Component { static propTypes = { - value: React.PropTypes.string.isRequired, - options: React.PropTypes.array.isRequired, - style: React.PropTypes.object, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + options: PropTypes.array.isRequired, + style: PropTypes.object, + onChange: PropTypes.func.isRequired, } diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 5b7753e2..fe1ec524 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' class StringInput extends React.Component { static propTypes = { - value: React.PropTypes.string, - style: React.PropTypes.object, - default: React.PropTypes.string, - onChange: React.PropTypes.func, + value: PropTypes.string, + style: PropTypes.object, + default: PropTypes.string, + onChange: PropTypes.func, } constructor(props) { diff --git a/src/components/layers/Collapser.jsx b/src/components/layers/Collapser.jsx index 19410a52..186c4412 100644 --- a/src/components/layers/Collapser.jsx +++ b/src/components/layers/Collapser.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down' import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up' export default class Collapser extends React.Component { static propTypes = { - isCollapsed: React.PropTypes.bool.isRequired, - style: React.PropTypes.object, + isCollapsed: PropTypes.bool.isRequired, + style: PropTypes.object, } render() { diff --git a/src/components/layers/CommentBlock.jsx b/src/components/layers/CommentBlock.jsx index ac8bee61..961bd7de 100644 --- a/src/components/layers/CommentBlock.jsx +++ b/src/components/layers/CommentBlock.jsx @@ -1,12 +1,13 @@ import React from 'react' +import PropTypes from 'prop-types' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' class MetadataBlock extends React.Component { static propTypes = { - value: React.PropTypes.string, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 5f27055f..69b5d38b 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import CodeMirror from 'react-codemirror' import InputBlock from '../inputs/InputBlock' @@ -18,8 +19,8 @@ import '../../vendor/codemirror/addon/lint/json-lint' class JSONEditor extends React.Component { static propTypes = { - layer: React.PropTypes.object.isRequired, - onChange: React.PropTypes.func, + layer: PropTypes.object.isRequired, + onChange: PropTypes.func, } constructor(props) { diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 4494b855..2184388e 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/src/components/layers/LayerEditor.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import JSONEditor from './JSONEditor' import FilterEditor from '../filter/FilterEditor' @@ -43,12 +44,12 @@ function layoutGroups(layerType) { /** Layer editor supporting multiple types of layers. */ export default class LayerEditor extends React.Component { static propTypes = { - layer: React.PropTypes.object.isRequired, - sources: React.PropTypes.object, - vectorLayers: React.PropTypes.object, - spec: React.PropTypes.object.isRequired, - onLayerChanged: React.PropTypes.func, - onLayerIdChange: React.PropTypes.func, + layer: PropTypes.object.isRequired, + sources: PropTypes.object, + vectorLayers: PropTypes.object, + spec: PropTypes.object.isRequired, + onLayerChanged: PropTypes.func, + onLayerIdChange: PropTypes.func, } static defaultProps = { @@ -58,7 +59,7 @@ export default class LayerEditor extends React.Component { } static childContextTypes = { - reactIconBase: React.PropTypes.object + reactIconBase: PropTypes.object } constructor(props) { diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx index 5c4f86f1..7c82fc1c 100644 --- a/src/components/layers/LayerEditorGroup.jsx +++ b/src/components/layers/LayerEditorGroup.jsx @@ -1,13 +1,14 @@ import React from 'react' +import PropTypes from 'prop-types' import Collapse from 'react-collapse' import Collapser from './Collapser' export default class LayerEditorGroup extends React.Component { static propTypes = { - title: React.PropTypes.string.isRequired, - isActive: React.PropTypes.bool.isRequired, - children: React.PropTypes.element.isRequired, - onActiveToggle: React.PropTypes.func.isRequired + title: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired, + children: PropTypes.element.isRequired, + onActiveToggle: PropTypes.func.isRequired } render() { diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx index 831b75c5..fe0f1584 100644 --- a/src/components/layers/LayerIdBlock.jsx +++ b/src/components/layers/LayerIdBlock.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -6,8 +7,8 @@ import StringInput from '../inputs/StringInput' class LayerIdBlock extends React.Component { static propTypes = { - value: React.PropTypes.string.isRequired, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index 00bf33ef..8853dc2e 100644 --- a/src/components/layers/LayerList.jsx +++ b/src/components/layers/LayerList.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import classnames from 'classnames' import cloneDeep from 'lodash.clonedeep' @@ -12,11 +13,11 @@ import style from '../../libs/style.js' import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc'; const layerListPropTypes = { - layers: React.PropTypes.array.isRequired, - selectedLayerIndex: React.PropTypes.number.isRequired, - onLayersChange: React.PropTypes.func.isRequired, - onLayerSelect: React.PropTypes.func, - sources: React.PropTypes.object.isRequired, + layers: PropTypes.array.isRequired, + selectedLayerIndex: PropTypes.number.isRequired, + onLayersChange: PropTypes.func.isRequired, + onLayerSelect: PropTypes.func, + sources: PropTypes.object.isRequired, } function layerPrefix(name) { diff --git a/src/components/layers/LayerListGroup.jsx b/src/components/layers/LayerListGroup.jsx index 7694014d..ccf7f384 100644 --- a/src/components/layers/LayerListGroup.jsx +++ b/src/components/layers/LayerListGroup.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' import Collapser from './Collapser' export default class LayerListGroup extends React.Component { static propTypes = { - title: React.PropTypes.string.isRequired, - isActive: React.PropTypes.bool.isRequired, - onActiveToggle: React.PropTypes.func.isRequired + title: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired, + onActiveToggle: PropTypes.func.isRequired } render() { diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 6b1420e9..4d31cf12 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import Color from 'color' import classnames from 'classnames' @@ -30,8 +31,8 @@ class LayerTypeDragHandle extends React.Component { class IconAction extends React.Component { static propTypes = { - action: React.PropTypes.string.isRequired, - onClick: React.PropTypes.func.isRequired, + action: PropTypes.string.isRequired, + onClick: PropTypes.func.isRequired, } renderIcon() { @@ -57,16 +58,16 @@ class IconAction extends React.Component { @SortableElement class LayerListItem extends React.Component { static propTypes = { - layerId: React.PropTypes.string.isRequired, - layerType: React.PropTypes.string.isRequired, - isSelected: React.PropTypes.bool, - visibility: React.PropTypes.string, - className: React.PropTypes.string, + layerId: PropTypes.string.isRequired, + layerType: PropTypes.string.isRequired, + isSelected: PropTypes.bool, + visibility: PropTypes.string, + className: PropTypes.string, - onLayerSelect: React.PropTypes.func.isRequired, - onLayerCopy: React.PropTypes.func, - onLayerDestroy: React.PropTypes.func, - onLayerVisibilityToggle: React.PropTypes.func, + onLayerSelect: PropTypes.func.isRequired, + onLayerCopy: PropTypes.func, + onLayerDestroy: PropTypes.func, + onLayerVisibilityToggle: PropTypes.func, } static defaultProps = { @@ -78,7 +79,7 @@ class LayerListItem extends React.Component { } static childContextTypes = { - reactIconBase: React.PropTypes.object + reactIconBase: PropTypes.object } getChildContext() { diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx index b9bea695..e506d61f 100644 --- a/src/components/layers/LayerSourceBlock.jsx +++ b/src/components/layers/LayerSourceBlock.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -8,9 +9,9 @@ import AutocompleteInput from '../inputs/AutocompleteInput' class LayerSourceBlock extends React.Component { static propTypes = { - value: React.PropTypes.string, - onChange: React.PropTypes.func, - sourceIds: React.PropTypes.array, + value: PropTypes.string, + onChange: PropTypes.func, + sourceIds: PropTypes.array, } static defaultProps = { diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx index 012c876c..2faf6666 100644 --- a/src/components/layers/LayerSourceLayerBlock.jsx +++ b/src/components/layers/LayerSourceLayerBlock.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -8,9 +9,9 @@ import AutocompleteInput from '../inputs/AutocompleteInput' class LayerSourceLayer extends React.Component { static propTypes = { - value: React.PropTypes.string, - onChange: React.PropTypes.func, - sourceLayerIds: React.PropTypes.array, + value: PropTypes.string, + onChange: PropTypes.func, + sourceLayerIds: PropTypes.array, } static defaultProps = { diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx index c2b98b10..6924b536 100644 --- a/src/components/layers/LayerTypeBlock.jsx +++ b/src/components/layers/LayerTypeBlock.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -6,8 +7,8 @@ import SelectInput from '../inputs/SelectInput' class LayerTypeBlock extends React.Component { static propTypes = { - value: React.PropTypes.string.isRequired, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx index 1989de46..bdd22010 100644 --- a/src/components/layers/MaxZoomBlock.jsx +++ b/src/components/layers/MaxZoomBlock.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -6,8 +7,8 @@ import NumberInput from '../inputs/NumberInput' class MaxZoomBlock extends React.Component { static propTypes = { - value: React.PropTypes.number, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.number, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index 5483376c..cebde0f4 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -6,8 +7,8 @@ import NumberInput from '../inputs/NumberInput' class MinZoomBlock extends React.Component { static propTypes = { - value: React.PropTypes.number, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.number, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 11b50193..4bf6f249 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import ReactDOM from 'react-dom' import MapboxGl from 'mapbox-gl' import MapboxInspect from 'mapbox-gl-inspect' @@ -57,10 +58,10 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) { export default class MapboxGlMap extends React.Component { static propTypes = { - onDataChange: React.PropTypes.func, - mapStyle: React.PropTypes.object.isRequired, - inspectModeEnabled: React.PropTypes.bool.isRequired, - highlightedLayer: React.PropTypes.object, + onDataChange: PropTypes.func, + mapStyle: PropTypes.object.isRequired, + inspectModeEnabled: PropTypes.bool.isRequired, + highlightedLayer: PropTypes.object, } static defaultProps = { diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index 650b90f2..6ca3852f 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/src/components/map/OpenLayers3Map.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import style from '../../libs/style.js' import isEqual from 'lodash.isequal' import { loadJSON } from '../../libs/urlopen' @@ -65,9 +66,9 @@ function sourceFromTileJSON(url, cb) { class OpenLayers3Map extends React.Component { static propTypes = { - onDataChange: React.PropTypes.func, - mapStyle: React.PropTypes.object.isRequired, - accessToken: React.PropTypes.string, + onDataChange: PropTypes.func, + mapStyle: PropTypes.object.isRequired, + accessToken: PropTypes.string, } static defaultProps = { diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx index d08a539c..24a4638d 100644 --- a/src/components/modals/AddModal.jsx +++ b/src/components/modals/AddModal.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import Button from '../Button' import InputBlock from '../inputs/InputBlock' @@ -13,13 +14,13 @@ import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock' class AddModal extends React.Component { static propTypes = { - layers: React.PropTypes.array.isRequired, - onLayersChange: React.PropTypes.func.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + layers: PropTypes.array.isRequired, + onLayersChange: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, // A dict of source id's and the available source layers - sources: React.PropTypes.object.isRequired, + sources: PropTypes.object.isRequired, } addLayer() { diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index fd00a6f9..cfbffb30 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import { saveAs } from 'file-saver' import styleSpec from '@mapbox/mapbox-gl-style-spec' @@ -17,8 +18,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard' class Gist extends React.Component { static propTypes = { - mapStyle: React.PropTypes.object.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + onStyleChanged: PropTypes.func.isRequired, } constructor(props) { @@ -197,10 +198,10 @@ function stripAccessTokens(mapStyle) { class ExportModal extends React.Component { static propTypes = { - mapStyle: React.PropTypes.object.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + onStyleChanged: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, } constructor(props) { diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx index cafbdfad..a469940a 100644 --- a/src/components/modals/Modal.jsx +++ b/src/components/modals/Modal.jsx @@ -1,12 +1,13 @@ import React from 'react' +import PropTypes from 'prop-types' import CloseIcon from 'react-icons/lib/md/close' import Overlay from './Overlay' class Modal extends React.Component { static propTypes = { - isOpen: React.PropTypes.bool.isRequired, - title: React.PropTypes.string.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + title: PropTypes.string.isRequired, + onOpenToggle: PropTypes.func.isRequired, } render() { diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 08d7e9d7..df9f5658 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import Modal from './Modal' import Button from '../Button' import FileReaderInput from 'react-file-reader-input' @@ -12,10 +13,10 @@ import publicStyles from '../../config/styles.json' class PublicStyle extends React.Component { static propTypes = { - url: React.PropTypes.string.isRequired, - thumbnailUrl: React.PropTypes.string.isRequired, - title: React.PropTypes.string.isRequired, - onSelect: React.PropTypes.func.isRequired, + url: PropTypes.string.isRequired, + thumbnailUrl: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + onSelect: PropTypes.func.isRequired, } render() { @@ -41,9 +42,9 @@ class PublicStyle extends React.Component { class OpenModal extends React.Component { static propTypes = { - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, - onStyleOpen: React.PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, + onStyleOpen: PropTypes.func.isRequired, } constructor(props) { diff --git a/src/components/modals/Overlay.jsx b/src/components/modals/Overlay.jsx index 29849bed..75374785 100644 --- a/src/components/modals/Overlay.jsx +++ b/src/components/modals/Overlay.jsx @@ -1,10 +1,11 @@ import React from 'react' +import PropTypes from 'prop-types' class Overlay extends React.Component { static propTypes = { - isOpen: React.PropTypes.bool.isRequired, - children: React.PropTypes.element.isRequired + isOpen: PropTypes.bool.isRequired, + children: PropTypes.element.isRequired } render() { diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index d3bc5b96..a5e59b50 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' @@ -8,10 +9,10 @@ import Modal from './Modal' class SettingsModal extends React.Component { static propTypes = { - mapStyle: React.PropTypes.object.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + onStyleChanged: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, } constructor(props) { diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index 532db932..26eff125 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/src/components/modals/SourcesModal.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import Modal from './Modal' import Button from '../Button' @@ -16,10 +17,10 @@ import DeleteIcon from 'react-icons/lib/md/delete' class PublicSource extends React.Component { static propTypes = { - id: React.PropTypes.string.isRequired, - type: React.PropTypes.string.isRequired, - title: React.PropTypes.string.isRequired, - onSelect: React.PropTypes.func.isRequired, + id: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + onSelect: PropTypes.func.isRequired, } render() { @@ -54,10 +55,10 @@ function editorMode(source) { class ActiveSourceTypeEditor extends React.Component { static propTypes = { - sourceId: React.PropTypes.string.isRequired, - source: React.PropTypes.object.isRequired, - onDelete: React.PropTypes.func.isRequired, - onChange: React.PropTypes.func.isRequired, + sourceId: PropTypes.string.isRequired, + source: PropTypes.object.isRequired, + onDelete: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, } render() { @@ -87,7 +88,7 @@ class ActiveSourceTypeEditor extends React.Component { class AddSource extends React.Component { static propTypes = { - onAdd: React.PropTypes.func.isRequired, + onAdd: PropTypes.func.isRequired, } constructor(props) { @@ -167,10 +168,10 @@ class AddSource extends React.Component { class SourcesModal extends React.Component { static propTypes = { - mapStyle: React.PropTypes.object.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, + onStyleChanged: PropTypes.func.isRequired, } stripTitle(source) { diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index 2718767c..65a403d8 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import styleSpec from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' @@ -6,8 +7,8 @@ import NumberInput from '../inputs/NumberInput' class TileJSONSourceEditor extends React.Component { static propTypes = { - source: React.PropTypes.object.isRequired, - onChange: React.PropTypes.func.isRequired, + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, } render() { @@ -25,8 +26,8 @@ class TileJSONSourceEditor extends React.Component { class TileURLSourceEditor extends React.Component { static propTypes = { - source: React.PropTypes.object.isRequired, - onChange: React.PropTypes.func.isRequired, + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, } changeTileUrl(idx, value) { @@ -79,8 +80,8 @@ class TileURLSourceEditor extends React.Component { class GeoJSONSourceEditor extends React.Component { static propTypes = { - source: React.PropTypes.object.isRequired, - onChange: React.PropTypes.func.isRequired, + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, } render() { @@ -98,9 +99,9 @@ class GeoJSONSourceEditor extends React.Component { class SourceTypeEditor extends React.Component { static propTypes = { - mode: React.PropTypes.string.isRequired, - source: React.PropTypes.object.isRequired, - onChange: React.PropTypes.func.isRequired, + mode: PropTypes.string.isRequired, + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, } render() { From a4c6a1835393f45fe7e8f858d58106c3d146fb08 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 15:35:29 +0000 Subject: [PATCH 058/144] Updated react-sortable-hoc to 0.6.8 to remove prop-types warnings. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 69a8829f..a39a1259 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "react-icon-base": "^2.0.4", "react-icons": "^2.2.1", "react-motion": "^0.4.7", - "react-sortable-hoc": "^0.4.5", + "react-sortable-hoc": "^0.6.8", "reconnecting-websocket": "^3.0.3", "request": "^2.79.0", "url": "^0.11.0" From a791403a6ad2fba50e878d939e628c05b3a73155 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:11:42 +0000 Subject: [PATCH 059/144] Updated deps fixed for clean install. --- package.json | 112 +++++++++++++++++++++++++-------------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/package.json b/package.json index a39a1259..3d9ed718 100644 --- a/package.json +++ b/package.json @@ -20,41 +20,41 @@ "license": "MIT", "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { - "@mapbox/mapbox-gl-rtl-text": "^0.1.0", + "@mapbox/mapbox-gl-rtl-text": "^0.1.1", "@mapbox/mapbox-gl-style-spec": "^9.0.1", "classnames": "^2.2.5", - "codemirror": "^5.18.2", - "color": "^1.0.3", - "file-saver": "^1.3.2", + "codemirror": "^5.31.0", + "color": "^2.0.0", + "file-saver": "^1.3.3", "github-api": "^3.0.0", - "jsonlint": "josdejong/jsonlint#85a19d7", + "jsonlint": "github:josdejong/jsonlint#85a19d7", "lodash.capitalize": "^4.2.1", "lodash.clonedeep": "^4.5.0", - "lodash.isequal": "^4.4.0", + "lodash.isequal": "^4.5.0", "lodash.throttle": "^4.1.1", - "mapbox-gl": "^0.40.1", - "mapbox-gl-inspect": "^1.2.3", + "mapbox-gl": "^0.41.0", + "mapbox-gl-inspect": "^1.2.4", "maputnik-design": "github:maputnik/design", - "mousetrap": "^1.6.0", - "ol-mapbox-style": "1.0.1", - "openlayers": "^3.19.1", + "mousetrap": "^1.6.1", + "ol-mapbox-style": "^1.0.1", + "openlayers": "^4.4.2", "prop-types": "^15.6.0", - "react": "^15.4.0", - "react-addons-pure-render-mixin": "^15.4.0", - "react-autocomplete": "^1.4.0", + "react": "^15.6.2", + "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.10.0", + "react-color": "^2.13.8", "react-copy-to-clipboard": "^5.0.1", - "react-dom": "^15.4.0", - "react-file-reader-input": "^1.1.0", + "react-dom": "^15.6.2", + "react-file-reader-input": "^1.1.4", "react-height": "^3.0.0", - "react-icon-base": "^2.0.4", - "react-icons": "^2.2.1", - "react-motion": "^0.4.7", + "react-icon-base": "^2.1.1", + "react-icons": "^2.2.7", + "react-motion": "^0.5.2", "react-sortable-hoc": "^0.6.8", - "reconnecting-websocket": "^3.0.3", - "request": "^2.79.0", + "reconnecting-websocket": "^3.2.2", + "request": "^2.83.0", "url": "^0.11.0" }, "jshintConfig": { @@ -87,45 +87,45 @@ } }, "devDependencies": { - "babel-core": "6.21.0", - "babel-eslint": "^7.1.1", - "babel-loader": "6.2.10", - "babel-plugin-transform-class-properties": "^6.11.5", + "babel-core": "^6.21.0", + "babel-eslint": "^7.2.3", + "babel-loader": "^6.2.10", + "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-plugin-transform-flow-strip-types": "^6.21.0", - "babel-plugin-transform-object-rest-spread": "^6.8.0", - "babel-plugin-transform-runtime": "^6.15.0", - "babel-preset-es2015": "6.18.0", - "babel-preset-react": "6.16.0", - "babel-runtime": "^6.11.6", + "babel-plugin-transform-flow-strip-types": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-plugin-transform-runtime": "^6.23.0", + "babel-preset-es2015": "^6.18.0", + "babel-preset-react": "^6.16.0", + "babel-runtime": "^6.26.0", "base64-loader": "^1.0.0", - "css-loader": "0.26.1", - "eslint": "^3.5.0", - "eslint-plugin-react": "^6.2.0", + "css-loader": "^0.26.1", + "eslint": "^3.19.0", + "eslint-plugin-react": "^6.10.3", "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.11.1", - "html-webpack-plugin": "^2.22.0", - "json-loader": "^0.5.4", - "karma": "^1.3.0", - "karma-chrome-launcher": "^2.0.0", - "karma-firefox-launcher": "^1.0.0", + "file-loader": "^0.11.2", + "html-webpack-plugin": "^2.30.1", + "json-loader": "^0.5.7", + "karma": "^1.7.1", + "karma-chrome-launcher": "^2.2.0", + "karma-firefox-launcher": "^1.0.1", "karma-mocha": "^1.3.0", - "karma-webpack": "^2.0.1", - "mocha": "^3.1.2", - "mocha-loader": "^1.0.0", - "node-sass": "^4.2.0", - "react-hot-loader": "^3.0.0-beta.6", - "sass-loader": "^4.0.1", - "style-loader": "0.13.1", - "stylelint": "^7.7.1", + "karma-webpack": "^2.0.5", + "mocha": "^3.5.3", + "mocha-loader": "^1.1.1", + "node-sass": "^4.6.0", + "react-hot-loader": "^3.1.1", + "sass-loader": "^4.1.1", + "style-loader": "^0.13.1", + "stylelint": "^7.13.0", "stylelint-config-standard": "^15.0.1", - "transform-loader": "^0.2.3", - "wdio-mocha-framework": "^0.5.9", + "transform-loader": "^0.2.4", + "wdio-mocha-framework": "^0.5.11", "wdio-phantomjs-service": "^0.2.2", - "wdio-spec-reporter": "^0.1.0", - "webdriverio": "^4.6.2", - "webpack": "1.14.0", - "webpack-cleanup-plugin": "^0.4.1", - "webpack-dev-server": "1.16.2" + "wdio-spec-reporter": "^0.1.2", + "webdriverio": "^4.8.0", + "webpack": "^1.14.0", + "webpack-cleanup-plugin": "^0.4.2", + "webpack-dev-server": "^1.16.2" } } From c050b02b8bb91457c0919d0a1bab89b30f3064f7 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:21:39 +0000 Subject: [PATCH 060/144] Updated '@mapbox/mapbox-gl-style-spec' --- package.json | 2 +- src/components/App.jsx | 2 +- src/components/filter/FilterEditor.jsx | 2 +- src/components/layers/LayerIdBlock.jsx | 2 +- src/components/layers/LayerSourceBlock.jsx | 2 +- src/components/layers/LayerSourceLayerBlock.jsx | 2 +- src/components/layers/LayerTypeBlock.jsx | 2 +- src/components/layers/MaxZoomBlock.jsx | 2 +- src/components/layers/MinZoomBlock.jsx | 2 +- src/components/modals/ExportModal.jsx | 2 +- src/components/modals/SettingsModal.jsx | 2 +- src/components/modals/SourcesModal.jsx | 2 +- src/components/sources/SourceTypeEditor.jsx | 2 +- src/libs/diffmessage.js | 2 +- src/libs/filterops.js | 2 +- src/libs/layer.js | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 3d9ed718..b0f45c3e 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { "@mapbox/mapbox-gl-rtl-text": "^0.1.1", - "@mapbox/mapbox-gl-style-spec": "^9.0.1", + "@mapbox/mapbox-gl-style-spec": "^10.0.1", "classnames": "^2.2.5", "codemirror": "^5.31.0", "color": "^2.0.0", diff --git a/src/components/App.jsx b/src/components/App.jsx index 4f0f68c7..2fb38d27 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -10,7 +10,7 @@ import AppLayout from './AppLayout' import MessagePanel from './MessagePanel' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import style from '../libs/style.js' import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen' import { undoMessages, redoMessages } from '../libs/diffmessage' diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index c16f5e65..73cb2f13 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { combiningFilterOps } from '../../libs/filterops.js' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import DocLabel from '../fields/DocLabel' import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx index fe0f1584..77abb113 100644 --- a/src/components/layers/LayerIdBlock.jsx +++ b/src/components/layers/LayerIdBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx index e506d61f..e2070a46 100644 --- a/src/components/layers/LayerSourceBlock.jsx +++ b/src/components/layers/LayerSourceBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx index 2faf6666..b2f68923 100644 --- a/src/components/layers/LayerSourceLayerBlock.jsx +++ b/src/components/layers/LayerSourceLayerBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx index 6924b536..ee1722d2 100644 --- a/src/components/layers/LayerTypeBlock.jsx +++ b/src/components/layers/LayerTypeBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx index bdd22010..3a1a4e50 100644 --- a/src/components/layers/MaxZoomBlock.jsx +++ b/src/components/layers/MaxZoomBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index cebde0f4..d5c3f9cf 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index cfbffb30..48677b13 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { saveAs } from 'file-saver' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index a5e59b50..ef50ad26 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index 26eff125..560b17e0 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/src/components/modals/SourcesModal.jsx @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import Modal from './Modal' import Button from '../Button' import InputBlock from '../inputs/InputBlock' diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index 65a403d8..39f66d5c 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import NumberInput from '../inputs/NumberInput' diff --git a/src/libs/diffmessage.js b/src/libs/diffmessage.js index a4c01cdd..6536c3a4 100644 --- a/src/libs/diffmessage.js +++ b/src/libs/diffmessage.js @@ -1,4 +1,4 @@ -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' export function diffMessages(beforeStyle, afterStyle) { const changes = styleSpec.diff(beforeStyle, afterStyle) diff --git a/src/libs/filterops.js b/src/libs/filterops.js index 892e224d..61613e88 100644 --- a/src/libs/filterops.js +++ b/src/libs/filterops.js @@ -1,4 +1,4 @@ -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' export const combiningFilterOps = ['all', 'any', 'none'] export const setFilterOps = ['in', '!in'] export const otherFilterOps = Object diff --git a/src/libs/layer.js b/src/libs/layer.js index d6ee928c..8f9832ff 100644 --- a/src/libs/layer.js +++ b/src/libs/layer.js @@ -1,4 +1,4 @@ -import styleSpec from '@mapbox/mapbox-gl-style-spec' +import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' export function changeType(layer, newType) { const changedPaintProps = { ...layer.paint } From b3b665fcb9668bf168b54115129ec423b9abf231 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:25:24 +0000 Subject: [PATCH 061/144] Bumped react/react-dom deps. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b0f45c3e..c77ed519 100644 --- a/package.json +++ b/package.json @@ -39,14 +39,14 @@ "ol-mapbox-style": "^1.0.1", "openlayers": "^4.4.2", "prop-types": "^15.6.0", - "react": "^15.6.2", + "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": "^15.6.2", + "react-dom": "^16.0.0", "react-file-reader-input": "^1.1.4", "react-height": "^3.0.0", "react-icon-base": "^2.1.1", From 0836790daf0cf0d8bcdc01410a9d2704b6e24614 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:34:08 +0000 Subject: [PATCH 062/144] Upgraded babel dev deps. --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index c77ed519..672ba0a4 100644 --- a/package.json +++ b/package.json @@ -87,9 +87,9 @@ } }, "devDependencies": { - "babel-core": "^6.21.0", - "babel-eslint": "^7.2.3", - "babel-loader": "^6.2.10", + "babel-core": "^6.26.0", + "babel-eslint": "^8.0.2", + "babel-loader": "^7.1.2", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-flow-strip-types": "^6.22.0", From 271190f434246ad4b8a52eaf828f2ea5ed577a42 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:39:37 +0000 Subject: [PATCH 063/144] Updated more babel deps. babel-loader fixed at 7.1.1 due to --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 672ba0a4..76e2a1b8 100644 --- a/package.json +++ b/package.json @@ -89,14 +89,14 @@ "devDependencies": { "babel-core": "^6.26.0", "babel-eslint": "^8.0.2", - "babel-loader": "^7.1.2", + "babel-loader": "7.1.1", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-flow-strip-types": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-es2015": "^6.18.0", - "babel-preset-react": "^6.16.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "base64-loader": "^1.0.0", "css-loader": "^0.26.1", From eb589d4039e21fc41c85441143eb02c4a0a4a069 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:44:52 +0000 Subject: [PATCH 064/144] Updated the webpack loader deps. --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 76e2a1b8..b9605481 100644 --- a/package.json +++ b/package.json @@ -99,11 +99,11 @@ "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "base64-loader": "^1.0.0", - "css-loader": "^0.26.1", + "css-loader": "^0.28.7", "eslint": "^3.19.0", "eslint-plugin-react": "^6.10.3", "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.11.2", + "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "json-loader": "^0.5.7", "karma": "^1.7.1", @@ -115,8 +115,8 @@ "mocha-loader": "^1.1.1", "node-sass": "^4.6.0", "react-hot-loader": "^3.1.1", - "sass-loader": "^4.1.1", - "style-loader": "^0.13.1", + "sass-loader": "^6.0.6", + "style-loader": "^0.19.0", "stylelint": "^7.13.0", "stylelint-config-standard": "^15.0.1", "transform-loader": "^0.2.4", From 3015ba605d3c7025a0ddb033ee33785a68bd5505 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:48:15 +0000 Subject: [PATCH 065/144] Switched to babel-preset-env from babel-preset-es2015 See --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b9605481..599565a7 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "babel-plugin-transform-flow-strip-types": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-es2015": "^6.24.1", + "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "base64-loader": "^1.0.0", From b6ae51b5e510c61342a9db4a34a84ada418d2c26 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:52:02 +0000 Subject: [PATCH 066/144] Updated eslint deps. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 599565a7..103ac109 100644 --- a/package.json +++ b/package.json @@ -100,8 +100,8 @@ "babel-runtime": "^6.26.0", "base64-loader": "^1.0.0", "css-loader": "^0.28.7", - "eslint": "^3.19.0", - "eslint-plugin-react": "^6.10.3", + "eslint": "^4.10.0", + "eslint-plugin-react": "^7.4.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", From d4569237f52695835c6c16c31c08f0b5d33021ee Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:55:25 +0000 Subject: [PATCH 067/144] Changed es2015 to env in babelrc. --- .babelrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index 49d176dd..a3b237f0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { - "presets": ["es2015", "react"], + "presets": ["env", "react"], "plugins": ["transform-object-rest-spread", "transform-class-properties"] } From 41e1704d08043bea3d79741631c0acdf489bd417 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 10:56:08 +0000 Subject: [PATCH 068/144] Updated extract-text-webpack-plugin --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 103ac109..b947b9d9 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "css-loader": "^0.28.7", "eslint": "^4.10.0", "eslint-plugin-react": "^7.4.0", - "extract-text-webpack-plugin": "^1.0.1", + "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "json-loader": "^0.5.7", From b5ca0fa17b1eb90c9ea72068e0f88bb282fb53a4 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 11:05:30 +0000 Subject: [PATCH 069/144] Updated webpack deps. --- config/webpack.config.js | 4 ++-- config/webpack.loaders.js | 14 +++++++------- package.json | 6 +++--- src/libs/mapbox-rtl.js | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index fba07dcd..505a8bb7 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -20,7 +20,7 @@ module.exports = { filename: 'bundle.js' }, resolve: { - extensions: ['', '.js', '.jsx'] + extensions: ['.js', '.jsx'] }, module: { noParse: [ @@ -48,7 +48,7 @@ module.exports = { host: HOST }, plugins: [ - new webpack.NoErrorsPlugin(), + new webpack.NoEmitOnErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ title: 'Maputnik', diff --git a/config/webpack.loaders.js b/config/webpack.loaders.js index 05e34160..f931b7bf 100644 --- a/config/webpack.loaders.js +++ b/config/webpack.loaders.js @@ -7,23 +7,23 @@ module.exports = [ { test: /\.jsx?$/, exclude: /(.*node_modules(?![\/\\]@mapbox[\/\\]mapbox-gl-style-spec)|bower_components|public)/, - loader: 'babel', + loader: 'babel-loader', query: { - presets: ['es2015', 'react'], + presets: ['env', 'react'], plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], } }, { test: /\.(eot|ttf|woff|woff2)$/, - loader: 'file?name=fonts/[name].[ext]' + loader: 'file-loader?name=fonts/[name].[ext]' }, { test: /\.ico$/, - loader: 'file?name=[name].[ext]' + loader: 'file-loader?name=[name].[ext]' }, { test: /\.(svg|gif|jpg|png)$/, - loader: 'file?name=img/[name].[ext]' + loader: 'file-loader?name=img/[name].[ext]' }, { test: /\.json$/, @@ -36,8 +36,8 @@ module.exports = [ { test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/, loaders: [ - 'style?sourceMap', - 'css' + 'style-loader?sourceMap', + 'css-loader' ] } ]; diff --git a/package.json b/package.json index b947b9d9..2386026c 100644 --- a/package.json +++ b/package.json @@ -124,8 +124,8 @@ "wdio-phantomjs-service": "^0.2.2", "wdio-spec-reporter": "^0.1.2", "webdriverio": "^4.8.0", - "webpack": "^1.14.0", - "webpack-cleanup-plugin": "^0.4.2", - "webpack-dev-server": "^1.16.2" + "webpack": "^3.8.1", + "webpack-cleanup-plugin": "^0.5.1", + "webpack-dev-server": "^2.9.4" } } diff --git a/src/libs/mapbox-rtl.js b/src/libs/mapbox-rtl.js index 558bea2b..f9dc1997 100644 --- a/src/libs/mapbox-rtl.js +++ b/src/libs/mapbox-rtl.js @@ -1,7 +1,7 @@ import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js' // Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX. -const data = require("base64?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js"); +const data = require("base64-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js"); const blob = new window.Blob([window.atob(data)]); const objectUrl = window.URL.createObjectURL(blob, { From 5d0fbabb6a1ad6f50a72e89629ac1e1efc8cb144 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 11:07:44 +0000 Subject: [PATCH 070/144] Updated mocha dep. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2386026c..1a918bab 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "karma-firefox-launcher": "^1.0.1", "karma-mocha": "^1.3.0", "karma-webpack": "^2.0.5", - "mocha": "^3.5.3", + "mocha": "^4.0.1", "mocha-loader": "^1.1.1", "node-sass": "^4.6.0", "react-hot-loader": "^3.1.1", From f452ea0d2606a49587429e053f41784c891b03f1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 11:35:46 +0000 Subject: [PATCH 071/144] Fixed webpack production conf after updated deps. See --- config/webpack.production.config.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index f4576da0..3108b2e9 100644 --- a/config/webpack.production.config.js +++ b/config/webpack.production.config.js @@ -43,9 +43,13 @@ module.exports = { chunkFilename: '[chunkhash].js' }, resolve: { - extensions: ['', '.js', '.jsx'] + extensions: ['.js', '.jsx'] }, module: { + noParse: [ + /mapbox-gl\/dist\/mapbox-gl.js/, + /openlayers\/dist\/ol.js/ + ], loaders }, node: { @@ -55,7 +59,7 @@ module.exports = { }, plugins: [ new webpack.NoErrorsPlugin(), - new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'), + new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }), new WebpackCleanupPlugin(), new webpack.DefinePlugin({ 'process.env': { @@ -68,7 +72,6 @@ module.exports = { screw_ie8: true, } }), - new webpack.optimize.OccurenceOrderPlugin(), new ExtractTextPlugin('[contenthash].css', { allChunks: true }), From 392d1fe26d10ce0d26cd5c8ae1bc21f24c88f370 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 11:48:01 +0000 Subject: [PATCH 072/144] Added webpack-bundle-analyzer --- config/webpack.production.config.js | 11 ++++++++++- package.json | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index 3108b2e9..3675b218 100644 --- a/config/webpack.production.config.js +++ b/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) { @@ -79,6 +80,14 @@ module.exports = { template: './src/template.html', title: 'Maputnik' }), - new webpack.optimize.DedupePlugin() + new webpack.optimize.DedupePlugin(), + new BundleAnalyzerPlugin({ + analyzerMode: 'static', + defaultSizes: 'gzip', + openAnalyzer: false, + generateStatsFile: true, + reportFilename: 'bundle-stats.html', + statsFilename: 'bundle-stats.json', + }), ] }; diff --git a/package.json b/package.json index 1a918bab..d8c8f48d 100644 --- a/package.json +++ b/package.json @@ -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" } From 203aaf51b7cec5738870d4748f1e2359d77161b9 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 11:50:00 +0000 Subject: [PATCH 073/144] Removed old plugins from webpack config. --- config/webpack.production.config.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index 3108b2e9..d6dd6708 100644 --- a/config/webpack.production.config.js +++ b/config/webpack.production.config.js @@ -58,7 +58,7 @@ module.exports = { tls: 'empty' }, plugins: [ - new webpack.NoErrorsPlugin(), + new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }), new WebpackCleanupPlugin(), new webpack.DefinePlugin({ @@ -78,7 +78,6 @@ module.exports = { new HtmlWebpackPlugin({ template: './src/template.html', title: 'Maputnik' - }), - new webpack.optimize.DedupePlugin() + }) ] }; From a819154145b8b6aa4a7a4c9203cb841d0619b9dc Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 18:13:06 +0000 Subject: [PATCH 074/144] Moved to testing from webpack.production.config also added verbose logging. --- config/wdio.conf.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/config/wdio.conf.js b/config/wdio.conf.js index a44e9310..c024fec9 100644 --- a/config/wdio.conf.js +++ b/config/wdio.conf.js @@ -1,6 +1,6 @@ var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server"); -var webpackConfig = require("./webpack.config"); +var webpackConfig = require("./webpack.production.config"); var testConfig = require("../test/config/specs"); @@ -18,7 +18,7 @@ exports.config = { browserName: 'firefox' }], sync: true, - logLevel: 'silent', + logLevel: 'verbose', coloredLogs: true, bail: 0, screenshotPath: './errorShots/', @@ -36,9 +36,7 @@ exports.config = { }, onPrepare: function (config, capabilities) { var compiler = webpack(webpackConfig); - server = new WebpackDevServer(compiler, { - stats: "minimal" - }); + server = new WebpackDevServer(compiler, {}); server.listen(testConfig.port); }, onComplete: function(exitCode) { From e0b7cdf9dd550525b0bbbfc221d272176b315219 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 18:20:35 +0000 Subject: [PATCH 075/144] Removed nodejs v4 tests temporarily --- .travis.yml | 8 ++++---- appveyor.yml | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 732ef299..b88346d3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,8 +3,8 @@ addons: firefox: latest matrix: include: - - os: linux - node_js: "4" + # - os: linux + # node_js: "4" - os: linux env: CXX=g++-4.8 node_js: "5" @@ -13,8 +13,8 @@ matrix: - os: linux env: CXX=g++-4.8 node_js: "7" - - os: osx - node_js: "4" + # - os: osx + # node_js: "4" - os: osx node_js: "5" - os: osx diff --git a/appveyor.yml b/appveyor.yml index 274ccf19..61f4ecf2 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -1,6 +1,6 @@ environment: matrix: - - nodejs_version: "4" + # - nodejs_version: "4" - nodejs_version: "6" - nodejs_version: "7" platform: From f464f997d132b5480220c1e13a3f26a96ff4fe44 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Nov 2017 18:29:55 +0000 Subject: [PATCH 076/144] Added 'pointer-events: none' to prevent tooltips from overlapping the UI. --- src/styles/_components.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 12415faa..5e6e12d1 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -35,6 +35,7 @@ left: 0; width: 120px; z-index: 10; + pointer-events: none; } } From 8234c514121f386cac6d93b7c1041312466db4e5 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 8 Nov 2017 08:47:36 +0000 Subject: [PATCH 077/144] Fixed eslint errors. --- package.json | 2 +- src/components/Button.jsx | 1 + src/components/MessagePanel.jsx | 4 +- src/components/ScrollContainer.jsx | 15 ++-- src/components/Toolbar.jsx | 56 ++++++++++----- src/components/fields/ColorField.jsx | 4 +- src/components/fields/FunctionSpecField.jsx | 79 ++++++++++++--------- src/components/inputs/AutocompleteInput.jsx | 2 +- src/components/inputs/DynamicArrayInput.jsx | 11 ++- src/components/inputs/FontInput.jsx | 1 + src/components/inputs/InputBlock.jsx | 1 + src/components/inputs/StringInput.jsx | 1 + src/components/map/FeatureLayerPopup.jsx | 5 ++ src/components/map/FeaturePropertyPopup.jsx | 4 ++ src/components/map/OpenLayers3Map.jsx | 1 + src/components/modals/Modal.jsx | 1 + src/components/modals/OpenModal.jsx | 4 +- 17 files changed, 127 insertions(+), 65 deletions(-) diff --git a/package.json b/package.json index 1a918bab..c3204c75 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "plugins": [ "react" ], - "extend": [ + "extends": [ "plugin:react/recommended" ], "env": { diff --git a/src/components/Button.jsx b/src/components/Button.jsx index d3c6ee14..d87b8517 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -7,6 +7,7 @@ class Button extends React.Component { onClick: PropTypes.func, style: PropTypes.object, className: PropTypes.string, + children: PropTypes.node } render() { diff --git a/src/components/MessagePanel.jsx b/src/components/MessagePanel.jsx index f5e4c819..53c873e0 100644 --- a/src/components/MessagePanel.jsx +++ b/src/components/MessagePanel.jsx @@ -9,11 +9,11 @@ class MessagePanel extends React.Component { render() { const errors = this.props.errors.map((m, i) => { - return

    {m}

    + return

    {m}

    }) const infos = this.props.infos.map((m, i) => { - return

    {m}

    + return

    {m}

    }) return
    diff --git a/src/components/ScrollContainer.jsx b/src/components/ScrollContainer.jsx index 7425300d..cbee91bb 100644 --- a/src/components/ScrollContainer.jsx +++ b/src/components/ScrollContainer.jsx @@ -1,9 +1,16 @@ import React from 'react' +import PropTypes from 'prop-types' -const ScrollContainer = (props) => { - return
    - {props.children} -
    +class ScrollContainer extends React.Component { + static propTypes = { + children: PropTypes.node + } + + render() { + return
    + {this.props.children} +
    + } } export default ScrollContainer diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 91f56207..383e585c 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -25,27 +25,46 @@ import OpenModal from './modals/OpenModal' import style from '../libs/style' -function IconText(props) { - return {props.children} +class IconText extends React.Component { + static propTypes = { + children: PropTypes.node, + } + + render() { + return {this.props.children} + } } -function ToolbarLink(props) { - return - {props.children} - +class ToolbarLink extends React.Component { + static propTypes = { + className: PropTypes.string, + children: PropTypes.node, + } + + render() { + return + {this.props.children} + + } } -function ToolbarAction(props) { - return - {props.children} - +class ToolbarAction extends React.Component { + static propTypes = { + children: PropTypes.node + } + + render() { + return + {this.props.children} + + } } export default class Toolbar extends React.Component { @@ -57,7 +76,8 @@ export default class Toolbar extends React.Component { onStyleOpen: PropTypes.func.isRequired, // A dict of source id's and the available source layers sources: PropTypes.object.isRequired, - onInspectModeToggle: PropTypes.func.isRequired + onInspectModeToggle: PropTypes.func.isRequired, + children: PropTypes.node } constructor(props) { diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index 7599533f..1ff229a2 100644 --- a/src/components/fields/ColorField.jsx +++ b/src/components/fields/ColorField.jsx @@ -30,7 +30,7 @@ class ColorField extends React.Component { //but I am too stupid to get it to work together with fixed position //and scrollbars so I have to fallback to JavaScript calcPickerOffset() { - const elem = this.refs.colorInput + const elem = this.colorInput if(elem) { const pos = elem.getBoundingClientRect() return { @@ -99,7 +99,7 @@ class ColorField extends React.Component {
    this.colorInput = input} onClick={this.togglePicker.bind(this)} style={this.props.style} name={this.props.name} diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index 9f5b3f6d..b443000c 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -302,49 +302,62 @@ export default class FunctionSpecProperty extends React.Component { } } -function MakeFunctionButtons(props) { - let makeZoomButton, makeDataButton - if (props.fieldSpec['zoom-function']) { - makeZoomButton = +class MakeFunctionButtons extends React.Component { + static propTypes = { + fieldSpec: PropTypes.object, + onZoomClick: PropTypes.func, + } - if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) { - makeDataButton = + + if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) { + makeDataButton = + } + return
    {makeDataButton}{makeZoomButton}
    + } + else { + return null } - return
    {makeDataButton}{makeZoomButton}
    - } - else { - return null } } -function DeleteStopButton(props) { - return +class DeleteStopButton extends React.Component { + static propTypes = { + onClick: PropTypes.func, + } + + render() { + return + } } function labelFromFieldName(fieldName) { diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx index 2ee4c42f..a3611cce 100644 --- a/src/components/inputs/AutocompleteInput.jsx +++ b/src/components/inputs/AutocompleteInput.jsx @@ -17,7 +17,7 @@ class AutocompleteInput extends React.Component { } render() { - const AutocompleteMenu = (items, value, style) =>
    + const AutocompleteMenu = (items, value, style) =>
    {items}
    return } @@ -95,5 +101,6 @@ function DeleteValueButton(props) { /> } +} export default DynamicArrayInput diff --git a/src/components/inputs/FontInput.jsx b/src/components/inputs/FontInput.jsx index c879ceaa..8c52083a 100644 --- a/src/components/inputs/FontInput.jsx +++ b/src/components/inputs/FontInput.jsx @@ -5,6 +5,7 @@ import AutocompleteInput from './AutocompleteInput' class FontInput extends React.Component { static propTypes = { value: PropTypes.array.isRequired, + default: PropTypes.array, fonts: PropTypes.array, style: PropTypes.object, onChange: PropTypes.func.isRequired, diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index 0550fbe2..37c1d0ab 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -14,6 +14,7 @@ class InputBlock extends React.Component { action: PropTypes.element, children: PropTypes.element.isRequired, style: PropTypes.object, + onChange: PropTypes.func, } onChange(e) { diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index fe1ec524..314dde80 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -7,6 +7,7 @@ class StringInput extends React.Component { style: PropTypes.object, default: PropTypes.string, onChange: PropTypes.func, + multi: PropTypes.bool, } constructor(props) { diff --git a/src/components/map/FeatureLayerPopup.jsx b/src/components/map/FeatureLayerPopup.jsx index 26099b35..ca67de56 100644 --- a/src/components/map/FeatureLayerPopup.jsx +++ b/src/components/map/FeatureLayerPopup.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import LayerIcon from '../icons/LayerIcon' @@ -14,6 +15,10 @@ function groupFeaturesBySourceLayer(features) { } class FeatureLayerPopup extends React.Component { + static propTypes = { + features: PropTypes.array + } + render() { const sources = groupFeaturesBySourceLayer(this.props.features) diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx index c83c64d6..bf2c505b 100644 --- a/src/components/map/FeaturePropertyPopup.jsx +++ b/src/components/map/FeaturePropertyPopup.jsx @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' @@ -31,6 +32,9 @@ function renderFeature(feature) { } class FeaturePropertyPopup extends React.Component { + static propTypes = { + features: PropTypes.array + } render() { const features = this.props.features diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index 6ca3852f..dba57a05 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/src/components/map/OpenLayers3Map.jsx @@ -69,6 +69,7 @@ class OpenLayers3Map extends React.Component { onDataChange: PropTypes.func, mapStyle: PropTypes.object.isRequired, accessToken: PropTypes.string, + style: PropTypes.object, } static defaultProps = { diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx index a469940a..c980a2ec 100644 --- a/src/components/modals/Modal.jsx +++ b/src/components/modals/Modal.jsx @@ -8,6 +8,7 @@ class Modal extends React.Component { isOpen: PropTypes.bool.isRequired, title: PropTypes.string.isRequired, onOpenToggle: PropTypes.func.isRequired, + children: PropTypes.node, } render() { diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index df9f5658..bcd1ba8a 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -77,7 +77,7 @@ class OpenModal extends React.Component { } onOpenUrl() { - const url = this.refs.styleUrl.value; + const url = this.styleUrlElement.value; this.onStyleSelect(url); } @@ -151,7 +151,7 @@ class OpenModal extends React.Component {

    Load from a URL. Note that the URL must have CORS enabled.

    - + this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
    From f79a945fa42e0f282aec95451532092f97b80282 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 8 Nov 2017 08:51:24 +0000 Subject: [PATCH 078/144] Fixed more eslint errors. --- src/components/Toolbar.jsx | 4 +++- src/components/fields/FunctionSpecField.jsx | 1 + src/components/modals/ExportModal.jsx | 6 +++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 383e585c..f7313e71 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -39,6 +39,7 @@ class ToolbarLink extends React.Component { static propTypes = { className: PropTypes.string, children: PropTypes.node, + href: PropTypes.string, } render() { @@ -54,7 +55,8 @@ class ToolbarLink extends React.Component { class ToolbarAction extends React.Component { static propTypes = { - children: PropTypes.node + children: PropTypes.node, + onClick: PropTypes.func } render() { diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index b443000c..aa102dc3 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/src/components/fields/FunctionSpecField.jsx @@ -306,6 +306,7 @@ class MakeFunctionButtons extends React.Component { static propTypes = { fieldSpec: PropTypes.object, onZoomClick: PropTypes.func, + onDataClick: PropTypes.func, } render() { diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index 48677b13..13718357 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -127,7 +127,7 @@ class Gist extends React.Component { const user = gist.user || 'anonymous'; const preview = !!gist.files['index.html']; if(preview) { - return Preview,{' '} + return Preview,{' '} } return null; } @@ -145,7 +145,7 @@ class Gist extends React.Component {

    Latest saved gist:{' '} {this.renderPreviewLink(this)} - Source + Source

    @@ -178,7 +178,7 @@ class Gist extends React.Component { value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']} onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/> - Get your free access token + Get your free access token

    : null} {this.renderLatestGist()} From dfe72825102262f3f3a15ef7f581f25467028bc7 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 8 Nov 2017 10:13:02 +0000 Subject: [PATCH 079/144] Fixed some errors reported in google lighthouse audit tool. --- config/webpack.config.js | 9 ++++++++- package.json | 1 + src/components/icons/LineIcon.jsx | 2 +- src/components/icons/SymbolIcon.jsx | 4 ++-- src/components/layers/LayerListGroup.jsx | 4 ++-- src/manifest.json | 9 +++++++++ src/template.html | 1 + 7 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 src/manifest.json diff --git a/config/webpack.config.js b/config/webpack.config.js index 64de2056..24a28524 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -3,6 +3,7 @@ var webpack = require('webpack'); var path = require('path'); var loaders = require('./webpack.loaders'); var HtmlWebpackPlugin = require('html-webpack-plugin'); +var CopyWebpackPlugin = require('copy-webpack-plugin'); const HOST = process.env.HOST || "127.0.0.1"; const PORT = process.env.PORT || "8888"; @@ -59,6 +60,12 @@ module.exports = { new HtmlWebpackPlugin({ title: 'Maputnik', template: './src/template.html' - }) + }), + new CopyWebpackPlugin([ + { + from: './src/manifest.json', + to: 'manifest.json' + } + ]) ] }; diff --git a/package.json b/package.json index 94de1c9c..299501f6 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "base64-loader": "^1.0.0", + "copy-webpack-plugin": "^4.2.0", "css-loader": "^0.28.7", "eslint": "^4.10.0", "eslint-plugin-react": "^7.4.0", diff --git a/src/components/icons/LineIcon.jsx b/src/components/icons/LineIcon.jsx index ab5acbdc..67e54035 100644 --- a/src/components/icons/LineIcon.jsx +++ b/src/components/icons/LineIcon.jsx @@ -6,7 +6,7 @@ export default class FillIcon extends React.Component { render() { return ( - + ) } diff --git a/src/components/icons/SymbolIcon.jsx b/src/components/icons/SymbolIcon.jsx index 941d9b97..961ba4e5 100644 --- a/src/components/icons/SymbolIcon.jsx +++ b/src/components/icons/SymbolIcon.jsx @@ -6,8 +6,8 @@ export default class SymbolIcon extends React.Component { render() { return ( - - + + ) diff --git a/src/components/layers/LayerListGroup.jsx b/src/components/layers/LayerListGroup.jsx index ccf7f384..ab36ab0e 100644 --- a/src/components/layers/LayerListGroup.jsx +++ b/src/components/layers/LayerListGroup.jsx @@ -10,7 +10,7 @@ export default class LayerListGroup extends React.Component { } render() { - return
    + return
  • this.props.onActiveToggle(!this.props.isActive)} > @@ -21,6 +21,6 @@ export default class LayerListGroup extends React.Component { isCollapsed={this.props.isActive} />
    -
    • + } } diff --git a/src/manifest.json b/src/manifest.json new file mode 100644 index 00000000..bd9be0f1 --- /dev/null +++ b/src/manifest.json @@ -0,0 +1,9 @@ +{ + "name": "Maputnik", + "short_name": "Maputnik", + "description": "Visual Map Designer", + "start_url": ".", + "display": "browser", + "background_color": "#1c1f24", + "theme_color": "#1c1f24" +} diff --git a/src/template.html b/src/template.html index 94eceb44..bfa8284c 100644 --- a/src/template.html +++ b/src/template.html @@ -4,6 +4,7 @@ <%= htmlWebpackPlugin.options.title %> +