improved context menu for workspace object options

src/kiri/init.js

@@ -2682,10 +2682,10 @@ gapp.register("kiri.init", [], (root, exports) => {
         $('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); };
         // mesh buttons
-        $('mesh-swap').onclick = () => { api.widgets.replace() };
+        // $('mesh-swap').onclick = () => { api.widgets.replace() };
-        $('mesh-enable').onclick = () => { api.selection.enable() };
+        // $('mesh-enable').onclick = () => { api.selection.enable() };
-        $('mesh-disable').onclick = () => { api.selection.disable() };
+        // $('mesh-disable').onclick = () => { api.selection.disable() };
-        $('mesh-rename').onclick = () => { api.widgets.rename() };
+        // $('mesh-rename').onclick = () => { api.widgets.rename() };
         $('mesh-export-stl').onclick = () => { objectsExport('stl') };
         $('mesh-export-obj').onclick = () => { objectsExport('obj') };
         $('context-duplicate').onclick = duplicateSelection;

src/kiri/platform.js

@@ -235,44 +235,6 @@ function platformUpdateSelected() {
     const { extruders } = device;
     const { selection, ui } = api;
 
-    const selwid = selection.widgets(true);
-    const selreal = selection.widgets(false).length;
-    const selcount = selwid.length;
-
-    $('mesh-enable').disabled = selreal != 1;
-    $('mesh-disable').disabled = selreal != 1;
-    $('mesh-rename').disabled = selcount != 1;
-    $('mesh-swap').disabled = selcount != 1;
-
-    if (selcount) {
-        let enaC = selwid.filter(w => w.meta.disabled !== true).length;
-        let disC = selwid.filter(w => w.meta.disabled === true).length;
-        if (api.feature.meta && selcount) {
-            let name = selwid[0].meta.file || selwid[0].meta.url;
-            if (name) {
-                name = name
-                    .toLowerCase()
-                    .replace(/_/g, ' ')
-                    .replace(/.png/, '')
-                    .replace(/.stl/, '');
-                let sp = name.indexOf('/');
-                if (sp >= 0) {
-                    name = name.substring(sp + 1);
-                }
-            }
-            let vert = selwid.map(w => w.meta.vertices).reduce((a,b) => a+b);
-            ui.mesh.points.innerText = util.comma(vert);
-            ui.mesh.faces.innerText = util.comma(vert / 3);
-        } else {
-            ui.mesh.points.innerText = '-';
-            ui.mesh.faces.innerText = '-';
-        }
-    } else {
-        ui.mesh.points.innerText = '-';
-        ui.mesh.faces.innerText = '-';
-    }
-    ui.mesh.name.innerText = selection.widgets(false).length;
-
     if (extruders) {
         for (let i = 0; i < extruders.length; i++) {
             let b = $(`sel-ext-${i}`);
@@ -568,29 +530,77 @@ function platformDeletePost() {
 function platformChanged() {
     h.bind($('ws-widgets'), api.widgets.all().map(w => {
         let color;
+        let file = w.meta.file || 'no name';
+        let fsho = file.length > 25 ? file.slice(0,20) + '..' + file.slice(-2) : file;
         return [
-            h.div([
+            h.div({
-
-                h.button({
-                    _: w.meta.file || 'no name',
-                    id: `ws-${w.id}`,
-                    class: "grow",
                 onmouseenter() {
                     color = w.getColor();
-                        w.setColor(0x0088ff);
+                    w.setColor(0x0088ff, null, false);
                 },
                 onmouseleave() {
-                        w.setColor(color);
+                    w.setColor(color, null, false);
                 },
+            },[
+                h.div({ class: "widpop" }, [
+                    h.div({ class: "widopt" }, [
+                        h.button(
+                            {
+                                title: "rename",
+                                onclick() { api.widgets.rename(w)
+                            }},
+                            [ h.i({ class:"fas fa-pen-to-square" }) ]
+                        ),
+                        h.button(
+                            {
+                                title: "replace",
+                                onclick() { api.widgets.replace(null,w) }
+                            },
+                            [ h.i({ class:"fas fa-rotate" }) ]
+                        ),
+                        h.button(
+                            {
+                                id: `w-en-${w.id}`,
+                                title: "toggle disabled",
+                                class: w.meta.disabled ? "disabled" : "",
+                                onclick() {
+                                    let dis = w.meta.disabled = !w.meta.disabled;
+                                    let sel = api.selection.contains(w);
+                                    api.uc.setClass($(`w-en-${w.id}`), "disabled", dis);
+                                    w.setColor(sel ? COLOR.selected : COLOR.deselected, null, false);
+                                }
+                            },
+                            [ h.i({ class:"fas fa-ban" }) ]
+                        ),
+                        h.button(
+                            {
+                                title: "delete",
+                                onclick() { platformDelete(w) }
+                            },
+                            [ h.i({ class:"fas fa-trash" }), ]
+                        )
+                    ]),
+                    h.button([
+                        h.i({ class: "fa-solid fa-caret-left" })
+                    ])
+                ]),
+                h.button({
+                    _: fsho,
+                    id: `ws-${w.id}`,
+                    class: "grow name",
+                    title: file,
+                    // onmouseenter() {
+                    //     color = w.getColor();
+                    //     w.setColor(0x0088ff, null, false);
+                    // },
+                    // onmouseleave() {
+                    //     w.setColor(color, null, false);
+                    // },
                     onclick() {
                         platformSelect(w, true, false);
                         color = w.getColor();
                     }
-                }),
+                })
-                h.button(
-                    { onclick() { platformDelete(w) } },
-                    [ h.i({ class:"fas fa-trash" }), ]
-                )
             ])
         ]
     }));

src/kiri/widgets.js

@@ -29,8 +29,9 @@ function annotate(id) {
     return (w.anno = w.anno || {});
 }
 
-function rename() {
+/** TODO really should be on widget, not widgets */
-    let widgets = api.selection.widgets(true);
+function rename(sel) {
+    let widgets = sel ? [ sel ] : api.selection.widgets(true);
     if (widgets.length !== 1) {
         return;
     }
@@ -43,8 +44,8 @@ function rename() {
     }
 }
 
-function replace(vertices) {
+function replace(vertices, sel) {
-    let widgets = api.selection.widgets(true);
+    let widgets = sel ? [sel] : api.selection.widgets(true);
     if (!widgets.length) {
         return;
     }

web/kiri/index.css

@@ -912,16 +912,28 @@ th, tr, td, label {
 #ws-widgets button {
     text-transform: none;
     text-align: left;
+    white-space: nowrap;
     align-items: center;
+    overflow: hidden;
+    max-width: 150px;
 }
 #ws-widgets button.selected {
     background-color: var(--blue-3);
     color: #000;
 }
-/* .slim-hide {
+.widpop:not(:hover) .widopt {
-    width: 0;
+    display: none;
-    overflow: hidden;
+}
-} */
+.widopt {
+    background-color: white;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+.widopt button.disabled {
+    background-color: var(--blue-3);
+}
 #top-sep {
     display: none;
 }
@@ -1126,8 +1138,7 @@ th, tr, td, label {
 #ft-mesh-btn {
     display: grid;
     grid-auto-flow: row;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 1fr;
-    grid-template-columns: 1fr 1fr;
 }
 #ft-mesh-btn button {
     justify-content: center;

web/kiri/index.html

@@ -214,7 +214,7 @@
     <!-- toolbar with mesh and rendering options -->
     <div>
         <div id="render-tools">
-            <span id="tool-rotate"><i class="fas fa-sync-alt" title="rotate selection"></i>
+            <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>
                     <label>X</label>
@@ -233,7 +233,7 @@
                     </div>
                 </div>
             </span>
-            <span id="tool-scale"><i class="fas fa-expand" title="scale selection"></i>
+            <span id="tool-scale"><i class="fas fa-expand" title="scale or resize selection"></i>
                 <div id="ft-scale" class="grid pop">
                     <div><label>X</label><input id="lock_x" type="checkbox" checked></div>
                     <div><label>Y</label><input id="lock_y" type="checkbox" checked></div>
@@ -252,31 +252,12 @@
                     </div>
                 </div>
             </span>
-            <span id="tool-mesh"><i class="fas fa-dice-d20" title="selected mesh tool"></i>
+            <span id="tool-mesh"><i class="fas fa-dice-d20"></i>
                 <div id="ft-mesh" class="grow f-col pop">
                     <div id="ft-mesh-btn">
-                        <div><button id="mesh-enable" lkx="rc_swap">enable</button></div>
-                        <div><button id="mesh-disable" lkx="rc_swap">disable</button></div>
-                        <div><button id="mesh-rename" lkx="rc_swap">rename</button></div>
-                        <div><button id="mesh-swap" lkx="rc_swap">replace</button></div>
                         <div><button id="mesh-export-obj" lk="rc_xobj">export OBJ</button></div>
                         <div><button id="mesh-export-stl" lk="rc_xstl">export STL</button></div>
                     </div>
-                    <div class="set-sep"></div>
-                    <div id="mesh-info" class="f-row gap3">
-                        <div class="em1">
-                            <label>selected</label>
-                            <span id="mesh-name" class="value">[0]</span>
-                        </div>
-                        <div class="em3">
-                            <label>faces</label>
-                            <span id="mesh-faces" class="value">-</span>
-                        </div>
-                        <div class="em3">
-                            <label>points</label>
-                            <span id="mesh-points" class="value">-</span>
-                        </div>
-                    </div>
                 </div>
             </span>
             <span id="context-mirror" xlk="rc_mirr">