wehub-resource-sync
39 lines
1022 B
TypeScript
39 lines
1022 B
TypeScript
'use client';
|
|
|
|
import type { AlignmentLineProps } from '@/lib/types/edit';
|
|
|
|
export interface AlignmentLineComponentProps extends AlignmentLineProps {
|
|
canvasScale: number;
|
|
}
|
|
|
|
/**
|
|
* Alignment line component
|
|
* Displays visual alignment guides during element dragging
|
|
*/
|
|
export function AlignmentLine({ type, axis, length, canvasScale }: AlignmentLineComponentProps) {
|
|
// Alignment line position
|
|
const left = axis.x * canvasScale;
|
|
const top = axis.y * canvasScale;
|
|
|
|
// Alignment line length
|
|
const sizeStyle =
|
|
type === 'vertical'
|
|
? { height: `${length * canvasScale}px` }
|
|
: { width: `${length * canvasScale}px` };
|
|
|
|
return (
|
|
<div
|
|
className="alignment-line absolute z-42"
|
|
style={{
|
|
left: `${left}px`,
|
|
top: `${top}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className={`line ${type === 'vertical' ? 'border-l border-dashed border-primary -translate-x-0.5' : 'border-t border-dashed border-primary -translate-y-0.5'}`}
|
|
style={sizeStyle}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|