Controlled canvas width

demo/app/demo-non-scrollable-timeline/index.js

@@ -0,0 +1,150 @@
+/* eslint-disable no-console */
+import React, { Component } from 'react'
+import moment from 'moment'
+import Timeline, {
+  TimelineMarkers,
+  TodayMarker,
+  CustomMarker,
+  CursorMarker,
+} from 'react-calendar-timeline'
+import generateFakeData from '../generate-fake-data'
+
+
+var keys = {
+  groupIdKey: 'id',
+  groupTitleKey: 'title',
+  groupRightTitleKey: 'rightTitle',
+  itemIdKey: 'id',
+  itemTitleKey: 'title',
+  itemDivTitleKey: 'title',
+  itemGroupKey: 'group',
+  itemTimeStartKey: 'start',
+  itemTimeEndKey: 'end'
+}
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+
+    const { groups, items } = generateFakeData()
+    const defaultTimeStart = moment()
+      .startOf('day')
+      .toDate()
+    const defaultTimeEnd = moment()
+      .startOf('day')
+      .add(1, 'day')
+      .toDate()
+
+    this.state = {
+      groups,
+      items,
+      defaultTimeStart,
+      defaultTimeEnd
+    }
+  }
+
+  handleCanvasClick = (groupId, time) => {
+    console.log('Canvas clicked', groupId, moment(time).format())
+  }
+
+  handleCanvasDoubleClick = (groupId, time) => {
+    console.log('Canvas double clicked', groupId, moment(time).format())
+  }
+
+  handleCanvasContextMenu = (group, time) => {
+    console.log('Canvas context menu', group, moment(time).format())
+  }
+
+  handleItemClick = (itemId, _, time) => {
+    console.log('Clicked: ' + itemId, moment(time).format())
+  }
+
+  handleItemSelect = (itemId, _, time) => {
+    console.log('Selected: ' + itemId, moment(time).format())
+  }
+
+  handleItemDoubleClick = (itemId, _, time) => {
+    console.log('Double Click: ' + itemId, moment(time).format())
+  }
+
+  handleItemContextMenu = (itemId, _, time) => {
+    console.log('Context Menu: ' + itemId, moment(time).format())
+  }
+
+  handleItemMove = (itemId, dragTime, newGroupOrder) => {
+    const { items, groups } = this.state
+
+    const group = groups[newGroupOrder]
+
+    this.setState({
+      items: items.map(
+        item =>
+          item.id === itemId
+            ? Object.assign({}, item, {
+                start: dragTime,
+                end: dragTime + (item.end - item.start),
+                group: group.id
+              })
+            : item
+      )
+    })
+
+    console.log('Moved', itemId, dragTime, newGroupOrder)
+  }
+
+  handleItemResize = (itemId, time, edge) => {
+    const { items } = this.state
+
+    this.setState({
+      items: items.map(
+        item =>
+          item.id === itemId
+            ? Object.assign({}, item, {
+                start: edge === 'left' ? time : item.start,
+                end: edge === 'left' ? item.end : time
+              })
+            : item
+      )
+    })
+
+    console.log('Resized', itemId, time, edge)
+  }
+
+  render() {
+    const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state
+
+    return (
+      <Timeline
+        groups={groups}
+        items={items}
+        keys={keys}
+        sidebarWidth={150}
+        sidebarContent={<div>Above The Left</div>}
+        canMove
+        canResize="right"
+        canSelect
+        itemsSorted
+        itemTouchSendsClick={false}
+        stackItems
+        itemHeightRatio={0.75}
+        defaultTimeStart={defaultTimeStart}
+        defaultTimeEnd={defaultTimeEnd}
+        onCanvasClick={this.handleCanvasClick}
+        onCanvasDoubleClick={this.handleCanvasDoubleClick}
+        onCanvasContextMenu={this.handleCanvasContextMenu}
+        onItemClick={this.handleItemClick}
+        onItemSelect={this.handleItemSelect}
+        onItemContextMenu={this.handleItemContextMenu}
+        onItemMove={this.handleItemMove}
+        onItemResize={this.handleItemResize}
+        onItemDoubleClick={this.handleItemDoubleClick}
+        resizableCanvas= {false}
+      >
+        <TimelineMarkers>
+          <TodayMarker />
+          <CursorMarker />
+        </TimelineMarkers>
+      </Timeline>
+    )
+  }
+}

demo/app/index.js

@@ -16,7 +16,8 @@ const demos = {
   customItems: require('./demo-custom-items').default,
   customHeaders: require('./demo-headers').default,
   customInfoLabel: require('./demo-custom-info-label').default,
-  controledSelect: require('./demo-controlled-select').default
+  controledSelect: require('./demo-controlled-select').default,
+  nonScrollableTimeline: require('./demo-non-scrollable-timeline').default,
 }
 
 // A simple component that shows the pathname of the current location

src/lib/Timeline.js

@@ -16,6 +16,7 @@ import {
   calculateTimeForXPosition,
   calculateScrollCanvas,
   getCanvasBoundariesFromVisibleTime,
+  getCanvasWidthFactor,
   getCanvasWidth,
   stackTimelineItems
 } from './utility/calendar'
@@ -157,7 +158,9 @@ export default class ReactCalendarTimeline extends Component {
 
     verticalLineClassNamesForTime: PropTypes.func,
 
-    children: PropTypes.node
+    children: PropTypes.node,
+
+    resizableCanvas: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -291,7 +294,8 @@ export default class ReactCalendarTimeline extends Component {
 
     const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(
       visibleTimeStart,
-      visibleTimeEnd
+      visibleTimeEnd,
+      this.props.resizableCanvas
     )
 
     this.state = {
@@ -305,10 +309,11 @@ export default class ReactCalendarTimeline extends Component {
       dragGroupTitle: null,
       resizeTime: null,
       resizingItem: null,
-      resizingEdge: null
+      resizingEdge: null,
+      canvasWidthFactor: getCanvasWidthFactor(this.props.resizableCanvas)
     }
 
-    const canvasWidth = getCanvasWidth(this.state.width)
+    const canvasWidth = getCanvasWidth(this.state.width, this.state.canvasWidthFactor)
 
     const {
       dimensionItems,
@@ -389,7 +394,7 @@ export default class ReactCalendarTimeline extends Component {
       )
     } else if (forceUpdate) {
       // Calculate new item stack position as canvas may have changed
-      const canvasWidth = getCanvasWidth(prevState.width)
+      const canvasWidth = getCanvasWidth(prevState.width, prevState.canvasWidthFactor)
       Object.assign(
         derivedState,
         stackTimelineItems(
@@ -431,7 +436,7 @@ export default class ReactCalendarTimeline extends Component {
     ) {
       this.props.onBoundsChange(
         this.state.canvasTimeStart,
-        this.state.canvasTimeStart + newZoom * 3
+        this.state.canvasTimeStart + newZoom * getCanvasWidthFactor(this.props.resizableCanvas)
       )
     }
 
@@ -491,11 +496,19 @@ export default class ReactCalendarTimeline extends Component {
       groupTops
     })
 
+    if(!this.props.resizableCanvas){
+      return;
+    }
+
     this.scrollComponent.scrollLeft = width
     this.scrollHeaderRef.scrollLeft = width
   }
 
   onScroll = scrollX => {
+    if(!this.props.resizableCanvas){
+      return;
+    }
+
     const width = this.state.width
 
     const canvasTimeStart = this.state.canvasTimeStart
@@ -542,6 +555,10 @@ export default class ReactCalendarTimeline extends Component {
   }
 
   changeZoom = (scale, offset = 0.5) => {
+    if(!this.props.resizableCanvas){
+      return;
+    }
+
     const { minZoom, maxZoom } = this.props
     const oldZoom = this.state.visibleTimeEnd - this.state.visibleTimeStart
     const newZoom = Math.min(
@@ -615,7 +632,7 @@ export default class ReactCalendarTimeline extends Component {
   // as well as generalizing how we get time from click on the canvas
   getTimeFromRowClickEvent = e => {
     const { dragSnap } = this.props
-    const { width, canvasTimeStart, canvasTimeEnd } = this.state
+    const { width, canvasTimeStart, canvasTimeEnd, canvasWidthFactor} = this.state
     // this gives us distance from left of row element, so event is in
     // context of the row element, not client or page
     const { offsetX } = e.nativeEvent
@@ -624,7 +641,7 @@ export default class ReactCalendarTimeline extends Component {
       canvasTimeStart,
 
       canvasTimeEnd,
-      getCanvasWidth(width),
+      getCanvasWidth(width, canvasWidthFactor),
       offsetX
     )
     time = Math.floor(time / dragSnap) * dragSnap
@@ -983,12 +1000,13 @@ export default class ReactCalendarTimeline extends Component {
       visibleTimeStart,
       visibleTimeEnd,
       canvasTimeStart,
-      canvasTimeEnd
+      canvasTimeEnd,
+      canvasWidthFactor
     } = this.state
     let { dimensionItems, height, groupHeights, groupTops } = this.state
 
     const zoom = visibleTimeEnd - visibleTimeStart
-    const canvasWidth = getCanvasWidth(width)
+    const canvasWidth = getCanvasWidth(width, canvasWidthFactor)
     const minUnit = getMinUnit(zoom, width, timeSteps)
 
     const isInteractingWithItem = !!draggingItem || !!resizingItem

src/lib/utility/calendar.js

@@ -542,6 +542,13 @@ export function getCanvasWidth(width, buffer = 3) {
   return width * buffer
 }
 
+/**
+ * get canvas width factor
+ * @param {*} shouldExpandCanvas
+ */
+ export function getCanvasWidthFactor(shouldExpandCanvas = true) {
+  return shouldExpandCanvas? 3 : 1;
+}
 /**
  * get item's position, dimensions and collisions
  * @param {*} item
@@ -636,14 +643,19 @@ export function getItemWithInteractions({
  * @param {number} visibleTimeStart
  * @param {number} visibleTimeEnd
  */
-export function getCanvasBoundariesFromVisibleTime(
+ export function getCanvasBoundariesFromVisibleTime(
   visibleTimeStart,
-  visibleTimeEnd
+  visibleTimeEnd,
+  shouldExpandCanvasBoundaries = true
 ) {
+  if(!shouldExpandCanvasBoundaries)
+  {
+    return [visibleTimeStart, visibleTimeEnd];
+  }
   const zoom = visibleTimeEnd - visibleTimeStart
   const canvasTimeStart = visibleTimeStart - (visibleTimeEnd - visibleTimeStart)
   const canvasTimeEnd = canvasTimeStart + zoom * 3
-  return [canvasTimeStart, canvasTimeEnd]
+  return [canvasTimeStart, canvasTimeEnd];
 }
 
 /**
@@ -658,7 +670,7 @@ export function getCanvasBoundariesFromVisibleTime(
  * @param {*} props
  * @param {*} state
  */
-export function calculateScrollCanvas(
+ export function calculateScrollCanvas(
   visibleTimeStart,
   visibleTimeEnd,
   forceUpdateDimensions,
@@ -683,7 +695,8 @@ export function calculateScrollCanvas(
   if (!canKeepCanvas || forceUpdateDimensions) {
     const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(
       visibleTimeStart,
-      visibleTimeEnd
+      visibleTimeEnd,
+      props.resizableCanvas
     )
     newState.canvasTimeStart = canvasTimeStart
     newState.canvasTimeEnd = canvasTimeEnd
@@ -692,7 +705,7 @@ export function calculateScrollCanvas(
       ...newState
     }
 
-    const canvasWidth = getCanvasWidth(mergedState.width)
+    const canvasWidth = getCanvasWidth(mergedState.width, state.canvasWidthFactor)
 
     // The canvas cannot be kept, so calculate the new items position
     Object.assign(