/**
* 캔들 pane 좌측 하단 — 캔들 확대 보기 / 기본 보기 복원 버튼
*/
import React, { useState, useEffect, useCallback } from 'react';
import { ChartManager } from '../utils/ChartManager';
const IconExpand = () => (
);
const IconRestore = () => (
);
interface CandlePaneControlsProps {
manager: ChartManager;
containerEl: HTMLElement;
candleOnly: boolean;
onExpand: () => void;
onRestore: () => void;
}
const CandlePaneControls: React.FC = ({
manager,
containerEl,
candleOnly,
onExpand,
onRestore,
}) => {
const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
const updatePos = useCallback(() => {
const main = manager.getPaneLayouts().find(l => l.paneIndex === 0);
if (!main) { setPos(null); return; }
const rect = containerEl.getBoundingClientRect();
const paneBottomY = rect.top + main.topY + main.height;
setPos({
left: rect.left + 4,
top: paneBottomY - 30,
});
}, [manager, containerEl]);
useEffect(() => {
updatePos();
const ro = new ResizeObserver(() => updatePos());
ro.observe(containerEl);
const id = setInterval(updatePos, 400);
return () => { ro.disconnect(); clearInterval(id); };
}, [containerEl, updatePos, candleOnly]);
if (!pos) return null;
return (
e.stopPropagation()}
>
{candleOnly ? (
) : (
)}
);
};
export default CandlePaneControls;