diff --git a/demo/app/demo-controlled-scrolling/index.js b/demo/app/demo-controlled-scrolling/index.js index fb41f3bc9..5ebcf64fe 100644 --- 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} > diff --git a/demo/app/demo-controlled-select/index.js b/demo/app/demo-controlled-select/index.js index 5202868b6..a5a1cad36 100644 --- 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} > diff --git a/demo/app/demo-custom-info-label/index.js b/demo/app/demo-custom-info-label/index.js index a2f3b9012..f1064d3bb 100644 --- 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} /> ) diff --git a/demo/app/demo-custom-items/index.js b/demo/app/demo-custom-items/index.js index 73a3e8d10..10a903b3a 100644 --- 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 index ff25558fe..1ed512bdf 100644 --- 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} />
diff --git a/demo/app/demo-headers/index.js b/demo/app/demo-headers/index.js index 459ee48d0..d02e8a4c4 100644 --- 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={
Above The Right
} + canvasTimeStart={minTime} + canvasTimeEnd={maxTime} > @@ -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 index 8ec0af119..6d0faef48 100644 --- 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 index e12ef5a79..8b2c47aca 100644 --- 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 index 97c940d00..7da730882 100644 --- 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 index 898dfb426..40f876db7 100644 --- 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 index 63cb3ea2e..f8d1eb61a 100644 --- 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 index c8f0fbc5f..5fd9bd43b 100644 --- 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} />
diff --git a/src/lib/Timeline.js b/src/lib/Timeline.js index c77ba2f35..4199617bf 100644 --- 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 index c4721b13e..a3e87aec5 100644 --- 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