add visibility control buttons for models

This commit is contained in:
Stewart Allen 2022-04-19 20:56:36 -04:00
commit 7278705096
3 changed files with 54 additions and 22 deletions

View file

@ -11,6 +11,9 @@ const { broker } = gapp;
const { mesh } = root;
const { api, util } = mesh;
const eye_open = FontAwesome.icon({ prefix: "fas", iconName: "eye" }).html[0];
const eye_closed = FontAwesome.icon({ prefix: "fas", iconName: "eye-slash" }).html[0];
let call = broker.send;
let rad = 180 / Math.PI;
let und = undefined;
@ -361,7 +364,6 @@ function ui_build() {
]),
h.div([
h.div({ _: "view", class: "head" }),
h.button({ _: 'visible', onclick() { selection.visible({ toggle: true }) } }),
h.button({ _: 'bounds', onclick() { selection.boundsBox({ toggle: true }) } }),
h.button({ _: 'gridlines', onclick() { api.grid() } }),
h.button({ _: 'normals', onclick() { api.normals() } }),
@ -436,18 +438,24 @@ function ui_build() {
h.div({ class: "vsep" }),
h.div({ class: "models"},
// map models to buttons
g.models.map(m => h.button({ _: m.file || m.id,
class: [
selHas(m) ? 'selected' : undefined,
m.visible() ? undefined : 'hidden'
],
onclick(e) {
let sel = selection.list();
e.shiftKey || (sel.length === 1 && m === sel[0]) ?
selection.toggle(m) :
selection.set([m])
}
}))
g.models.map(m => [
h.button({ _: m.file || m.id,
class: [ selHas(m) ? 'selected' : undefined ],
onclick(e) {
let sel = selection.list();
e.shiftKey || (sel.length === 1 && m === sel[0]) ?
selection.toggle(m) :
selection.set([m])
}
}),
h.div({
class: [ 'square' ],
onclick(e) {
m.visible({ toggle: true });
update_selector();
}
}, [ h.raw(m.visible() ? eye_open : eye_closed) ])
])
)
]));
h.bind(grouplist, groups);

View file

@ -16,7 +16,10 @@ function build(data, context) {
}
return html;
}
let { type, attr, innr } = data;
let { type, attr, innr, raw } = data;
if (raw) {
return [ raw ];
}
// auto text content
if (typeof attr === 'string') {
attr = { _: attr };
@ -93,6 +96,10 @@ let h = exports({
attr = {};
}
return { type, attr, innr };
},
raw: ( text ) => {
return { raw: text }
}
});

View file

@ -394,7 +394,7 @@ button.selected {
}
button.selected:hover {
background-color: rgba(0,255,0,1);
background-color: rgba(0,255,0,0.8);
}
.dark .head {
@ -510,21 +510,38 @@ button.selected:hover {
}
#grouplist .models {
gap: 2px;
display: grid;
grid-template-columns: auto auto;
max-height: 200px;
overflow-y: auto;
gap: 2px;
}
#grouplist .models .square {
align-items: center;
justify-content: center;
}
.dark #grouplist .models .square > svg {
color: #333;
}
#grouplist .models .square > svg {
aspect-ratio: 1;
color: #666;
}
#grouplist .models .square > svg:hover {
color: black;
}
#grouplist .models > div {
flex-direction: row;
}
#grouplist .models button {
text-align: left;
}
#grouplist .hidden {
background-color: rgba(0,0,255,0.2);
}
#grouplist .hidden:hover {
background-color: rgba(0,0,255,0.1);
margin-right: 2px;
}
/** selection info bottom/right of workspace **/