add visibility control buttons for models
This commit is contained in:
parent
1d7d0064c0
commit
7278705096
3 changed files with 54 additions and 22 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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 **/
|
||||
|
|
|
|||
Loading…
Reference in a new issue