mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 18:26:17 +00:00
Miguel Ángel
f8bf039a09
React components and DOM utilities for the snap system: - SnapGuideOverlay: pre-allocated div pool (6 guides + 4 spacing) for ref-driven guide line rendering during drag - SnapToolbar: magnet/grid toggle with S/G keyboard shortcuts, right-click grid popover for spacing config - GridOverlay: CSS repeating-linear-gradient grid, GPU composited - snapTargetCollection: walks iframe DOM tree to collect visible elements as snap targets, cross-iframe safe (nodeType check)
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
// fallow-ignore-file unused-file
|
|
import { memo } from "react";
|
|
|
|
interface GridOverlayProps {
|
|
visible: boolean;
|
|
spacing: number;
|
|
scaleX: number;
|
|
scaleY: number;
|
|
compositionLeft: number;
|
|
compositionTop: number;
|
|
compositionWidth: number;
|
|
compositionHeight: number;
|
|
}
|
|
|
|
// fallow-ignore-next-line complexity
|
|
export const GridOverlay = memo(function GridOverlay({
|
|
visible,
|
|
spacing,
|
|
scaleX,
|
|
scaleY,
|
|
compositionLeft,
|
|
compositionTop,
|
|
compositionWidth,
|
|
compositionHeight,
|
|
}: GridOverlayProps) {
|
|
if (!visible || spacing <= 0) return null;
|
|
|
|
const overlaySpacingX = spacing * scaleX;
|
|
const overlaySpacingY = spacing * scaleY;
|
|
|
|
if (overlaySpacingX < 4 || overlaySpacingY < 4) return null;
|
|
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute"
|
|
style={{
|
|
left: compositionLeft,
|
|
top: compositionTop,
|
|
width: compositionWidth,
|
|
height: compositionHeight,
|
|
backgroundImage: [
|
|
`repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 1px, transparent 1px, transparent ${overlaySpacingX}px)`,
|
|
`repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 1px, transparent 1px, transparent ${overlaySpacingY}px)`,
|
|
].join(", "),
|
|
backgroundSize: `${overlaySpacingX}px ${overlaySpacingY}px`,
|
|
}}
|
|
/>
|
|
);
|
|
});
|