Add hotspot enhancements and improed styles

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

modules/glmv.css

@@ -10,11 +10,18 @@
     box-sizing: border-box;
     color: #FFFFFF;
     cursor: pointer;
+    font-weight: bold;
+    font-size: 16px;
+    padding-top: 2px;
     height: 24px;
     position: relative;
     text-align: center;
     transition: opacity 0.3s;
     width: 24px;
+
+    & [hidden] {
+        display: none;
+    }
   }
   
   .HotspotAnnotation{
@@ -86,7 +93,7 @@
     justify-content: flex-start;
 
     &:hover {
-        width: 128px;
+        width: 160px;
 
         & .glmv-menu-image {
             transform: rotate(180deg);

modules/glmv.js

@@ -160,6 +160,17 @@ slideshowAnnotations = function(mView, slideDuration = 5000) {
     }
 }
 
+/**
+ * Toggle visibility of all annotations
+ * 
+ * @param {ModelViewer} mView 
+ */
+toggleAnnotations = function(mView) {
+    [...mView.querySelectorAll('button')].forEach( hs => {
+        hs.toggleAttribute('hidden')
+    })
+}
+
 /**
  * Prepare to drag a hotspot
  *