Merge branch 'dev-4.0-refactor-ui'
This commit is contained in:
Stewart Allen
commit
d43ad03f84
5 changed files with 76 additions and 63 deletions
|
|
@ -275,19 +275,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
return active && (active.nodeName === "INPUT" || active.nodeName === "TEXTAREA");
|
||||
}
|
||||
|
||||
// function inputTextOK() {
|
||||
// return DOC.activeElement === ui.deviceName;
|
||||
// }
|
||||
|
||||
// function textAreaHasFocus() {
|
||||
// let active = DOC.activeElement;
|
||||
// return active && active.nodeName === "TEXTAREA";
|
||||
// }
|
||||
|
||||
// function inputSize() {
|
||||
// return parseInt(DOC.activeElement.size);
|
||||
// }
|
||||
|
||||
function cca(c) {
|
||||
return c.charCodeAt(0);
|
||||
}
|
||||
|
|
@ -524,15 +511,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
return false;
|
||||
}
|
||||
|
||||
function layFlat() {
|
||||
let int = contextInt[0];
|
||||
if (int && int.object && int.object.widget) {
|
||||
let q = new THREE.Quaternion();
|
||||
q.setFromUnitVectors(contextInt[0].face.normal, new THREE.Vector3(0,0,-1));
|
||||
api.selection.rotate(q);
|
||||
}
|
||||
}
|
||||
|
||||
function setFocus() {
|
||||
let int = contextInt[0];
|
||||
if (int && int.object && int.object.widget) {
|
||||
|
|
@ -1502,12 +1480,11 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
}
|
||||
|
||||
// MAIN INITIALIZATION FUNCTION
|
||||
|
||||
function init_one() {
|
||||
let { event, conf, view, show } = api;
|
||||
let { bound, toInt, toFloat } = uc;
|
||||
let { newBlank, newButton, newBoolean, newGroup, newInput } = uc;
|
||||
let { newSelect, newText, newRow, newGCode } = uc;
|
||||
let { newSelect, newText, newRow, newGCode, newDiv } = uc;
|
||||
|
||||
event.emit('init.one');
|
||||
|
||||
|
|
@ -1697,7 +1674,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
|
||||
/** Device Browser / Editor */
|
||||
|
||||
_____: uc.newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true }),
|
||||
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true }),
|
||||
device: newGroup(LANG.dv_gr_dev, null, {group:"ddev", inline:true, class:"noshow"}),
|
||||
|
||||
_____: newGroup("workspace", null, {group:"dext", inline:true}),
|
||||
|
|
@ -1706,7 +1683,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
maxHeight: newInput('Z (height)', {title:LANG.dv_bedw_l, convert:toFloat, size:6, units:true, round:2, action:updateDeviceSize}),
|
||||
resolutionX: newInput(LANG.dv_rezx_s, {title:LANG.dv_rezx_l, convert:toInt, size:6, modes:SLA}),
|
||||
resolutionY: newInput(LANG.dv_rezy_s, {title:LANG.dv_rezy_l, convert:toInt, size:6, modes:SLA}),
|
||||
_____: uc.newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:GCODE }),
|
||||
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:GCODE }),
|
||||
_____: newGroup("firmware", null, {group:"dext", inline:true}),
|
||||
fwRetract: newBoolean(LANG.dv_retr_s, onBooleanClick, {title:LANG.dv_retr_l, modes:FDM}),
|
||||
deviceOrigin: newBoolean(LANG.dv_orgc_s, onBooleanClick, {title:LANG.dv_orgc_l, modes:FDM_LZR, show:() => !ui.deviceRound.checked}),
|
||||
|
|
@ -1717,13 +1694,13 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
deviceZMax: newInput(LANG.dv_zmax_s, {title:LANG.dv_zmax_l, convert:toInt, size:5, modes:FDM}),
|
||||
gcodeTime: newInput(LANG.dv_time_s, {title:LANG.dv_time_l, convert:toFloat, size:5, modes:FDM}),
|
||||
filamentSource: newSelect(LANG.dv_fsrc_s, {title: LANG.dv_fsrc_l, action: filamentSourceSave, modes:FDM, show:() => false}, "filasrc"),
|
||||
_____: uc.newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:FDM }),
|
||||
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:FDM }),
|
||||
extruder: newGroup(LANG.dv_gr_ext, null, {group:"dext", inline:true}),
|
||||
extFilament: newInput(LANG.dv_fila_s, {title:LANG.dv_fila_l, convert:toFloat, modes:FDM}),
|
||||
extNozzle: newInput(LANG.dv_nozl_s, {title:LANG.dv_nozl_l, convert:toFloat, modes:FDM}),
|
||||
extOffsetX: newInput(LANG.dv_exox_s, {title:LANG.dv_exox_l, convert:toFloat, modes:FDM}),
|
||||
extOffsetY: newInput(LANG.dv_exoy_s, {title:LANG.dv_exoy_l, convert:toFloat, modes:FDM}),
|
||||
_____: uc.newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:GCODE }),
|
||||
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:GCODE }),
|
||||
_____: newGroup(LANG.dv_gr_too, null, {group:"dext", inline:true}),
|
||||
extSelect: newText(LANG.dv_exts_s, {title:LANG.dv_exts_l, size:14, height:3, area:gcode, modes:GCODE}),
|
||||
extDeselect: newText(LANG.dv_dext_s, {title:LANG.dv_dext_l, size:14, height:3, area:gcode, modes:GCODE}),
|
||||
|
|
@ -1734,7 +1711,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
ui.extDel = newButton(undefined, undefined, {icon:'<i class="fas fa-minus"></i>'}),
|
||||
ui.extNext = newButton(undefined, undefined, {icon:'<i class="fas fa-greater-than"></i>'})
|
||||
], {class:"dev-buttons ext-buttons", modes:FDM}),
|
||||
_____: uc.newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:FDM, show: () => false && ui.filamentSource.selectedOptions[0].value === 'palette3' }),
|
||||
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:FDM, show: () => false && ui.filamentSource.selectedOptions[0].value === 'palette3' }),
|
||||
palette: newGroup(LANG.dv_gr_pal, null, {group:"dext2", inline:true, modes:FDM}),
|
||||
paletteId: newInput(LANG.dv_paid_s, {title:LANG.dv_paid_l, modes:FDM, size:15, text:true}),
|
||||
palettePing: newInput(LANG.dv_paps_s, {title:LANG.dv_paps_l, modes:FDM, convert:toInt}),
|
||||
|
|
@ -1745,7 +1722,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
paletteHeat: newInput(LANG.dv_pahe_s, {title:LANG.dv_pahe_l, modes:FDM, convert:toInt}),
|
||||
paletteCool: newInput(LANG.dv_paco_s, {title:LANG.dv_paco_l, modes:FDM, convert:toInt}),
|
||||
palettePress: newInput(LANG.dv_pacm_s, {title:LANG.dv_pacm_l, modes:FDM, convert:toInt}),
|
||||
_____: uc.newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:CAM_LZR }),
|
||||
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true, modes:CAM_LZR }),
|
||||
_____: newGroup(LANG.dv_gr_out, null, {group:"dgco", inline:true}),
|
||||
gcodeStrip: newBoolean(LANG.dv_strc_s, onBooleanClick, {title:LANG.dv_strc_l, modes:CAM}),
|
||||
gcodeSpace: newBoolean(LANG.dv_tksp_s, onBooleanClick, {title:LANG.dv_tksp_l, modes:CAM_LZR}),
|
||||
|
|
@ -2535,7 +2512,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
};
|
||||
|
||||
// SECOND STAGE INIT AFTER UI RESTORED
|
||||
|
||||
function init_two() {
|
||||
api.event.emit('init.two');
|
||||
|
||||
|
|
@ -2714,9 +2690,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
ui.acct.export.title = LANG.acct_xpo;
|
||||
$('file-recent').onclick = () => { api.modal.show('files') };
|
||||
$('file-import').onclick = (ev) => { api.event.import(ev); };
|
||||
// ui.options.trash.onclick = api.selection.delete;
|
||||
// ui.options.enable.onclick = api.selection.enable;
|
||||
// ui.options.disable.onclick = api.selection.disable;
|
||||
ui.func.slice.onclick = (ev) => { ev.stopPropagation(); api.function.slice() };
|
||||
ui.func.preview.onclick = (ev) => { ev.stopPropagation(); api.function.print() };
|
||||
ui.func.animate.onclick = (ev) => { ev.stopPropagation(); api.function.animate() };
|
||||
|
|
@ -2728,7 +2701,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
$('view-back').onclick = space.view.back;
|
||||
$('view-left').onclick = space.view.left;
|
||||
$('view-right').onclick = space.view.right;
|
||||
// $('view-clear').onclick = api.platform.clear;
|
||||
$('unrotate').onclick = () => {
|
||||
api.widgets.for(w => w.unrotate());
|
||||
api.selection.update_info();
|
||||
|
|
@ -2743,7 +2715,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
$('rot_z_lt').onclick = () => { api.selection.rotate(0,0, d) };
|
||||
$('rot_z_gt').onclick = () => { api.selection.rotate(0,0,-d) };
|
||||
// rendering options
|
||||
// $('render-hide').onclick = () => { api.view.wireframe(false, 0, 0); };
|
||||
$('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); };
|
||||
|
|
@ -2768,8 +2739,9 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
|
||||
// add app name hover info
|
||||
$('app-info').innerText = kiri.version;
|
||||
|
||||
// show topline separator when iframed
|
||||
// try { if (WIN.self !== WIN.top) $('top-sep').style.display = 'flex' } catch (e) { }
|
||||
try { if (WIN.self !== WIN.top) $('top-sep').style.display = 'flex' } catch (e) { console.log(e) }
|
||||
|
||||
// bind tictac buttons to panel show/hide
|
||||
let groups = {};
|
||||
|
|
@ -2798,6 +2770,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
// bind closer X to hiding parent action
|
||||
for (let tt of [...document.getElementsByClassName('closer')]) {
|
||||
let tid = tt.getAttribute('target');
|
||||
|
|
@ -2812,6 +2785,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
};
|
||||
api.event.on('key.esc', close);
|
||||
}
|
||||
|
||||
// add drag behavior to movers
|
||||
[...document.getElementsByClassName('mover')].forEach(mover => {
|
||||
mover.onmousedown = (ev) => {
|
||||
|
|
|
|||
|
|
@ -124,6 +124,11 @@ gapp.overlay(root, {
|
|||
$(id).innerHTML = h;
|
||||
},
|
||||
|
||||
$c: (id, add, del) => {
|
||||
add && $(id).classList.add(add);
|
||||
del && $(id).classList.remove(del);
|
||||
},
|
||||
|
||||
h,
|
||||
|
||||
estop: (evt) => {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
--blue-4: rgb(221, 228, 234);
|
||||
--blue-5: rgb(240, 243, 245);
|
||||
--blue-6: rgb(247, 249, 250);
|
||||
--scroll-bg: rgba(221, 228, 234, 0.25)
|
||||
}
|
||||
|
||||
/* surface size configuration and font import */
|
||||
|
|
@ -38,10 +39,15 @@
|
|||
}
|
||||
}
|
||||
@media only screen and (max-width : 1200px) {
|
||||
#top {
|
||||
body {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width : 900px) {
|
||||
body {
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height : 1024px) {
|
||||
body {
|
||||
font-size: smaller;
|
||||
|
|
@ -68,6 +74,8 @@ html, body {
|
|||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
scrollbar-width: none !important;
|
||||
scrollbar-color: var(--blue-2) var(--scroll-bg);
|
||||
}
|
||||
/* default element configuration */
|
||||
a, a:hover, a:visited {
|
||||
|
|
@ -373,13 +381,15 @@ th, tr, td, label {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.hide-scroll {
|
||||
scrollbar-color: transparent transparent !important;
|
||||
}
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.km-font {
|
||||
font-family: 'Russo One', sans-serif;
|
||||
}
|
||||
|
|
@ -387,7 +397,6 @@ th, tr, td, label {
|
|||
font-size: larger;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.b0 {
|
||||
border: 0px;
|
||||
}
|
||||
|
|
@ -505,17 +514,6 @@ th, tr, td, label {
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
:-moz-any() {
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
:-moz-any() {
|
||||
overflow-x: scroll !important;
|
||||
overflow-y: scroll !important;
|
||||
margin-right: -14px !important;
|
||||
margin-bottom: -14px !important;
|
||||
}
|
||||
|
||||
#curtain {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -607,6 +605,10 @@ th, tr, td, label {
|
|||
border-right: 1px solid var(--blue-3);
|
||||
border-bottom: 1px solid var(--blue-3);
|
||||
}
|
||||
#mode-device, #mode-profile {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#doit {
|
||||
display: none;
|
||||
|
|
@ -676,6 +678,39 @@ th, tr, td, label {
|
|||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.slideshow #panel-left .settings {
|
||||
transform: translateX(-90%);
|
||||
transition: transform 0.15s ease-in-out;
|
||||
}
|
||||
.slideshow #panel-left:hover .settings {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.slideshow #panel-left:hover #slide-show {
|
||||
left: -100%;
|
||||
}
|
||||
.slideshow #slide-show {
|
||||
transition: left 0.15s ease-in-out;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background-color: var(--blue-3);
|
||||
border-right: 2px dashed var(--blue-1);
|
||||
z-index: 5000;
|
||||
}
|
||||
.slideshow #slide-show span {
|
||||
display: flex;
|
||||
}
|
||||
#slide-show {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;;
|
||||
}
|
||||
#slide-show span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#panel-left, #panel-right {
|
||||
max-height: 100%;
|
||||
background-color: var(--work-area);
|
||||
|
|
@ -1914,11 +1949,10 @@ th, tr, td, label {
|
|||
}
|
||||
.settings {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
overflow-x: visible;
|
||||
align-items: stretch;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.5); */
|
||||
}
|
||||
.settings .set-group {
|
||||
cursor: pointer;
|
||||
|
|
@ -1942,7 +1976,7 @@ th, tr, td, label {
|
|||
background-color: #fff;
|
||||
flex-flow: column;
|
||||
padding: 4px;
|
||||
margin: 3px;
|
||||
margin: 2px;
|
||||
}
|
||||
.set2-group .var-row, .var-row {
|
||||
background: #fff;
|
||||
|
|
|
|||
|
|
@ -215,12 +215,8 @@
|
|||
|
||||
<!-- left settings menu -->
|
||||
<div id="panel-left" class="f-col j-left">
|
||||
<!-- always up -->
|
||||
<div id="mode-info">
|
||||
<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="line-sep2"></div> -->
|
||||
<div id="slide-show"><span><i class="fa-solid fa-arrow-right"></i></span></div>
|
||||
<div class="f-col grow settings">
|
||||
<!-- FDM -->
|
||||
<div id="fdm-layers" class="set2-group mode-fdm"></div>
|
||||
|
|
@ -281,6 +277,10 @@
|
|||
</div>
|
||||
<!-- vertical separation between workspace and right tray -->
|
||||
<div id="panel-right" class="f-col j-start settings">
|
||||
<div id="mode-info">
|
||||
<div><label>Device</label><span id="mode-device"></span></div>
|
||||
<div><label>Profile</label><span id="mode-profile"></span></div>
|
||||
</div>
|
||||
<div class="set2-group f-col">
|
||||
<div class="set-header"><a>mesh tools</a></div>
|
||||
<div class="render-tools">
|
||||
|
|
@ -404,7 +404,7 @@
|
|||
|
||||
<!-- settings list and editor -->
|
||||
<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">settings</label>
|
||||
<div id="settingsList" class="f-col"></div>
|
||||
<div id="settingsNew">
|
||||
<input id="settingsName" class="grow"></input>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ self.kiri.lang['en-us'] = {
|
|||
dm_mydd: "my devices",
|
||||
dm_seld: "selected device",
|
||||
dm_rcnt: "recent files",
|
||||
dm_savs: "saved settings",
|
||||
dm_savs: "settings",
|
||||
dm_appp: "Application Preferences",
|
||||
|
||||
// CAM Tool Dialog
|
||||
|
|
|
|||
Loading…
Reference in a new issue