move render menu to right panel

This commit is contained in:
Stewart Allen 2024-05-29 12:54:59 -04:00
commit af7d1de2fb
5 changed files with 110 additions and 55 deletions

View file

@ -2445,13 +2445,13 @@ gapp.register("kiri.init", [], (root, exports) => {
return lbl; return lbl;
} }
for (let mode of ["fdm","sla","cam","laser"]) { // for (let mode of ["fdm","sla","cam","laser"]) {
if (api.feature.modes.indexOf(mode) >= 0) { // if (api.feature.modes.indexOf(mode) >= 0) {
$(`mode-${mode}`).appendChild(mksvg(icons[mode])); // $(`mode-${mode}`).appendChild(mksvg(icons[mode]));
} else { // } else {
$(`mode-${mode}`).style.display = 'none'; // $(`mode-${mode}`).style.display = 'none';
} // }
} // }
api.platform.update_size(); api.platform.update_size();
@ -2789,10 +2789,10 @@ gapp.register("kiri.init", [], (root, exports) => {
$('view-left').onclick = space.view.left; $('view-left').onclick = space.view.left;
$('view-right').onclick = space.view.right; $('view-right').onclick = space.view.right;
$('view-clear').onclick = api.platform.clear; $('view-clear').onclick = api.platform.clear;
$('mode-fdm').onclick = () => { api.mode.set('FDM'); api.space.set_focus() }; // $('mode-fdm').onclick = () => { api.mode.set('FDM'); api.space.set_focus() };
$('mode-sla').onclick = () => { api.mode.set('SLA'); api.space.set_focus() }; // $('mode-sla').onclick = () => { api.mode.set('SLA'); api.space.set_focus() };
$('mode-cam').onclick = () => { api.mode.set('CAM'); api.space.set_focus() }; // $('mode-cam').onclick = () => { api.mode.set('CAM'); api.space.set_focus() };
$('mode-laser').onclick = () => { api.mode.set('LASER'); api.space.set_focus() }; // $('mode-laser').onclick = () => { api.mode.set('LASER'); api.space.set_focus() };
$('unrotate').onclick = () => { $('unrotate').onclick = () => {
api.widgets.for(w => w.unrotate()); api.widgets.for(w => w.unrotate());
api.selection.update_info(); api.selection.update_info();

View file

@ -844,7 +844,7 @@ gapp.register("kiri.main", [], (root, exports) => {
switch (mode) { switch (mode) {
case VIEWS.ARRANGE: case VIEWS.ARRANGE:
api.function.clear_progress(); api.function.clear_progress();
UI.back.style.display = ''; // UI.back.style.display = '';
UI.render.style.display = ''; UI.render.style.display = '';
kiri.client.clear(); kiri.client.clear();
STACKS.clear(); STACKS.clear();
@ -907,14 +907,14 @@ gapp.register("kiri.main", [], (root, exports) => {
modename.onchange = (ev) => setMode(optlist[options.selectedIndex]); modename.onchange = (ev) => setMode(optlist[options.selectedIndex]);
} }
// highlight relevant device mode button // highlight relevant device mode button
["fdm","sla","cam","laser"].forEach(dev => { // ["fdm","sla","cam","laser"].forEach(dev => {
let cl = $(`mode-${dev}`).classList; // let cl = $(`mode-${dev}`).classList;
if (dev === mode.toLowerCase()) { // if (dev === mode.toLowerCase()) {
cl.add("dev-sel"); // cl.add("dev-sel");
} else { // } else {
cl.remove("dev-sel"); // cl.remove("dev-sel");
} // }
}); // });
// restore cached device profile for this mode // restore cached device profile for this mode
if (current.cdev[mode]) { if (current.cdev[mode]) {
current.device = clone(current.cdev[mode]); current.device = clone(current.cdev[mode]);

View file

@ -283,16 +283,16 @@ gapp.register("kiri.ui", [], (root, exports) => {
row.appendChild(link); row.appendChild(link);
} }
if (opt.separator) { // if (opt.separator) {
const sep = DOC.createElement('div'); // const sep = DOC.createElement('div');
sep.classList.add('set2-sep'); // sep.classList.add('set2-sep');
sep.innerHTML = [ // sep.innerHTML = [
'<div class="line-sep2"></div>', // '<div class="line-sep2"></div>',
'<div class="chonk2"></div>', // '<div class="chonk2"></div>',
'<div class="line-sep2"></div>', // '<div class="line-sep2"></div>',
].join(''); // ].join('');
lastDiv.appendChild(sep); // lastDiv.appendChild(sep);
} // }
addModeControls(row, opt); addModeControls(row, opt);
lastGroup = groups[group] = []; lastGroup = groups[group] = [];

View file

@ -382,6 +382,15 @@ th, tr, td, label {
font-weight: bold; font-weight: bold;
} }
.b0 {
border: 0px;
}
.bt1 {
border: 1px solid transparent;
}
.bt2 {
border: 2px solid transparent;
}
.contents { .contents {
display: contents; display: contents;
} }
@ -391,6 +400,15 @@ th, tr, td, label {
.noshow { .noshow {
display: none; display: none;
} }
.gap1 {
gap: 1px;
}
.gap2 {
gap: 2px;
}
.gap3 {
gap: 3px;
}
.grid { .grid {
display: grid; display: grid;
} }
@ -839,6 +857,31 @@ th, tr, td, label {
#ft-mesh { #ft-mesh {
min-width: 200px; min-width: 200px;
} }
#menu-render {
gap: 3px;
flex-direction: row;;
}
#menu-render > span {
width: 20px;
height: 20px;
display: flex;
flex-shrink: 0;
flex-direction: column;
}
#menu-render > span > * {
padding: 0;
margin: 0;
width: 20px;
height: 20px;
align-items: stretch;
justify-content: stretch;
}
#render-hide > a {
border: 0.5px dashed black;
border-radius: 2px;
width: 17px;
height: 17px;
}
#mesh-info { #mesh-info {
grid-gap: 2px; grid-gap: 2px;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;

View file

@ -131,29 +131,6 @@
<div id="pop-nozzle" class="content"></div> <div id="pop-nozzle" class="content"></div>
</div> </div>
</span> </span>
<span id="menu-render">
<i class="fas fa-dice-d20"></i>
<label>render</label>
<div class="top-menu-drop top-menu-right">
<div class="content">
<div id="render-solid" class="grow a-center">
<label lk="solid">solid</label>
<span><i class="fas fa-square"></i></span>
</div>
<div id="render-wire" class="grow a-center">
<label lk="wire">wire</label>
<span><i class="fas fa-border-all"></i></span>
</div>
<div id="render-ghost" class="grow a-center">
<label lk="ghost">ghost</label>
<span><i class="fas fa-border-none"></i></span>
</div>
<div id="render-hide" class="grow a-center">
<label lk="hide">hide</label>
</div>
</div>
</div>
</span>
<span> <span>
<i class="fas fa-eye"></i> <i class="fas fa-eye"></i>
<label>view</label> <label>view</label>
@ -345,6 +322,26 @@
<div class="line-sep2"></div> <div class="line-sep2"></div>
</div> </div>
<div id="ws-widgets" class="f-col"></div> <div id="ws-widgets" class="f-col"></div>
<div class="set-header">
<a>render</a>
</div>
<div class="set2-set f-col">
<div class="line-sep2"></div>
<div class="chonk2"></div>
<div class="line-sep2"></div>
</div>
<div id="menu-render" class="j-center">
<span id="render-solid" class="j-center" title="solid">
<i class="fas fa-square"></i>
</span>
<span id="render-wire" class="j-center" title="wireframe">
<i class="fas fa-border-all"></i>
</span>
<span id="render-ghost" class="a-center" title="ghost">
<i class="fas fa-border-none"></i>
</span>
<span id="render-hide" class="a-center j-center" title="hide"><a></a></span>
</div>
</div> </div>
<div class="set2-group f-col mode-fdm"> <div class="set2-group f-col mode-fdm">
<div class="set-header"> <div class="set-header">
@ -414,7 +411,10 @@
<div id="modal"> <div id="modal">
<div id="modal-box" class="f-col"> <div id="modal-box" class="f-col">
<!-- title bar and closer -->
<div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div> <div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
<!-- help menu -->
<div id="mod-help" class="mdialog f-col"> <div id="mod-help" class="mdialog f-col">
<div class="f-row j-center title"> <div class="f-row j-center title">
<label>Kiri:Moto Help</label> <label>Kiri:Moto Help</label>
@ -432,9 +432,11 @@
<label id="kiri-version"></label> <label id="kiri-version"></label>
</div> </div>
</div> </div>
<!-- device selector / editor -->
<div id="mod-setup" class="mdialog f-row"> <div id="mod-setup" class="mdialog f-row">
<div class="f-col left a-stretch"> <div class="f-col left a-stretch">
<label class="header" lk="dm_sldt">select a device type</label> <!-- <label class="header" lk="dm_sldt">select a device type</label>
<div class="f-col"> <div class="f-col">
<table><tr> <table><tr>
<th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th> <th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
@ -443,7 +445,7 @@
<th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th> <th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
<th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th> <th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
</tr></table> </tr></table>
</div> </div> -->
<div id="dev-header" class="header sub f-col j-center"> <div id="dev-header" class="header sub f-col j-center">
<label lk="dm_stdd">standard devices</label> <label lk="dm_stdd">standard devices</label>
<div id="dev-search"> <div id="dev-search">
@ -487,10 +489,14 @@
</div> </div>
</div> </div>
</div> </div>
<!-- recent file menu -->
<div id="mod-files" class="mdialog f-col"> <div id="mod-files" class="mdialog f-col">
<label class="set-header menu-title" lk="dm_rcnt">recent files</label> <label class="set-header menu-title" lk="dm_rcnt">recent files</label>
<div id="catalogList" class="f-col"></div> <div id="catalogList" class="f-col"></div>
</div> </div>
<!-- settings list and editor -->
<div id="mod-saves" class="mdialog f-col"> <div id="mod-saves" class="mdialog f-col">
<label class="set-header menu-title" lk="dm_savs">saved settings</label> <label class="set-header menu-title" lk="dm_savs">saved settings</label>
<div id="settingsList" class="f-col"></div> <div id="settingsList" class="f-col"></div>
@ -499,6 +505,8 @@
<button id="settingsSave" lk="save">Save</button> <button id="settingsSave" lk="save">Save</button>
</div> </div>
</div> </div>
<!-- cnc tool menu -->
<div id="mod-tools" class="mdialog"> <div id="mod-tools" class="mdialog">
<div class="f-col"> <div class="f-col">
<div class="f-row t-head"> <div class="f-row t-head">
@ -548,6 +556,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- system preferences -->
<div id="mod-prefs" class="mdialog f-col a-center"> <div id="mod-prefs" class="mdialog f-col a-center">
<label lk="dm_appp" class="menu-title">Application Preferences</label> <label lk="dm_appp" class="menu-title">Application Preferences</label>
<hr width="80%"> <hr width="80%">
@ -566,6 +576,8 @@
<div class="t-pad2"></div> <div class="t-pad2"></div>
</div> </div>
</div> </div>
<!-- grid local list -->
<div id="mod-local" class="mdialog f-col"></div> <div id="mod-local" class="mdialog f-col"></div>
<div id="mod-print" class="mdialog f-col"></div> <div id="mod-print" class="mdialog f-col"></div>
<div id="mod-any" class="mdialog f-col"></div> <div id="mod-any" class="mdialog f-col"></div>