highlihgter and baseplane visibility

js/models/BasePlane.js

@@ -17,6 +17,7 @@ BasePlane = Backbone.Model.extend({
 
         //bind events
         this.listenTo(this, "change:zIndex", this._renderZIndexChange);
+        this.listenTo(globals.appState, "change:basePlaneIsVisible", this._setVisibility);
 
         //draw mesh
         this.set("mesh", this._makeBasePlaneMesh());
@@ -26,6 +27,7 @@ BasePlane = Backbone.Model.extend({
             globals.three.sceneAdd(mesh, self._checkIsHighlightable(mesh));
         });
         globals.three.render();
+        this._setVisibility();
     },
 
     updateXYSeparation: function(xySep) {},
@@ -34,6 +36,13 @@ BasePlane = Backbone.Model.extend({
         return new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), Math.PI);
     },
 
+    _setVisibility: function(){
+        _.each(this.get("mesh"), function(mesh){
+            mesh.visible = globals.appState.get("basePlaneIsVisible");
+        });
+        globals.three.render();
+    },
+
     ///////////////////////////////////////////////////////////////////////////////////
     //////////////////////HIGHLIGHTER FUNCTIONALITY////////////////////////////////////
     ///////////////////////////////////////////////////////////////////////////////////

js/threeViews/Highlighter.js

@@ -40,6 +40,7 @@ Highlighter = Backbone.View.extend({
     },
 
     _setVisibility: function(visible, forceRender){
+        visible = globals.appState.get("highlighterIsVisible") && visible;
         if (forceRender || this.isVisible() != visible){
             this.mesh.visible = visible;
             globals.three.render();