diff --git a/timeline-chart/src/components/time-graph-state.ts b/timeline-chart/src/components/time-graph-state.ts index 29e9bc1..c5f9bde 100644 --- a/timeline-chart/src/components/time-graph-state.ts +++ b/timeline-chart/src/components/time-graph-state.ts @@ -17,6 +17,8 @@ export class TimeGraphStateComponent extends TimeGraphComponent textWidth) { - textObjX = position.x + (displayWidth - textWidth) / 2; + if (displayWidth > this.textWidth) { + textObjX = position.x + (displayWidth - this.textWidth) / 2; displayLabel = labelText; } else { - const textScaler = displayWidth / textWidth; + const textScaler = displayWidth / this.textWidth; const index = Math.min(Math.floor(textScaler * labelText.length), labelText.length - 1) const partialLabel = labelText.substr(0, Math.max(index - 3, 0)); if (partialLabel.length > 0) { displayLabel = partialLabel.concat("..."); } } + + this.textLabelObject.text = displayLabel; + if (displayLabel === "") { - this.clearLabel(); return; } - if (displayLabel === this.model.label) { - textObj.x = textObjX; - textObj.y = textObjY; - textObj.alpha = this._options.opacity ?? 1; - this.displayObject.addChild(textObj); - } else { - const newTextObj = new PIXI.BitmapText(displayLabel, { fontName: fontName }); - newTextObj.x = textObjX; - newTextObj.y = textObjY; - newTextObj.alpha = this._options.opacity ?? 1; - this.displayObject.addChild(newTextObj); - } - } - clearLabel() { - this.displayObject.children.forEach(element => element.destroy()); - this.displayObject.removeChildren(); + this.textLabelObject.alpha = this._options.opacity ?? 1; + this.textLabelObject.x = textObjX; + this.textLabelObject.y = textObjY; + + if (addLabel) { + this.displayObject.addChild(this.textLabelObject); + } } get height(): number { @@ -161,7 +164,6 @@ export class TimeGraphStateComponent extends TimeGraphComponent