From 8c71bed6087ef12019e8819c473a751f804fe0cd Mon Sep 17 00:00:00 2001
From: Nodeful <romankisilo@gmail.com>
Date: Wed, 6 Oct 2021 19:57:11 +0300
Subject: [PATCH] some ui changes from the Pro repo
---
.../flat-slider/flat-slider.component.ts | 5 ---
.../skeuomorph-slider.component.ts | 6 ----
ui/package.json | 2 +-
ui/src/app/app.component.ts | 31 +++++++++++++++++--
.../equalizers/equalizers.component.ts | 1 -
ui/src/app/services/ui.service.ts | 2 +-
6 files changed, 30 insertions(+), 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
index f58da4af..8209034f 100644
--- 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
index cc927484..217e15e4 100644
--- 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
index 185452d2..1e60d891 100644
--- 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
index 230e720d..7e98d11c 100644
--- 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
index 5528c3ed..085fc022 100644
--- 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
index b5f2f995..a3d1e951 100644
--- 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