updated distanceLine and fix drag bug

app/src/styles/pages/realTimeViz.scss

@@ -541,4 +541,156 @@
 .zone.active {
   background-color: #007bff;
   color: white;
+}
+
+
+
+.floating-wrapper {
+  .icon {
+    width: 25px !important;
+    height: 25px !important;
+    background-color: transparent;
+  }
+
+  .kebab {
+    width: 30px;
+    height: 30px;
+    position: absolute !important;
+    top: 0px;
+    right: 0px;
+    z-index: 10;
+    cursor: pointer;
+    @include flex-center;
+  }
+
+  .kebab-options {
+    position: absolute;
+    top: 18px;
+    right: 5px;
+    transform: translate(0px, 0);
+    background-color: var(--background-color);
+    z-index: 10;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border-radius: 4px;
+
+    box-shadow: var(--box-shadow-medium);
+
+    .btn {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      padding: 5px 10px;
+      color: var(--text-color);
+      cursor: pointer;
+
+      &:hover {
+        .label {
+          color: var(--accent-color);
+        }
+      }
+
+      &:hover {
+        background-color: var(--highlight-accent-color);
+        width: 100%;
+
+        svg {
+          &:first-child {
+            fill: var(--accent-color);
+          }
+
+          &:last-child {
+            fill: auto;
+            stroke: var(--accent-color);
+          }
+        }
+      }
+    }
+
+    .dublicate {
+      cursor: not-allowed;
+    }
+
+
+
+  }
+}
+
+
+
+
+
+
+
+
+
+
+/* General styles for all distance lines */
+.distance-line {
+  position: absolute;
+  border-style: dashed;
+  border-color: var(--accent-color); /* Green color for visibility */
+  border-width: 1px;
+  pointer-events: none; /* Ensure lins don't interfere with dragging */
+  z-index: 10000;
+}
+
+/* Label styles for displaying distance values */
+.distance-label {
+  position: absolute;
+  background-color: var(--accent-color);
+  color: white;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  white-space: nowrap;
+  transform: translate(-50%, -50%); /* Center the label */
+}
+
+/* Specific styles for each type of line */
+
+/* Top distance line */
+.distance-line.top {
+  border-bottom: none; /* Remove bottom border for a single line */
+  width: 2px; /* Thin vertical line */
+}
+
+.distance-line.top .distance-label {
+  top: -10px; /* Position label above the line */
+  left: 50%; /* Center horizontally */
+}
+
+/* Bottom distance line */
+.distance-line.bottom {
+  border-top: none; /* Remove top border for a single line */
+  width: 2px; /* Thin vertical line */
+}
+
+.distance-line.bottom .distance-label {
+  bottom: -10px; /* Position label below the line */
+  left: 50%; /* Center horizontally */
+}
+
+/* Left distance line */
+.distance-line.left {
+  border-right: none; /* Remove right border for a single line */
+  height: 2px; /* Thin horizontal line */
+}
+
+.distance-line.left .distance-label {
+  left: -10px; /* Position label to the left of the line */
+  top: 50%; /* Center vertically */
+}
+
+/* Right distance line */
+.distance-line.right {
+  border-left: none; /* Remove left border for a single line */
+  height: 2px; /* Thin horizontal line */
+}
+
+.distance-line.right .distance-label {
+  right: -10px; /* Position label to the right of the line */
+  top: 50%; /* Center vertically */
 }