From 62f330d95eed42a98abd17e56e87347204ed5818 Mon Sep 17 00:00:00 2001 From: Jan Bicker Date: Mon, 26 Nov 2018 13:52:15 +0000 Subject: [PATCH] Divided views into independent layers. --- .../time-graph-axis-cursor.ts | 0 src/{ => components}/time-graph-axis-scale.ts | 6 +- src/{ => components}/time-graph-component.ts | 2 +- src/{ => components}/time-graph-cursor.ts | 12 ++-- src/{ => components}/time-graph-rectangle.ts | 0 .../time-graph-row-element.ts | 2 +- src/{ => components}/time-graph-row.ts | 0 src/index.ts | 66 ++++++++++++------- .../time-graph-axis-cursors.ts} | 15 +++-- src/{ => layer}/time-graph-axis.ts | 15 ++--- .../time-graph-chart-cursors.ts} | 59 +++++++++++------ src/{ => layer}/time-graph-chart.ts | 33 +++++----- src/layer/time-graph-layer.ts | 40 +++++++++++ src/{ => layer}/time-graph-navigator.ts | 23 +++---- src/time-graph-container.ts | 26 +++----- src/time-graph-unit-controller.ts | 13 ++-- 16 files changed, 194 insertions(+), 118 deletions(-) rename src/{ => components}/time-graph-axis-cursor.ts (100%) rename src/{ => components}/time-graph-axis-scale.ts (93%) rename src/{ => components}/time-graph-component.ts (98%) rename src/{ => components}/time-graph-cursor.ts (57%) rename src/{ => components}/time-graph-rectangle.ts (100%) rename src/{ => components}/time-graph-row-element.ts (96%) rename src/{ => components}/time-graph-row.ts (100%) rename src/{time-graph-axis-cursor-container.ts => layer/time-graph-axis-cursors.ts} (78%) rename src/{ => layer}/time-graph-axis.ts (72%) rename src/{time-graph-cursor-container.ts => layer/time-graph-chart-cursors.ts} (61%) rename src/{ => layer}/time-graph-chart.ts (69%) create mode 100644 src/layer/time-graph-layer.ts rename src/{ => layer}/time-graph-navigator.ts (71%) diff --git a/src/time-graph-axis-cursor.ts b/src/components/time-graph-axis-cursor.ts similarity index 100% rename from src/time-graph-axis-cursor.ts rename to src/components/time-graph-axis-cursor.ts diff --git a/src/time-graph-axis-scale.ts b/src/components/time-graph-axis-scale.ts similarity index 93% rename from src/time-graph-axis-scale.ts rename to src/components/time-graph-axis-scale.ts index 5f6878e..ef6f75c 100644 --- a/src/time-graph-axis-scale.ts +++ b/src/components/time-graph-axis-scale.ts @@ -1,7 +1,7 @@ import { TimeGraphComponent, TimeGraphRect, TimeGraphInteractionHandler } from "./time-graph-component"; -import { TimeGraphUnitController } from "./time-graph-unit-controller"; -import { TimeGraphRange } from "./time-graph-model"; -import { TimeGraphStateController } from "./time-graph-state-controller"; +import { TimeGraphUnitController } from "../time-graph-unit-controller"; +import { TimeGraphRange } from "../time-graph-model"; +import { TimeGraphStateController } from "../time-graph-state-controller"; export class TimeGraphAxisScale extends TimeGraphComponent { diff --git a/src/time-graph-component.ts b/src/components/time-graph-component.ts similarity index 98% rename from src/time-graph-component.ts rename to src/components/time-graph-component.ts index a385962..f7d0f5e 100644 --- a/src/time-graph-component.ts +++ b/src/components/time-graph-component.ts @@ -59,7 +59,7 @@ export abstract class TimeGraphComponent { protected rect(opts: TimeGraphStyledRect) { const { position, width, height, color, opacity } = opts; - this.displayObject.beginFill((color || 0x000000), (opacity || 1)); + this.displayObject.beginFill((color || 0x000000), (opacity !== undefined ? opacity : 1)); this.displayObject.drawRect(position.x, position.y, width, height); this.displayObject.endFill(); } diff --git a/src/time-graph-cursor.ts b/src/components/time-graph-cursor.ts similarity index 57% rename from src/time-graph-cursor.ts rename to src/components/time-graph-cursor.ts index c67f030..a14e572 100644 --- a/src/time-graph-cursor.ts +++ b/src/components/time-graph-cursor.ts @@ -7,14 +7,16 @@ export interface TimeGraphCursorOptions { } export class TimeGraphCursor extends TimeGraphComponent{ - constructor(protected opts: TimeGraphCursorOptions){ - super('cursor') + constructor(opts: TimeGraphCursorOptions){ + super('cursor'); + this.options = opts; } render(): void { + const {color, height, position} = this.options as TimeGraphCursorOptions; this.vline({ - color:this.opts.color, - height: this.opts.height, - position: this.opts.position + color, + height, + position }) } } \ No newline at end of file diff --git a/src/time-graph-rectangle.ts b/src/components/time-graph-rectangle.ts similarity index 100% rename from src/time-graph-rectangle.ts rename to src/components/time-graph-rectangle.ts diff --git a/src/time-graph-row-element.ts b/src/components/time-graph-row-element.ts similarity index 96% rename from src/time-graph-row-element.ts rename to src/components/time-graph-row-element.ts index ba97daa..33a6b37 100644 --- a/src/time-graph-row-element.ts +++ b/src/components/time-graph-row-element.ts @@ -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 } from "../time-graph-model"; export class TimeGraphRowElement extends TimeGraphComponent { diff --git a/src/time-graph-row.ts b/src/components/time-graph-row.ts similarity index 100% rename from src/time-graph-row.ts rename to src/components/time-graph-row.ts diff --git a/src/index.ts b/src/index.ts index 7b300d6..00d009d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,11 @@ import { TimeGraphModel } from "./time-graph-model"; -import { TimeGraphAxis } from "./time-graph-axis"; -import { TimeGraphChart } from "./time-graph-chart"; +import { TimeGraphAxis } from "./layer/time-graph-axis"; +import { TimeGraphChart } from "./layer/time-graph-chart"; import { TimeGraphUnitController } from "./time-graph-unit-controller"; -import { TimeGraphNavigator } from "./time-graph-navigator"; +import { TimeGraphNavigator } from "./layer/time-graph-navigator"; +import { TimeGraphContainer } from "./time-graph-container"; +import { TimeGraphChartCursors } from "./layer/time-graph-chart-cursors"; +import { TimeGraphAxisCursors } from "./layer/time-graph-axis-cursors"; const timeGraph: TimeGraphModel = { id: 'test1', @@ -248,41 +251,58 @@ if (!container) { } container.innerHTML = ''; -const axisContainer = document.createElement('div'); -axisContainer.id = 'main_axis'; -container.appendChild(axisContainer); -const chartContainer = document.createElement('div'); -chartContainer.id = 'main_chart'; -container.appendChild(chartContainer); -const controller = new TimeGraphUnitController(timeGraph.totalRange, {start: 10000, end: 40000}); +const axisHTMLContainer = document.createElement('div'); +axisHTMLContainer.id = 'main_axis'; +container.appendChild(axisHTMLContainer); -const timeAxis = new TimeGraphAxis({ - id: 'timeGraphAxis', +const chartHTMLContainer = document.createElement('div'); +chartHTMLContainer.id = 'main_chart'; +container.appendChild(chartHTMLContainer); + +const unitController = new TimeGraphUnitController(timeGraph.totalRange, {start: 10000, end: 40000}); + +const timeGraphAxisContainer = new TimeGraphContainer({ height: 30, - width: 500 -}, controller); -axisContainer.appendChild(timeAxis.canvas); + width: 500, + id: timeGraph.id + '_axis', + backgroundColor: 0x66aa33 +}, unitController); +axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas); + +const timeAxisLayer = new TimeGraphAxis('timeGraphAxis'); +timeGraphAxisContainer.addLayer(timeAxisLayer); -const timeGraphChart = new TimeGraphChart({ +const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors'); +timeGraphAxisContainer.addLayer(timeAxisCursors); + +const timeGraphChartContainer = new TimeGraphContainer({ id: timeGraph.id + '_chart', height: 300, width: 500, backgroundColor: 0xFFFFFF -}, controller); -timeGraphChart.addRows(timeGraph.rows); -chartContainer.appendChild(timeGraphChart.canvas); +}, unitController); +chartHTMLContainer.appendChild(timeGraphChartContainer.canvas); + +const timeGraphChartLayer = new TimeGraphChart('timeGraphChart'); +timeGraphChartContainer.addLayer(timeGraphChartLayer); +timeGraphChartLayer.addRows(timeGraph.rows); + +const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors'); +timeGraphChartContainer.addLayer(timeGraphChartCursors); const naviEl = document.createElement('div'); naviEl.id = "navi"; document.body.appendChild(naviEl); -const navi = new TimeGraphNavigator({ - width:1200, +const naviContainer = new TimeGraphContainer({ + width:700, height:20, id:'navi' -}, controller); -naviEl.appendChild(navi.canvas); +}, unitController); +naviEl.appendChild(naviContainer.canvas); +const navi = new TimeGraphNavigator('timeGraphNavigator'); +naviContainer.addLayer(navi); export type TestFieldId = 'test0' | 'test1' | 'test2' | 'test3' | 'test4' | 'test5' | 'test6' | 'test7' | 'test8' | 'test9'; export function tgTest(id: TestFieldId, val: string) { diff --git a/src/time-graph-axis-cursor-container.ts b/src/layer/time-graph-axis-cursors.ts similarity index 78% rename from src/time-graph-axis-cursor-container.ts rename to src/layer/time-graph-axis-cursors.ts index 5efaca2..6c91c35 100644 --- a/src/time-graph-axis-cursor-container.ts +++ b/src/layer/time-graph-axis-cursors.ts @@ -1,10 +1,15 @@ -import { TimeGraphContainer } from "./time-graph-container"; -import { TimeGraphAxisCursor } from "./time-graph-axis-cursor"; +import { TimeGraphAxisCursor } from "../components/time-graph-axis-cursor"; +import { TimeGraphLayer } from "./time-graph-layer"; -export class TimeGraphAxisCursorContainer extends TimeGraphContainer { +export class TimeGraphAxisCursors extends TimeGraphLayer { protected firstCursor: TimeGraphAxisCursor; protected secondCursor: TimeGraphAxisCursor; + init() { + this.unitController.onSelectionRangeChange(() => this.update()); + this.unitController.onViewRangeChanged(() => this.update()); + } + update(): void { if (this.unitController.selectionRange) { const firstCursorPosition = (this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor; @@ -14,7 +19,7 @@ export class TimeGraphAxisCursorContainer extends TimeGraphContainer { color, position: { x: firstCursorPosition, - y: this._canvas.height + y: this.canvas.height } }; if (!this.firstCursor) { @@ -28,7 +33,7 @@ export class TimeGraphAxisCursorContainer extends TimeGraphContainer { color, position: { x: secondCursorPosition, - y: this._canvas.height + y: this.canvas.height } } if (!this.secondCursor) { diff --git a/src/time-graph-axis.ts b/src/layer/time-graph-axis.ts similarity index 72% rename from src/time-graph-axis.ts rename to src/layer/time-graph-axis.ts index a57b8fb..c7ef42f 100644 --- a/src/time-graph-axis.ts +++ b/src/layer/time-graph-axis.ts @@ -1,12 +1,12 @@ -import { TimeGraphAxisScale } from "./time-graph-axis-scale"; -import { TimeGraphAxisCursorContainer } from "./time-graph-axis-cursor-container"; +import { TimeGraphAxisScale } from "../components/time-graph-axis-scale"; +import { TimeGraphLayer } from "./time-graph-layer"; -export class TimeGraphAxis extends TimeGraphAxisCursorContainer { +export class TimeGraphAxis extends TimeGraphLayer { protected scaleComponent: TimeGraphAxisScale; protected init() { - this._canvas.addEventListener('mousewheel', (ev: WheelEvent) => { + this.canvas.addEventListener('mousewheel', (ev: WheelEvent) => { const shiftStep = ev.deltaY * 10; const oldViewRange = this.unitController.viewRange; let start = oldViewRange.start + shiftStep; @@ -21,9 +21,9 @@ export class TimeGraphAxis extends TimeGraphAxisCursorContainer { this.unitController.viewRange = { start, end } return false; }); - this.scaleComponent = new TimeGraphAxisScale(this.config.id + '_scale', { + this.scaleComponent = new TimeGraphAxisScale(this.id + '_scale', { height: 30, - width: this._canvas.width, + width: this.canvas.width, position: { x: 0, y: 0 @@ -39,12 +39,11 @@ export class TimeGraphAxis extends TimeGraphAxisCursorContainer { update() { this.scaleComponent.update({ height: 30, - width: this._canvas.width, + width: this.canvas.width, position: { x: 0, y: 0 } }); - super.update(); } } \ No newline at end of file diff --git a/src/time-graph-cursor-container.ts b/src/layer/time-graph-chart-cursors.ts similarity index 61% rename from src/time-graph-cursor-container.ts rename to src/layer/time-graph-chart-cursors.ts index ce8830a..686bd53 100644 --- a/src/time-graph-cursor-container.ts +++ b/src/layer/time-graph-chart-cursors.ts @@ -1,21 +1,27 @@ -import { TimeGraphContainer } from "./time-graph-container"; -import { TimeGraphCursor } from "./time-graph-cursor"; -import { TimeGraphRectangle } from "./time-graph-rectangle"; +import { TimeGraphCursor } from "../components/time-graph-cursor"; +import { TimeGraphRectangle } from "../components/time-graph-rectangle"; +import { TimeGraphLayer } from "./time-graph-layer"; -export class TimeGraphCursorContainer extends TimeGraphContainer { +export class TimeGraphChartCursors extends TimeGraphLayer { protected mouseIsDown: boolean; protected shiftKeyDown: boolean; + protected firstCursor: TimeGraphCursor; + protected secondCursor: TimeGraphCursor; + protected selectionRange: TimeGraphRectangle; + protected init() { + this.addBackground(); + this.mouseIsDown = false; this.shiftKeyDown = false - this._stage.interactive = true; + this.stage.interactive = true; document.addEventListener('keydown', (event: KeyboardEvent) => { this.shiftKeyDown = event.shiftKey; }); document.addEventListener('keyup', (event: KeyboardEvent) => { this.shiftKeyDown = event.shiftKey; }); - this._stage.on('mousedown', (event: PIXI.interaction.InteractionEvent) => { + this.stage.on('mousedown', (event: PIXI.interaction.InteractionEvent) => { this.mouseIsDown = true; const mouseX = event.data.global.x; const xpos = this.unitController.viewRange.start + (mouseX / this.stateController.zoomFactor); @@ -32,7 +38,7 @@ export class TimeGraphCursorContainer extends TimeGraphContainer { } } }); - this._stage.on('mousemove', (event: PIXI.interaction.InteractionEvent) => { + this.stage.on('mousemove', (event: PIXI.interaction.InteractionEvent) => { if (this.mouseIsDown && this.unitController.selectionRange) { const mouseX = event.data.global.x; const xStartPos = this.unitController.selectionRange.start; @@ -43,41 +49,56 @@ export class TimeGraphCursorContainer extends TimeGraphContainer { } } }); - this._stage.on('mouseup', (event: PIXI.interaction.InteractionEvent) => { + this.stage.on('mouseup', (event: PIXI.interaction.InteractionEvent) => { this.mouseIsDown = false; }); - this._stage.on('mouseupoutside', (event: PIXI.interaction.InteractionEvent) => { + this.stage.on('mouseupoutside', (event: PIXI.interaction.InteractionEvent) => { this.mouseIsDown = false; }); - this.unitController.onSelectionRangeChange(() => { - this.update(); - }) + this.unitController.onSelectionRangeChange(() => this.update()); + this.unitController.onViewRangeChanged(() => this.update()); + } + + // this background is needed because an empty stage, or a point at that stage which is not actually an displayObject, wont react on mouse events. + protected addBackground(){ + const background = new TimeGraphRectangle({ + position: {x: 0, y:0}, + height: this.canvas.height, + width: this.canvas.width, + opacity: 0 + }); + this.addChild(background); } update() { + 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 color = 0x0000ff; - const firstCursor = new TimeGraphCursor({ + const firstCursorOptions = { color, height: this.canvas.height, position: { x: firstCursorPosition, y: 0 } - }); - this.addChild(firstCursor); + }; + this.firstCursor = new TimeGraphCursor(firstCursorOptions); + this.addChild(this.firstCursor); if (secondCursorPosition !== firstCursorPosition) { - const secondCursor = new TimeGraphCursor({ + const secondCursorOptions = { color, height: this.canvas.height, position: { x: secondCursorPosition, y: 0 } - }); - this.addChild(secondCursor); + }; + this.secondCursor = new TimeGraphCursor(secondCursorOptions); + this.addChild(this.secondCursor); + const selectionRange = new TimeGraphRectangle({ color, opacity: 0.2, @@ -85,7 +106,7 @@ export class TimeGraphCursorContainer extends TimeGraphContainer { x: firstCursorPosition, y: 0 }, - height: this._canvas.height, + height: this.canvas.height, width: secondCursorPosition - firstCursorPosition }); this.addChild(selectionRange); diff --git a/src/time-graph-chart.ts b/src/layer/time-graph-chart.ts similarity index 69% rename from src/time-graph-chart.ts rename to src/layer/time-graph-chart.ts index 1aa6632..a9cf2b8 100644 --- a/src/time-graph-chart.ts +++ b/src/layer/time-graph-chart.ts @@ -1,15 +1,15 @@ -import { TimeGraphRowElement } from "./time-graph-row-element"; -import { TimeGraphRow } from "./time-graph-row"; -import { TimeGraphRowModel, TimeGraphRowElementModel } from "./time-graph-model"; -import { TimeGraphCursorContainer } from "./time-graph-cursor-container"; -import { TimeGraphRectangle } from "./time-graph-rectangle"; +import { TimeGraphRowElement } from "../components/time-graph-row-element"; +import { TimeGraphRow } from "../components/time-graph-row"; +import { TimeGraphRowModel, TimeGraphRowElementModel } from "../time-graph-model"; +import { TimeGraphLayer } from "./time-graph-layer"; -export class TimeGraphChart extends TimeGraphCursorContainer { +export class TimeGraphChart extends TimeGraphLayer { protected rows: TimeGraphRowModel[]; + protected rowCount: number; protected init(){ - super.init(); + this.rowCount = 0; this.unitController.onViewRangeChanged(() => { this.update(); }); @@ -17,7 +17,7 @@ export class TimeGraphChart extends TimeGraphCursorContainer { addRow(row: TimeGraphRowModel) { const height = 20; - const rowId = 'row_' + this._stage.children.length; + const rowId = 'row_' + this.rowCount; const range = row.range.end - row.range.start; const relativeStartPosition = row.range.start - this.unitController.viewRange.start; const rowComponent = new TimeGraphRow(rowId, { @@ -35,7 +35,7 @@ export class TimeGraphChart extends TimeGraphCursorContainer { const relativeElementEndPosition = rowElement.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) { + if (start < this.canvas.width && end > 0) { const newRowElement: TimeGraphRowElementModel = { label: rowElement.label, range: { @@ -50,23 +50,20 @@ export class TimeGraphChart extends TimeGraphCursorContainer { } addRows(rows: TimeGraphRowModel[]) { - const background = new TimeGraphRectangle({ - position: {x: 0, y:0}, - height: this._canvas.height, - width: this.canvas.width, - color: 0xffffff - }); - this.addChild(background); + if(!this.stateController){ + throw('Add this TimeGraphChart to a container before adding rows.'); + } this.rows = []; + this.rowCount = 0; rows.forEach(row => { + this.rowCount++; this.addRow(row); }) } update() { - this.stage.removeChildren(); + this.removeChildren(); this.addRows(this.rows); - super.update(); } } \ No newline at end of file diff --git a/src/layer/time-graph-layer.ts b/src/layer/time-graph-layer.ts new file mode 100644 index 0000000..13e3b50 --- /dev/null +++ b/src/layer/time-graph-layer.ts @@ -0,0 +1,40 @@ +import { TimeGraphComponent } from "../components/time-graph-component"; +import { TimeGraphUnitController } from "../time-graph-unit-controller"; +import { TimeGraphStateController } from "../time-graph-state-controller"; + +export abstract class TimeGraphLayer { + protected canvas: HTMLCanvasElement; + protected stateController: TimeGraphStateController; + protected unitController: TimeGraphUnitController; + protected children: PIXI.DisplayObject[]; + protected stage: PIXI.Container; + + constructor(protected id: string) { + this.children = []; + } + + addChild(child: TimeGraphComponent) { + if(!this.stage){ + throw("Layers must be added to a container before components can be added."); + } + child.render(); + this.stage.addChild(child.displayObject); + this.children.push(child.displayObject); + } + + initializeLayer(canvas:HTMLCanvasElement, stage: PIXI.Container, stateController: TimeGraphStateController, unitController: TimeGraphUnitController) { + this.canvas = canvas; + this.stage = stage; + this.stateController = stateController; + this.unitController = unitController; + this.init(); + } + + protected removeChildren() { + this.children.forEach(child => this.stage.removeChild(child)); + } + + protected init() { } + + protected abstract update(): void; +} \ No newline at end of file diff --git a/src/time-graph-navigator.ts b/src/layer/time-graph-navigator.ts similarity index 71% rename from src/time-graph-navigator.ts rename to src/layer/time-graph-navigator.ts index 9b16d6e..1c380b0 100644 --- a/src/time-graph-navigator.ts +++ b/src/layer/time-graph-navigator.ts @@ -1,22 +1,15 @@ -import { TimeGraphContainer, TimeGraphContainerOptions } from "./time-graph-container"; -import { TimeGraphUnitController } from "./time-graph-unit-controller"; -import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component"; -import { TimeGraphStateController } from "./time-graph-state-controller"; -import { TimeGraphRectangle } from "./time-graph-rectangle"; +import { TimeGraphUnitController } from "../time-graph-unit-controller"; +import { TimeGraphComponent, TimeGraphStyledRect } from "../components/time-graph-component"; +import { TimeGraphStateController } from "../time-graph-state-controller"; +import { TimeGraphRectangle } from "../components/time-graph-rectangle"; +import { TimeGraphLayer } from "./time-graph-layer"; -export class TimeGraphNavigator extends TimeGraphContainer { +export class TimeGraphNavigator extends TimeGraphLayer { protected navigatorHandle: TimeGraphNavigatorHandle; protected selectionRange: TimeGraphRectangle; - constructor(protected canvasOpts: TimeGraphContainerOptions, protected unitController: TimeGraphUnitController) { - super({ - id: canvasOpts.id, - height: canvasOpts.height, - width: canvasOpts.width, - backgroundColor: 0x111111 - }, unitController); - + init() { this.unitController.onViewRangeChanged(() => this.update()); this.navigatorHandle = new TimeGraphNavigatorHandle(this.unitController, this.stateController); this.addChild(this.navigatorHandle); @@ -30,7 +23,7 @@ export class TimeGraphNavigator extends TimeGraphContainer { if (this.unitController.selectionRange) { const selectionOpts: TimeGraphStyledRect = { color: 0xf6f666, - height: this.canvasOpts.height, + height: this.canvas.height, opacity: 0.5, position: { x: this.unitController.selectionRange.start * this.stateController.absoluteResolution, diff --git a/src/time-graph-container.ts b/src/time-graph-container.ts index 743fdb6..bda7a25 100644 --- a/src/time-graph-container.ts +++ b/src/time-graph-container.ts @@ -1,7 +1,7 @@ -import { TimeGraphComponent } from "./time-graph-component"; import * as PIXI from "pixi.js"; import { TimeGraphUnitController } from "./time-graph-unit-controller"; import { TimeGraphStateController } from "./time-graph-state-controller"; +import { TimeGraphLayer } from "./layer/time-graph-layer"; export interface TimeGraphContainerOptions { id: string @@ -11,13 +11,15 @@ export interface TimeGraphContainerOptions { transparent?: boolean } -export abstract class TimeGraphContainer { +export class TimeGraphContainer { - protected _stage: PIXI.Container; + protected stage: PIXI.Container; protected _canvas: HTMLCanvasElement; protected stateController: TimeGraphStateController; + protected layers: TimeGraphLayer[]; + constructor(protected config: TimeGraphContainerOptions, protected unitController: TimeGraphUnitController) { const canvas: HTMLCanvasElement = document.createElement('canvas'); canvas.width = config.width; @@ -33,28 +35,20 @@ export abstract class TimeGraphContainer { }); application.stage.height = config.height; - this._stage = application.stage; + this.stage = application.stage; this._canvas = application.view; this.stateController = new TimeGraphStateController(canvas, unitController); - this.init(); + this.layers = []; } - protected init(){} - get canvas(): HTMLCanvasElement { return this._canvas; } - get stage(): PIXI.Container { - return this._stage; + addLayer(layer: TimeGraphLayer) { + this.layers.push(layer); + layer.initializeLayer(this._canvas, this.stage, this.stateController, this.unitController); } - - protected addChild(child: TimeGraphComponent) { - child.render(); - this._stage.addChild(child.displayObject); - } - - abstract update(): void; } \ No newline at end of file diff --git a/src/time-graph-unit-controller.ts b/src/time-graph-unit-controller.ts index 670d50d..36ba6e9 100644 --- a/src/time-graph-unit-controller.ts +++ b/src/time-graph-unit-controller.ts @@ -34,12 +34,17 @@ export class TimeGraphUnitController { return this._viewRange; } set viewRange(newRange: TimeGraphRange) { - const greaterThanAbsoluteRange = (newRange.start + this.viewRangeLength) > this.absoluteRange; - if (newRange.end > newRange.start && !greaterThanAbsoluteRange) { + if (newRange.end > newRange.start) { this._viewRange = newRange; - } else if(greaterThanAbsoluteRange) { - this._viewRange = {start: newRange.start, end: (this.absoluteRange - newRange.start)}; } + if(newRange.start < 0) { + this._viewRange.start = 0; + } + if(this._viewRange.end > this.absoluteRange){ + this._viewRange.end = this.absoluteRange; + } + console.log("ViewRange", this._viewRange.start, this._viewRange.end); + console.log("AbsoluteRange", this.absoluteRange); this.handleViewRangeChange(); }