Skip to content

Commit

Permalink
improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbicker
jbicker committed Dec 20, 2018
1 parent cbee973 commit d2409c3
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 117 deletions.
122 changes: 59 additions & 63 deletions example/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { TimeGraphAxis } from "timeline-chart/lib/layer/time-graph-axis";
import { TimeGraphChart, TimeGraphRowStyleHook } from "timeline-chart/lib/layer/time-graph-chart";
import { TimeGraphChart } from "timeline-chart/lib/layer/time-graph-chart";
import { TimeGraphUnitController } from "timeline-chart/lib/time-graph-unit-controller";
import { TimeGraphNavigator } from "timeline-chart/lib/layer/time-graph-navigator";
import { TimeGraphContainer } from "timeline-chart/lib/time-graph-container";
Expand All @@ -11,7 +11,7 @@ import { TimeGraphRowElement, TimeGraphRowElementStyle } from "timeline-chart/li
import { TestDataProvider } from "./test-data-provider";
import { TimeGraphChartGrid } from "timeline-chart/lib/layer/time-graph-chart-grid";
import { TimeGraphVerticalScrollbar } from "timeline-chart/lib/layer/time-graph-vertical-scrollbar";
import { TimeGraphChartArrows } from "timeline-chart/lib/layer/time-graph-chart-arrows";
// import { TimeGraphChartArrows } from "timeline-chart/lib/layer/time-graph-chart-arrows";

const styleConfig = {
mainWidth: 1000,
Expand All @@ -22,43 +22,6 @@ const styleConfig = {
}

const styleMap = new Map<string, TimeGraphRowElementStyle>();
const stateStyleHook = (model: TimeGraphRowElementModel) => {
const styles: TimeGraphRowElementStyle[] = [
{
color: 0x11ad1b,
height: rowHeight * 0.8
}, {
color: 0xbc2f00,
height: rowHeight * 0.7
}, {
color: 0xccbf5d,
height: rowHeight * 0.6
}
];
let style: TimeGraphRowElementStyle | undefined = styles[0];
if (model.data && model.data.value) {
const val = model.data.value;
style = styleMap.get(val);
if (!style) {
style = styles[(styleMap.size % styles.length)];
styleMap.set(val, style);
}
}
return {
color: style.color,
height: style.height,
borderWidth: model.selected ? 1 : 0
};
}

const rowStyleHook: TimeGraphRowStyleHook = (row: TimeGraphRowModel) => {
return {
backgroundColor: 0xe0ddcf,
backgroundOpacity: row.selected ? 0.6 : 0,
lineColor: row.data && row.data.hasStates ? 0xdddddd : 0xaa4444,
lineThickness: row.data && row.data.hasStates ? 1 : 3
}
}

const container = document.getElementById('main');
if (!container) {
Expand Down Expand Up @@ -110,11 +73,62 @@ const rowHeight = 16;
const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
timeGraphChartContainer.addLayer(timeGraphChartGridLayer);

const timeGraphChartLayer = new TimeGraphChart('timeGraphChart', rowHeight);
const timeGraphChartLayer = new TimeGraphChart('timeGraphChart', {
dataProvider: (range: TimeGraphRange, resolution: number) => {
timeGraph = testDataProvider.getData(range);
if (selectedElement) {
for (const row of timeGraph.rows) {
const selEl = row.states.find(el => el.id === selectedElement.id);
if (selEl) {
selEl.selected = true;
break;
}
}
}
return {
rows: timeGraph.rows,
range
};
},
rowElementStyleProvider: (model: TimeGraphRowElementModel) => {
const styles: TimeGraphRowElementStyle[] = [
{
color: 0x11ad1b,
height: rowHeight * 0.8
}, {
color: 0xbc2f00,
height: rowHeight * 0.7
}, {
color: 0xccbf5d,
height: rowHeight * 0.6
}
];
let style: TimeGraphRowElementStyle | undefined = styles[0];
if (model.data && model.data.value) {
const val = model.data.value;
style = styleMap.get(val);
if (!style) {
style = styles[(styleMap.size % styles.length)];
styleMap.set(val, style);
}
}
return {
color: style.color,
height: style.height,
borderWidth: model.selected ? 1 : 0
};
},
rowStyleProvider: (row: TimeGraphRowModel) => {
return {
backgroundColor: 0xe0ddcf,
backgroundOpacity: row.selected ? 0.6 : 0,
lineColor: row.data && row.data.hasStates ? 0xdddddd : 0xaa4444,
lineThickness: row.data && row.data.hasStates ? 1 : 3
}
}
}, rowHeight);
timeGraphChartContainer.addLayer(timeGraphChartLayer);

timeGraphChartLayer.registerRowElementStyleHook(stateStyleHook);
timeGraphChartLayer.registerRowStyleHook(rowStyleHook);
timeGraphChartLayer.registerRowElementMouseInteractions({
click: el => {
console.log(el.model.label);
Expand All @@ -131,27 +145,9 @@ timeGraphChartLayer.onSelectedRowElementChanged((model) => {
}
})

timeGraphChartLayer.setRowModel(timeGraph.rows);
timeGraphChartLayer.registerPullHook((range: TimeGraphRange, resolution: number) => {
timeGraph = testDataProvider.getData(range);
if (selectedElement) {
for (const row of timeGraph.rows) {
const selEl = row.states.find(el => el.id === selectedElement.id);
if (selEl) {
selEl.selected = true;
break;
}
}
}
return {
rows: timeGraph.rows,
range
};
});

const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows');
timeGraphChartContainer.addLayer(timeGraphChartArrows);
timeGraphChartArrows.addArrows(timeGraph.arrows, rowHeight);
// const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows');
// timeGraphChartContainer.addLayer(timeGraphChartArrows);
// timeGraphChartArrows.addArrows(timeGraph.arrows, rowHeight);

const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors', { color: styleConfig.cursorColor });
timeGraphAxisContainer.addLayer(timeAxisCursors);
Expand Down
1 change: 0 additions & 1 deletion example/src/test-data-provider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,6 @@ export class TestDataProvider {
})
let arrows: TimeGraphArrow[] = [];
timeGraphArrows.forEach(arrow => {
console.log("in provider arrow", arrow, this.absoluteStart);
arrows.push({
sourceId: arrow.sourceId,
destinationId: arrow.destinationId,
Expand Down
22 changes: 11 additions & 11 deletions timeline-chart/src/components/time-graph-grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@ export class TimeGraphGrid extends TimeGraphAxisScale {
render(): void {
this.renderVerticalLines(this.stateController.canvasDisplayHeight, 0xdddddd);

const rowNumber = Math.trunc(this.stateController.canvasDisplayHeight / this.rowHeight) + 2;
for (let i = 0; i < rowNumber; i++) {
this.hline({
color: 0xdddddd,
position: {
x: this._options.position.x,
y: (i * this.rowHeight) - (this.rowHeight / 2)
},
width: this._options.width
});
}
// const rowNumber = Math.trunc(this.stateController.canvasDisplayHeight / this.rowHeight) + 2;
// for (let i = 0; i < rowNumber; i++) {
// this.hline({
// color: 0xdddddd,
// position: {
// x: this._options.position.x,
// y: (i * this.rowHeight) - (this.rowHeight / 2)
// },
// width: this._options.width
// });
// }
}
}
16 changes: 13 additions & 3 deletions timeline-chart/src/layer/time-graph-chart-cursors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
}
}

protected updateScaleAndPosition() {
this.layer.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor);
this.layer.scale.x = this.stateController.zoomFactor;
}

protected afterAddToContainer() {
this.addBackground();
this.mouseIsDown = false;
Expand All @@ -39,6 +44,7 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
this.mouseIsDown = true;
const mouseX = event.data.global.x;
const xpos = this.unitController.viewRange.start + (mouseX / this.stateController.zoomFactor);
console.log("SET CURSOR AT", xpos);
if (this.shiftKeyDown) {
const start = this.unitController.selectionRange ? this.unitController.selectionRange.start : 0;
this.unitController.selectionRange = {
Expand Down Expand Up @@ -69,8 +75,12 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
this.stage.on('mouseupoutside', (event: PIXI.interaction.InteractionEvent) => {
this.mouseIsDown = false;
});
this.unitController.onViewRangeChanged(() => {
this.updateScaleAndPosition();
});
this.updateScaleAndPosition();
this.unitController.onSelectionRangeChange(() => this.update());
this.unitController.onViewRangeChanged(() => this.update());
// this.unitController.onViewRangeChanged(() => this.update());
}

protected maybeCenterCursor() {
Expand Down Expand Up @@ -154,8 +164,8 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
this.removeChildren();
this.addBackground();
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.unitController.selectionRange.start;//(this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
const secondCursorPosition = this.unitController.selectionRange.end;//(this.unitController.selectionRange.end - this.unitController.viewRange.start) * this.stateController.zoomFactor;
const firstCursorOptions = {
color: this.color,
height: this.stateController.canvasDisplayHeight,
Expand Down
61 changes: 29 additions & 32 deletions timeline-chart/src/layer/time-graph-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,33 +13,31 @@ export interface TimeGraphRowElementMouseInteractions {
mouseup?: (el: TimeGraphRowElement, ev: PIXI.interaction.InteractionEvent) => void
}

export interface TimeGraphChartProviders {
dataProvider: (range: TimeGraphRange, resolution: number) => { rows: TimeGraphRowModel[], range: TimeGraphRange }
rowElementStyleProvider?: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined
rowStyleProvider?: (row: TimeGraphRowModel) => TimeGraphRowStyle | undefined
}

export type TimeGraphRowStyleHook = (row: TimeGraphRowModel) => TimeGraphRowStyle | undefined;

export class TimeGraphChart extends TimeGraphLayer {

protected rows: TimeGraphRowModel[];
protected rowElementStyleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined;
protected rowStyleHook: (row: TimeGraphRowModel) => TimeGraphRowStyle | undefined;
protected rowElementMouseInteractions: TimeGraphRowElementMouseInteractions;
protected selectedElementModel: TimeGraphRowElementModel;
protected selectedElementChangedHandler: ((el: TimeGraphRowElementModel) => void)[] = [];
protected selectedRow: TimeGraphRowModel;
protected selectedRowChangedHandler: ((el: TimeGraphRowModel) => void)[] = [];
protected verticalPositionChangedHandler: ((verticalChartPosition: number) => void)[] = [];
protected totalHeight: number;
protected throttledUpdate: () => void;
protected pullHook: (range: TimeGraphRange, resolution: number) => {rows: TimeGraphRowModel[], range: TimeGraphRange};

constructor(id: string, protected rowHeight: number) {
constructor(id: string, protected providers: TimeGraphChartProviders, protected rowHeight: number) {
super(id);
}

protected afterAddToContainer() {
this.unitController.onViewRangeChanged(() => {
this.stage.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor);
this.stage.scale.x = this.stateController.zoomFactor;
this.update();
});

this.onCanvasEvent('mousewheel', (ev: WheelEvent) => {
const shiftStep = ev.deltaY;
let verticalOffset = this.stateController.positionOffset.y + shiftStep;
Expand All @@ -50,13 +48,28 @@ export class TimeGraphChart extends TimeGraphLayer {
verticalOffset = this.totalHeight - this.stateController.canvasDisplayHeight;
}
this.stateController.positionOffset.y = verticalOffset;
this.stage.position.y = -verticalOffset;
this.layer.position.y = -verticalOffset;
this.handleVerticalPositionChange();
return false;
});

this.unitController.onViewRangeChanged(() => {
this.updateScaleAndPosition();
});
this.updateScaleAndPosition();

// lets fetch everything
const rowData = this.providers.dataProvider({ start: 0, end: this.unitController.absoluteRange }, 1);
this.setRowModel(rowData.rows);
this.addRows(this.rows, this.rowHeight);
}

update() {}
update() { }

protected updateScaleAndPosition() {
this.layer.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor);
this.layer.scale.x = this.stateController.zoomFactor;
}

protected handleVerticalPositionChange() {
this.verticalPositionChangedHandler.forEach(handler => handler(this.stateController.positionOffset.y));
Expand All @@ -73,7 +86,7 @@ export class TimeGraphChart extends TimeGraphLayer {
protected addRow(row: TimeGraphRowModel, height: number, rowIndex: number) {
const rowId = 'row_' + rowIndex;
const length = row.range.end - row.range.start;
const rowStyle = this.rowStyleHook ? this.rowStyleHook(row) : undefined;
const rowStyle = this.providers.rowStyleProvider ? this.providers.rowStyleProvider(row) : undefined;
const rowComponent = new TimeGraphRow(rowId, {
position: {
x: row.range.start,
Expand All @@ -94,7 +107,7 @@ export class TimeGraphChart extends TimeGraphLayer {
start,
end
};
const elementStyle = this.rowElementStyleHook ? this.rowElementStyleHook(rowElementModel) : undefined;
const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined;
const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle);
this.addElementInteractions(el);
this.addChild(el);
Expand Down Expand Up @@ -142,20 +155,8 @@ export class TimeGraphChart extends TimeGraphLayer {
});
}

registerPullHook(pullHook: (range: TimeGraphRange, resolution: number) => {rows: TimeGraphRowModel[], range: TimeGraphRange}){
this.pullHook = pullHook;
// lets fetch everything
const rowData = this.pullHook({ start:0, end: this.unitController.absoluteRange}, 1);
this.setRowModel(rowData.rows);
this.addRows(rowData.rows, this.rowHeight);
}

registerRowStyleHook(styleHook: TimeGraphRowStyleHook) {
this.rowStyleHook = styleHook;
}

registerRowElementStyleHook(styleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined) {
this.rowElementStyleHook = styleHook;
protected setRowModel(rows: TimeGraphRowModel[]) {
this.rows = rows;
}

registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) {
Expand Down Expand Up @@ -215,10 +216,6 @@ export class TimeGraphChart extends TimeGraphLayer {
this.handleSelectedRowElementChange();
}

setRowModel(rows: TimeGraphRowModel[]) {
this.rows = rows;
}

setVerticalPositionOffset(ypos: number) {
this.stateController.positionOffset.y = ypos;
}
Expand Down
Loading

0 comments on commit d2409c3

Please sign in to comment.