rework and improve tool bar pop menus
This commit is contained in:
parent
9a02408e7b
commit
3a97903017
9 changed files with 179 additions and 129 deletions
|
|
@ -488,10 +488,6 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
case cca('m'): // mirror object
|
case cca('m'): // mirror object
|
||||||
mirrorSelection();
|
mirrorSelection();
|
||||||
break;
|
break;
|
||||||
case cca('R'): // toggle slice render mode
|
|
||||||
renderMode++;
|
|
||||||
api.function.slice();
|
|
||||||
break;
|
|
||||||
case cca('a'):
|
case cca('a'):
|
||||||
if (api.view.get() === VIEWS.ARRANGE) {
|
if (api.view.get() === VIEWS.ARRANGE) {
|
||||||
// auto arrange items on platform
|
// auto arrange items on platform
|
||||||
|
|
@ -2231,9 +2227,9 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
let dv = parseFloat(e.target.value || 1),
|
let dv = parseFloat(e.target.value || 1),
|
||||||
pv = parseFloat(e.target.was || 1),
|
pv = parseFloat(e.target.was || 1),
|
||||||
ra = dv / pv,
|
ra = dv / pv,
|
||||||
xv = parseFloat(ui.sizeX.was),
|
xv = parseFloat(ui.sizeX.was ?? ui.scaleX.value) || 1,
|
||||||
yv = parseFloat(ui.sizeY.was),
|
yv = parseFloat(ui.sizeY.was ?? ui.scaleY.value) || 1,
|
||||||
zv = parseFloat(ui.sizeZ.was),
|
zv = parseFloat(ui.sizeZ.was ?? ui.scaleZ.value) || 1,
|
||||||
ta = e.target,
|
ta = e.target,
|
||||||
xc = ui.lockX.checked,
|
xc = ui.lockX.checked,
|
||||||
yc = ui.lockY.checked,
|
yc = ui.lockY.checked,
|
||||||
|
|
@ -2259,9 +2255,9 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
let dv = parseFloat(e.target.value || 1),
|
let dv = parseFloat(e.target.value || 1),
|
||||||
pv = parseFloat(e.target.was || 1),
|
pv = parseFloat(e.target.was || 1),
|
||||||
ra = dv / pv,
|
ra = dv / pv,
|
||||||
xv = parseFloat(ui.scaleX.was),
|
xv = parseFloat(ui.scaleX.was ?? ui.scaleX.value) || 1,
|
||||||
yv = parseFloat(ui.scaleY.was),
|
yv = parseFloat(ui.scaleY.was ?? ui.scaleY.value) || 1,
|
||||||
zv = parseFloat(ui.scaleZ.was),
|
zv = parseFloat(ui.scaleZ.was ?? ui.scaleY.value) || 1,
|
||||||
ta = e.target,
|
ta = e.target,
|
||||||
xc = ui.lockX.checked,
|
xc = ui.lockX.checked,
|
||||||
yc = ui.lockY.checked,
|
yc = ui.lockY.checked,
|
||||||
|
|
@ -2273,6 +2269,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
xr = ((tl && xc) || (!tl && xt) ? ra : 1),
|
xr = ((tl && xc) || (!tl && xt) ? ra : 1),
|
||||||
yr = ((tl && yc) || (!tl && yt) ? ra : 1),
|
yr = ((tl && yc) || (!tl && yt) ? ra : 1),
|
||||||
zr = ((tl && zc) || (!tl && zt) ? ra : 1);
|
zr = ((tl && zc) || (!tl && zt) ? ra : 1);
|
||||||
|
|
||||||
api.selection.scale(xr,yr,zr);
|
api.selection.scale(xr,yr,zr);
|
||||||
ui.scaleX.was = ui.scaleX.value = xv * xr;
|
ui.scaleX.was = ui.scaleX.value = xv * xr;
|
||||||
ui.scaleY.was = ui.scaleY.value = yv * yr;
|
ui.scaleY.was = ui.scaleY.value = yv * yr;
|
||||||
|
|
@ -2280,13 +2277,9 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectionRotate(e) {
|
function selectionRotate(e) {
|
||||||
let deg = parseFloat(e.target.value) * DEG2RAD;
|
let val = parseFloat(e.target.value) || 0;
|
||||||
e.target.value = 0;
|
// let deg = val * DEG2RAD;
|
||||||
switch (e.target.id.split('').pop()) {
|
e.target.value = val;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
space.event.onEnterKey([
|
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) => {
|
space.mouse.downSelect((int, event) => {
|
||||||
if (api.feature.on_mouse_down) {
|
if (api.feature.on_mouse_down) {
|
||||||
if (int) {
|
if (int) {
|
||||||
|
|
@ -2701,19 +2670,22 @@ gapp.register("kiri.init", [], (root, exports) => {
|
||||||
api.selection.update_info();
|
api.selection.update_info();
|
||||||
};
|
};
|
||||||
// rotation buttons
|
// rotation buttons
|
||||||
let d = (Math.PI / 180) * 5;
|
let d = (Math.PI / 180);
|
||||||
$('rot_x_lt').onclick = () => { api.selection.rotate(-d,0,0) };
|
$('rot_x_lt').onclick = () => { api.selection.rotate(-d * $('rot_x').value,0,0) };
|
||||||
$('rot_x_gt').onclick = () => { api.selection.rotate( d,0,0) };
|
$('rot_x_gt').onclick = () => { api.selection.rotate( d * $('rot_x').value,0,0) };
|
||||||
$('rot_y_lt').onclick = () => { api.selection.rotate(0,-d,0) };
|
$('rot_y_lt').onclick = () => { api.selection.rotate(0,-d * $('rot_y').value,0) };
|
||||||
$('rot_y_gt').onclick = () => { api.selection.rotate(0, d,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_lt').onclick = () => { api.selection.rotate(0,0, d * $('rot_z').value) };
|
||||||
$('rot_z_gt').onclick = () => { api.selection.rotate(0,0,-d) };
|
$('rot_z_gt').onclick = () => { api.selection.rotate(0,0,-d * $('rot_z').value) };
|
||||||
// rendering options
|
// rendering options
|
||||||
$('render-ghost').onclick = () => { api.view.wireframe(false, 0, api.view.is_arrange() ? 0.4 : 0.25); };
|
$('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-wire').onclick = () => { api.view.wireframe(true, 0, api.space.is_dark() ? 0.25 : 0.5); };
|
||||||
$('render-solid').onclick = () => { api.view.wireframe(false, 0, 1); };
|
$('render-solid').onclick = () => { api.view.wireframe(false, 0, 1); };
|
||||||
// mesh buttons
|
// mesh buttons
|
||||||
$('mesh-swap').onclick = () => { api.widgets.replace() };
|
$('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-stl').onclick = () => { objectsExport('stl') };
|
||||||
$('mesh-export-obj').onclick = () => { objectsExport('obj') };
|
$('mesh-export-obj').onclick = () => { objectsExport('obj') };
|
||||||
$('context-duplicate').onclick = duplicateSelection;
|
$('context-duplicate').onclick = duplicateSelection;
|
||||||
|
|
|
||||||
|
|
@ -560,7 +560,7 @@ gapp.register("kiri.main", [], (root, exports) => {
|
||||||
ann.url = widget.meta.url;
|
ann.url = widget.meta.url;
|
||||||
});
|
});
|
||||||
SDB.setItem('ws-widgets', o2js(newWidgets));
|
SDB.setItem('ws-widgets', o2js(newWidgets));
|
||||||
oldWidgets.forEach(function(wid) {
|
oldWidgets.forEach(wid => {
|
||||||
Widget.deleteFromState(wid);
|
Widget.deleteFromState(wid);
|
||||||
});
|
});
|
||||||
// eliminate dangling saved widgets
|
// eliminate dangling saved widgets
|
||||||
|
|
|
||||||
|
|
@ -226,25 +226,29 @@ function platformUpdateBounds() {
|
||||||
|
|
||||||
function platformSelectedCount() {
|
function platformSelectedCount() {
|
||||||
return api.view.is_arrange() ? api.selection.count() : 0;
|
return api.view.is_arrange() ? api.selection.count() : 0;
|
||||||
// return viewMode === VIEWS.ARRANGE ? selectedMeshes.length : 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function platformUpdateSelected() {
|
function platformUpdateSelected() {
|
||||||
const settings = current();
|
const settings = current();
|
||||||
|
|
||||||
const { device } = settings;
|
const { device } = settings;
|
||||||
const { extruders } = device;
|
const { extruders } = device;
|
||||||
const { selection, ui } = api;
|
const { selection, ui } = api;
|
||||||
|
|
||||||
const selreal = selection.widgets();
|
|
||||||
const selwid = selection.widgets(true);
|
const selwid = selection.widgets(true);
|
||||||
|
const selreal = selection.widgets(false).length;
|
||||||
const selcount = selwid.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) {
|
if (selcount) {
|
||||||
let enaC = selwid.filter(w => w.meta.disabled !== true).length;
|
let enaC = selwid.filter(w => w.meta.disabled !== true).length;
|
||||||
let disC = selwid.filter(w => w.meta.disabled === true).length;
|
let disC = selwid.filter(w => w.meta.disabled === true).length;
|
||||||
if (api.feature.meta && selcount === 1) {
|
if (api.feature.meta && selcount) {
|
||||||
let sel = selwid[0];
|
let name = selwid[0].meta.file || selwid[0].meta.url;
|
||||||
let name = sel.meta.file || sel.meta.url;
|
|
||||||
if (name) {
|
if (name) {
|
||||||
name = name
|
name = name
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
|
|
@ -255,20 +259,19 @@ function platformUpdateSelected() {
|
||||||
if (sp >= 0) {
|
if (sp >= 0) {
|
||||||
name = name.substring(sp + 1);
|
name = name.substring(sp + 1);
|
||||||
}
|
}
|
||||||
ui.mesh.name.innerText = name;
|
|
||||||
}
|
}
|
||||||
ui.mesh.points.innerText = util.comma(sel.meta.vertices);
|
let vert = selwid.map(w => w.meta.vertices).reduce((a,b) => a+b);
|
||||||
ui.mesh.faces.innerText = util.comma(sel.meta.vertices / 3);
|
ui.mesh.points.innerText = util.comma(vert);
|
||||||
|
ui.mesh.faces.innerText = util.comma(vert / 3);
|
||||||
} else {
|
} else {
|
||||||
ui.mesh.name.innerText = `[${selcount}]`;
|
|
||||||
ui.mesh.points.innerText = '-';
|
ui.mesh.points.innerText = '-';
|
||||||
ui.mesh.faces.innerText = '-';
|
ui.mesh.faces.innerText = '-';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
ui.mesh.name.innerText = '[0]';
|
|
||||||
ui.mesh.points.innerText = '-';
|
ui.mesh.points.innerText = '-';
|
||||||
ui.mesh.faces.innerText = '-';
|
ui.mesh.faces.innerText = '-';
|
||||||
}
|
}
|
||||||
|
ui.mesh.name.innerText = selection.widgets(false).length;
|
||||||
|
|
||||||
if (extruders) {
|
if (extruders) {
|
||||||
for (let i = 0; i < extruders.length; i++) {
|
for (let i = 0; i < extruders.length; i++) {
|
||||||
|
|
@ -867,6 +870,7 @@ function fitDeviceToWidgets() {
|
||||||
const platform = api.platform = {
|
const platform = api.platform = {
|
||||||
fit: fitDeviceToWidgets,
|
fit: fitDeviceToWidgets,
|
||||||
add: platformAdd,
|
add: platformAdd,
|
||||||
|
changed: platformChanged,
|
||||||
delete: platformDelete,
|
delete: platformDelete,
|
||||||
layout: platformLayout,
|
layout: platformLayout,
|
||||||
group: platformGroup,
|
group: platformGroup,
|
||||||
|
|
|
||||||
|
|
@ -24,12 +24,18 @@ function for_groups(fn) {
|
||||||
function for_widgets(fn, noauto) {
|
function for_widgets(fn, noauto) {
|
||||||
let m = selectedMeshes;
|
let m = selectedMeshes;
|
||||||
let w = api.widgets.all();
|
let w = api.widgets.all();
|
||||||
if (m.length === 0 && w.length === 1) {
|
if (m.length === 0 && w.length) {
|
||||||
m = noauto ? [] : [ w[0].mesh ];
|
m = noauto ? [] : w.map(w => w.mesh);
|
||||||
}
|
}
|
||||||
m.slice().forEach(mesh => { fn(mesh.widget) });
|
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) {
|
function for_meshes(fn) {
|
||||||
selectedMeshes.slice().forEach(mesh => { fn(mesh) });
|
selectedMeshes.slice().forEach(mesh => { fn(mesh) });
|
||||||
}
|
}
|
||||||
|
|
@ -276,6 +282,7 @@ const selection = api.selection = {
|
||||||
duplicate,
|
duplicate,
|
||||||
for_groups,
|
for_groups,
|
||||||
for_meshes,
|
for_meshes,
|
||||||
|
for_status,
|
||||||
for_widgets,
|
for_widgets,
|
||||||
update_bounds,
|
update_bounds,
|
||||||
update_info,
|
update_info,
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,6 @@ function startIt() {
|
||||||
console.log(`${opName} cannot pre-empt hover`);
|
console.log(`${opName} cannot pre-empt hover`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$('lay-flat').classList.add('selected');
|
|
||||||
api.feature.hover = true;
|
api.feature.hover = true;
|
||||||
enabled = true;
|
enabled = true;
|
||||||
alert = api.show.alert(`[ESC] to end ${opName}`, 600000);
|
alert = api.show.alert(`[ESC] to end ${opName}`, 600000);
|
||||||
|
|
@ -74,7 +73,6 @@ function startIt() {
|
||||||
function endIt() {
|
function endIt() {
|
||||||
if (enabled) {
|
if (enabled) {
|
||||||
api.hide.alert(alert);
|
api.hide.alert(alert);
|
||||||
$('lay-flat').classList.remove('selected');
|
|
||||||
api.feature.hover = false;
|
api.feature.hover = false;
|
||||||
enabled = false;
|
enabled = false;
|
||||||
alert = undefined;
|
alert = undefined;
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,6 @@ class Widget {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const widget = this;
|
const widget = this;
|
||||||
// console.log({ saveState: widget.id });
|
|
||||||
index().put('ws-save-'+this.id, {
|
index().put('ws-save-'+this.id, {
|
||||||
geo: widget.getGeoVertices({ unroll: false }).slice(),
|
geo: widget.getGeoVertices({ unroll: false }).slice(),
|
||||||
track: widget.track,
|
track: widget.track,
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,20 @@ function annotate(id) {
|
||||||
return (w.anno = w.anno || {});
|
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) {
|
function replace(vertices) {
|
||||||
let widgets = api.selection.widgets(true);
|
let widgets = api.selection.widgets(true);
|
||||||
if (!widgets.length) {
|
if (!widgets.length) {
|
||||||
|
|
@ -82,6 +96,7 @@ const widgets = api.widgets = {
|
||||||
new: newWidget,
|
new: newWidget,
|
||||||
map,
|
map,
|
||||||
meshes,
|
meshes,
|
||||||
|
rename,
|
||||||
replace,
|
replace,
|
||||||
opacity,
|
opacity,
|
||||||
annotate,
|
annotate,
|
||||||
|
|
|
||||||
|
|
@ -231,12 +231,16 @@ th, tr, td, label {
|
||||||
border-top: 1px solid #555;
|
border-top: 1px solid #555;
|
||||||
border-bottom: 1px solid #555;
|
border-bottom: 1px solid #555;
|
||||||
}
|
}
|
||||||
.dark.dark #mode-info label {
|
.dark #mesh-info label,
|
||||||
|
.dark #mode-info label
|
||||||
|
{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #888;
|
border-color: #888;
|
||||||
background-color: var(--blue-0);
|
background-color: var(--blue-0);
|
||||||
}
|
}
|
||||||
.dark #mode-info span {
|
.dark #mesh-info span,
|
||||||
|
.dark #mode-info span
|
||||||
|
{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #888;
|
border-color: #888;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
|
@ -651,11 +655,6 @@ th, tr, td, label {
|
||||||
.center {
|
.center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.middle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.t-just {
|
.t-just {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
@ -706,15 +705,23 @@ th, tr, td, label {
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
#container canvas {
|
#container canvas {
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chonk {
|
.chonk {
|
||||||
|
|
@ -745,7 +752,7 @@ th, tr, td, label {
|
||||||
#mode-info > div {
|
#mode-info > div {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
}
|
||||||
#mode-info label {
|
#mode-info label, #mesh-info label {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
align-self: right;
|
align-self: right;
|
||||||
|
|
@ -760,7 +767,7 @@ th, tr, td, label {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-bottom: 1px solid var(--blue-3);
|
border-bottom: 1px solid var(--blue-3);
|
||||||
}
|
}
|
||||||
#mode-info span {
|
#mode-info span, #mesh-info span {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
margin: 0 5px 0 0;
|
margin: 0 5px 0 0;
|
||||||
padding: 3px 5px 3px 5px;
|
padding: 3px 5px 3px 5px;
|
||||||
|
|
@ -1034,30 +1041,36 @@ th, tr, td, label {
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
}
|
}
|
||||||
#render-tools > span:hover .pop {
|
#render-tools > span:not(:hover) .pop {
|
||||||
display: grid;
|
display: none;
|
||||||
}
|
}
|
||||||
/** selection rotation */
|
/** selection rotation */
|
||||||
#ft-rotate {
|
#ft-rotate {
|
||||||
grid-gap: 2px;
|
gap: 2px;
|
||||||
grid-template-rows: auto auto auto 1fr;
|
grid-template-rows: auto auto auto 1fr;
|
||||||
grid-template-columns: auto auto auto auto;
|
grid-template-columns: auto auto auto auto;
|
||||||
}
|
}
|
||||||
|
#ft-rotate label {
|
||||||
|
padding: 0 5px 0 5px;
|
||||||
|
}
|
||||||
#ft-rotate label,
|
#ft-rotate label,
|
||||||
#ft-rotate svg
|
#ft-rotate svg,
|
||||||
|
#fr-rotate div
|
||||||
{
|
{
|
||||||
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
#ft-rotate svg {
|
#ft-rotate svg {
|
||||||
|
padding: 2px;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
padding: 1px 15px 1px 15px;
|
aspect-ratio: 2/1;
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
#ft-rotate > div:hover > svg {
|
#ft-rotate > div:hover > svg {
|
||||||
background-color: var(--main-color);
|
background-color: var(--main-color);
|
||||||
|
|
@ -1069,26 +1082,50 @@ th, tr, td, label {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
#ft-rotate .buttons {
|
#ft-rotate .buttons {
|
||||||
grid-column: 1/4;
|
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
min-width: 150px;
|
grid-column: 1/4;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
#ft-rotate button {
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
/** selection scaling */
|
/** selection scaling */
|
||||||
#ft-scale {
|
#ft-scale {
|
||||||
grid-gap: 2px;
|
gap: 3px;
|
||||||
grid-template-rows: auto auto auto 1fr;
|
grid-template-rows: auto auto auto 1fr;
|
||||||
grid-template-columns: auto auto auto 1fr;
|
grid-template-columns: auto auto auto 1fr;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
#ft-scale label {
|
#ft-scale > div {
|
||||||
text-align: center;
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
#ft-scale > input {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#ft-scale > div > label {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
#ft-scale button {
|
#ft-scale > div > input {
|
||||||
grid-column: 1/4;
|
position: absolute;
|
||||||
margin-left: 0;
|
right: 0;
|
||||||
margin-right: 0;
|
}
|
||||||
|
#ft-scale .buttons {
|
||||||
|
grid-column: 1/4 !important;
|
||||||
}
|
}
|
||||||
/** selection mesh actions */
|
/** 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 {
|
#ft-mesh label {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
@ -1096,18 +1133,22 @@ th, tr, td, label {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
#ft-mesh {
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
#mesh-info {
|
#mesh-info {
|
||||||
grid-gap: 2px;
|
margin: 2px 1px 1px 1px;
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
}
|
}
|
||||||
#lock_x, #lock_y, #lock_z {
|
#mesh-info label, #mesh-info span {
|
||||||
position: absolute;
|
align-self: unset !important;
|
||||||
right: 2px;
|
margin: 0;
|
||||||
top: 7px;
|
}
|
||||||
|
#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 {
|
#lay-flat.selected {
|
||||||
background-color: var(--main-color);
|
background-color: var(--main-color);
|
||||||
|
|
@ -1965,7 +2006,7 @@ th, tr, td, label {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 57px;
|
top: 90px;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -219,15 +219,15 @@
|
||||||
<div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>
|
<div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>
|
||||||
<label>X</label>
|
<label>X</label>
|
||||||
<div id="rot_x_gt"><i class="fas fa-chevron-right"></i></div>
|
<div id="rot_x_gt"><i class="fas fa-chevron-right"></i></div>
|
||||||
<input id="rot_x" class="value center" size="6" value="0">
|
<input id="rot_x" class="value center" size="6" value="5">
|
||||||
<div id="rot_y_lt"><i class="fas fa-chevron-left"></i></div>
|
<div id="rot_y_lt"><i class="fas fa-chevron-left"></i></div>
|
||||||
<label>Y</label>
|
<label>Y</label>
|
||||||
<div id="rot_y_gt"><i class="fas fa-chevron-right"></i></div>
|
<div id="rot_y_gt"><i class="fas fa-chevron-right"></i></div>
|
||||||
<input id="rot_y" class="value center" size="6" value="0">
|
<input id="rot_y" class="value center" size="6" value="5">
|
||||||
<div id="rot_z_lt"><i class="fas fa-chevron-left"></i></div>
|
<div id="rot_z_lt"><i class="fas fa-chevron-left"></i></div>
|
||||||
<label>Z</label>
|
<label>Z</label>
|
||||||
<div id="rot_z_gt"><i class="fas fa-chevron-right"></i></div>
|
<div id="rot_z_gt"><i class="fas fa-chevron-right"></i></div>
|
||||||
<input id="rot_z" class="value center" size="6" value="0">
|
<input id="rot_z" class="value center" size="6" value="5">
|
||||||
<div class="buttons f-row">
|
<div class="buttons f-row">
|
||||||
<button id="unrotate" class="grow" lk="reset">reset</button>
|
<button id="unrotate" class="grow" lk="reset">reset</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -235,34 +235,48 @@
|
||||||
</span>
|
</span>
|
||||||
<span id="tool-scale"><i class="fas fa-expand" title="scale selection"></i>
|
<span id="tool-scale"><i class="fas fa-expand" title="scale selection"></i>
|
||||||
<div id="ft-scale" class="grid pop">
|
<div id="ft-scale" class="grid pop">
|
||||||
<div><label class="middle">X</label><input id="lock_x" type="checkbox" checked></div>
|
<div><label>X</label><input id="lock_x" type="checkbox" checked></div>
|
||||||
<div><label class="middle">Y</label><input id="lock_y" type="checkbox" checked></div>
|
<div><label>Y</label><input id="lock_y" type="checkbox" checked></div>
|
||||||
<div><label class="middle">Z</label><input id="lock_z" type="checkbox" checked></div>
|
<div><label>Z</label><input id="lock_z" type="checkbox" checked></div>
|
||||||
<div><label id="lab-axis" lk="axis">axis</label></div>
|
<label id="lab-axis" lk="axis">axis</label>
|
||||||
<div><input id="size_x" size="8" class="value"></div>
|
<input id="size_x" size="8" class="value">
|
||||||
<div><input id="size_y" size="8" class="value"></div>
|
<input id="size_y" size="8" class="value">
|
||||||
<div><input id="size_z" size="8" class="value"></div>
|
<input id="size_z" size="8" class="value">
|
||||||
<div><label id="lab-size" lk="size">size</label></div>
|
<label id="lab-size" lk="size">size</label>
|
||||||
<div><input id="scale_x" size="8" class="value" value="1"></div>
|
<input id="scale_x" size="8" class="value" value="1">
|
||||||
<div><input id="scale_y" size="8" class="value" value="1"></div>
|
<input id="scale_y" size="8" class="value" value="1">
|
||||||
<div><input id="scale_z" size="8" class="value" value="1"></div>
|
<input id="scale_z" size="8" class="value" value="1">
|
||||||
<div><label id="lab-scale" lk="scale">scale</label></div>
|
<label id="lab-scale" lk="scale">scale</label>
|
||||||
<button id="scale-reset" class="gr4">reset</button>
|
<div class="buttons f-row">
|
||||||
|
<button id="scale-reset" class="grow j-center">reset</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span id="tool-mesh"><i class="fas fa-dice-d20" title="selected mesh tool"></i>
|
<span id="tool-mesh"><i class="fas fa-dice-d20" title="selected mesh tool"></i>
|
||||||
<div id="ft-mesh" class="grow f-col pop">
|
<div id="ft-mesh" class="grow f-col pop">
|
||||||
<div id="mesh-info" class="grid">
|
<div id="ft-mesh-btn">
|
||||||
<label>object:</label>
|
<div><button id="mesh-enable" lkx="rc_swap">enable</button></div>
|
||||||
<span id="mesh-name" class="value">[0]</span>
|
<div><button id="mesh-disable" lkx="rc_swap">disable</button></div>
|
||||||
<label>points:</label>
|
<div><button id="mesh-rename" lkx="rc_swap">rename</button></div>
|
||||||
<span id="mesh-points" class="value">-</span>
|
<div><button id="mesh-swap" lkx="rc_swap">replace</button></div>
|
||||||
<label>faces:</label>
|
<div><button id="mesh-export-obj" lk="rc_xobj">export OBJ</button></div>
|
||||||
<span id="mesh-faces" class="value">-</span>
|
<div><button id="mesh-export-stl" lk="rc_xstl">export STL</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="set-sep"></div>
|
||||||
|
<div id="mesh-info" class="f-row gap3">
|
||||||
|
<div class="em1">
|
||||||
|
<label>selected</label>
|
||||||
|
<span id="mesh-name" class="value">[0]</span>
|
||||||
|
</div>
|
||||||
|
<div class="em3">
|
||||||
|
<label>faces</label>
|
||||||
|
<span id="mesh-faces" class="value">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="em3">
|
||||||
|
<label>points</label>
|
||||||
|
<span id="mesh-points" class="value">-</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button id="mesh-export-obj" lk="rc_xobj">export OBJ</button>
|
|
||||||
<button id="mesh-export-stl" lk="rc_xstl">export STL</button>
|
|
||||||
<button id="mesh-swap" lk="rc_swap">replace vertices</button>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span id="context-mirror" xlk="rc_mirr"><i class="fas fa-arrows-left-right-to-line" title="mirror selection"></i></span>
|
<span id="context-mirror" xlk="rc_mirr"><i class="fas fa-arrows-left-right-to-line" title="mirror selection"></i></span>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue