From aa8f08b35b94fec631b9cbe5555c28e3cce0563e Mon Sep 17 00:00:00 2001
From: Bono Stebler <bs85@users.noreply.github.com>
Date: Mon, 19 Nov 2018 16:26:03 +0100
Subject: [PATCH] feat: add selecting and drag cancelation (#1119)

* feat: cancel drag on Esc press

* fix: always reset drag when an event happens out of bounds

* feat: cancel selection on Esc press
---
 src/DayColumn.js                                |  8 +++++++-
 src/Selection.js                                | 13 +++++++++++--
 src/addons/dragAndDrop/EventContainerWrapper.js |  5 +++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/DayColumn.js b/src/DayColumn.js
index 75eeedeaf..de823199f 100644
--- a/src/DayColumn.js
+++ b/src/DayColumn.js
@@ -188,7 +188,7 @@ class DayColumn extends React.Component {
       events,
       accessors,
       slotMetrics,
-      minimumStartDifference: Math.ceil(step * timeslots / 2),
+      minimumStartDifference: Math.ceil((step * timeslots) / 2),
     })
 
     return styledEvents.map(({ event, style }, idx) => {
@@ -318,6 +318,12 @@ class DayColumn extends React.Component {
         this.setState({ selecting: false })
       }
     })
+
+    selector.on('reset', () => {
+      if (this.state.selecting) {
+        this.setState({ selecting: false })
+      }
+    })
   }
 
   _teardownSelectable = () => {
diff --git a/src/Selection.js b/src/Selection.js
index 36acbff60..29b7b3e6e 100644
--- a/src/Selection.js
+++ b/src/Selection.js
@@ -94,6 +94,7 @@ class Selection {
     this._onTouchMoveWindowListener && this._onTouchMoveWindowListener.remove()
     this._onInitialEventListener && this._onInitialEventListener.remove()
     this._onEndListener && this._onEndListener.remove()
+    this._onEscListener && this._onEscListener.remove()
     this._onMoveListener && this._onMoveListener.remove()
     this._onKeyUpListener && this._onKeyUpListener.remove()
     this._onKeyDownListener && this._onKeyDownListener.remove()
@@ -237,6 +238,10 @@ class Selection {
           'mouseup',
           this._handleTerminatingEvent
         )
+        this._onEscListener = addEventListener(
+          'keydown',
+          this._handleTerminatingEvent
+        )
         this._onMoveListener = addEventListener(
           'mousemove',
           this._handleMoveEvent
@@ -274,7 +279,11 @@ class Selection {
 
     this._initialEventData = null
 
-    if (click && !inRoot) {
+    if (e.key === 'Escape') {
+      return this.emit('reset')
+    }
+
+    if (!inRoot) {
       return this.emit('reset')
     }
 
@@ -318,7 +327,7 @@ class Selection {
 
   _handleMoveEvent(e) {
     if (this._initialEventData === null) {
-      return;
+      return
     }
 
     let { x, y } = this._initialEventData
diff --git a/src/addons/dragAndDrop/EventContainerWrapper.js b/src/addons/dragAndDrop/EventContainerWrapper.js
index e0d0afdcd..d2cfec621 100644
--- a/src/addons/dragAndDrop/EventContainerWrapper.js
+++ b/src/addons/dragAndDrop/EventContainerWrapper.js
@@ -151,6 +151,11 @@ class EventContainerWrapper extends React.Component {
     })
 
     selector.on('click', () => this.context.draggable.onEnd(null))
+
+    selector.on('reset', () => {
+      this.reset()
+      this.context.draggable.onEnd(null)
+    })
   }
 
   handleInteractionEnd = () => {