From 38f19d272d7d0a4852eaca5505a533ad9ecc4f1c Mon Sep 17 00:00:00 2001 From: Jan Bicker Date: Tue, 12 Feb 2019 13:22:39 +0000 Subject: [PATCH] Labels removed again, minor performance fixes --- .../src/components/time-graph-component.ts | 18 ++---- .../src/components/time-graph-row-element.ts | 64 ++++--------------- 2 files changed, 15 insertions(+), 67 deletions(-) diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts index 62ff1fb..f4599f7 100644 --- 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 index 33cec33..0231d5a 100644 --- a/timeline-chart/src/components/time-graph-row-element.ts +++ b/timeline-chart/src/components/time-graph-row-element.ts @@ -7,8 +7,6 @@ export interface TimeGraphRowElementStyle { height?: number borderWidth?: number borderColor?: number - minWidthForLabels?: number - renderLabels?: boolean } export class TimeGraphRowElement extends TimeGraphComponent { @@ -16,12 +14,6 @@ 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(); + } } } \ No newline at end of file