feat(#48): ✨ Added hide/show button for saved positions

TDT4290-group-4 · Oct 29, 2025 · 9e1a69c · 9e1a69c
1 parent 500894b
commit 9e1a69c
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 31 deletions.
diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
@@ -7,6 +7,7 @@
 #btnTHUFilter {
   display: flex;
   width: 100%;
+  justify-content: center;
   margin: 6px 0 10px;
   padding: 10px 10px;
   font-size: 13px;

diff --git a/src/AnnotationControl/annotationPanel.css b/src/AnnotationControl/annotationPanel.css
@@ -27,8 +27,8 @@ img.button-icon[src$='/annotation.svg'] {
   padding: 8px;
   border-radius: 4px;
   border: 1px solid #404a50;
-  background: #2f383d;
-  color: #cfd5d8;
+  background: #636262;
+  color: #636262;
   font-family: inherit;
   font-size: 12px;
   line-height: 1.3;
@@ -44,10 +44,6 @@ img.button-icon[src$='/annotation.svg'] {
   margin-top: 6px;
 }
 
-.annotation-add-button {
-  margin: 10px 0;
-}
-
 .annotation-empty {
   opacity: 0.6;
   padding: 10px;
@@ -350,37 +346,64 @@ img.button-icon[src$='/annotation.svg'] {
   flex: 0 0 18px;
 }
 
+
+.pv-menu-list_annotations-panel{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+
 /* Add button */
 .annotation-add-button {
-  background: linear-gradient(180deg, #f6f6f6 0%, #e9e9e9 100%);
-  color: #222;
-  padding: 8px 16px;
-  min-width: 140px;
-  height: 38px;
   display: block;
-  margin: 12px auto;
-  border-radius: 6px;
+  justify-content: center;
+  width: 80%;
+  margin: 20px 0 10px;
+  padding: 10px 10px;
   font-size: 13px;
-  font-weight: 700;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
-  border: 1px solid #cfcfcf;
-  cursor: pointer;
-  text-align: center;
-}
-.annotation-add-button .add-label {
-  color: #222;
-  font-weight: 700;
+  font-weight: 500;
+  background-color: #636262;
+  color: #ffffff;
+  border: 1px solid #555;
+  border-radius: 4px;
+  cursor: pointer; 
+  transition:
+    background-color 0.2s ease,
+    transform 0.1s ease;
 }
+
 .annotation-add-button:hover {
-  background: linear-gradient(180deg, #f3f3f3 0%, #e2e2e2 100%);
-  border-color: #bfbfbf;
+  background-color: #8f8f8f;
 }
-.annotation-add-button:active {
+/* .annotation-add-button:active {
   transform: translateY(1px);
-  background: linear-gradient(180deg, #e9e9e9 0%, #dbdbdb 100%);
+  background: linear-gradient(180deg, #8f8f8f 0%, #8f8f8f 100%);
   box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
+} */
+/* .annotation-add-button:focus {
+  background-color: #8f8f8f;
+} */
+
+#labelToggleContainer { margin: 8px 0 6px; padding-left: 4px; }
+#labelToggleContainer .labels-legend { font-size: 13px; color: #ddd; margin-bottom: 4px; }
+
+.toggle-group {
+  display: flex;
+  width: 265px;
+  border: 1px solid black;
+  border-radius: 4px;
+  overflow: hidden;
 }
-.annotation-add-button:focus {
-  outline: 2px solid rgba(100, 100, 100, 0.12);
-  outline-offset: 2px;
+.toggle-group button {
+  flex: 1;
+  padding: 6px 15px;
+  background: #A7A9AA;
+  color: #3d3c3c;
+  border: 0;
+  cursor: pointer;
+  font-weight: 300;
+  transition: background .2s;
 }
+.toggle-group button:not(:last-child) { border-right: 1px solid #555; }
+.toggle-group button.active { background: #C7C9CA; color: #000; }
diff --git a/src/AnnotationControl/annotationPanel.js b/src/AnnotationControl/annotationPanel.js
@@ -31,13 +31,14 @@ export function initAnnotationsPanel(viewer) {
       header.appendChild(headerSpan)
 
       const panel = document.createElement('div')
-      panel.className = 'pv-menu-list annotations-panel'
+      panel.className = 'pv-menu-list_annotations-panel'
 
       const listContainerDiv = document.createElement('div')
       listContainerDiv.id = 'annotations_list'
       listContainerDiv.className = 'auto'
       panel.appendChild(listContainerDiv)
 
+
       // Insert after measurement panel but before tools, or at end if not found
       const measurements = document.querySelector('.measurements-panel')
       if (measurements) {
@@ -68,6 +69,47 @@ export function initAnnotationsPanel(viewer) {
       targetContainer = panel.querySelector('#annotations_list')
     }
   }
+
+  // --- Add Show/Hide labels toggle group ---
+  const panelEl =
+  targetContainer.closest('.pv-menu-list_annotations-panel') ||
+  targetContainer.parentElement;
+
+  if (!panelEl.querySelector('#labelToggleContainer')) {
+  const controls = document.createElement('div');
+  controls.id = 'labelToggleContainer';
+  controls.innerHTML = `
+    <p class="labels-legend">Show/Hide saved locations</p>
+    <div class="toggle-group">
+      <button id="showLabelsBtn" class="active">Show</button>
+      <button id="hideLabelsBtn">Hide</button>
+    </div>
+  `;
+  // Insert before list of annotations 
+  panelEl.insertBefore(controls, targetContainer);
+
+  // show/hide all annotations
+  const setLabelsVisible = (visible) => {
+    const cont = document.getElementById('potree_annotation_container');
+    if (cont) cont.style.display = visible ? '' : 'none';
+  };
+
+  const showBtn = controls.querySelector('#showLabelsBtn');
+  const hideBtn = controls.querySelector('#hideLabelsBtn');
+
+  showBtn.addEventListener('click', () => {
+    setLabelsVisible(true);
+    showBtn.classList.add('active');
+    hideBtn.classList.remove('active');
+  });
+
+  hideBtn.addEventListener('click', () => {
+    setLabelsVisible(false);
+    hideBtn.classList.add('active');
+    showBtn.classList.remove('active');
+  });
+  }
+
   if (!targetContainer) {
     console.warn(
       'Annotations list container not found and dynamic injection failed'

diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js
@@ -653,7 +653,7 @@ export function initMeasurementsPanel(viewer) {
   // After tools are moved into `toolsHost`
   const toolDescriptions = {
     'angle.png': 'Measure angle',
-    'point.svg': 'Add point',
+    'point.svg': 'Inspect point',
     'distance.svg': 'Measure distance',
     'height.svg': 'Measure height',
     'circle.svg': 'Circle',