From a5cf4a7a875681856715eff716fa0930c80ee02e Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Mon, 3 Jan 2022 10:50:59 -0500
Subject: [PATCH] refactor ui builder to use util.defer

---
 src/main/mesh.js | 68 ++++++++++++++++++++++--------------------------
 src/mesh/api.js  |  7 +++++
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/main/mesh.js b/src/main/mesh.js
index 6ad5c869..50b84eba 100644
--- a/src/main/mesh.js
+++ b/src/main/mesh.js
@@ -62,50 +62,44 @@ function ui_build() {
     let { grouplist } = bound;
     let api = mesh.api;
 
-    let maker = {
-        update() {
-            clearTimeout(maker.timer);
-            maker.timer = setTimeout(maker.do, 10);
-        },
-        do() {
-            let groups = api.group.list()
-                // map groups to divs
-                .map(g => h.div([
-                    h.button({
-                        _: `group`,
-                        title: g.id,
-                        class: [
-                            "group",
-                            api.selection.contains(g) ? 'selected' : undefined
-                        ],
-                        onclick() { api.selection.toggle(g); }
-                    }),
-                    h.div({ class: "vsep" }),
-                    h.div({ class: "models"},
-                        // map models to buttons
-                        g.models.map(m => h.button({
-                            _: m.file || m.id,
-                            class: api.selection.contains(m) ? [ 'selected' ] : [],
-                            onclick() { api.selection.toggle(m); }
-                        }))
-                    )
-                ]));
-            h.bind(grouplist, groups);
-        }
-    };
+    function build() {
+        // 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
+                    ],
+                    onclick() { api.selection.toggle(g); }
+                }),
+                h.div({ class: "vsep" }),
+                h.div({ class: "models"},
+                    // map models to buttons
+                    g.models.map(m => h.button({
+                        _: m.file || m.id,
+                        class: api.selection.contains(m) ? [ 'selected' ] : [],
+                        onclick() { api.selection.toggle(m); }
+                    }))
+                )
+            ]));
+        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,
-        group_add: maker.update,
-        model_remove: maker.update,
-        group_remove: maker.update,
-        selection_update: maker.update,
+        model_add: deferred,
+        group_add: deferred,
+        model_remove: deferred,
+        group_remove: deferred,
+        selection_update: deferred,
     })
 }
 
diff --git a/src/mesh/api.js b/src/mesh/api.js
index 2bf89ef5..e4310b2a 100644
--- a/src/mesh/api.js
+++ b/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) {