From 52e4c92ccf6022619f9ccd0d981458348e6a3124 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Fri, 9 Sep 2016 16:11:05 +0200
Subject: [PATCH] Try support background opacity

---
 src/layers.jsx | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/layers.jsx b/src/layers.jsx
index ee26e6d..681a2e6 100644
--- a/src/layers.jsx
+++ b/src/layers.jsx
@@ -14,7 +14,12 @@ export class FillLayer extends React.Component {
   }
 
 	onPaintChanged(property, e) {
-		this.props.onPaintChanged(property, e.target.value)
+		let value = e.target.value
+		if (property == "fill-opacity") {
+			value = parseFloat(value)
+		}
+
+		this.props.onPaintChanged(property, value)
 	}
 
 	render() {
@@ -30,6 +35,29 @@ export class FillLayer extends React.Component {
 	}
 }
 
+export class BackgroundLayer extends React.Component {
+	static propTypes = {
+    layer: React.PropTypes.object.isRequired,
+    onPaintChanged: React.PropTypes.func.isRequired
+  }
+
+	onPaintChanged(property, e) {
+		let value = e.target.value
+		if (property == "background-opacity" && !isNaN(parseFloat(value))) {
+			value = parseFloat(value)
+		}
+		this.props.onPaintChanged(property, value)
+	}
+
+	render() {
+		const paint = this.props.layer.paint
+		return <div>
+			<Input name="background-color" label="Background color" onChange={this.onPaintChanged.bind(this, "background-color")} value={paint["background-color"]} />
+			<Input name="background-opacity" label="Background opacity" onChange={this.onPaintChanged.bind(this, "background-opacity")} value={paint["background-opacity"]} />
+		</div>
+	}
+}
+
 export class LineLayer extends React.Component {
 	render() {
 		return <div></div>
@@ -99,6 +127,10 @@ export class LayerPanel extends React.Component {
 			return <FillLayer layer={this.state.layer} onPaintChanged={this.onPaintChanged.bind(this)} />
 		}
 
+		if (type === "background") {
+			return <BackgroundLayer layer={this.state.layer} onPaintChanged={this.onPaintChanged.bind(this)} />
+		}
+
 		if (type === "line") {
 			return <LineLayer />
 		}