diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts index 95b3481a4..98d2068d6 100644 --- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts @@ -71,7 +71,9 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagEditorComponent), multi: true }; -const SIZE_CACHE: { [key: string]: number } = {}; +const CACHED_SIZES: { [key: string]: number } = {}; + +let CACHED_FONT: string; @Component({ selector: 'sqx-tag-editor', @@ -132,6 +134,12 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, } public ngAfterViewInit() { + if (!CACHED_FONT) { + const style = window.getComputedStyle(this.inputElement.nativeElement); + + CACHED_FONT = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`; + } + this.resetSize(); } @@ -207,6 +215,9 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, } public resetSize() { + if (!CACHED_FONT) { + return; + } if (!canvas) { canvas = document.createElement('canvas'); @@ -216,21 +227,20 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, const ctx = canvas.getContext('2d'); if (ctx) { + ctx.font = CACHED_FONT; + const text = this.inputElement.nativeElement.value; + const textKey = `${text}§${this.placeholder}§${ctx.font}`; - let width = SIZE_CACHE[text]; + let width = CACHED_SIZES[textKey]; if (!width) { - const style = window.getComputedStyle(this.inputElement.nativeElement); - - ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`; - const widthText = ctx.measureText(text).width; const widthPlaceholder = ctx.measureText(this.placeholder).width; width = Math.max(widthText, widthPlaceholder); - SIZE_CACHE[text] = width; + CACHED_SIZES[textKey] = width; } this.inputElement.nativeElement.style.width = ((width + 5) + 'px'); diff --git a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts index a0cf8ab7a..9293b3b7e 100644 --- a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts +++ b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { fadeAnimation, @@ -43,6 +43,7 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { public position = 'left'; constructor( + private readonly changeDetector: ChangeDetectorRef, private readonly onboardingService: OnboardingService, private readonly renderer: Renderer2 ) { @@ -74,6 +75,8 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { if (this.isSameOrParent(fromPoint)) { this.tooltipModal.show(); + this.changeDetector.detectChanges(); + this.closeTimer = setTimeout(() => { this.hideThis(); }, 10000); diff --git a/src/Squidex/app/framework/angular/modals/tooltip.component.ts b/src/Squidex/app/framework/angular/modals/tooltip.component.ts index 69759bbbe..c43a2352d 100644 --- a/src/Squidex/app/framework/angular/modals/tooltip.component.ts +++ b/src/Squidex/app/framework/angular/modals/tooltip.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { ModalModel } from './../../utils/modal-view'; @@ -33,6 +33,7 @@ export class TooltipComponent implements OnDestroy, OnInit { public modal = new ModalModel(); constructor( + private readonly changeDetector: ChangeDetectorRef, private readonly renderer: Renderer2 ) { } @@ -52,6 +53,8 @@ export class TooltipComponent implements OnDestroy, OnInit { this.targetMouseEnterListener = this.renderer.listen(this.target, 'mouseenter', () => { this.modal.show(); + + this.changeDetector.detectChanges(); }); this.targetMouseLeaveListener = diff --git a/src/Squidex/app/shell/pages/internal/internal-area.component.ts b/src/Squidex/app/shell/pages/internal/internal-area.component.ts index bf5e5b784..c9d266794 100644 --- a/src/Squidex/app/shell/pages/internal/internal-area.component.ts +++ b/src/Squidex/app/shell/pages/internal/internal-area.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs'; @@ -22,8 +22,7 @@ import { templateUrl: './internal-area.component.html', animations: [ fadeAnimation - ], - changeDetection: ChangeDetectionStrategy.OnPush + ] }) export class InternalAreaComponent implements OnDestroy, OnInit { private queryParamsSubscription: Subscription;