diff --git a/timeline-chart/src/layer/time-graph-chart-cursors.ts b/timeline-chart/src/layer/time-graph-chart-cursors.ts index 6532268..8c6a7a8 100644 --- a/timeline-chart/src/layer/time-graph-chart-cursors.ts +++ b/timeline-chart/src/layer/time-graph-chart-cursors.ts @@ -39,7 +39,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer { document.addEventListener('keyup', (event: KeyboardEvent) => { this.shiftKeyDown = event.shiftKey; }); - + this.stage.on('mousedown', (event: PIXI.InteractionEvent) => { this.mouseIsDown = true; const mouseX = event.data.global.x; @@ -89,47 +89,51 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer { protected navigateOrSelectLeft() { const row = this.rowController.selectedRow; - const states = row.states; - const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => { - const selStart = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0; - return rowElementModel.range.start >= selStart; - }); - let newPos = 0; - let elIndex = 0; - if (states.length == 0) - return false; - if (nextIndex > 0) { - elIndex = nextIndex - 1; - } else if (nextIndex === -1) { - elIndex = states.length - 1; - } - newPos = states[elIndex].range.start; - if (this.unitController.selectionRange && this.shiftKeyDown) { - this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos }; - } else { - this.unitController.selectionRange = { start: newPos, end: newPos }; + if (row) { + const states = row.states; + const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => { + const selStart = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0; + return rowElementModel.range.start >= selStart; + }); + let newPos = 0; + let elIndex = 0; + if (states.length == 0) + return false; + if (nextIndex > 0) { + elIndex = nextIndex - 1; + } else if (nextIndex === -1) { + elIndex = states.length - 1; + } + newPos = states[elIndex].range.start; + if (this.unitController.selectionRange && this.shiftKeyDown) { + this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos }; + } else { + this.unitController.selectionRange = { start: newPos, end: newPos }; + } + this.maybeCenterCursor(); + this.chartLayer.selectRowElement(states[elIndex]); } - this.maybeCenterCursor(); - this.chartLayer.selectRowElement(states[elIndex]); } protected navigateOrSelectRight() { const row = this.rowController.selectedRow; - const states = row.states; - const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => { - const cursorPosition = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0; - return rowElementModel.range.start > cursorPosition; - }); - if (nextIndex < states.length) { - const newPos = states[nextIndex] ? states[nextIndex].range.start : this.unitController.absoluteRange; - if (this.unitController.selectionRange && this.shiftKeyDown) { - this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos }; - } else { - this.unitController.selectionRange = { start: newPos, end: newPos }; + if (row) { + const states = row.states; + const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => { + const cursorPosition = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0; + return rowElementModel.range.start > cursorPosition; + }); + if (nextIndex < states.length) { + const newPos = states[nextIndex] ? states[nextIndex].range.start : this.unitController.absoluteRange; + if (this.unitController.selectionRange && this.shiftKeyDown) { + this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos }; + } else { + this.unitController.selectionRange = { start: newPos, end: newPos }; + } } + this.maybeCenterCursor(); + this.chartLayer.selectRowElement(states[nextIndex]); } - this.maybeCenterCursor(); - this.chartLayer.selectRowElement(states[nextIndex]); } protected navigateDown(){ diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 3cab1fc..90cc7de 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -342,20 +342,14 @@ export class TimeGraphChart extends TimeGraphChartLayer { this.updateElementStyle(this.selectedElementModel); } if (model) { - this.selectedElementModel = model; - model.selected = true; - this.updateElementStyle(this.selectedElementModel); const el = this.getElementById(model.id); if (el) { const row = el.row; if (row) { - const newEl = this.createNewRowElement(model, row); - if (newEl) { - this.removeChild(el); - this.addElementInteractions(newEl); - this.addChild(newEl); - this.selectRow(newEl.row.model); - } + this.selectedElementModel = el.model; + el.model.selected = true; + this.updateElementStyle(this.selectedElementModel); + this.selectRow(row.model); } } }