diff --git a/src/@contexts/Timeline.tsx b/src/@contexts/Timeline.tsx index 1cd3f5e..b0aeb56 100644 --- a/src/@contexts/Timeline.tsx +++ b/src/@contexts/Timeline.tsx @@ -132,6 +132,23 @@ export const TimelineProvider = ({ return interval.splitBy({ [resolution.unit]: resolution.sizeInUnits }); }, [interval, resolution]); + const visibleTimeBlocks = useMemo(() => { + const rangeLength = drawRange.end - drawRange.start; + if (rangeLength <= 0) { + return []; + } + + return [...timeBlocks].filter((col, index) => { + console.log("=> TimeBlockVisible", index); + const xPos = columnWidth * index; + if (xPos < drawRange.start * -1.05 || xPos > drawRange.end * 1.05) { + return false; + } + + return true; + }); + }, [columnWidth, drawRange, timeBlocks]); + const theme = useMemo((): TimelineTheme => { return { color: externalTheme === "dark" ? "white" : "black", @@ -156,7 +173,7 @@ export const TimelineProvider = ({ setResolutionKey, tasks, theme, - timeBlocks, + timeBlocks: visibleTimeBlocks, }} > {children} diff --git a/src/grid/Layer/index.tsx b/src/grid/Layer/index.tsx index 82773b9..e732ad0 100644 --- a/src/grid/Layer/index.tsx +++ b/src/grid/Layer/index.tsx @@ -12,7 +12,6 @@ interface GridLayerProps { const GridLayer: FC = ({ columnWidth, height, width }) => { const { - drawRange, interval, resolution, resources, @@ -69,6 +68,8 @@ const GridLayer: FC = ({ columnWidth, height, width }) => { [height, oneUnitAboveDuration, oneUnitAboveColumnWidth, themeColor, unitAbove, unitAboveIntervals] ); + console.log("==> TimeBlocks <=="); + return ( @@ -81,11 +82,7 @@ const GridLayer: FC = ({ columnWidth, height, width }) => { })} {timeBlocks.map((column, index) => { - const xPos = columnWidth * index; - if (xPos < drawRange.start * -1.05 || xPos > drawRange.end * 1.05) { - return null; - } - + console.log("=> TimeBlock", index); return ( {gridLabels(index)}