interface Ctor { container : HTMLElement ; } /**
 * Renderer is class responsible for managing core HTML element (`container`)
 * it's position, and for performing efficient render operations.
 */ export class Renderer { /**
     * Container is primary HTML element that will contain
     * all other HTML elements, that are created by modules.
     */ private container : HTMLElement ; /** requestAnimationFrame reference */ private rafId : number | null = null ; private constructor ( ctor ) { this . container = ctor . container ; this . container . classList . add ( 'jsr' ) ; } returns public getContainer ( ) { return this . container ; } /**
     * Add HTML child to container
     */ public addChild ( child ) { this . container . appendChild ( child ) ; } example public positionToRelative ( x ) { return ( x - this . container . getBoundingClientRect ( ) . left ) / this . container . offsetWidth ; } example public distanceToRelative ( distance ) { return distance / this . container . offsetWidth ; } /**
     * Enqueue render operation executing all `renderFunctions`.
     */ public render ( renderFunctions ) { if ( this . rafId ) { window . cancelAnimationFrame ( this . rafId ) ; } this . rafId = window . requestAnimationFrame ( ( ) => { renderFunctions . forEach ( f => f ( ) ) ; this . rafId = null ; } ) ; } public static init ( ctor ) { return new Renderer ( ctor ) ; } }