checkpoint ui refactor
This commit is contained in:
parent
3296d8e3a0
commit
331bff9378
7 changed files with 88 additions and 98 deletions
|
|
@ -187,8 +187,6 @@ CAM.init = function(kiri, api) {
|
||||||
if (wannot.tab && wannot.tab.length) hasTabs = true;
|
if (wannot.tab && wannot.tab.length) hasTabs = true;
|
||||||
if (wannot.trace && wannot.trace.length) hasTraces = true;
|
if (wannot.trace && wannot.trace.length) hasTraces = true;
|
||||||
}
|
}
|
||||||
// show/hide dots in enabled process pop buttons
|
|
||||||
api.ui.camTabs.marker.style.display = hasTabs ? 'flex' : 'none';
|
|
||||||
api.platform.update_bounds();
|
api.platform.update_bounds();
|
||||||
updateIndex();
|
updateIndex();
|
||||||
updateStock();
|
updateStock();
|
||||||
|
|
|
||||||
|
|
@ -137,9 +137,9 @@ FDM.init = function(kiri, api) {
|
||||||
if (!isFdmMode) {
|
if (!isFdmMode) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// if (!api.conf.get().controller.danger) {
|
if (!api.conf.get().controller.danger) {
|
||||||
return;
|
return;
|
||||||
// }
|
}
|
||||||
let pct = 0;
|
let pct = 0;
|
||||||
let int = setInterval(() => {
|
let int = setInterval(() => {
|
||||||
if (pct <= 1) {
|
if (pct <= 1) {
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,6 @@ const LASER = driver.LASER = {
|
||||||
function init(kiri, api) {
|
function init(kiri, api) {
|
||||||
api.event.on("settings.saved", (settings) => {
|
api.event.on("settings.saved", (settings) => {
|
||||||
let ui = kiri.api.ui;
|
let ui = kiri.api.ui;
|
||||||
ui.knife.marker.style.display = ui.knifeOn.checked ? '' : 'none';
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1951,8 +1951,8 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
camStockOffset: uc.newBoolean(LANG.cs_offs_s, onBooleanClick, {title:LANG.cs_offs_l, modes:CAM}),
|
camStockOffset: uc.newBoolean(LANG.cs_offs_s, onBooleanClick, {title:LANG.cs_offs_l, modes:CAM}),
|
||||||
camStockClipTo: uc.newBoolean(LANG.cs_clip_s, onBooleanClick, {title:LANG.cs_clip_l, modes:CAM}),
|
camStockClipTo: uc.newBoolean(LANG.cs_clip_s, onBooleanClick, {title:LANG.cs_clip_l, modes:CAM}),
|
||||||
camSep: uc.newBlank({class:"pop-sep", modes:CAM}),
|
camSep: uc.newBlank({class:"pop-sep", modes:CAM}),
|
||||||
camStockIndexGrid: uc.newBoolean(LANG.cs_ishg_s, onBooleanClick, {title:LANG.cs_ishg_l, modes:CAM, show:() => ui.camStockIndexed.checked}),
|
|
||||||
camStockIndexed: uc.newBoolean(LANG.cs_indx_s, onBooleanClick, {title:LANG.cs_indx_l, modes:CAM}),
|
camStockIndexed: uc.newBoolean(LANG.cs_indx_s, onBooleanClick, {title:LANG.cs_indx_l, modes:CAM}),
|
||||||
|
camStockIndexGrid: uc.newBoolean(LANG.cs_ishg_s, onBooleanClick, {title:LANG.cs_ishg_l, modes:CAM, show:() => ui.camStockIndexed.checked}),
|
||||||
|
|
||||||
camCommon: uc.newGroup(LANG.cc_menu, null, {modes:CAM}),
|
camCommon: uc.newGroup(LANG.cc_menu, null, {modes:CAM}),
|
||||||
camZAnchor: uc.newSelect(LANG.ou_zanc_s, {title: LANG.ou_zanc_l, action:zAnchorSave, modes:CAM, trace:true, show:() => !ui.camStockIndexed.checked}, "zanchor"),
|
camZAnchor: uc.newSelect(LANG.ou_zanc_s, {title: LANG.ou_zanc_l, action:zAnchorSave, modes:CAM, trace:true, show:() => !ui.camStockIndexed.checked}, "zanchor"),
|
||||||
|
|
|
||||||
113
src/kiri/ui.js
113
src/kiri/ui.js
|
|
@ -253,48 +253,47 @@ gapp.register("kiri.ui", [], (root, exports) => {
|
||||||
|
|
||||||
let row = DOC.createElement('div'),
|
let row = DOC.createElement('div'),
|
||||||
dbkey = `beta-${prefix}-show-${group}`,
|
dbkey = `beta-${prefix}-show-${group}`,
|
||||||
popper = !opt.inline && label,
|
// popper = !opt.inline && label,
|
||||||
link;
|
link;
|
||||||
|
|
||||||
if (popper) {
|
// if (popper) {
|
||||||
let pop = DOC.createElement('div');
|
// let pop = DOC.createElement('div');
|
||||||
pop.classList.add('set-pop');
|
// pop.classList.add('set-pop');
|
||||||
if (opt.class) {
|
// if (opt.class) {
|
||||||
for (let ce of opt.class.split(' ')) {
|
// for (let ce of opt.class.split(' ')) {
|
||||||
pop.classList.add(ce);
|
// pop.classList.add(ce);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
row.appendChild(pop);
|
// row.appendChild(pop);
|
||||||
row.setAttribute("class", "set-group noselect");
|
// row.setAttribute("class", "set-group noselect");
|
||||||
addTo = pop;
|
// addTo = pop;
|
||||||
} else {
|
// } else {
|
||||||
if (opt.class) {
|
if (opt.class) {
|
||||||
opt.class.split(' ').forEach(ce => {
|
opt.class.split(' ').forEach(ce => {
|
||||||
row.classList.add(ce);
|
row.classList.add(ce);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
row.setAttribute("class", "set-header col");
|
row.setAttribute("class", "set-header");
|
||||||
}
|
}
|
||||||
addTo = lastDiv;
|
addTo = lastDiv;
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (opt.marker) {
|
|
||||||
let marker = row.marker = DOC.createElement('div');
|
|
||||||
marker.setAttribute('class', 'marker');
|
|
||||||
row.appendChild(marker);
|
|
||||||
}
|
|
||||||
|
|
||||||
div.appendChild(row);
|
div.appendChild(row);
|
||||||
if (label) {
|
if (label) {
|
||||||
link = DOC.createElement('a');
|
link = DOC.createElement('a');
|
||||||
link.appendChild(DOC.createTextNode(label));
|
link.appendChild(DOC.createTextNode(label));
|
||||||
row.appendChild(link);
|
row.appendChild(link);
|
||||||
|
let line = DOC.createElement('hr');
|
||||||
|
line.classList.add('set-header-line');
|
||||||
|
row.appendChild(line);
|
||||||
}
|
}
|
||||||
|
|
||||||
addModeControls(row, opt);
|
addModeControls(row, opt);
|
||||||
lastGroup = groups[group] = [];
|
lastGroup = groups[group] = [];
|
||||||
lastGroup.key = dbkey;
|
lastGroup.key = dbkey;
|
||||||
groupName = group;
|
groupName = group;
|
||||||
groupShow[group] = popper ? state[dbkey] === 'true' : state[dbkey] !== 'false';
|
groupShow[group] = state[dbkey] !== 'false';
|
||||||
|
// groupShow[group] = popper ? state[dbkey] === 'true' : state[dbkey] !== 'false';
|
||||||
row.onclick = function(ev) {
|
row.onclick = function(ev) {
|
||||||
if (ev.target !== link && ev.target !== row) {
|
if (ev.target !== link && ev.target !== row) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -302,41 +301,41 @@ gapp.register("kiri.ui", [], (root, exports) => {
|
||||||
console.log({ toggleGroup: group, dbkey });
|
console.log({ toggleGroup: group, dbkey });
|
||||||
toggleGroup(group, dbkey);
|
toggleGroup(group, dbkey);
|
||||||
};
|
};
|
||||||
if (popper) {
|
// if (popper) {
|
||||||
let saveclick = row.onclick;
|
// let saveclick = row.onclick;
|
||||||
row.onclick = function(ev) {
|
// row.onclick = function(ev) {
|
||||||
let showing = groupShow[group];
|
// let showing = groupShow[group];
|
||||||
if (saveclick && showing) {
|
// if (saveclick && showing) {
|
||||||
saveclick(ev);
|
// saveclick(ev);
|
||||||
} else {
|
// } else {
|
||||||
row.onmouseenter(ev, true);
|
// row.onmouseenter(ev, true);
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
row.onmouseenter = function(ev, click) {
|
// row.onmouseenter = function(ev, click) {
|
||||||
let showing = groupShow[group];
|
// let showing = groupShow[group];
|
||||||
if (!(letHoverPop || click || showing)) {
|
// if (!(letHoverPop || click || showing)) {
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
if (ev.target !== link && ev.target !== row) {
|
// if (ev.target !== link && ev.target !== row) {
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
clearTimeout(exitimer);
|
// clearTimeout(exitimer);
|
||||||
showGroup(group);
|
// showGroup(group);
|
||||||
};
|
// };
|
||||||
row.onmouseleave = function(ev) {
|
// row.onmouseleave = function(ev) {
|
||||||
if (groupSticky) {
|
// if (groupSticky) {
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
if (ev.target !== link && ev.target !== row) {
|
// if (ev.target !== link && ev.target !== row) {
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
clearTimeout(exitimer);
|
// clearTimeout(exitimer);
|
||||||
exitimer = setTimeout(showGroup, 1000);
|
// exitimer = setTimeout(showGroup, 1000);
|
||||||
};
|
// };
|
||||||
addTo._group = group;
|
// addTo._group = group;
|
||||||
addModeControls(addTo, opt);
|
// addModeControls(addTo, opt);
|
||||||
lastGroup.push(addTo);
|
// lastGroup.push(addTo);
|
||||||
}
|
// }
|
||||||
|
|
||||||
return row;
|
return row;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -497,10 +497,12 @@ th, tr, td, label {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.chonk {
|
.chonk {
|
||||||
height: 10px;
|
margin: 10px 0 10px 0;
|
||||||
min-height: 10px;
|
height: 0px;
|
||||||
|
min-height: 0px;
|
||||||
|
max-height: 0px;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
background-color: rgba(0,0,0,0.25);
|
border-top: 3px dashed black;
|
||||||
}
|
}
|
||||||
#mode-info {
|
#mode-info {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -927,13 +929,12 @@ th, tr, td, label {
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
.cam-pop-op {
|
.cam-pop-op {
|
||||||
|
top: 0;
|
||||||
|
right: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
top: 0;
|
|
||||||
right: 100%;
|
|
||||||
/* transform: translateY(-30%); */
|
|
||||||
background-color: rgba(255,255,255,0.8);
|
background-color: rgba(255,255,255,0.8);
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -1827,12 +1828,15 @@ th, tr, td, label {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
background-color: rgba(255,255,255,0.5);
|
background-color: rgba(255,255,255,0.5);
|
||||||
padding: 5px;
|
/* padding: 5px; */
|
||||||
gap: 2px;
|
/* gap: 2px; */
|
||||||
}
|
}
|
||||||
#settings .set-group {
|
#settings .set-group {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
#settings .pop-sep {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
.pop-sep {
|
.pop-sep {
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
@ -1848,12 +1852,19 @@ th, tr, td, label {
|
||||||
right: -9px;
|
right: -9px;
|
||||||
}
|
}
|
||||||
.set-header {
|
.set-header {
|
||||||
background-color: rgba(0,0,0,0.1);
|
padding: 3px 5px 3px 5px;
|
||||||
text-align: center;
|
margin: 7px 3px 3px 3px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
justify-content: center;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
.set-header:hover {
|
||||||
|
background-color: rgba(0,0,0,0.1);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.set-header-line {
|
||||||
|
margin-left: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.set-group {
|
.set-group {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -1881,29 +1892,12 @@ th, tr, td, label {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
/* .set-pop.xdown {
|
#settings .var-row {
|
||||||
transform: translateY(-25%) !important;
|
margin: 0 10px 0 15px;
|
||||||
}
|
}
|
||||||
.set-pop.fdmout {
|
#settings .ext-buttons {
|
||||||
transform: translateY(-63%) !important;
|
margin: 0 9px 0 14px;
|
||||||
}
|
gap: 3px;
|
||||||
.set-pop.fdmadv {
|
|
||||||
transform: translateY(-74%) !important;
|
|
||||||
}
|
|
||||||
.set-pop.rough {
|
|
||||||
transform: translateY(-14%) !important;
|
|
||||||
}
|
|
||||||
.set-pop.outline {
|
|
||||||
transform: translateY(-36%) !important;
|
|
||||||
} */
|
|
||||||
.marker {
|
|
||||||
position:absolute;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: rgba(0,0,0,0.25);
|
|
||||||
bottom: 1px;
|
|
||||||
left: 1px;
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
}
|
}
|
||||||
#layers .var-row {
|
#layers .var-row {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
|
||||||
|
|
@ -488,10 +488,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="end" class="f-col a-center">
|
<!-- <div id="end" class="f-col a-center">
|
||||||
the end
|
the end
|
||||||
<div id="bottom">the bottom</div>
|
<div id="bottom">the bottom</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- ThreeJS container -->
|
<!-- ThreeJS container -->
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue