mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 16:41:17 +01:00
Support displaying basic zoom fields
This commit is contained in:
parent
a91a1e99e0
commit
7fae257130
1 changed files with 127 additions and 73 deletions
|
@ -1,21 +1,75 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Immutable from 'immutable'
|
import Immutable from 'immutable'
|
||||||
|
import color from 'color'
|
||||||
|
|
||||||
import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
|
import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
|
||||||
import NumberField from './number'
|
import NumberField from './number'
|
||||||
import EnumField from './enum'
|
import EnumField from './enum'
|
||||||
import ColorField from './color'
|
import ColorField from './color'
|
||||||
import StringField from './string'
|
import StringField from './string'
|
||||||
|
import inputStyle from './input.js'
|
||||||
|
import theme from '../theme.js'
|
||||||
|
|
||||||
class SpecField extends React.Component {
|
function isZoomField(value) {
|
||||||
static propTypes = {
|
return Immutable.Map.isMap(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const specFieldProps = {
|
||||||
onChange: React.PropTypes.func.isRequired,
|
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,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Supports displaying spec field for zoom function objects
|
||||||
|
* https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
|
||||||
|
*/
|
||||||
|
class ZoomSpecField extends React.Component {
|
||||||
|
static propTypes = {
|
||||||
|
...specFieldProps,
|
||||||
value: React.PropTypes.oneOfType([
|
value: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.number,
|
React.PropTypes.number,
|
||||||
]).isRequired,
|
]),
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if(isZoomField(this.props.value)) {
|
||||||
|
const zoomFields = this.props.value.get('stops').map(stop => {
|
||||||
|
console.log(stop)
|
||||||
|
const zoomLevel = stop.get(0)
|
||||||
|
const value = stop.get(1)
|
||||||
|
console.log(zoomLevel, value)
|
||||||
|
|
||||||
|
return <div key={zoomLevel}>
|
||||||
|
<b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
|
||||||
|
<SpecField {...this.props} value={value} />
|
||||||
|
</div>
|
||||||
|
}).toSeq()
|
||||||
|
return <div style={{
|
||||||
|
border: 1,
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
|
||||||
|
padding: theme.scale[1],
|
||||||
|
}}>
|
||||||
|
{zoomFields}
|
||||||
|
</div>
|
||||||
|
} else {
|
||||||
|
return <SpecField {...this.props} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Display any field from the Mapbox GL style spec and
|
||||||
|
* choose the correct field component based on the @{fieldSpec}
|
||||||
|
* to display @{value}. */
|
||||||
|
class SpecField extends React.Component {
|
||||||
|
static propTypes = {
|
||||||
|
...specFieldProps,
|
||||||
|
value: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.number,
|
||||||
|
]),
|
||||||
}
|
}
|
||||||
|
|
||||||
onValueChanged(property, value) {
|
onValueChanged(property, value) {
|
||||||
|
@ -79,7 +133,7 @@ export class PropertyGroup extends React.Component {
|
||||||
const specFields = Object.keys(layerTypeSpec).map(propName => {
|
const specFields = Object.keys(layerTypeSpec).map(propName => {
|
||||||
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 <ZoomSpecField
|
||||||
onChange={this.props.onChange}
|
onChange={this.props.onChange}
|
||||||
key={propName}
|
key={propName}
|
||||||
value={propValue}
|
value={propValue}
|
||||||
|
|
Loading…
Reference in a new issue