ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-08-24 05:57:25 +00:00
Code Issues Projects Releases Wiki Activity

Manage to display dynamic fields

Browse Source
This commit is contained in:
lukasmartinelli
2016-09-12 19:44:28 +02:00
parent eebb7302cd
commit 957d805ab8
7 changed files with 114 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layers/background.jsx
+5 -4
View File
@@ -1,10 +1,12 @@
import React from 'react'
import Immutable from 'immutable'
import { Input } from 'rebass'
import { PropertyGroup } from '../fields/spec'
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class BackgroundLayer extends React.Component {
static propTypes = {
layer: React.PropTypes.object.isRequired,
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
onPaintChanged: React.PropTypes.func.isRequired
}
@@ -22,10 +24,9 @@ export default class BackgroundLayer extends React.Component {
}
render() {
const paint = this.props.layer.get('paint')
return <div>
<Input name="background-color" label="Background color" onChange={this.onPaintChanged.bind(this, "background-color")} value={paint.get("background-color")} />
<Input name="background-opacity" label="Background opacity" onChange={this.onPaintChanged.bind(this, "background-opacity")} value={paint.get("background-opacity")} />
<PropertyGroup layerType="background" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
<PropertyGroup layerType="background" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
</div>
}
}
src/layers/fill.jsx
+3 -7
View File
@@ -1,6 +1,7 @@
import React from 'react'
import Immutable from 'immutable'
import { Checkbox, Input } from 'rebass'
import { PropertyGroup } from '../fields/spec'
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class FillLayer extends React.Component {
@@ -24,14 +25,9 @@ export default class FillLayer extends React.Component {
}
render() {
const paint = this.props.layer.get('paint')
return <div>
<Input name="fill-color" label="Fill color" onChange={this.onPaintChanged.bind(this, "fill-color")} value={paint.get("fill-color")} />
<Input name="fill-outline-color" label="Fill outline color" onChange={this.onPaintChanged.bind(this, "fill-outline-color")} value={paint.get("fill-outline-color")} />
<Input name="fill-translate" label="Fill translate" onChange={this.onPaintChanged.bind(this, "fill-translate")} value={paint.get("fill-translate")} />
<Input name="fill-translate-anchor" label="Fill translate anchor" onChange={this.onPaintChanged.bind(this, "fill-translate-anchor")} value={paint.get("fill-translate-anchor")} />
<Checkbox name="fill-antialias" label="Antialias" onChange={this.onPaintChanged.bind(this, "fill-antialias")} checked={paint.get("fill-antialias")} />
<Input name="fill-opacity" label="Opacity" onChange={this.onPaintChanged.bind(this, "fill-opacity")} value={paint.get("fill-opacity")} />
<PropertyGroup layerType="fill" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
<PropertyGroup layerType="fill" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
</div>
}
}
src/layers/line.jsx
+5 -28
View File
@@ -1,7 +1,6 @@
import React from 'react'
import Immutable from 'immutable'
import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
import EnumField from '../fields/enum.jsx'
import { PropertyGroup } from '../fields/spec'
export default class LineLayer extends React.Component {
static propTypes = {
@@ -9,31 +8,9 @@ export default class LineLayer extends React.Component {
}
render() {
const enumFieldFromType = (key, field) => {
if(field.type === 'enum') {
return <EnumField
key={key}
name={key}
values={field.values}
value={this.props.layer.getIn(['layout', key], field.default)}
doc={field.doc}/>
}
}
const layoutLineFields = () => {
const type = spec["layout_line"]
return Object.keys(type).map(key => {
return enumFieldFromType(key, type[key])
})
}
const paintLineFields = () => {
const type = spec["paint_line"]
return Object.keys(type).map(key => {
return enumFieldFromType(key, type[key])
})
}
return <div>{layoutLineFields()}{paintLineFields()}</div>
return <div>
<PropertyGroup layerType="line" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
<PropertyGroup layerType="line" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
</div>
}
}
src/layers/symbol.jsx
+4 -1
View File
@@ -2,6 +2,9 @@ import React from 'react'
export default class SymbolLayer extends React.Component {
render() {
return <div></div>
return <div>
<PropertyGroup layerType="symbol" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
<PropertyGroup layerType="symbol" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
</div>
}
}