fixed draggable components overreliance on window events

modules/components/src/components/flat-slider/flat-slider.component.html

@@ -1,8 +1,6 @@
 
 <div class="container" #container 
 [ngStyle]="containerStyle" 
-(mousewheel)="mouseWheel($event)"
-(mousedown)="mousedown($event)"
 >
   <div class="groove" [ngStyle]="grooveStyle"></div>
   <div class="groove-filling" [ngStyle]="grooveFillingStyle"></div>

modules/components/src/components/flat-slider/flat-slider.component.ts

@@ -139,9 +139,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit () {
-    window.addEventListener('mousemove', this.mousemove, true)
-
-    window.addEventListener('mouseup', this.mouseup, true)
   }
 
   public clampValue (value: number) {
@@ -200,6 +197,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     return value
   }
 
+  @HostListener('mousedown', [ '$event' ])
   mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.dragging = true
@@ -208,6 +206,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousemove', [ '$event' ])
   mousemove = (event: MouseEvent) => {
     if (this.enabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -215,6 +214,29 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mouseleave', [ '$event' ])
+  mouseleave () {
+    if (this.dragging) {
+      this.attachWindowEvents()
+    }
+  }
+
+  @HostListener('mouseup', [ '$event' ])
+  mouseup = (event: MouseEvent) => {
+    this.dragging = false
+    this.dettachWindowEvents()
+  }
+
+  private attachWindowEvents () {
+    window.addEventListener('mousemove', this.mousemove, true)
+    window.addEventListener('mouseup', this.mouseup, true)
+  }
+
+  private dettachWindowEvents () {
+    window.removeEventListener('mousemove', this.mousemove, true)
+    window.removeEventListener('mouseup', this.mouseup, true)
+  }
+
   public doubleclickTimeout?: number
   doubleclick () {
     if (this.enabled && this.doubleClickToAnimateToMiddle) {
@@ -245,10 +267,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     }
   }
 
-  mouseup = (event: MouseEvent) => {
-    this.dragging = false
-  }
-
   get progress () {
     return this.getProgress(this.value)
   }
@@ -396,7 +414,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    window.removeEventListener('mousemove', this.mousemove, true)
-    window.removeEventListener('mouseup', this.mouseup, true)
+    this.dettachWindowEvents()
   }
 }

modules/components/src/components/knob/knob.component.html

@@ -1,5 +1,4 @@
-<div #container class="container" (dblclick)="doubleclick()"
-  (mousedown)="mousedown($event)" (mouseup)="mouseup($event)">
+<div #container class="container" (dblclick)="doubleclick()">
 
   <!-- Large -->
   <div *ngIf="size === 'large'" class="knob large">

modules/components/src/components/knob/knob.component.ts

@@ -90,8 +90,6 @@ export class KnobComponent implements OnInit, OnDestroy {
 
   async ngOnInit () {
     this.container = this.containerRef.nativeElement
-    window.addEventListener('mousemove', this.mousemove, true)
-    window.addEventListener('mouseup', this.mouseup, true)
   }
 
   private lastWheelEvent = new Date().getTime()
@@ -108,6 +106,7 @@ export class KnobComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousedown', [ '$event' ])
   mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.continueAnimation = false
@@ -130,6 +129,7 @@ export class KnobComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousemove', [ '$event' ])
   mousemove = (event: MouseEvent) => {
     if (this.enabled) {
       if (this.setDraggingFalseTimeout) {
@@ -147,8 +147,27 @@ export class KnobComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mouseleave', [ '$event' ])
+  mouseleave () {
+    if (this.dragging) {
+      this.attachWindowEvents()
+    }
+  }
+
+  @HostListener('mouseup', [ '$event' ])
   mouseup = (event: MouseEvent) => {
     this.dragging = false
+    this.dettachWindowEvents()
+  }
+
+  private attachWindowEvents () {
+    window.addEventListener('mousemove', this.mousemove, true)
+    window.addEventListener('mouseup', this.mouseup, true)
+  }
+
+  private dettachWindowEvents () {
+    window.removeEventListener('mousemove', this.mousemove, true)
+    window.removeEventListener('mouseup', this.mouseup, true)
   }
 
   doubleclick () {
@@ -239,7 +258,6 @@ export class KnobComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    window.removeEventListener('mousemove', this.mousemove, true)
-    window.removeEventListener('mouseup', this.mouseup, true)
+    this.dettachWindowEvents()
   }
 }

modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts

@@ -114,7 +114,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   }
 
   @HostListener('mousedown', [ '$event' ])
-  onMouseDown (event: MouseEvent) {
+  mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.dragging = true
       if (!this.doubleclickTimeout) {
@@ -127,6 +127,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousemove', [ '$event' ])
   mousemove = (event: MouseEvent) => {
     if (this.enabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -134,8 +135,27 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mouseleave', [ '$event' ])
+  mouseleave () {
+    if (this.dragging) {
+      this.attachWindowEvents()
+    }
+  }
+
+  @HostListener('mouseup', [ '$event' ])
   mouseup = (event: MouseEvent) => {
     this.dragging = false
+    this.dettachWindowEvents()
+  }
+
+  private attachWindowEvents () {
+    window.addEventListener('mousemove', this.mousemove, true)
+    window.addEventListener('mouseup', this.mouseup, true)
+  }
+
+  private dettachWindowEvents () {
+    window.removeEventListener('mousemove', this.mousemove, true)
+    window.removeEventListener('mouseup', this.mouseup, true)
   }
 
   doubleclick () {
@@ -157,9 +177,6 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
       this.drawNotches()
       setTimeout(() => this.drawNotches())
     }
-
-    window.addEventListener('mousemove', this.mousemove, true)
-    window.addEventListener('mouseup', this.mouseup, true)
   }
 
   async animateSlider (from: number, to: number) {
@@ -205,7 +222,6 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    window.removeEventListener('mousemove', this.mousemove, true)
-    window.removeEventListener('mouseup', this.mouseup, true)
+    this.dettachWindowEvents()
   }
 }