namespace-ee · subhamacko · Mar 17, 2024
diff --git a/demo/app/demo-controlled-scrolling/index.js b/demo/app/demo-controlled-scrolling/index.js
@@ -16,10 +16,10 @@ import Timeline, {
 import generateFakeData from '../generate-fake-data'
 
 var minTime = moment()
-  .add(-6, 'months')
+  .add(-1, 'day')
   .valueOf()
 var maxTime = moment()
-  .add(6, 'months')
+  .add(1, 'day')
   .valueOf()
 
 var keys = {
@@ -202,6 +202,8 @@ export default class App extends Component {
         onItemDoubleClick={this.handleItemDoubleClick}
         buffer={1}
         onTimeChange={this.handleTimeChange}
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
         // moveResizeValidator={this.moveResizeValidator}
       >
         <TimelineMarkers>

diff --git a/demo/app/demo-controlled-select/index.js b/demo/app/demo-controlled-select/index.js
@@ -185,6 +185,8 @@ export default class App extends Component {
         moveResizeValidator={this.moveResizeValidator}
         selected={this.state.selected}
         onItemDeselect={this.handleItemDeselect}
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
       >
         <TimelineMarkers>
           <TodayMarker />

diff --git a/demo/app/demo-custom-info-label/index.js b/demo/app/demo-custom-info-label/index.js
@@ -19,6 +19,13 @@ var keys = {
   groupLabelKey: 'title'
 }
 
+var minTime = moment()
+  .add(-6, 'months')
+  .valueOf()
+var maxTime = moment()
+  .add(6, 'months')
+  .valueOf()
+
 export default class App extends Component {
   constructor(props) {
     super(props)
@@ -148,6 +155,8 @@ export default class App extends Component {
           onItemMove={this.handleItemMove}
           onItemResize={this.handleItemResize}
           onItemDrag={this.handleItemDrag}
+          canvasTimeStart={minTime}
+          canvasTimeEnd={maxTime}
         />
       </div>
     )

diff --git a/demo/app/demo-custom-items/index.js b/demo/app/demo-custom-items/index.js
@@ -228,6 +228,8 @@ export default class App extends Component {
         onItemDoubleClick={this.handleItemDoubleClick}
         onTimeChange={this.handleTimeChange}
         moveResizeValidator={this.moveResizeValidator}
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
       />
     )
   }

diff --git a/demo/app/demo-element-resize/index.js b/demo/app/demo-element-resize/index.js
@@ -21,6 +21,13 @@ var keys = {
   itemTimeEndKey: 'end'
 }
 
+var minTime = moment()
+  .add(-6, 'months')
+  .valueOf()
+var maxTime = moment()
+  .add(6, 'months')
+  .valueOf()
+
 export default class App extends Component {
   constructor(props) {
     super(props)
@@ -74,6 +81,8 @@ export default class App extends Component {
             resizeDetector={containerResizeDetector}
             defaultTimeStart={defaultTimeStart}
             defaultTimeEnd={defaultTimeEnd}
+            canvasTimeStart={minTime}
+            canvasTimeEnd={maxTime}
           />
         </div>
         <div style={{ width: `${100 - width}%`, float: 'left' }}>

diff --git a/demo/app/demo-headers/index.js b/demo/app/demo-headers/index.js
@@ -192,6 +192,8 @@ export default class App extends Component {
           // moveResizeValidator={this.moveResizeValidator}
           rightSidebarWidth={150}
           rightSidebarContent={<div>Above The Right</div>}
+          canvasTimeStart={minTime}
+          canvasTimeEnd={maxTime}
         >
           <TimelineHeaders className="header-background">
             <SidebarHeader/>
@@ -209,7 +211,7 @@ export default class App extends Component {
                   showPeriod,
                   data,
                 },
-                
+
               ) => {
                 console.log('props', data)
                 return (
@@ -322,7 +324,7 @@ export default class App extends Component {
               headerData={{ hey: 'date header' }}
               intervalRenderer={(
                 { getIntervalProps, intervalContext, data },
-                
+
               ) => {
                 console.log('intervalRenderer props', data)
                 return (

diff --git a/demo/app/demo-linked-timelines/index.js b/demo/app/demo-linked-timelines/index.js
@@ -20,6 +20,13 @@ var keys = {
   itemTimeEndKey: 'end'
 }
 
+var minTime = moment()
+  .add(-6, 'months')
+  .valueOf()
+var maxTime = moment()
+  .add(6, 'months')
+  .valueOf()
+
 export default class App extends Component {
   constructor(props) {
     super(props)
@@ -98,6 +105,8 @@ export default class App extends Component {
         itemHeightRatio={0.75}
         visibleTimeStart={visibleTimeStart}
         visibleTimeEnd={visibleTimeEnd}
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
         onTimeChange={this.handleTimeChangeSecond}
       />
     )

diff --git a/demo/app/demo-main/index.js b/demo/app/demo-main/index.js
@@ -12,10 +12,10 @@ import Timeline, {
 import generateFakeData from '../generate-fake-data'
 
 var minTime = moment()
-  .add(-6, 'months')
+  .add(-3, 'day')
   .valueOf()
 var maxTime = moment()
-  .add(6, 'months')
+  .add(3, 'day')
   .valueOf()
 
 var keys = {
@@ -119,17 +119,17 @@ export default class App extends Component {
   }
 
   // this limits the timeline to -6 months ... +6 months
-  handleTimeChange = (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => {
-    if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
-      updateScrollCanvas(minTime, maxTime)
-    } else if (visibleTimeStart < minTime) {
-      updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
-    } else if (visibleTimeEnd > maxTime) {
-      updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
-    } else {
-      updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
-    }
-  }
+  // handleTimeChange = (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => {
+  //   if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
+  //     updateScrollCanvas(minTime, maxTime)
+  //   } else if (visibleTimeStart < minTime) {
+  //     updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
+  //   } else if (visibleTimeEnd > maxTime) {
+  //     updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
+  //   } else {
+  //     updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
+  //   }
+  // }
 
   handleZoom = (timelineContext, unit) => {
     console.log('Zoomed', timelineContext, unit)
@@ -164,6 +164,8 @@ export default class App extends Component {
         itemHeightRatio={0.75}
         defaultTimeStart={defaultTimeStart}
         defaultTimeEnd={defaultTimeEnd}
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
         onCanvasClick={this.handleCanvasClick}
         onCanvasDoubleClick={this.handleCanvasDoubleClick}
         onCanvasContextMenu={this.handleCanvasContextMenu}
@@ -173,7 +175,6 @@ export default class App extends Component {
         onItemMove={this.handleItemMove}
         onItemResize={this.handleItemResize}
         onItemDoubleClick={this.handleItemDoubleClick}
-        onTimeChange={this.handleTimeChange}
         onZoom={this.handleZoom}
         moveResizeValidator={this.moveResizeValidator}
         buffer={3}

diff --git a/demo/app/demo-performance/index.js b/demo/app/demo-performance/index.js
@@ -176,7 +176,8 @@ export default class App extends Component {
         defaultTimeEnd={defaultTimeEnd}
         // itemRenderer={this.itemRenderer}
         // groupRenderer={this.groupRenderer}
-
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
         onCanvasClick={this.handleCanvasClick}
         onCanvasContextMenu={this.handleCanvasContextMenu}
         onItemClick={this.handleItemClick}

diff --git a/demo/app/demo-renderers/index.js b/demo/app/demo-renderers/index.js
@@ -195,7 +195,8 @@ export default class App extends Component {
         visibleTimeEnd={visibleTimeEnd}
         // itemRenderer={this.itemRenderer}
         groupRenderer={this.groupRenderer}
-
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
         onCanvasClick={this.handleCanvasClick}
         onCanvasContextMenu={this.handleCanvasContextMenu}
         onItemClick={this.handleItemClick}

diff --git a/demo/app/demo-tree-groups/index.js b/demo/app/demo-tree-groups/index.js
@@ -18,6 +18,13 @@ var keys = {
   itemTimeEndKey: 'end'
 }
 
+var minTime = moment()
+  .add(-6, 'months')
+  .valueOf()
+var maxTime = moment()
+  .add(6, 'months')
+  .valueOf()
+
 export default class App extends Component {
   constructor(props) {
     super(props)
@@ -115,6 +122,8 @@ export default class App extends Component {
         itemHeightRatio={0.75}
         defaultTimeStart={defaultTimeStart}
         defaultTimeEnd={defaultTimeEnd}
+        canvasTimeStart={minTime}
+        canvasTimeEnd={maxTime}
         horizontalLineClassNamesForGroup={(group) => group.root ? ["row-root"] : []}
       />
     )

diff --git a/demo/app/demo-vertical-classes/index.js b/demo/app/demo-vertical-classes/index.js
@@ -24,6 +24,13 @@ const keys = {
   itemTimeEndKey: 'end'
 }
 
+var minTime = moment()
+  .add(-6, 'months')
+  .valueOf()
+var maxTime = moment()
+  .add(6, 'months')
+  .valueOf()
+
 export default class App extends Component {
 
   constructor(props) {
@@ -97,6 +104,8 @@ export default class App extends Component {
           itemHeightRatio={0.75}
           defaultTimeStart={defaultTimeStart}
           defaultTimeEnd={defaultTimeEnd}
+          canvasTimeStart={minTime}
+          canvasTimeEnd={maxTime}
           verticalLineClassNamesForTime={this.verticalLineClassNamesForTime}
         />
       </div>

diff --git a/src/lib/Timeline.js b/src/lib/Timeline.js
@@ -106,6 +106,8 @@ export default class ReactCalendarTimeline extends Component {
 
     defaultTimeStart: PropTypes.object,
     defaultTimeEnd: PropTypes.object,
+    canvasTimeStart: PropTypes.number,
+    canvasTimeEnd: PropTypes.number,
 
     visibleTimeStart: PropTypes.number,
     visibleTimeEnd: PropTypes.number,
@@ -265,9 +267,15 @@ export default class ReactCalendarTimeline extends Component {
       )
     }
 
+    if(!this.props.canvasTimeStart || !this.props.canvasTimeEnd) {
+      throw new Error(
+        'You must provide either "canvasTimeStart" and "canvasTimeEnd" to initialize the Timeline'
+      )
+    }
+
     const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(
-      visibleTimeStart,
-      visibleTimeEnd,
+      props.canvasTimeStart,
+      props.canvasTimeEnd,
       props.buffer,
     )
 

diff --git a/src/lib/utility/calendar.js b/src/lib/utility/calendar.js
@@ -402,7 +402,7 @@ export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) {
       groupHeights.push(Math.max(groupHeight, lineHeight))
     }
   }
-  
+
   return {
     height: sum(groupHeights),
     groupHeights,
@@ -411,11 +411,11 @@ export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) {
 }
 
 /**
- * 
- * @param {*} itemsDimensions 
- * @param {*} isGroupStacked 
- * @param {*} lineHeight 
- * @param {*} groupTop 
+ *
+ * @param {*} itemsDimensions
+ * @param {*} isGroupStacked
+ * @param {*} lineHeight
+ * @param {*} groupTop
  */
 export function stackGroup(itemsDimensions, isGroupStacked, lineHeight, groupTop) {
   var groupHeight = 0
@@ -643,8 +643,8 @@ export function getCanvasBoundariesFromVisibleTime(
 ) {
   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 canvasTimeEnd = canvasTimeStart + zoom * buffer
+  const canvasTimeStart = visibleTimeStart
+  const canvasTimeEnd = visibleTimeEnd
   return [canvasTimeStart, canvasTimeEnd]
 }
 
@@ -667,7 +667,8 @@ export function calculateScrollCanvas(
   items,
   groups,
   props,
-  state
+  state,
+
 ) {
   const buffer = props.buffer;
   const oldCanvasTimeStart = state.canvasTimeStart
@@ -686,8 +687,8 @@ export function calculateScrollCanvas(
 
   if (!canKeepCanvas || forceUpdateDimensions) {
     const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(
-      visibleTimeStart,
-      visibleTimeEnd,
+      state.canvasTimeStart,
+      state.canvasTimeEnd,
       buffer
     )
     newState.canvasTimeStart = canvasTimeStart