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

View file

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

View file

@ -394,7 +394,7 @@ button.selected {
} }
button.selected:hover { button.selected:hover {
background-color: rgba(0,255,0,1); background-color: rgba(0,255,0,0.8);
} }
.dark .head { .dark .head {
@ -510,21 +510,38 @@ button.selected:hover {
} }
#grouplist .models { #grouplist .models {
gap: 2px; display: grid;
grid-template-columns: auto auto;
max-height: 200px; max-height: 200px;
overflow-y: auto; 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 { #grouplist .models button {
text-align: left; text-align: left;
} margin-right: 2px;
#grouplist .hidden {
background-color: rgba(0,0,255,0.2);
}
#grouplist .hidden:hover {
background-color: rgba(0,0,255,0.1);
} }
/** selection info bottom/right of workspace **/ /** selection info bottom/right of workspace **/