Press esc to cancel mouse zooming

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>

doc/documentation.md

@@ -40,6 +40,7 @@ A reusable time axis component, that can be used independently of the other comp
 * Horizontal zooming can be performed using Ctrl+mouse wheel. The zooming is centered on the mouse cursor position.
 * Horizontal panning can be performed using the middle mouse button or Ctrl+left mouse button.
 * Horizontal zooming selection can be performed using the right mouse button.
+* Horizontal zooming can be cancelled by pressing the `esc` button while zooming using the right click + drag.
 * The view is connected to a time controller instance and synchronizes its viewport, zoom level cursors bi-directionally.
 
 ## Data Model

timeline-chart/src/layer/time-graph-chart.ts

@@ -155,6 +155,11 @@ export class TimeGraphChart extends TimeGraphChartLayer {
                 }
                 event.preventDefault();
             }
+            if (keyPressed === 'Escape' && this.mouseZooming) {
+                this.mouseZooming = false;
+                this.stage.cursor = 'default';
+                this.updateZoomingSelection();
+            }
         };
         this._keyUpHandler = (event: KeyboardEvent) => {
             const keyPressed = event.key;