a4-fit-text
Version:
Angular Fit Text (Auto scale text to fit container) component
86 lines • 9.61 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, OnInit, ChangeDetectionStrategy, Input, ElementRef, ViewChild, AfterViewInit, HostListener } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';
let FitTextComponent = class FitTextComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.text$ = new BehaviorSubject(null);
this.width$ = new BehaviorSubject(0);
this.height$ = new BehaviorSubject(0);
this.g0Transform$ = new BehaviorSubject('');
this.g1Transform$ = new BehaviorSubject('');
this.g2Transform$ = new BehaviorSubject('');
this.ready = false;
}
set text(t) {
this.text$.next(t);
}
ngOnInit() {
this.text$.pipe(filter(p => !!p && this.ready)).subscribe(p => this.update());
}
ngAfterViewInit() {
this.ready = true;
this.g1Rect = this.g1.nativeElement.getBBox();
setTimeout(() => this.update(), 0);
}
update() {
this.g2Transform$.next(`translate(0, -${this.g1Rect.height / 2})`);
const rect = this.elementRef.nativeElement.parentNode.getBoundingClientRect();
const scaleX = rect.width / this.g1Rect.width;
const scaleY = rect.height / this.g1Rect.height;
const scale = Math.min(scaleX, scaleY);
this.g1Transform$.next(`scale(${scale})`);
const x = rect.width / 2;
const y = rect.height / 2 - this.g1Rect.y;
this.g0Transform$.next(`translate(${x}, ${y})`);
this.width$.next(rect.width);
this.height$.next(rect.height);
}
resize(event) {
this.update();
}
};
FitTextComponent.ctorParameters = () => [
{ type: ElementRef }
];
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], FitTextComponent.prototype, "text", null);
__decorate([
ViewChild('g1', { static: true }),
__metadata("design:type", ElementRef)
], FitTextComponent.prototype, "g1", void 0);
__decorate([
HostListener('window:resize', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], FitTextComponent.prototype, "resize", null);
FitTextComponent = __decorate([
Component({
selector: 'fit-text',
template: `
<svg #svg [attr.width]="width$ | async" [attr.height]="height$ | async">
<g #g0 [attr.transform]="g0Transform$ | async">
<g #g1 [attr.transform]="g1Transform$ | async">
<g #g2 [attr.transform]="g2Transform$ | async">
<text #te text-anchor="middle" dy="1em">{{text$ | async}}</text>
</g>
</g>
</g>
</svg>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [`
:host {
display: block;
}
`]
}),
__metadata("design:paramtypes", [ElementRef])
], FitTextComponent);
export { FitTextComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZml0LXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYTQtZml0LXRleHQvIiwic291cmNlcyI6WyJsaWIvZml0LXRleHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSx1QkFBdUIsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdkMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBc0J4QyxJQUFhLGdCQUFnQixHQUE3QixNQUFhLGdCQUFnQjtJQWdCM0IsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQVQxQyxVQUFLLEdBQUcsSUFBSSxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbEMsV0FBTSxHQUFHLElBQUksZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2hDLFlBQU8sR0FBRyxJQUFJLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNqQyxpQkFBWSxHQUFHLElBQUksZUFBZSxDQUFTLEVBQUUsQ0FBQyxDQUFDO1FBQy9DLGlCQUFZLEdBQUcsSUFBSSxlQUFlLENBQVMsRUFBRSxDQUFDLENBQUM7UUFDL0MsaUJBQVksR0FBRyxJQUFJLGVBQWUsQ0FBUyxFQUFFLENBQUMsQ0FBQztRQUUvQyxVQUFLLEdBQUcsS0FBSyxDQUFDO0lBRWdDLENBQUM7SUFkdEMsSUFBSSxJQUFJLENBQUMsQ0FBUztRQUN6QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNyQixDQUFDO0lBY0QsUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDaEYsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQzlDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUVuRSxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUU5RSxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDO1FBQzlDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7UUFFaEQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBRTFDLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ3pCLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBRTFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFFaEQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBR0QsTUFBTSxDQUFDLEtBQUs7UUFDVixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQztDQUVGLENBQUE7O1lBckNpQyxVQUFVOztBQWRqQztJQUFSLEtBQUssRUFBRTs7OzRDQUVQO0FBQ2tDO0lBQWxDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7OEJBQUssVUFBVTs0Q0FBQztBQTRDbEQ7SUFEQyxZQUFZLENBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUM7Ozs7OENBR3pDO0FBbkRVLGdCQUFnQjtJQXBCNUIsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLFVBQVU7UUFDcEIsUUFBUSxFQUFFOzs7Ozs7Ozs7O0dBVVQ7UUFNRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFMdEM7Ozs7R0FJUjtLQUVGLENBQUM7cUNBaUJnQyxVQUFVO0dBaEIvQixnQkFBZ0IsQ0FxRDVCO1NBckRZLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgSW5wdXQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCwgQWZ0ZXJWaWV3SW5pdCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2ZpdC10ZXh0JyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gIDxzdmcgI3N2ZyBbYXR0ci53aWR0aF09XCJ3aWR0aCQgfCBhc3luY1wiIFthdHRyLmhlaWdodF09XCJoZWlnaHQkIHwgYXN5bmNcIj5cclxuICAgIDxnICNnMCBbYXR0ci50cmFuc2Zvcm1dPVwiZzBUcmFuc2Zvcm0kIHwgYXN5bmNcIj5cclxuICAgICAgPGcgI2cxIFthdHRyLnRyYW5zZm9ybV09XCJnMVRyYW5zZm9ybSQgfCBhc3luY1wiPlxyXG4gICAgICAgIDxnICNnMiBbYXR0ci50cmFuc2Zvcm1dPVwiZzJUcmFuc2Zvcm0kIHwgYXN5bmNcIj5cclxuICAgICAgICAgIDx0ZXh0ICN0ZSB0ZXh0LWFuY2hvcj1cIm1pZGRsZVwiIGR5PVwiMWVtXCI+e3t0ZXh0JCB8IGFzeW5jfX08L3RleHQ+XHJcbiAgICAgICAgPC9nPlxyXG4gICAgICA8L2c+XHJcbiAgICA8L2c+XHJcbiAgPC9zdmc+XHJcbiAgYCxcclxuICBzdHlsZXM6IFtgXHJcbjpob3N0IHtcclxuICBkaXNwbGF5OiBibG9jaztcclxufVxyXG4gIGBdLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGaXRUZXh0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuXHJcbiAgQElucHV0KCkgc2V0IHRleHQodDogc3RyaW5nKSB7XHJcbiAgICB0aGlzLnRleHQkLm5leHQodCk7XHJcbiAgfVxyXG4gIEBWaWV3Q2hpbGQoJ2cxJywgeyBzdGF0aWM6IHRydWUgfSkgZzE6IEVsZW1lbnRSZWY7XHJcblxyXG4gIHRleHQkID0gbmV3IEJlaGF2aW9yU3ViamVjdChudWxsKTtcclxuICB3aWR0aCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KDApO1xyXG4gIGhlaWdodCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KDApO1xyXG4gIGcwVHJhbnNmb3JtJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPignJyk7XHJcbiAgZzFUcmFuc2Zvcm0kID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+KCcnKTtcclxuICBnMlRyYW5zZm9ybSQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4oJycpO1xyXG4gIGcxUmVjdDogYW55O1xyXG4gIHJlYWR5ID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy50ZXh0JC5waXBlKGZpbHRlcihwID0+ICEhcCAmJiB0aGlzLnJlYWR5KSkuc3Vic2NyaWJlKHAgPT4gdGhpcy51cGRhdGUoKSk7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICB0aGlzLnJlYWR5ID0gdHJ1ZTtcclxuICAgIHRoaXMuZzFSZWN0ID0gdGhpcy5nMS5uYXRpdmVFbGVtZW50LmdldEJCb3goKTtcclxuICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy51cGRhdGUoKSwgMCk7XHJcbiAgfVxyXG5cclxuICB1cGRhdGUoKSB7XHJcbiAgICB0aGlzLmcyVHJhbnNmb3JtJC5uZXh0KGB0cmFuc2xhdGUoMCwgLSR7dGhpcy5nMVJlY3QuaGVpZ2h0IC8gMn0pYCk7XHJcblxyXG4gICAgY29uc3QgcmVjdCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudE5vZGUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcblxyXG4gICAgY29uc3Qgc2NhbGVYID0gcmVjdC53aWR0aCAvIHRoaXMuZzFSZWN0LndpZHRoO1xyXG4gICAgY29uc3Qgc2NhbGVZID0gcmVjdC5oZWlnaHQgLyB0aGlzLmcxUmVjdC5oZWlnaHQ7XHJcblxyXG4gICAgY29uc3Qgc2NhbGUgPSBNYXRoLm1pbihzY2FsZVgsIHNjYWxlWSk7XHJcbiAgICB0aGlzLmcxVHJhbnNmb3JtJC5uZXh0KGBzY2FsZSgke3NjYWxlfSlgKTtcclxuXHJcbiAgICBjb25zdCB4ID0gcmVjdC53aWR0aCAvIDI7XHJcbiAgICBjb25zdCB5ID0gcmVjdC5oZWlnaHQgLyAyIC0gdGhpcy5nMVJlY3QueTtcclxuXHJcbiAgICB0aGlzLmcwVHJhbnNmb3JtJC5uZXh0KGB0cmFuc2xhdGUoJHt4fSwgJHt5fSlgKTtcclxuXHJcbiAgICB0aGlzLndpZHRoJC5uZXh0KHJlY3Qud2lkdGgpO1xyXG4gICAgdGhpcy5oZWlnaHQkLm5leHQocmVjdC5oZWlnaHQpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScsIFsnJGV2ZW50J10pXHJcbiAgcmVzaXplKGV2ZW50KSB7XHJcbiAgICB0aGlzLnVwZGF0ZSgpO1xyXG4gIH1cclxuXHJcbn1cclxuIl19