ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-26 08:00:01 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into feature/data-driven-styles

Browse Source
This commit is contained in:
pjsier
2017-10-05 05:42:17 -05:00
parent 9e52b0b7dc c950a33031
commit bba7aa3177
21 changed files with 57 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/App.jsx
View File

@@ -10,9 +10,7 @@ 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 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)

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

@@ -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 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 {
<div className="maputnik-filter-editor-compound-select">
<DocLabel
label={"Compound Filter"}
doc={GlSpec.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
/>
<SelectInput
value={combiningOp}

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
@@ -11,7 +11,7 @@ class LayerIdBlock extends React.Component {
}
render() {
return <InputBlock label={"ID"} doc={GlSpec.layer.id.doc}>
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}>
<StringInput
value={this.props.value}
onChange={this.props.onChange}

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
@@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
}
render() {
return <InputBlock label={"Source"} doc={GlSpec.layer.source.doc}>
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}>
<AutocompleteInput
value={this.props.value}
onChange={this.props.onChange}

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
@@ -19,7 +19,7 @@ class LayerSourceLayer extends React.Component {
}
render() {
return <InputBlock label={"Source Layer"} doc={GlSpec.layer['source-layer'].doc}>
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
<AutocompleteInput
value={this.props.value}
onChange={this.props.onChange}

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import SelectInput from '../inputs/SelectInput'
@@ -11,7 +11,7 @@ class LayerTypeBlock extends React.Component {
}
render() {
return <InputBlock label={"Type"} doc={GlSpec.layer.type.doc}>
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}>
<SelectInput
options={[
['background', 'Background'],

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import NumberInput from '../inputs/NumberInput'
@@ -11,13 +11,13 @@ class MaxZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Max Zoom"} doc={GlSpec.layer.maxzoom.doc}>
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={GlSpec.layer.maxzoom.minimum}
max={GlSpec.layer.maxzoom.maximum}
default={GlSpec.layer.maxzoom.maximum}
min={styleSpec.latest.layer.maxzoom.minimum}
max={styleSpec.latest.layer.maxzoom.maximum}
default={styleSpec.latest.layer.maxzoom.maximum}
/>
</InputBlock>
}

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
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 <InputBlock label={"Min Zoom"} doc={GlSpec.layer.minzoom.doc}>
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={GlSpec.layer.minzoom.minimum}
max={GlSpec.layer.minzoom.maximum}
default={GlSpec.layer.minzoom.minimum}
min={styleSpec.latest.layer.minzoom.minimum}
max={styleSpec.latest.layer.minzoom.maximum}
default={styleSpec.latest.layer.minzoom.minimum}
/>
</InputBlock>
}

3
src/components/map/MapboxGlMap.jsx
View File

@@ -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-style-spec/lib/validate/validate_color'
import style from '../../libs/style.js'
import tokens from '../../config/tokens.json'
import colors from 'mapbox-gl-inspect/lib/colors'

9
src/components/modals/ExportModal.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import { saveAs } from 'file-saver'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
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-style-spec/lib/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 = `
<!DOCTYPE html>
@@ -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");
}

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

@@ -1,6 +1,6 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
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'}
>
<div style={{minWidth: 350}}>
<InputBlock label={"Name"} doc={GlSpec.$root.name.doc}>
<InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.name}
onChange={this.changeStyleProperty.bind(this, "name")}
@@ -58,14 +58,14 @@ class SettingsModal extends React.Component {
onChange={this.changeStyleProperty.bind(this, "owner")}
/>
</InputBlock>
<InputBlock label={"Sprite URL"} doc={GlSpec.$root.sprite.doc}>
<InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.sprite}
onChange={this.changeStyleProperty.bind(this, "sprite")}
/>
</InputBlock>
<InputBlock label={"Glyphs URL"} doc={GlSpec.$root.glyphs.doc}>
<InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
<StringInput {...inputProps}
value={this.props.mapStyle.glyphs}
onChange={this.changeStyleProperty.bind(this, "glyphs")}

4
src/components/modals/SourcesModal.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import Modal from './Modal'
import Button from '../Button'
import InputBlock from '../inputs/InputBlock'
@@ -138,7 +138,7 @@ class AddSource extends React.Component {
onChange={v => this.setState({ sourceId: v})}
/>
</InputBlock>
<InputBlock label={"Source Type"} doc={GlSpec.source_tile.type.doc}>
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}>
<SelectInput
options={[
['geojson', 'GeoJSON'],

12
src/components/sources/SourceTypeEditor.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import styleSpec from '@mapbox/mapbox-gl-style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput'
@@ -11,7 +11,7 @@ class TileJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"TileJSON URL"} doc={GlSpec.source_tile.url.doc}>
return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_tile.url.doc}>
<StringInput
value={this.props.source.url}
onChange={url => 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 <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={GlSpec.source_tile.tiles.doc}>
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_tile.tiles.doc}>
<StringInput
value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -54,7 +54,7 @@ class TileURLSourceEditor extends React.Component {
render() {
return <div>
{this.renderTileUrls()}
<InputBlock label={"Min Zoom"} doc={GlSpec.source_tile.minzoom.doc}>
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_tile.minzoom.doc}>
<NumberInput
value={this.props.source.minzoom || 0}
onChange={minzoom => this.props.onChange({
@@ -63,7 +63,7 @@ class TileURLSourceEditor extends React.Component {
})}
/>
</InputBlock>
<InputBlock label={"Max Zoom"} doc={GlSpec.source_tile.maxzoom.doc}>
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}>
<NumberInput
value={this.props.source.maxzoom || 22}
onChange={maxzoom => this.props.onChange({
@@ -84,7 +84,7 @@ class GeoJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"GeoJSON Data"} doc={GlSpec.source_geojson.data.doc}>
return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}>
<StringInput
value={this.props.source.data}
onChange={data => this.props.onChange({