use fat lines for trace selection and rendering. fix trace offset when toggling in/out to none

src/kiri-mode/cam/client.js

@@ -1005,7 +1005,7 @@ CAM.init = function(kiri, api) {
                 widget.traces.forEach(poly => {
                     let match = areas.filter(arr => poly.matches(arr));
                     let layers = new kiri.Layers();
-                    layers.setLayer("trace", {line: 0xaaaa55}, false).addPoly(poly);
+                    layers.setLayer("trace", {line: 0xaaaa55, fat:4, order:-10}, false).addPoly(poly);
                     stack.addLayers(layers);
                     stack.new_meshes.forEach(mesh => {
                         mesh.trace = {widget, poly};
@@ -1070,7 +1070,7 @@ CAM.init = function(kiri, api) {
     });
     func.traceHover = function(data) {
         if (lastTrace) {
-            let { color, colorSave } = lastTrace.material[0];
+            let { color, colorSave } = lastTrace.material[0] || lastTrace.material;
             color.r = colorSave.r;
             color.g = colorSave.g;
             color.b = colorSave.b;
@@ -1091,7 +1091,7 @@ CAM.init = function(kiri, api) {
             let { clientX, clientY } = event;
             let { offsetWidth, offsetHeight } = target;
         }
-        let material = lastTrace.material[0];
+        let material = lastTrace.material[0] || lastTrace.material;
         let color = material.color;
         let {r, g, b} = color;
         material.colorSave = {r, g, b};
@@ -1114,7 +1114,7 @@ CAM.init = function(kiri, api) {
         }
     };
     func.traceToggle = function(obj, skip) {
-        let material = obj.material[0];
+        let material = obj.material[0] || obj.material;
         if (!material) return;
         let { color, colorSave } = material;
         let { widget, poly } = obj.trace;

src/kiri-mode/cam/ops.js

@@ -1089,7 +1089,7 @@ class OpTrace extends CamOp {
                     routed.push(poly);
                 });
                 for (let poly of POLY.nest(routed)) {
-                    let offdist = offover;
+                    let offdist = offset !== 'none' ? offover : 0;
                     if (!offdist)
                     switch (offset) {
                         case "outside": offdist = traceOffset; break;

src/kiri/layers.js

@@ -64,7 +64,7 @@ class Layers {
             rotation: this.rotation,
             position: this.position,
             off: off === true,
-            lines: [],
+            lines: [], // basic line segments
             polys: [], // colors are an attribute on polygons
             faces: [], // triangles for areas and flats
             norms: undefined, // flats vertex normals
@@ -72,7 +72,7 @@ class Layers {
             paths: undefined, // 3d extrusion / tube paths (used to be an array, now merged - FIX)
             cpath: undefined, // path colors indices
             color: colors || {
-                check: 0, // unused?
+                fat: 0, // render polys & lines with thickness
                 line: 0,
                 face: 0,
                 opacity: 1

src/kiri/stack.js

@@ -108,7 +108,7 @@ class Stack {
 
         const { polys, lines, faces, cface, paths, cpath } = layer;
         const { color, off, norms, rotation, position } = layer;
-        const { opacity } = color;
+        const { fat, order, opacity } = color;
         const meshes = [];
         const defstate = !off;
         const mats = [];
@@ -118,7 +118,7 @@ class Stack {
             const vert = []; // vertexes
             const mat = []; // materials
             const grp = []; // material groups
-            const geo = new THREE.BufferGeometry();
+            const geo = fat ? new THREE.LineSegmentsGeometry() : new THREE.BufferGeometry();
             // map all the poly and line colors for re-use
             const cmap = {}
             let cidx = 0;
@@ -129,7 +129,10 @@ class Stack {
                 addPoly(vert, poly);
                 const pc = poly.color !== undefined ? { line: poly.color, opacity } : color;
                 const pk = pc.line;
-                const cc = cmap[pk] = cmap[pk] || { idx: cidx++, mat: createLineMaterial(pc, mat) };
+                const cc = cmap[pk] = cmap[pk] || {
+                    idx: cidx++,
+                    mat: createLineMaterial(pc, mat)
+                };
                 if (last !== pk) {
                     if (grp.length) {
                         // rewrite counts for last group
@@ -154,10 +157,19 @@ class Stack {
                 const g = grp[i];
                 geo.addGroup(g[0], g[1], g[2]);
             }
-            geo.setFromPoints(vert);
-            const segs = new THREE.LineSegments(geo, mat);
+            if (fat) {
+                // LineSegmentsGeometry does not support setFromPoints()
+                geo.setPositions(vert.map(v => v.toArray()).flat());
+            } else {
+                geo.setFromPoints(vert);
+            }
+            // LineSegments2 does not support multiple materials
+            const segs = fat ?
+                new THREE.LineSegments2(geo, mat[0]) :
+                new THREE.LineSegments(geo, mat);
             if (rotation) segs.rotation.set(rotation.x, rotation.y, rotation.z);
             if (position) segs.position.set(position.x, position.y, position.z);
+            if (order !== undefined) segs.renderOrder = order;
             meshes.push(segs);
             group.add(segs);
             mats.appendAll(mat);
@@ -244,7 +256,13 @@ let shininess = 15,
 
 function createLineMaterial(color, array) {
     const opacity = color.lopacity || color.opacity || 1;
-    const mat = new THREE.LineBasicMaterial({
+    const mat = color.fat ? new THREE.LineMaterial({
+        // transparent: true,
+        // opacity: opacity,
+        color: color.line,
+        linewidth: color.fat,
+        alphaToCoverage: false
+    }) : new THREE.LineBasicMaterial({
         transparent: true,
         opacity: opacity,
         color: color.line