fully implement layer ui

1 files changed, 65 insertions, 1 deletions

diff --git a/src/Map/Layer.js b/src/Map/Layer.js
index 93e5799..1f486ad 100644
--- a/src/Map/Layer.js
+++ b/src/Map/Layer.js
@@ -72,6 +72,60 @@ class LayerData {
 		after.subLayers.push(container[index]);
 		container.splice(index, 1);
 	}
+
+	popLayer(idChain) {
+		const parentChain = idChain.slice(1);
+		const [ container, id ] = this._getContainerAndId(idChain);
+		const index = this._idToIndex(container, id);
+		const layer = container[index];
+		container.splice(index, 1);
+
+		const [ parentContainer, parentId ] = this._getContainerAndId(parentChain);
+		const parentIndex = this._idToIndex(parentContainer, parentId);
+		parentContainer.splice(parentIndex, 0, layer);
+	}
+
+
+	moveUp(idChain) {
+		const [ container, id ] = this._getContainerAndId(idChain);
+		const index = this._idToIndex(container, id);
+		if (index === container.length-1) return;
+
+		const layer = container[index];
+		container.splice(index, 1);
+		container.splice(index+1, 0, layer);
+	}
+
+	moveDown(idChain) {
+		const [ container, id ] = this._getContainerAndId(idChain);
+		const index = this._idToIndex(container, id);
+		if (index === 0) return;
+
+		const layer = container[index];
+		container.splice(index, 1);
+		container.splice(index-1, 0, layer);
+	}
+
+	toggleVisible(idChain) {
+		const [ container, id ] = this._getContainerAndId(idChain);
+		const index = this._idToIndex(container, id);
+		const layer = container[index];
+		const visible = !layer.visible;
+
+		const recursiveToggle = layer => {
+			layer.visible = visible;
+			for (let subLayer of layer.subLayers)
+				recursiveToggle(subLayer);
+		}
+		recursiveToggle(layer);
+	}
+
+	rename(idChain, name) {
+		const [ container, id ] = this._getContainerAndId(idChain);
+		const index = this._idToIndex(container, id);
+		const layer = container[index];
+		layer.name = name;
+	}
 }
 
 
@@ -174,8 +228,18 @@ class LayerController {
 		const respond = f => ( idChain => { f(idChain); this.updateView(); } );
 
 		this.view.onAddLayer = idChain => { this.data.insertLayer(idChain); this.updateView(); };
-		this.view.onPushLayer = idChain => { this.data.pushLayer(idChain); this.updateView(); };
 		this.view.onRemoveLayer = idChain => { this.data.removeLayer(idChain); this.updateView(); }
+		this.view.onPushLayer = idChain => { this.data.pushLayer(idChain); this.updateView(); };
+		this.view.onPopLayer = idChain => { this.data.popLayer(idChain); this.updateView(); };
+
+		this.view.onMoveUp = idChain => { this.data.moveUp(idChain); this.updateView(); };
+		this.view.onMoveDown = idChain => { this.data.moveDown(idChain); this.updateView(); };
+		this.view.onShowHideLayer = idChain => { this.data.toggleVisible(idChain); this.updateView(); };
+		this.view.onRenameLayer = idChain => {
+			const newName = prompt("New layer name");
+			this.data.rename(idChain, newName);
+			this.updateView();
+		}
 	}
 
 	updateView() {