From d14923362835a95df5352435ecbd2229dbcca0cf Mon Sep 17 00:00:00 2001
From: luciob <lucio.bordonaro@gmail.com>
Date: Tue, 19 Sep 2023 05:30:57 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20[Timeline]=20Calculating?=
 =?UTF-8?q?=20visibile=20timeBlocks=20in=20ctx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@contexts/Timeline.tsx | 19 ++++++++++++++++++-
 src/grid/Layer/index.tsx   |  9 +++------
 2 files changed, 21 insertions(+), 7 deletions(-)

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<GridLayerProps> = ({ columnWidth, height, width }) => {
   const {
-    drawRange,
     interval,
     resolution,
     resources,
@@ -69,6 +68,8 @@ const GridLayer: FC<GridLayerProps> = ({ columnWidth, height, width }) => {
     [height, oneUnitAboveDuration, oneUnitAboveColumnWidth, themeColor, unitAbove, unitAboveIntervals]
   );
 
+  console.log("==> TimeBlocks <==");
+
   return (
     <KonvaLayer>
       <KonvaGroup>
@@ -81,11 +82,7 @@ const GridLayer: FC<GridLayerProps> = ({ columnWidth, height, width }) => {
         })}
         <KonvaLine points={[0, 0, 0, height]} stroke="blue" />
         {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 (
             <KonvaGroup key={`timeslot-${index}`}>
               {gridLabels(index)}