Garbage collect properties when change type #42

src/components/ErrorPanel.jsx

@@ -9,14 +9,21 @@ class ErrorPanel extends React.Component {
   }
 
   render() {
-    return <div style={{
-      padding: margins[1],
-    }}>
-      {this.props.messages.map(m => <Paragraph style={{
+    const errors = this.props.messages.map((m, i) => {
+      return <Paragraph key={i}
+        style={{
           color: colors.red,
           margin: 0,
           lineHeight: 1.2,
-      }}>{m}</Paragraph>)}
+        }}>
+        {m}
+      </Paragraph>
+    })
+
+    return <div style={{
+      padding: margins[1],
+    }}>
+      {errors}
     </div>
   }
 }

src/components/layers/LayerEditor.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import JSONEditor from './JSONEditor'
 import FilterEditor from '../filter/FilterEditor'
 import PropertyGroup from '../fields/PropertyGroup'
@@ -12,6 +13,7 @@ import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 import InputBlock from '../inputs/InputBlock'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 
+import { changeType } from '../../libs/layer'
 import layout from '../../config/layout.json'
 import { margins, fontSizes } from '../../config/scales'
 import colors from '../../config/colors'
@@ -124,7 +126,7 @@ export default class LayerEditor extends React.Component {
           />
           <LayerTypeBlock
             value={this.props.layer.type}
-            onChange={v => this.changeProperty(null, 'type', v)}
+            onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
           />
         </div>
       case 'source': return <div>

src/libs/layer.js

@@ -0,0 +1,24 @@
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
+
+export function changeType(layer, newType) {
+  const changedPaintProps = { ...layer.paint }
+  Object.keys(changedPaintProps).forEach(propertyName => {
+    if(!(propertyName in GlSpec['paint_' + newType])) {
+      delete changedPaintProps[propertyName]
+    }
+  })
+
+  const changedLayoutProps = { ...layer.layout }
+  Object.keys(changedLayoutProps).forEach(propertyName => {
+    if(!(propertyName in GlSpec['layout_' + newType])) {
+      delete changedLayoutProps[propertyName]
+    }
+  })
+
+  return {
+    ...layer,
+    paint: changedPaintProps,
+    layout: changedLayoutProps,
+    type: newType,
+  }
+}