Skip to content

Commit

Permalink
Fixed cursor navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbicker
jbicker committed Nov 29, 2018
1 parent 863404c commit e6301f6
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 119 deletions.
10 changes: 6 additions & 4 deletions src/components/time-graph-row-element.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component";
import { TimeGraphRow } from "./time-graph-row";
import { TimeGraphRowElementModel } from "../time-graph-model";
import { TimeGraphRowElementModel, TimeGraphRange } from "../time-graph-model";

export interface TimeGraphRowElementStyle {
color?: number
Expand All @@ -16,22 +16,24 @@ export class TimeGraphRowElement extends TimeGraphComponent {
constructor(
id: string,
protected _options: TimeGraphRowElementModel,
protected range: TimeGraphRange,
protected _row: TimeGraphRow,
style: TimeGraphRowElementStyle = { color: 0xfffa66, height: 14 }
) {
super(id);
const height = style.height || 14;
const position = {
x: this._options.range.start,
x: this.range.start,
y: this._row.position.y - (height / 2)
};
const width = this._options.range.end - this._options.range.start;
const width = this.range.end - this.range.start;
this.rectangleOptions = {
color: style.color,
height,
position,
width,
borderRadius: 2
borderRadius: 2,
borderWidth: style.borderWidth || 0
};
}

Expand Down
47 changes: 21 additions & 26 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,26 +57,27 @@ const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeigh
timeGraphChartContainer.addLayer(timeGraphChartGridLayer);

function getRowElementStyle(model: TimeGraphRowElementModel): TimeGraphRowElementStyle {
let style: TimeGraphRowElementStyle = {
color: 0x11ad1b,
height: 18
};
if (model.data && model.data.type) {
if (model.data.type === 'red') {
return {
style = {
color: 0xbc2f00,
height: 10,
borderWidth: 0
height: 10
}
} else if (model.data.type === 'yellow') {
return {
style = {
color: 0xccbf5d,
height: 10,
borderWidth: 0
height: 10
}
}
}
return {
color: 0x11ad1b,
height: 18,
borderWidth: 0
if(model.selected){
style.borderWidth = 1;
}
return style;
}

const timeGraphChartLayer = new TimeGraphChart('timeGraphChart');
Expand All @@ -89,16 +90,14 @@ timeGraphChartLayer.registerRowElementMouseInteractions({
click: el => { console.log(el.model.label) }
});
let selectedElement: TimeGraphRowElement;
timeGraphChartLayer.onSelectedRowElementChanged(el => {
if (selectedElement) {
selectedElement.style = getRowElementStyle(selectedElement.model);
timeGraphChartLayer.onSelectedRowElementChanged((model)=>{
const el = timeGraphChartLayer.getElementById(model.id);
if(el){
selectedElement = el;
}
selectedElement = el;
el.style = {
borderWidth: 1
}
});
timeGraphChartLayer.addRows(timeGraph.rows, rowHeight);
})

timeGraphChartLayer.setRowModel(timeGraph.rows, rowHeight);

// const timeGraphChartArrows = new TimeGraphChartArrows('chartArrows');
// timeGraphChartContainer.addLayer(timeGraphChartArrows);
Expand All @@ -123,9 +122,9 @@ timeGraphChartCursors.onNavigateLeft(() => {
}
newPos = states[elIndex].range.start;
unitController.selectionRange = { start: newPos, end: newPos };
const elementToSelect = timeGraphChartLayer.getElementByIndices(selectedRowIndex, elIndex);
const elementToSelect = timeGraphChartLayer.getElementById(states[elIndex].id);
if (elementToSelect) {
timeGraphChartLayer.selectRowElement(elementToSelect);
timeGraphChartLayer.selectRowElement(states[elIndex]);
}
});
timeGraphChartCursors.onNavigateRight(() => {
Expand All @@ -136,15 +135,11 @@ timeGraphChartCursors.onNavigateRight(() => {
const selStart = unitController.selectionRange ? unitController.selectionRange.start : 0;
return rowElementModel.range.start > selStart;
});
let elementToSelect;
if (nextIndex < states.length) {
const newPos = states[nextIndex].range.start;
unitController.selectionRange = { start: newPos, end: newPos };
elementToSelect = timeGraphChartLayer.getElementByIndices(selectedRowIndex, nextIndex);
}
if (elementToSelect) {
timeGraphChartLayer.selectRowElement(elementToSelect);
}
timeGraphChartLayer.selectRowElement(states[nextIndex]);
});

const naviEl = document.createElement('div');
Expand Down
131 changes: 68 additions & 63 deletions src/layer/time-graph-chart.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { TimeGraphRowElement, TimeGraphRowElementStyle } from "../components/time-graph-row-element";
import { TimeGraphRow } from "../components/time-graph-row";
import { TimeGraphRowModel, TimeGraphRowElementModel } from "../time-graph-model";
import { TimeGraphRowModel, TimeGraphRowElementModel, TimeGraphRange } from "../time-graph-model";
import { TimeGraphLayer } from "./time-graph-layer";
import { TimeGraphComponent } from "../components/time-graph-component";

Expand All @@ -18,10 +18,10 @@ export class TimeGraphChart extends TimeGraphLayer {
protected rowHeight: number;
protected rowElementStyleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined;
protected rowElementMouseInteractions: TimeGraphRowElementMouseInteractions;
protected selectedElement: TimeGraphRowElement;
protected selectedElementChangedHandler: ((el:TimeGraphRowElement)=>void)[];
protected selectedElementModel: TimeGraphRowElementModel;
protected selectedElementChangedHandler: ((el: TimeGraphRowElementModel) => void)[];
protected selectedRow: TimeGraphRow;
protected selectedRowChangedHandler: ((el:TimeGraphRow)=>void)[];
protected selectedRowChangedHandler: ((el: TimeGraphRow) => void)[];

protected init() {
this.unitController.onViewRangeChanged(() => {
Expand All @@ -31,93 +31,53 @@ export class TimeGraphChart extends TimeGraphLayer {
this.selectedRowChangedHandler = [];
}

registerRowElementStyleHook(styleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined) {
this.rowElementStyleHook = styleHook;
}

registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) {
this.rowElementMouseInteractions = interactions;
}

onSelectedRowElementChanged(handler:(el:TimeGraphRowElement)=>void){
this.selectedElementChangedHandler.push(handler);
protected handleSelectedRowElementChange() {
this.selectedElementChangedHandler.forEach(handler => handler(this.selectedElementModel));
}

onSelectedRowChanged(handler:(row:TimeGraphRow)=>void){
this.selectedRowChangedHandler.push(handler);
}

getRowModels(): TimeGraphRowModel[] {
return this.rows;
}

protected handleSelectedRowElementChange(){
this.selectedElementChangedHandler.forEach(handler => handler(this.selectedElement));
}

protected handleSelectedRowChange(){
protected handleSelectedRowChange() {
this.selectedRowChangedHandler.forEach(handler => handler(this.selectedRow));
}

protected addRow(row: TimeGraphRowModel, height: number, rowIndex: number) {
const rowId = 'row' + rowIndex;
const rowId = 'row_' + rowIndex;
const range = row.range.end - row.range.start;
const relativeStartPosition = row.range.start - this.unitController.viewRange.start;
const rowComponent = new TimeGraphRow(rowId, {
position: {
x: relativeStartPosition * this.stateController.zoomFactor,
y: (height * this.rows.length) + (height / 2)
y: (height * rowIndex) + (height / 2)
},
width: range * this.stateController.zoomFactor
}, rowIndex);
this.addChild(rowComponent);
this.rows.push(row);

row.states.forEach((rowElement: TimeGraphRowElementModel, elementIndex: number) => {
const relativeElementStartPosition = rowElement.range.start - this.unitController.viewRange.start;
const relativeElementEndPosition = rowElement.range.end - this.unitController.viewRange.start;
row.states.forEach((rowModel: TimeGraphRowElementModel, elementIndex: number) => {
const relativeElementStartPosition = rowModel.range.start - this.unitController.viewRange.start;
const relativeElementEndPosition = rowModel.range.end - this.unitController.viewRange.start;
const start = (relativeElementStartPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x;
const end = (relativeElementEndPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x;
if (start < this.canvas.width && end > 0) {
const newRowElement: TimeGraphRowElementModel = {
label: rowElement.label,
range: {
start,
end
},
data: rowElement.data
}
const style = this.rowElementStyleHook ? this.rowElementStyleHook(newRowElement) : undefined;
const el = new TimeGraphRowElement('el_' + rowIndex + '_' + elementIndex, newRowElement, rowComponent, style);
const range: TimeGraphRange = {
start,
end
};
const style = this.rowElementStyleHook ? this.rowElementStyleHook(rowModel) : undefined;
const el = new TimeGraphRowElement('el_' + rowModel.id, rowModel, range, rowComponent, style);
this.addElementInteractions(el);
this.addChild(el);
}
});
}

getElementByIndices(rowIdx: number, elIdx: number):TimeGraphRowElement | undefined {
const element: TimeGraphComponent | undefined = this.children.find((child)=>{
const id = 'el_' + rowIdx + '_' + elIdx;
return child.id === id;
});
return element as TimeGraphRowElement;
}

selectRowElement(el: TimeGraphRowElement){
this.selectedElement = el;
this.selectRow(el.row);
this.handleSelectedRowElementChange();
}

protected selectRow(row: TimeGraphRow){
protected selectRow(row: TimeGraphRow) {
this.selectedRow = row;
this.handleSelectedRowChange();
}

protected addElementInteractions(el: TimeGraphRowElement) {
el.displayObject.interactive = true;
el.displayObject.on('click', ((e: PIXI.interaction.InteractionEvent) => {
this.selectRowElement(el);
this.selectRowElement(el.model);
if (this.rowElementMouseInteractions && this.rowElementMouseInteractions.click) {
this.rowElementMouseInteractions.click(el, e);
}
Expand All @@ -144,13 +104,12 @@ export class TimeGraphChart extends TimeGraphLayer {
}).bind(this));
}

addRows(rows: TimeGraphRowModel[], height: number) {
protected addRows(rows: TimeGraphRowModel[], height: number) {
if (!this.stateController) {
throw ('Add this TimeGraphChart to a container before adding rows.');
}
this.rowHeight = height;
this.rows = [];
rows.forEach((row:TimeGraphRowModel, index: number) => {
rows.forEach((row: TimeGraphRowModel, index: number) => {
this.addRow(row, height, index);
})
}
Expand All @@ -162,4 +121,50 @@ export class TimeGraphChart extends TimeGraphLayer {
}
}

registerRowElementStyleHook(styleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined) {
this.rowElementStyleHook = styleHook;
}

registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) {
this.rowElementMouseInteractions = interactions;
}

onSelectedRowElementChanged(handler: (el: TimeGraphRowElementModel) => void) {
this.selectedElementChangedHandler.push(handler);
}

onSelectedRowChanged(handler: (row: TimeGraphRow) => void) {
this.selectedRowChangedHandler.push(handler);
}

getRowModels(): TimeGraphRowModel[] {
return this.rows;
}

getElementById(id: string): TimeGraphRowElement | undefined {
const element: TimeGraphComponent | undefined = this.children.find((child) => {
return child.id === 'el_' + id;
});
return element as TimeGraphRowElement;
}

selectRowElement(model: TimeGraphRowElementModel) {
if (this.selectedElementModel) {
this.selectedElementModel.selected = false;
}
this.selectedElementModel = model;
model.selected = true;
const el = this.getElementById(model.id);
if (el) {
this.selectRow(el.row);
}
this.handleSelectedRowElementChange();
this.update();
}

setRowModel(rows: TimeGraphRowModel[], rowHeight: number) {
this.rowHeight = rowHeight;
this.rows = rows;
this.update();
}
}
Loading

0 comments on commit e6301f6

Please sign in to comment.