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 { 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);
|
||||||
|
|
|
||||||
|
|
@ -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 }
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 **/
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue