color sliced features and match checkboxes

This commit is contained in:
Stewart Allen 2020-12-30 13:17:39 -05:00
commit bf1945d02f
3 changed files with 38 additions and 10 deletions

View file

@ -72,11 +72,14 @@
});
})
};
// let color = lmap[label].color.check;
// if (color !== undefined) {
// console.log({check, color});
// check.toggle.style.color = "#f00";
// }
let color = lmap[label].color.check;
if (color !== undefined) {
let div = document.createElement('div');
div.setAttribute('class', 'color');
div.style.backgroundColor = `#${color.toString(16).padStart(6,0)}`;
check.toggle.parentNode.appendChild(div);
check.toggle.classList.add("color");
}
}
const ctrl = DYN[label];
ctrl.group.appendAll(mats);

View file

@ -18,10 +18,10 @@
FILL = KIRI.fill,
FILLFIXED = KIRI.fill_fixed,
COLOR = {
shell: { face: 0x0077bb, line: 0x0077bb, opacity: 1 },
fill: { face: 0x0077bb, line: 0x0077bb, opacity: 1 },
infill: { face: 0x0077bb, line: 0x0077bb, opacity: 1 },
support: { face: 0x006699, line: 0x006699, opacity: 1 }
shell: { check: 0x0077bb, face: 0x0077bb, line: 0x0077bb, opacity: 1 },
fill: { check: 0x00bb77, face: 0x00bb77, line: 0x00bb77, opacity: 1 },
infill: { check: 0x3322bb, face: 0x3322bb, line: 0x3322bb, opacity: 1 },
support: { check: 0xaa5533, face: 0xaa5533, line: 0xaa5533, opacity: 1 }
},
PROTO = Object.clone(COLOR);
@ -279,7 +279,7 @@
slice.tops.forEach(top => {
if (isThin) {
output
.setLayer('slice', { line: 0x000066, check: 0xff0000 })
.setLayer('slice', { line: 0x000066, check: 0x000066 })
.addPolys(top.poly);
}

View file

@ -74,6 +74,7 @@ input {
padding-bottom: 0;
margin-top: 1px;
margin-bottom: 1px;
position: relative;
}
input:focus {
background-color: #fec;
@ -90,6 +91,30 @@ input[type="range"] {
input[type=range]::-moz-focus-outer {
border: 0;
}
input[type="checkbox"] + .color {
z-index: 10000;
width: 15px;
height: 15px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 3px;
display: inline-block;
pointer-events: none;
margin: 2px;
}
input[type="checkbox"]:not(:checked) + .color {
border: 1px solid blue;
background-color: rgba(255,255,255,0.5) !important;
}
input[type="checkbox"].color {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
width: 100%;
height: 100%;
}
select, textarea, button, input, a {
outline: none;
}