93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
|
|
|
|
interface SplitPanelAwareWrapperProps {
|
|
children: React.ReactNode;
|
|
componentX: number;
|
|
componentY: number;
|
|
componentWidth: number;
|
|
componentHeight: number;
|
|
componentType?: string;
|
|
style?: React.CSSProperties;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* 분할 패널 드래그 리사이즈에 따라 컴포넌트 위치를 자동 조정하는 래퍼
|
|
*
|
|
* 동작 방식:
|
|
* 1. 컴포넌트가 분할 패널의 좌측 영역 위에 있는지 감지
|
|
* 2. 좌측 영역 위에 있으면, 드래그 핸들 이동량만큼 X 좌표를 조정
|
|
* 3. 우측 영역이나 분할 패널 외부에 있으면 원래 위치 유지
|
|
*/
|
|
export const SplitPanelAwareWrapper: React.FC<SplitPanelAwareWrapperProps> = ({
|
|
children,
|
|
componentX,
|
|
componentY,
|
|
componentWidth,
|
|
componentHeight,
|
|
componentType,
|
|
style,
|
|
className,
|
|
}) => {
|
|
const { getAdjustedX, getOverlappingSplitPanel } = useSplitPanel();
|
|
|
|
// 분할 패널 위에 있는지 확인 및 조정된 X 좌표 계산
|
|
const { adjustedX, isInLeftPanel, isDragging } = useMemo(() => {
|
|
const overlap = getOverlappingSplitPanel(componentX, componentY, componentWidth, componentHeight);
|
|
|
|
if (!overlap) {
|
|
// 분할 패널 위에 없음
|
|
return { adjustedX: componentX, isInLeftPanel: false, isDragging: false };
|
|
}
|
|
|
|
if (!overlap.isInLeftPanel) {
|
|
// 우측 패널 위에 있음 - 원래 위치 유지
|
|
return { adjustedX: componentX, isInLeftPanel: false, isDragging: overlap.panel.isDragging };
|
|
}
|
|
|
|
// 좌측 패널 위에 있음 - 위치 조정
|
|
const adjusted = getAdjustedX(componentX, componentY, componentWidth, componentHeight);
|
|
|
|
return {
|
|
adjustedX: adjusted,
|
|
isInLeftPanel: true,
|
|
isDragging: overlap.panel.isDragging,
|
|
};
|
|
}, [componentX, componentY, componentWidth, componentHeight, getAdjustedX, getOverlappingSplitPanel]);
|
|
|
|
// 조정된 스타일
|
|
const adjustedStyle: React.CSSProperties = {
|
|
...style,
|
|
position: "absolute",
|
|
left: `${adjustedX}px`,
|
|
top: `${componentY}px`,
|
|
width: componentWidth,
|
|
height: componentHeight,
|
|
// 드래그 중에는 트랜지션 없이 즉시 이동, 드래그 끝나면 부드럽게
|
|
transition: isDragging ? "none" : "left 0.1s ease-out",
|
|
};
|
|
|
|
// 디버그 로깅 (개발 중에만)
|
|
// if (isInLeftPanel) {
|
|
// console.log(`📍 [SplitPanelAwareWrapper] 위치 조정:`, {
|
|
// componentType,
|
|
// originalX: componentX,
|
|
// adjustedX,
|
|
// delta: adjustedX - componentX,
|
|
// isInLeftPanel,
|
|
// isDragging,
|
|
// });
|
|
// }
|
|
|
|
return (
|
|
<div style={adjustedStyle} className={className}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SplitPanelAwareWrapper;
|