mcomponents mousewheel optimizations

Author: nodeful

modules/components/src/components.module.ts

@@ -7,10 +7,6 @@ import {
 import {
   KnobComponent
 } from './components/knob/knob.component'
-import {
-  MouseWheelDirective
-} from './directives/mousewheel.directive'
-
 import {
   ValueScreenComponent
 } from './components/value-screen/value-screen.component'
@@ -58,7 +54,6 @@ import { ColorsService } from './services/colors.service'
   declarations: [
     ClickedOutsideDirective,
     KnobComponent,
-    MouseWheelDirective,
     ValueScreenComponent,
     ButtonComponent,
     ToggleComponent,

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

@@ -1,5 +1,13 @@
 
-<div class="container" #container [ngStyle]="containerStyle">
+<div class="container" #container 
+[ngStyle]="containerStyle" 
+(mousewheel)="mouseWheel($event)"
+(mousedown)="mousedown($event)"
+(mouseup)="mouseup($event)"
+(mousemove)="mousemove($event)"
+(mouseenter)="mouseenter()"
+(mouseleave)="mouseleave()"
+>
   <div class="groove" [ngStyle]="grooveStyle"></div>
   <div class="groove-filling" [ngStyle]="grooveFillingStyle"></div>
   <div class="thumbNotch" *ngIf="showMiddleNotch" [ngStyle]="thumbNotchStyle"></div>

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

@@ -4,9 +4,9 @@ import {
   Input,
   Output,
   EventEmitter,
-  HostListener,
   ElementRef,
-  HostBinding
+  HostBinding,
+  HostListener
 } from '@angular/core'
 import {
   UtilitiesService
@@ -28,7 +28,7 @@ export interface FlatSliderValueChangedEvent {
 export class FlatSliderComponent {
   constructor (
     public utils: UtilitiesService,
-    public elem: ElementRef,
+    public elem: ElementRef<HTMLElement>,
     public sanitizer: DomSanitizer
   ) {}
 
@@ -47,6 +47,7 @@ export class FlatSliderComponent {
   @Input() notches: number[]
   @Input() thumbRadius = 4
   @Input() thumbBorderSize = 1
+  @Input() wheelAnimationFPS = 30
 
   @Output() stickedToMiddle = new EventEmitter()
   @ViewChild('container', { static: true }) containerRef!: ElementRef
@@ -141,10 +142,14 @@ export class FlatSliderComponent {
     return value
   }
 
+  private lastWheelEvent = new Date().getTime()
+  private get wheelDebouncer () { return 1000 / this.wheelAnimationFPS }
   @HostListener('mousewheel', [ '$event' ])
   mouseWheel (event: WheelEvent) {
     if (this.enabled && this.scrollEnabled) {
-      // const multiplier = (this.max - this.min) / 1000
+      const now = new Date().getTime()
+      if (now - this.lastWheelEvent < this.wheelDebouncer) return
+      this.lastWheelEvent = now
       let progress = this.progress
       progress += -event.deltaY / 1000
       if (progress < 0) progress = 0
@@ -187,7 +192,6 @@ export class FlatSliderComponent {
     return value
   }
 
-  @HostListener('mousedown', [ '$event' ])
   mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.dragging = true
@@ -196,7 +200,6 @@ export class FlatSliderComponent {
     }
   }
 
-  @HostListener('mousemove', [ '$event' ])
   mousemove (event: MouseEvent) {
     if (this.enabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -205,13 +208,11 @@ export class FlatSliderComponent {
   }
 
   public mouseInside = false
-  @HostListener('mouseenter')
-  onMouseEnter (): void {
+  mouseenter (): void {
     this.mouseInside = true
   }
 
-  @HostListener('mouseleave')
-  onMouseLeave (): void {
+  mouseleave (): void {
     this.mouseInside = false
     this.dragging = false
   }
@@ -246,11 +247,6 @@ export class FlatSliderComponent {
     }
   }
 
-  @HostListener('mouseup', [ '$event' ])
-  onMouseUp (event: MouseEvent) {
-    this.dragging = false
-  }
-
   mouseup (event: MouseEvent) {
     this.dragging = false
   }

modules/components/src/components/icon/icons.ts

@@ -1,3 +1,7 @@
 <eqm-container class="container" #container>
-  <input [(ngModel)]="text" [placeholder]="placeholder" (input)="inputChanged()" (keyup.enter)="enterPressed()" class="input-field" [readonly]="!enabled || !editable" [style.font-size.px]="fontSize">
+  <input [type]="type" [(ngModel)]="text" 
+  [placeholder]="placeholder" autocomplete="true"
+  (input)="inputChanged()" (keyup.enter)="enterPressed()" 
+  class="input-field" [readonly]="!enabled || !editable" 
+  [style.font-size.px]="fontSize">
 </eqm-container>

modules/components/src/components/input-field/input-field.component.html

@@ -13,6 +13,7 @@ export class InputFieldComponent implements OnInit {
   @Input() editable = true
   @HostBinding('class.enabled') @Input() enabled = true
   @Input() fontSize = 12
+  @Input() type: string = 'text'
   @ViewChild('container', { static: true }) container!: ElementRef
 
   ngOnInit () {

modules/components/src/components/input-field/input-field.component.ts

@@ -1,4 +1,4 @@
-<div #container class="container" mouseWheel (mouseWheel)="mouseWheel($event)" (dblclick)="doubleclick()"
+<div #container class="container" (dblclick)="doubleclick()"
   (mousedown)="mousedown($event)" (mousemove)="mousemove($event)" (mouseup)="mouseup($event)">
 
   <!-- Large -->

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

@@ -7,7 +7,8 @@ import {
   ViewChild,
   HostListener,
   HostBinding,
-  ElementRef
+  ElementRef,
+  ChangeDetectorRef
 } from '@angular/core'
 import { UtilitiesService } from '../../services/utilities.service'
 
@@ -85,19 +86,23 @@ export class KnobComponent implements OnInit {
     return this.middleValue
   }
 
-  constructor (public utils: UtilitiesService) {}
+  constructor (public utils: UtilitiesService, public changeRef: ChangeDetectorRef) {}
 
   async ngOnInit () {
     this.container = this.containerRef.nativeElement
   }
 
+  private lastWheelEvent = new Date().getTime()
+  private readonly wheelDebouncer = 1000 / 30
+  @HostListener('mousewheel', [ '$event' ])
   mouseWheel (event: WheelEvent) {
     if (this.enabled) {
       this.continueAnimation = false
-      const oldValue = this.value
+      const now = new Date().getTime()
+      if ((now - this.lastWheelEvent) < this.wheelDebouncer) return
+      this.lastWheelEvent = now
       this.value += -event.deltaY / (1000 / this.max)
-      const newValue = this.value
-      if (oldValue !== newValue) this.userChangedValue.emit({ value: this.value })
+      this.userChangedValue.emit({ value: this.value })
     }
   }
 

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

@@ -7,7 +7,8 @@ import {
   HostListener,
   ViewChild,
   EventEmitter,
-  HostBinding
+  HostBinding,
+  OnDestroy
 } from '@angular/core'
 import {
   UtilitiesService
@@ -24,7 +25,10 @@ export interface SkeuomorphSliderValueChangedEvent {
   styleUrls: [ './skeuomorph-slider.component.scss' ]
 })
 export class SkeuomorphSliderComponent implements OnInit {
-  constructor (public utils: UtilitiesService, public elRef: ElementRef) {}
+  constructor (
+    public utils: UtilitiesService,
+    public elRef: ElementRef<HTMLElement>
+  ) {}
 
   @Input() min: number = 0
   @Input() max: number = 1
@@ -77,9 +81,14 @@ export class SkeuomorphSliderComponent implements OnInit {
 
   get value () { return this._value }
 
+  private lastWheelEvent = new Date().getTime()
+  private readonly wheelDebouncer = 1000 / 30
   @HostListener('mousewheel', [ '$event' ])
   onMouseWheel (event: WheelEvent): void {
     if (this.enabled && this.scrollEnabled) {
+      const now = new Date().getTime()
+      if ((now - this.lastWheelEvent) < this.wheelDebouncer) return
+      this.lastWheelEvent = now
       this.value += -event.deltaY / 100
       this.userChangedValue.emit({ value: this.value })
     }
@@ -196,6 +205,6 @@ export class SkeuomorphSliderComponent implements OnInit {
   }
 
   calculateTop () {
-    return `${this.utils.mapValue(this._value, this.min, this.max, parseInt(this.elRef.nativeElement.offsetHeight) - 25, 0)}px`
+    return `${this.utils.mapValue(this._value, this.min, this.max, this.elRef.nativeElement.offsetHeight - 25, 0)}px`
   }
 }

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

@@ -1,4 +1,4 @@
-<div class="container" (click)="toggleState()">
+<div class="container {{enabled ? 'enabled' : ''}}" (click)="toggleState()">
   <div class="indicator left"></div>
   <div class="indicator right"></div>
   <div [class]="'switch ' + (state ? 'on' : 'off')"></div>