From 4c1edfd6da4a9feecad159ee9189a049d761f769 Mon Sep 17 00:00:00 2001 From: Hoang Thuan Pham Date: Wed, 21 Dec 2022 11:13:07 -0500 Subject: [PATCH] Use monospace font for state labels When the timeline chart is zoom in/out, the label of each state will be modified to fit the width of the state. When the width of the state is smaller than the width of the label, the text is truncated. To determine how much text is truncated, the timeline chart uses the ratio of width of label text / width of state. However, since the width of each charater is different, this ratio does not well-represent how much text can be displayed in the label, causing text to overflow out of the state. The solution is to use a monospace font, in which all characters are of the same width. This commit changes the font-family of the labels from Verdana to monospace. With this change, the browser will default to the monospace font of the OS and make the texts fit within the states. Fixes #224. Signed-off-by: Hoang Thuan Pham --- timeline-chart/src/time-graph-font-controller.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/timeline-chart/src/time-graph-font-controller.ts b/timeline-chart/src/time-graph-font-controller.ts index 69d8a13b..c0729ccb 100644 --- a/timeline-chart/src/time-graph-font-controller.ts +++ b/timeline-chart/src/time-graph-font-controller.ts @@ -6,7 +6,7 @@ export class FontController { private fontColorMap: Map; private defaultFontName: string = "LabelFont8White"; - constructor(fontFamily: string = "Verdana") { + constructor(fontFamily: string = "monospace") { this.fontFamily = fontFamily; this.fontNameMap = new Map>(); this.fontColorMap = new Map(); @@ -25,7 +25,7 @@ export class FontController { fontFamily: this.fontFamily, fontSize: fontSize, fill: fontColor === "White" ? "white" : "black", - fontWeight: 900 + fontWeight: "bold" }; PIXI.BitmapFont.from(fontName, fontStyle, { chars: PIXI.BitmapFont.ASCII }); return fontName;