Fix visibility toggle

This commit is contained in:
lukasmartinelli 2016-09-10 16:53:58 +02:00
parent f444ebf65d
commit 0693dc3d42
2 changed files with 20 additions and 6 deletions

View file

@ -1,6 +1,8 @@
import React from 'react' import React from 'react'
import Immutable from 'immutable'
import { Toolbar, NavItem, Space} from 'rebass' import { Toolbar, NavItem, Space} from 'rebass'
import Collapse from 'react-collapse' import Collapse from 'react-collapse'
import theme from '../theme.js' import theme from '../theme.js'
import FillLayer from './fill.jsx' import FillLayer from './fill.jsx'
import LineLayer from './line.jsx' import LineLayer from './line.jsx'
@ -46,12 +48,24 @@ export class LayerEditor extends React.Component {
} }
onPaintChanged(property, newValue) { onPaintChanged(property, newValue) {
const changedLayer = this.props.layer.setIn(['paint', property], newValue) let layer = this.props.layer
//TODO: by using immutable records we can avoid this checking if object exists
if(!layer.has('paint')) {
layer = layer.set('paint', Immutable.Map())
}
const changedLayer = layer.setIn(['paint', property], newValue)
this.props.onLayerChanged(changedLayer) this.props.onLayerChanged(changedLayer)
} }
onLayoutChanged(property, newValue) { onLayoutChanged(property, newValue) {
const changedLayer = this.props.layer.setIn(['layout', property], newValue) let layer = this.props.layer
//TODO: by using immutable records we can avoid this checking if object exists
if(!layer.has('layout')) {
layer = layer.set('layout', Immutable.Map())
}
const changedLayer = layer.setIn(['layout', property], newValue)
this.props.onLayerChanged(changedLayer) this.props.onLayerChanged(changedLayer)
} }
@ -86,7 +100,7 @@ export class LayerEditor extends React.Component {
} }
toggleVisibility() { toggleVisibility() {
if(this.props.layer.layout.visibility === 'none') { if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
this.onLayoutChanged('visibility', 'visible') this.onLayoutChanged('visibility', 'visible')
} else { } else {
this.onLayoutChanged('visibility', 'none') this.onLayoutChanged('visibility', 'none')
@ -95,7 +109,7 @@ export class LayerEditor extends React.Component {
render() { render() {
let visibleIcon = <MdVisibilityOff /> let visibleIcon = <MdVisibilityOff />
if(this.props.layer.layout && this.props.layer.layout.visibility === 'none') { if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
visibleIcon = <MdVisibility /> visibleIcon = <MdVisibility />
} }

View file

@ -72,10 +72,10 @@ function styleKey(styleId) {
// Ensure a style has a unique id and a created date // Ensure a style has a unique id and a created date
function ensureOptionalStyleProps(mapStyle) { function ensureOptionalStyleProps(mapStyle) {
if(!('id' in mapStyle)) { if(!mapStyle.has('id')) {
mapStyle = mapStyle.set('id', Math.random().toString(36).substr(2, 9)) mapStyle = mapStyle.set('id', Math.random().toString(36).substr(2, 9))
} }
if(!("created" in mapStyle)) { if(!mapStyle.has('created')) {
mapStyle = mapStyle.set('created', new Date()) mapStyle = mapStyle.set('created', new Date())
} }
return mapStyle return mapStyle