Skip to content

Commit

Permalink
Adjust State's label Position based on view range
Browse files Browse the repository at this point in the history 
fixes #68

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>
  • Loading branch information
@MatthewKhouzam
muddana-satish authored and MatthewKhouzam committed Nov 12, 2020
1 parent b1ef6ce commit 0b5dbb8
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 59 deletions.
1 change: 1 addition & 0 deletions timeline-chart/src/components/time-graph-component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface TimeGraphElementStyle {
borderWidth?: number
borderColor?: number
borderRadius?: number
displayWidth?: number
}
export interface TimeGraphElementPosition {
x: number
Expand Down
111 changes: 57 additions & 54 deletions timeline-chart/src/components/time-graph-row-element.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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()
}
}
13 changes: 8 additions & 5 deletions timeline-chart/src/layer/time-graph-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit 0b5dbb8

Please sign in to comment.