schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-29 01:20:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #408 from orangemug/maintenance/update-deps-2018-10-06

Browse source 
Updated dependencies
This commit is contained in:
Orange Mug 2018-10-10 15:15:26 +01:00 committed by GitHub
commit 90024c5ec7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 6355 additions and 6249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.babelrc
View file

@ -1,6 +1,12 @@
{ {
"presets": ["env", "react"], "presets": [
"plugins": ["transform-object-rest-spread", "transform-class-properties"], "@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
"@babel/plugin-proposal-class-properties"
],
"env": { "env": {
"test": { "test": {
"plugins": [ "plugins": [
@ -10,4 +16,4 @@
] ]
} }
} }
} }

5
config/webpack.config.js
View file

@ -1,7 +1,7 @@
"use strict"; "use strict";
var webpack = require('webpack'); var webpack = require('webpack');
var path = require('path'); var path = require('path');
var loaders = require('./webpack.loaders'); var rules = require('./webpack.rules');
var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin'); var CopyWebpackPlugin = require('copy-webpack-plugin');
@ -10,6 +10,7 @@ const PORT = process.env.PORT || "8888";
module.exports = { module.exports = {
target: 'web', target: 'web',
mode: 'development',
entry: [ entry: [
`webpack-dev-server/client?http://${HOST}:${PORT}`, `webpack-dev-server/client?http://${HOST}:${PORT}`,
`webpack/hot/only-dev-server`, `webpack/hot/only-dev-server`,
@ -27,7 +28,7 @@ module.exports = {
noParse: [ noParse: [
/mapbox-gl\/dist\/mapbox-gl.js/ /mapbox-gl\/dist\/mapbox-gl.js/
], ],
loaders: loaders rules: rules
}, },
node: { node: {
fs: "empty", fs: "empty",

55
config/webpack.loaders.js
View file

@ -1,55 +0,0 @@
module.exports = [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|public)/,
loaders: ['react-hot-loader/webpack']
},
// HACK: This is a massive hack and reaches into the mapbox-gl private API.
// We have to include this for access to `normalizeSourceURL`. We should
// remove this ASAP, see <https://github.com/mapbox/mapbox-gl-js/issues/2416>
{
test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/,
loader: 'babel-loader',
query: {
presets: ['env', 'react', 'flow'],
plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
}
},
{
test: /\.jsx?$/,
// Note: These modules aren't ES5 therefore we much compile them.
exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
loader: 'babel-loader',
query: {
presets: ['env', 'react'],
plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.ico$/,
loader: 'file-loader?name=[name].[ext]'
},
{
test: /\.(svg|gif|jpg|png)$/,
loader: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
loaders: [
'style-loader?sourceMap',
'css-loader'
]
}
];

18
config/webpack.production.config.js
View file

@ -1,13 +1,11 @@
var webpack = require('webpack'); var webpack = require('webpack');
var path = require('path'); var path = require('path');
var loaders = require('./webpack.loaders'); var rules = require('./webpack.rules');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin'); var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var CopyWebpackPlugin = require('copy-webpack-plugin'); var CopyWebpackPlugin = require('copy-webpack-plugin');
var artifacts = require("../test/artifacts"); var artifacts = require("../test/artifacts");
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OUTPATH = artifacts.pathSync("/build"); var OUTPATH = artifacts.pathSync("/build");
@ -17,8 +15,8 @@ module.exports = {
}, },
output: { output: {
path: OUTPATH, path: OUTPATH,
filename: '[name].[chunkhash].js', filename: '[name].[contenthash].js',
chunkFilename: '[chunkhash].js' chunkFilename: '[contenthash].js'
}, },
resolve: { resolve: {
extensions: ['.js', '.jsx'] extensions: ['.js', '.jsx']
@ -27,7 +25,7 @@ module.exports = {
noParse: [ noParse: [
/mapbox-gl\/dist\/mapbox-gl.js/ /mapbox-gl\/dist\/mapbox-gl.js/
], ],
loaders rules: rules
}, },
node: { node: {
fs: "empty", fs: "empty",
@ -42,10 +40,6 @@ module.exports = {
NODE_ENV: '"production"' NODE_ENV: '"production"'
} }
}), }),
new UglifyJsPlugin(),
new ExtractTextPlugin('[contenthash].css', {
allChunks: true
}),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: './src/template.html', template: './src/template.html',
title: 'Maputnik' title: 'Maputnik'
@ -54,8 +48,8 @@ module.exports = {
{ {
from: './src/manifest.json', from: './src/manifest.json',
to: 'manifest.json' to: 'manifest.json'
} }
]), ]),
new BundleAnalyzerPlugin({ new BundleAnalyzerPlugin({
analyzerMode: 'static', analyzerMode: 'static',
defaultSizes: 'gzip', defaultSizes: 'gzip',

38
config/webpack.rules.js Normal file
View file

@ -0,0 +1,38 @@
const path = require("path");
module.exports = [
{
test: /\.jsx?$/,
exclude: [
path.resolve(__dirname, '../node_modules')
],
use: 'babel-loader'
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.ico$/,
use: 'file-loader?name=[name].[ext]'
},
{
test: /\.(svg|gif|jpg|png)$/,
use: 'file-loader?name=img/[name].[ext]'
},
{
test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
use: [
'style-loader',
"css-loader",
"sass-loader"
]
},
{
test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
use: [
'style-loader',
'css-loader'
]
}
];

12133
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

105
package.json
View file

@ -9,7 +9,7 @@
"test": "cross-env NODE_ENV=test wdio config/wdio.conf.js", "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
"test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch", "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
"start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js", "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
"lint": "eslint --ext js --ext jsx {src,test}", "lint": "eslint --ext js --ext jsx src test",
"lint-styles": "stylelint 'src/styles/*.scss'" "lint-styles": "stylelint 'src/styles/*.scss'"
}, },
"repository": { "repository": {
@ -20,10 +20,11 @@
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/maputnik/editor#readme", "homepage": "https://github.com/maputnik/editor#readme",
"dependencies": { "dependencies": {
"@mapbox/mapbox-gl-rtl-text": "^0.2.0", "@babel/runtime": "^7.1.2",
"@mapbox/mapbox-gl-rtl-text": "^0.2.1",
"@mapbox/mapbox-gl-style-spec": "^13.1.0", "@mapbox/mapbox-gl-style-spec": "^13.1.0",
"classnames": "^2.2.5", "classnames": "^2.2.6",
"codemirror": "^5.37.0", "codemirror": "^5.40.2",
"color": "^3.0.0", "color": "^3.0.0",
"file-saver": "^1.3.8", "file-saver": "^1.3.8",
"jsonlint": "github:josdejong/jsonlint#85a19d7", "jsonlint": "github:josdejong/jsonlint#85a19d7",
@ -32,26 +33,26 @@
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.5.0", "lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"mapbox-gl": "^0.47.0", "mapbox-gl": "^0.50.0-beta.1",
"mapbox-gl-inspect": "^1.3.1", "mapbox-gl-inspect": "^1.3.1",
"maputnik-design": "github:maputnik/design", "maputnik-design": "github:maputnik/design",
"ol": "^5.2.0", "ol": "^5.2.0",
"ol-mapbox-style": "^3.1.0", "ol-mapbox-style": "^3.1.0",
"prop-types": "^15.6.0", "prop-types": "^15.6.2",
"react": "^16.3.2", "react": "^16.5.2",
"react-aria-menubutton": "^5.1.1", "react-aria-menubutton": "^6.0.1",
"react-aria-modal": "^2.12.1", "react-aria-modal": "^3.0.0",
"react-autobind": "^1.0.6", "react-autobind": "^1.0.6",
"react-autocomplete": "^1.7.2", "react-autocomplete": "^1.8.1",
"react-codemirror2": "^4.2.1", "react-codemirror2": "^5.1.0",
"react-collapse": "^4.0.3", "react-collapse": "^4.0.3",
"react-color": "^2.14.1", "react-color": "^2.14.1",
"react-dom": "^16.3.2", "react-dom": "^16.5.2",
"react-file-reader-input": "^1.1.4", "react-file-reader-input": "^2.0.0",
"react-icon-base": "^2.1.1", "react-icon-base": "^2.1.2",
"react-icons": "^2.2.7", "react-icons": "^3.1.0",
"react-motion": "^0.5.2", "react-motion": "^0.5.2",
"react-sortable-hoc": "^0.6.8", "react-sortable-hoc": "^0.8.3",
"reconnecting-websocket": "^3.2.2", "reconnecting-websocket": "^3.2.2",
"url": "^0.11.0" "url": "^0.11.0"
}, },
@ -96,56 +97,48 @@
} }
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.26.3", "@babel/core": "^7.1.2",
"babel-eslint": "^8.2.3", "@babel/plugin-proposal-class-properties": "^7.1.0",
"babel-loader": "7.1.4", "@babel/plugin-transform-runtime": "^7.1.0",
"babel-plugin-istanbul": "^4.1.6", "@babel/preset-env": "^7.1.0",
"babel-plugin-transform-class-properties": "^6.24.1", "@babel/preset-flow": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "@babel/preset-react": "^7.0.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0", "babel-eslint": "^10.0.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-loader": "8.0.4",
"babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-istanbul": "^5.0.1",
"babel-preset-env": "^1.6.1", "copy-webpack-plugin": "^4.5.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.26.0",
"copy-webpack-plugin": "^4.5.1",
"cors": "^2.8.4", "cors": "^2.8.4",
"cross-env": "^5.1.4", "cross-env": "^5.2.0",
"css-loader": "^0.28.11", "css-loader": "^1.0.0",
"eslint": "^4.19.1", "eslint": "^5.6.1",
"eslint-plugin-react": "^7.4.0", "eslint-plugin-react": "^7.11.1",
"express": "^4.16.3", "express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.2", "file-loader": "^2.0.0",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"is-docker": "^1.1.0", "is-docker": "^1.1.0",
"istanbul": "^0.4.5", "istanbul": "^0.4.5",
"istanbul-lib-coverage": "^1.2.0", "istanbul-lib-coverage": "^2.0.1",
"json-loader": "^0.5.7",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"mocha": "^5.1.1", "mocha": "^5.2.0",
"node-sass": "^4.9.0", "node-sass": "^4.9.3",
"raw-loader": "^0.5.1", "raw-loader": "^0.5.1",
"react-hot-loader": "^3.1.1", "react-hot-loader": "^4.3.11",
"sass-loader": "^7.0.1", "sass-loader": "^7.1.0",
"selenium-standalone": "^6.14.0", "selenium-standalone": "^6.15.3",
"style-loader": "^0.20.3", "style-loader": "^0.23.0",
"stylelint": "^9.2.0", "stylelint": "^9.6.0",
"stylelint-config-recommended-scss": "^3.2.0", "stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.0.0", "stylelint-scss": "^3.3.1",
"transform-loader": "^0.2.4", "transform-loader": "^0.2.4",
"uglifyjs-webpack-plugin": "^1.2.4", "uuid": "^3.3.2",
"uuid": "^3.1.0", "wdio-mocha-framework": "^0.6.3",
"wdio-mocha-framework": "^0.5.13",
"wdio-selenium-standalone-service": "0.0.10", "wdio-selenium-standalone-service": "0.0.10",
"wdio-spec-reporter": "^0.1.2", "wdio-spec-reporter": "^0.1.5",
"webdriverio": "^4.12.0", "webdriverio": "^4.13.2",
"webpack": "^3.8.1", "webpack": "^4.20.2",
"webpack-bundle-analyzer": "^2.9.0", "webpack-bundle-analyzer": "^3.0.2",
"webpack-cleanup-plugin": "^0.5.1", "webpack-cleanup-plugin": "^0.5.1",
"webpack-dev-server": "^2.9.4" "webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
} }
} }

20
src/components/App.jsx
View file

@ -21,7 +21,7 @@ import ShortcutsModal from './modals/ShortcutsModal'
import SurveyModal from './modals/SurveyModal' import SurveyModal from './modals/SurveyModal'
import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
import style from '../libs/style' import style from '../libs/style'
import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen' import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
import { undoMessages, redoMessages } from '../libs/diffmessage' import { undoMessages, redoMessages } from '../libs/diffmessage'
@ -35,7 +35,19 @@ import Debug from '../libs/debug'
import queryUtil from '../libs/query-util' import queryUtil from '../libs/query-util'
import MapboxGl from 'mapbox-gl' import MapboxGl from 'mapbox-gl'
import { normalizeSourceURL } from 'mapbox-gl/src/util/mapbox'
// Similar functionality as <https://github.com/mapbox/mapbox-gl-js/blob/7e30aadf5177486c2cfa14fe1790c60e217b5e56/src/util/mapbox.js>
function normalizeSourceURL (url, apiToken="") {
const matches = url.match(/^mapbox:\/\/(.*)/);
if (matches) {
// mapbox://mapbox.mapbox-streets-v7
return `https://api.mapbox.com/v4/${matches[1]}.json?secure&access_token=${apiToken}`
}
else {
return url;
}
}
function updateRootSpec(spec, fieldName, newValues) { function updateRootSpec(spec, fieldName, newValues) {
@ -168,7 +180,7 @@ export default class App extends React.Component {
sources: {}, sources: {},
vectorLayers: {}, vectorLayers: {},
mapState: "map", mapState: "map",
spec: styleSpec.latest, spec: latest,
isOpen: { isOpen: {
settings: false, settings: false,
sources: false, sources: false,
@ -237,7 +249,7 @@ export default class App extends React.Component {
onStyleChanged = (newStyle, save=true) => { onStyleChanged = (newStyle, save=true) => {
const errors = styleSpec.validate(newStyle, styleSpec.latest) const errors = validate(newStyle, latest)
if(errors.length === 0) { if(errors.length === 0) {
if(newStyle.glyphs !== this.state.mapStyle.glyphs) { if(newStyle.glyphs !== this.state.mapStyle.glyphs) {

30
src/components/Toolbar.jsx
View file

@ -2,17 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
import MdFileDownload from 'react-icons/lib/md/file-download' import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
import OpenIcon from 'react-icons/lib/md/open-in-browser'
import SettingsIcon from 'react-icons/lib/md/settings'
import SourcesIcon from 'react-icons/lib/md/layers'
import HelpIcon from 'react-icons/lib/md/help-outline'
import InspectionIcon from 'react-icons/lib/md/find-in-page'
import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
import ColorIcon from 'react-icons/lib/md/color-lens'
import MapIcon from 'react-icons/lib/md/map'
import ViewIcon from 'react-icons/lib/md/remove-red-eye'
import logoImage from 'maputnik-design/logos/logo-color.svg' import logoImage from 'maputnik-design/logos/logo-color.svg'
@ -139,32 +129,26 @@ export default class Toolbar extends React.Component {
{ {
id: "map", id: "map",
title: "Map", title: "Map",
icon: <MapIcon/>,
}, },
{ {
id: "inspect", id: "inspect",
title: "Inspect", title: "Inspect",
icon: <InspectionIcon/>,
}, },
{ {
id: "filter-deuteranopia", id: "filter-deuteranopia",
title: "Map (deuteranopia)", title: "Map (deuteranopia)",
icon: <ColorIcon/>,
}, },
{ {
id: "filter-protanopia", id: "filter-protanopia",
title: "Map (protanopia)", title: "Map (protanopia)",
icon: <ColorIcon/>,
}, },
{ {
id: "filter-tritanopia", id: "filter-tritanopia",
title: "Map (tritanopia)", title: "Map (tritanopia)",
icon: <ColorIcon/>,
}, },
{ {
id: "filter-achromatopsia", id: "filter-achromatopsia",
title: "Map (achromatopsia)", title: "Map (achromatopsia)",
icon: <ColorIcon/>,
}, },
]; ];
@ -195,7 +179,7 @@ export default class Toolbar extends React.Component {
</div> </div>
<div className="maputnik-toolbar__actions"> <div className="maputnik-toolbar__actions">
<ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}> <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
<OpenIcon /> <MdOpenInBrowser />
<IconText>Open</IconText> <IconText>Open</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}> <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
@ -203,16 +187,16 @@ export default class Toolbar extends React.Component {
<IconText>Export</IconText> <IconText>Export</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}> <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
<SourcesIcon /> <MdLayers />
<IconText>Data Sources</IconText> <IconText>Data Sources</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}> <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
<SettingsIcon /> <MdSettings />
<IconText>Style Settings</IconText> <IconText>Style Settings</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarSelect wdKey="nav:inspect"> <ToolbarSelect wdKey="nav:inspect">
<ViewIcon/> <MdFindInPage />
<IconText>View </IconText> <IconText>View </IconText>
<select onChange={(e) => this.handleSelection(e.target.value)}> <select onChange={(e) => this.handleSelection(e.target.value)}>
{views.map((item) => { {views.map((item) => {
@ -226,11 +210,11 @@ export default class Toolbar extends React.Component {
</ToolbarSelect> </ToolbarSelect>
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}> <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
<HelpIcon /> <MdHelpOutline />
<IconText>Help</IconText> <IconText>Help</IconText>
</ToolbarLink> </ToolbarLink>
<ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}> <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
<SurveyIcon /> <MdAssignmentTurnedIn />
<IconText>Take the Maputnik Survey</IconText> <IconText>Take the Maputnik Survey</IconText>
</ToolbarLinkHighlighted> </ToolbarLinkHighlighted>
</div> </div>

4
src/components/fields/_DeleteStopButton.jsx
View file

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import DocLabel from './DocLabel' import DocLabel from './DocLabel'
import Button from '../Button' import Button from '../Button'
import DeleteIcon from 'react-icons/lib/md/delete' import {MdDelete} from 'react-icons/md'
export default class DeleteStopButton extends React.Component { export default class DeleteStopButton extends React.Component {
@ -17,7 +17,7 @@ export default class DeleteStopButton extends React.Component {
onClick={this.props.onClick} onClick={this.props.onClick}
> >
<DocLabel <DocLabel
label={<DeleteIcon />} label={<MdDelete />}
doc={"Remove zoom level stop."} doc={"Remove zoom level stop."}
/> />
</Button> </Button>

5
src/components/fields/_FunctionButtons.jsx
View file

@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
import DocLabel from './DocLabel' import DocLabel from './DocLabel'
import Button from '../Button' import Button from '../Button'
import FunctionIcon from 'react-icons/lib/md/functions' import {MdFunctions, MdInsertChart} from 'react-icons/md'
import MdInsertChart from 'react-icons/lib/md/insert-chart'
export default class FunctionButtons extends React.Component { export default class FunctionButtons extends React.Component {
@ -22,7 +21,7 @@ export default class FunctionButtons extends React.Component {
onClick={this.props.onZoomClick} onClick={this.props.onZoomClick}
> >
<DocLabel <DocLabel
label={<FunctionIcon />} label={<MdFunctions />}
cursorTargetStyle={{ cursor: 'pointer' }} cursorTargetStyle={{ cursor: 'pointer' }}
doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."} doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
/> />

4
src/components/filter/FilterEditor.jsx
View file

@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { combiningFilterOps } from '../../libs/filterops.js' import { combiningFilterOps } from '../../libs/filterops.js'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import DocLabel from '../fields/DocLabel' import DocLabel from '../fields/DocLabel'
import SelectInput from '../inputs/SelectInput' import SelectInput from '../inputs/SelectInput'
import SingleFilterEditor from './SingleFilterEditor' import SingleFilterEditor from './SingleFilterEditor'
@ -89,7 +89,7 @@ export default class CombiningFilterEditor extends React.Component {
<div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter"> <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
<DocLabel <DocLabel
label={"Compound Filter"} label={"Compound Filter"}
doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."} doc={latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
/> />
<SelectInput <SelectInput
value={combiningOp} value={combiningOp}

4
src/components/filter/FilterEditorBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Button from '../Button' import Button from '../Button'
import DeleteIcon from 'react-icons/lib/md/delete' import {MdDelete} from 'react-icons/md'
class FilterEditorBlock extends React.Component { class FilterEditorBlock extends React.Component {
static propTypes = { static propTypes = {
@ -16,7 +16,7 @@ class FilterEditorBlock extends React.Component {
className="maputnik-delete-filter" className="maputnik-delete-filter"
onClick={this.props.onDelete} onClick={this.props.onDelete}
> >
<DeleteIcon /> <MdDelete />
</Button> </Button>
</div> </div>
<div className="maputnik-filter-editor-block-content"> <div className="maputnik-filter-editor-block-content">

4
src/components/inputs/DynamicArrayInput.jsx
View file

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import StringInput from './StringInput' import StringInput from './StringInput'
import NumberInput from './NumberInput' import NumberInput from './NumberInput'
import Button from '../Button' import Button from '../Button'
import DeleteIcon from 'react-icons/lib/md/delete' import {MdDelete} from 'react-icons/md'
import DocLabel from '../fields/DocLabel' import DocLabel from '../fields/DocLabel'
@ -95,7 +95,7 @@ class DeleteValueButton extends React.Component {
onClick={this.props.onClick} onClick={this.props.onClick}
> >
<DocLabel <DocLabel
label={<DeleteIcon />} label={<MdDelete />}
doc={"Remove array entry."} doc={"Remove array entry."}
/> />
</Button> </Button>

8
src/components/inputs/StringInput.jsx
View file

@ -18,10 +18,10 @@ class StringInput extends React.Component {
} }
} }
static getDerivedStateFromProps(props, state) { componentDidUpdate(prevProps) {
return { if(this.props.value !== prevProps.value) {
value: props.value || '' this.setState({value: this.props.value})
}; }
} }
render() { render() {

5
src/components/layers/Collapser.jsx
View file

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down' import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
export default class Collapser extends React.Component { export default class Collapser extends React.Component {
static propTypes = { static propTypes = {
@ -15,7 +14,7 @@ export default class Collapser extends React.Component {
height: 20, height: 20,
...this.props.style, ...this.props.style,
} }
return this.props.isCollapsed ? <CollapseCloseIcon style={iconStyle}/> : <CollapseOpenIcon style={iconStyle} /> return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
} }
} }

4
src/components/layers/LayerEditor.jsx
View file

@ -14,7 +14,7 @@ import CommentBlock from './CommentBlock'
import LayerSourceBlock from './LayerSourceBlock' import LayerSourceBlock from './LayerSourceBlock'
import LayerSourceLayerBlock from './LayerSourceLayerBlock' import LayerSourceLayerBlock from './LayerSourceLayerBlock'
import MoreVertIcon from 'react-icons/lib/md/more-vert' import {MdMoreVert} from 'react-icons/md'
import { changeType, changeProperty } from '../../libs/layer' import { changeType, changeProperty } from '../../libs/layer'
import layout from '../../config/layout.json' import layout from '../../config/layout.json'
@ -254,7 +254,7 @@ export default class LayerEditor extends React.Component {
closeOnSelection={false} closeOnSelection={false}
> >
<Button className='more-menu__button'> <Button className='more-menu__button'>
<MoreVertIcon className="more-menu__button__svg" /> <MdMoreVert className="more-menu__button__svg" />
</Button> </Button>
<Menu> <Menu>
<ul className="more-menu__menu"> <ul className="more-menu__menu">

4
src/components/layers/LayerIdBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
@ -13,7 +13,7 @@ class LayerIdBlock extends React.Component {
} }
render() { render() {
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc} return <InputBlock label={"ID"} doc={latest.layer.id.doc}
data-wd-key={this.props.wdKey} data-wd-key={this.props.wdKey}
> >
<StringInput <StringInput

7
src/components/layers/LayerList.jsx
View file

@ -6,7 +6,7 @@ import LayerListGroup from './LayerListGroup'
import LayerListItem from './LayerListItem' import LayerListItem from './LayerListItem'
import AddModal from '../modals/AddModal' import AddModal from '../modals/AddModal'
import {SortableContainer, SortableHandle} from 'react-sortable-hoc'; import {SortableContainer} from 'react-sortable-hoc';
const layerListPropTypes = { const layerListPropTypes = {
layers: PropTypes.array.isRequired, layers: PropTypes.array.isRequired,
@ -35,7 +35,6 @@ function findClosestCommonPrefix(layers, idx) {
} }
// List of collapsible layer editors // List of collapsible layer editors
@SortableContainer
class LayerListContainer extends React.Component { class LayerListContainer extends React.Component {
static propTypes = {...layerListPropTypes} static propTypes = {...layerListPropTypes}
static defaultProps = { static defaultProps = {
@ -197,11 +196,13 @@ class LayerListContainer extends React.Component {
} }
} }
const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
export default class LayerList extends React.Component { export default class LayerList extends React.Component {
static propTypes = {...layerListPropTypes} static propTypes = {...layerListPropTypes}
render() { render() {
return <LayerListContainer return <LayerListContainerSortable
{...this.props} {...this.props}
onSortEnd={this.props.onMoveLayer.bind(this)} onSortEnd={this.props.onMoveLayer.bind(this)}
useDragHandle={true} useDragHandle={true}

23
src/components/layers/LayerListItem.jsx
View file

@ -2,15 +2,11 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
import CopyIcon from 'react-icons/lib/md/content-copy' import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
import VisibilityIcon from 'react-icons/lib/md/visibility'
import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
import DeleteIcon from 'react-icons/lib/md/delete'
import LayerIcon from '../icons/LayerIcon' import LayerIcon from '../icons/LayerIcon'
import {SortableElement, SortableHandle} from 'react-sortable-hoc' import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@SortableHandle
class LayerTypeDragHandle extends React.Component { class LayerTypeDragHandle extends React.Component {
static propTypes = LayerIcon.propTypes static propTypes = LayerIcon.propTypes
@ -27,6 +23,8 @@ class LayerTypeDragHandle extends React.Component {
} }
} }
const LayerTypeDragHandleSortable = SortableHandle((props) => <LayerTypeDragHandle {...props} />)
class IconAction extends React.Component { class IconAction extends React.Component {
static propTypes = { static propTypes = {
action: PropTypes.string.isRequired, action: PropTypes.string.isRequired,
@ -38,10 +36,10 @@ class IconAction extends React.Component {
renderIcon() { renderIcon() {
switch(this.props.action) { switch(this.props.action) {
case 'duplicate': return <CopyIcon /> case 'duplicate': return <MdContentCopy />
case 'show': return <VisibilityIcon /> case 'show': return <MdVisibility />
case 'hide': return <VisibilityOffIcon /> case 'hide': return <MdVisibilityOff />
case 'delete': return <DeleteIcon /> case 'delete': return <MdDelete />
} }
} }
@ -69,7 +67,6 @@ class IconAction extends React.Component {
} }
} }
@SortableElement
class LayerListItem extends React.Component { class LayerListItem extends React.Component {
static propTypes = { static propTypes = {
layerId: PropTypes.string.isRequired, layerId: PropTypes.string.isRequired,
@ -114,7 +111,7 @@ class LayerListItem extends React.Component {
"maputnik-layer-list-item-selected": this.props.isSelected, "maputnik-layer-list-item-selected": this.props.isSelected,
[this.props.className]: true, [this.props.className]: true,
})}> })}>
<LayerTypeDragHandle type={this.props.layerType} /> <LayerTypeDragHandleSortable type={this.props.layerType} />
<span className="maputnik-layer-list-item-id">{this.props.layerId}</span> <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
<span style={{flexGrow: 1}} /> <span style={{flexGrow: 1}} />
<IconAction <IconAction
@ -140,4 +137,6 @@ class LayerListItem extends React.Component {
} }
} }
export default LayerListItem; const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
export default LayerListItemSortable;

4
src/components/layers/LayerSourceBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import AutocompleteInput from '../inputs/AutocompleteInput' import AutocompleteInput from '../inputs/AutocompleteInput'
@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
} }
render() { render() {
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc} return <InputBlock label={"Source"} doc={latest.layer.source.doc}
data-wd-key={this.props.wdKey} data-wd-key={this.props.wdKey}
> >
<AutocompleteInput <AutocompleteInput

4
src/components/layers/LayerSourceLayerBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import AutocompleteInput from '../inputs/AutocompleteInput' import AutocompleteInput from '../inputs/AutocompleteInput'
@ -20,7 +20,7 @@ class LayerSourceLayer extends React.Component {
} }
render() { render() {
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc} return <InputBlock label={"Source Layer"} doc={latest.layer['source-layer'].doc}
data-wd-key="layer-source-layer" data-wd-key="layer-source-layer"
> >
<AutocompleteInput <AutocompleteInput

4
src/components/layers/LayerTypeBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import SelectInput from '../inputs/SelectInput' import SelectInput from '../inputs/SelectInput'
@ -13,7 +13,7 @@ class LayerTypeBlock extends React.Component {
} }
render() { render() {
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc} return <InputBlock label={"Type"} doc={latest.layer.type.doc}
data-wd-key={this.props.wdKey} data-wd-key={this.props.wdKey}
> >
<SelectInput <SelectInput

10
src/components/layers/MaxZoomBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import NumberInput from '../inputs/NumberInput' import NumberInput from '../inputs/NumberInput'
@ -12,15 +12,15 @@ class MaxZoomBlock extends React.Component {
} }
render() { render() {
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc} return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
data-wd-key="max-zoom" data-wd-key="max-zoom"
> >
<NumberInput <NumberInput
value={this.props.value} value={this.props.value}
onChange={this.props.onChange} onChange={this.props.onChange}
min={styleSpec.latest.layer.maxzoom.minimum} min={latest.layer.maxzoom.minimum}
max={styleSpec.latest.layer.maxzoom.maximum} max={latest.layer.maxzoom.maximum}
default={styleSpec.latest.layer.maxzoom.maximum} default={latest.layer.maxzoom.maximum}
/> />
</InputBlock> </InputBlock>
} }

10
src/components/layers/MinZoomBlock.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import NumberInput from '../inputs/NumberInput' import NumberInput from '../inputs/NumberInput'
@ -12,15 +12,15 @@ class MinZoomBlock extends React.Component {
} }
render() { render() {
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc} return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
data-wd-key="min-zoom" data-wd-key="min-zoom"
> >
<NumberInput <NumberInput
value={this.props.value} value={this.props.value}
onChange={this.props.onChange} onChange={this.props.onChange}
min={styleSpec.latest.layer.minzoom.minimum} min={latest.layer.minzoom.minimum}
max={styleSpec.latest.layer.minzoom.maximum} max={latest.layer.minzoom.maximum}
default={styleSpec.latest.layer.minzoom.minimum} default={latest.layer.minzoom.minimum}
/> />
</InputBlock> </InputBlock>
} }

7
src/components/modals/ExportModal.jsx
View file

@ -2,14 +2,13 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {format} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
import CheckboxInput from '../inputs/CheckboxInput' import CheckboxInput from '../inputs/CheckboxInput'
import Button from '../Button' import Button from '../Button'
import Modal from './Modal' import Modal from './Modal'
import MdFileDownload from 'react-icons/lib/md/file-download' import {MdFileDownload} from 'react-icons/md'
import TiClipboard from 'react-icons/lib/ti/clipboard'
import style from '../../libs/style' import style from '../../libs/style'
@ -37,7 +36,7 @@ class ExportModal extends React.Component {
} }
downloadStyle() { downloadStyle() {
const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle))); const tokenStyle = format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"}); const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
saveAs(blob, this.props.mapStyle.id + ".json"); saveAs(blob, this.props.mapStyle.id + ".json");

4
src/components/modals/Modal.jsx
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import CloseIcon from 'react-icons/lib/md/close' import {MdClose} from 'react-icons/md'
import AriaModal from 'react-aria-modal' import AriaModal from 'react-aria-modal'
@ -44,7 +44,7 @@ class Modal extends React.Component {
onClick={() => this.props.onOpenToggle(false)} onClick={() => this.props.onOpenToggle(false)}
data-wd-key={this.props["data-wd-key"]+".close-modal"} data-wd-key={this.props["data-wd-key"]+".close-modal"}
> >
<CloseIcon /> <MdClose />
</button> </button>
</header> </header>
<div className="maputnik-modal-scroller"> <div className="maputnik-modal-scroller">

8
src/components/modals/OpenModal.jsx
View file

@ -5,8 +5,8 @@ import Modal from './Modal'
import Button from '../Button' import Button from '../Button'
import FileReaderInput from 'react-file-reader-input' import FileReaderInput from 'react-file-reader-input'
import FileUploadIcon from 'react-icons/lib/md/file-upload' import {MdFileUpload} from 'react-icons/md'
import AddIcon from 'react-icons/lib/md/add-circle-outline' import {MdAddCircleOutline} from 'react-icons/md'
import style from '../../libs/style.js' import style from '../../libs/style.js'
import publicStyles from '../../config/styles.json' import publicStyles from '../../config/styles.json'
@ -29,7 +29,7 @@ class PublicStyle extends React.Component {
<header className="maputnik-public-style-header"> <header className="maputnik-public-style-header">
<h4>{this.props.title}</h4> <h4>{this.props.title}</h4>
<span className="maputnik-space" /> <span className="maputnik-space" />
<AddIcon /> <MdAddCircleOutline />
</header> </header>
<div <div
className="maputnik-public-style-thumbnail" className="maputnik-public-style-thumbnail"
@ -200,7 +200,7 @@ class OpenModal extends React.Component {
<h2>Upload Style</h2> <h2>Upload Style</h2>
<p>Upload a JSON style from your computer.</p> <p>Upload a JSON style from your computer.</p>
<FileReaderInput onChange={this.onUpload} tabIndex="-1"> <FileReaderInput onChange={this.onUpload} tabIndex="-1">
<Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button> <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
</FileReaderInput> </FileReaderInput>
</section> </section>

8
src/components/modals/SettingsModal.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput' import SelectInput from '../inputs/SelectInput'
@ -44,7 +44,7 @@ class SettingsModal extends React.Component {
title={'Style Settings'} title={'Style Settings'}
> >
<div style={{minWidth: 350}}> <div style={{minWidth: 350}}>
<InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}> <InputBlock label={"Name"} doc={latest.$root.name.doc}>
<StringInput {...inputProps} <StringInput {...inputProps}
data-wd-key="modal-settings.name" data-wd-key="modal-settings.name"
value={this.props.mapStyle.name} value={this.props.mapStyle.name}
@ -58,7 +58,7 @@ class SettingsModal extends React.Component {
onChange={this.changeStyleProperty.bind(this, "owner")} onChange={this.changeStyleProperty.bind(this, "owner")}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}> <InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
<StringInput {...inputProps} <StringInput {...inputProps}
data-wd-key="modal-settings.sprite" data-wd-key="modal-settings.sprite"
value={this.props.mapStyle.sprite} value={this.props.mapStyle.sprite}
@ -66,7 +66,7 @@ class SettingsModal extends React.Component {
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}> <InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
<StringInput {...inputProps} <StringInput {...inputProps}
data-wd-key="modal-settings.glyphs" data-wd-key="modal-settings.glyphs"
value={this.props.mapStyle.glyphs} value={this.props.mapStyle.glyphs}

11
src/components/modals/SourcesModal.jsx
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import Modal from './Modal' import Modal from './Modal'
import Button from '../Button' import Button from '../Button'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
@ -12,8 +12,7 @@ import style from '../../libs/style'
import { deleteSource, addSource, changeSource } from '../../libs/source' import { deleteSource, addSource, changeSource } from '../../libs/source'
import publicSources from '../../config/tilesets.json' import publicSources from '../../config/tilesets.json'
import AddIcon from 'react-icons/lib/md/add-circle-outline' import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
import DeleteIcon from 'react-icons/lib/md/delete'
class PublicSource extends React.Component { class PublicSource extends React.Component {
static propTypes = { static propTypes = {
@ -34,7 +33,7 @@ class PublicSource extends React.Component {
<p className="maputnik-public-source-id">#{this.props.id}</p> <p className="maputnik-public-source-id">#{this.props.id}</p>
</div> </div>
<span className="maputnik-space" /> <span className="maputnik-space" />
<AddIcon /> <MdAddCircleOutline />
</Button> </Button>
</div> </div>
} }
@ -76,7 +75,7 @@ class ActiveSourceTypeEditor extends React.Component {
onClick={()=> this.props.onDelete(this.props.sourceId)} onClick={()=> this.props.onDelete(this.props.sourceId)}
style={{backgroundColor: 'transparent'}} style={{backgroundColor: 'transparent'}}
> >
<DeleteIcon /> <MdDelete />
</Button> </Button>
</div> </div>
<div className="maputnik-active-source-type-editor-content"> <div className="maputnik-active-source-type-editor-content">
@ -153,7 +152,7 @@ class AddSource extends React.Component {
onChange={v => this.setState({ sourceId: v})} onChange={v => this.setState({ sourceId: v})}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}> <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
<SelectInput <SelectInput
options={[ options={[
['geojson', 'GeoJSON'], ['geojson', 'GeoJSON'],

18
src/components/sources/SourceTypeEditor.jsx
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput' import NumberInput from '../inputs/NumberInput'
@ -16,7 +16,7 @@ class TileJSONSourceEditor extends React.Component {
render() { render() {
return <div> return <div>
<InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}> <InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
<StringInput <StringInput
value={this.props.source.url} value={this.props.source.url}
onChange={url => this.props.onChange({ onChange={url => this.props.onChange({
@ -50,7 +50,7 @@ class TileURLSourceEditor extends React.Component {
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
const tiles = this.props.source.tiles || [] const tiles = this.props.source.tiles || []
return tiles.map((tileUrl, tileIndex) => { return tiles.map((tileUrl, tileIndex) => {
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}> return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
<StringInput <StringInput
value={tileUrl} value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)} onChange={this.changeTileUrl.bind(this, tileIndex)}
@ -62,7 +62,7 @@ class TileURLSourceEditor extends React.Component {
render() { render() {
return <div> return <div>
{this.renderTileUrls()} {this.renderTileUrls()}
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}> <InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
<NumberInput <NumberInput
value={this.props.source.minzoom || 0} value={this.props.source.minzoom || 0}
onChange={minzoom => this.props.onChange({ onChange={minzoom => this.props.onChange({
@ -71,7 +71,7 @@ class TileURLSourceEditor extends React.Component {
})} })}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}> <InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
<NumberInput <NumberInput
value={this.props.source.maxzoom || 22} value={this.props.source.maxzoom || 22}
onChange={maxzoom => this.props.onChange({ onChange={maxzoom => this.props.onChange({
@ -93,7 +93,7 @@ class GeoJSONSourceEditor extends React.Component {
} }
render() { render() {
return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}> return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
<StringInput <StringInput
value={this.props.source.data} value={this.props.source.data}
onChange={data => this.props.onChange({ onChange={data => this.props.onChange({
@ -125,14 +125,14 @@ class SourceTypeEditor extends React.Component {
case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} /> case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} /> case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}> case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
<InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}> <InputBlock label={"Encoding"} doc={latest.source_raster_dem.encoding.doc}>
<SelectInput <SelectInput
options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)} options={Object.keys(latest.source_raster_dem.encoding.values)}
onChange={encoding => this.props.onChange({ onChange={encoding => this.props.onChange({
...this.props.source, ...this.props.source,
encoding: encoding encoding: encoding
})} })}
value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
/> />
</InputBlock> </InputBlock>
</TileURLSourceEditor> </TileURLSourceEditor>

8
src/index.jsx
View file

@ -1,3 +1,4 @@
import { IconContext } from "react-icons";
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
@ -5,4 +6,9 @@ import './favicon.ico'
import './styles/index.scss' import './styles/index.scss'
import App from './components/App'; import App from './components/App';
ReactDOM.render(<App/>, document.querySelector("#app")); ReactDOM.render(
<IconContext.Provider value={{className: 'react-icons'}}>
<App/>
</IconContext.Provider>,
document.querySelector("#app")
);

4
src/libs/diffmessage.js
View file

@ -1,7 +1,7 @@
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {diff} from '@mapbox/mapbox-gl-style-spec'
export function diffMessages(beforeStyle, afterStyle) { export function diffMessages(beforeStyle, afterStyle) {
const changes = styleSpec.diff(beforeStyle, afterStyle) const changes = diff(beforeStyle, afterStyle)
return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' ')) return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
} }

4
src/libs/filterops.js
View file

@ -1,6 +1,6 @@
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
export const combiningFilterOps = ['all', 'any', 'none'] export const combiningFilterOps = ['all', 'any', 'none']
export const setFilterOps = ['in', '!in'] export const setFilterOps = ['in', '!in']
export const otherFilterOps = Object export const otherFilterOps = Object
.keys(styleSpec.latest.filter_operator.values) .keys(latest.filter_operator.values)
.filter(op => combiningFilterOps.indexOf(op) < 0) .filter(op => combiningFilterOps.indexOf(op) < 0)

6
src/libs/layer.js
View file

@ -1,16 +1,16 @@
import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import {latest} from '@mapbox/mapbox-gl-style-spec'
export function changeType(layer, newType) { export function changeType(layer, newType) {
const changedPaintProps = { ...layer.paint } const changedPaintProps = { ...layer.paint }
Object.keys(changedPaintProps).forEach(propertyName => { Object.keys(changedPaintProps).forEach(propertyName => {
if(!(propertyName in styleSpec.latest['paint_' + newType])) { if(!(propertyName in latest['paint_' + newType])) {
delete changedPaintProps[propertyName] delete changedPaintProps[propertyName]
} }
}) })
const changedLayoutProps = { ...layer.layout } const changedLayoutProps = { ...layer.layout }
Object.keys(changedLayoutProps).forEach(propertyName => { Object.keys(changedLayoutProps).forEach(propertyName => {
if(!(propertyName in styleSpec.latest['layout_' + newType])) { if(!(propertyName in latest['layout_' + newType])) {
delete changedLayoutProps[propertyName] delete changedLayoutProps[propertyName]
} }
}) })

6
src/styles/index.scss
View file

@ -50,3 +50,9 @@ $toolbar-offset: 0;
.maputnik-layout { .maputnik-layout {
height: 100vh; height: 100vh;
} }
.react-icons {
vertical-align: middle;
width: 14px;
height: 14px;
}