From 3dbd1e85a86e663d8fa5e3476330708de6759516 Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Fri, 31 Dec 2021 10:44:21 -0500
Subject: [PATCH] fix model/group center (inverted y). add html dom builder

---
 src/mesh/group.js |   5 +-
 src/mesh/model.js |   5 +-
 src/moto/webui.js | 129 +++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 123 insertions(+), 16 deletions(-)

diff --git a/src/mesh/group.js b/src/mesh/group.js
index 7fa54c5d..99abc9cb 100644
--- a/src/mesh/group.js
+++ b/src/mesh/group.js
@@ -32,16 +32,19 @@ mesh.group = class MeshGroup {
     floor() {
         let b = this.bounds();
         this.move(0, 0, -b.min.z);
+        return this;
     }
 
     centerXY() {
         let b = this.bounds();
-        this.move(-b.center.x, -b.center.y, 0);
+        this.move(-b.center.x, b.center.y, 0);
+        return this;
     }
 
     move(x = 0, y = 0, z = 0) {
         let pos = this.position();
         pos.set(pos.x + x, pos.y + y, pos.z + z);
+        return this;
     }
 
     position() {
diff --git a/src/mesh/model.js b/src/mesh/model.js
index b649f98c..200b25f9 100644
--- a/src/mesh/model.js
+++ b/src/mesh/model.js
@@ -45,16 +45,19 @@ mesh.model = class MeshModel {
     floor() {
         let b = this.bounds();
         this.move(0, 0, -b.min.z);
+        return this;
     }
 
     centerXY() {
         let b = this.bounds();
-        this.move(-b.center.x, -b.center.y, 0);
+        this.move(-b.center.x, b.center.y, 0);
+        return this;
     }
 
     move(x = 0, y = 0, z = 0) {
         let pos = this.position();
         pos.set(pos.x + x, pos.y + y, pos.z + z);
+        return this;
     }
 
     position() {
diff --git a/src/moto/webui.js b/src/moto/webui.js
index 548f380e..41e7790c 100644
--- a/src/moto/webui.js
+++ b/src/moto/webui.js
@@ -2,22 +2,123 @@
 
 "use strict";
 
-gapp.register('moto.webui');
+(function() {
 
-// some ui helpers that need to go into a ui class
-function $(id) {
-    return document.getElementById(id);
+gapp.register('moto.webui', [
+    "moto.license", // dep: moto.license
+    "add.array",    // dep: add.array
+]);
+
+let moto = self.moto = self.moto || {};
+if (moto.webui) return;
+
+// window ui helpers
+Object.assign(self, {
+    $: (id) => {
+        return document.getElementById(id);
+    },
+
+    $d: (id, v) => {
+        $(id).style.display = v;
+    },
+
+    $h: (id, h) => {
+        $(id).innerHTML = h;
+    },
+
+    estop: (evt) => {
+        evt.stopPropagation();
+        evt.preventDefault();
+    }
+});
+
+let nextid = 1;
+
+function build(data, context) {
+    if (Array.isArray(data)) {
+        let html = [];
+        for (let d of data) {
+            html.appendAll(build(d, context));
+        }
+        return html;
+    }
+    let { type, attr, innr } = data;
+    let elid;
+    let html = [];
+    let text
+    html.push(`<${type}`);
+    let func = {};
+    for (let [key, val] of Object.entries(attr || {})) {
+        let tov = typeof val;
+        if (key === '_') {
+            text = val;
+        } else if (key === 'id') {
+            elid = val;
+        } else if (tov === 'function') {
+            func[key] = val;
+            elid = elid || `_${nextid++}`;
+        } else if (tov === 'object') {
+            html.push(` ${key}="${val.join(' ')}"`);
+        } else {
+            html.push(` ${key}="${val}"`);
+        }
+    }
+    if (elid) {
+        html.push(` id="${elid}"`);
+        context.push({elid, func});
+    }
+    html.push('>');
+    if (innr) {
+        let snips = [];
+        if (innr.length) {
+            for (let i of innr) {
+                snips.push(build(i, context));
+            }
+        } else {
+            snips.push(build(i, context));
+        }
+        html.appendAll(snips.flat());
+    }
+    if (text) {
+        html.push(text);
+    }
+    html.push(`</${type}>`);
+    return html;
 }
 
-function $d(id, v) {
-    $(id).style.display = v;
-}
+// core html builder funtions
+let h = self.h = moto.webui = {
+    bind: (el, data, opt = {}) => {
+        let ctx = [];
+        let html = build(data, ctx).join('');
+        if (opt.append) {
+            el.innerHTML += html;
+        } else {
+            el.innerHTML = html;
+        }
+        for (let bind of ctx) {
+            let { elid, func } = bind;
+            let et = $(elid);
+            for (let [name, fn] of Object.entries(func)) {
+                et[name] = fn;
+            }
+        }
+    },
 
-function $h(id, h) {
-    $(id).innerHTML = h;
-}
+    el: (type, attr, innr) => {
+        if (Array.isArray(attr)) {
+            innr = attr;
+            attr = {};
+        }
+        return { type, attr, innr };
+    }
+};
 
-function estop(evt) {
-    evt.stopPropagation();
-    evt.preventDefault();
-}
+// add common element types
+["a", "div", "span", "label", "input", "button"].forEach(type => {
+    h[type] = (attr, innr) => {
+        return h.el(type, attr, innr);
+    }
+});
+
+})();