re-add extruder selector

src/kiri/settings.js

@@ -17,6 +17,7 @@ const { space } = moto;
 const { local } = data;
 const { clone } = Object;
 const { areEqual, ls2o, js2o } = utils;
+const { COLOR } = consts;
 const localFilterKey ='kiri-gcode-filters';
 const localFilters = js2o(local.getItem(localFilterKey)) || [];
 
@@ -304,6 +305,28 @@ function updateExtruderFields(device) {
             device.internal = device.extruders.length - 1;
             updateExtruderFields(device);
         };
+        api.uc.setClass($('tool-nozzle'), 'hide', false);
+        h.bind($('ft-nozzle'), device.extruders.map((d,i) => h.div([
+            h.button({
+                _: `extruder ${i}`,
+                onclick() {
+                    api.selection.for_widgets(w => {
+                        w.anno.extruder = i;
+                        w.setColor(
+                            api.selection.contains(w) ?
+                                COLOR.selected : COLOR.deselected,
+                            undefined,
+                            false);
+                    });
+                }
+            }),
+            h.div({
+                class: "splat",
+                style: `background-color: #${COLOR.deselected[i].toString(16)}`
+            })
+        ])));
+    } else {
+        api.uc.setClass($('tool-nozzle'), 'hide', true);
     }
 }
 

web/kiri/index.css

@@ -1067,6 +1067,18 @@ th, tr, td, label {
 #render-tools > span:not(:hover) .pop {
     display: none;
 }
+/** fdm extruder drop-down */
+#ft-nozzle .splat {
+    width: 10px;
+    height: 10px;
+    margin: 3px;
+    border-radius: 3px;
+    border: 1px solid #555;
+}
+#ft-nozzle > div {
+    flex-direction: row;
+    align-items: center;
+}
 /** selection rotation */
 #ft-rotate {
     gap: 2px;

web/kiri/index.html

@@ -214,6 +214,9 @@
     <!-- toolbar with mesh and rendering options -->
     <div>
         <div id="render-tools">
+            <span id="tool-nozzle"><i class="fas fa-location-pin" title="extruder"></i>
+                <div id="ft-nozzle" class="f-col pop"></div>
+            </span>
             <span id="tool-rotate"><i class="fas fa-rotate-right" title="rotate selection"></i>
                 <div id="ft-rotate" class="grid pop">
                     <div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>