graphico 0.0.1 → 0.0.3

package/dist/canvas.js

@@ -0,0 +1,290 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Canvas = void 0;
+/**
+ * Represents a canvas for drawing and animating
+ */
+var Canvas = /** @class */ (function () {
+    /**
+     * Create a new canvas with the provided options
+     * @param options Configuration options
+     */
+    function Canvas(options) {
+        if (options === void 0) { options = {}; }
+        var _this = this;
+        /**
+         * Contains a list of current keys pressed
+         */
+        this.keys = [];
+        /**
+         * Contains a list of current mouse buttons pressed
+         */
+        this.mouseButtons = [];
+        /**
+         * Contains the mouse X-coordinate, in pixels
+         */
+        this.mouseX = 0;
+        /**
+         * Contains the mouse Y-coordinate, in pixels
+         */
+        this.mouseY = 0;
+        /**
+         * Represents the animation ID handle to cancel the animation
+         */
+        this.animation = 0;
+        /**
+         * The last frame's high resolution timestamp
+         */
+        this.lastFrame = 0;
+        this.config = Canvas.setDefaults(options, Canvas.defaults);
+        this.width = this.config.width;
+        this.height = this.config.height;
+        var canvas = document.createElement('canvas');
+        var graphics = canvas.getContext('2d');
+        if (graphics) {
+            this.graphics = graphics;
+        }
+        else {
+            throw new Error('Could not initialize canvas graphics.');
+        }
+        // Set static properties
+        this.config.parent.appendChild(canvas);
+        canvas.tabIndex = 1; // For element focus
+        canvas.style.outline = 'none';
+        canvas.style.imageRendering = 'pixelated';
+        graphics.imageSmoothingEnabled = false;
+        // Set custom properties
+        canvas.width = this.config.width;
+        canvas.height = this.config.height;
+        canvas.style.width = "".concat(this.config.width * this.config.scale, "px");
+        canvas.style.height = "".concat(this.config.height * this.config.scale, "px");
+        canvas.style.background = this.config.background.toString();
+        canvas.style.border = "".concat(this.config.scale, "px solid ").concat(this.config.border);
+        canvas.style.cursor = this.config.showMouse ? 'default' : 'none';
+        // Event listeners
+        canvas.addEventListener('mousemove', function (e) {
+            if (!_this.isFocused()) {
+                return;
+            }
+            _this.mouseX = (e.offsetX / _this.config.scale) | 0;
+            _this.mouseY = (e.offsetY / _this.config.scale) | 0;
+            _this.log(e.type, _this.mouseX, _this.mouseY);
+            _this.config.mousemove(_this.mouseX, _this.mouseY);
+        });
+        canvas.addEventListener('keydown', function (e) {
+            if (!_this.isFocused()) {
+                return;
+            }
+            e.preventDefault();
+            var key = e.key.toLowerCase();
+            _this.log(e.type, _this.keys);
+            if (!_this.keys.includes(key)) {
+                _this.keys.push(key);
+                _this.config.keydown(key);
+            }
+        });
+        canvas.addEventListener('keyup', function (e) {
+            if (!_this.isFocused()) {
+                return;
+            }
+            var key = e.key.toLowerCase();
+            var index = _this.keys.indexOf(key);
+            _this.log(e.type, _this.keys);
+            if (index >= 0) {
+                _this.keys.splice(index, 1);
+                _this.config.keyup(key);
+            }
+        });
+        canvas.addEventListener('mousedown', function (e) {
+            if (!_this.isFocused()) {
+                return;
+            }
+            var button = e.button;
+            _this.log(e.type, _this.mouseButtons);
+            if (!_this.mouseButtons.includes(button)) {
+                _this.mouseButtons.push(button);
+                _this.config.mousedown(button);
+            }
+        });
+        canvas.addEventListener('mouseup', function (e) {
+            if (!_this.isFocused()) {
+                return;
+            }
+            var button = e.button;
+            var index = _this.mouseButtons.indexOf(button);
+            _this.log(e.type, _this.mouseButtons);
+            if (index >= 0) {
+                _this.mouseButtons.splice(index, 1);
+                _this.config.mouseup(button);
+            }
+        });
+        canvas.addEventListener('focusin', function (e) {
+            canvas.style.borderColor = _this.config.border;
+            _this.log(e.type);
+            _this.animation = requestAnimationFrame(function (time) { return _this.startAnimate(time); });
+        });
+        canvas.addEventListener('focusout', function (e) {
+            canvas.style.borderColor = _this.config.borderBlur;
+            _this.log(e.type);
+            cancelAnimationFrame(_this.animation);
+        });
+        window.addEventListener('blur', function (e) {
+            _this.log(e.type);
+            cancelAnimationFrame(_this.animation);
+        });
+        canvas.addEventListener('contextmenu', function (e) { return e.preventDefault(); });
+        // Focus on the canvas
+        canvas.focus();
+    }
+    /**
+     * Determine if the canvas is currently focused.
+     */
+    Canvas.prototype.isFocused = function () {
+        return this.graphics.canvas === document.activeElement;
+    };
+    /**
+     * Start the animation.
+     */
+    Canvas.prototype.startAnimate = function (time) {
+        var _this = this;
+        this.log('startAnimate', time);
+        this.lastFrame = time;
+        this.animation = requestAnimationFrame(function (time) { return _this.animate(time); });
+    };
+    /**
+     * Run the main animation loop.
+     */
+    Canvas.prototype.animate = function (time) {
+        var _this = this;
+        var _a;
+        var currentFrame = time;
+        var dt = currentFrame - this.lastFrame;
+        this.lastFrame = currentFrame;
+        this.log('animate', dt, currentFrame);
+        var drawables = (_a = this.config.loop(dt)) !== null && _a !== void 0 ? _a : [];
+        for (var _i = 0, drawables_1 = drawables; _i < drawables_1.length; _i++) {
+            var drawable = drawables_1[_i];
+            this.draw(drawable);
+        }
+        this.animation = requestAnimationFrame(function (time) { return _this.animate(time); });
+    };
+    /**
+     * Determine whether a key is currently pressed.
+     * @param key The key to check
+     * @returns True if `key` is down
+     */
+    Canvas.prototype.isKeyDown = function (key) {
+        return this.keys.includes(key.toLowerCase());
+    };
+    /**
+     * Determine whether a mouse button is currently pressed.
+     * @param button The button ID
+     * @returns True if `button` is down
+     */
+    Canvas.prototype.isMouseButtonDown = function (button) {
+        return this.mouseButtons.includes(button);
+    };
+    /**
+     * Get the current cursor position.
+     * @returns Cursor position as `[x, y]`
+     */
+    Canvas.prototype.getMousePosition = function () {
+        return [this.mouseX, this.mouseY];
+    };
+    /**
+     * Get the color of the selected pixel.
+     * @param x The pixel's x-coordinate
+     * @param y The pixel's y-coordinate
+     * @returns `[red, green, blue, alpha]`
+     */
+    Canvas.prototype.getPixel = function (x, y) {
+        var data = this.graphics.getImageData(x, y, 1, 1).data;
+        console.log(this.graphics.getImageData(x, y, 2, 2));
+        ;
+        return [data[0], data[1], data[2], data[3]];
+    };
+    /**
+     * Set the color of the selected pixel.
+     * @param x The pixel's x-coordinate
+     * @param y The pixel's y-coordinate
+     * @param color `[red, green, blue, alpha]`
+     */
+    Canvas.prototype.setPixel = function (x, y, color) {
+        var data = this.graphics.getImageData(x, y, 1, 1);
+        data.data[0] = color[0];
+        data.data[1] = color[1];
+        data.data[2] = color[2];
+        data.data[3] = color[3];
+        console.log(data);
+        this.graphics.putImageData(data, x, y);
+    };
+    /**
+     * Take a screenshot of the canvas contents and save to a .png file.
+     */
+    Canvas.prototype.screenshot = function () {
+        var dataURL = this.graphics.canvas.toDataURL();
+        var downloadLink = document.createElement('a');
+        downloadLink.setAttribute('href', dataURL);
+        downloadLink.setAttribute('download', 'screenshot');
+        downloadLink.click();
+    };
+    /**
+     * Draw an object onto the canvas.
+     * @param drawable Any drawable object
+     */
+    Canvas.prototype.draw = function (drawable) {
+        drawable.draw(this.graphics);
+    };
+    /**
+     * Completely clears the canvas.
+     */
+    Canvas.prototype.clear = function () {
+        this.graphics.clearRect(0, 0, this.config.width, this.config.height);
+    };
+    /**
+     * Log a message to the debug console.
+     */
+    Canvas.prototype.log = function () {
+        var x = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            x[_i] = arguments[_i];
+        }
+        if (this.config.debug) {
+            console.log.apply(console, x);
+        }
+    };
+    /**
+     * Set defaults for all undefined options.
+     */
+    Canvas.setDefaults = function (options, defaults) {
+        var _a;
+        var copy = {};
+        for (var _i = 0, _b = Object.keys(defaults); _i < _b.length; _i++) {
+            var key = _b[_i];
+            copy[key] = (_a = options[key]) !== null && _a !== void 0 ? _a : defaults[key];
+        }
+        return copy;
+    };
+    /**
+     * Default canvas options
+     */
+    Canvas.defaults = {
+        debug: false,
+        parent: document.body,
+        width: 600,
+        height: 400,
+        scale: 1,
+        background: 'transparent',
+        border: 'transparent',
+        borderBlur: 'transparent',
+        showMouse: true,
+        keydown: function () { return; },
+        keyup: function () { return; },
+        mousemove: function () { return; },
+        mousedown: function () { return; },
+        mouseup: function () { return; },
+        loop: function () { return; },
+    };
+    return Canvas;
+}());
+exports.Canvas = Canvas;

package/dist/index.js

@@ -1,6 +1,19 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PKG_NAME = void 0;
 /**
  * @packageDocumentation
  * Canvas 2D rendering toolkit for games and visual projects
@@ -8,7 +21,4 @@ exports.PKG_NAME = void 0;
  * ![NPM Downloads](https://img.shields.io/npm/d18m/graphico)
  * ![NPM Last Update](https://img.shields.io/npm/last-update/graphico)
  */
-/**
- * Package Name
- */
-exports.PKG_NAME = 'graphico';
+__exportStar(require("./canvas"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphico",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Canvas 2D rendering toolkit for games and visual projects",
   "homepage": "https://npm.nicfv.com/",
   "bin": "",

package/types/canvas.d.ts

@@ -0,0 +1,201 @@
+/**
+ * Represents a canvas for drawing and animating
+ */
+export declare class Canvas {
+    /**
+     * Default canvas options
+     */
+    private static readonly defaults;
+    /**
+     * Configuration options for this canvas
+     */
+    private readonly config;
+    /**
+     * Can be used to render 2D graphics onto the canvas
+     */
+    private readonly graphics;
+    /**
+     * Contains a list of current keys pressed
+     */
+    private readonly keys;
+    /**
+     * Contains a list of current mouse buttons pressed
+     */
+    private readonly mouseButtons;
+    /**
+     * The width of the canvas, in pixels
+     */
+    readonly width: number;
+    /**
+     * The height of the canvas, in pixels
+     */
+    readonly height: number;
+    /**
+     * Contains the mouse X-coordinate, in pixels
+     */
+    private mouseX;
+    /**
+     * Contains the mouse Y-coordinate, in pixels
+     */
+    private mouseY;
+    /**
+     * Represents the animation ID handle to cancel the animation
+     */
+    private animation;
+    /**
+     * The last frame's high resolution timestamp
+     */
+    private lastFrame;
+    /**
+     * Create a new canvas with the provided options
+     * @param options Configuration options
+     */
+    constructor(options?: Partial<Options>);
+    /**
+     * Determine if the canvas is currently focused.
+     */
+    private isFocused;
+    /**
+     * Start the animation.
+     */
+    private startAnimate;
+    /**
+     * Run the main animation loop.
+     */
+    private animate;
+    /**
+     * Determine whether a key is currently pressed.
+     * @param key The key to check
+     * @returns True if `key` is down
+     */
+    isKeyDown(key: string): boolean;
+    /**
+     * Determine whether a mouse button is currently pressed.
+     * @param button The button ID
+     * @returns True if `button` is down
+     */
+    isMouseButtonDown(button: number): boolean;
+    /**
+     * Get the current cursor position.
+     * @returns Cursor position as `[x, y]`
+     */
+    getMousePosition(): [number, number];
+    /**
+     * Get the color of the selected pixel.
+     * @param x The pixel's x-coordinate
+     * @param y The pixel's y-coordinate
+     * @returns `[red, green, blue, alpha]`
+     */
+    getPixel(x: number, y: number): [number, number, number, number];
+    /**
+     * Set the color of the selected pixel.
+     * @param x The pixel's x-coordinate
+     * @param y The pixel's y-coordinate
+     * @param color `[red, green, blue, alpha]`
+     */
+    setPixel(x: number, y: number, color: [number, number, number, number]): void;
+    /**
+     * Take a screenshot of the canvas contents and save to a .png file.
+     */
+    screenshot(): void;
+    /**
+     * Draw an object onto the canvas.
+     * @param drawable Any drawable object
+     */
+    draw(drawable: Drawable): void;
+    /**
+     * Completely clears the canvas.
+     */
+    clear(): void;
+    /**
+     * Log a message to the debug console.
+     */
+    private log;
+    /**
+     * Set defaults for all undefined options.
+     */
+    private static setDefaults;
+}
+/**
+ * Configuration Options for Canvas
+ */
+export interface Options {
+    /**
+     * Optionally print debug messages to the console
+     */
+    readonly debug: boolean;
+    /**
+     * Appends the canvas onto the parent element
+     */
+    readonly parent: Node;
+    /**
+     * The width of the drawing area, in pixels
+     */
+    readonly width: number;
+    /**
+     * The height of the drawing area, in pixels
+     */
+    readonly height: number;
+    /**
+     * The scale of the drawing area to the actual size of the canvas element
+     */
+    readonly scale: number;
+    /**
+     * The background color of the canvas
+     */
+    readonly background: string;
+    /**
+     * The border color for the canvas (when focused)
+     */
+    readonly border: string;
+    /**
+     * The border color for the canvas (when not focused)
+     */
+    readonly borderBlur: string;
+    /**
+     * Optionally show or hide the mouse when hovering over the canvas
+     */
+    readonly showMouse: boolean;
+    /**
+     * Event listener for when a key is pressed
+     * @param key The key that was pressed
+     */
+    readonly keydown: (key: string) => void;
+    /**
+     * Event listener for when a key is released
+     * @param key The key that was released
+     */
+    readonly keyup: (key: string) => void;
+    /**
+     * Event listener for when the mouse is moved
+     * @param x Cursor X-coordinate
+     * @param y Cursor Y-coordinate
+     */
+    readonly mousemove: (x: number, y: number) => void;
+    /**
+     * Event listener for when a button on the mouse is pressed
+     * @param button The button that was pressed
+     */
+    readonly mousedown: (button: number) => void;
+    /**
+     * Event listener for when a button on the mouse is released
+     * @param button The button that was released
+     */
+    readonly mouseup: (button: number) => void;
+    /**
+     * Event listener for a the main animation loop
+     * @param dt The number of milliseconds in between frames
+     * @returns An array of `Drawable` to render, or void
+     */
+    readonly loop: (dt: number) => Drawable[] | (void | never);
+}
+/**
+ * Represents an object that can be drawn on the canvas.
+ */
+export interface Drawable {
+    /**
+     * Draw this object onto the canvas.
+     * @param graphics Canvas 2D rendering interface
+     */
+    draw(graphics: CanvasRenderingContext2D): void;
+}

package/types/index.d.ts

@@ -5,7 +5,4 @@
  * ![NPM Downloads](https://img.shields.io/npm/d18m/graphico)
  * ![NPM Last Update](https://img.shields.io/npm/last-update/graphico)
  */
-/**
- * Package Name
- */
-export declare const PKG_NAME = "graphico";
+export * from './canvas';