trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

fix svg overlay z-index

Browse source
This commit is contained in:
Marko Djordjevic 2026-02-12 13:54:57 +01:00
parent 551e8423b2
commit daec116aab
1 changed files with 12 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/SvgOverlay.tsx
View file

@ -51,16 +51,16 @@ export default function SvgOverlay({
} }
}; };
// Update dimensions when chart resizes // Update dimensions when SVG resizes
useEffect(() => { useEffect(() => {
if (!chart) return; if (!svgRef.current) return;
const updateDimensions = () => { const updateDimensions = () => {
const container = chart.chartElement(); if (svgRef.current) {
if (container) { const rect = svgRef.current.getBoundingClientRect();
setDimensions({ setDimensions({
width: container.clientWidth, width: rect.width,
height: container.clientHeight, height: rect.height,
}); });
} }
}; };
@ -68,15 +68,12 @@ export default function SvgOverlay({
updateDimensions(); updateDimensions();
const resizeObserver = new ResizeObserver(updateDimensions); const resizeObserver = new ResizeObserver(updateDimensions);
const container = chart.chartElement(); resizeObserver.observe(svgRef.current);
if (container) {
resizeObserver.observe(container);
}
return () => { return () => {
resizeObserver.disconnect(); resizeObserver.disconnect();
}; };
}, [chart]); }, []);
// Subscribe to visible range changes (zoom/pan) // Subscribe to visible range changes (zoom/pan)
useEffect(() => { useEffect(() => {
@ -338,12 +335,13 @@ export default function SvgOverlay({
return ( return (
<svg <svg
ref={svgRef} ref={svgRef}
width={dimensions.width}
height={dimensions.height}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
width: '100%',
height: '100%',
zIndex: 1111,
pointerEvents: activeTool === 'line' || activeTool === 'delete' ? 'auto' : 'none', pointerEvents: activeTool === 'line' || activeTool === 'delete' ? 'auto' : 'none',
cursor: activeTool === 'line' ? 'crosshair' : activeTool === 'delete' ? 'pointer' : 'default', cursor: activeTool === 'line' ? 'crosshair' : activeTool === 'delete' ? 'pointer' : 'default',
}} }}