add renderer option, abstract classes and refactor code

examples/point/script.ts

@@ -1,8 +1,11 @@
-import { Engine, createCanvas } from '../../lib';
+import { Engine, createCanvas, Point } from '../../lib';
 
 const { canvas } = createCanvas();
 const engine = new Engine(canvas);
-
 const renderer = engine.renderer;
 
-renderer.drawPoint({ x: 100, y: 100 });
+for (let i = 0; i < 100; i++) {
+  renderer.addObject(
+    new Point({ x: Math.random() * 400, y: Math.random() * 400 }),
+  );
+}

lib/constants/renderer.ts

@@ -1,4 +1,11 @@
-export const DefaultPointOptions = {
+import { DrawableObjectOptions, PointOptions } from '../types';
+
+export const DefaultDrawableObjectOptions: DrawableObjectOptions = {
+  show: true,
+};
+
+export const DefaultPointOptions: PointOptions = {
+  ...DefaultDrawableObjectOptions,
   x: 0,
   y: 0,
   radius: 5,

lib/render/engine.ts

@@ -30,7 +30,19 @@ export class Engine {
       );
     }
 
+    const render = () => {
+      this.renderer.render();
+      requestAnimationFrame(render);
+    };
+
     this.renderer = new Renderer(this.context);
+    requestAnimationFrame(render);
+
+    // Set useful options to window
+    // INFO: Make sure whenever new Engine is created it will overwrite the default
+    // renderer and engine in the global scope
+    window.MiniPointDefaultEngine = this;
+    window.MiniPointDefaultRenderer = this.renderer;
   }
 
   get currentContext(): CanvasRenderingContext2D | null {

lib/render/index.ts

@@ -2,3 +2,4 @@ export * from './engine';
 export * from './minipoint';
 export * from '../types';
 export * from '../constants';
+export * from './objects';

lib/render/objects/base-object.ts

@@ -0,0 +1,27 @@
+import { v4 } from 'uuid';
+import { DrawableObjectOptions, BaseObjectInterface } from '../../types';
+import { Renderer } from '../renderer';
+
+/**
+ * The Base Object Class
+ */
+export abstract class BaseObject<T, K> implements BaseObjectInterface {
+  id: string;
+  options: T & DrawableObjectOptions;
+  context: CanvasRenderingContext2D;
+  constructor(options: DrawableObjectOptions<T>, renderer?: Renderer) {
+    this.options = options;
+    // Either the specifically given render or the global renderer
+    this.context = renderer?.context || window.MiniPointDefaultRenderer.context;
+    this.id = v4();
+    this.checkDrawConditionAndDraw();
+  }
+
+  abstract draw(): K;
+
+  checkDrawConditionAndDraw() {
+    if (this.options.show) {
+      this.draw();
+    }
+  }
+}

lib/render/objects/index.ts

@@ -0,0 +1,2 @@
+export * from './base-object';
+export * from './point';

lib/render/objects/point.ts

@@ -0,0 +1,31 @@
+import { PointOptions } from '../../types';
+import { DefaultPointOptions } from '../../constants';
+import { BaseObject } from './base-object';
+import { Renderer } from '../renderer';
+/**
+ * The Point Class
+ */
+export class Point extends BaseObject<PointOptions, Point> {
+  constructor(
+    options: PointOptions = DefaultPointOptions,
+    renderer?: Renderer,
+  ) {
+    options = { ...DefaultPointOptions, ...options };
+    super(options, renderer);
+  }
+
+  draw() {
+    if (!this.options.show) return this;
+    this.context.beginPath();
+    this.context.arc(
+      this.options.x,
+      this.options.y,
+      this.options.radius!,
+      0,
+      Math.PI * 2,
+    );
+
+    this.context.fill();
+    return this;
+  }
+}

lib/render/renderer.ts

@@ -1,23 +1,24 @@
-import { PointOptions, RendererInterface } from '../types';
+import { forEach } from 'lodash';
 import { DefaultPointOptions } from '../constants';
+import { BaseRenderer, PointOptions } from '../types';
+import { Point } from './objects';
 /**
  * The class that is responsible for drawing
  */
-export class Renderer implements RendererInterface {
-  context: CanvasRenderingContext2D;
+export class Renderer extends BaseRenderer {
   constructor(context: CanvasRenderingContext2D) {
-    this.context = context;
+    super(context);
   }
 
-  drawPoint(options?: PointOptions) {
-    options = {
-      ...DefaultPointOptions,
-      ...options,
-    };
+  render() {
+    forEach(this.objects, (object) => {
+      object.checkDrawConditionAndDraw();
+    });
+  }
 
-    this.context.beginPath();
-    // @ts-ignore
-    this.context.arc(options.x, options.y, options.radius, 0, Math.PI * 2);
-    this.context.fill();
+  point(options: PointOptions = DefaultPointOptions) {
+    const point = new Point(options, this);
+    this.objects.push(point);
+    return point;
   }
 }

lib/types/renderer.ts

@@ -1 +1,26 @@
-export interface RendererInterface {}
+declare global {
+  interface Window {
+    MiniPointDefaultRenderer: Renderer;
+    MiniPointDefaultEngine: Engine;
+  }
+}
+
+import { Engine } from '../render';
+import { Renderer } from '../render/renderer';
+import { BaseObjectInterface } from './shapes';
+
+export abstract class BaseRenderer {
+  context: CanvasRenderingContext2D;
+  objects: BaseObjectInterface[];
+
+  constructor(context: CanvasRenderingContext2D) {
+    this.context = context;
+    this.objects = [];
+  }
+  abstract render(): void;
+
+  addObject<T>(object: T): T {
+    this.objects.push(object as BaseObjectInterface<T>);
+    return object;
+  }
+}

lib/types/shapes.ts

@@ -1,5 +1,21 @@
-export type PointOptions = {
+export interface BaseObjectInterface<T = unknown> {
+  // draw: () => T;
+  checkDrawConditionAndDraw: () => T;
+  /**
+   * A Unique Id that will help us identify each object in the Engine
+   */
+  id?: string;
+}
+
+export type DrawableObjectOptions<T = unknown> = T & {
+  /**
+   * Weather to show the object or not
+   */
+  show?: boolean;
+};
+
+export type PointOptions = DrawableObjectOptions<{
   x: number;
   y: number;
   radius?: number;
-};
+}>;

package.json

@@ -28,12 +28,18 @@
   "devDependencies": {
     "@types/jest": "^29.5.4",
     "@types/jsdom": "^21.1.2",
+    "@types/uuid": "^9.0.3",
     "jest": "^29.6.4",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.6.4",
     "jsdom": "^22.1.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.198",
+    "lodash": "^4.17.21",
+    "uuid": "^9.0.1"
   }
 }