131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
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"
|
|
style={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
transform: "translate(-50%,0%)",
|
|
}}
|
|
>
|
|
{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"
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "50%",
|
|
transform: "translate(-50%,0%)",
|
|
}}
|
|
>
|
|
{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"
|
|
style={{
|
|
position: "absolute",
|
|
left: "50%",
|
|
transform: "translate(0,-50%)",
|
|
}}
|
|
>
|
|
{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"
|
|
style={{
|
|
position: "absolute",
|
|
right: "50%",
|
|
transform: "translate(0,-50%)",
|
|
}}
|
|
>
|
|
{obj.position.right}px
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DistanceLines;
|