add wireframe preferences

release.md

@@ -20,7 +20,9 @@ Full docs @ https://docs.grid.space/projects/kiri-moto
 * `C` auto-fog in wireframe view to aid close mesh inspections
 * `C` significant speed-up for large surface selections
 * `C` multi-body identification and isolation
+* `-` quick add primitives: cube, cylinder
 * `-` parameterize svg and image import
+* `-` undo / redo for some operations
 * `-` control wireframe transparency
 * `-` show camera focal point
 

src/main/mesh.js

@@ -565,6 +565,18 @@ function set_surface_radius(radius) {
     prefs.save();
 }
 
+function set_wireframe_opacity(opacity) {
+    let { prefs } = mesh.api;
+    prefs.map.wireframe.opacity = parseFloat(opacity || 0.15);
+    prefs.save();
+}
+
+function set_wireframe_fog(fogx) {
+    let { prefs } = mesh.api;
+    prefs.map.wireframe.fog = parseFloat(fogx || 3);
+    prefs.save();
+}
+
 // bind functions to topics
 broker.listeners({
     edit_split,
@@ -577,7 +589,9 @@ broker.listeners({
     set_normals_color,
     set_normals_length,
     set_surface_radians,
-    set_surface_radius
+    set_surface_radius,
+    set_wireframe_opacity,
+    set_wireframe_fog
 });
 
 // remove version cache bust from url

src/mesh/api.js

@@ -117,7 +117,7 @@ const selection = {
     update() {
         for (let group of groups) {
             group.select(false);
-            group.wireframe(prefs.map.space.wire || false);
+            group.wireframe(prefs.map.space.wire || false, prefs.map.wireframe.opacity);
             group.normals(prefs.map.space.norm || false);
         }
         api.updateFog();
@@ -569,6 +569,10 @@ const prefs = {
         surface: {
             radians: 0.1,
             radius: 0.2
+        },
+        wireframe: {
+            opacity: 0.4,
+            fog: 3
         }
     },
 
@@ -632,7 +636,7 @@ const api = exports({
         space.view.panTo(center.x, center.z, -center.y, left, up);
     },
 
-    grid(state = {toggle:true}) {
+    grid(state = { toggle:true }) {
         let { platform } = space;
         let { map, save } = prefs;
         if (state.toggle) {
@@ -644,7 +648,7 @@ const api = exports({
         save();
     },
 
-    wireframe(state = {toggle:true}, opt = { }) {
+    wireframe(state = { toggle:true }, opt = { opacity: prefs.map.wireframe.opacity }) {
         const mspace = prefs.map.space;
         let wire = mspace.wire;
         if (state.toggle) {
@@ -661,8 +665,9 @@ const api = exports({
 
     updateFog() {
         const mspace = prefs.map.space;
+        const mwire = prefs.map.wireframe;
         if (mspace.wire) {
-            space.scene.setFog(3, mspace.dark ? 0 : 0xffffff);
+            space.scene.setFog(mwire.fog, mspace.dark ? 0 : 0xffffff);
         } else {
             space.scene.setFog(false);
         }

src/mesh/build.js

@@ -223,7 +223,7 @@ api.welcome = function(version = "unknown") {
 api.settings = function() {
     const { util } = mesh;
     const { prefs } = api;
-    const { surface, normals, space } = prefs.map;
+    const { surface, normals, space, wireframe } = prefs.map;
     const { dark } = space;
 
     const col1 = h.div([
@@ -246,7 +246,7 @@ api.settings = function() {
 
     const col2 = h.div([
         h.label(''),
-        h.label('normals'),
+        h.label('normal'),
         h.label('length'),
         h.input({ type: "text", size: 5, value: parseFloat(normals.length),
             onchange: ev => call.set_normals_length(ev.target.value)
@@ -271,7 +271,20 @@ api.settings = function() {
         }),
     ]);
 
-    modal.show('settings', h.div({ class: "settings" }, [ col1, col2, col3 ] ));
+    const col4 = h.div([
+        h.label(''),
+        h.label('wire'),
+        h.label('opacity'),
+        h.input({ type: "text", size: 5, value: parseFloat(wireframe.opacity),
+            onchange: ev => call.set_wireframe_opacity(ev.target.value)
+        }),
+        h.label('fog x'),
+        h.input({ type: "text", size: 5, value: parseFloat(wireframe.fog),
+            onchange: ev => call.set_wireframe_fog(ev.target.value)
+        }),
+    ]);
+
+    modal.show('settings', h.div({ class: "settings" }, [ col1, col2, col3, col4 ] ));
 }
 
 // create html elements