Prevent Idle Renders

All PIXI.Applications are initiated on the PIXI shared ticker, allowing them to all be controlled simultaneously.

PIXI.Ticker.shared is controlled via TimeGraphRenderController and RenderEvents.  RenderEvents fires custom events that are handled by event handlers initiated in the RenderController.

RenderController is created in the UnitController; this is only because we need one RenderController and there is already only one UnitController.

RenderEvents currently fires start-render events in:
- TimeGraphComponent on creation and update.
- StateController when scrolling up/down

Stop render is debounced at a 1000ms after start render.

Fixes #7

Signed-off-by: Will Yang <william.yang@ericsson.com>

timeline-chart/src/components/time-graph-component.ts

@@ -1,4 +1,5 @@
-import * as PIXI from "pixi.js-legacy"
+import * as PIXI from "pixi.js-legacy";
+import { RenderEvents } from "../time-graph-render-controller";
 
 export type TimeGraphInteractionType = 'mouseover' | 'mouseout' | 'mousemove' | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'rightdown' | 'click';
 export type TimeGraphInteractionHandler = (event: PIXI.InteractionEvent) => void;
@@ -77,6 +78,11 @@ export abstract class TimeGraphComponent<T> {
         }
         this.clear();
         this.render();
+        this.startPixiRender();
+    }
+
+    protected startPixiRender() {
+        RenderEvents.startRender();
     }
 
     abstract render(): void;
@@ -87,6 +93,7 @@ export abstract class TimeGraphComponent<T> {
         this.displayObject.beginFill((color || 0xffffff), this.getPIXIOpacity(opacity));
         this.displayObject.drawRect(position.x, position.y, width, height);
         this.displayObject.endFill();
+        this.startPixiRender();
     }
 
     protected rectTruncated(opts: TimeGraphStyledRect) {
@@ -104,6 +111,7 @@ export abstract class TimeGraphComponent<T> {
             this.displayObject.drawRect(position.x + 0.5, position.y + 0.5, width, height);
         }
         this.displayObject.endFill();
+        this.startPixiRender();
     }
 
     protected roundedRect(opts: TimeGraphStyledRect) {
@@ -114,20 +122,23 @@ export abstract class TimeGraphComponent<T> {
         this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
 
         this.displayObject.endFill();
+        this.startPixiRender();
     }
 
     protected hline(opts: TimeGraphHorizontalLine) {
         const { position, width, thickness, color, opacity } = opts;
         this.displayObject.lineStyle(thickness || 1, color || 0x000000, this.getPIXIOpacity(opacity));
         this.displayObject.moveTo(position.x, position.y + 0.5);
         this.displayObject.lineTo(position.x + width, position.y + 0.5);
+        this.startPixiRender();
     }
 
     protected vline(opts: TimeGraphVerticalLine) {
         const { position, height, thickness, color, opacity } = opts;
         this.displayObject.lineStyle(thickness || 1, color || 0x000000, this.getPIXIOpacity(opacity));
         this.displayObject.moveTo(position.x + 0.5, position.y);
         this.displayObject.lineTo(position.x + 0.5, position.y + height);
+        this.startPixiRender();
     }
 
     /**

timeline-chart/src/time-graph-container.ts

@@ -49,6 +49,7 @@ export class TimeGraphContainer {
             view: canvas,
             backgroundColor: config.backgroundColor,
             transparent: config.transparent,
+            sharedTicker: true,
             antialias: true,
             resolution: ratio,
             autoDensity: true,

timeline-chart/src/time-graph-render-controller.ts

@@ -0,0 +1,65 @@
+import { throttle, debounce } from 'lodash';
+import * as PIXI from 'pixi.js-legacy';
+
+const START_RENDER_STRING = 'startPixiRender';
+const STOP_RENDER_STRING = 'stopPixiRender';
+
+const throttledStart = throttle(() => {
+    window.dispatchEvent(new Event(START_RENDER_STRING));
+}, 450, { leading: true });
+
+const debouncedStop = debounce(() => {
+    window.dispatchEvent(new Event(STOP_RENDER_STRING));
+}, 1000);
+
+interface RenderEvents {
+    startRender: () => void;
+    stopRender: () => void;
+};
+
+export const RenderEvents: RenderEvents = {
+    /**
+     * Fires an event that will start the PIXI.Ticker.
+     * This will start rendering.
+     * Event handler located in time-graph-render-controller.ts
+     */
+    startRender: () => {
+        throttledStart();
+    },
+    /**
+     * Fires an event that will stop the PIXI.Ticker.
+     * This will stop rendering.
+     * Event handler located in time-graph-render-controller.ts
+     */
+    stopRender: () => {
+        debouncedStop();
+    }
+};
+export class TimeGraphRenderController {
+    constructor() {
+        this.initializeRenderEvents();
+    }
+
+    private initializeRenderEvents = () => {
+
+        const { startRender, stopRender } = this;
+
+        window.addEventListener(START_RENDER_STRING, startRender);
+        window.addEventListener(STOP_RENDER_STRING, stopRender);
+
+        window.addEventListener('beforeunload', () => {
+            window.removeEventListener(START_RENDER_STRING, startRender);
+            window.removeEventListener(STOP_RENDER_STRING, stopRender);
+        });
+
+    };
+
+    public startRender = () => {
+        PIXI.Ticker.shared.start();
+        debouncedStop();
+    };
+
+    public stopRender = () => {
+        PIXI.Ticker.shared.stop();
+    };
+}

timeline-chart/src/time-graph-row-controller.ts

@@ -1,4 +1,5 @@
 import { TimelineChart } from "./time-graph-model";
+import { RenderEvents } from "./time-graph-render-controller";
 
 export class TimeGraphRowController {
     private _selectedRow: TimelineChart.TimeGraphRowModel | undefined = undefined;
@@ -14,6 +15,7 @@ export class TimeGraphRowController {
 
     protected handleVerticalOffsetChanged() {
         this.verticalOffsetChangedHandlers.forEach(h => h(this._verticalOffset));
+        this.startRender();
     }
 
     protected handleSelectedRowChanged() {
@@ -25,6 +27,11 @@ export class TimeGraphRowController {
 
     protected handleTotalHeightChanged(){
         this.totalHeightChangedHandlers.forEach(h=>h(this._totalHeight));
+        this.startRender();
+    }
+
+    protected startRender() {
+        RenderEvents.startRender();
     }
 
     onSelectedRowChangedHandler(handler: (row: TimelineChart.TimeGraphRowModel) => void) {

timeline-chart/src/time-graph-unit-controller.ts

@@ -1,4 +1,5 @@
 import { TimelineChart } from "./time-graph-model";
+import { TimeGraphRenderController } from "./time-graph-render-controller";
 
 export class TimeGraphUnitController {
     protected viewRangeChangedHandlers: ((newRange: TimelineChart.TimeGraphRange) => void)[];
@@ -9,6 +10,7 @@ export class TimeGraphUnitController {
 
     protected _offset: bigint = BigInt(0);
 
+    protected _renderer: TimeGraphRenderController;
     /**
      *  Create a string from the given number, which is shown in TimeAxis.
      *  Or return undefined to not show any text for that number.
@@ -21,6 +23,7 @@ export class TimeGraphUnitController {
         this._viewRange = viewRange || { start: BigInt(0), end: absoluteRange };
 
         this.selectionRangeChangedHandlers = [];
+        this._renderer = new TimeGraphRenderController();
     }
 
     protected handleViewRangeChange() {
@@ -88,4 +91,5 @@ export class TimeGraphUnitController {
     set offset(offset: bigint) {
         this._offset = offset;
     }
+
 }