Use buffer prop to calculate when to redraw canvas

Previously, when to redraw was statically set to 0.5x the displayed
interval. Most likely this is a bug as it should redraw when only half
of the configured buffer size remains outside the viewport.

Author: LudvigHz

CHANGELOG.md

@@ -7,9 +7,11 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+* Fix issue where the redraw mechanism was not based on the `buffer` prop.
+
 ## 0.30.0 (beta)
 Huge update made by @Remco4EF and @remcoblumink
- * full rewrite to typescript 
+ * full rewrite to typescript
  * uses Vite as bundler
  * Updates dependencies to latest versions
  * Updates react usage to 18+

src/lib/utility/calendar.tsx

@@ -670,7 +670,7 @@ export function getItemWithInteractions<
 export function getCanvasBoundariesFromVisibleTime(visibleTimeStart: number, visibleTimeEnd: number, buffer: number) {
   const zoom = visibleTimeEnd - visibleTimeStart
   // buffer - 1 (1 is visible area) divided by 2 (2 is the buffer split on the right and left of the timeline)
-  const canvasTimeStart = visibleTimeStart - (zoom * (buffer - 1)) / 2
+  const canvasTimeStart = visibleTimeStart - zoom * (buffer - 1) / 2
   const canvasTimeEnd = canvasTimeStart + zoom * buffer
   return [canvasTimeStart, canvasTimeEnd]
 }
@@ -710,15 +710,16 @@ export function calculateScrollCanvas<
     visibleTimeEnd,
   }
 
+  // Calculate half of the buffer size on each side = 1/4 of the (buffer - viewport)
+  const halfBuffer = oldZoom * (buffer! - 1) * 0.25
+
   // Check if the current canvas covers the new times
-  const canKeepCanvas =
-    newZoom === oldZoom &&
-    visibleTimeStart >= oldCanvasTimeStart + oldZoom * 0.5 &&
-    visibleTimeStart <= oldCanvasTimeEnd - oldZoom * 1.5 &&
-    visibleTimeEnd >= oldCanvasTimeStart + oldZoom * 1.5 &&
-    visibleTimeEnd <= oldCanvasTimeEnd - oldZoom * 0.5
-
-  if (!canKeepCanvas || forceUpdateDimensions) {
+  const shouldCreateNewCanvas =
+    newZoom !== oldZoom ||
+    visibleTimeStart <= oldCanvasTimeStart + halfBuffer ||
+    visibleTimeEnd >= oldCanvasTimeEnd - halfBuffer
+
+  if (shouldCreateNewCanvas || forceUpdateDimensions) {
     const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(
       visibleTimeStart,
       visibleTimeEnd,