graphico 0.0.2 → 0.0.3

package/dist/canvas.js

@@ -12,14 +12,6 @@ var Canvas = /** @class */ (function () {
     function Canvas(options) {
         if (options === void 0) { options = {}; }
         var _this = this;
-        /**
-         * Whether or not the control is focused
-         */
-        this.focused = false;
-        /**
-         * Frame counter, increments every frame
-         */
-        this.frame = 0;
         /**
          * Contains a list of current keys pressed
          */
@@ -36,7 +28,17 @@ var Canvas = /** @class */ (function () {
          * 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) {
@@ -50,6 +52,7 @@ var Canvas = /** @class */ (function () {
         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;
@@ -58,20 +61,9 @@ var Canvas = /** @class */ (function () {
         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';
-        // Initialize main sequence
-        if (this.config.framesPerSecond > 0) {
-            setInterval(function () {
-                if (!_this.focused) {
-                    return;
-                }
-                _this.frame++;
-                _this.log(_this.frame);
-                _this.config.loop(_this.frame, _this.keys, _this.mouseButtons, _this.mouseX, _this.mouseY);
-            }, 1000 / this.config.framesPerSecond);
-        }
         // Event listeners
         canvas.addEventListener('mousemove', function (e) {
-            if (!_this.focused) {
+            if (!_this.isFocused()) {
                 return;
             }
             _this.mouseX = (e.offsetX / _this.config.scale) | 0;
@@ -80,7 +72,7 @@ var Canvas = /** @class */ (function () {
             _this.config.mousemove(_this.mouseX, _this.mouseY);
         });
         canvas.addEventListener('keydown', function (e) {
-            if (!_this.focused) {
+            if (!_this.isFocused()) {
                 return;
             }
             e.preventDefault();
@@ -92,7 +84,7 @@ var Canvas = /** @class */ (function () {
             }
         });
         canvas.addEventListener('keyup', function (e) {
-            if (!_this.focused) {
+            if (!_this.isFocused()) {
                 return;
             }
             var key = e.key.toLowerCase();
@@ -104,7 +96,7 @@ var Canvas = /** @class */ (function () {
             }
         });
         canvas.addEventListener('mousedown', function (e) {
-            if (!_this.focused) {
+            if (!_this.isFocused()) {
                 return;
             }
             var button = e.button;
@@ -115,7 +107,7 @@ var Canvas = /** @class */ (function () {
             }
         });
         canvas.addEventListener('mouseup', function (e) {
-            if (!_this.focused) {
+            if (!_this.isFocused()) {
                 return;
             }
             var button = e.button;
@@ -127,19 +119,55 @@ var Canvas = /** @class */ (function () {
             }
         });
         canvas.addEventListener('focusin', function (e) {
-            _this.focused = true;
             canvas.style.borderColor = _this.config.border;
-            _this.log(e.type, _this.focused);
+            _this.log(e.type);
+            _this.animation = requestAnimationFrame(function (time) { return _this.startAnimate(time); });
         });
         canvas.addEventListener('focusout', function (e) {
-            _this.focused = false;
             canvas.style.borderColor = _this.config.borderBlur;
-            _this.log(e.type, _this.focused);
+            _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
@@ -156,6 +184,50 @@ var Canvas = /** @class */ (function () {
     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
@@ -206,7 +278,6 @@ var Canvas = /** @class */ (function () {
         border: 'transparent',
         borderBlur: 'transparent',
         showMouse: true,
-        framesPerSecond: 60,
         keydown: function () { return; },
         keyup: function () { return; },
         mousemove: function () { return; },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphico",
-  "version": "0.0.2",
+  "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

@@ -14,14 +14,6 @@ export declare class Canvas {
      * Can be used to render 2D graphics onto the canvas
      */
     private readonly graphics;
-    /**
-     * Whether or not the control is focused
-     */
-    private focused;
-    /**
-     * Frame counter, increments every frame
-     */
-    private frame;
     /**
      * Contains a list of current keys pressed
      */
@@ -30,6 +22,14 @@ export declare class Canvas {
      * 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
      */
@@ -38,11 +38,31 @@ export declare class Canvas {
      * 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
@@ -55,6 +75,29 @@ export declare class Canvas {
      * @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
@@ -113,10 +156,6 @@ export interface Options {
      * Optionally show or hide the mouse when hovering over the canvas
      */
     readonly showMouse: boolean;
-    /**
-     * The number of frames to render every second
-     */
-    readonly framesPerSecond: number;
     /**
      * Event listener for when a key is pressed
      * @param key The key that was pressed
@@ -144,16 +183,11 @@ export interface Options {
      */
     readonly mouseup: (button: number) => void;
     /**
-     * Event listener for a the main loop, only called when:
-     * - `framesPerSecond` > 0
-     * - The canvas is focused
-     * @param frame The frame sequence number
-     * @param keys A list of keys that are currently pressed
-     * @param mouseButtons A list of buttons that are currently pressed
-     * @param x Cursor X-coordinate
-     * @param y Cursor Y-coordinate
+     * 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: (frame: number, keys: string[], mouseButtons: number[], x: number, y: number) => void;
+    readonly loop: (dt: number) => Drawable[] | (void | never);
 }
 /**
  * Represents an object that can be drawn on the canvas.