From 0b5dbb83582d7bf55d70ade48d9daa7d3573112a Mon Sep 17 00:00:00 2001 From: muddana-satish Date: Tue, 20 Oct 2020 19:55:28 -0700 Subject: [PATCH] Adjust State's label Position based on view range fixes #68 Signed-off-by: muddana-satish --- .../src/components/time-graph-component.ts | 1 + .../src/components/time-graph-row-element.ts | 111 +++++++++--------- timeline-chart/src/layer/time-graph-chart.ts | 13 +- 3 files changed, 66 insertions(+), 59 deletions(-) diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts index 48b2b44..dcf6340 100644 --- a/timeline-chart/src/components/time-graph-component.ts +++ b/timeline-chart/src/components/time-graph-component.ts @@ -11,6 +11,7 @@ export interface TimeGraphElementStyle { borderWidth?: number borderColor?: number borderRadius?: number + displayWidth?: number } export interface TimeGraphElementPosition { x: number diff --git a/timeline-chart/src/components/time-graph-row-element.ts b/timeline-chart/src/components/time-graph-row-element.ts index 57dab0a..c696e2f 100644 --- a/timeline-chart/src/components/time-graph-row-element.ts +++ b/timeline-chart/src/components/time-graph-row-element.ts @@ -1,7 +1,7 @@ import { TimeGraphComponent, TimeGraphStyledRect, TimeGraphElementPosition } from "./time-graph-component"; import { TimeGraphRow } from "./time-graph-row"; import { TimelineChart } from "../time-graph-model"; -import { FontController } from "../time-graph-font-controller" +import { FontController } from "../time-graph-font-controller"; import * as PIXI from "pixi.js-legacy"; export interface TimeGraphRowElementStyle { @@ -13,9 +13,8 @@ export interface TimeGraphRowElementStyle { export class TimeGraphRowElement extends TimeGraphComponent { - height: number; - position: TimeGraphElementPosition; - textWidth: number = 0; + protected _height: number; + protected _position: TimeGraphElementPosition; static fontController: FontController = new FontController(); protected _options: TimeGraphStyledRect; @@ -26,77 +25,76 @@ export class TimeGraphRowElement extends TimeGraphComponent { protected range: TimelineChart.TimeGraphRange, protected _row: TimeGraphRow, protected _style: TimeGraphRowElementStyle = { color: 0xfffa66, height: 14 }, + protected displayWidth: number, displayObject?: PIXI.Graphics ) { super(id, displayObject); - this.height = _style.height || 14; - this.position = { + this._height = _style.height || 14; + this._position = { x: this.range.start, - y: this._row.position.y + ((this.row.height - this.height) / 2) + y: this._row.position.y + ((this.row.height - this._height) / 2) }; // min width of a state should never be less than 1 (for visibility) const width = Math.max(1, this.range.end - this.range.start); this._options = { color: _style.color, - height: this.height, - position: this.position, + height: this._height, + position: this._position, width, + displayWidth, borderRadius: 2, borderWidth: _style.borderWidth || 0, borderColor: _style.borderColor || 0x000000 }; - - if (this._model.label) { - const fontName = TimeGraphRowElement.fontController.getFontName(this._options.color ? this._options.color : 0, this._options.height - 2); - const labelTextObj = new PIXI.BitmapText(this._model.label, { fontName: fontName ? fontName : TimeGraphRowElement.fontController.getDefaultFontName() }); - this.textWidth = labelTextObj.getLocalBounds().width; - } } renderLabel() { - const position = this._options.position; - const width = this._options.width; - const textWidth = this.textWidth; - const labelText = this._model.label; + if (!this._model.label) { + return; + } const fontName = TimeGraphRowElement.fontController.getFontName(this._options.color ? this._options.color : 0, this._options.height - 2); + const textObj = new PIXI.BitmapText(this._model.label, { fontName: fontName ? fontName : TimeGraphRowElement.fontController.getDefaultFontName() }); + const textWidth = textObj.getLocalBounds().width; + const position = { + x: this._options.position.x + this._options.width < 0 ? this._options.position.x : Math.max(0, this._options.position.x), + y: this._options.position.y + } + const displayWidth = this._options.displayWidth ? this._options.displayWidth : 0; + const labelText = this._model.label; + + let textObjX = position.x + 0.5; + const textObjY = position.y + 0.5; + let displayLabel = ""; - if (this.displayObject.children.length) { - let textObj = this.displayObject.getChildAt(0) as PIXI.BitmapText; - textObj.x = position.x; - textObj.y = position.y; + if (displayWidth > textWidth) { + textObjX = position.x + (displayWidth - textWidth) / 2; + displayLabel = labelText; } - if (textWidth && labelText) { - if (width <= 0.1 * textWidth && this.displayObject.children.length) { - this.displayObject.removeChildAt(0); - } - else if (width > 0.1 * textWidth) { - let textObjX = position.x + 0.5; - let textObjY = position.y + 0.5; - let textStr = ""; - - if (width > textWidth) { - textObjX = position.x + (width - textWidth) / 2; - textStr = labelText; - } - else { - let textScaler = width / textWidth; - let index = Math.min(Math.floor(textScaler * labelText.length), labelText.length - 1) - let partialLabel = labelText.substr(0, Math.max(index - 4, 0)); - if (partialLabel.length > 0) { - textStr = partialLabel.concat("..."); - } - } - - if (this.displayObject.children.length !== 0) { - this.displayObject.removeChildAt(0); - } - - this.displayObject.addChild(new PIXI.BitmapText(textStr, { fontName: fontName })); - let textObj = this.displayObject.getChildAt(0) as PIXI.BitmapText; - textObj.x = textObjX; - textObj.y = textObjY; + else { + const textScaler = displayWidth / 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("..."); } } + + textObj.text = displayLabel; + textObj.x = textObjX; + textObj.y = textObjY; + this.displayObject.addChild(textObj); + } + + clearLabel() { + this.displayObject.removeChildren(); + } + + get height(): number { + return this._height; + } + + get position(): TimeGraphElementPosition { + return this._position; } get model(): TimelineChart.TimeGraphRowElementModel { @@ -131,13 +129,18 @@ export class TimeGraphRowElement extends TimeGraphComponent { if (opts) { this._options.position = opts.position; this._options.width = opts.width; + this._options.displayWidth = opts.displayWidth; } super.update(); } render() { - // this.rectTruncated(this._options); this.rect(this._options); this.renderLabel(); } + + clear() { + this.clearLabel(); + super.clear() + } } diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 6133208..cd3faea 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -214,7 +214,7 @@ export class TimeGraphChart extends TimeGraphChartLayer { x: this.getPixels(row.range.start - this.unitController.viewRange.start), y: comp.position.y }, - width: this.getPixels(row.range.end - row.range.start) + width: this.getPixels(row.range.end) - this.getPixels(row.range.start) } comp.update(opts); } @@ -230,7 +230,8 @@ export class TimeGraphChart extends TimeGraphChartLayer { y: el.position.y }, // min width of a state should never be less than 1 (for visibility) - width: Math.max(1, this.getPixels(end - start)) + width: Math.max(1, this.getPixels(end) - this.getPixels(start)), + displayWidth: this.getPixels(Math.min(this.unitController.viewRange.end, end)) - this.getPixels(Math.max(this.unitController.viewRange.start, start)) } el.update(opts); } @@ -245,14 +246,13 @@ export class TimeGraphChart extends TimeGraphChartLayer { protected addRow(row: TimelineChart.TimeGraphRowModel, height: number, rowIndex: number) { const rowId = 'row_' + rowIndex; - const length = row.range.end - row.range.start; const rowStyle = this.providers.rowStyleProvider ? this.providers.rowStyleProvider(row) : undefined; const rowComponent = new TimeGraphRow(rowId, { position: { x: this.getPixels(row.range.start), y: (height * rowIndex) }, - width: this.getPixels(length), + width: this.getPixels(row.range.end) - this.getPixels(row.range.start), height }, rowIndex, row, rowStyle); rowComponent.displayObject.interactive = true; @@ -287,8 +287,11 @@ export class TimeGraphChart extends TimeGraphChartLayer { start, end }; + const displayStart = this.getPixels(Math.max(rowElementModel.range.start, this.unitController.viewRange.start)); + const displayEnd = this.getPixels(Math.min(rowElementModel.range.end, this.unitController.viewRange.end)); + const displayWidth = displayEnd - displayStart; const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined; - el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle); + el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle, displayWidth); this.rowElementComponents.set(rowElementModel, el); return el; }