From a05881a07855cd40f6cb4c1d8e8afcec521c19ea Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sat, 17 Dec 2016 21:25:00 +0100
Subject: [PATCH] Draft of color picker

---
 src/app.jsx           | 22 ++++++++++++++++----
 src/fields/color.jsx  | 48 ++++++++++++++++++++++++++++---------------
 src/fields/spec.jsx   |  2 --
 src/layers/editor.jsx |  3 +--
 4 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index f0e9067..147e714 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -90,6 +90,17 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
+  onLayerChanged(layer) {
+    console.log(layer)
+    const changedStyle = this.state.mapStyle.setIn('layers', layer.get('id'), layer)
+    this.onStyleChanged(changedStyle)
+  }
+
+  onLayerChanged(layer) {
+    const changedStyle = this.state.mapStyle.setIn(['layers', layer.get('id')], layer)
+    this.onStyleChanged(changedStyle)
+  }
+
   mapRenderer() {
     const mapProps = {
       mapStyle: this.state.mapStyle,
@@ -119,7 +130,9 @@ export default class App extends React.Component {
         onStyleDownload={this.onStyleDownload.bind(this)}
       />
       <div style={{
-        ...fullHeight,
+        position: 'absolute',
+        bottom: 0,
+        height: "100%",
         top: 50,
         left: 0,
         zIndex: 100,
@@ -134,15 +147,16 @@ export default class App extends React.Component {
         />
       </div>
       <div style={{
-        ...fullHeight,
+        position: 'absolute',
+        bottom: 0,
+        height: "100%",
         top: 50,
         left: 180,
         zIndex: 100,
         width: 300,
-        overflow: "hidden",
         backgroundColor: colors.gray}
       }>
-      {this.state.selectedLayer && <LayerEditor layer={this.state.selectedLayer} />}
+      {this.state.selectedLayer && <LayerEditor layer={this.state.selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} />}
       </div>
       {this.mapRenderer()}
     </div>
diff --git a/src/fields/color.jsx b/src/fields/color.jsx
index 8704cfa..a2163b0 100644
--- a/src/fields/color.jsx
+++ b/src/fields/color.jsx
@@ -1,33 +1,47 @@
 import React from 'react'
 import inputStyle from './input.js'
+import ColorPicker from 'react-colorpickr'
+import 'react-colorpickr/dist/colorpickr.css'
+
+function formatColor(color) {
+  if(color.a !== 1) {
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+  }
+  return `rgb(${color.r}, ${color.g}, ${color.b})`
+}
 
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
 static propTypes = {
     onChange: React.PropTypes.func.isRequired,
-		name: React.PropTypes.string.isRequired,
+    name: React.PropTypes.string.isRequired,
     value: React.PropTypes.string,
     default: React.PropTypes.number,
     doc: React.PropTypes.string,
   }
 
-	onChange(e) {
-		const value = e.target.value
-		return this.props.onChange(value === "" ? null: value)
-	}
+  render() {
+    return <div style={{...inputStyle.property, position: 'relative'}}>
+      <div style={{
+        position: 'absolute',
+        left: 200
+      }}>
+        <ColorPicker
+          value={this.props.value}
+          onChange={c => this.props.onChange(formatColor(c))}
+        />
+      </div>
 
-	render() {
-		return <div style={inputStyle.property}>
-			<label style={inputStyle.label}>{this.props.name}</label>
-			<input
-				style={inputStyle.input}
-				name={this.props.name}
-				placeholder={this.props.default}
-				value={this.props.value ? this.props.value : ""}
-				onChange={this.onChange.bind(this)}
-			/>
-		</div>
-	}
+      <label style={inputStyle.label}>{this.props.name}</label>
+      <input
+        style={inputStyle.input}
+        name={this.props.name}
+        placeholder={this.props.default}
+        value={this.props.value ? this.props.value : ""}
+        onChange={(e) => this.props.onChange(e.target.value)}
+      />
+    </div>
+  }
 }
 
 export default ColorField
diff --git a/src/fields/spec.jsx b/src/fields/spec.jsx
index be6c0bb..9cf2146 100644
--- a/src/fields/spec.jsx
+++ b/src/fields/spec.jsx
@@ -36,10 +36,8 @@ class ZoomSpecField extends React.Component {
   render() {
     if(isZoomField(this.props.value)) {
       const zoomFields = this.props.value.get('stops').map(stop => {
-        console.log(stop)
         const zoomLevel = stop.get(0)
         const value = stop.get(1)
-        console.log(zoomLevel, value)
 
         return <div key={zoomLevel}>
           <b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index 36c78bc..720125a 100644
--- a/src/layers/editor.jsx
+++ b/src/layers/editor.jsx
@@ -59,6 +59,7 @@ export class LayerEditor extends React.Component {
   onPaintChanged(property, newValue) {
     let layer = this.props.layer
     //TODO: by using immutable records we can avoid this checking if object exists
+    //
     if(!layer.has('paint')) {
       layer = layer.set('paint', Immutable.Map())
     }
@@ -143,11 +144,9 @@ export class LayerEditor extends React.Component {
           <MdDelete />
         </NavItem>
       </Toolbar>
-      <ScrollContainer>
         <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
         {this.layerFromType(this.props.layer.get('type'))}
         </div>
-      </ScrollContainer>
     </div>
   }
 }