schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-27 16:27:57 +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"],
"plugins": ["transform-object-rest-spread", "transform-class-properties"],
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
"@babel/plugin-proposal-class-properties"
],
"env": {
"test": {
"plugins": [
@ -10,4 +16,4 @@
]
}
}
}
}

5
config/webpack.config.js
View file

@ -1,7 +1,7 @@
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var rules = require('./webpack.rules');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
@ -10,6 +10,7 @@ const PORT = process.env.PORT || "8888";
module.exports = {
target: 'web',
mode: 'development',
entry: [
`webpack-dev-server/client?http://${HOST}:${PORT}`,
`webpack/hot/only-dev-server`,
@ -27,7 +28,7 @@ module.exports = {
noParse: [
/mapbox-gl\/dist\/mapbox-gl.js/
],
loaders: loaders
rules: rules
},
node: {
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 path = require('path');
var loaders = require('./webpack.loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var rules = require('./webpack.rules');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var CopyWebpackPlugin = require('copy-webpack-plugin');
var artifacts = require("../test/artifacts");
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OUTPATH = artifacts.pathSync("/build");
@ -17,8 +15,8 @@ module.exports = {
},
output: {
path: OUTPATH,
filename: '[name].[chunkhash].js',
chunkFilename: '[chunkhash].js'
filename: '[name].[contenthash].js',
chunkFilename: '[contenthash].js'
},
resolve: {
extensions: ['.js', '.jsx']
@ -27,7 +25,7 @@ module.exports = {
noParse: [
/mapbox-gl\/dist\/mapbox-gl.js/
],
loaders
rules: rules
},
node: {
fs: "empty",
@ -42,10 +40,6 @@ module.exports = {
NODE_ENV: '"production"'
}
}),
new UglifyJsPlugin(),
new ExtractTextPlugin('[contenthash].css', {
allChunks: true
}),
new HtmlWebpackPlugin({
template: './src/template.html',
title: 'Maputnik'
@ -54,8 +48,8 @@ module.exports = {
{
from: './src/manifest.json',
to: 'manifest.json'
}
]),
}
]),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
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-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
"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'"
},
"repository": {
@ -20,10 +20,11 @@
"license": "MIT",
"homepage": "https://github.com/maputnik/editor#readme",
"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",
"classnames": "^2.2.5",
"codemirror": "^5.37.0",
"classnames": "^2.2.6",
"codemirror": "^5.40.2",
"color": "^3.0.0",
"file-saver": "^1.3.8",
"jsonlint": "github:josdejong/jsonlint#85a19d7",
@ -32,26 +33,26 @@
"lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1",
"mapbox-gl": "^0.47.0",
"mapbox-gl": "^0.50.0-beta.1",
"mapbox-gl-inspect": "^1.3.1",
"maputnik-design": "github:maputnik/design",
"ol": "^5.2.0",
"ol-mapbox-style": "^3.1.0",
"prop-types": "^15.6.0",
"react": "^16.3.2",
"react-aria-menubutton": "^5.1.1",
"react-aria-modal": "^2.12.1",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-aria-menubutton": "^6.0.1",
"react-aria-modal": "^3.0.0",
"react-autobind": "^1.0.6",
"react-autocomplete": "^1.7.2",
"react-codemirror2": "^4.2.1",
"react-autocomplete": "^1.8.1",
"react-codemirror2": "^5.1.0",
"react-collapse": "^4.0.3",
"react-color": "^2.14.1",
"react-dom": "^16.3.2",
"react-file-reader-input": "^1.1.4",
"react-icon-base": "^2.1.1",
"react-icons": "^2.2.7",
"react-dom": "^16.5.2",
"react-file-reader-input": "^2.0.0",
"react-icon-base": "^2.1.2",
"react-icons": "^3.1.0",
"react-motion": "^0.5.2",
"react-sortable-hoc": "^0.6.8",
"react-sortable-hoc": "^0.8.3",
"reconnecting-websocket": "^3.2.2",
"url": "^0.11.0"
},
@ -96,56 +97,48 @@
}
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "7.1.4",
"babel-plugin-istanbul": "^4.1.6",
"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-env": "^1.6.1",
"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",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "8.0.4",
"babel-plugin-istanbul": "^5.0.1",
"copy-webpack-plugin": "^4.5.2",
"cors": "^2.8.4",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.4.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"eslint": "^5.6.1",
"eslint-plugin-react": "^7.11.1",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"is-docker": "^1.1.0",
"istanbul": "^0.4.5",
"istanbul-lib-coverage": "^1.2.0",
"json-loader": "^0.5.7",
"istanbul-lib-coverage": "^2.0.1",
"mkdirp": "^0.5.1",
"mocha": "^5.1.1",
"node-sass": "^4.9.0",
"mocha": "^5.2.0",
"node-sass": "^4.9.3",
"raw-loader": "^0.5.1",
"react-hot-loader": "^3.1.1",
"sass-loader": "^7.0.1",
"selenium-standalone": "^6.14.0",
"style-loader": "^0.20.3",
"stylelint": "^9.2.0",
"react-hot-loader": "^4.3.11",
"sass-loader": "^7.1.0",
"selenium-standalone": "^6.15.3",
"style-loader": "^0.23.0",
"stylelint": "^9.6.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.0.0",
"stylelint-scss": "^3.3.1",
"transform-loader": "^0.2.4",
"uglifyjs-webpack-plugin": "^1.2.4",
"uuid": "^3.1.0",
"wdio-mocha-framework": "^0.5.13",
"uuid": "^3.3.2",
"wdio-mocha-framework": "^0.6.3",
"wdio-selenium-standalone-service": "0.0.10",
"wdio-spec-reporter": "^0.1.2",
"webdriverio": "^4.12.0",
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "^2.9.0",
"wdio-spec-reporter": "^0.1.5",
"webdriverio": "^4.13.2",
"webpack": "^4.20.2",
"webpack-bundle-analyzer": "^3.0.2",
"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 { 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 { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
import { undoMessages, redoMessages } from '../libs/diffmessage'
@ -35,7 +35,19 @@ import Debug from '../libs/debug'
import queryUtil from '../libs/query-util'
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) {
@ -168,7 +180,7 @@ export default class App extends React.Component {
sources: {},
vectorLayers: {},
mapState: "map",
spec: styleSpec.latest,
spec: latest,
isOpen: {
settings: false,
sources: false,
@ -237,7 +249,7 @@ export default class App extends React.Component {
onStyleChanged = (newStyle, save=true) => {
const errors = styleSpec.validate(newStyle, styleSpec.latest)
const errors = validate(newStyle, latest)
if(errors.length === 0) {
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 classnames from 'classnames'
import MdFileDownload from 'react-icons/lib/md/file-download'
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 {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
import logoImage from 'maputnik-design/logos/logo-color.svg'
@ -139,32 +129,26 @@ export default class Toolbar extends React.Component {
{
id: "map",
title: "Map",
icon: <MapIcon/>,
},
{
id: "inspect",
title: "Inspect",
icon: <InspectionIcon/>,
},
{
id: "filter-deuteranopia",
title: "Map (deuteranopia)",
icon: <ColorIcon/>,
},
{
id: "filter-protanopia",
title: "Map (protanopia)",
icon: <ColorIcon/>,
},
{
id: "filter-tritanopia",
title: "Map (tritanopia)",
icon: <ColorIcon/>,
},
{
id: "filter-achromatopsia",
title: "Map (achromatopsia)",
icon: <ColorIcon/>,
},
];
@ -195,7 +179,7 @@ export default class Toolbar extends React.Component {
</div>
<div className="maputnik-toolbar__actions">
<ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
<OpenIcon />
<MdOpenInBrowser />
<IconText>Open</IconText>
</ToolbarAction>
<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>
</ToolbarAction>
<ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
<SourcesIcon />
<MdLayers />
<IconText>Data Sources</IconText>
</ToolbarAction>
<ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
<SettingsIcon />
<MdSettings />
<IconText>Style Settings</IconText>
</ToolbarAction>
<ToolbarSelect wdKey="nav:inspect">
<ViewIcon/>
<MdFindInPage />
<IconText>View </IconText>
<select onChange={(e) => this.handleSelection(e.target.value)}>
{views.map((item) => {
@ -226,11 +210,11 @@ export default class Toolbar extends React.Component {
</ToolbarSelect>
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
<HelpIcon />
<MdHelpOutline />
<IconText>Help</IconText>
</ToolbarLink>
<ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
<SurveyIcon />
<MdAssignmentTurnedIn />
<IconText>Take the Maputnik Survey</IconText>
</ToolbarLinkHighlighted>
</div>

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

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

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

@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
import DocLabel from './DocLabel'
import Button from '../Button'
import FunctionIcon from 'react-icons/lib/md/functions'
import MdInsertChart from 'react-icons/lib/md/insert-chart'
import {MdFunctions, MdInsertChart} from 'react-icons/md'
export default class FunctionButtons extends React.Component {
@ -22,7 +21,7 @@ export default class FunctionButtons extends React.Component {
onClick={this.props.onZoomClick}
>
<DocLabel
label={<FunctionIcon />}
label={<MdFunctions />}
cursorTargetStyle={{ cursor: 'pointer' }}
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 { 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 SelectInput from '../inputs/SelectInput'
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">
<DocLabel
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
value={combiningOp}

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

@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import Button from '../Button'
import DeleteIcon from 'react-icons/lib/md/delete'
import {MdDelete} from 'react-icons/md'
class FilterEditorBlock extends React.Component {
static propTypes = {
@ -16,7 +16,7 @@ class FilterEditorBlock extends React.Component {
className="maputnik-delete-filter"
onClick={this.props.onDelete}
>
<DeleteIcon />
<MdDelete />
</Button>
</div>
<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 NumberInput from './NumberInput'
import Button from '../Button'
import DeleteIcon from 'react-icons/lib/md/delete'
import {MdDelete} from 'react-icons/md'
import DocLabel from '../fields/DocLabel'
@ -95,7 +95,7 @@ class DeleteValueButton extends React.Component {
onClick={this.props.onClick}
>
<DocLabel
label={<DeleteIcon />}
label={<MdDelete />}
doc={"Remove array entry."}
/>
</Button>

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

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

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

@ -1,7 +1,6 @@
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'
import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
export default class Collapser extends React.Component {
static propTypes = {
@ -15,7 +14,7 @@ export default class Collapser extends React.Component {
height: 20,
...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 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 layout from '../../config/layout.json'
@ -254,7 +254,7 @@ export default class LayerEditor extends React.Component {
closeOnSelection={false}
>
<Button className='more-menu__button'>
<MoreVertIcon className="more-menu__button__svg" />
<MdMoreVert className="more-menu__button__svg" />
</Button>
<Menu>
<ul className="more-menu__menu">

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

@ -1,7 +1,7 @@
import React from 'react'
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 StringInput from '../inputs/StringInput'
@ -13,7 +13,7 @@ class LayerIdBlock extends React.Component {
}
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}
>
<StringInput

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

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

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

@ -2,15 +2,11 @@ import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import CopyIcon from 'react-icons/lib/md/content-copy'
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 {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
import LayerIcon from '../icons/LayerIcon'
import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@SortableHandle
class LayerTypeDragHandle extends React.Component {
static propTypes = LayerIcon.propTypes
@ -27,6 +23,8 @@ class LayerTypeDragHandle extends React.Component {
}
}
const LayerTypeDragHandleSortable = SortableHandle((props) => <LayerTypeDragHandle {...props} />)
class IconAction extends React.Component {
static propTypes = {
action: PropTypes.string.isRequired,
@ -38,10 +36,10 @@ class IconAction extends React.Component {
renderIcon() {
switch(this.props.action) {
case 'duplicate': return <CopyIcon />
case 'show': return <VisibilityIcon />
case 'hide': return <VisibilityOffIcon />
case 'delete': return <DeleteIcon />
case 'duplicate': return <MdContentCopy />
case 'show': return <MdVisibility />
case 'hide': return <MdVisibilityOff />
case 'delete': return <MdDelete />
}
}
@ -69,7 +67,6 @@ class IconAction extends React.Component {
}
}
@SortableElement
class LayerListItem extends React.Component {
static propTypes = {
layerId: PropTypes.string.isRequired,
@ -114,7 +111,7 @@ class LayerListItem extends React.Component {
"maputnik-layer-list-item-selected": this.props.isSelected,
[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 style={{flexGrow: 1}} />
<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 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 AutocompleteInput from '../inputs/AutocompleteInput'
@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
}
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}
>
<AutocompleteInput

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

@ -1,7 +1,7 @@
import React from 'react'
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 AutocompleteInput from '../inputs/AutocompleteInput'
@ -20,7 +20,7 @@ class LayerSourceLayer extends React.Component {
}
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"
>
<AutocompleteInput

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

@ -1,7 +1,7 @@
import React from 'react'
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 SelectInput from '../inputs/SelectInput'
@ -13,7 +13,7 @@ class LayerTypeBlock extends React.Component {
}
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}
>
<SelectInput

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

@ -1,7 +1,7 @@
import React from 'react'
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 NumberInput from '../inputs/NumberInput'
@ -12,15 +12,15 @@ class MaxZoomBlock extends React.Component {
}
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"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={styleSpec.latest.layer.maxzoom.minimum}
max={styleSpec.latest.layer.maxzoom.maximum}
default={styleSpec.latest.layer.maxzoom.maximum}
min={latest.layer.maxzoom.minimum}
max={latest.layer.maxzoom.maximum}
default={latest.layer.maxzoom.maximum}
/>
</InputBlock>
}

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

@ -1,7 +1,7 @@
import React from 'react'
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 NumberInput from '../inputs/NumberInput'
@ -12,15 +12,15 @@ class MinZoomBlock extends React.Component {
}
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"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={styleSpec.latest.layer.minzoom.minimum}
max={styleSpec.latest.layer.minzoom.maximum}
default={styleSpec.latest.layer.minzoom.minimum}
min={latest.layer.minzoom.minimum}
max={latest.layer.minzoom.maximum}
default={latest.layer.minzoom.minimum}
/>
</InputBlock>
}

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

@ -2,14 +2,13 @@ import React from 'react'
import PropTypes from 'prop-types'
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 StringInput from '../inputs/StringInput'
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 {MdFileDownload} from 'react-icons/md'
import style from '../../libs/style'
@ -37,7 +36,7 @@ class ExportModal extends React.Component {
}
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"});
saveAs(blob, this.props.mapStyle.id + ".json");

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

@ -1,6 +1,6 @@
import React from 'react'
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'
@ -44,7 +44,7 @@ class Modal extends React.Component {
onClick={() => this.props.onOpenToggle(false)}
data-wd-key={this.props["data-wd-key"]+".close-modal"}
>
<CloseIcon />
<MdClose />
</button>
</header>
<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 FileReaderInput from 'react-file-reader-input'
import FileUploadIcon from 'react-icons/lib/md/file-upload'
import AddIcon from 'react-icons/lib/md/add-circle-outline'
import {MdFileUpload} from 'react-icons/md'
import {MdAddCircleOutline} from 'react-icons/md'
import style from '../../libs/style.js'
import publicStyles from '../../config/styles.json'
@ -29,7 +29,7 @@ class PublicStyle extends React.Component {
<header className="maputnik-public-style-header">
<h4>{this.props.title}</h4>
<span className="maputnik-space" />
<AddIcon />
<MdAddCircleOutline />
</header>
<div
className="maputnik-public-style-thumbnail"
@ -200,7 +200,7 @@ class OpenModal extends React.Component {
<h2>Upload Style</h2>
<p>Upload a JSON style from your computer.</p>
<FileReaderInput onChange={this.onUpload} tabIndex="-1">
<Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
<Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
</FileReaderInput>
</section>

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

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

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

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

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

@ -1,6 +1,6 @@
import React from 'react'
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 StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput'
@ -16,7 +16,7 @@ class TileJSONSourceEditor extends React.Component {
render() {
return <div>
<InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
<InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
<StringInput
value={this.props.source.url}
onChange={url => this.props.onChange({
@ -50,7 +50,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 <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
value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)}
@ -62,7 +62,7 @@ class TileURLSourceEditor extends React.Component {
render() {
return <div>
{this.renderTileUrls()}
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
<InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
<NumberInput
value={this.props.source.minzoom || 0}
onChange={minzoom => this.props.onChange({
@ -71,7 +71,7 @@ class TileURLSourceEditor extends React.Component {
})}
/>
</InputBlock>
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
<InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
<NumberInput
value={this.props.source.maxzoom || 22}
onChange={maxzoom => this.props.onChange({
@ -93,7 +93,7 @@ class GeoJSONSourceEditor extends React.Component {
}
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
value={this.props.source.data}
onChange={data => this.props.onChange({
@ -125,14 +125,14 @@ class SourceTypeEditor extends React.Component {
case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
case 'tilejson_raster-dem': return <TileJSONSourceEditor {...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
options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
options={Object.keys(latest.source_raster_dem.encoding.values)}
onChange={encoding => this.props.onChange({
...this.props.source,
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>
</TileURLSourceEditor>

8
src/index.jsx
View file

@ -1,3 +1,4 @@
import { IconContext } from "react-icons";
import React from 'react';
import ReactDOM from 'react-dom';
@ -5,4 +6,9 @@ import './favicon.ico'
import './styles/index.scss'
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) {
const changes = styleSpec.diff(beforeStyle, afterStyle)
const changes = diff(beforeStyle, afterStyle)
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 setFilterOps = ['in', '!in']
export const otherFilterOps = Object
.keys(styleSpec.latest.filter_operator.values)
.keys(latest.filter_operator.values)
.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) {
const changedPaintProps = { ...layer.paint }
Object.keys(changedPaintProps).forEach(propertyName => {
if(!(propertyName in styleSpec.latest['paint_' + newType])) {
if(!(propertyName in latest['paint_' + newType])) {
delete changedPaintProps[propertyName]
}
})
const changedLayoutProps = { ...layer.layout }
Object.keys(changedLayoutProps).forEach(propertyName => {
if(!(propertyName in styleSpec.latest['layout_' + newType])) {
if(!(propertyName in latest['layout_' + newType])) {
delete changedLayoutProps[propertyName]
}
})

6
src/styles/index.scss
View file

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