Issue 500 diagonal scroll trackpad

CHANGELOG.md

@@ -6,7 +6,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres (more or less) to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
-
+* Added X and Y dragging on calender component
+* Restored diagonal scrolling with trackpad
+* fixed bug with shuftKey modifier when scrolling
 
 ## 0.28.0
 

src/lib/scroll/ScrollElement.js

@@ -33,39 +33,45 @@ class ScrollElement extends Component {
   refHandler = el => {
     this.scrollComponent = el
     this.props.scrollRef(el)
-    if(el){
-      el.addEventListener('wheel', this.handleWheel, {passive: false});
+    if (el) {
+      el.addEventListener('wheel', this.handleWheel, { passive: false });
     }
   }
-  
+
 
   handleWheel = e => {
     const { traditionalZoom } = this.props
 
-
-
     // zoom in the time dimension
     if (e.ctrlKey || e.metaKey || e.altKey) {
-      e.preventDefault()
-      const parentPosition = getParentPosition(e.currentTarget)
-      const xPosition = e.clientX - parentPosition.x
+      if (!traditionalZoom) {
+        e.preventDefault()
+        const parentPosition = getParentPosition(e.currentTarget)
+        const xPosition = e.clientX - parentPosition.x
 
-      const speed = e.ctrlKey ? 10 : e.metaKey ? 3 : 1
+        const speed = e.ctrlKey ? 10 : e.metaKey ? 3 : 1
 
-      // convert vertical zoom to horiziontal
-      this.props.onWheelZoom(speed, xPosition, e.deltaY)
+        // convert vertical zoom to horiziontal
+        this.props.onWheelZoom(speed, xPosition, e.deltaY)
+      }
     } else if (e.shiftKey) {
       e.preventDefault()
-      // shift+scroll event from a touchpad has deltaY property populated; shift+scroll event from a mouse has deltaX
-      this.props.onScroll(this.scrollComponent.scrollLeft + (e.deltaY || e.deltaX))
-      // no modifier pressed? we prevented the default event, so scroll or zoom as needed
+     /*shift+scroll event from a mouse wheel has deltaX, but shift+scroll event from a touchpad has the potential to change both delatX deltaY when moving diagonally
+     checking deltaX first in this ternary prevents bugs when both deltaY and deltaX are changing by prioritizing deltaX*/
+      this.props.onScroll(this.scrollComponent.scrollLeft + (e.deltaX || e.deltaY))
+    } else {
+       // no modifier pressed? 
+       e.preventDefault();
+      this.scrollComponent.scrollLeft += e.deltaX
+      window.scrollBy(0, e.deltaY)
     }
   }
 
   handleMouseDown = e => {
     if (e.button === 0) {
-      this.dragStartPosition = e.pageX
-      this.dragLastPosition = e.pageX
+      //make drag position variables contain both x and y
+      this.dragStartPosition = { x: e.pageX, y: e.pageY }
+      this.dragLastPosition = { x: e.pageX, y: e.pageY }
       this.setState({
         isDragging: true
       })
@@ -76,8 +82,11 @@ class ScrollElement extends Component {
     // this.props.onMouseMove(e)
     //why is interacting with item important?
     if (this.state.isDragging && !this.props.isInteractingWithItem) {
-      this.props.onScroll(this.scrollComponent.scrollLeft + this.dragLastPosition - e.pageX)
-      this.dragLastPosition = e.pageX
+      //scroll window for vertical scrolling along with scrolling the component horizontally
+      const yPositionChange = this.dragLastPosition.y - e.pageY;
+      window.scrollBy(0,  yPositionChange);
+      this.props.onScroll(this.scrollComponent.scrollLeft + this.dragLastPosition.x - e.pageX)
+      this.dragLastPosition.x = e.pageX
     }
   }
 
@@ -168,8 +177,8 @@ class ScrollElement extends Component {
     }
   }
 
-  componentWillUnmount(){
-    if(this.scrollComponent){
+  componentWillUnmount() {
+    if (this.scrollComponent) {
       this.scrollComponent.removeEventListener('wheel', this.handleWheel);
     }
   }