add visibility toggle

src/main/mesh.js

@@ -172,6 +172,8 @@ function space_init(data) {
                     return api.grid();
                 case 'KeyL':
                     return api.log.toggle();
+                case 'KeyS':
+                    return selection.visible({toggle:true});
                 case 'KeyB':
                     return selection.boundsBox({toggle:true});
                 case 'KeyH':

src/mesh/api.js

@@ -106,6 +106,13 @@ let selection = {
         }
     },
 
+    visible() {
+        for (let m of selection.models()) {
+            m.visible(...arguments);
+        }
+        util.defer(selection.update);
+    },
+
     duplicate() {
         for (let m of selection.models()) {
             m.duplicate();

src/mesh/build.js

@@ -225,6 +225,7 @@ function ui_build() {
             h.button({ _: 'bounds', onclick() { api.selection.boundsBox({toggle:true}) } }),
             h.button({ _: 'gridlines', onclick() { api.grid() } }),
             h.button({ _: 'wireframe', onclick() { api.wireframe() } }),
+            h.button({ _: 'visible', onclick() { api.selection.visible({ toggle: true }) } }),
             h.div({ class: "vsep" }),
             h.button({ _: 'duplicate', onclick: api.selection.duplicate }),
             h.button({ _: 'merge', onclick: api.selection.merge }),
@@ -274,7 +275,10 @@ function ui_build() {
                 h.div({ class: "models"},
                     // map models to buttons
                     g.models.map(m => h.button({ _: m.file || m.id,
-                        class: selHas(m) ? [ 'selected' ] : [],
+                        class: [
+                            selHas(m) ? 'selected' : undefined,
+                            m.visible() ? undefined : 'hidden'
+                        ],
                         onclick(e) {
                             let sel = api.selection.list();
                             e.shiftKey || (sel.length === 1 && m === sel[0]) ?

src/mesh/object.js

@@ -71,6 +71,18 @@ mesh.object = class MeshObject {
         return this;
     }
 
+    visible(opt) {
+        if (opt === undefined) {
+            return this.object.visible;
+        }
+        if (opt.toggle) {
+            this.visible(!this.visible());
+        } else {
+            this.object.visible = opt;
+        }
+        return this;
+    }
+
     floor(clazz) {
         if (!clazz || this instanceof clazz) {
             let b = this.bounds;

web/mesh/index.css

@@ -369,6 +369,14 @@ button:hover {
     background-color: rgba(0,255,0,1)
 }
 
+#grouplist .hidden {
+    background-color: rgba(0,0,255,0.2);
+}
+
+#grouplist .hidden:hover {
+    background-color: rgba(0,0,255,0.1);
+}
+
 /** selection info bottom/right of workspace **/
 
 #selectlist {