Skip to content

Commit

Permalink
Several improvements and bugfixes regarding scaling and selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbicker
jbicker committed Jan 30, 2019
1 parent 9a16849 commit 7e0c9e5
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 21 deletions.
4 changes: 4 additions & 0 deletions timeline-chart/src/components/time-graph-rectangle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ export class TimeGraphRectangle extends TimeGraphComponent {
this._options = opts;
}

get rectOptions(): TimeGraphStyledRect {
return this._options as TimeGraphStyledRect;
}

render(): void {
this.rect(this._options as TimeGraphStyledRect);
}
Expand Down
2 changes: 1 addition & 1 deletion timeline-chart/src/components/time-graph-row-element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class TimeGraphRowElement extends TimeGraphComponent {
this._options.height = style.height;
}
if (style.borderColor !== undefined) {
this._options.borderColor = style.color;
this._options.borderColor = style.borderColor;
}
if (style.borderWidth !== undefined) {
this._options.borderWidth = style.borderWidth;
Expand Down
4 changes: 2 additions & 2 deletions timeline-chart/src/layer/time-graph-axis-cursors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export class TimeGraphAxisCursors extends TimeGraphLayer {

update(): void {
if (this.unitController.selectionRange) {
const firstCursorPosition = (this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
const secondCursorPosition = (this.unitController.selectionRange.end - this.unitController.viewRange.start) * this.stateController.zoomFactor;
const firstCursorPosition = this.getPixels(this.unitController.selectionRange.start - this.unitController.viewRange.start);
const secondCursorPosition = this.getPixels(this.unitController.selectionRange.end - this.unitController.viewRange.start);
const firstOpts = {
color: this.color,
position: {
Expand Down
4 changes: 2 additions & 2 deletions timeline-chart/src/layer/time-graph-chart-arrows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer {
protected getCoordinates(arrow: TimelineChart.TimeGraphArrow): TimeGraphArrowCoordinates {
const relativeStartPosition = arrow.range.start - this.unitController.viewRange.start;
const start: TimeGraphElementPosition = {
x: relativeStartPosition * this.stateController.zoomFactor,
x: this.getPixels(relativeStartPosition),
y: (arrow.sourceId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
}
const end: TimeGraphElementPosition = {
x: (relativeStartPosition + arrow.range.end - arrow.range.start) * this.stateController.zoomFactor,
x: this.getPixels(relativeStartPosition + arrow.range.end - arrow.range.start),
y: (arrow.destinationId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
}
return { start, end };
Expand Down
4 changes: 2 additions & 2 deletions timeline-chart/src/layer/time-graph-chart-cursors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {

update() {
if (this.unitController.selectionRange) {
const firstCursorPosition = (this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
const secondCursorPosition = (this.unitController.selectionRange.end - this.unitController.viewRange.start) * this.stateController.zoomFactor;
const firstCursorPosition = this.getPixels(this.unitController.selectionRange.start - this.unitController.viewRange.start);
const secondCursorPosition = this.getPixels(this.unitController.selectionRange.end - this.unitController.viewRange.start);
const firstCursorOptions = {
color: this.color,
height: this.stateController.canvasDisplayHeight,
Expand Down
14 changes: 8 additions & 6 deletions timeline-chart/src/layer/time-graph-chart-selection-range.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,24 @@ export class TimeGraphChartSelectionRange extends TimeGraphLayer {
}

protected updateScaleAndPosition() {
this.layer.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor);
this.layer.scale.x = this.stateController.zoomFactor;
if (this.unitController.selectionRange) {
this.selectionRange.rectOptions.position.x = this.getPixels(this.unitController.selectionRange.start - this.unitController.viewRange.start);
this.selectionRange.rectOptions.width = this.getPixels(this.unitController.selectionRange.end - this.unitController.selectionRange.start)
this.selectionRange.update();
}
}

protected afterAddToContainer() {
this.unitController.onViewRangeChanged(() => {
this.updateScaleAndPosition();
});
this.updateScaleAndPosition();
this.unitController.onSelectionRangeChange(() => this.update());
}

update() {
if (this.unitController.selectionRange) {
const firstCursorPosition = this.unitController.selectionRange.start;
const secondCursorPosition = this.unitController.selectionRange.end;
const firstCursorPosition = this.getPixels(this.unitController.selectionRange.start - this.unitController.viewRange.start);
const secondCursorPosition = this.getPixels(this.unitController.selectionRange.end - this.unitController.viewRange.start);
if (secondCursorPosition !== firstCursorPosition) {
if (!this.selectionRange) {
this.selectionRange = new TimeGraphRectangle({
Expand All @@ -54,7 +56,7 @@ export class TimeGraphChartSelectionRange extends TimeGraphLayer {
width: secondCursorPosition - firstCursorPosition
})
}
}else{
} else {
this.removeChildren();
delete this.selectionRange;
}
Expand Down
25 changes: 17 additions & 8 deletions timeline-chart/src/layer/time-graph-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,10 @@ export class TimeGraphChart extends TimeGraphChartLayer {
const opts: TimeGraphRect = {
height: this.rowController.rowHeight,
position: {
x: (row.range.start - this.unitController.viewRange.start) * this.stateController.zoomFactor,
x: this.getPixels(row.range.start - this.unitController.viewRange.start),
y: comp.position.y
},
width: (row.range.end - row.range.start) * this.stateController.zoomFactor
width: this.getPixels(row.range.end - row.range.start)
}
comp.update(opts);
}
Expand All @@ -159,10 +159,10 @@ export class TimeGraphChart extends TimeGraphChartLayer {
const opts: TimeGraphStyledRect = {
height: el.height,
position: {
x: (start - this.unitController.viewRange.start) * this.stateController.zoomFactor,
x: this.getPixels(start - this.unitController.viewRange.start),
y: el.position.y
},
width: (end - start) * this.stateController.zoomFactor
width: this.getPixels(end - start)
}
el.update(opts);
}
Expand All @@ -181,10 +181,10 @@ export class TimeGraphChart extends TimeGraphChartLayer {
const rowStyle = this.providers.rowStyleProvider ? this.providers.rowStyleProvider(row) : undefined;
const rowComponent = new TimeGraphRow(rowId, {
position: {
x: row.range.start * this.stateController.zoomFactor,
x: this.getPixels(row.range.start),
y: (height * rowIndex)
},
width: length * this.stateController.zoomFactor,
width: this.getPixels(length),
height
}, rowIndex, row, rowStyle);
rowComponent.displayObject.interactive = true;
Expand All @@ -194,15 +194,16 @@ export class TimeGraphChart extends TimeGraphChartLayer {
this.addChild(rowComponent);
this.rowComponents.set(row, rowComponent);
row.states.forEach((rowElementModel: TimelineChart.TimeGraphRowElementModel, elementIndex: number) => {
const start = rowElementModel.range.start * this.stateController.zoomFactor;
const end = rowElementModel.range.end * this.stateController.zoomFactor;
const start = this.getPixels(rowElementModel.range.start);
const end = this.getPixels(rowElementModel.range.end);
const range: TimelineChart.TimeGraphRange = {
start,
end
};
const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined;
const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle);
this.rowElementComponents.set(rowElementModel, el);
el.model.selected && (this.selectedElementModel = el.model);
this.addElementInteractions(el);
this.addChild(el);
});
Expand Down Expand Up @@ -254,6 +255,12 @@ export class TimeGraphChart extends TimeGraphChartLayer {
this.rows = rows;
}

protected updateElementStyle(model: TimelineChart.TimeGraphRowElementModel) {
const style = this.providers.rowElementStyleProvider && this.providers.rowElementStyleProvider(this.selectedElementModel);
const component = this.rowElementComponents.get(model);
component && style && (component.style = style);
}

registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) {
this.rowElementMouseInteractions = interactions;
}
Expand Down Expand Up @@ -288,9 +295,11 @@ export class TimeGraphChart extends TimeGraphChartLayer {
selectRowElement(model: TimelineChart.TimeGraphRowElementModel) {
if (this.selectedElementModel) {
delete this.selectedElementModel.selected;
this.updateElementStyle(this.selectedElementModel);
}
this.selectedElementModel = model;
model.selected = true;
this.updateElementStyle(this.selectedElementModel);
const el = this.getElementById(model.id);
if (el) {
this.selectRow(el.row.model);
Expand Down
4 changes: 4 additions & 0 deletions timeline-chart/src/layer/time-graph-layer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,9 @@ export abstract class TimeGraphLayer {
this.layer.removeChild(child.displayObject);
}

protected getPixels(ticks: number){
return ticks * this.stateController.zoomFactor;
}

protected afterAddToContainer() { }
}

0 comments on commit 7e0c9e5

Please sign in to comment.