fix: 🐛 [Timeline] Calculating visibile timeBlocks in ctx

melfore · Sep 19, 2023 · d149233 · d149233
1 parent c6dfe09
commit d149233
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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)}