Merge pull request #305 from Dessia-tech/fix/prevent_default

fix(prevent_default): add line codes to prevent defualt

Author: Tanguylo

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Handle empty elements in Scatter
 - Offset & Margin in ParallelPlot
 - Performance for curves drawing in ParallelPlot
+- Events on window outside canvas are disabled
 
 ### Add
 - Parallel plot feature with:

src/multiplots.ts

@@ -1897,6 +1897,7 @@ export class MultiplePlots {
       });
 
       window.addEventListener('keyup', e => {
+        e.preventDefault();
         if (e.key == "Control") ctrlKey = false;
         if (e.key == "Shift") {
           shiftKey = false;
@@ -1907,6 +1908,7 @@ export class MultiplePlots {
       });
 
       this.canvas.addEventListener('mousedown', e => {
+        e.preventDefault();
         isDrawing = true;
         mouse1X = e.offsetX;
         mouse1Y = e.offsetY;
@@ -1937,6 +1939,7 @@ export class MultiplePlots {
       });
 
       this.canvas.addEventListener('mousemove', e => {
+        e.preventDefault();
         var old_mouse2X = mouse2X; var old_mouse2Y = mouse2Y;
         mouse2X = e.offsetX; mouse2Y = e.offsetY;
         if (this.isSelecting) this.canvas.style.cursor = 'crosshair';
@@ -1999,6 +2002,7 @@ export class MultiplePlots {
       });
 
       this.canvas.addEventListener('mouseup', e => {
+        e.preventDefault();
         mouse3X = e.offsetX;
         mouse3Y = e.offsetY;
         var click_on_manip_button = Shape.isInRect(mouse3X, mouse3Y, this.transbutton_x, this.button_y, this.button_w, this.button_h);

src/subplots.ts

@@ -1881,21 +1881,24 @@ export class Figure extends PlotData {
           if (!ctrlKey) { this.isSelecting = true; canvas.style.cursor = 'crosshair'; this.draw() };
         }
         if (e.key == " ") {
+          e.preventDefault();
           spaceKey = true;
           if (ctrlKey && this.isInCanvas(absoluteMouse)) this.resetView();
         }
       });
 
       window.addEventListener('keyup', e => {
+        e.preventDefault();
         if (e.key == "Control") ctrlKey = false;
         if (e.key == " ") spaceKey = false;
         if (e.key == "Shift") { shiftKey = false; this.isSelecting = false; this.is_drawing_rubber_band = false; canvas.style.cursor = 'default'; this.draw() };
       });
 
       canvas.addEventListener('mousemove', e => {
+        e.preventDefault();
         [canvasMouse, frameMouse, absoluteMouse] = this.projectMouse(e);
         this.mouseMove(canvasMouse, frameMouse, absoluteMouse);
-        if (this.isZooming) canvas.style.cursor = 'crosshair';
+        if (this.isZooming || this.isSelecting) canvas.style.cursor = 'crosshair';
         if (this.interaction_ON) {
           if (isDrawing) {
             const translation = this.mouseTranslate(canvasMouse, canvasDown);
@@ -1914,14 +1917,14 @@ export class Figure extends PlotData {
         if (!mouseInCanvas) isDrawing = false;
       });
 
-      canvas.addEventListener('mousedown', e => {
+      canvas.addEventListener('mousedown', () => {
         [canvasDown, frameDown, clickedObject] = this.mouseDown(canvasMouse, frameMouse, absoluteMouse);
         if (!(clickedObject instanceof newAxis)) this.is_drawing_rubber_band = this.isSelecting;
         if (ctrlKey && shiftKey) this.reset();
         isDrawing = true;
       });
 
-      canvas.addEventListener('mouseup', e => {
+      canvas.addEventListener('mouseup', () => {
         if (this.isZooming) {
           this.switchZoom();
           this.zoomBoxUpdateAxes(zoomBox);
@@ -1933,14 +1936,15 @@ export class Figure extends PlotData {
       })
 
       canvas.addEventListener('wheel', e => {
+        e.preventDefault();
         if (this.interaction_ON) {
           this.wheelFromEvent(e);
           this.updateWithScale();
           this.draw();
         }
       });
 
-      canvas.addEventListener('mouseleave', e => {
+      canvas.addEventListener('mouseleave', () => {
         isDrawing = false;
         ctrlKey = false;
         this.axes.forEach(axis => axis.saveLocation());