add pinned log spinner

src/main/mesh.js

@@ -317,7 +317,7 @@ function space_init(data) {
                     if (shiftKey) return api.tool.regroup();
                     return api.grid();
                 case 'KeyL':
-                    return api.log.toggle();
+                    return api.log.toggle({ spinner: false });
                 case 'KeyS':
                     if (shiftKey) return selection.visible({toggle:true});
                     return call.edit_split();

src/mesh/build.js

@@ -145,17 +145,21 @@ const log = api.log = {
         return log;
     },
 
-    toggle() {
+    toggle(opt) {
-        return log.pinned ? log.unpin() && log.hide() : log.pin();
+        return log.pinned ? log.unpin() && log.hide() : log.pin(opt);
     },
 
-    pin() {
+    pin(opt = { spinner: true }) {
         log.pinned = true;
+        if (opt.spinner) {
+            $('pinner').style.display = 'inline-block';
+        }
         return log.show();
     },
 
     unpin() {
         log.pinned = false;
+        $('pinner').style.display = 'none';
         return log.show();
     },
 

src/mesh/model.js

@@ -592,7 +592,7 @@ mesh.model = class MeshModel extends mesh.object {
         let { a, b, c } = face;
         let timer = setTimeout(() => {
             timer = undefined;
-            mesh.api.log.emit("matching surface...");
+            mesh.api.log.emit("matching surface").pin();
         }, 500);
         worker.model_select({
             id: this.id, x, y:-z, z:y, a, b, c, matrix: this.matrix, radians
@@ -605,6 +605,10 @@ mesh.model = class MeshModel extends mesh.object {
             // this.toggleSelectedVertices(verts);
             this.selectFaces(faces, action);
             this.updateSelections();
+            if (!timer) {
+                mesh.api.log.emit("surface match complete").unpin();
+                moto.space.refresh();
+            }
         });
     }
 

web/mesh/index.css

@@ -587,3 +587,21 @@ button.selected:hover {
     color: #000;
     background-color: rgba(0,128,255,0.5) !important;
 }
+
+#pinner {
+    z-index: 5000;
+    display: none;
+    position: absolute;
+    left: 5px;
+    bottom: 5px;
+    width: 25px;
+    height: 25px;
+    border: 6px solid rgba(0,0,0,0.1);
+    border-radius: 50%;
+    border-top-color: rgba(0,0,0,0.5);
+    animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}

web/mesh/index.html

@@ -28,6 +28,7 @@
     </div>
     <div id="top-sep"></div>
     <div id="app-body"></div>
+    <div id="pinner"></div>
 </div>
 </body>
 </html>