some ui changes from the Pro repo

bitgapp · Oct 6, 2021 · 8c71bed · 8c71bed
1 parent b3c6dbc
commit 8c71bed
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/modules/components/src/components/flat-slider/flat-slider.component.ts b/modules/components/src/components/flat-slider/flat-slider.component.ts
@@ -431,11 +431,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     return style
   }
 
-  @HostListener('window:resize')
-  onWindowResize () {
-    this.changeRef.detectChanges()
-  }
-
   private mapValue ({ value, inMin, inMax, outMin, outMax, logInverse }: {
     value: number
     inMin: number

diff --git a/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts b/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
@@ -230,12 +230,6 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
     }
   }
 
-  @HostListener('window:resize')
-  onWindowResize () {
-    this.drawNotches()
-    this.changeRef.detectChanges()
-  }
-
   drawNotches () {
     const canvas = this.notches.nativeElement
     const ctx: CanvasRenderingContext2D = canvas.getContext('2d')

diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "3.0.1",
+  "version": "3.0.4",
   "scripts": {
     "lint": "npx eslint .",
     "start": "../node_modules/.bin/ng serve --port 8080 --host 0.0.0.0 --disable-host-check",

diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
@@ -2,7 +2,8 @@ import {
   Component,
   OnInit,
   ViewChild,
-  AfterContentInit
+  AfterContentInit,
+  HostListener
 } from '@angular/core'
 import { UtilitiesService } from './services/utilities.service'
 import { UIService } from './services/ui.service'
@@ -43,11 +44,13 @@ export class AppComponent implements OnInit, AfterContentInit {
     help: false
   }
 
+  private containerWidth = 400
+  private containerHeight = 400
   get containerStyle () {
     const style: any = {}
 
-    style.width = `${100 / this.ui.scale}%`
-    style.height = `${100 / this.ui.scale}%`
+    style.width = `${this.containerWidth / this.ui.scale}px`
+    style.height = `${this.containerHeight / this.ui.scale}px`
     style.transform = `scale(${this.ui.scale})`
 
     return style
@@ -284,6 +287,28 @@ This data would help us improve and grow the product.`
     }
   }
 
+  private windowResizeHandlerTimer: number
+  @HostListener('window:resize')
+  handleWindowResize () {
+    if (this.windowResizeHandlerTimer) {
+      clearTimeout(this.windowResizeHandlerTimer)
+    }
+
+    this.windowResizeHandlerTimer = setTimeout(async () => {
+      const [ height, width ] = await Promise.all([
+        this.ui.getHeight(),
+        this.ui.getWidth()
+      ])
+
+      this.containerHeight = height
+      this.containerWidth = width
+
+      setTimeout(() => {
+        this.ui.dimensionsChanged.emit()
+      }, 100)
+    }, 100) as any
+  }
+
   async getTransitionSettings () {
     const settings = await this.transitions.getSettings()
     this.animationDuration = settings.duration

diff --git a/ui/src/app/sections/effects/equalizers/equalizers.component.ts b/ui/src/app/sections/effects/equalizers/equalizers.component.ts
@@ -133,7 +133,6 @@ export class EqualizersComponent implements OnInit, OnDestroy {
     await this.service.setType(type)
     this.type = type
     await this.utils.delay(this.animationDuration)
-    this.ui.dimensionsChanged.next()
   }
 
   public getEqualizerFromType (type: EqualizerType): EqualizerComponent {

diff --git a/ui/src/app/services/ui.service.ts b/ui/src/app/services/ui.service.ts
@@ -39,7 +39,7 @@ export enum StatusItemIconType {
 })
 export class UIService extends DataService {
   route = `${this.route}/ui`
-  dimensionsChanged = new Subject<UIDimensions>()
+  dimensionsChanged = new EventEmitter()
   settingsChanged = new Subject<UISettings>()
   settings: UISettings = {}
   private _scale = 1