diff --git a/src/main/mesh.js b/src/main/mesh.js index baa36f5a..0d62db51 100644 --- a/src/main/mesh.js +++ b/src/main/mesh.js @@ -105,22 +105,22 @@ function ui_build() { $h('app-vers', gapp.version); let bound = h.bind($('app-body'), [ - h.div({id: 'grouplist'}) + h.div({id: 'grouplist'}), + h.div({id: 'selectlist'}) ]); let { grouplist } = bound; let api = mesh.api; function build() { + let selHas = api.selection.contains; // map groups to divs let groups = api.group.list() .map(g => h.div([ h.button({ _: `group`, title: g.id, - class: [ "group", - api.selection.contains(g) ? 'selected' : undefined - ], + class: [ "group", selHas(g) ? 'selected' : undefined ], onclick() { api.selection.toggle(g); } }), h.div({ class: "vsep" }), @@ -128,12 +128,31 @@ function ui_build() { // map models to buttons g.models.map(m => h.button({ _: m.file || m.id, - class: api.selection.contains(m) ? [ 'selected' ] : [], + class: selHas(m) ? [ 'selected' ] : [], onclick() { api.selection.toggle(m); } })) ) ])); h.bind(grouplist, groups); + // map selection to divs + let sel_grp = api.selection.groups() + .map(g => h.div([ + h.button({ + _: `group`, + title: g.id, + class: [ "group" ], + }), + h.div({ class: "grid"}, [ + h.div({ _: "X" }), + h.div({ _: "Y" }), + h.div({ _: "Z" }), + h.div({ _: "pos" }), + h.div({ _: "rot" }), + h.label({ id: "gp-x" }), + ]) + ])); + let sel_mdl = api.selection.models(); + h.bind(selectlist, sel_grp); } // listen for api calls diff --git a/web/mesh/index.css b/web/mesh/index.css index 6c5afcdb..64ea553f 100644 --- a/web/mesh/index.css +++ b/web/mesh/index.css @@ -151,6 +151,8 @@ button:hover { background-color: rgba(200,200,200,1); } +/** for group/model buttons top/right of workspace */ + #grouplist { position: absolute; margin: 3px 3px 0 0; @@ -192,3 +194,19 @@ button:hover { margin: 2px 0 1px 0; border-bottom: 1px dashed gray; } + +/** for selection info bottom/right of workspace */ +#selectlist { + position: absolute; + margin: 0 3px 3px 0; + bottom: 0; + right: 0; +} + +#selectlist > div { + flex-direction: column; +} + +#selection .grid { + display: grid; +}