RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: name magic numbers and rename el in landing handlebars

This commit is contained in:
Maze Winther 2026-03-29 21:18:07 +02:00
parent dc5956900e
commit df207e0f83
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/web/src/components/landing/handlebars.tsx
View File

@ -10,6 +10,11 @@ import {
type HandlebarsProps = PropsWithChildren; type HandlebarsProps = PropsWithChildren;
const MIN_HANDLE_SEPARATION_PX = 60;
const MASK_GRADIENT_EDGE_PADDING_PX = 10;
const HANDLEBARS_ROTATE_DEG = 2.76;
const RIGHT_HANDLE_LEFT_OFFSET_PX = -30;
export function Handlebars({ children }: HandlebarsProps) { export function Handlebars({ children }: HandlebarsProps) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const leftHandleRef = useRef<HTMLDivElement>(null); const leftHandleRef = useRef<HTMLDivElement>(null);
@ -38,17 +43,17 @@ export function Handlebars({ children }: HandlebarsProps) {
}); });
useLayoutEffect(() => { useLayoutEffect(() => {
const el = containerRef.current; const container = containerRef.current;
if (!el) return; if (!container) return;
const updateWidth = () => { const updateWidth = () => {
const newWidth = el.offsetWidth; const newWidth = container.offsetWidth;
setWidth(newWidth); setWidth(newWidth);
setRightHandle(newWidth); setRightHandle(newWidth);
}; };
const observer = new ResizeObserver(updateWidth); const observer = new ResizeObserver(updateWidth);
observer.observe(el); observer.observe(container);
updateWidth(); updateWidth();
return () => observer.disconnect(); return () => observer.disconnect();
@ -72,7 +77,10 @@ export function Handlebars({ children }: HandlebarsProps) {
const deltaX = event.clientX - startX; const deltaX = event.clientX - startX;
if (side === "left") { if (side === "left") {
const maxLeft = Math.max(0, rightHandlePositionRef.current - 60); const maxLeft = Math.max(
0,
rightHandlePositionRef.current - MIN_HANDLE_SEPARATION_PX,
);
const nextLeftHandle = Math.max( const nextLeftHandle = Math.max(
0, 0,
Math.min(maxLeft, initialPosition + deltaX), Math.min(maxLeft, initialPosition + deltaX),
@ -83,7 +91,7 @@ export function Handlebars({ children }: HandlebarsProps) {
const minRight = Math.min( const minRight = Math.min(
widthRef.current, widthRef.current,
leftHandlePositionRef.current + 60, leftHandlePositionRef.current + MIN_HANDLE_SEPARATION_PX,
); );
const nextRightHandle = Math.max( const nextRightHandle = Math.max(
minRight, minRight,
@ -114,10 +122,10 @@ export function Handlebars({ children }: HandlebarsProps) {
const hasMeasuredWidth = width > 0; const hasMeasuredWidth = width > 0;
const leftGradientPercent = hasMeasuredWidth const leftGradientPercent = hasMeasuredWidth
? (leftHandle / (width - 10)) * 100 ? (leftHandle / (width - MASK_GRADIENT_EDGE_PADDING_PX)) * 100
: 0; : 0;
const rightGradientPercent = hasMeasuredWidth const rightGradientPercent = hasMeasuredWidth
? (rightHandle / (width + 10)) * 100 ? (rightHandle / (width + MASK_GRADIENT_EDGE_PADDING_PX)) * 100
: 100; : 100;
const textMask = hasMeasuredWidth const textMask = hasMeasuredWidth
? `linear-gradient(90deg, ? `linear-gradient(90deg,
@ -131,7 +139,11 @@ export function Handlebars({ children }: HandlebarsProps) {
return ( return (
<div className="flex justify-center gap-4 leading-16"> <div className="flex justify-center gap-4 leading-16">
<div ref={containerRef} className="relative mt-0.5 -rotate-[2.76deg]"> <div
ref={containerRef}
className="relative mt-0.5"
style={{ transform: `rotate(-${HANDLEBARS_ROTATE_DEG}deg)` }}
>
<div className="absolute inset-0 z-10 flex size-full justify-between rounded-2xl border border-yellow-500"> <div className="absolute inset-0 z-10 flex size-full justify-between rounded-2xl border border-yellow-500">
<div <div
ref={leftHandleRef} ref={leftHandleRef}
@ -156,7 +168,9 @@ export function Handlebars({ children }: HandlebarsProps) {
ref={rightHandleRef} ref={rightHandleRef}
className="bg-background absolute z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none" className="bg-background absolute z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
style={{ style={{
left: hasMeasuredWidth ? "-30px" : undefined, left: hasMeasuredWidth
? `${RIGHT_HANDLE_LEFT_OFFSET_PX}px`
: undefined,
right: hasMeasuredWidth ? undefined : "0px", right: hasMeasuredWidth ? undefined : "0px",
translate: hasMeasuredWidth ? `${rightHandle}px 0` : undefined, translate: hasMeasuredWidth ? `${rightHandle}px 0` : undefined,
}} }}