a4-fit-text
Version:
Angular Fit Text (Auto scale text to fit container) component
79 lines • 10.3 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';
var FitTextComponent = /** @class */ (function () {
function FitTextComponent(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;
}
Object.defineProperty(FitTextComponent.prototype, "text", {
set: function (t) {
this.text$.next(t);
},
enumerable: true,
configurable: true
});
FitTextComponent.prototype.ngOnInit = function () {
var _this = this;
this.text$.pipe(filter(function (p) { return !!p && _this.ready; })).subscribe(function (p) { return _this.update(); });
};
FitTextComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ready = true;
this.g1Rect = this.g1.nativeElement.getBBox();
setTimeout(function () { return _this.update(); }, 0);
};
FitTextComponent.prototype.update = function () {
this.g2Transform$.next("translate(0, -" + this.g1Rect.height / 2 + ")");
var rect = this.elementRef.nativeElement.parentNode.getBoundingClientRect();
var scaleX = rect.width / this.g1Rect.width;
var scaleY = rect.height / this.g1Rect.height;
var scale = Math.min(scaleX, scaleY);
this.g1Transform$.next("scale(" + scale + ")");
var x = rect.width / 2;
var y = rect.height / 2 - this.g1Rect.y;
this.g0Transform$.next("translate(" + x + ", " + y + ")");
this.width$.next(rect.width);
this.height$.next(rect.height);
};
FitTextComponent.prototype.resize = function (event) {
this.update();
};
FitTextComponent.ctorParameters = function () { return [
{ 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: "\n <svg #svg [attr.width]=\"width$ | async\" [attr.height]=\"height$ | async\">\n <g #g0 [attr.transform]=\"g0Transform$ | async\">\n <g #g1 [attr.transform]=\"g1Transform$ | async\">\n <g #g2 [attr.transform]=\"g2Transform$ | async\">\n <text #te text-anchor=\"middle\" dy=\"1em\">{{text$ | async}}</text>\n </g>\n </g>\n </g>\n </svg>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["\n:host {\n display: block;\n}\n "]
}),
__metadata("design:paramtypes", [ElementRef])
], FitTextComponent);
return FitTextComponent;
}());
export { FitTextComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZml0LXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYTQtZml0LXRleHQvIiwic291cmNlcyI6WyJsaWIvZml0LXRleHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSx1QkFBdUIsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdkMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBc0J4QztJQWdCRSwwQkFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQVQxQyxVQUFLLEdBQUcsSUFBSSxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbEMsV0FBTSxHQUFHLElBQUksZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2hDLFlBQU8sR0FBRyxJQUFJLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNqQyxpQkFBWSxHQUFHLElBQUksZUFBZSxDQUFTLEVBQUUsQ0FBQyxDQUFDO1FBQy9DLGlCQUFZLEdBQUcsSUFBSSxlQUFlLENBQVMsRUFBRSxDQUFDLENBQUM7UUFDL0MsaUJBQVksR0FBRyxJQUFJLGVBQWUsQ0FBUyxFQUFFLENBQUMsQ0FBQztRQUUvQyxVQUFLLEdBQUcsS0FBSyxDQUFDO0lBRWdDLENBQUM7SUFkdEMsc0JBQUksa0NBQUk7YUFBUixVQUFTLENBQVM7WUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckIsQ0FBQzs7O09BQUE7SUFjRCxtQ0FBUSxHQUFSO1FBQUEsaUJBRUM7UUFEQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsQ0FBQyxJQUFJLEtBQUksQ0FBQyxLQUFLLEVBQWpCLENBQWlCLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLEtBQUksQ0FBQyxNQUFNLEVBQUUsRUFBYixDQUFhLENBQUMsQ0FBQztJQUNoRixDQUFDO0lBRUQsMENBQWUsR0FBZjtRQUFBLGlCQUlDO1FBSEMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7UUFDbEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUM5QyxVQUFVLENBQUMsY0FBTSxPQUFBLEtBQUksQ0FBQyxNQUFNLEVBQUUsRUFBYixDQUFhLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELGlDQUFNLEdBQU47UUFDRSxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxtQkFBaUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxNQUFHLENBQUMsQ0FBQztRQUVuRSxJQUFNLElBQUksR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUU5RSxJQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDO1FBQzlDLElBQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7UUFFaEQsSUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsV0FBUyxLQUFLLE1BQUcsQ0FBQyxDQUFDO1FBRTFDLElBQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ3pCLElBQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBRTFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLGVBQWEsQ0FBQyxVQUFLLENBQUMsTUFBRyxDQUFDLENBQUM7UUFFaEQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBR0QsaUNBQU0sR0FBTixVQUFPLEtBQUs7UUFDVixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQzs7Z0JBbkMrQixVQUFVOztJQWRqQztRQUFSLEtBQUssRUFBRTs7O2dEQUVQO0lBQ2tDO1FBQWxDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7a0NBQUssVUFBVTtnREFBQztJQTRDbEQ7UUFEQyxZQUFZLENBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUM7Ozs7a0RBR3pDO0lBbkRVLGdCQUFnQjtRQXBCNUIsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLFVBQVU7WUFDcEIsUUFBUSxFQUFFLCtYQVVUO1lBTUQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07cUJBTHRDLHFDQUlSO1NBRUYsQ0FBQzt5Q0FpQmdDLFVBQVU7T0FoQi9CLGdCQUFnQixDQXFENUI7SUFBRCx1QkFBQztDQUFBLEFBckRELElBcURDO1NBckRZLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgSW5wdXQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCwgQWZ0ZXJWaWV3SW5pdCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2ZpdC10ZXh0JyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gIDxzdmcgI3N2ZyBbYXR0ci53aWR0aF09XCJ3aWR0aCQgfCBhc3luY1wiIFthdHRyLmhlaWdodF09XCJoZWlnaHQkIHwgYXN5bmNcIj5cclxuICAgIDxnICNnMCBbYXR0ci50cmFuc2Zvcm1dPVwiZzBUcmFuc2Zvcm0kIHwgYXN5bmNcIj5cclxuICAgICAgPGcgI2cxIFthdHRyLnRyYW5zZm9ybV09XCJnMVRyYW5zZm9ybSQgfCBhc3luY1wiPlxyXG4gICAgICAgIDxnICNnMiBbYXR0ci50cmFuc2Zvcm1dPVwiZzJUcmFuc2Zvcm0kIHwgYXN5bmNcIj5cclxuICAgICAgICAgIDx0ZXh0ICN0ZSB0ZXh0LWFuY2hvcj1cIm1pZGRsZVwiIGR5PVwiMWVtXCI+e3t0ZXh0JCB8IGFzeW5jfX08L3RleHQ+XHJcbiAgICAgICAgPC9nPlxyXG4gICAgICA8L2c+XHJcbiAgICA8L2c+XHJcbiAgPC9zdmc+XHJcbiAgYCxcclxuICBzdHlsZXM6IFtgXHJcbjpob3N0IHtcclxuICBkaXNwbGF5OiBibG9jaztcclxufVxyXG4gIGBdLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGaXRUZXh0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuXHJcbiAgQElucHV0KCkgc2V0IHRleHQodDogc3RyaW5nKSB7XHJcbiAgICB0aGlzLnRleHQkLm5leHQodCk7XHJcbiAgfVxyXG4gIEBWaWV3Q2hpbGQoJ2cxJywgeyBzdGF0aWM6IHRydWUgfSkgZzE6IEVsZW1lbnRSZWY7XHJcblxyXG4gIHRleHQkID0gbmV3IEJlaGF2aW9yU3ViamVjdChudWxsKTtcclxuICB3aWR0aCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KDApO1xyXG4gIGhlaWdodCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KDApO1xyXG4gIGcwVHJhbnNmb3JtJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPignJyk7XHJcbiAgZzFUcmFuc2Zvcm0kID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+KCcnKTtcclxuICBnMlRyYW5zZm9ybSQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4oJycpO1xyXG4gIGcxUmVjdDogYW55O1xyXG4gIHJlYWR5ID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy50ZXh0JC5waXBlKGZpbHRlcihwID0+ICEhcCAmJiB0aGlzLnJlYWR5KSkuc3Vic2NyaWJlKHAgPT4gdGhpcy51cGRhdGUoKSk7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICB0aGlzLnJlYWR5ID0gdHJ1ZTtcclxuICAgIHRoaXMuZzFSZWN0ID0gdGhpcy5nMS5uYXRpdmVFbGVtZW50LmdldEJCb3goKTtcclxuICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy51cGRhdGUoKSwgMCk7XHJcbiAgfVxyXG5cclxuICB1cGRhdGUoKSB7XHJcbiAgICB0aGlzLmcyVHJhbnNmb3JtJC5uZXh0KGB0cmFuc2xhdGUoMCwgLSR7dGhpcy5nMVJlY3QuaGVpZ2h0IC8gMn0pYCk7XHJcblxyXG4gICAgY29uc3QgcmVjdCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudE5vZGUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcblxyXG4gICAgY29uc3Qgc2NhbGVYID0gcmVjdC53aWR0aCAvIHRoaXMuZzFSZWN0LndpZHRoO1xyXG4gICAgY29uc3Qgc2NhbGVZID0gcmVjdC5oZWlnaHQgLyB0aGlzLmcxUmVjdC5oZWlnaHQ7XHJcblxyXG4gICAgY29uc3Qgc2NhbGUgPSBNYXRoLm1pbihzY2FsZVgsIHNjYWxlWSk7XHJcbiAgICB0aGlzLmcxVHJhbnNmb3JtJC5uZXh0KGBzY2FsZSgke3NjYWxlfSlgKTtcclxuXHJcbiAgICBjb25zdCB4ID0gcmVjdC53aWR0aCAvIDI7XHJcbiAgICBjb25zdCB5ID0gcmVjdC5oZWlnaHQgLyAyIC0gdGhpcy5nMVJlY3QueTtcclxuXHJcbiAgICB0aGlzLmcwVHJhbnNmb3JtJC5uZXh0KGB0cmFuc2xhdGUoJHt4fSwgJHt5fSlgKTtcclxuXHJcbiAgICB0aGlzLndpZHRoJC5uZXh0KHJlY3Qud2lkdGgpO1xyXG4gICAgdGhpcy5oZWlnaHQkLm5leHQocmVjdC5oZWlnaHQpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScsIFsnJGV2ZW50J10pXHJcbiAgcmVzaXplKGV2ZW50KSB7XHJcbiAgICB0aGlzLnVwZGF0ZSgpO1xyXG4gIH1cclxuXHJcbn1cclxuIl19