feat (renderer:point) add color support to point

himanshurajora · Sep 15, 2023 · 0b83b8b · 0b83b8b
1 parent 096d137
commit 0b83b8b
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 14 deletions.
diff --git a/examples/colors/index.html b/examples/colors/index.html
@@ -0,0 +1,70 @@
+<!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">
+      Click to put a random color
+      <br />
+      <label for="max">Max Points: </label>
+      <input type="number" name="max" id="max" value="100" />
+    </div>
+    <canvas id="canvas"></canvas>
+    <br />
+    Source Code:
+    <pre><code class="language-javascript">
+      export type CanvasOptions = {
+        /**
+         *  The element to append the canvas on @default body
+         */
+        parentElement: HTMLElement;
+        /**
+         *  Width of the canvas on @default 800px
+         */
+        width: number;
+        /**
+         *  Height of the canvas on @default 600px
+         */
+        height: number;
+      };
+
+      export type EngineOptions = {
+        contextOptions?: CanvasRenderingContext2DSettings;
+        // TODO: not yet decided
+        engineOptions: {
+          clearEachFrame: boolean;
+          border: string;
+          bg: string;
+          width: number;
+          height: number;
+        };
+      };
+
+
+    </code></pre>
+    <script type="module" src="./script.ts"></script>
+  </body>
+</html>
diff --git a/examples/colors/script.ts b/examples/colors/script.ts
@@ -0,0 +1,28 @@
+import { Engine, Point } from '../../lib';
+
+const engine = new Engine(
+  document.getElementById('canvas') as HTMLCanvasElement,
+);
+const renderer = engine.renderer;
+
+const canvasX = engine.canvas.getBoundingClientRect().x;
+const canvasY = engine.canvas.getBoundingClientRect().y;
+let maxAmount = 100;
+
+document.getElementById('max')?.addEventListener('change', (e) => {
+  maxAmount = +(e.target as HTMLInputElement).value;
+});
+
+window.addEventListener('click', (e: MouseEvent) => {
+  const p1 = new Point();
+  p1.options.x = e.clientX - canvasX;
+  p1.options.y = e.clientY - canvasY;
+  p1.options.radius = 6;
+  p1.options.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+    Math.random() * 255
+  })`;
+
+  renderer.addObject(p1);
+});
+
+console.log(renderer.objects);
diff --git a/examples/drawing/index.html b/examples/drawing/index.html
@@ -4,7 +4,9 @@
     <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" />
-    <title>MiniPoint Point</title>
+    <link rel="stylesheet" href="/styles.css" />
+
+    <title>MiniPoint Drawing</title>
   </head>
   <body>
     <div id="app">

diff --git a/examples/index.html b/examples/index.html
@@ -4,6 +4,8 @@
     <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="/styles.css" />
+
     <title>MiniPoint</title>
   </head>
   <body>
@@ -14,6 +16,7 @@ <h2>We got examples for you</h2>
     <ul>
       <li><a href="/point/">Point</a></li>
       <li><a href="/drawing/">Drawing</a></li>
+      <li><a href="/colors/">Colors</a></li>
     </ul>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/examples/point/index.html b/examples/point/index.html
@@ -4,6 +4,8 @@
     <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="/styles.css" />
+
     <title>MiniPoint Point</title>
   </head>
   <body>

diff --git a/examples/public/styles.css b/examples/public/styles.css
@@ -0,0 +1,104 @@
+body {
+    background: #000;
+    color: white;
+    margin: 20px;
+}
+
+input {
+    margin: 10px;
+}
+
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+
+.hljs {
+    color: #abb2bf;
+    background: #282c34;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
diff --git a/examples/vite.config.js b/examples/vite.config.js
@@ -9,6 +9,7 @@ export default defineConfig({
         main: resolve(__dirname, 'index.html'),
         point: resolve(__dirname, 'point/index.html'),
         drawing: resolve(__dirname, 'drawing/index.html'),
+        colors: resolve(__dirname, 'colors/index.html'),
       },
     },
   },

diff --git a/lib/constants/renderer.ts b/lib/constants/renderer.ts
@@ -1,4 +1,4 @@
-import { DrawableObjectOptions, PointOptions } from '../types';
+import { DrawableObjectOptions, EngineOptions, PointOptions } from '../types';
 
 export const DefaultDrawableObjectOptions: DrawableObjectOptions = {
   show: true,
@@ -16,3 +16,14 @@ export const DefaultCanvasOptions = {
   width: 800,
   height: 600,
 };
+
+export const DefaultEngineOptions: EngineOptions = {
+  engineOptions: {
+    clearEachFrame: true,
+    border: '1px solid black',
+    bg: '#eee',
+    width: DefaultCanvasOptions.width,
+    height: DefaultCanvasOptions.height,
+  },
+  contextOptions: {},
+};
diff --git a/lib/render/engine.ts b/lib/render/engine.ts
@@ -1,3 +1,4 @@
+import { DefaultEngineOptions } from '../constants';
 import { EngineOptions } from '../types';
 import { Renderer } from './renderer';
 
@@ -15,14 +16,7 @@ export class Engine {
 
   constructor(
     canvasElement: HTMLCanvasElement | null,
-    options: EngineOptions = {
-      engineOptions: {
-        clearEachFrame: true,
-        border: '1px solid black',
-        bg: '#eee',
-      },
-      contextOptions: {},
-    },
+    options: EngineOptions = DefaultEngineOptions,
   ) {
     if (!canvasElement) {
       throw Error(
@@ -31,14 +25,18 @@ export class Engine {
     }
 
     this.canvas = canvasElement;
-    this.context = canvasElement.getContext('2d', options?.contextOptions);
+    this.context = canvasElement.getContext(
+      '2d',
+      options?.contextOptions,
+    ) as CanvasRenderingContext2D;
     this.x = this.canvas.getBoundingClientRect().x;
     this.y = this.canvas.getBoundingClientRect().y;
     this.width = this.canvas.width;
     this.height = this.canvas.height;
     this.canvas.style.border = options.engineOptions.border;
     this.canvas.style.background = options.engineOptions.bg;
-
+    this.canvas.width = options.engineOptions.width;
+    this.canvas.height = options.engineOptions.height;
     if (!this.context) {
       throw Error(
         "Couldn't find the context, the value might be null or undefined",

diff --git a/lib/render/objects/point.ts b/lib/render/objects/point.ts
@@ -28,7 +28,7 @@ export class Point extends BaseObject<PointOptions, Point> {
       0,
       Math.PI * 2,
     );
-
+    if (this.options.color) this.context.fillStyle = this.options.color;
     this.context.fill();
     return this;
   }

diff --git a/lib/types/canvas.ts b/lib/types/canvas.ts
@@ -14,11 +14,13 @@ export type CanvasOptions = {
 };
 
 export type EngineOptions = {
-  contextOptions: CanvasRenderingContext2DSettings;
+  contextOptions?: CanvasRenderingContext2DSettings;
   // TODO: not yet decided
   engineOptions: {
     clearEachFrame: boolean;
     border: string;
     bg: string;
+    width: number;
+    height: number;
   };
 };
diff --git a/lib/types/shapes.ts b/lib/types/shapes.ts
@@ -20,5 +20,6 @@ export type DrawableObjectOptions<T = unknown> = T & {
 export type PointOptions = DrawableObjectOptions<{
   x: number;
   y: number;
+  color?: string;
   radius?: number;
 }>;