From 7b631b051013ebd763d1f515ca4d2fa921eb7865 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Fri, 30 Dec 2016 16:47:47 +0100
Subject: [PATCH] Garbage collect properties when change type #42

---
 src/components/ErrorPanel.jsx         | 17 ++++++++++++-----
 src/components/layers/LayerEditor.jsx |  4 +++-
 src/libs/layer.js                     | 24 ++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 src/libs/layer.js

diff --git a/src/components/ErrorPanel.jsx b/src/components/ErrorPanel.jsx
index 31da4e77..ca4c7215 100644
--- a/src/components/ErrorPanel.jsx
+++ b/src/components/ErrorPanel.jsx
@@ -9,14 +9,21 @@ class ErrorPanel extends React.Component {
   }
 
   render() {
+    const errors = this.props.messages.map((m, i) => {
+      return <Paragraph key={i}
+        style={{
+          color: colors.red,
+          margin: 0,
+          lineHeight: 1.2,
+        }}>
+        {m}
+      </Paragraph>
+    })
+
     return <div style={{
       padding: margins[1],
     }}>
-      {this.props.messages.map(m => <Paragraph style={{
-        color: colors.red,
-        margin: 0,
-        lineHeight: 1.2,
-      }}>{m}</Paragraph>)}
+      {errors}
     </div>
   }
 }
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 5ff2c931..9e678d2a 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/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>
diff --git a/src/libs/layer.js b/src/libs/layer.js
new file mode 100644
index 00000000..d6df260c
--- /dev/null
+++ b/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,
+  }
+}