Support propagating from different layer types

src/layers/background.jsx

@@ -7,7 +7,8 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 export default class BackgroundLayer extends React.Component {
 	static propTypes = {
 		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		onPaintChanged: React.PropTypes.func.isRequired
+		onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
 	}
 
 	constructor(props) {
@@ -15,16 +16,10 @@ export default class BackgroundLayer extends React.Component {
 		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
-	onPaintChanged(property, value) {
-		if (property == "background-opacity" && !isNaN(parseFloat(value))) {
-			value = parseFloat(value)
-		}
-		this.props.onPaintChanged(property, value)
-	}
-
 	render() {
 		return <div>
 			<PropertyGroup
+				onChange={this.props.onLayoutChanged.bind(this)}
 				layerType="background"
 				groupType="layout"
 				properties={this.props.layer.get('layout', Immutable.Map())}

src/layers/editor.jsx

@@ -80,6 +80,7 @@ export class LayerEditor extends React.Component {
 			return <FillLayer
 				layer={this.props.layer}
 				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 
@@ -87,18 +88,23 @@ export class LayerEditor extends React.Component {
 			return <BackgroundLayer
 				layer={this.props.layer}
 				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 
 		if (type === "line") {
 			return <LineLayer
 				layer={this.props.layer}
+				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 
 		if (type === "symbol") {
 			return <SymbolLayer
 				layer={this.props.layer}
+				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 

src/layers/fill.jsx

@@ -7,7 +7,8 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 export default class FillLayer extends React.Component {
 	static propTypes = {
 		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-    onPaintChanged: React.PropTypes.func.isRequired
+    onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
   }
 
 	constructor(props) {
@@ -15,18 +16,10 @@ export default class FillLayer extends React.Component {
 		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
-	onPaintChanged(property, e) {
-		let value = e.target.value
-		if (property == "fill-opacity") {
-			value = parseFloat(value)
-		}
-
-		this.props.onPaintChanged(property, value)
-	}
-
 	render() {
 		return <div>
 			<PropertyGroup
+				onChange={this.props.onLayoutChanged.bind(this)}
 				layerType="fill"
 				groupType="layout"
 				properties={this.props.layer.get('layout', Immutable.Map())}

src/layers/line.jsx

@@ -5,12 +5,24 @@ import { PropertyGroup } from '../fields/spec'
 export default class LineLayer extends React.Component {
 	static propTypes = {
 		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+		onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
   }
 
 	render() {
 		return <div>
-			<PropertyGroup layerType="line" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
-			<PropertyGroup layerType="line" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+			<PropertyGroup
+				onChange={this.props.onLayoutChanged.bind(this)}
+				layerType="line"
+				groupType="layout"
+				properties={this.props.layer.get('layout', Immutable.Map())}
+			/>
+			<PropertyGroup
+				onChange={this.props.onPaintChanged.bind(this)}
+				layerType="line"
+				groupType="paint"
+				properties={this.props.layer.get('paint', Immutable.Map())}
+			/>
 		</div>
 	}
 }

src/layers/symbol.jsx

@@ -1,10 +1,31 @@
 import React from 'react'
 
 export default class SymbolLayer extends React.Component {
+	static propTypes = {
+		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+		onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
+	}
+
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
 	render() {
 		return <div>
-			<PropertyGroup layerType="symbol" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
-			<PropertyGroup layerType="symbol" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+			<PropertyGroup
+				onChange={this.props.onLayoutChanged.bind(this)}
+				layerType="symbol"
+				groupType="layout"
+				properties={this.props.layer.get('layout', Immutable.Map())}
+			/>
+			<PropertyGroup
+				onChange={this.props.onPaintChanged.bind(this)}
+				layerType="symbol"
+				groupType="paint"
+				properties={this.props.layer.get('paint', Immutable.Map())}
+			/>
 		</div>
 	}
 }