add grid lines toggling

src/mesh/api.js

@@ -267,6 +267,14 @@ let api = mesh.api = {
         ));
     },
 
+    grid(state = {toggle:true}) {
+        if (state.toggle) {
+            space.platform.showGrid(!space.platform.isGridVisible());
+        } else {
+            space.platform.showGrid(state);
+        }
+    },
+
     wireframe(state = {toggle:true}, opt = {opacity:0.15}) {
         for (let m of api.model.list()) {
             m.wireframe(state, opt);

src/mesh/build.js

@@ -179,6 +179,7 @@ function ui_build() {
             h.button({ _: 'analyze', disabled: true }),
             h.button({ _: 'repair', onclick: api.tool.repair }),
             h.div({ class: "vsep" }),
+            h.button({ _: 'gridlines', onclick() { api.grid() } }),
             h.button({ _: 'wireframe', onclick() { api.wireframe() } }),
         ]),
     ]);

src/moto/space.js

@@ -923,7 +923,8 @@
 
     function setPlatform(opt = {}) {
         let platform = Space.platform;
-        let { color, round, size, grid, opacity, volume, zOffset, origin } = opt;
+        let { color, round, size, grid, opacity } = opt;
+        let { visible, volume, zOffset, origin } = opt;
         if (color) {
             platform.setColor(color);
         }
@@ -953,6 +954,9 @@
         if (zOffset !== undefined) {
             platform.setZOff(zOffset);
         }
+        if (visible !== undefined) {
+            platform.setVisible(visible);
+        }
     }
 
     let Space = MOTO.Space = {
@@ -1017,11 +1021,13 @@
             setMaxZ:    (z) => { panY = z / 2 },
             setCenter:  (x,y,z) => { panX = x; panY = z, panZ = y },
             setHidden:  (b) => { showPlatform = !b; platform.visible = !b },
+            setVisible: (b) => { showPlatform = b; platform.visible = b },
             setHiding:  (b) => { hidePlatformBelow = b },
             setZOff:    (z) => { platformZOff = z; updatePlatformPosition() },
             setGridZOff:(z) => { gridZOff = z; updatePlatformPosition() },
             isHidden:   ()  => { return !showPlatform },
             isVisible:  ()  => { return platform.visible },
+            isGridVisible()    { return grid.view.visible },
             opacity:    (o) => { platform.material.opacity = o },
             onMove:     (f,t) => { platformOnMove = f, platformOnMoveTime = t || platformOnMoveTime },
             onHover:    (f) => { platformHover = f },

web/mesh/index.css

@@ -144,7 +144,7 @@ body, div {
 button {
     padding: 2px 3px 2px 3px;
     border: 1px solid rgba(150,150,150,0.5);
-    background-color: rgba(220,220,220,0.5);
+    background-color: rgba(220,220,220,0.75);
 }
 
 button:hover {
@@ -236,6 +236,7 @@ button:hover {
     border-radius: 3px;
     margin: 0 0 2px 0;
     padding: 3px;
+    background-color: rgba(255,255,255,0.5);
 }
 
 #actions .vsep, #grouplist .vsep {
@@ -306,7 +307,6 @@ button:hover {
 
 #grouplist, #grouplist div {
     flex-direction: column;
-    background-color: transparent;
     gap: 2px;
 }