lazy-widgets
Version:
Typescript retained mode GUI for the HTML canvas API
103 lines • 4.54 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { TextHelper, WrapMode } from '../helpers/TextHelper.js';
import { layoutField } from '../decorators/FlagFields.js';
import { Widget } from './Widget.js';
/**
* Base class for {@link Label} and {@link LiveLabel}.
*
* @category Widget
*/
export class BaseLabel extends Widget {
constructor(properties) {
var _a;
super(properties);
this.wrapMode = (_a = properties === null || properties === void 0 ? void 0 : properties.wrapMode) !== null && _a !== void 0 ? _a : WrapMode.Shrink;
this.textHelper = new TextHelper();
this.textHelper.font = this.bodyTextFont;
this.textHelper.lineHeight = this.bodyTextHeight;
this.textHelper.lineSpacing = this.bodyTextSpacing;
this.textHelper.wrapMode = this.wrapMode;
this.textHelper.alignMode = this.bodyTextAlign;
}
onThemeUpdated(property = null) {
super.onThemeUpdated(property);
if (property === null) {
this.textHelper.font = this.bodyTextFont;
this.textHelper.lineHeight = this.bodyTextHeight;
this.textHelper.lineSpacing = this.bodyTextSpacing;
this.textHelper.wrapMode = this.wrapMode;
this.textHelper.alignMode = this.bodyTextAlign;
this._layoutDirty = true;
this.markWholeAsDirty();
}
else if (property === 'bodyTextFill') {
this.markWholeAsDirty();
}
else if (property === 'bodyTextFont') {
this.textHelper.font = this.bodyTextFont;
}
else if (property === 'bodyTextHeight') {
this.textHelper.lineHeight = this.bodyTextHeight;
}
else if (property === 'bodyTextSpacing') {
this.textHelper.lineSpacing = this.bodyTextSpacing;
}
else if (property === 'wrapMode') {
this.textHelper.wrapMode = this.wrapMode;
}
else if (property === 'bodyTextAlign') {
this.textHelper.alignMode = this.bodyTextAlign;
}
}
handlePreLayoutUpdate() {
// Mark as dirty if text helper is dirty
if (this.textHelper.dirty) {
this.markWholeAsDirty();
this._layoutDirty = true;
}
}
handleResolveDimensions(minWidth, maxWidth, minHeight, maxHeight) {
const oldMaxWidth = this.textHelper.maxWidth;
this.textHelper.maxWidth = maxWidth;
// extra spacing is added so that there is enough height to center the
// text
this.idealWidth = Math.max(Math.min(this.textHelper.width, maxWidth), minWidth);
this.idealHeight = Math.max(Math.min(this.textHelper.height + this.textHelper.actualLineSpacing, maxHeight), minHeight);
if (this.textHelper.dirty) {
this.textHelper.maxWidth = this.idealWidth;
this.textHelper.cleanDirtyFlag();
if (this.idealWidth !== oldMaxWidth) {
this.markWholeAsDirty();
}
}
}
handlePainting(_dirtyRects) {
// Start clipping if text wrapping is disabled or the text vertically
// overflows
const spacedHeight = this.textHelper.height + this.textHelper.actualLineSpacing;
const needsClip = this.wrapMode === WrapMode.None || this.wrapMode === WrapMode.Ellipsis || spacedHeight > this.idealHeight;
const ctx = this.viewport.context;
if (needsClip) {
ctx.save();
ctx.beginPath();
ctx.rect(this.x, this.y, this.width, this.height);
ctx.clip();
}
// Paint text, vertically centered
const yOffset = (this.height - this.textHelper.height) / 2;
this.textHelper.paint(ctx, this.bodyTextFill, this.x, this.y + yOffset);
// Stop clipping if clipping was applied
if (needsClip) {
ctx.restore();
}
}
}
__decorate([
layoutField
], BaseLabel.prototype, "wrapMode", void 0);
//# sourceMappingURL=BaseLabel.js.map