Switch away from Immutable JS for layer editor

src/components/App.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Immutable from 'immutable'
 import { saveAs } from 'file-saver'
 
 import Drawer from 'rebass/dist/Drawer'
@@ -99,7 +100,7 @@ export default class App extends React.Component {
   }
 
   onLayerChanged(layer) {
-    const changedStyle = this.state.mapStyle.setIn(['layers', layer.get('id')], layer)
+    const changedStyle = this.state.mapStyle.setIn(['layers', layer.id], Immutable.fromJS(layer))
     this.onStyleChanged(changedStyle)
   }
 
@@ -125,6 +126,7 @@ export default class App extends React.Component {
 
   render() {
     const selectedLayer = this.state.mapStyle.getIn(['layers', this.state.selectedLayerId], null)
+
     return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
       <Toolbar
         mapStyle={this.state.mapStyle}
@@ -160,7 +162,7 @@ export default class App extends React.Component {
         width: 300,
         backgroundColor: colors.gray}
       }>
-      {selectedLayer && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.layerWatcher.sources} vectorLayers={this.layerWatcher.vectorLayers}/>}
+      {selectedLayer && <LayerEditor layer={selectedLayer.toJS()} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.layerWatcher.sources} vectorLayers={this.layerWatcher.vectorLayers}/>}
       </div>
       {this.mapRenderer()}
     </div>

src/components/fields/ColorField.jsx

@@ -15,7 +15,6 @@ class ColorField extends React.Component {
     onChange: React.PropTypes.func.isRequired,
     name: React.PropTypes.string.isRequired,
     value: React.PropTypes.string,
-    default: React.PropTypes.number,
     doc: React.PropTypes.string,
     style: React.PropTypes.object,
   }
@@ -31,14 +30,19 @@ class ColorField extends React.Component {
     this.setState({ pickerOpened: !this.state.pickerOpened })
   }
 
+  get color() {
+    return Color(this.props.value || '#fff')
+  }
+
   render() {
+    console.log(Color(this.props.value))
     const picker = <div style={{
         position: 'absolute',
         left: 163,
         top: 0,
       }}>
       <ChromePicker
-        color={this.props.value ? Color(this.props.value).object() : null}
+        color={this.color.object()}
         onChange={c => this.props.onChange(formatColor(c))}
       />
       <div

src/components/fields/PropertyGroup.jsx

@@ -25,20 +25,24 @@ function getGroupName(layerType, fieldName) {
 
 export default class PropertyGroup extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+    layer: React.PropTypes.object.isRequired,
     groupFields: React.PropTypes.instanceOf(Immutable.OrderedSet).isRequired,
     onChange: React.PropTypes.func.isRequired,
   }
 
   onPropertyChange(property, newValue) {
-    const group = getGroupName(this.props.layer.get('type'), property)
+    const group = getGroupName(this.props.layer.type, property)
     this.props.onChange(group , property ,newValue)
   }
 
   render() {
     const fields = this.props.groupFields.map(fieldName => {
-      const fieldSpec = getFieldSpec(this.props.layer.get('type'), fieldName)
+      const fieldSpec = getFieldSpec(this.props.layer.type, fieldName)
-      const fieldValue = this.props.layer.getIn(['paint', fieldName], this.props.layer.getIn(['layout', fieldName]))
+
+      const paint = this.props.layer.paint || {}
+      const layout = this.props.layer.layout || {}
+      const fieldValue = paint[fieldName] || layout[fieldName]
+
       return <ZoomSpecField
         onChange={this.onPropertyChange.bind(this)}
         key={fieldName}

src/components/layers/LayerEditor.jsx

@@ -13,7 +13,6 @@ import PropertyGroup from '../fields/PropertyGroup'
 import MdVisibility from 'react-icons/lib/md/visibility'
 import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
 import MdDelete from 'react-icons/lib/md/delete'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import ScrollContainer from '../ScrollContainer'
 
@@ -47,7 +46,6 @@ export default class LayerEditor extends React.Component {
 
   constructor(props) {
     super(props);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }
 
   getChildContext () {
@@ -59,21 +57,30 @@ export default class LayerEditor extends React.Component {
     }
   }
 
+  /** A {@property} in either the paint our layout {@group} has changed
+   * to a {@newValue}.
+   */
   onPropertyChange(group, property, newValue) {
-    const layer = this.props.layer
+    const changedLayer = {
-    console.log(group, property, newValue)
+      ...this.props.layer,
-    const changedLayer = layer.setIn([group, property], newValue)
+      [group]: {
+        ...this.props.layer[group],
+        [property]: newValue
+      }
+    }
     this.props.onLayerChanged(changedLayer)
   }
 
   onFilterChange(newValue) {
-    let layer = this.props.layer
+    const changedLayer = {
-    const changedLayer = layer.set('filter', newValue)
+      ...this.props.layer,
+      filter: newValue
+    }
     this.props.onLayerChanged(changedLayer)
   }
 
   toggleVisibility() {
-    if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
+    if(this.props.layer.has('layout') && this.props.layer.layout.visibility === 'none') {
       this.onLayoutChanged('visibility', 'visible')
     } else {
       this.onLayoutChanged('visibility', 'none')
@@ -81,7 +88,7 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
-    const layerType = this.props.layer.get('type')
+    const layerType = this.props.layer.type
     const groups = layout[layerType].groups
     const propertyGroups = groups.map(group => {
       return <PropertyGroup
@@ -92,9 +99,8 @@ export default class LayerEditor extends React.Component {
       />
     })
 
-    console.log(this.props.layer.toJSON())
     let visibleIcon = <MdVisibilityOff />
-    if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
+    if('layout' in this.props.layer && this.props.layer.layout.visibility === 'none') {
       visibleIcon = <MdVisibility />
     }
     return <div style={{
@@ -102,7 +108,7 @@ export default class LayerEditor extends React.Component {
     }}>
       <Toolbar>
         <NavItem style={{fontWeight: 400}}>
-          {this.props.layer.get('id')}
+          {this.props.layer.id}
         </NavItem>
         <Space auto x={1} />
         <NavItem onClick={this.toggleVisibility.bind(this)}>
@@ -114,14 +120,14 @@ export default class LayerEditor extends React.Component {
       </Toolbar>
         {propertyGroups}
           <FilterEditor
-            filter={this.props.layer.get('filter', Immutable.List()).toJSON()}
+            filter={this.props.layer.filter}
-            properties={this.props.vectorLayers.get(this.props.layer.get('source-layer'))}
+            properties={this.props.vectorLayers.get(this.props.layer['source-layer'])}
             onChange={f => this.onFilterChange(Immutable.fromJS(f))}
           />
-           {this.props.layer.get('type') !== 'background'
+           {this.props.layer.type !== 'background'
              && <SourceEditor
-              source={this.props.layer.get('source')}
+              source={this.props.layer.source}
-              sourceLayer={this.props.layer.get('source-layer')}
+              sourceLayer={this.props.layer['source-layer']}
               sources={this.props.sources}
               onSourceChange={console.log}
               onSourceLayerChange={console.log}