Merge pull request #21 from TDT4290-group-4/5-click-point-to-view-att…

…ribute-us6 5 click point to view attribute us6
TDT4290-group-4 · Oct 6, 2025 · 8d36734 · 8d36734
2 parents 56fa67c + 7af1807
commit 8d36734
Show file tree

Hide file tree

Showing 8 changed files with 962 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -34,6 +34,10 @@
       type="text/css"
       href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
     />
+    <link
+      rel="stylesheet"
+      href="/src/MeasurementControl/measurementsPanel.css"
+    />
   </head>
 
   <body>
@@ -53,7 +57,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
     <script src="/libs/Cesium/Cesium.js"></script>
 
-
     <div
       class="potree_container"
       style="
@@ -67,7 +70,7 @@
     >
       <div id="potree_render_area">
         <div id="cesiumContainer"></div>
-        <div id ="canvasContainer">
+        <div id="canvasContainer">
           <canvas id="elevationCanvas" width="200" height="30"></canvas>
           <canvas id="posCanvas" width="200" height="30"></canvas>
         </div>

diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
@@ -0,0 +1,273 @@
+#measurements_list .mcard {
+  background: #2d373c;
+  border: 1px solid #1c2428;
+  border-radius: 4px;
+  margin: 6px 4px;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 12px;
+  color: #eee;
+}
+#measurements_list .mheader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  font-weight: bold;
+}
+#measurements_list .mstatus {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #68d96e;
+  margin-right: 6px;
+}
+#measurements_list .mdelete {
+  margin-left: auto;
+  cursor: pointer;
+  color: #d55;
+  font-weight: bold;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+}
+#measurements_list table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 4px;
+}
+#measurements_list td {
+  padding: 2px 4px;
+}
+#measurements_list tr:nth-child(even) {
+  background: #3a454b;
+}
+#measurements_list .coordRow td {
+  background: #2f383d;
+  font-family: monospace;
+  font-size: 11px;
+  padding: 4px 6px;
+  border: 1px solid #404a50;
+  border-radius: 4px;
+  margin: 2px 0;
+}
+#measurements_list .segmentRow td {
+  background: transparent;
+  padding: 0 0 2px 0;
+}
+#measurements_list .segmentConnector {
+  width: 1px;
+  height: 12px;
+  background: #505b61;
+  margin: 2px auto 0;
+}
+#measurements_list .segmentPill {
+  display: inline-block;
+  background: #3d474d;
+  border: 1px solid #566067;
+  padding: 2px 10px;
+  margin: 2px auto 4px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-family: monospace;
+}
+#measurements_list .totalRow td {
+  background: #424d53;
+  font-weight: 600;
+  font-size: 12px;
+  text-align: center;
+  border: 1px solid #59646a;
+  border-radius: 6px;
+  margin-top: 4px;
+}
+#measurements_list .separator td {
+  padding: 0;
+  height: 2px;
+  background: transparent;
+}
+#measurements_list .attrRow td {
+  font-size: 11px;
+  color: #cfd5d8;
+}
+#measurements_list .empty {
+  opacity: 0.6;
+  padding: 8px;
+  text-align: center;
+}
+#measurements_list {
+  max-height: 400px;
+  overflow-y: auto;
+  margin: 10px 0;
+}
+#measurements_list::-webkit-scrollbar {
+  width: 8px;
+}
+#measurements_list::-webkit-scrollbar-track {
+  background: var(--bg-dark-color);
+}
+#measurements_list::-webkit-scrollbar-thumb {
+  background: var(--bg-color-2);
+  border-radius: 4px;
+}
+#measurements_list::-webkit-scrollbar-thumb:hover {
+  background: var(--color-1);
+}
+
+/* Modern grouped measurement list */
+#measurement_items {
+  background: #252d31;
+  border: 1px solid #1b2326;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #d9e2e6;
+}
+#measurement_items .m-empty {
+  padding: 10px;
+  text-align: center;
+  opacity: 0.6;
+}
+#measurement_items .m-group {
+  border-top: 1px solid #303a3f;
+}
+#measurement_items .m-group:first-child {
+  border-top: none;
+}
+#measurement_items .m-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-size: 11px;
+  background: linear-gradient(#2f383d, #2b3438);
+  cursor: pointer;
+  user-select: none;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+#measurement_items .m-group-header:hover {
+  background: #374247;
+}
+#measurement_items .m-group-caret {
+  font-size: 10px;
+  width: 14px;
+  text-align: center;
+  color: #8fb9c9;
+}
+#measurement_items .m-group-title {
+  flex: 1;
+  color: #c7d4d9;
+}
+#measurement_items .m-group-count {
+  background: #3d4850;
+  color: #9fb7c2;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  line-height: 1;
+}
+#measurement_items .m-group-body {
+  padding: 4px 4px 6px;
+}
+#measurement_items .m-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  margin: 2px 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: #2c3539;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+  cursor: pointer;
+}
+#measurement_items .m-row-icon {
+  width: 16px;
+  flex: 0 0 16px;
+  text-align: center;
+  font-size: 12px;
+  color: #8fb9c9;
+  filter: drop-shadow(0 0 2px #0a0f12);
+}
+#measurement_items .m-row:hover {
+  background: #354045;
+  border-color: #425056;
+}
+#measurement_items .m-row.active {
+  background: #1f4b63;
+  border-color: #2f6b8c;
+  box-shadow: 0 0 0 1px #2f6b8c66;
+}
+#measurement_items .m-row-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#measurement_items .m-row-delete {
+  background: #3b2626;
+  border: 1px solid #5a3a3a;
+  color: #ff9a9a;
+  font-weight: 600;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+#measurement_items .m-row-delete:hover {
+  background: #5a2d2d;
+  color: #fff;
+}
+
+.measurements-panel {
+  position: relative;
+}
+.measurement-tools-host {
+  margin-bottom: 32px;
+}
+.measurement-items-root {
+  max-height: 260px;
+  overflow: auto;
+  margin-bottom: 6px;
+  border: 1px solid #333;
+  border-radius: 4px;
+}
+.measurement-info-message {
+  padding: 4px 8px;
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.m-list-title,
+.m-data-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  padding: 6px 8px 4px 14px;
+  margin-left: 2px;
+  color: #c7d4d9;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.measurement-options-block {
+  margin-top: 12px !important;
+  display: block;
+}
+.m-list-title {
+  margin: 6px 0 4px;
+}
+.m-data-title {
+  margin: 10px 0 8px;
+  border-top: 1px solid #303a3f;
+  padding-top: 10px;
+}