diff --git a/examples/colors/index.html b/examples/colors/index.html new file mode 100644 index 0000000..0947700 --- /dev/null +++ b/examples/colors/index.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + MiniPoint Colors + + +
+ Click to put a random color +
+ + +
+ +
+ Source Code: + 

+      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;
+        };
+      };
+      
+      
+
+ + + diff --git a/examples/colors/script.ts b/examples/colors/script.ts new file mode 100644 index 0000000..1155ae6 --- /dev/null +++ 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 index 8f05fbe..7046a88 100644 --- a/examples/drawing/index.html +++ b/examples/drawing/index.html @@ -4,7 +4,9 @@ - MiniPoint Point + + + MiniPoint Drawing
diff --git a/examples/index.html b/examples/index.html index c6ed732..958f35c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,6 +4,8 @@ + + MiniPoint @@ -14,6 +16,7 @@

We got examples for you

diff --git a/examples/point/index.html b/examples/point/index.html index f510138..4caa150 100644 --- a/examples/point/index.html +++ b/examples/point/index.html @@ -4,6 +4,8 @@ + + MiniPoint Point diff --git a/examples/public/styles.css b/examples/public/styles.css new file mode 100644 index 0000000..87426ad --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/examples/vite.config.js b/examples/vite.config.js index e7812ae..d1eb75b 100644 --- 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 index d5740e7..91710ef 100644 --- 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 index a8343a1..d7671de 100644 --- 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 index 19624be..5d0ae47 100644 --- a/lib/render/objects/point.ts +++ b/lib/render/objects/point.ts @@ -28,7 +28,7 @@ export class Point extends BaseObject { 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 index 6b02dce..ec3d75d 100644 --- 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 index 15ee854..b7408cc 100644 --- a/lib/types/shapes.ts +++ b/lib/types/shapes.ts @@ -20,5 +20,6 @@ export type DrawableObjectOptions = T & { export type PointOptions = DrawableObjectOptions<{ x: number; y: number; + color?: string; radius?: number; }>;