updated distanceLine and fix drag bug

app/src/components/ui/componets/DistanceLines.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+interface DistanceLinesProps {
+  obj: {
+    position: {
+      top?: number | "auto";
+      left?: number | "auto";
+      right?: number | "auto";
+      bottom?: number | "auto";
+    };
+  };
+  activeEdges: {
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null;
+}
+
+const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
+  if (!activeEdges) return null;
+
+  return (
+    <>
+      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
+        <div
+          className="distance-line top"
+          style={{
+            top: 0,
+            left:
+              activeEdges.horizontal === "left"
+                ? `${(obj.position.left as number) + 125}px`
+                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+            height: `${obj.position.top}px`,
+          }}
+        >
+          <span className="distance-label">{obj.position.top}px</span>
+        </div>
+      )}
+
+      {activeEdges.vertical === "bottom" &&
+        typeof obj.position.bottom === "number" && (
+          <div
+            className="distance-line bottom"
+            style={{
+              bottom: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.bottom}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.bottom}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "left" &&
+        typeof obj.position.left === "number" && (
+          <div
+            className="distance-line left"
+            style={{
+              left: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.left}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.left}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "right" &&
+        typeof obj.position.right === "number" && (
+          <div
+            className="distance-line right"
+            style={{
+              right: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.right}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.right}px</span>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default DistanceLines;