add spinner

src/kiri-mode/laser/driver.js

@@ -272,6 +272,8 @@
             }
         });
 
+        let pack = true;
+
         // compute tile width / height
         output.forEach(function(layerout) {
             let min = {w:Infinity, h:Infinity}, max = {w:-Infinity, h:-Infinity}, p;
@@ -286,6 +288,7 @@
             layerout.w = max.w - min.w;
             layerout.h = max.h - min.h;
             // shift objects to top/left of w/h bounds
+            if (pack)
             layerout.forEach(function(out) {
                 p = out.point;
                 p.x -= min.w;
@@ -309,6 +312,7 @@
             p = new KIRI.Pack(dw, dh, process.outputTileSpacing).fit(c ,!sort);
         }
 
+        if (pack)
         for (i = 0; i < c.length; i++) {
             m = c[i];
             m.fit.x += m.w + p.pad;

src/mesh/api.js

@@ -228,6 +228,7 @@ let tool = {
     },
 
     repair() {
+        api.modal.spin(true, 250);
         for (let m of selection.models()) {
             moto.client.fn.model_heal(m.id).then(data => {
                 if (data) {
@@ -237,6 +238,7 @@ let tool = {
                         data.normals
                     );
                 }
+                api.modal.spin(false);
             });
         }
     }

src/mesh/build.js

@@ -18,17 +18,22 @@ broker.listeners({
     ui_build
 });
 
+let spin_timer;
+
 // add modal dialog functions to api
 let modal = mesh.api.modal = {
     show(title, contents) {
         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');
     },
 
     hide() {
+        clearTimeout(spin_timer);
         $('modal_page').style.display = 'none';
         modal.info.showing = false;
         broker.publish('modal_hide');
@@ -44,6 +49,23 @@ let modal = mesh.api.modal = {
 
     get showing() {
         return modal.info.showing;
+    },
+
+    spin(bool, delay) {
+        if (bool) {
+            if (delay) {
+                spin_timer = setTimeout(() => {
+                    modal.spin(true);
+                }, delay);
+                return;
+            }
+            $('modal_page').style.display = 'flex';
+            $('modal_frame').style.display = 'none';
+            $('spinner').style.display = 'block';
+            broker.publish('modal_show', 'spinner');
+        } else {
+            modal.hide();
+        }
     }
 };
 
@@ -68,7 +90,8 @@ function ui_build() {
                 h.div({ id: 'modal' }, [
                     h.div({ _: 'this is a modal test' })
                 ])
-            ])
+            ]),
+            h.div({ id: 'spinner', class: 'spin' })
         ]),
         // display and action areas
         h.div({ id: 'actions' }),

src/moto/webui.js

@@ -123,7 +123,7 @@ let h = self.h = moto.webui = {
 };
 
 // add common element types
-["a", "i", "div", "span", "label", "input", "button"].forEach(type => {
+["a", "i", "div", "span", "label", "input", "button", "svg"].forEach(type => {
     h[type] = (attr, innr) => {
         return h.el(type, attr, innr);
     }

web/mesh/index.css

@@ -175,13 +175,13 @@ button:hover {
 #modal_frame {
     background-color: white;
     flex-direction: column;
-    padding: 0 !important; // override common below
+    padding: 0 !important; /* override common below */
     z-index: 51;
     gap: 2px;
 }
 
 #modal_frame > div {
-    padding: 3px; // compensate for removing padding above
+    padding: 3px; /* compensate for removing padding above */
 }
 
 #modal_title {
@@ -202,7 +202,31 @@ button:hover {
     color: black;
 }
 
-#modal {
+/** spinner animation **/
+
+@keyframes spinner {
+    0% {
+        transform: translate3d(-50%, -50%, 0) rotate(0deg);
+    }
+    100% {
+        transform: translate3d(-50%, -50%, 0) rotate(360deg);
+    }
+}
+
+.spin::before {
+    position: absolute;
+    animation: 2.0s linear infinite spinner;
+    animation-play-state: inherit;
+    border: solid 10px #cfd0d1;
+    border-bottom-color: #1c87c9;
+    border-radius: 50%;
+    content: "";
+    height: 50px;
+    width: 50px;
+    top: 10%;
+    left: 10%;
+    transform: translate3d(-50%, -50%, 0);
+    will-change: transform;
 }
 
 /** common child look & feel */