add export dialog

src/mesh/api.js

@@ -19,6 +19,7 @@ let mesh = self.mesh = self.mesh || {};
 if (mesh.api) return;
 
 let space = moto.Space;
+let worker = moto.client.fn;
 let groups = [];
 let selected = [];
 
@@ -224,13 +225,31 @@ let file = {
         if (recs.length === 0) {
             return api.log.emit(`no models to export`);
         }
-        api.log.emit(`exporting ${recs.length} model(s)`);
-        moto.client.fn.file_export({
-            recs, format: "obj"
-        }).then(data => {
-            if (data.length) {
-                util.download(data, "export.obj");
+        function doit() {
+            api.log.emit(`exporting ${recs.length} model(s)`);
+            let file = api.modal.bound.filename.value || "export.obj";
+            if (file.toLowerCase().indexOf(".obj") < 0) {
+                file = file + ".obj";
             }
+            worker.file_export({
+                recs, format: "obj"
+            }).then(data => {
+                if (data.length) {
+                    util.download(data, file);
+                }
+            }).finally( api.modal.hide );
+        }
+        api.modal.dialog({
+            title: `export ${recs.length} model(s)`,
+            body: [ h.div({ class: "export" }, [
+                h.div([
+                    h.div("filename"),
+                    h.input({ id: "filename", value: "mesh_export" })
+                ]),
+                h.div([
+                    h.button({ _: "download", onclick: doit })
+                ])
+            ]) ]
         });
     },
 };
@@ -243,7 +262,7 @@ let tool = {
     repair() {
         api.log.emit('repairing mesh(es)...').pin();
         for (let m of selection.models()) {
-            moto.client.fn.model_heal(m.id).then(data => {
+            worker.model_heal(m.id).then(data => {
                 if (data) {
                     m.reload(
                         data.vertices,

src/mesh/build.js

@@ -31,13 +31,17 @@ util.download = (data, filename = "mesh-data") => {
 // add modal dialog functions to api
 let modal = api.modal = {
     show(title, contents) {
-        h.bind($('modal'), contents);
+        if (this.showing) {
+            throw `modal conflict showing "${title}"`;
+        }
+        let bound = h.bind($('modal'), contents);
         $('modal_title_text').innerText = title;
         $('modal_page').style.display = 'flex';
         $('modal_frame').style.display = 'flex';
         $('spinner').style.display = 'none';
         modal.info = { title, contents, showing: true };
         broker.publish('modal_show');
+        return bound;
     },
 
     hide() {
@@ -45,6 +49,10 @@ let modal = api.modal = {
         $('modal_page').style.display = 'none';
         modal.info.showing = false;
         broker.publish('modal_hide');
+        if (modal._dialog) {
+            modal._dialog.resolve(modal._dialog.bound);
+            modal._dialog = undefined;
+        }
     },
 
     info: {
@@ -74,6 +82,26 @@ let modal = api.modal = {
         } else {
             modal.hide();
         }
+    },
+
+    dialog(opt = {}) {
+        let { title, body } = opt;
+        let contents = [];
+        if (typeof body === 'string') {
+            contents.push(h.div(body))
+        } else if (Array.isArray(body)) {
+            contents.appendAll(body);
+        } else {
+            throw "invalid dialog contents";
+        }
+        return new Promise((resolve, reject) => {
+            let bound = this.show(title, contents);
+            modal._dialog = { resolve, reject, bound };
+        });
+    },
+
+    get bound() {
+        return modal._dialog ? modal._dialog.bound : undefined;
     }
 };
 

web/mesh/index.css

@@ -171,6 +171,10 @@ button:hover {
     color: #888;
 }
 
+.export, .export div {
+    gap: 4px;
+}
+
 /** modal dialogs **/
 
 #modal_page {
@@ -195,10 +199,12 @@ button:hover {
 }
 
 #modal_frame > div {
-    padding: 3px; /* compensate for removing padding above */
+    padding: 5px; /* compensate for removing padding above */
 }
 
 #modal_title {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
     border-bottom: 1px solid gray;
     background-color: #ccc;
 }