add pref for normals length and color

src/mesh/api.js

@@ -504,6 +504,11 @@ const prefs = {
             dark: false,
             select: []
         },
+        normals: {
+            length: 0.5,
+            color_lite: 0xff0000,
+            color_dark: 0x00ffff
+        }
     },
 
     // look for changes in pref signature

src/mesh/build.js

@@ -178,13 +178,16 @@ gapp.broker.subscribe("mesh.log", log.emit);
 
 // bind settings endpoint to api
 api.settings = function() {
-    let { prefs } = api;
-    let { space } = prefs.map;
-    modal.show('settings', h.div({ class: "settings" }, [
+    const { util } = mesh;
+    const { prefs } = api;
+    const { normals, space } = prefs.map;
+    const { dark } = space;
+
+    const col1 = h.div([
         h.label('dark mode'),
         h.input({ type: "checkbox",
             onchange: ev => call.set_darkmode(ev.target.checked),
-            [ space.dark ? 'checked' : 'unchecked' ] : 1
+            [ dark ? 'checked' : 'unchecked' ] : 1
         }),
         h.label('auto floor'),
         h.input({ type: "checkbox",
@@ -196,7 +199,23 @@ api.settings = function() {
             onchange: ev => prefs.save( space.center = !space.center ),
             [ space.center !== false ? 'checked' : 'unchecked' ] : 1
         }),
-    ]));
+    ]);
+
+    const col2 = h.div([
+        h.label(''),
+        h.label('normals'),
+        h.label('length'),
+        h.input({ type: "text", size: 5, value: normals.length,
+            onchange: ev => call.set_normals_length(ev.target.value)
+        }),
+        h.label('color'),
+        h.input({ type: "text", size: 5,
+            value: util.toHexRGB(dark ? normals.color_dark : normals.color_lite),
+            onchange: ev => call.set_normals_color(util.fromHexRGB(ev.target.value))
+        }),
+    ]);
+
+    modal.show('settings', h.div({ class: "settings" }, [ col1, col2 ] ));
 }
 
 // create html elements

src/mesh/model.js

@@ -358,7 +358,7 @@ mesh.model = class MeshModel extends mesh.object {
             this._norm = undefined;
         }
         if (bool) {
-            this.mesh.add(this._norm = mesh.util.faceNormals(this.mesh, { size: 0.5 }));
+            this.mesh.add(this._norm = mesh.util.faceNormals(this.mesh));
         }
     }
 

src/mesh/util.js

@@ -25,6 +25,21 @@ const util = exports({
         return uid.join('-');
     },
 
+    toHexRGB(v) {
+        return [
+            ((v >> 16) & 0xff).toString(16).padStart(2,0),
+            ((v >>  8) & 0xff).toString(16).padStart(2,0),
+            ((v >>  0) & 0xff).toString(16).padStart(2,0)
+        ].join('');
+    },
+
+    fromHexRGB(v) {
+        return 0 +
+            parseInt(v.substring(0,2), 16) << 16 |
+            parseInt(v.substring(2,4), 16) <<  8 |
+            parseInt(v.substring(4,6), 16);
+    },
+
     // add comma separator to 1000s
     comma(val) {
         let str = val.toString().split(".");
@@ -169,10 +184,13 @@ const util = exports({
         const _v1 = new THREE.Vector3();
         const _v2 = new THREE.Vector3();
         const _normalMatrix = new THREE.Matrix3();
-        const defcolor = mesh.api.prefs.map.space.dark ? 0x00ffff : 0xff0000;
+        const prefs = mesh.api.prefs.map;
+        const norms = prefs.normals;
+        const defcolor = prefs.space.dark ? norms.color_dark : norms.color_lite;
+        const normlen = norms.length || 1;
 
         class FaceNormalsHelper extends THREE.LineSegments {
-            constructor(object, size = opt.size || 1, color = opt.color || defcolor) {
+            constructor(object, size = opt.size || normlen, color = opt.color || defcolor) {
                 const objGeometry = object.geometry;
                 const nNormals = objGeometry.attributes.position.count / 3;
                 const geometry = new THREE.BufferGeometry();