add widget render control ui. fix up cam prepare with new render engine

src/kiri/init.js

@@ -2057,6 +2057,11 @@
         $('rot_y_gt').onclick = () => { API.selection.rotate(0, d,0) };
         $('rot_z_lt').onclick = () => { API.selection.rotate(0,0, d) };
         $('rot_z_gt').onclick = () => { API.selection.rotate(0,0,-d) };
+        // rendering options
+        $('render-hide').onclick = () => { API.view.wireframe(false, 0, 0); };
+        $('render-ghost').onclick = () => { API.view.wireframe(false, 0, 0.5); };
+        $('render-wire').onclick = () => { API.view.wireframe(true, 0, 0.5); };
+        $('render-solid').onclick = () => { API.view.wireframe(false, 0, 1); };
 
         UI.modal.onclick = API.modal.hide;
         UI.modalBox.onclick = (ev) => { ev.stopPropagation() };

src/kiri/main.js

@@ -289,7 +289,7 @@
             set: setViewMode,
             update_slider: updateSlider,
             update_fields: updateFields,
-            wireframe: toggleWireframe,
+            wireframe: setWireframe,
             snapshot: null
         },
         widgets: {
@@ -564,22 +564,18 @@
         selectedMeshes.slice().forEach(function (mesh) { f(mesh) });
     }
 
+    function setWireframe(bool, color, opacity) {
+        forAllWidgets(function(w) { w.setWireframe(bool, color, opacity) });
+        SPACE.update();
+    }
+
     function toggleWireframe(color, opacity) {
         forAllWidgets(function(w) { w.toggleWireframe(color, opacity) });
         SPACE.update();
     }
 
     function updateSliderMax(set) {
-        let max = 0;
+        let max = STACKS.getRange().tallest - 1;
-        if (viewMode === VIEWS.PREVIEW && currentPrint) {
-            max = currentPrint.getLayerCount();
-        } else {
-            forAllWidgets(function(widget) {
-                if (!widget.slices) return;
-                max = Math.max(max, widget.slices.length);
-            });
-        }
-        max = Math.max(0, max - 1);
         API.var.layer_max = UI.sliderMax.innerText = max;
         if (set || max < API.var.layer_hi) {
             API.var.layer_hi = API.var.layer_max;
@@ -795,8 +791,6 @@
 
         let firstMesh = true,
             countdown = WIDGETS.length,
-            preserveMax = API.var.layer_max,
-            preserveLayer = API.var.layer_hi,
             totalProgress,
             track = {},
             mode = settings.mode,
@@ -829,14 +823,11 @@
                     if (lastMsg) segtimes[`${segNumber++}_${lastMsg}`] = mark - startTime;
                     segtimes.total = UTIL.time() - now;
                     API.event.emit('slice', getMode());
-                    updateSliderMax(true);
-                    if (preserveMax != API.var.layer_max) {
-                        preserveLayer = API.var.layer_max;
-                    }
                     firstMesh = false;
                 }
                 // on done
                 segtimes[`${segNumber}_draw`] = widget.render(stack);
+                updateSliderMax(true);
                 // clear wireframe
                 widget.setWireframe(false, color.wireframe, color.wireframe_opacity);
                 widget.setOpacity(camOrLaser ? color.cam_sliced_opacity : color.sliced_opacity);
@@ -844,7 +835,6 @@
                 // on the last exit, update ui and call the callback
                 if (--countdown === 0 || error || errored) {
                     API.show.progress(0);
-                    showSlices(preserveLayer);
                     SPACE.scene.active();
                     API.event.emit('slice.end', getMode());
                     // print stats

src/kiri/widget.js

@@ -648,6 +648,8 @@
         }
         if (set) {
             widget.wire = base.render.wireframe(mesh, this.getPoints(), color);
+        }
+        if (opacity !== undefined) {
             widget.setOpacity(opacity);
         }
     };

src/mode/cam/client.js

@@ -24,78 +24,6 @@
             api.ui.camContour.marker.style.display =
                 proc.camContourXOn || proc.camContourYOn ? 'flex' : 'none';
         });
-    }
+    };
-
-    CAM.sliceRender = function(widget) {
-        return KIRI.Layer.renderSetup().renderSlices(widget.slices);
-
-        let slices = widget.slices;
-        if (!slices) return;
-
-        slices.forEach(function(slice) {
-            let tops = slice.tops,
-                layers = slice.layers,
-                outline = layers.outline,
-                open = (slice.camMode === PRO.CONTOUR_X || slice.camMode === PRO.CONTOUR_Y);
-
-            layers.outline.clear(); // slice raw edges
-            layers.trace.clear();   // roughing
-            layers.solid.clear();   // outline
-            layers.bridge.clear();  // outline x
-            layers.flat.clear();    // outline y
-            layers.fill.clear();    // facing
-
-            tops.forEach(function(top) {
-                outline.poly(top.poly, 0x999900, true, open);
-                // if (top.inner) outline.poly(top.inner, 0xdddddd, true);
-                if (top.inner) outline.poly(top.inner, 0xff0000, true);
-            });
-
-            // various outlining
-            let layer;
-            slice.tops.forEach(function(top) {
-                switch (slice.camMode) {
-                    case PRO.OUTLINE:
-                        layer = layers.solid;
-                        break;
-                    case PRO.CONTOUR_X:
-                        layer = layers.bridge;
-                        break;
-                    case PRO.CONTOUR_Y:
-                        layer = layers.flat;
-                        break;
-                    default: // roughing
-                        layer = layers.trace;
-                        break;
-                }
-                if (top.traces) {
-                    layer.poly(top.traces, 0x010101, true, null);
-                }
-            });
-
-            // facing (previously separate. now part of roughing)
-            layer = slice.layers.fill;
-            slice.tops.forEach(function(top) {
-                if (top.fill_lines) {
-                    layer.lines(top.fill_lines, fill_color);
-                }
-            });
-
-            outline.render();
-            layers.trace.render();
-            layers.solid.render();
-            layers.bridge.render();
-            layers.flat.render();
-            layers.fill.render();
-        });
-    }
-
-    CAM.printRender = function(print) {
-        return KIRI.driver.FDM.printRender(print, {
-            aslines: true,
-            color: 0x010101,
-            move_color: 0xcc3333
-        });
-    }
 
 })();

src/mode/cam/driver.js

@@ -7,10 +7,8 @@
     const KIRI = self.kiri,
         CAM = KIRI.driver.CAM = {
             // init,        // src/mode/cam/client.js
-            // sliceRender, // src/mode/cam/client.js
-            // printRender  // src/mode/cam/client.js
             // slice,       // src/mode/cam/slice.js
-            // printSetup,  // src/mode/cam/prepare.js
+            // prepare,     // src/mode/cam/prepare.js
             // printExport, // src/mode/cam/export.js
         },
         CPRO = CAM.process = {

src/mode/cam/prepare.js

@@ -23,7 +23,7 @@
     CAM.prepare = function(widgets, settings, update) {
         const count = widgets.length;
         const weight = 1/count;
-        const print = KIRI.newPrint(settings, widgets);
+        const print = self.worker.print = KIRI.newPrint(settings, widgets);
         print.output = [];
 
         let point;
@@ -33,11 +33,11 @@
             });
         });
 
-        print.output = KIRI.driver.FDM.prepareRender(print.output, progress => {
+        print.render = KIRI.driver.FDM.prepareRender(print.output, progress => {
             update(0.5 + progress * 0.5);
-        }, { thin: true });
+        }, { thin: true, print: 0, move: 0x003366 });
 
-        return print.output;
+        return print.render;
     };
 
     function prepEach(widget, settings, print, firstPoint, update) {
@@ -276,7 +276,6 @@
                 } else {
                     rate = plungeRate;
                 }
-                // console.log({deltaZ: deltaZ, deltaXY: deltaXY, threshold:threshold, modifier:modifier, rate:rate, plungeRate:plungeRate});
             }
 
             // todo synthesize move speed from feed / plunge accordingly
@@ -320,26 +319,23 @@
                 case PRO.LEVEL:
                     setTool(process.camRoughTool, process.camRoughSpeed, 0);
                     spindle = Math.min(spindleMax, process.camRoughSpindle);
-                    slice.tops.forEach(function(top) {
+                    const level = [];
-                        if (!top.traces) return;
+                    slice.camLines.forEach(function (poly) {
-                        let polys = [];
+                        level.push(poly);
-                        top.traces.forEach(function (poly) {
+                        if (poly.inner) {
-                            polys.push(poly);
+                            poly.inner.forEach(function(inner) {
-                            if (poly.inner) {
+                                level.push(inner);
-                                poly.inner.forEach(function(inner) {
+                            })
-                                    polys.push(inner);
+                        }
-                                })
-                            }
-                        });
-                        // set winding specified in output
-                        POLY.setWinding(polys, process.camConventional, false);
-                        printPoint = poly2polyEmit(polys, printPoint, function(poly, index, count) {
-                            poly.forEachPoint(function(point, pidx, points, offset) {
-                                camOut(point.clone(), offset !== 0);
-                            }, true, index);
-                        });
-                        newLayer();
                     });
+                    // set winding specified in output
+                    POLY.setWinding(level, process.camConventional, false);
+                    printPoint = poly2polyEmit(level, printPoint, function(poly, index, count) {
+                        poly.forEachPoint(function(point, pidx, points, offset) {
+                            camOut(point.clone(), offset !== 0);
+                        }, true, index);
+                    });
+                    newLayer();
                     break;
                 case PRO.ROUGH:
                 case PRO.OUTLINE:
@@ -356,33 +352,28 @@
                             dir = !dir;
                         }
                     }
-                    // todo find closest next trace/trace-point
+                    let polys = [], t = [], c = [];
-                    slice.tops.forEach(function(top) {
+                    POLY.flatten(slice.camLines).forEach(function (poly) {
-                        if (!top.poly) return;
+                        let child = poly.parent;
-                        if (!top.traces) return;
+                        if (depthFirst) poly = poly.clone();
-                        let polys = [], t = [], c = [];
+                        if (child) c.push(poly); else t.push(poly);
-                        POLY.flatten(top.traces, top.inner || []).forEach(function (poly) {
+                        poly.layer = depthData.layer;
-                            let child = poly.parent;
+                        polys.push(poly);
-                            if (depthFirst) poly = poly.clone();
-                            if (child) c.push(poly); else t.push(poly);
-                            poly.layer = depthData.layer;
-                            polys.push(poly);
-                        });
-                        // set cut direction on outer polys
-                        POLY.setWinding(t, dir);
-                        // set cut direction on inner polys
-                        POLY.setWinding(c, !dir);
-                        if (depthFirst) {
-                            (slice.camMode === PRO.ROUGH ? depthData.rough : depthData.outline).append(polys);
-                        } else {
-                            printPoint = poly2polyEmit(polys, printPoint, function(poly, index, count) {
-                                poly.forEachPoint(function(point, pidx, points, offset) {
-                                    camOut(point.clone(), offset !== 0);
-                                }, poly.isClosed(), index);
-                            });
-                            newLayer();
-                        }
                     });
+                    // set cut direction on outer polys
+                    POLY.setWinding(t, dir);
+                    // set cut direction on inner polys
+                    POLY.setWinding(c, !dir);
+                    if (depthFirst) {
+                        (slice.camMode === PRO.ROUGH ? depthData.rough : depthData.outline).append(polys);
+                    } else {
+                        printPoint = poly2polyEmit(polys, printPoint, function(poly, index, count) {
+                            poly.forEachPoint(function(point, pidx, points, offset) {
+                                camOut(point.clone(), offset !== 0);
+                            }, poly.isClosed(), index);
+                        });
+                        newLayer();
+                    }
                     break;
                 case PRO.CONTOUR_X:
                 case PRO.CONTOUR_Y:
@@ -394,10 +385,9 @@
                     spindle = Math.min(spindleMax, process.camContourSpindle);
                     depthData.outlineDiam = toolDiam;
                     // todo find closest next trace/trace-point
-                    slice.tops.forEach(function(top) {
+                    {
-                        if (!top.traces) return;
                         let polys = [], poly, emit;
-                        top.traces.forEach(function (poly) {
+                        slice.camLines.forEach(function (poly) {
                             if (depthFirst) poly = poly.clone(true);
                             polys.push({first:poly.first(), last:poly.last(), poly:poly});
                         });
@@ -414,15 +404,11 @@
                             });
                             newLayer();
                         }
-                    });
+                    }
                     break;
                 case PRO.DRILL:
                     setTool(process.camDrillTool, process.camDrillDownSpeed, process.camDrillDownSpeed);
-                    // drilling is always depth-first
+                    depthData.drill.appendAll(slice.camLines);
-                    slice.tops.forEach(function(top) {
-                        if (!top.traces) return;
-                        depthData.drill.appendAll(top.traces);
-                    });
                     break;
             }
             update(sliceIndex / slices.length);

src/mode/cam/slice.js

@@ -59,7 +59,6 @@
             camRoughDown = proc.camRoughDown,
             minStepDown = Math.min(1, roughDown, outlineDown),
             maxToolDiam = 0,
-            sliceIndex = 0,
             thruHoles;
 
         if (settings.stock.x + 0.00001 < bounds.max.x - bounds.min.x) {
@@ -149,11 +148,11 @@
             for (let z = zMax + ztOff - zstep; z >= zMax; z -= zstep) {
                 let slice = shadowTop.slice.clone(false);
                 slice.z = z;
-                slice.index = sliceIndex++;
                 slice.camMode = PRO.LEVEL;
+                slice.camLines = POLY.setZ(facing.clone(true), slice.z);
                 slice.output()
                     .setLayer("facing", {face: 0, line: 0})
-                    .addPolys(POLY.setZ(facing.clone(true), slice.z));
+                    .addPolys(slice.camLines);
                 sliceAll.push(slice);
             }
         }
@@ -223,10 +222,10 @@
                     }
                 });
 
+                slice.camLines = offset;
                 slice.output()
                     .setLayer("roughing", {face: 0, line: 0})
                     .addPolys(offset);
-                slice.index = sliceIndex++;
                 updateOp(index, slices.length);
             });
 
@@ -302,7 +301,7 @@
                     offset = addCutoutTabs(offset, slice.z, outlineToolDiam, tabWidth, proc.camTabsCount, proc.camTabsAngle);
                 }
 
-                slice.index = sliceIndex++;
+                slice.camLines = offset;
                 slice.output()
                     .setLayer("outline", {face: 0, line: 0})
                     .addPolys(offset);
@@ -343,6 +342,8 @@
             sliceDrill(drillTool, tslices, sliceAll);
         }
 
+        sliceAll.forEach((slice, index) => slice.index = index);
+
         // used in printSetup()
         widget.terrain = terrain;
         widget.maxToolDiam = maxToolDiam;
@@ -394,6 +395,7 @@
                 point.y = center.y;
             });
             slice.camMode = PRO.DRILL;
+            slice.camLines = [ drill ];
             slice.output()
                 .setLayer("drill", {face: 0, line: 0})
                 .addPolys(drill);
@@ -433,6 +435,7 @@
                     .append(point.clone().setZ(bounds.max.z - stock.z - mz)));
             });
             slice.camMode = PRO.DRILL;
+            slice.camLines = polys;
             slice.output()
                 .setLayer("register", {face: 0, line: 0})
                 .addPolys(polys);

src/mode/cam/topo.js

@@ -19,7 +19,6 @@
             let opt = options || {},
                 ondone = opt.ondone || noop,
                 onupdate = opt.onupdate || noop,
-                mesh = widget.mesh,
                 proc = settings.process,
                 resolution = proc.camTolerance,
                 tool = new CAM.Tool(settings, proc.camContourTool),
@@ -179,9 +178,9 @@
                     for (x = minX; x <= maxX; x += toolStep) {
                         gridx = Math.round(((x - minX) / boundsX) * stepsx);
                         ly = gridy = 0;
-                        slice = newSlice(gridx, mesh.newGroup ? mesh.newGroup() : null);
+                        slice = newSlice(gridx);
                         slice.camMode = CPRO.CONTOUR_X;
-                        slice.lines = newlines = [];
+                        // slice.lines = newlines = [];
                         newtop = slice.addTop(newPolygon().setOpen()).poly;
                         newtrace = newPolygon().setOpen();
                         sliceout = [];
@@ -200,10 +199,6 @@
                                 continue;
                             }
                             if (ly) {
-                                if (mesh) newlines.push(newLine(
-                                    newPoint(x,ly,ltv),
-                                    newPoint(x,y,tv)
-                                ));
                                 let ang = Math.abs((Math.atan2(ltv - tv, resolution) * R2A) % 90);
                                 // over max angle, turn into square edge (up or down)
                                 if (ang > maxangle) {
@@ -224,6 +219,7 @@
                         end_poly();
                         if (sliceout.length > 0) {
                             newslices.push(slice);
+                            slice.camLines = sliceout;
                             slice.output()
                                 .setLayer("contour x", {face: 0, line: 0})
                                 .addPolys(sliceout);
@@ -239,9 +235,9 @@
                     for (y = minY; y <= maxY; y += toolStep) {
                         gridy = Math.round(((y - minY) / boundsY) * stepsy);
                         lx = gridx = 0;
-                        slice = newSlice(gridy, mesh.newGroup ? mesh.newGroup() : null);
+                        slice = newSlice(gridy);
                         slice.camMode = CPRO.CONTOUR_Y;
-                        slice.lines = newlines = [];
+                        // slice.lines = newlines = [];
                         newtop = slice.addTop(newPolygon().setOpen()).poly;
                         newtrace = newPolygon().setOpen();
                         sliceout = [];
@@ -260,10 +256,6 @@
                                 continue;
                             }
                             if (lx) {
-                                if (mesh) newlines.push(newLine(
-                                    newPoint(lx,y,ltv),
-                                    newPoint(x,y,tv)
-                                ));
                                 let ang = Math.abs((Math.atan2(ltv - tv, resolution) * R2A) % 90);
                                 // over max angle, turn into square edge (up or down)
                                 if (ang > maxangle) {
@@ -284,6 +276,7 @@
                         end_poly();
                         if (sliceout.length > 0) {
                             newslices.push(slice);
+                            slice.camLines = sliceout;
                             slice.output()
                                 .setLayer("contour y", {face: 0, line: 0})
                                 .addPolys(sliceout);

src/mode/fdm/client.js

@@ -22,112 +22,4 @@
         });
     }
 
-    // FDM.printRender = function(print, options) {
-    //     let debug = KIRI.api.const.LOCAL;
-    //     let scope = print, emits, last,
-    //         moves, moving = true,
-    //         opt = options || {},
-    //         tools = opt.tools || [],
-    //         showmoves = !opt.nomoves,
-    //         maxspeed = 0;
-    //     // find max speed
-    //     scope.output.forEach(function(layerout) {
-    //         layerout.forEach(function(out, index) {
-    //             if (out.emit && out.speed) {
-    //                 maxspeed = Math.max(maxspeed, out.speed);
-    //             }
-    //         });
-    //     });
-    //     if (maxspeed === 0) {
-    //         maxspeed = 4000;
-    //     }
-    //     maxspeed *= 1.001;
-    //     // render layered output
-    //     scope.lines = 0;
-    //     scope.output.forEach(function(layerout) {
-    //         let move = [], print = [], cprint;
-    //         layerout.forEach(function(out, index) {
-    //             let point = toPoint(out.point);
-    //             if (last) {
-    //                 // drop short segments
-    //                 // if (point.emit === last.emit && UTIL.distSq(last, point) < 0.001 && point.z === last.z) {
-    //                 //     return;
-    //                 // }
-    //                 if (out.emit > 0) {
-    //                     if (moving || !cprint) {
-    //                         cprint = base.newPolygon().setOpen(true).append(last);
-    //                         print.push({
-    //                             poly: cprint,
-    //                             speed: out.speed || maxspeed || 4000,
-    //                             tool:tools[out.tool]
-    //                         });
-    //                     }
-    //                     try {
-    //                         cprint.append(point);
-    //                     } catch (e) {
-    //                         console.log(e, {cprint});
-    //                     }
-    //                     moving = false;
-    //                 } else {
-    //                     cprint = null;
-    //                     move.push(last);
-    //                     move.push(point);
-    //                     moving = true;
-    //                 }
-    //                 // move direction arrow heads
-    //                 if (debug && last.z == point.z) {
-    //                     let rs = BASE.newSlope(
-    //                         {x: point.x, y: point.y},
-    //                         {x: last.x, y: last.y}
-    //                     );
-    //                     let ao1 = BASE.newSlopeFromAngle(rs.angle + 25);
-    //                     let ao2 = BASE.newSlopeFromAngle(rs.angle - 25);
-    //                     let sp = BASE.newPoint(point.x, point.y, point.z);
-    //                     move.push(sp);
-    //                     move.push(sp.projectOnSlope(ao1, BASE.config.debug_arrow));
-    //                     move.push(sp);
-    //                     move.push(sp.projectOnSlope(ao2, BASE.config.debug_arrow));
-    //                 }
-    //             }
-    //             last = point;
-    //         });
-    //         emits = KIRI.newLayer(scope.group);
-    //         if (showmoves) {
-    //             moves = KIRI.newLayer(scope.group);
-    //             moves.lines(move, opt.move_color || 0x888888);
-    //         }
-    //         emits.setTransparent(false);
-    //         // emit printing shapes
-    //         print.forEach(segment => {
-    //             let {poly, speed, tool} = segment;
-    //             let off = tool ? (tool.extNozzle || 0.4) / 2 : 0.2;
-    //             let sint = Math.min(maxspeed, parseInt(speed));
-    //             let rgb = scope.hsv2rgb({h:sint/maxspeed, s:1, v:1});
-    //             let color = ((rgb.r * 0xff) << 16) |
-    //                 ((rgb.g * 0xff) <<  8) |
-    //                 ((rgb.b * 0xff) <<  0);
-    //             if (opt.flat) {
-    //                 poly = poly.clone().setZ(0);
-    //             }
-    //             if (opt.aslines) {
-    //                 emits.poly(poly, opt.color || color, false, true);
-    //             } else {
-    //                 // first point may be from the layer below, so use second point
-    //                 emits.noodle_open(poly, off - 0.02, color, 0x0, poly.getZ(1));
-    //             }
-    //         });
-    //         emits.renderAll();
-    //         if (showmoves) {
-    //             moves.render();
-    //             scope.movesView.push(moves);
-    //         }
-    //         scope.printView.push(emits);
-    //         scope.lines += print.length;
-    //     });
-    // }
-    //
-    // function toPoint(obj) {
-    //     return base.newPoint(obj.x, obj.y, obj.z);
-    // }
-
 })();

src/mode/fdm/driver.js

@@ -11,10 +11,8 @@
         POLY = BASE.polygons,
         FDM = KIRI.driver.FDM = {
             // init,           // src/mode/fdm/client.js
-            // sliceRender,    // src/mode/fdm/client.js
-            // printRender     // src/mode/fdm/client.js
             // slice,          // src/mode/fdm/slice.js
-            // printSetup,     // src/mode/fdm/prepare.js
+            // prepare,        // src/mode/fdm/prepare.js
             // printExport,    // src/mode/fdm/export.js
             fixExtruders
         };

src/mode/fdm/prepare.js

@@ -41,7 +41,7 @@
             layerout = [],
             slices = [],
             sliceEntry,
-            print = KIRI.newPrint(settings, widgets),
+            print = self.worker.print = KIRI.newPrint(settings, widgets),
             isThin = settings.controller.thinRender;
 
         // TODO pick a widget with a slice on the first layer and use that nozzle
@@ -373,33 +373,45 @@
             lastOut = undefined;
         }
 
-        print.output = FDM.prepareRender(output, progress => {
+        print.output = output;
+        print.render = FDM.prepareRender(output, progress => {
             update(0.5 + progress * 0.5);
         }, { tools: device.extruders, thin: isThin });
 
-        return print.output;
+        return print.render;
     };
 
     FDM.prepareRender = function(levels, update, options) {
         const opts = options || {};
-        const tools = opts.tools;
+        const tools = opts.tools || {};
         const thin = opts.thin || false;
+        const moveColor = opts.move >= 0 ? opts.move : 0xaaaaaa;
+        const printColor = opts.print >= 0 ? opts.print : 0x777700;
         const layers = [];
+
+        let lastOut = null;
+        let current = null;
+
         levels.forEach((level, index) => {
             const prints = {};
             const moves = [];
+
             const pushPrint = (toolid, poly) => {
                 toolid = toolid || 0;
                 const array = prints[toolid] = prints[toolid] || [];
-                const tool = tools[toolid];
+                const tool = tools[toolid] || {};
                 array.width = (tool.extNozzle || 1) / 2;
                 array.push(poly);
             };
-            let lastOut = null;
+
-            let current = null;
             let height = level.height / 2;
             let width = 1;
+
             level.forEach(out => {
+                if (!out.point) {
+                    // in cam mode, these are drilling or dwell ops
+                    return;
+                }
                 if (lastOut) {
                     if (out.emit) {
                         if (!lastOut.emit) {
@@ -427,14 +439,21 @@
                 }
                 lastOut = out;
             });
+            if (lastOut.emit) {
+                pushPrint(lastOut.tool, current)
+            } else {
+                moves.push(current);
+            }
+
             const output = new KIRI.Render();
             layers.push(output);
-            output.setLayer('move', 0xaaaaaa).addPolys(moves);
+            output.setLayer('move', moveColor).addPolys(moves);
             Object.values(prints).forEach(array => {
                 output
-                    .setLayer('print', 0x888800)
+                    .setLayer('print', printColor)
                     .addPolys(array, thin ? null : { offset: array.width, height })
-            })
+            });
+
             update(index / output.length);
         });
 

web/kiri/index.html

@@ -137,6 +137,27 @@
                 <label>export</label>
             </div>
             <div id="lt-sep"></div>
+            <div id="lt-render" class="lt-menu lt-enabled">
+                <i class="fas fa-border-style"></i>
+                <label>render</label>
+                <div id="pop-render" class="pop-lcol f-row">
+                    <div id="render-solid" class="grow a-center">
+                        <i class="fas fa-th-large"></i>
+                        <label>solid</label>
+                    </div>
+                    <div id="render-wire" class="grow a-center">
+                        <i class="fas fa-border-all"></i>
+                        <label>wire</label>
+                    </div>
+                    <div id="render-ghost" class="grow a-center">
+                        <i class="fas fa-border-none"></i>
+                        <label>ghost</label>
+                    </div>
+                    <div id="render-hide" class="grow a-center">
+                        <label>hide</label>
+                    </div>
+                </div>
+            </div>
             <div id="lt-rotate" class="lt-menu">
                 <i class="fas fa-sync-alt"></i>
                 <label>rotate</label>