mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 18:21:17 +01:00
Reactivate on change for background layer
This commit is contained in:
parent
885e31111c
commit
7c7c8b7111
7 changed files with 47 additions and 7 deletions
|
@ -4,6 +4,7 @@ import { Select, Input } from 'rebass'
|
||||||
/*** Number fields with support for min, max and units and documentation*/
|
/*** Number fields with support for min, max and units and documentation*/
|
||||||
class ColorField extends React.Component {
|
class ColorField extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChange: React.PropTypes.func.isRequired,
|
||||||
name: React.PropTypes.string.isRequired,
|
name: React.PropTypes.string.isRequired,
|
||||||
value: React.PropTypes.number,
|
value: React.PropTypes.number,
|
||||||
default: React.PropTypes.number,
|
default: React.PropTypes.number,
|
||||||
|
@ -12,6 +13,7 @@ static propTypes = {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <Input
|
return <Input
|
||||||
|
onChange={this.props.onChange}
|
||||||
label={this.props.name}
|
label={this.props.name}
|
||||||
name={this.props.name}
|
name={this.props.name}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { Select, Input } from 'rebass'
|
||||||
|
|
||||||
class EnumField extends React.Component {
|
class EnumField extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChange: React.PropTypes.func.isRequired,
|
||||||
name: React.PropTypes.string.isRequired,
|
name: React.PropTypes.string.isRequired,
|
||||||
value: React.PropTypes.string,
|
value: React.PropTypes.string,
|
||||||
allowedValues: React.PropTypes.array.isRequired,
|
allowedValues: React.PropTypes.array.isRequired,
|
||||||
|
@ -13,7 +14,12 @@ class EnumField extends React.Component {
|
||||||
const options = this.props.allowedValues.map(val => {
|
const options = this.props.allowedValues.map(val => {
|
||||||
return {children: val, value: val}
|
return {children: val, value: val}
|
||||||
})
|
})
|
||||||
return <Select name={this.props.name} options={options} label={this.props.name} />
|
return <Select
|
||||||
|
onChange={this.props.onChange}
|
||||||
|
name={this.props.name}
|
||||||
|
options={options}
|
||||||
|
label={this.props.name}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { Select, Input } from 'rebass'
|
||||||
/*** Number fields with support for min, max and units and documentation*/
|
/*** Number fields with support for min, max and units and documentation*/
|
||||||
class NumberField extends React.Component {
|
class NumberField extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChange: React.PropTypes.func.isRequired,
|
||||||
name: React.PropTypes.string.isRequired,
|
name: React.PropTypes.string.isRequired,
|
||||||
value: React.PropTypes.number,
|
value: React.PropTypes.number,
|
||||||
default: React.PropTypes.number,
|
default: React.PropTypes.number,
|
||||||
|
@ -15,6 +16,7 @@ class NumberField extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <Input type="number"
|
return <Input type="number"
|
||||||
|
onChange={this.props.onChange}
|
||||||
label={this.props.name}
|
label={this.props.name}
|
||||||
name={this.props.name}
|
name={this.props.name}
|
||||||
message={this.props.doc}
|
message={this.props.doc}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import StringField from './string'
|
||||||
|
|
||||||
class SpecField extends React.Component {
|
class SpecField extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChange: React.PropTypes.func.isRequired,
|
||||||
fieldName: React.PropTypes.string.isRequired,
|
fieldName: React.PropTypes.string.isRequired,
|
||||||
fieldSpec: React.PropTypes.object.isRequired,
|
fieldSpec: React.PropTypes.object.isRequired,
|
||||||
value: React.PropTypes.oneOfType([
|
value: React.PropTypes.oneOfType([
|
||||||
|
@ -17,10 +18,15 @@ class SpecField extends React.Component {
|
||||||
]).isRequired,
|
]).isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onValueChanged(property, e) {
|
||||||
|
return this.props.onChange(property, e.target.value)
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
switch(this.props.fieldSpec.type) {
|
switch(this.props.fieldSpec.type) {
|
||||||
case 'number': return (
|
case 'number': return (
|
||||||
<NumberField
|
<NumberField
|
||||||
|
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
name={this.props.fieldName}
|
name={this.props.fieldName}
|
||||||
default={this.props.fieldSpec.default}
|
default={this.props.fieldSpec.default}
|
||||||
|
@ -32,6 +38,7 @@ class SpecField extends React.Component {
|
||||||
)
|
)
|
||||||
case 'enum': return (
|
case 'enum': return (
|
||||||
<EnumField
|
<EnumField
|
||||||
|
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
name={this.props.fieldName}
|
name={this.props.fieldName}
|
||||||
allowedValues={this.props.fieldSpec.values}
|
allowedValues={this.props.fieldSpec.values}
|
||||||
|
@ -40,6 +47,7 @@ class SpecField extends React.Component {
|
||||||
)
|
)
|
||||||
case 'string': return (
|
case 'string': return (
|
||||||
<StringField
|
<StringField
|
||||||
|
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
name={this.props.fieldName}
|
name={this.props.fieldName}
|
||||||
doc={this.props.fieldSpec.doc}
|
doc={this.props.fieldSpec.doc}
|
||||||
|
@ -47,6 +55,7 @@ class SpecField extends React.Component {
|
||||||
)
|
)
|
||||||
case 'color': return (
|
case 'color': return (
|
||||||
<ColorField
|
<ColorField
|
||||||
|
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
name={this.props.fieldName}
|
name={this.props.fieldName}
|
||||||
doc={this.props.fieldSpec.doc}
|
doc={this.props.fieldSpec.doc}
|
||||||
|
@ -59,6 +68,7 @@ class SpecField extends React.Component {
|
||||||
|
|
||||||
export class PropertyGroup extends React.Component {
|
export class PropertyGroup extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChange: React.PropTypes.func.isRequired,
|
||||||
properties: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
properties: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
||||||
layerType: React.PropTypes.oneOf(['fill', 'background', 'line']).isRequired,
|
layerType: React.PropTypes.oneOf(['fill', 'background', 'line']).isRequired,
|
||||||
groupType: React.PropTypes.oneOf(['paint', 'layout']).isRequired,
|
groupType: React.PropTypes.oneOf(['paint', 'layout']).isRequired,
|
||||||
|
@ -70,6 +80,7 @@ export class PropertyGroup extends React.Component {
|
||||||
const fieldSpec = layerTypeSpec[propName]
|
const fieldSpec = layerTypeSpec[propName]
|
||||||
const propValue = this.props.properties.get(propName)
|
const propValue = this.props.properties.get(propName)
|
||||||
return <SpecField
|
return <SpecField
|
||||||
|
onChange={this.props.onChange}
|
||||||
key={propName}
|
key={propName}
|
||||||
value={propValue}
|
value={propValue}
|
||||||
fieldName={propName}
|
fieldName={propName}
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { Input } from 'rebass'
|
||||||
/*** Number fields with support for min, max and units and documentation*/
|
/*** Number fields with support for min, max and units and documentation*/
|
||||||
class StringField extends React.Component {
|
class StringField extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChange: React.PropTypes.func.isRequired,
|
||||||
name: React.PropTypes.string.isRequired,
|
name: React.PropTypes.string.isRequired,
|
||||||
value: React.PropTypes.number,
|
value: React.PropTypes.number,
|
||||||
default: React.PropTypes.number,
|
default: React.PropTypes.number,
|
||||||
|
@ -12,6 +13,7 @@ static propTypes = {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <Input
|
return <Input
|
||||||
|
onChange={this.props.onChange}
|
||||||
label={this.props.name}
|
label={this.props.name}
|
||||||
name={this.props.name}
|
name={this.props.name}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
|
|
|
@ -15,8 +15,7 @@ export default class BackgroundLayer extends React.Component {
|
||||||
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
|
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
onPaintChanged(property, e) {
|
onPaintChanged(property, value) {
|
||||||
let value = e.target.value
|
|
||||||
if (property == "background-opacity" && !isNaN(parseFloat(value))) {
|
if (property == "background-opacity" && !isNaN(parseFloat(value))) {
|
||||||
value = parseFloat(value)
|
value = parseFloat(value)
|
||||||
}
|
}
|
||||||
|
@ -25,8 +24,17 @@ export default class BackgroundLayer extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <div>
|
return <div>
|
||||||
<PropertyGroup layerType="background" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
|
<PropertyGroup
|
||||||
<PropertyGroup layerType="background" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
|
layerType="background"
|
||||||
|
groupType="layout"
|
||||||
|
properties={this.props.layer.get('layout', Immutable.Map())}
|
||||||
|
/>
|
||||||
|
<PropertyGroup
|
||||||
|
onChange={this.props.onPaintChanged.bind(this)}
|
||||||
|
layerType="background"
|
||||||
|
groupType="paint"
|
||||||
|
properties={this.props.layer.get('paint', Immutable.Map())}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,8 +26,17 @@ export default class FillLayer extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <div>
|
return <div>
|
||||||
<PropertyGroup layerType="fill" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
|
<PropertyGroup
|
||||||
<PropertyGroup layerType="fill" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
|
layerType="fill"
|
||||||
|
groupType="layout"
|
||||||
|
properties={this.props.layer.get('layout', Immutable.Map())}
|
||||||
|
/>
|
||||||
|
<PropertyGroup
|
||||||
|
onChange={this.props.onPaintChanged.bind(this)}
|
||||||
|
layerType="fill"
|
||||||
|
groupType="paint"
|
||||||
|
properties={this.props.layer.get('paint', Immutable.Map())}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue