From c84318e6fe0907d1bd307bc0947b3422132ef302 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Sat, 10 Sep 2016 00:43:41 +0200
Subject: [PATCH] Try solve no map changes problem

---
 package.json      |  2 ++
 src/layers.jsx    | 33 ++++++++++++++++++---------------
 src/map.jsx       | 36 +++++++++++++++++++++++++++++-------
 src/stylestore.js |  1 +
 webpack.config.js |  2 ++
 5 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index b2731fd..d716aec 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
   "homepage": "https://github.com/lukasmartinelli/mapolo#readme",
   "dependencies": {
     "file-saver": "^1.3.2",
+    "immutable": "^3.8.1",
+    "lodash": "^4.15.0",
     "mapbox-gl": "^0.23.0",
     "mapbox-gl-style-spec": "^8.8.0",
     "node-sass": "^3.9.2",
diff --git a/src/layers.jsx b/src/layers.jsx
index 7e5e47e..c526d86 100644
--- a/src/layers.jsx
+++ b/src/layers.jsx
@@ -6,6 +6,7 @@ import {MdVisibility, MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, M
 import Collapse from 'react-collapse'
 import theme from './theme.js'
 import scrollbars from './scrollbars.scss'
+import _ from 'lodash'
 
 export class FillLayer extends React.Component {
 	static propTypes = {
@@ -104,13 +105,13 @@ export class LayerPanel extends React.Component {
 	}
 
 	onPaintChanged(property, newValue) {
-		const layer = this.props.layer
+		const layer = _.cloneDeep(this.props.layer)
 		layer.paint[property] = newValue;
 		this.props.onLayerChanged(layer)
 	}
 
 	onLayoutChanged(property, newValue) {
-		const layer = this.props.layer
+		const layer = _.cloneDeep(this.props.layer)
 		layer.layout[property] = newValue;
 		this.props.onLayerChanged(layer)
 	}
@@ -192,7 +193,7 @@ export class LayerPanel extends React.Component {
 
 export class LayerEditor extends React.Component {
 	static propTypes = {
-    layers: React.PropTypes.array.isRequired,
+		layers: React.PropTypes.array.isRequired,
     onLayersChanged: React.PropTypes.func.isRequired
   }
 
@@ -201,28 +202,30 @@ export class LayerEditor extends React.Component {
 	}
 
 	onLayerDestroyed(deletedLayer) {
+		//TODO: That's just horrible...
 		let deleteIdx = -1
+
 		for (let i = 0; i < this.props.layers.length; i++) {
-				if(this.props.layers[i].id == deletedLayer.id) {
-					deleteIdx = i
-				}
+			if(this.props.layers[i].id == deletedLayer.id) {
+				deleteIdx = i
+			}
 		}
 
-		const remainingLayers = this.props.layers
-		const removedLayers = remainingLayers.splice(deleteIdx, 1)
+		const remainingLayers = this.props.layers.slice(0)
+		remainingLayers.splice(deleteIdx, 0)
 		this.props.onLayersChanged(remainingLayers)
 	}
 
 	onLayerChanged(changedLayer) {
-		let changedIdx = -1
+		//TODO: That's just horrible...
+		let changeIdx = -1
 		for (let i = 0; i < this.props.layers.length; i++) {
-				if(this.props.layers[i].id == changedLayer.id) {
-					changedIdx = i
-				}
+			if(this.props.layers[i].id == changedLayer.id) {
+				changeIdx = i
+			}
 		}
-
-		const changedLayers = this.props.layers
-		changedLayers[changedIdx] = changedLayer
+		const changedLayers = _.cloneDeep(this.props.layers)
+		changedLayers[changeIdx] = changedLayer
 		this.props.onLayersChanged(changedLayers)
 	}
 
diff --git a/src/map.jsx b/src/map.jsx
index ebaa45e..defd143 100644
--- a/src/map.jsx
+++ b/src/map.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import ReactMapboxGl, { ZoomControl } from "react-mapbox-gl"
-
+import MapboxGl from 'mapbox-gl';
+import diffStyles from 'mapbox-gl-style-spec/lib/diff'
 import theme from './theme.js'
 
 export class Map extends React.Component {
@@ -8,11 +8,33 @@ export class Map extends React.Component {
     mapStyle: React.PropTypes.object.isRequired
   }
 
+	componentWillReceiveProps(nextProps) {
+		const map = this.state.map
+		if(map) {
+			const changes = diffStyles(this.props.mapStyle, nextProps.mapStyle)
+			changes.forEach(change => {
+				map[change.command].apply(map, change.args);
+			});
+		}
+	}
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.mapStyle !== this.props.mapStyle
+  }
+
+	componentDidMount() {
+		MapboxGl.accessToken = "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w";
+		const map = new MapboxGl.Map({
+			container: this.container,
+			style: this.props.mapStyle,
+		});
+
+    map.on("style.load", (...args) => {
+      this.setState({ map });
+    });
+	}
+
 	render() {
-		return <ReactMapboxGl
-				style={this.props.mapStyle}
-				accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w">
-				<ZoomControl/>
-		</ReactMapboxGl>
+		return <div ref={x => this.container = x}></div>
 	}
 }
diff --git a/src/stylestore.js b/src/stylestore.js
index c4e2c3a..6f0821a 100644
--- a/src/stylestore.js
+++ b/src/stylestore.js
@@ -94,6 +94,7 @@ export class StyleStore {
 			mapStyle.created = new Date()
 		}
 		mapStyle.layers = colorizeLayers(mapStyle.layers)
+
 		this.backup(mapStyle)
 		this.currentStyle = mapStyle
 	}
diff --git a/webpack.config.js b/webpack.config.js
index 132701c..d86361d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -60,6 +60,8 @@ module.exports = {
 	resolve: {
 		alias: {
 			'webworkify': 'webworkify-webpack',
+			// TODO: otherwise I get a max call stack error in browser?
+			'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
 		},
 		extensions: ['', '.js', '.jsx']
 	},