Support id and type switching

src/components/App.jsx

@@ -78,7 +78,20 @@ export default class App extends React.Component {
     this.setState({ mapStyle: changedStyle })
   }
 
+  onLayerIdChange(oldId, newId) {
+    const changedLayers = this.state.mapStyle.layers.slice(0)
+    const idx = style.indexOfLayer(changedLayers, oldId)
+
+    changedLayers[idx] = {
+      ...changedLayers[idx],
+      id: newId
+    }
+
+    this.onLayersChange(changedLayers)
+  }
+
   onLayerChanged(layer) {
+    console.log('layer changed', layer)
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layer.id)
     changedLayers[idx] = layer
@@ -133,6 +146,7 @@ export default class App extends React.Component {
       sources={this.layerWatcher.sources}
       vectorLayers={this.layerWatcher.vectorLayers}
       onLayerChanged={this.onLayerChanged.bind(this)}
+      onLayerIdChange={this.onLayerIdChange.bind(this)}
     /> : null
 
     return <Layout

src/components/filter/FilterEditor.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 
 import input from '../../config/input.js'
@@ -133,11 +132,6 @@ export default class CombiningFilterEditor extends React.Component {
     onChange: React.PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-  }
-
   // Convert filter to combining filter
   combiningFilter() {
     let combiningOp = this.props.filter[0]

src/components/layers/LayerEditor.jsx

@@ -24,10 +24,12 @@ export default class LayerEditor extends React.Component {
     sources: React.PropTypes.object,
     vectorLayers: React.PropTypes.object,
     onLayerChanged: React.PropTypes.func,
+    onLayerIdChange: React.PropTypes.func,
   }
 
   static defaultProps = {
     onLayerChanged: () => {},
+    onLayerIdChange: () => {},
     onLayerDestroyed: () => {},
   }
 
@@ -74,14 +76,20 @@ export default class LayerEditor extends React.Component {
    * to a {@newValue}.
    */
   onPropertyChange(group, property, newValue) {
-    const changedLayer = {
+    if(group) {
-      ...this.props.layer,
+      this.props.onLayerChanged({
-      [group]: {
+        ...this.props.layer,
-        ...this.props.layer[group],
+        [group]: {
+          ...this.props.layer[group],
+          [property]: newValue
+        }
+      })
+    } else {
+      this.props.onLayerChanged({
+        ...this.props.layer,
         [property]: newValue
-      }
+      })
     }
-    this.props.onLayerChanged(changedLayer)
   }
 
   onFilterChange(newValue) {
@@ -107,6 +115,8 @@ export default class LayerEditor extends React.Component {
       case 'settings': return <LayerSettings
         id={this.props.layer.id}
         type={this.props.layer.type}
+        onTypeChange={v => this.onPropertyChange(null, 'type', v)}
+        onIdChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
       />
       case 'source': return <div>
         <FilterEditor
@@ -136,7 +146,6 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
-    console.log('editor groups', this.state.editorGroups)
     const layerType = this.props.layer.type
     const layoutGroups = layout[layerType].groups.filter(group => {
       return !(this.props.layer.type === 'background' && group.type === 'source')

src/components/layers/LayerList.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 import cloneDeep from 'lodash.clonedeep'
 
 import LayerListItem from './LayerListItem'
@@ -24,11 +23,6 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
-  constructor(props) {
-    super(props)
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-  }
-
   onLayerDestroy(layerId) {
     const remainingLayers = this.props.layers.slice(0)
     const idx = style.indexOfLayer(remainingLayers, layerId)
@@ -87,11 +81,6 @@ class LayerListContainer extends React.Component {
 export default class LayerList extends React.Component {
   static propTypes = {...layerListPropTypes}
 
-  constructor(props) {
-    super(props)
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-  }
-
   onSortEnd(move) {
     const { oldIndex, newIndex } = move
     if(oldIndex === newIndex) return