The engine class presented below utilizes two renderer classes that extend a base renderer class:
import {RendererOne} from "./renderer-one";
import {RendererTwo} from "./renderer-two";
export class Engine {
coordinates: number;
randomProperty: string;
produceRenderer (type, params) {
switch type {
case "map":
return new RendererOne(this, params)
case "other":
return new RendererTwo(this, params)
default:
return null;
}
}
}
A snippet illustrating the BaseRenderer class is as follows:
import { Engine } from "./index";
export abstract class BaseRenderer {
engine: Engine;
constructor(engine: Engine, params?) {
this.engine = engine;
}
// Various drawing methods common to all renderers are defined here
attach () {
const engine = this.engine;
// Utilize engine's methods and properties in this section
}
}
Below is an example of a renderer extending the BaseRenderer class:
import {BaseRenderer} from "./base-renderer";
import {Engine} from "./index";
export class RendererOne extends BaseRenderer {
madeUpProperty: string;
params: any;
constructor(engine: Engine, params?) {
super(engine, params);
var derivedParams = this.params;
}
}
This structure currently leads to a circular reference issue. What would be the ideal way to organize code similar to what has been described above?
The Renderers require access to the properties and methods of the engine object. This simplified code excerpt may contain some errors, but it aims to highlight the challenge being encountered.