From 266fb6b697d6fbf8d88a5eff5055619e8a8ea9f0 Mon Sep 17 00:00:00 2001
From: Hoang Thuan Pham <hoang.pham@calian.ca>
Date: Mon, 19 Dec 2022 13:58:47 -0500
Subject: [PATCH] Improve rendering for text labels

Currently, when the timeline chart renders text labels for states, it deletes all
existing labels, then creates new labels, and adds them to the graph. This is not
efficient and makes rendering of the labels sluggish when zooming in and out of the
graph. This commit removes the code that delete the text labels objects on every
re-rerender, and updates the text content of the labels instead of re-creating them.

Fixes #225.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>
---
 .../src/components/time-graph-state.ts        | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

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<TimelineChart.Ti
     static fontController: FontController = new FontController();
 
     protected _options: TimeGraphStyledRect;
+    private textLabelObject: PIXI.BitmapText | undefined;
+    private textWidth: number;
 
     constructor(
         id: string,
@@ -63,48 +65,49 @@ export class TimeGraphStateComponent extends TimeGraphComponent<TimelineChart.Ti
         const labelText = this.model.label;
         const textPadding = 0.5;
         if (displayWidth < 3) {
-            this.clearLabel();
+            if (this.textLabelObject) {
+                this.textLabelObject.text = "";
+            }
             return;
         }
-        const textObj = new PIXI.BitmapText(this.model.label, { fontName: fontName });
-        const textWidth = textObj.getLocalBounds().width;
+
+        let addLabel = false;
+        if (!this.textLabelObject) {
+            this.textLabelObject = new PIXI.BitmapText(this.model.label, { fontName: fontName });
+            this.textWidth = this.textLabelObject.getLocalBounds().width;
+            addLabel = true;
+        } 
+
         let textObjX = position.x + textPadding;
         const textObjY = position.y + textPadding;
         let displayLabel = "";
 
-        if (displayWidth > 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<TimelineChart.Ti
     }
 
     clear() {
-        this.clearLabel();
         super.clear()
     }
 }