refactor ui builder to use util.defer

src/main/mesh.js

@@ -62,20 +62,14 @@ function ui_build() {
     let { grouplist } = bound;
     let api = mesh.api;
 
-    let maker = {
+    function build() {
-        update() {
-            clearTimeout(maker.timer);
-            maker.timer = setTimeout(maker.do, 10);
-        },
-        do() {
-            let groups = api.group.list()
         // map groups to divs
+        let groups = api.group.list()
             .map(g => h.div([
                 h.button({
                     _: `group`,
                     title: g.id,
-                        class: [
+                    class: [ "group",
-                            "group",
                         api.selection.contains(g) ? 'selected' : undefined
                     ],
                     onclick() { api.selection.toggle(g); }
@@ -92,20 +86,20 @@ function ui_build() {
             ]));
         h.bind(grouplist, groups);
     }
-    };
 
     function update(object, topic) {
         console.log({update: object, topic});
     }
 
     // listen for api calls
-    // todo: switch to util.defer(fn)
+    // create a deferred wrapper to merge multiple rapid events
+    let deferred = mesh.util.deferWrap(build);
     broker.listeners({
-        model_add: maker.update,
+        model_add: deferred,
-        group_add: maker.update,
+        group_add: deferred,
-        model_remove: maker.update,
+        model_remove: deferred,
-        group_remove: maker.update,
+        group_remove: deferred,
-        selection_update: maker.update,
+        selection_update: deferred,
     })
 }
 

src/mesh/api.js

@@ -282,6 +282,13 @@ let util = mesh.util = {
         deferFn.push(rec);
     },
 
+    // return a function wrapper which can be re-used
+    deferWrap(fn, time) {
+        return function() {
+            util.defer(fn, time);
+        }
+    },
+
     // @param object {THREE.Object3D | THREE.Object3D[] | MeshObject | MeshObject[]}
     // @returns bounds modified for moto.Space
     bounds(object) {