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 1500 timeout after start render.

Fixes eclipse-cdt-cloud#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,58 @@
+import { throttle, debounce } from 'lodash';
+import * as PIXI from 'pixi.js-legacy';
+
+const START_RENDER_STRING = 'startPixiRender';
+const STOP_RENDER_STRING = 'stopPixiRender';
+interface RenderEvents {
+    startRender: () => void;
+    stopRender: () => void;
+}
+
+const throttledStart = throttle(() => {
+    window.dispatchEvent(new Event(START_RENDER_STRING));
+}, 450, { leading: true });
+
+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.
+     * StopRender event handler is debounced @ 1.5s.
+     * Event handler located in time-graph-render-controller.ts
+     */
+    stopRender: () => {
+        window.dispatchEvent(new Event(STOP_RENDER_STRING));
+    }
+};
+export class TimeGraphRenderController {
+    constructor() {
+        this.initializeRenderEvents();
+    }
+
+    public initializeRenderEvents() {
+
+        const stopRenderDebounced = debounce(() => {
+            PIXI.Ticker.shared.stop();
+        }, 1500);
+
+
+        const startRender = () => {
+            PIXI.Ticker.shared.start();
+            stopRenderDebounced();
+        };
+
+        window.addEventListener(START_RENDER_STRING, startRender);
+        window.addEventListener(STOP_RENDER_STRING, stopRenderDebounced);
+        window.addEventListener('beforeunload', () => {
+            window.removeEventListener(START_RENDER_STRING, startRender);
+            window.removeEventListener(STOP_RENDER_STRING, stopRenderDebounced);
+        });
+    }
+}

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;
     }
+
 }