Create label view

build/src/views/band/index.d.ts

@@ -1,5 +1,6 @@
 import Band from '../../models/band';
-export default class BandView {
+import View from '../index';
+export default class BandView implements View {
     band: Band;
     private dragStart;
     private dragOffset;

build/src/views/canvas/index.d.ts

@@ -1,4 +1,5 @@
-export default class Canvas {
+import View from '../index';
+export default class Canvas implements View {
     private readonly font;
     private canvas;
     private ctx;

build/src/views/label.d.ts

@@ -0,0 +1,7 @@
+import View from "./index";
+import { EventsDomainConfig } from "../models/config";
+export default class Label implements View {
+    private domain;
+    constructor(domain: EventsDomainConfig);
+    render(): HTMLDivElement;
+}

src/index.ts

@@ -7,6 +7,8 @@ import { orderEvents, OrderedEvents } from './utils/events.worker'
 import Api from './api'
 import EventsBandView from './views/band/events'
 import Canvas from './views/canvas'
+import View from './views';
+import Label from './views/label'
 
 export { Config as TimelineConfig, orderEvents, OrderedEvents, calcPixelsPerMillisecond }
 
@@ -18,7 +20,6 @@ export { Config as TimelineConfig, orderEvents, OrderedEvents, calcPixelsPerMill
 // TODO make it possible to have only minimap bands (see index.floods.html)
 // TODO make indicator draggable
 // TODO add config to add space/time before first and last events
-// TODO if minimap visible area is bigger than viewport, zoom out the minimap
 // TODO show when playing animation (button pressed?)
 export default class Timeline extends Api {
 	private minimapBandViews: BandView[]
@@ -69,35 +70,12 @@ export default class Timeline extends Api {
 	private renderLabels() {
 		props.eventsBand.domains
 			.filter(d => d.label != null)
-			.map(d => {
-				const eventsLabelWrapper: HTMLDivElement = createElement('div', 'events-label-wrapper',
-					[
-						'border-top: 1px solid #CCC',
-						'position: absolute',
-						'width: 100%',
-					],
-					[
-						`top: ${d.topOffsetRatio * 100}%`
-					]
-				)
-				const eventsLabel: HTMLDivElement = createElement('div', 'events-label', [
-					'background: white',
-					'border-bottom-right-radius: 4px',
-					'box-shadow: 1px 2px 4px #AAA',
-					'display: inline-block',
-					'color: #444',
-					'font-size: .8em',
-					'font-family: sans-serif',
-					'padding: 4px 8px',
-				])
-				eventsLabel.innerText = d.label
-				eventsLabelWrapper.appendChild(eventsLabel)
-				this.wrapper.appendChild(eventsLabelWrapper)
-			})
+			.map(d => new Label(d))
+			.forEach(this.appendToWrapper)
 
 	}
 
-	private appendToWrapper = (child) => {
+	private appendToWrapper = (child: View) => {
 		let children = child.render()
 		if (!Array.isArray(children)) children = [children]
 		children.forEach(c => this.wrapper.appendChild(c))

src/views/band/index.ts

@@ -3,8 +3,9 @@ import props from '../../models/props'
 import createElement from '../../utils/create-element'
 import eventBus from '../../event-bus'
 import animator from '../../animator'
+import View from '../index'
 
-export default class BandView {
+export default class BandView implements View { 
 	private dragStart: number
 	private dragOffset: number
 	protected rootElement: HTMLElement

src/views/canvas/index.ts

@@ -7,12 +7,13 @@ import MinimapBand from '../../models/band/minimap'
 import { MinimapDomainConfig } from '../../models/config'
 import animator from '../../animator'
 import EventsBand from '../../models/band/events'
+import View from '../index'
 
 /**
  * The MiniMap is an abstract representation of the events on a band.
  * It gives an overview of densely (and scarcely) populated areas
  */
-export default class Canvas {
+export default class Canvas implements View {
 	private readonly font: string = "10px sans-serif"
 	private canvas: HTMLCanvasElement
 	private ctx: CanvasRenderingContext2D

src/views/index.ts

@@ -0,0 +1,3 @@
+export default abstract class View {
+	abstract render(): HTMLElement | HTMLElement[]
+}

src/views/label.ts

@@ -0,0 +1,36 @@
+import View from "./index"
+import createElement from '../utils/create-element'
+import { EventsDomainConfig } from "../models/config";
+
+export default class Label implements View {
+	constructor(private domain: EventsDomainConfig) {}
+
+	render() {
+		const wrapper: HTMLDivElement = createElement('div', 'events-label-wrapper',
+			[
+				'border-top: 1px solid #CCC',
+				'position: absolute',
+				'width: 100%',
+			],
+			[
+				`top: ${this.domain.topOffsetRatio * 100}%`
+			]
+		)
+
+		const eventsLabel: HTMLDivElement = createElement('div', 'events-label', [
+			'background: white',
+			'border-bottom-right-radius: 4px',
+			'box-shadow: 1px 2px 4px #AAA',
+			'display: inline-block',
+			'color: #444',
+			'font-size: .8em',
+			'font-family: sans-serif',
+			'padding: 4px 8px',
+		])
+		eventsLabel.innerText = this.domain.label
+
+		wrapper.appendChild(eventsLabel)
+
+		return wrapper
+	}
+}