From 3a979030173785426c575d3504369d3c1dbdea0e Mon Sep 17 00:00:00 2001 From: Stewart Allen Date: Wed, 5 Jun 2024 17:36:35 -0700 Subject: [PATCH] rework and improve tool bar pop menus --- src/kiri/init.js | 68 +++++++----------------- src/kiri/main.js | 2 +- src/kiri/platform.js | 24 +++++---- src/kiri/selection.js | 11 +++- src/kiri/tools.js | 2 - src/kiri/widget.js | 1 - src/kiri/widgets.js | 15 ++++++ web/kiri/index.css | 119 ++++++++++++++++++++++++++++-------------- web/kiri/index.html | 66 ++++++++++++++--------- 9 files changed, 179 insertions(+), 129 deletions(-) diff --git a/src/kiri/init.js b/src/kiri/init.js index 3e604aaf..ac28a691 100644 --- a/src/kiri/init.js +++ b/src/kiri/init.js @@ -488,10 +488,6 @@ gapp.register("kiri.init", [], (root, exports) => { case cca('m'): // mirror object mirrorSelection(); break; - case cca('R'): // toggle slice render mode - renderMode++; - api.function.slice(); - break; case cca('a'): if (api.view.get() === VIEWS.ARRANGE) { // auto arrange items on platform @@ -2231,9 +2227,9 @@ gapp.register("kiri.init", [], (root, exports) => { let dv = parseFloat(e.target.value || 1), pv = parseFloat(e.target.was || 1), ra = dv / pv, - xv = parseFloat(ui.sizeX.was), - yv = parseFloat(ui.sizeY.was), - zv = parseFloat(ui.sizeZ.was), + xv = parseFloat(ui.sizeX.was ?? ui.scaleX.value) || 1, + yv = parseFloat(ui.sizeY.was ?? ui.scaleY.value) || 1, + zv = parseFloat(ui.sizeZ.was ?? ui.scaleZ.value) || 1, ta = e.target, xc = ui.lockX.checked, yc = ui.lockY.checked, @@ -2259,9 +2255,9 @@ gapp.register("kiri.init", [], (root, exports) => { let dv = parseFloat(e.target.value || 1), pv = parseFloat(e.target.was || 1), ra = dv / pv, - xv = parseFloat(ui.scaleX.was), - yv = parseFloat(ui.scaleY.was), - zv = parseFloat(ui.scaleZ.was), + xv = parseFloat(ui.scaleX.was ?? ui.scaleX.value) || 1, + yv = parseFloat(ui.scaleY.was ?? ui.scaleY.value) || 1, + zv = parseFloat(ui.scaleZ.was ?? ui.scaleY.value) || 1, ta = e.target, xc = ui.lockX.checked, yc = ui.lockY.checked, @@ -2273,6 +2269,7 @@ gapp.register("kiri.init", [], (root, exports) => { xr = ((tl && xc) || (!tl && xt) ? ra : 1), yr = ((tl && yc) || (!tl && yt) ? ra : 1), zr = ((tl && zc) || (!tl && zt) ? ra : 1); + api.selection.scale(xr,yr,zr); ui.scaleX.was = ui.scaleX.value = xv * xr; ui.scaleY.was = ui.scaleY.value = yv * yr; @@ -2280,13 +2277,9 @@ gapp.register("kiri.init", [], (root, exports) => { } function selectionRotate(e) { - let deg = parseFloat(e.target.value) * DEG2RAD; - e.target.value = 0; - switch (e.target.id.split('').pop()) { - case 'x': return api.selection.rotate(deg,0,0); - case 'y': return api.selection.rotate(0,deg,0); - case 'z': return api.selection.rotate(0,0,deg); - } + let val = parseFloat(e.target.value) || 0; + // let deg = val * DEG2RAD; + e.target.value = val; } space.event.onEnterKey([ @@ -2393,30 +2386,6 @@ gapp.register("kiri.init", [], (root, exports) => { } }; - // space.mouse.up((event, int) => { - // // context menu - // if (event.button === 2) { - // let et = event.target; - // if (et.tagName != 'CANVAS' && et.id != 'context-menu') { - // return; - // } - // let full = api.view.is_arrange(); - // for (let key of ["layflat","mirror","duplicate"]) { - // $(`context-${key}`).disabled = !full; - // } - // let style = ui.context.style; - // style.display = 'flex'; - // style.left = `${event.clientX-3}px`; - // style.top = `${event.clientY-3}px`; - // ui.context.onmouseleave = () => { - // style.display = ''; - // }; - // event.preventDefault(); - // event.stopPropagation(); - // contextInt = int; - // } - // }); - space.mouse.downSelect((int, event) => { if (api.feature.on_mouse_down) { if (int) { @@ -2701,19 +2670,22 @@ gapp.register("kiri.init", [], (root, exports) => { api.selection.update_info(); }; // rotation buttons - let d = (Math.PI / 180) * 5; - $('rot_x_lt').onclick = () => { api.selection.rotate(-d,0,0) }; - $('rot_x_gt').onclick = () => { api.selection.rotate( d,0,0) }; - $('rot_y_lt').onclick = () => { api.selection.rotate(0,-d,0) }; - $('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) }; + let d = (Math.PI / 180); + $('rot_x_lt').onclick = () => { api.selection.rotate(-d * $('rot_x').value,0,0) }; + $('rot_x_gt').onclick = () => { api.selection.rotate( d * $('rot_x').value,0,0) }; + $('rot_y_lt').onclick = () => { api.selection.rotate(0,-d * $('rot_y').value,0) }; + $('rot_y_gt').onclick = () => { api.selection.rotate(0, d * $('rot_y').value,0) }; + $('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-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); }; // mesh buttons $('mesh-swap').onclick = () => { api.widgets.replace() }; + $('mesh-enable').onclick = () => { api.selection.enable() }; + $('mesh-disable').onclick = () => { api.selection.disable() }; + $('mesh-rename').onclick = () => { api.widgets.rename() }; $('mesh-export-stl').onclick = () => { objectsExport('stl') }; $('mesh-export-obj').onclick = () => { objectsExport('obj') }; $('context-duplicate').onclick = duplicateSelection; diff --git a/src/kiri/main.js b/src/kiri/main.js index 93950c41..471cd8d4 100644 --- a/src/kiri/main.js +++ b/src/kiri/main.js @@ -560,7 +560,7 @@ gapp.register("kiri.main", [], (root, exports) => { ann.url = widget.meta.url; }); SDB.setItem('ws-widgets', o2js(newWidgets)); - oldWidgets.forEach(function(wid) { + oldWidgets.forEach(wid => { Widget.deleteFromState(wid); }); // eliminate dangling saved widgets diff --git a/src/kiri/platform.js b/src/kiri/platform.js index 9ad485fd..16bd8fe4 100644 --- a/src/kiri/platform.js +++ b/src/kiri/platform.js @@ -226,25 +226,29 @@ function platformUpdateBounds() { function platformSelectedCount() { return api.view.is_arrange() ? api.selection.count() : 0; - // return viewMode === VIEWS.ARRANGE ? selectedMeshes.length : 0; } function platformUpdateSelected() { const settings = current(); + const { device } = settings; const { extruders } = device; const { selection, ui } = api; - const selreal = selection.widgets(); 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 === 1) { - let sel = selwid[0]; - let name = sel.meta.file || sel.meta.url; + if (api.feature.meta && selcount) { + let name = selwid[0].meta.file || selwid[0].meta.url; if (name) { name = name .toLowerCase() @@ -255,20 +259,19 @@ function platformUpdateSelected() { if (sp >= 0) { name = name.substring(sp + 1); } - ui.mesh.name.innerText = name; } - ui.mesh.points.innerText = util.comma(sel.meta.vertices); - ui.mesh.faces.innerText = util.comma(sel.meta.vertices / 3); + 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.name.innerText = `[${selcount}]`; ui.mesh.points.innerText = '-'; ui.mesh.faces.innerText = '-'; } } else { - ui.mesh.name.innerText = '[0]'; 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++) { @@ -867,6 +870,7 @@ function fitDeviceToWidgets() { const platform = api.platform = { fit: fitDeviceToWidgets, add: platformAdd, + changed: platformChanged, delete: platformDelete, layout: platformLayout, group: platformGroup, diff --git a/src/kiri/selection.js b/src/kiri/selection.js index fdfdcddf..70d610c8 100644 --- a/src/kiri/selection.js +++ b/src/kiri/selection.js @@ -24,12 +24,18 @@ function for_groups(fn) { function for_widgets(fn, noauto) { let m = selectedMeshes; let w = api.widgets.all(); - if (m.length === 0 && w.length === 1) { - m = noauto ? [] : [ w[0].mesh ]; + if (m.length === 0 && w.length) { + m = noauto ? [] : w.map(w => w.mesh); } m.slice().forEach(mesh => { fn(mesh.widget) }); } +function for_status(fn) { + api.widgets.all().forEach(w => { + fn(w, selectedMeshes.contains(w.mesh)); + }); +} + function for_meshes(fn) { selectedMeshes.slice().forEach(mesh => { fn(mesh) }); } @@ -276,6 +282,7 @@ const selection = api.selection = { duplicate, for_groups, for_meshes, + for_status, for_widgets, update_bounds, update_info, diff --git a/src/kiri/tools.js b/src/kiri/tools.js index bb55d4f5..71784ce0 100644 --- a/src/kiri/tools.js +++ b/src/kiri/tools.js @@ -65,7 +65,6 @@ function startIt() { console.log(`${opName} cannot pre-empt hover`); return; } - $('lay-flat').classList.add('selected'); api.feature.hover = true; enabled = true; alert = api.show.alert(`[ESC] to end ${opName}`, 600000); @@ -74,7 +73,6 @@ function startIt() { function endIt() { if (enabled) { api.hide.alert(alert); - $('lay-flat').classList.remove('selected'); api.feature.hover = false; enabled = false; alert = undefined; diff --git a/src/kiri/widget.js b/src/kiri/widget.js index c25928d1..98840733 100644 --- a/src/kiri/widget.js +++ b/src/kiri/widget.js @@ -127,7 +127,6 @@ class Widget { return; } const widget = this; - // console.log({ saveState: widget.id }); index().put('ws-save-'+this.id, { geo: widget.getGeoVertices({ unroll: false }).slice(), track: widget.track, diff --git a/src/kiri/widgets.js b/src/kiri/widgets.js index 5b3f26ee..6288917f 100644 --- a/src/kiri/widgets.js +++ b/src/kiri/widgets.js @@ -29,6 +29,20 @@ function annotate(id) { return (w.anno = w.anno || {}); } +function rename() { + let widgets = api.selection.widgets(true); + if (widgets.length !== 1) { + return; + } + let widget = widgets[0]; + const newname = prompt("new widget name", widget.meta.file); + if (newname) { + widget.meta.file = newname; + api.platform.changed(); + api.space.save(true); + } +} + function replace(vertices) { let widgets = api.selection.widgets(true); if (!widgets.length) { @@ -82,6 +96,7 @@ const widgets = api.widgets = { new: newWidget, map, meshes, + rename, replace, opacity, annotate, diff --git a/web/kiri/index.css b/web/kiri/index.css index a4bcd411..8f584fa4 100644 --- a/web/kiri/index.css +++ b/web/kiri/index.css @@ -231,12 +231,16 @@ th, tr, td, label { border-top: 1px solid #555; border-bottom: 1px solid #555; } -.dark.dark #mode-info label { +.dark #mesh-info label, +.dark #mode-info label +{ color: #fff; border-color: #888; background-color: var(--blue-0); } -.dark #mode-info span { +.dark #mesh-info span, +.dark #mode-info span +{ color: #fff; border-color: #888; background-color: #333; @@ -651,11 +655,6 @@ th, tr, td, label { .center { text-align: center; } -.middle { - display: flex; - align-items: center; - justify-content: center; -} .t-just { text-align: justify; } @@ -706,15 +705,23 @@ th, tr, td, label { } #container { + border: 0; + margin: 0; + padding: 0; position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; z-index: -1; - width: 100%; - height: 100%; } #container canvas { + overflow: hidden; + margin: 0; + border: 0; + padding: 0; width: 100%; height: 100%; - overflow: hidden; } .chonk { @@ -745,7 +752,7 @@ th, tr, td, label { #mode-info > div { display: contents; } -#mode-info label { +#mode-info label, #mesh-info label { font-size: smaller; font-weight: bold; align-self: right; @@ -760,7 +767,7 @@ th, tr, td, label { border-right: 0; border-bottom: 1px solid var(--blue-3); } -#mode-info span { +#mode-info span, #mesh-info span { font-size: smaller; margin: 0 5px 0 0; padding: 3px 5px 3px 5px; @@ -1034,30 +1041,36 @@ th, tr, td, label { border: 1px solid #aaa; border-radius: 3px; position: absolute; - display: none; margin-top: 3px; padding: 3px; top: 100%; } -#render-tools > span:hover .pop { - display: grid; +#render-tools > span:not(:hover) .pop { + display: none; } /** selection rotation */ #ft-rotate { - grid-gap: 2px; + gap: 2px; grid-template-rows: auto auto auto 1fr; grid-template-columns: auto auto auto auto; } +#ft-rotate label { + padding: 0 5px 0 5px; +} #ft-rotate label, -#ft-rotate svg +#ft-rotate svg, +#fr-rotate div { + margin: 0; text-align: center; + align-self: center; } #ft-rotate svg { + padding: 2px; margin-top: 2px; - padding: 1px 15px 1px 15px; - border: 1px solid transparent; + aspect-ratio: 2/1; border-radius: 3px; + border: 1px solid transparent; } #ft-rotate > div:hover > svg { background-color: var(--main-color); @@ -1069,26 +1082,50 @@ th, tr, td, label { justify-content: center; } #ft-rotate .buttons { - grid-column: 1/4; align-items: stretch; - min-width: 150px; + grid-column: 1/4; + min-width: 100px; +} +#ft-rotate button { + justify-content: center; } /** selection scaling */ #ft-scale { - grid-gap: 2px; + gap: 3px; grid-template-rows: auto auto auto 1fr; grid-template-columns: auto auto auto 1fr; + justify-content: stretch; + align-items: stretch; } -#ft-scale label { - text-align: center; +#ft-scale > div { + align-items: center; + flex-direction: row; +} +#ft-scale > input { + margin: 0; +} +#ft-scale > div > label { flex-grow: 1; + text-align: center; } -#ft-scale button { - grid-column: 1/4; - margin-left: 0; - margin-right: 0; +#ft-scale > div > input { + position: absolute; + right: 0; +} +#ft-scale .buttons { + grid-column: 1/4 !important; } /** selection mesh actions */ +#ft-mesh-btn { + display: grid; + grid-auto-flow: row; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; +} +#ft-mesh-btn button { + justify-content: center; + flex-grow: 1; +} #ft-mesh label { font-size: smaller; } @@ -1096,18 +1133,22 @@ th, tr, td, label { font-family: monospace; padding-left: 4px; } -#ft-mesh { - min-width: 200px; -} #mesh-info { - grid-gap: 2px; - grid-template-rows: auto auto auto; - grid-template-columns: auto 1fr; + margin: 2px 1px 1px 1px; } -#lock_x, #lock_y, #lock_z { - position: absolute; - right: 2px; - top: 7px; +#mesh-info label, #mesh-info span { + align-self: unset !important; + margin: 0; +} +#mesh-info span { + display: inline-flex; + align-items: center; +} +#mesh-info .em1 span { + min-width: 1em; +} +#mesh-info .em3 span { + min-width: 3.5em; } #lay-flat.selected { background-color: var(--main-color); @@ -1965,7 +2006,7 @@ th, tr, td, label { justify-content: center; align-items: center; position: absolute; - top: 57px; + top: 90px; right: 0; left: 0; } diff --git a/web/kiri/index.html b/web/kiri/index.html index d3d3ec31..eb53d340 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -219,15 +219,15 @@
- +
- +
- +
@@ -235,34 +235,48 @@
-
-
-
-
-
-
-
-
-
-
-
-
- +
+
+
+ + + + + + + + + +
+ +
-
- - [0] - - - - - - +
+
+
+
+
+
+
+
+
+
+
+ + [0] +
+
+ + - +
+
+ + - +
- - -