93 lines
2.7 KiB
TypeScript
93 lines
2.7 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">{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;
|