move mode menu to top right

src/kiri/init.js

@@ -2751,6 +2751,10 @@ gapp.register("kiri.init", [], (root, exports) => {
 
         // bind interface action elements
         $('app-name').onclick = api.help.show;
+        $('mode-fdm').onclick = () => api.mode.set('FDM');
+        $('mode-cam').onclick = () => api.mode.set('CAM');
+        $('mode-sla').onclick = () => api.mode.set('SLA');
+        $('mode-laser').onclick = () => api.mode.set('LASER');
         $('set-device').onclick = (ev) => { ev.stopPropagation(); showDevices() };
         $('set-profs').onclick = (ev) => { ev.stopPropagation(); api.conf.show() };
         $('set-tools').onclick = (ev) => { ev.stopPropagation(); showTools() };

src/kiri/main.js

@@ -901,7 +901,7 @@ gapp.register("kiri.main", [], (root, exports) => {
         MODE = MODES[mode];
         DRIVER = kiri.driver[mode];
         // update mode drop-down
-        {
+        if (false) {
             const modename = $('mode-name');
             const options = modename.options;
             const optlist = ["FDM","CAM","SLA","LASER"];

src/kiri/platform.js

@@ -234,7 +234,6 @@ function platformUpdateSelected() {
     const { device } = settings;
     const { extruders } = device;
     const { selection, ui } = api;
-    // const { enable, disable } = ui.options;
 
     const selreal = selection.widgets();
     const selwid = selection.widgets(true);
@@ -243,8 +242,6 @@ function platformUpdateSelected() {
     if (selcount) {
         let enaC = selwid.filter(w => w.meta.disabled !== true).length;
         let disC = selwid.filter(w => w.meta.disabled === true).length;
-        // enable.style.display = disC ? 'flex' : 'none';
-        // disable.style.display = enaC ? 'flex' : 'none';
         if (api.feature.meta && selcount === 1) {
             let sel = selwid[0];
             let name = sel.meta.file || sel.meta.url;
@@ -268,8 +265,6 @@ function platformUpdateSelected() {
             ui.mesh.faces.innerText = '-';
         }
     } else {
-        enable.style.display = 'none';
-        disable.style.display = 'none';
         ui.mesh.name.innerText = '[0]';
         ui.mesh.points.innerText = '-';
         ui.mesh.faces.innerText = '-';

src/kiri/settings.js

@@ -162,7 +162,6 @@ function updateSettings(opt = {}) {
 
     $('mode-device').innerText = device.deviceName;
     $('mode-profile').innerText = `${cproc[mode]}${same ? '' : ' *'}`;
-    $('mode-info').style.display = 'flex';
 }
 
 function updateSettingsFromFields(setrec, uirec = api.ui, changes) {

web/kiri/index.html

@@ -137,6 +137,30 @@
                     </div>
                 </div>
             </span>
+            <span>
+                <i class="fas fa-code-branch"></i>
+                <label>mode</label>
+                <div class="top-menu-drop top-menu-right">
+                    <div class="content">
+                        <div id="mode-fdm">
+                            <label lk="fdm">FDM</label>
+                            <span><i class="fas fa-layer-group"></i></span>
+                        </div>
+                        <div id="mode-cam">
+                            <label lk="cnc">CNC</label>
+                            <span><i class="fas fa-bore-hole"></i></span>
+                        </div>
+                        <div id="mode-laser">
+                            <label lk="laser">Laser</label>
+                            <span><i class="fas fa-bolt"></i></span>
+                        </div>
+                        <div id="mode-sla">
+                            <label lk="sla">SLA</label>
+                            <span><i class="fas fa-cube"></i></span>
+                        </div>
+                    </div>
+                </div>
+            </span>
             <span>
                 <i class="fas fa-cog"></i>
                 <label>setup</label>
@@ -194,16 +218,36 @@
         <div id="panel-left" class="f-col j-left">
             <!-- always up -->
             <div id="mode-info" class="f-col">
-                <div><label>Mode</label><select id="mode-name">
+                <!-- <div><label>Mode</label><select id="mode-name">
                     <option>FDM</option>
                     <option>CNC</option>
                     <option>SLA</option>
                     <option>Laser</option>
-                </select></div>
+                </select></div> -->
                 <div><label>Device</label><span id="mode-device"></span></div>
                 <div><label>Profile</label><span id="mode-profile"></span></div>
             </div>
             <div class="line-sep2"></div>
+            <!-- <div class="set2-group f-col">
+                <div class="set-header"><a>mesh tools</a></div>
+                <div class="render-tools">
+                    <span id="tool-rotate"><i class="fas fa-sync-alt" title="rotate"></i></span></span>
+                    <span id="tool-scale"><i class="fas fa-expand" title="scale"></i></span></span>
+                    <span id="tool-mesh"><i class="fas fa-dice-d20" title="mesh tool"></i></span></span>
+                    <span id="render-solid" class="j-center" title="view solid"><i class="fas fa-square"></i></span>
+                    <span id="render-wire" class="j-center" title="view wireframe"><i class="fas fa-border-all"></i></span>
+                    <span id="render-ghost" class="a-center" title="view transparent"><i class="fas fa-border-none"></i></span>
+                </div>
+                <div class="set-header"><a>objects</a></div>
+                <div id="ws-widgets" class="f-col"></div>
+            </div>
+            <div class="set2-group f-col mode-fdm">
+                <div class="set-header"><a>ranges</a></div>
+                <div id="fdm-ranges" class="f-col"></div>
+            </div>
+            <div class="set2-group f-col">
+                <div id="workspace-tool"></div>
+            </div> -->
             <div class="f-col grow settings">
                 <!-- FDM -->
                 <div id="fdm-layers" class="set2-group mode-fdm"></div>