add user toggle of outline

src/kiri/init.js

@@ -2742,6 +2742,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         $('rot_z_lt').onclick = () => { api.selection.rotate(0,0, d * $('rot_z').value) };
         $('rot_z_gt').onclick = () => { api.selection.rotate(0,0,-d * $('rot_z').value) };
         // rendering options
+        $('render-outline').onclick = () => { api.view.outline({ toggle: true }) };
         $('render-ghost').onclick = () => { api.view.wireframe(false, 0, api.view.is_arrange() ? 0.4 : 0.25); };
         $('render-wire').onclick = () => { api.view.wireframe(true, 0, api.space.is_dark() ? 0.25 : 0.5); };
         $('render-solid').onclick = () => { api.view.wireframe(false, 0, 1); };

src/kiri/main.js

@@ -206,6 +206,7 @@ gapp.register("kiri.main", [], (root, exports) => {
             update_speeds: updateSpeeds,
             hide_slices: hideSlices,
             snapshot: null,
+            outline: setOutline,
             unit_scale: unitScale,
             wireframe: setWireframe,
         },
@@ -387,6 +388,11 @@ gapp.register("kiri.main", [], (root, exports) => {
         SPACE.update();
     }
 
+    function setOutline(bool) {
+        api.widgets.each(w => w.setOutline(bool));
+        SPACE.update();
+    }
+
     function updateSliderMax(set) {
         let max = STACKS.getRange().tallest - 1;
         api.var.layer_max = UI.sliderMax.innerText = max;
@@ -886,13 +892,16 @@ gapp.register("kiri.main", [], (root, exports) => {
                 updateSpeeds();
                 updateSliderMax();
                 setWidgetVisibility(true);
+                !isCAM && api.view.outline(false);
                 break;
             case VIEWS.PREVIEW:
                 $('act-preview').classList.add('selected');
                 setWidgetVisibility(true);
+                !isCAM && api.view.outline(false);
                 break;
             case VIEWS.ANIMATE:
                 $('act-animate').classList.add('selected');
+                !isCAM && api.view.outline(false);
                 break;
             default:
                 console.log("invalid view mode: "+mode);

src/kiri/widget.js

@@ -834,16 +834,19 @@ class Widget {
             return;
         }
         let mesh = this.mesh;
+        if (set && set.toggle) {
+            set = this.outline ? false : true;
+        }
         if (this.outline) {
             mesh.remove(this.outline);
-            this.wioutlinere = null;
+            this.outline = null;
 
         }
         if (set) {
             let dark = api.space.is_dark();
             let angle = api.conf.get().controller.outline || 20;
             let edges = new THREE.EdgesGeometry(mesh.geometry, angle);
-            let material = new THREE.LineBasicMaterial({ color: 0x000000 });
+            let material = new THREE.LineBasicMaterial({ color: 0 });
             this.outline = new THREE.LineSegments(edges, material);
             mesh.add(this.outline);
         }

web/kiri/index.html

@@ -308,6 +308,10 @@
                 <i class="fas fa-border-none"></i>
                 <div class="pop">render objects transparent</div>
             </span>
+            <span id="render-outline" class="a-center">
+                <i class="fa-regular fa-square"></i>
+                <div class="pop">outline objects</div>
+            </span>
         </div>
     </div>