make wireframe a global toggle

src/main/mesh.js

@@ -279,7 +279,7 @@ function space_init(data) {
                     selection.focus();
                     break;
                 case 'KeyW':
-                    selection.wireframe({toggle:true}, {opacity:0.15});
+                    api.wireframe({toggle:true}, {opacity:0.15});
                     break;
                 case 'KeyB':
                     selection.boundsBox({toggle:true});

src/mesh/api.js

@@ -157,13 +157,6 @@ let selection = {
         return selection;
     },
 
-    wireframe() {
-        for (let m of selection.models()) {
-            m.wireframe(...arguments);
-        }
-        return selection;
-    },
-
     boundsBox() {
         for (let m of selection.groups()) {
             m.showBounds(...arguments);
@@ -240,6 +233,12 @@ let api = mesh.api = {
         ));
     },
 
+    wireframe() {
+        for (let m of api.model.list()) {
+            m.wireframe(...arguments);
+        }
+    },
+
     selection,
 
     group,

src/mesh/model.js

@@ -98,6 +98,8 @@ mesh.model = class MeshModel extends mesh.object {
         meh.receiveShadow = true;
         meh.castShadow = true;
         meh.renderOrder = 1;
+        // sets fallback opacity for wireframe toggle
+        this.opacity(1);
         // this ref allows clicks to be traced to models and groups
         meh.model = this;
         // sync data to worker
@@ -139,11 +141,35 @@ mesh.model = class MeshModel extends mesh.object {
         return this.vertices / 3;
     }
 
-    opacity(ov) {
+    visible(bool) {
+        if (bool === undefined) {
+            return this.mesh.visible;
+        }
+        if (bool.toggle) {
+            return this.visible(!this.mesh.visible);
+        }
+        this.mesh.visible = bool;
+    }
+
+    material(mat) {
+        let op = this.opacity();
+        this.mesh.material = mat = mat.clone();
+        mat.opacity = op;
+        if (op === 1) this.wireframe(false);
+    }
+
+    opacity(ov, opt = {}) {
         let mat = this.mesh.material;
         if (ov === undefined) {
             return mat.opacity;
         }
+        if (ov.restore) {
+            ov = this._op;
+        } else if (ov.temp !== undefined) {
+            ov = ov.temp;
+        } else {
+            this._op = ov;
+        }
         if (ov <= 0.0) {
             mat.transparent = false;
             mat.opacity = 1;
@@ -160,7 +186,7 @@ mesh.model = class MeshModel extends mesh.object {
         if (bool === undefined) {
             return this._wire ? {
                 enabled: true,
-                opacity: this._wireo,
+                opacity: this.opacity(),
                 color: this._wire ? this._wire.material.color : undefined,
             } : {
                 enabled: false
@@ -172,22 +198,16 @@ mesh.model = class MeshModel extends mesh.object {
         if (this._wire) {
             this.mesh.remove(this._wire);
             this._wire = undefined;
-            this.opacity(this._wireo);
+            this.opacity({restore: true});
         }
         if (bool) {
-            this._wireo = this.opacity();
             this._wire = new THREE.Mesh(this.mesh.geometry.shallowClone(), materials.wireframe);
             this.mesh.add(this._wire);
-            this.opacity(opt.opacity || 0);
+            this.opacity({temp: opt.opacity || 0});
         }
         space.update();
     }
 
-    material(mat) {
-        this.wireframe(false);
-        this.mesh.material = mat;
-    }
-
     remove() {
         if (arguments.length === 0) {
             // direct call requires pass through group

web/mesh/index.css

@@ -233,7 +233,7 @@ button:hover {
 }
 
 #selectlist .grid {
-    background-color: rgba(255,255,255,0.9);
+    background-color: rgba(255,255,255,0.8);
     border: 1px solid rgba(0,0,0,0.15);
     border-radius: 3px;
     padding: 3px;