| 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> | |
| ); | |
| } | |