Add hotspot functionality

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-23 09:20:32 -07:00
parent 728ebf2e44
commit 36f8cbe04b
3 changed files with 128 additions and 9 deletions
--- a/modules/glmv.css
+++ b/modules/glmv.css
@@ -1,3 +1,58 @@
-.glmv-viewer {
-    width: 100%;
-}
+.Hotspot{
+    background: #00000080;
+    border-radius: 100%;
+    border: #FFFFFF 1px solid;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+    text-align: center;
+    transition: opacity 0.3s;
+    width: 24px;
+  }
+  
+  .HotspotAnnotation{
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
+    color: rgba(0, 0, 0, 0.8);
+    display: block;
+    font-family: Futura, "Helvetica Neue", sans-serif;
+    left: calc(100% + 1em);
+    max-width: 128px;
+    opacity: 1;
+    overflow-wrap: break-word;
+    padding: 0.5em 1em;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: height 0.3s;
+    width: max-content;
+  }
+  
+  .HiddenAnnotation{
+      height: 0;
+      opacity: 0;
+  }
+  
+  .material-symbols-outlined.button-show-model{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      background: #00000080;
+      font-size: 50px;
+      color: white;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      transition: opacity 0.3s, display 0s;
+  }
+  
+  .button-show-model.button-used{
+      opacity: 0;
+      display: none;
+  }