From 387adb98195bb0f046f756461da96783ba832a66 Mon Sep 17 00:00:00 2001 From: Jan Bicker Date: Fri, 16 Nov 2018 14:45:20 +0000 Subject: [PATCH] minor changes --- src/time-graph-axis-scale.ts | 10 ++++-- src/time-graph-axis.ts | 21 +++++++----- src/time-graph-chart.ts | 2 +- src/time-graph-interaction.ts | 53 ++++++++++++++++-------------- src/time-graph-row-element.ts | 45 +++++++++++++++++++++---- src/time-graph-state-controller.ts | 8 ++--- 6 files changed, 92 insertions(+), 47 deletions(-) diff --git a/src/time-graph-axis-scale.ts b/src/time-graph-axis-scale.ts index bd4bb19..cf80b36 100644 --- a/src/time-graph-axis-scale.ts +++ b/src/time-graph-axis-scale.ts @@ -1,9 +1,16 @@ import { TimeGraphComponent, TimeGraphRect } from "./time-graph-component"; +import { TimeGraphInteraction } from "./time-graph-interaction"; export class TimeGraphAxisScale extends TimeGraphComponent { - constructor(id: string, protected options: TimeGraphRect) { + constructor(id: string, protected options: TimeGraphRect, interaction: TimeGraphInteraction) { super(id); + + const navigationApi = interaction.dnDZoomAndPan; + interaction.addEvent('mousedown', navigationApi.start, this._displayObject); + interaction.addEvent('mousemove', navigationApi.move, this._displayObject); + interaction.addEvent('mouseup', navigationApi.end, this._displayObject); + interaction.addEvent('mouseupoutside', navigationApi.end, this._displayObject); } render() { @@ -13,7 +20,6 @@ export class TimeGraphAxisScale extends TimeGraphComponent { width: this.options.width, position: this.options.position }); - console.log("render axis", this.options.width); } } \ No newline at end of file diff --git a/src/time-graph-axis.ts b/src/time-graph-axis.ts index a35a48e..a35fc48 100644 --- a/src/time-graph-axis.ts +++ b/src/time-graph-axis.ts @@ -5,6 +5,8 @@ import { TimeGraphStateController } from "./time-graph-state-controller"; export class TimeGraphAxis extends TimeGraphContainer { + protected scaleComponent: TimeGraphAxisScale; + constructor(protected canvasOpts: TimeGraphContainerOptions, protected range: TimeGraphRange, protected controller: TimeGraphStateController) { super({ id: canvasOpts.id, @@ -13,22 +15,25 @@ export class TimeGraphAxis extends TimeGraphContainer { backgroundColor: 0xAA30f0 }, controller); - this.update(); - this.controller.zoomAndPanController.addMousewheelZoomAndPan(this.canvas); + this.init(); + this.controller.timeGraphInteraction.addMousewheelZoomAndPan(this.canvas); } - update() { - this.stage.removeChildren(); - const scaleComponent = new TimeGraphAxisScale(this.canvasOpts.id + '_scale', { + init() { + this.scaleComponent = new TimeGraphAxisScale(this.canvasOpts.id + '_scale', { height: 30, width: (this.range.end - this.range.start) * this._controller.zoomFactor, position: { x: this._controller.positionOffset.x, y: 0 } - }); + }, this._controller.timeGraphInteraction); - this.addChild(scaleComponent); - this.controller.zoomAndPanController.addDnDZoomAndPan(scaleComponent.displayObject); + this.addChild(this.scaleComponent); + } + + update() { + this.scaleComponent.clear(); + this.scaleComponent.render(); } } \ No newline at end of file diff --git a/src/time-graph-chart.ts b/src/time-graph-chart.ts index 98c4ac1..683cd18 100644 --- a/src/time-graph-chart.ts +++ b/src/time-graph-chart.ts @@ -39,7 +39,7 @@ export class TimeGraphChart extends TimeGraphContainer { end: (rowElement.range.end * this._controller.zoomFactor) + this._controller.positionOffset.x } } - const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent); + const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent, this._controller.timeGraphInteraction); this.addChild(el); }); } diff --git a/src/time-graph-interaction.ts b/src/time-graph-interaction.ts index 71a5d08..8219a83 100644 --- a/src/time-graph-interaction.ts +++ b/src/time-graph-interaction.ts @@ -3,6 +3,12 @@ import { TimeGraphStateController } from "./time-graph-state-controller"; export type TimeGraphInteractionType = 'mouseover' | 'mouseout' | 'mousemove' | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'click'; export type TimeGraphInteractionHandler = (event: PIXI.interaction.InteractionEvent) => void; +export interface DragAndDropNavigationHandler { + start: TimeGraphInteractionHandler + move: TimeGraphInteractionHandler + end: TimeGraphInteractionHandler +} + export class TimeGraphInteraction { protected mouseStartY: number; protected mouseStartX: number; @@ -10,7 +16,7 @@ export class TimeGraphInteraction { protected mouseIsDown: boolean = false; - constructor(protected controller: TimeGraphStateController) {} + constructor(protected controller: TimeGraphStateController) { } addMousewheelZoomAndPan(canvas: HTMLCanvasElement) { canvas.addEventListener('mousewheel', (ev: WheelEvent) => { @@ -23,31 +29,28 @@ export class TimeGraphInteraction { }); } - addDnDZoomAndPan(displayObject: PIXI.DisplayObject) { - this.addEvent('mousedown', event => { - this.mouseStartY = event.data.global.y; - this.mouseStartX = event.data.global.x; - this.graphWidthStart = this.controller.graphWidth; - this.mouseIsDown = true; - }, displayObject); - - this.addEvent('mousemove', event => { - if (this.mouseIsDown) { - - const deltaY = event.data.global.y - this.mouseStartY; - const zoomMulti = (deltaY / 100); - this.zoom(zoomMulti); - - const deltaMouseX = event.data.global.x - this.mouseStartX; - this.setXOffset(deltaMouseX); + get dnDZoomAndPan(): DragAndDropNavigationHandler { + return { + start: event => { + this.mouseStartY = event.data.global.y; + this.mouseStartX = event.data.global.x; + this.graphWidthStart = this.controller.graphWidth; + this.mouseIsDown = true; + }, + move: event => { + if (this.mouseIsDown) { + const deltaY = event.data.global.y - this.mouseStartY; + const zoomMulti = (deltaY / 100); + this.zoom(zoomMulti); + const deltaMouseX = event.data.global.x - this.mouseStartX; + this.setXOffset(deltaMouseX); + } + }, + end: event => { + this.mouseIsDown = false; + this.setZoomAndPosition(); } - }, displayObject); - const mouseUp = (event: PIXI.interaction.InteractionEvent) => { - this.mouseIsDown = false; - this.setZoomAndPosition(); } - this.addEvent('mouseup', mouseUp, displayObject); - this.addEvent('mouseupoutside', mouseUp, displayObject); } protected setZoomAndPosition() { @@ -82,7 +85,7 @@ export class TimeGraphInteraction { } } - protected addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) { + addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) { displayObject.interactive = true; displayObject.on(event, (e: PIXI.interaction.InteractionEvent) => { if (handler) { diff --git a/src/time-graph-row-element.ts b/src/time-graph-row-element.ts index 5923fd0..6e78fb9 100644 --- a/src/time-graph-row-element.ts +++ b/src/time-graph-row-element.ts @@ -1,14 +1,14 @@ -import { TimeGraphComponent } from "./time-graph-component"; +import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component"; import { TimeGraphRow } from "./time-graph-row"; import { TimeGraphRowElementModel } from "./time-graph-model"; +import { TimeGraphInteraction } from "./time-graph-interaction"; export class TimeGraphRowElement extends TimeGraphComponent { - constructor(id: string, protected options: TimeGraphRowElementModel, protected row: TimeGraphRow) { - super(id); - } + protected style: TimeGraphStyledRect; - render() { + constructor(id: string, protected options: TimeGraphRowElementModel, protected row: TimeGraphRow, interaction: TimeGraphInteraction) { + super(id); const height = 20; const position = { x: this.options.range.start, @@ -16,11 +16,42 @@ export class TimeGraphRowElement extends TimeGraphComponent { }; const width = this.options.range.end - this.options.range.start; - this.rect({ + this.style = { color: 0xC80000, height, position, width - }); + }; + + interaction.addEvent('mouseover', this.handleMouseOver, this._displayObject); + interaction.addEvent('mouseout', this.handleMouseOut, this._displayObject); + interaction.addEvent('mousedown', this.handleMouseDown, this._displayObject); + interaction.addEvent('mouseup', this.handleMouseUp, this._displayObject); } + + render() { + this.rect(this.style); + } + + protected changeColor(color: number) { + this.displayObject.clear(); + this.style.color = color; + this.render(); + } + + protected handleMouseOver = ((event: PIXI.interaction.InteractionEvent) => { + this.changeColor(0x00C800); + }).bind(this); + + protected handleMouseOut = ((event: PIXI.interaction.InteractionEvent) => { + this.changeColor(0xC80000); + }).bind(this); + + protected handleMouseDown = ((event: PIXI.interaction.InteractionEvent) => { + this.changeColor(0x0000C8); + }).bind(this); + + protected handleMouseUp = ((event: PIXI.interaction.InteractionEvent) => { + this.changeColor(0x00C800); + }).bind(this); } \ No newline at end of file diff --git a/src/time-graph-state-controller.ts b/src/time-graph-state-controller.ts index 9537321..3e3ddbb 100644 --- a/src/time-graph-state-controller.ts +++ b/src/time-graph-state-controller.ts @@ -17,7 +17,7 @@ export class TimeGraphStateController { protected zoomChangedHandler: (() => void)[]; protected positionChangedHandler: (() => void)[]; - protected _zoomAndPanController: TimeGraphInteraction; + protected _timeGraphInteraction: TimeGraphInteraction; constructor(protected _canvasWidth: number, protected _graphWidth: number) { this._originalGraphWidth = _graphWidth; @@ -29,11 +29,11 @@ export class TimeGraphStateController { this._oldPositionOffset = { x: 0, y: 0 }; this.zoomChangedHandler = []; this.positionChangedHandler = []; - this._zoomAndPanController = new TimeGraphInteraction(this); + this._timeGraphInteraction = new TimeGraphInteraction(this); } - get zoomAndPanController(): TimeGraphInteraction { - return this._zoomAndPanController; + get timeGraphInteraction(): TimeGraphInteraction { + return this._timeGraphInteraction; } protected handleZoomChange() {