add and bind file loading + api

src/main/mesh.js

@@ -110,16 +110,7 @@ function space_init(data) {
         'drop', (evt) => {
             estop(evt);
             platform.setColor(platcolor);
-            load.File.load([...evt.dataTransfer.files])
-                .then(data => {
-                    call.space_load(data);
-                })
-                .catch(error => {
-                    dbug.error(error);
-                })
-                .finally(() => {
-                    // hide spinner
-                });
+            call.load_files([...evt.dataTransfer.files]);
         },
         'dragover', evt => {
             estop(evt);
@@ -275,6 +266,20 @@ function space_init(data) {
     });
 }
 
+function load_files(files) {
+    // show spinner
+    load.File.load([...files])
+        .then(data => {
+            call.space_load(data);
+        })
+        .catch(error => {
+            dbug.error(error);
+        })
+        .finally(() => {
+            // hide spinner
+        });
+}
+
 // add object loader
 function space_load(data) {
     mesh.api.group.new(data.flat().map(el => new mesh.model(el)))
@@ -307,6 +312,7 @@ function space_debug() {
 
 // bind functions to topics
 broker.listeners({
+    load_files,
     space_init,
     space_load,
     space_debug,

src/mesh/api.js

@@ -211,6 +211,7 @@ let model = {
     }
 };
 
+// api is augmented in mesh.build
 let api = mesh.api = {
     clear() {
         for (let group of group.list()) {
@@ -245,6 +246,11 @@ let api = mesh.api = {
 
     model,
 
+    import() {
+        // binding created in mesh.build
+        $('import').click();
+    },
+
     objects() {
         // return model objects suitable for finding ray intersections
         return group.list().map(o => o.models).flat().map(o => o.object);

src/mesh/build.js

@@ -18,6 +18,7 @@ broker.listeners({
     ui_build
 });
 
+// add modal dialog functions to api
 let modal = mesh.api.modal = {
     show(title, contents) {
         h.bind($('modal'), contents);
@@ -81,10 +82,18 @@ function ui_build() {
     // create hotkey/action menu (top/left)
     h.bind(actions, [
         h.div([
-            h.button({ _: 'import' }),
+            // create and bind file loading elements
+            h.button({ _: 'import', onclick: api.import }, [
+                h.input({
+                    id: "import", type: "file", class: ["hide"], multiple: true,
+                    onchange(evt) { broker.send.load_files(evt.target.files) }
+                })
+            ]),
             h.button({ _: 'export' }),
             h.div({ class: "vsep" }),
             h.button({ _: 'analyze' }),
+            h.button({ _: 'repair' }),
+            h.div({ class: "vsep" }),
             h.button({ _: 'wireframe', onclick() { api.wireframe() } }),
         ]),
     ]);

src/moto/webui.js

@@ -80,7 +80,7 @@ function build(data, context) {
                 snips.push(build(i, context));
             }
         } else {
-            snips.push(build(i, context));
+            snips.push(build(innr, context));
         }
         html.appendAll(snips.flat());
     }

web/mesh/index.css

@@ -151,6 +151,12 @@ button:hover {
     background-color: rgba(200,200,200,1);
 }
 
+/** misc ui **/
+
+.hide {
+    display: none;
+}
+
 /** modal dialogs **/
 
 #modal_page {