diff --git a/src/app/utils/cloud-parameters.ts b/src/app/utils/cloud-parameters.ts index b1f870299a91e32de04ae964ffba28a01bbcf7be..037e5263d27292e86961d8eedeec2d7438b66791 100644 --- a/src/app/utils/cloud-parameters.ts +++ b/src/app/utils/cloud-parameters.ts @@ -112,6 +112,21 @@ export class CloudParameters { return false; } + private static resolveColor(element: HTMLParagraphElement, color: string): string { + element.style.backgroundColor = 'rgb(0, 0, 0)'; + element.style.backgroundColor = color; + const result = window.getComputedStyle(element).backgroundColor.match(colorRegex); + const r = parseInt(result[1], 10); + const g = parseInt(result[2], 10); + const b = parseInt(result[3], 10); + return `#${((r * 256 + g) * 256 + b).toString(16).padStart(6, '0')}`; + } + + private static mapValue(current: number, minInput: number, maxInput: number, minOut: number, maxOut: number) { + const value = (current - minInput) * (maxOut - minOut) / (maxInput - minInput) + minOut; + return Math.min(maxOut, Math.max(minOut, value)); + } + resetToDefault(isDark: boolean) { const theme: DefaultCloudParameters = isDark ? DARK_THEME : LIGHT_THEME; const p = document.createElement('p'); @@ -124,11 +139,11 @@ export class CloudParameters { this.fontStyle = 'normal'; this.fontWeight = 'normal'; this.fontSize = '10px'; - this.backgroundColor = this.resolveColor(p, theme.backgroundColor); - this.fontColor = this.resolveColor(p, theme.hoverColor); - this.fontSizeMin = this.mapValue(minValue, 375, 750, 125, 200); - this.fontSizeMax = this.mapValue(minValue, 375, 1500, 300, 900); - this.hoverScale = this.mapValue(minValue, 375, 1500, 1.4, 2); + this.backgroundColor = CloudParameters.resolveColor(p, theme.backgroundColor); + this.fontColor = CloudParameters.resolveColor(p, theme.hoverColor); + this.fontSizeMin = CloudParameters.mapValue(minValue, 375, 750, 125, 200); + this.fontSizeMax = CloudParameters.mapValue(minValue, 375, 1500, 300, 900); + this.hoverScale = CloudParameters.mapValue(minValue, 375, 1500, 1.4, 2); this.hoverTime = 1; this.hoverDelay = 0.4; this.delayWord = 100; @@ -137,32 +152,67 @@ export class CloudParameters { this.question = ''; this.textTransform = CloudTextStyle.capitalized; this.cloudWeightSettings = [ - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w1), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w2), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w3), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w4), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w5), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w6), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w7), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w8), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w9), rotation: 0, allowManualTagNumber: true }, - { maxVisibleElements: elements, color: this.resolveColor(p, theme.w10), rotation: 0, allowManualTagNumber: true }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w1), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w2), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w3), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w4), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w5), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w6), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w7), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w8), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w9), + rotation: 0, + allowManualTagNumber: isMobile + }, + { + maxVisibleElements: elements, + color: CloudParameters.resolveColor(p, theme.w10), + rotation: 0, + allowManualTagNumber: isMobile + }, ]; p.remove(); } - - private resolveColor(element: HTMLParagraphElement, color: string): string { - element.style.backgroundColor = 'rgb(0, 0, 0)'; - element.style.backgroundColor = color; - const result = window.getComputedStyle(element).backgroundColor.match(colorRegex); - const r = parseInt(result[1], 10); - const g = parseInt(result[2], 10); - const b = parseInt(result[3], 10); - return `#${((r * 256 + g) * 256 + b).toString(16).padStart(6, '0')}`; - } - - private mapValue(current: number, minInput: number, maxInput: number, minOut: number, maxOut: number) { - const value = (current - minInput) * (maxOut - minOut) / (maxInput - minInput) + minOut; - return Math.min(maxOut, Math.max(minOut, value)); - } }