add object specific update method example

This will help modularize the framework and write object specific code in different files.
himanshurajora · Sep 19, 2023 · afe55c6 · afe55c6
1 parent 6cd14db
commit afe55c6
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 25 deletions.
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -1,29 +1,32 @@
 Examples:
-- 'examples/**'
+  - 'examples/**'
 
 Library:
-- 'lib/**'
+  - 'lib/**'
 
 ReadMe:
-- 'readme.md'
+  - 'readme.md'
 
 CodeEditor:
-- '.vscode/**'
+  - '.vscode/**'
 
 Tests:
-- any: ['test/**', '**/*.test.ts', '**/*.test.js']
+  - any: ['test/**', '**/*.test.ts', '**/*.test.js']
 
 Core:
-- 'lib/core/**'
+  - 'lib/core/**'
 
 CoreWithTests:
-- all: ['lib/core/**', 'test/**']
+  - all: ['lib/core/**', 'test/**']
 
 Actions:
-- '.github/**'
+  - '.github/**'
 
 Docs:
-- 'Docs/**'
+  - 'Docs/**'
 
 Types:
-- 'lib/types/**'
+  - 'lib/types/**'
+
+Packages:
+  - '**/**/package*.json'
diff --git a/.huskyrc b/.huskyrc
@@ -0,0 +1,12 @@
+# First load nvm and provide access to the nvm command.
+export NVM_DIR="$HOME/.nvm"
+  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"
+
+# Use the nvm ls command to detect the version being used.
+export NVM_DIR="$HOME/.nvm"
+a=$(nvm ls | grep 'node')
+b=${a#*(-> }
+v=${b%%[)| ]*}
+
+# Export the current version in your path for husky to find.
+export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"
diff --git a/examples/index.html b/examples/index.html
@@ -20,6 +20,7 @@ <h2>We got examples for you</h2>
       <li><a href="/drawing/">Drawing</a></li>
       <li><a href="/colors/">Colors</a></li>
       <li><a href="/mouse-inputs/">Mouse Inputs</a></li>
+      <li><a href="/update/">Update</a></li>
     </ul>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/examples/mouse-inputs/index.html b/examples/mouse-inputs/index.html
@@ -26,12 +26,7 @@
     <title>MiniPoint Colors</title>
   </head>
   <body>
-    <div id="app">
-      Various Mouse Input Examples
-      <br />
-      <label for="max">Max Points: </label>
-      <input type="number" name="max" id="max" value="100" />
-    </div>
+    <div id="app">Mouse Click Event Examples</div>
     <div class="main-area">
       <canvas id="canvas"></canvas>
       <pre><code class="language-javascript">

diff --git a/examples/update/index.html b/examples/update/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
+    <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
+    />
+    <link rel="stylesheet" href="/styles.css" />
+
+    <script>
+      hljs.addPlugin(new CopyButtonPlugin());
+      hljs.highlightAll();
+    </script>
+    <title>MiniPoint Colors</title>
+  </head>
+  <body>
+    <div id="app">Single Objects also have their own update method</div>
+    <div class="main-area">
+      <canvas id="canvas"></canvas>
+      <pre><code class="language-javascript">
+        import { Engine, Point } from '../../lib';
+
+const engine = new Engine(
+  document.getElementById('canvas') as HTMLCanvasElement,
+  {
+    engineOptions: {
+      width: 600,
+      height: 400,
+    },
+  },
+);
+
+const { renderer, input } = engine;
+
+// we will always get the engine as parameter for any use.
+engine.update = (_engine) => {
+  if (input.mouse.click) {
+    const p1 = new Point({
+      x: input.mouse.position.x,
+      y: input.mouse.position.y,
+      radius: 6,
+      color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+        Math.random() * 255
+      })`,
+    });
+
+    // this is object specific update method, it could be conditional as well.
+    p1.update = () => {
+      p1.options.radius = (p1.options.radius ?? 0) + 0.1;
+    };
+
+    renderer.addObject(p1);
+  }
+};
+
+
+      </code></pre>
+    </div>
+    <script type="module" src="./script.ts"></script>
+  </body>
+</html>
diff --git a/examples/update/script.ts b/examples/update/script.ts
@@ -0,0 +1,34 @@
+import { Engine, Point } from '../../lib';
+
+const engine = new Engine(
+  document.getElementById('canvas') as HTMLCanvasElement,
+  {
+    engineOptions: {
+      width: 600,
+      height: 400,
+    },
+  },
+);
+
+const { renderer, input } = engine;
+
+// we will always get the engine as parameter for any use.
+engine.update = (_engine) => {
+  if (input.mouse.click) {
+    const p1 = new Point({
+      x: input.mouse.position.x,
+      y: input.mouse.position.y,
+      radius: 6,
+      color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+        Math.random() * 255
+      })`,
+    });
+
+    // this is object specific update method, it could be conditional as well.
+    p1.update = () => {
+      p1.options.radius = (p1.options.radius ?? 0) + 0.1;
+    };
+
+    renderer.addObject(p1);
+  }
+};
diff --git a/examples/vite.config.js b/examples/vite.config.js
@@ -10,7 +10,8 @@ export default defineConfig({
         point: resolve(__dirname, 'point/index.html'),
         drawing: resolve(__dirname, 'drawing/index.html'),
         colors: resolve(__dirname, 'colors/index.html'),
-        colors: resolve(__dirname, 'mouse-inputs/index.html'),
+        mouse_inputs: resolve(__dirname, 'mouse-inputs/index.html'),
+        update: resolve(__dirname, 'update/index.html'),
       },
     },
   },

diff --git a/lib/render/engine.ts b/lib/render/engine.ts
@@ -72,10 +72,10 @@ export class Engine {
     }
 
     this.input = new Input(this);
-    this.start();
+    this.start(this);
 
     const render = () => {
-      this.update();
+      this.update(this);
       if (options.engineOptions!.clearEachFrame) {
         this.context?.clearRect(0, 0, this.width, this.height);
       }
@@ -84,7 +84,7 @@ export class Engine {
       requestAnimationFrame(render);
     };
 
-    this.renderer = new Renderer(this.context);
+    this.renderer = new Renderer(this);
     render();
 
     // Set useful options to window
@@ -94,9 +94,8 @@ export class Engine {
     window.MiniPointDefaultRenderer = this.renderer;
   }
 
-  // two methods that can be overridden
-  start() {}
-  update() {}
+  update: (engine: Engine) => void = (_engine: Engine) => {};
+  start: (engine: Engine) => void = (_engine: Engine) => {};
 
   // reset single frame events
   resetEvent() {

diff --git a/lib/render/objects/base-object.ts b/lib/render/objects/base-object.ts
@@ -1,6 +1,7 @@
 import { v4 } from 'uuid';
 import { DrawableObjectOptions, BaseObjectInterface } from '../../types';
 import { Renderer } from '../renderer';
+import { Engine } from '../engine';
 
 /**
  * The Base Object Class
@@ -10,6 +11,8 @@ export abstract class BaseObject<T, K> implements BaseObjectInterface {
   options: T & DrawableObjectOptions;
   context: CanvasRenderingContext2D;
   renderer: Renderer;
+  // TODO: Later add support for child elements
+  children: (T & BaseObject<T, K>)[];
   constructor(options: DrawableObjectOptions<T>, renderer?: Renderer) {
     this.options = options;
     this.id = v4();
@@ -20,15 +23,21 @@ export abstract class BaseObject<T, K> implements BaseObjectInterface {
       this.renderer = renderer;
     }
 
+    this.children = [];
     // add the object to default or provided renderer
     this.renderer.addObject(this);
     this.context = this.renderer.context;
+    this.start(this.renderer.engine);
     this.checkDrawConditionAndDraw();
   }
 
   abstract draw(): K;
 
+  update: (engine: Engine) => void = (_engine: Engine) => {};
+  start: (engine: Engine) => void = (_engine: Engine) => {};
+
   checkDrawConditionAndDraw() {
+    this.update(this.renderer.engine);
     if (this.options.show) {
       this.draw();
     }

diff --git a/lib/render/renderer.ts b/lib/render/renderer.ts
@@ -2,12 +2,19 @@ import { forEach } from 'lodash';
 import { DefaultPointOptions } from '../constants';
 import { BaseObjectInterface, BaseRenderer, PointOptions } from '../types';
 import { Point } from './objects';
+import { Engine } from './engine';
 /**
  * The class that is responsible for drawing
  */
 export class Renderer extends BaseRenderer {
-  constructor(context: CanvasRenderingContext2D) {
-    super(context);
+  engine: Engine;
+  constructor(engine: Engine) {
+    if (!engine.context)
+      throw new Error(
+        "Context wan't found while initializing renderer, please check your code",
+      );
+    super(engine.context);
+    this.engine = engine;
   }
 
   render() {