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

Improve grouping

Browse source
This commit is contained in:
Lukas Martinelli 2017-01-09 18:43:04 +01:00
parent fed530f5f2
commit b72f86a78d
4 changed files with 33 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,22 @@ class UnsupportedLayer extends React.Component {
}
}
function layoutGroups(layerType) {
const layerGroup = {
title: 'Layer',
type: 'layer'
}
const filterGroup = {
title: 'Filter',
type: 'filter'
}
const editorGroup = {
title: 'JSON Editor',
type: 'jsoneditor'
}
return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
}
/** Layer editor supporting multiple types of layers. */
export default class LayerEditor extends React.Component {
static propTypes = {
@ -50,7 +66,7 @@ export default class LayerEditor extends React.Component {
//TODO: Clean this up and refactor into function
const editorGroups = {}
layout[this.props.layer.type].groups.forEach(group => {
layoutGroups(this.props.layer.type).forEach(group => {
editorGroups[group.title] = true
})
@ -96,17 +112,15 @@ export default class LayerEditor extends React.Component {
renderGroupType(type, fields) {
switch(type) {
case 'settings': return <div>
<LayerIdBlock
value={this.props.layer.id}
onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
/>
<LayerTypeBlock
value={this.props.layer.type}
onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
/>
</div>
case 'source': return <div>
case 'layer': return <div>
<LayerIdBlock
value={this.props.layer.id}
onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
/>
<LayerTypeBlock
value={this.props.layer.type}
onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
/>
<LayerSourceBlock
sourceIds={Object.keys(this.props.sources)}
value={this.props.layer.source}
@ -118,6 +132,8 @@ export default class LayerEditor extends React.Component {
onChange={v => this.changeProperty(null, 'source-layer', v)}
/>
}
</div>
case 'filter': return <div>
<div style={input.property}>
<FilterEditor
filter={this.props.layer.filter}
@ -141,8 +157,8 @@ export default class LayerEditor extends React.Component {
render() {
const layerType = this.props.layer.type
const layoutGroups = layout[layerType].groups.filter(group => {
return !(this.props.layer.type === 'background' && group.type === 'source')
const groups = layoutGroups(layerType).filter(group => {
return !(layerType === 'background' && group.type === 'source')
}).map(group => {
return <LayerEditorGroup
key={group.title}
@ -155,7 +171,7 @@ export default class LayerEditor extends React.Component {
})
return <div>
{layoutGroups}
{groups}
</div>
}
}

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

@ -11,7 +11,7 @@ class LayerIdBlock extends React.Component {
}
render() {
return <InputBlock label={"Layer ID"} doc={GlSpec.layer.id.doc}>
return <InputBlock label={"ID"} doc={GlSpec.layer.id.doc}>
<StringInput
value={this.props.value}
onChange={this.props.onChange}

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

@ -11,7 +11,7 @@ class LayerTypeBlock extends React.Component {
}
render() {
return <InputBlock label={"Layer Type"} doc={GlSpec.layer.type.doc}>
return <InputBlock label={"Type"} doc={GlSpec.layer.type.doc}>
<SelectInput
options={[
['background', 'Background'],

84
src/config/layout.json
View file

@ -1,14 +1,6 @@
{
"line": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Paint",
"type": "properties",
@ -34,23 +26,11 @@
"line-dasharray",
"line-gap-width"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
},
"background": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Basic",
"type": "properties",
@ -59,23 +39,11 @@
"background-pattern",
"background-opacity"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
},
"fill": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Basic",
"type": "properties",
@ -88,23 +56,11 @@
"fill-translate",
"fill-translate-anchor"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
},
"fill-extrusion": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Basic",
"type": "properties",
@ -117,23 +73,11 @@
"fill-extrusion-height",
"fill-extrusion-base"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
},
"circle": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Basic",
"type": "properties",
@ -161,23 +105,11 @@
"circle-translate",
"circle-translate-anchor"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
},
"symbol": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Basic",
"type": "properties",
@ -241,23 +173,11 @@
"icon-keep-upright",
"icon-offset"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
},
"raster": {
"groups": [
{
"title": "Settings",
"type": "settings"
},
{
"title": "Source",
"type": "source"
},
{
"title": "Basic",
"type": "properties",
@ -270,10 +190,6 @@
"raster-contrast",
"raster-fade-duration"
]
},
{
"title": "JSON",
"type": "jsoneditor"
}
]
}