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 644250a..1a34ac9 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 ba10485..cccd958 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 fcfe7d8..0c8dbac 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 7cdc9d2..7404c0e 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 ea60b8a..2b3400f 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 01b05a9..f1b24ea 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 8286900..5817689 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 ecf2646..16ebb9f 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 9585d67..aa2323c 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 729585e..2cdb6d0 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 0a06571..4a33023 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 66967c2..f3de03b 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 ba4d841..0e5058a 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 344e882..fc37e3e 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 502c59e..80b2688 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 65984fd..da77be8 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 f018c46..f6418c5 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 3f012d2..0fd0c1f 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 185fb9a..0ad9410 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 1a34ac9..b7570f6 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 b7570f6..6137fd6 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 6137fd6..2380ebb 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 438c3b8..7d9e528 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 5ddc740..b2dd2dc 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 cccd958..4f0f68c 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 0c8dbac..8641548 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 aa2323c..c4a7f36 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 2cdb6d0..bc2950e 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 4a33023..b6db301 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 f3de03b..d3bc5b9 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 80b2688..a4c01cd 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 da77be8..892e224 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 f6418c5..d6ee928 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 fefa987..cf2cff6 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 b2dd2dc..1d6ae52 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 1d6ae52..65dccd8 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 28fa73a..650b90f 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 0000000..951c654 --- /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 16a9740..1472bf6 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 11bf197..093297a 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 813f65e..4ec1724 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 0000000..e43bc3b --- /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 11bf197..82ad5a5 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 0f33347..ef0556c 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 1b750b6..94eceb4 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 0000000..47c9ace --- /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 ebf64f7..5a709b4 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 2d6d424..a71aebc 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 47c9ace..49d176d 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 4ec1724..9f08144 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 42c838e..9f8e755 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 e43bc3b..1a864dd 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 0000000..08d035d --- /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 9f5a5e1..66d582c 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 08d035d..5e66cd3 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 7d9e528..05e3416 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 9f8e755..3cb867c 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 b4032a5..6731021 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 2298496..a5b8900 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 a5b8900..d6510c9 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 3cb867c..ab1cd79 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 e535aa7..27f86ac 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 ab1cd79..42883c0 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 42883c0..44686dc 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 7f9a31b..cafbdfa 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 69ee2e4..9a2fd80 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 ef0556c..08d7e9d 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 44686dc..b045c05 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 6731021..12415fa 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 8902625..f7af98d 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 b045c05..3adc77c 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 8de8b34..fc17892 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 5471a5d..c324f00 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 996ca1c..ac8bee6 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 5471a5d..0bd184d 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 bcb60f8..9bf7ad6 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 e945964..77dbea8 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 3adc77c..c85cb7a 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 56b2769..fb6ca49 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 5471a5d..efe05ab 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 c85cb7a..2b7383b 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 9a2fd80..5674060 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 4137da2..09c118d 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 bfc545f..4b336f6 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 09c118d..1359feb 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 4b336f6..ee321ce 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 aed9b82..260623b 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 b6db301..fd00a6f 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 8cace42..ce000ec 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 27f86ac..10eb62f 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 9bf7ad6..81550b5 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 fd00a6f..d711d7e 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 81550b5..40235fc 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 2b7383b..e1cc467 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 11b5019..3c472f1 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 0000000..2f7900d --- /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 5038759..afe45f1 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 00bf33e..d18c356 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 50b841a..08cbd45 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 10eb62f..ea44fc8 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 a50402a..1fc02d5 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 260623b..5b1beb4 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 27f86ac..8c5edbb 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 1fc02d5..a0f80f8 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 9bf7ad6..7d954e8 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 c305879..8b2156d 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 77dbea8..3e4ed2c 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 09476b8..7694014 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 b2ba45d..1989de4 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 c4a7f36..5483376 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 a50402a..fba07dc 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 a71aebc..2f5343c 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 260623b..af959ac 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 af959ac..69a8829 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 3d8ac00..1804686 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 f922b9b..d3c6ee1 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 f374ebd..f5e4c81 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 9bf7ad6..91f5620 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 2f5343c..7599533 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 d13efb6..9af6a86 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 2b7383b..9f5b3f6 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 fc17892..5d3c72c 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 9f08144..00796ef 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 8641548..c16f5e6 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 8395b72..3c2b9b1 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 f7af98d..9205765 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 5c75c45..790ca3a 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 cbf3a25..69a01d5 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 c2b4c1f..2ee4c42 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 cfe5b3d..94e8902 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 1a864dd..edbc9b5 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 fa1b372..c879cea 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 9f6bc33..daff7e7 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 b537a52..0550fbe 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 20265be..4b8891d 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 9ae6dd4..c57af00 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 13a8b27..145c78f 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 5b7753e..fe1ec52 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 19410a5..186c441 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 ac8bee6..961bd7d 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 5f27055..69b5d38 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 4494b85..2184388 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 5c4f86f..7c82fc1 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 831b75c..fe0f158 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 00bf33e..8853dc2 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 7694014..ccf7f38 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 6b1420e..4d31cf1 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 b9bea69..e506d61 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 012c876..2faf666 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 c2b98b1..6924b53 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 1989de4..bdd2201 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 5483376..cebde0f 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 11b5019..4bf6f24 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 650b90f..6ca3852 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 d08a539..24a4638 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 fd00a6f..cfbffb3 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 cafbdfa..a469940 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 08d7e9d..df9f565 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 29849be..7537478 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 d3bc5b9..a5e59b5 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 532db93..26eff12 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 2718767..65a403d 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 69a8829..a39a125 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 a39a125..3d9ed71 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 3d9ed71..b0f45c3 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 4f0f68c..2fb38d2 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 c16f5e6..73cb2f1 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 fe0f158..77abb11 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 e506d61..e2070a4 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 2faf666..b2f6892 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 6924b53..ee1722d 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 bdd2201..3a1a4e5 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 cebde0f..d5c3f9c 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 cfbffb3..48677b1 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 a5e59b5..ef50ad2 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 26eff12..560b17e 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 65a403d..39f66d5 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 a4c01cd..6536c3a 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 892e224..61613e8 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 d6ee928..8f9832f 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 b0f45c3..c77ed51 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 c77ed51..672ba0a 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 672ba0a..76e2a1b 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 76e2a1b..b960548 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 b960548..599565a 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 599565a..103ac10 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 49d176d..a3b237f 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 103ac10..b947b9d 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 fba07dc..505a8bb 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 05e3416..f931b7b 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 b947b9d..2386026 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 558bea2..f9dc199 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 2386026..1a918ba 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 f4576da..3108b2e 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 3108b2e..3675b21 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 1a918ba..d8c8f48 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 3108b2e..d6dd670 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 a44e931..c024fec 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 732ef29..b88346d 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 274ccf1..61f4ecf 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 12415fa..5e6e12d 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 1a918ba..c3204c7 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 d3c6ee1..d87b851 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 f5e4c81..53c873e 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 7425300..cbee91b 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 91f5620..383e585 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 7599533..1ff229a 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 9f5b3f6..b443000 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 2ee4c42..a3611cc 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 c879cea..8c52083 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 0550fbe..37c1d0a 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 fe1ec52..314dde8 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 26099b3..ca67de5 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 c83c64d..bf2c505 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 6ca3852..dba57a0 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 a469940..c980a2e 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 df9f565..bcd1ba8 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 383e585..f7313e7 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 b443000..aa102dc 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 48677b1..1371835 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 64de205..24a2852 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 94de1c9..299501f 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 ab5acbd..67e5403 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 941d9b9..961ba4e 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 ccf7f38..ab36ab0 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 0000000..bd9be0f --- /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 94eceb4..bfa8284 100644 --- a/src/template.html +++ b/src/template.html @@ -4,6 +4,7 @@ <%= htmlWebpackPlugin.options.title %> +