Remove reload custom events

build/src/constants.d.ts

@@ -6,8 +6,6 @@ export declare const DATE_BAR_HEIGHT = 20;
 export declare const RULER_LABELS_HEIGHT = 60;
 export declare const CENTER_CHANGE = "CENTER_CHANGE";
 export declare const CENTER_CHANGE_DONE = "CENTER_CHANGE_DONE";
-export declare const RELOAD = "RELOAD";
-export declare const PROPS_UPDATED = "PROPS_UPDATED";
 export declare type Milliseconds = number;
 export declare type Grid = [Milliseconds, Milliseconds][][];
 export declare type ComponentType = 'EVENTS' | 'MINIMAP' | 'RULERS' | 'SPARKLINE';

build/src/index.d.ts

@@ -1,13 +1,12 @@
 import Config from './models/config';
 import { orderEvents } from './utils/events.worker';
 import Api from './api';
-export { orderEvents };
+export { orderEvents, Config as TimelineConfig };
 export default class Timeline extends Api {
     private wrapper;
     constructor(config: Config);
     private removeChildren();
-    reload: () => void;
-    private dispatchReloadEvent;
+    reload: (config?: Config) => void;
     private debouncedReload;
     private render();
     private renderBands();

build/src/models/config.d.ts

@@ -13,6 +13,5 @@ export default class Config {
     from: Milliseconds;
     rootElement: HTMLElement;
     rowCount: number;
-    sortEvents?: boolean;
     to: Milliseconds;
 }

build/src/models/props.d.ts

@@ -2,6 +2,7 @@ import { Ratio, Milliseconds } from "../constants";
 import Config from "./config";
 import Domain from "./domain";
 export declare class Props {
+    private readonly defaultCenter;
     config: Config;
     domains: Domain[];
     time: Milliseconds;

build/src/utils/events.worker.d.ts

@@ -1,7 +1,7 @@
 import { Milliseconds, Grid, Pixels, Ratio } from "../constants";
 import { RawEv3nt } from "../models/event";
-export declare type OrderEventsReturn = [RawEv3nt[], Milliseconds, Milliseconds, Grid, number];
-export declare function orderEvents(events: RawEv3nt[], viewportWidth: Pixels, visibleRatio: Ratio): OrderEventsReturn;
+export declare type OrderedEvents = [RawEv3nt[], Milliseconds, Milliseconds, Grid, number];
+export declare function orderEvents(events: RawEv3nt[], viewportWidth: Pixels, visibleRatio: Ratio): OrderedEvents;
 export declare function eventsWorker(e: {
     data: {
         events: RawEv3nt[];

src/constants.ts

@@ -14,8 +14,6 @@ export const RULER_LABELS_HEIGHT = 60
 
 export const CENTER_CHANGE = 'CENTER_CHANGE'
 export const CENTER_CHANGE_DONE = 'CENTER_CHANGE_DONE'
-export const RELOAD = 'RELOAD'
-export const PROPS_UPDATED = 'PROPS_UPDATED'
 
 export type Milliseconds = number
 export type Grid = [Milliseconds, Milliseconds][][]

src/index.ts

@@ -7,16 +7,16 @@ import { debounce } from './utils/index'
 import { orderEvents } from './utils/events.worker'
 import Api from './api'
 import eventBus from './event-bus'
-import { RELOAD, PROPS_UPDATED } from './constants';
 
-export { orderEvents }
+export { orderEvents, Config as TimelineConfig }
 
 // TODO add zoom func
 // TODO Add open ranges (ie: people still alive)
 // TODO If event granularity is equal to band granularity a point in time should be rendered as an interval (as unsure?)
 // TODO flip PiT when on edge of timeline
 // TODO Scroll vertical when events higher than viewportHeight
 // TODO Make the timeline standalone, so it does not need the server
+// TODO make multiple bands with seperate events possible
 export default class Timeline extends Api {
 	private wrapper: HTMLElement
 
@@ -27,9 +27,6 @@ export default class Timeline extends Api {
 
 		config.rootElement.appendChild(this.render())
 
-		document.addEventListener(PROPS_UPDATED, () => {
-			this.renderBands()
-		})
 		window.addEventListener('resize', () => {
 			this.removeChildren()
 			this.debouncedReload()
@@ -45,12 +42,14 @@ export default class Timeline extends Api {
 
 	}
 
-	public reload = () => {
+	public reload = (config?: Config) => {
+		config = config != null ? config : props.config
+		props.init(config)
+
 		this.removeChildren()
-		this.dispatchReloadEvent()	
+		this.renderBands()
 	}
-	private dispatchReloadEvent = () => document.dispatchEvent(new CustomEvent(RELOAD))
-	private debouncedReload = debounce(this.dispatchReloadEvent, 600)
+	private debouncedReload = debounce(this.reload, 600)
 
 	private render() {
 		this.wrapper = createElement(

src/models/config.ts

@@ -24,9 +24,5 @@ export default class Config {
 
 	rowCount: number
 
-	// The events should be sorted when passed to Timeline, because a data store will likely be faster
-	// at sorting than the client. If that is in some way not possible, the lib can sort the events.
-	sortEvents?: boolean = false
-
 	to: Milliseconds
 }

src/models/props.ts

@@ -1,13 +1,12 @@
-import { CENTER_CHANGE, CENTER_CHANGE_DONE, Ratio, Milliseconds, RELOAD, PROPS_UPDATED } from "../constants"
+import { CENTER_CHANGE, CENTER_CHANGE_DONE, Ratio, Milliseconds } from "../constants"
 import Config from "./config"
 import { debounce } from "../utils"
-// import { RawEv3nt } from "./event"
 import Domain from "./domain"
 
 export class Props {
+	private readonly defaultCenter = .5
 	config: Config
 	domains: Domain[]
-	// events: RawEv3nt[] = []
 	time: Milliseconds
 	viewportHeight: number
 	viewportWidth: number
@@ -18,16 +17,10 @@ export class Props {
 		this.time = config.to - config.from
 		this.dimensions = config.rootElement
 		this.domains = config.domains.map(d => new Domain(d))
-
-		document.addEventListener(RELOAD, () => {
-			this.dimensions = config.rootElement
-			this.domains = config.domains.map(d => new Domain(d))
-			document.dispatchEvent(new CustomEvent(PROPS_UPDATED))
-		})
 	}
 
 	/** Current center of the timeline by ratio [0, 1] */
-	private _center: Ratio = .5
+	private _center: Ratio = this.defaultCenter
 	get center() { return this._center }
 	set center(n: Ratio) {
 		if ((this._center === 0 && n < 0) || (this._center === 1 && n > 1)) return

src/utils/events.worker.ts

@@ -1,8 +1,8 @@
 import { Milliseconds, Grid, Pixels, Ratio } from "../constants"
 import { RawEv3nt } from "../models/event";
 
-export type OrderEventsReturn = [RawEv3nt[], Milliseconds, Milliseconds, Grid, number]
-export function orderEvents(events: RawEv3nt[], viewportWidth: Pixels, visibleRatio: Ratio): OrderEventsReturn { 
+export type OrderedEvents = [RawEv3nt[], Milliseconds, Milliseconds, Grid, number]
+export function orderEvents(events: RawEv3nt[], viewportWidth: Pixels, visibleRatio: Ratio): OrderedEvents { 
 	if (!events.length) return [[], null, null, [], null]
 	/** Keep a count the number of rows. It's returned to the main thread to construct the events bar and indicators */
 	let rowCount: number = 0
@@ -75,7 +75,7 @@ export function eventsWorker(e: { data: { events: RawEv3nt[], orderEventsURL: st
 	postMessage(orderEvents(e.data.events))
 }
 
-export default (events: RawEv3nt[], done: (response: OrderEventsReturn) => void) => {
+export default (events: RawEv3nt[], done: (response: OrderedEvents) => void) => {
 	const orderEventsURL = URL.createObjectURL(new Blob([orderEvents]))
 	const func = `onmessage = ${eventsWorker.toString()}`
 	const objectURL = URL.createObjectURL(new Blob([func]))