Labels removed again, minor performance fixes

eclipse-cdt-cloud · Feb 12, 2019 · 38f19d2 · 38f19d2
1 parent a404af3
commit 38f19d2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 67 deletions.
diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts
@@ -70,10 +70,7 @@ export abstract class TimeGraphComponent {
         const { position, width, height, color, opacity, borderColor, borderWidth } = opts;
         this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000);
         this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1));
-
-        const r = new PIXI.Rectangle(position.x + 0.5, position.y + 0.5, width, height);
-        this.graphicsData = this.displayObject.drawShape(r);
-
+        this.displayObject.drawRect(position.x + 0.5, position.y + 0.5, width, height);
         this.displayObject.endFill();
     }
 
@@ -86,14 +83,8 @@ export abstract class TimeGraphComponent {
         const ypos = position.y + 0.5;
         const edge = 2;
 
-        const r = new PIXI.Polygon(
-            xpos + edge, ypos,
-            xpos + width, ypos,
-            xpos + width, ypos + height,
-            xpos, ypos + height,
-            xpos, ypos + edge,
-            xpos + edge, ypos);
-        this.graphicsData = this.displayObject.drawShape(r);
+        this.displayObject.drawPolygon([xpos + edge, ypos,
+        xpos + width, ypos, xpos + width, ypos + height, xpos, ypos + height, xpos, ypos + edge, xpos + edge, ypos]);
 
         this.displayObject.endFill();
     }
@@ -103,8 +94,7 @@ export abstract class TimeGraphComponent {
         this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000);
         this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1));
 
-        const r = new PIXI.RoundedRectangle(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
-        this.graphicsData = this.displayObject.drawShape(r);
+        this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
 
         this.displayObject.endFill();
     }

diff --git a/timeline-chart/src/components/time-graph-row-element.ts b/timeline-chart/src/components/time-graph-row-element.ts
@@ -7,21 +7,13 @@ export interface TimeGraphRowElementStyle {
     height?: number
     borderWidth?: number
     borderColor?: number
-    minWidthForLabels?: number
-    renderLabels?: boolean
 }
 
 export class TimeGraphRowElement extends TimeGraphComponent {
 
     height: number;
     position: TimeGraphElementPosition;
 
-    protected label: PIXI.Text;
-    protected labelCharWidths: number[] = [];
-    protected labelStyle: PIXI.TextStyle;
-    protected dotsWidth: number;
-    protected minWidthForLabels: number;
-
     protected _options: TimeGraphStyledRect;
 
     constructor(
@@ -38,17 +30,6 @@ export class TimeGraphRowElement extends TimeGraphComponent {
             x: this.range.start,
             y: this._row.position.y + ((this.row.height - this.height) / 2)
         };
-        if (_style.renderLabels) {
-            this.minWidthForLabels = _style.minWidthForLabels || 40;
-            this.labelStyle = new PIXI.TextStyle({ fontSize: this.height * 0.75 });
-            const dotsMetrics = PIXI.TextMetrics.measureText('...', this.labelStyle);
-            this.dotsWidth = dotsMetrics.width;
-            const chars = this.model.label ? this.model.label.split('') : [];
-            chars.forEach(char => {
-                const { width } = PIXI.TextMetrics.measureText(char, this.labelStyle);
-                this.labelCharWidths.push(width);
-            });
-        }
         const width = this.range.end - this.range.start;
         this._options = {
             color: _style.color,
@@ -97,41 +78,18 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         super.update();
     }
 
-    renderLabel() {
-        if (this.model.label && this._options.width > this.minWidthForLabels) {
-            if (this.label && this.label.texture) {
-                this.label.destroy();
-            }
-
-            let truncated = false;
-            let splitAt = 0;
-
-            this.labelCharWidths.reduce((prev: number, curr: number, idx: number) => {
-                const w = prev + curr;
-                if ((w + this.dotsWidth > this._options.width - 5) && !truncated) {
-                    truncated = true;
-                    splitAt = idx;
-                }
-                return w;
-            });
-
-            let newLabel = truncated ? this.model.label.slice(0, splitAt) : this.model.label;
-            newLabel = truncated ? newLabel + '...' : newLabel;
-            this.label = new PIXI.Text(newLabel, {
-                fontSize: this._options.height * 0.75,
-                fill: 0x000000
-            });
-            this.label.x = this._options.position.x + 2;
-            this.label.y = this._options.position.y;
-
-            this._displayObject.addChild(this.label);
-        } else if (this.label && this.label.texture) {
-            this.label.destroy();
-        }
-    }
-
     render() {
         this.rect(this._options);
-        this.style.renderLabels && this.renderLabel();
+        if (this._options.width > 20) {
+            this.displayObject.beginFill(0x000000);
+            const x = this._options.position.x + 0.5;
+            const y = this._options.position.y + 0.5;
+            this.displayObject.drawPolygon([
+                x, y,
+                x + 4, y,
+                x, y + 4
+            ]);
+            this.displayObject.endFill();
+        }
     }
 }