graphico 0.0.3 → 0.0.4

package/dist/canvas.js

@@ -12,6 +12,10 @@ var Canvas = /** @class */ (function () {
     function Canvas(options) {
         if (options === void 0) { options = {}; }
         var _this = this;
+        /**
+         * Can be used to render 2D graphics onto the canvas
+         */
+        this.graphics = [];
         /**
          * Contains a list of current keys pressed
          */
@@ -36,34 +40,48 @@ var Canvas = /** @class */ (function () {
          * The last frame's high resolution timestamp
          */
         this.lastFrame = 0;
+        /**
+         * Determine whether the client is focused or not
+         */
+        this.focused = false;
         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.');
+        // Create the container <div> element and set properties
+        var container = document.createElement('div');
+        container.tabIndex = 1; // For element focus
+        container.style.outline = 'none';
+        container.style.width = "".concat(this.config.width * this.config.scale, "px");
+        container.style.height = "".concat(this.config.height * this.config.scale, "px");
+        container.style.border = "".concat(this.config.scale, "px solid ").concat(this.config.border);
+        container.style.background = this.config.background;
+        container.style.cursor = this.config.showMouse ? 'default' : 'none';
+        container.style.position = 'relative';
+        this.config.parent.appendChild(container);
+        // Create canvas layers
+        for (var i = 0; i < this.config.numLayers; i++) {
+            var canvas = document.createElement('canvas');
+            var graphics = canvas.getContext('2d', { 'willReadFrequently': this.config.acceleration === 'software' });
+            if (graphics) {
+                this.graphics.push(graphics);
+            }
+            else {
+                throw new Error('Could not initialize canvas graphics.');
+            }
+            // Set properties for canvas
+            canvas.style.imageRendering = 'pixelated';
+            canvas.style.boxSizing = 'border-box';
+            canvas.width = this.config.width;
+            canvas.height = this.config.height;
+            canvas.style.width = '100%';
+            canvas.style.height = '100%';
+            canvas.style.position = 'absolute';
+            graphics.imageSmoothingEnabled = false;
+            container.appendChild(canvas);
         }
-        // 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()) {
+        container.addEventListener('mousemove', function (e) {
+            if (!_this.focused) {
                 return;
             }
             _this.mouseX = (e.offsetX / _this.config.scale) | 0;
@@ -71,8 +89,8 @@ var Canvas = /** @class */ (function () {
             _this.log(e.type, _this.mouseX, _this.mouseY);
             _this.config.mousemove(_this.mouseX, _this.mouseY);
         });
-        canvas.addEventListener('keydown', function (e) {
-            if (!_this.isFocused()) {
+        container.addEventListener('keydown', function (e) {
+            if (!_this.focused) {
                 return;
             }
             e.preventDefault();
@@ -83,8 +101,8 @@ var Canvas = /** @class */ (function () {
                 _this.config.keydown(key);
             }
         });
-        canvas.addEventListener('keyup', function (e) {
-            if (!_this.isFocused()) {
+        container.addEventListener('keyup', function (e) {
+            if (!_this.focused) {
                 return;
             }
             var key = e.key.toLowerCase();
@@ -95,8 +113,8 @@ var Canvas = /** @class */ (function () {
                 _this.config.keyup(key);
             }
         });
-        canvas.addEventListener('mousedown', function (e) {
-            if (!_this.isFocused()) {
+        container.addEventListener('mousedown', function (e) {
+            if (!_this.focused) {
                 return;
             }
             var button = e.button;
@@ -106,8 +124,8 @@ var Canvas = /** @class */ (function () {
                 _this.config.mousedown(button);
             }
         });
-        canvas.addEventListener('mouseup', function (e) {
-            if (!_this.isFocused()) {
+        container.addEventListener('mouseup', function (e) {
+            if (!_this.focused) {
                 return;
             }
             var button = e.button;
@@ -118,30 +136,26 @@ var Canvas = /** @class */ (function () {
                 _this.config.mouseup(button);
             }
         });
-        canvas.addEventListener('focusin', function (e) {
-            canvas.style.borderColor = _this.config.border;
-            _this.log(e.type);
+        container.addEventListener('focusin', function (e) {
+            _this.focused = true;
+            container.style.borderColor = _this.config.border;
+            _this.log(e.type, _this.focused);
             _this.animation = requestAnimationFrame(function (time) { return _this.startAnimate(time); });
         });
-        canvas.addEventListener('focusout', function (e) {
-            canvas.style.borderColor = _this.config.borderBlur;
-            _this.log(e.type);
+        container.addEventListener('focusout', function (e) {
+            _this.focused = false;
+            container.style.borderColor = _this.config.borderBlur;
+            _this.log(e.type, _this.focused);
             cancelAnimationFrame(_this.animation);
         });
         window.addEventListener('blur', function (e) {
             _this.log(e.type);
             cancelAnimationFrame(_this.animation);
         });
-        canvas.addEventListener('contextmenu', function (e) { return e.preventDefault(); });
+        container.addEventListener('contextmenu', function (e) { return e.preventDefault(); });
         // Focus on the canvas
-        canvas.focus();
+        container.focus();
     }
-    /**
-     * Determine if the canvas is currently focused.
-     */
-    Canvas.prototype.isFocused = function () {
-        return this.graphics.canvas === document.activeElement;
-    };
     /**
      * Start the animation.
      */
@@ -195,11 +209,13 @@ var Canvas = /** @class */ (function () {
      * Get the color of the selected pixel.
      * @param x The pixel's x-coordinate
      * @param y The pixel's y-coordinate
+     * @param layer The zero-indexed layer to get data from
      * @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));
+    Canvas.prototype.getPixel = function (x, y, layer) {
+        if (layer === void 0) { layer = 0; }
+        var data = this.graphics[layer].getImageData(x, y, 1, 1).data;
+        this.log(this.graphics[layer].getImageData(x, y, 2, 2));
         ;
         return [data[0], data[1], data[2], data[3]];
     };
@@ -208,38 +224,72 @@ var Canvas = /** @class */ (function () {
      * @param x The pixel's x-coordinate
      * @param y The pixel's y-coordinate
      * @param color `[red, green, blue, alpha]`
+     * @param layer The zero-indexed layer to set data to
      */
-    Canvas.prototype.setPixel = function (x, y, color) {
-        var data = this.graphics.getImageData(x, y, 1, 1);
+    Canvas.prototype.setPixel = function (x, y, color, layer) {
+        if (layer === void 0) { layer = 0; }
+        var data = this.graphics[layer].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);
+        this.log(data);
+        this.graphics[layer].putImageData(data, x, y);
     };
     /**
      * Take a screenshot of the canvas contents and save to a .png file.
+     * @param name The file name of the screenshot
      */
-    Canvas.prototype.screenshot = function () {
-        var dataURL = this.graphics.canvas.toDataURL();
+    Canvas.prototype.screenshot = function (name) {
+        if (name === void 0) { name = 'screenshot'; }
+        // Create an offscreen canvas
+        var screen = new Canvas({
+            parent: document.createElement('div'),
+            height: this.config.height,
+            width: this.config.width,
+            scale: this.config.scale,
+        });
+        // Draw the background and each layer
+        screen.graphics[0].fillStyle = this.config.background;
+        screen.graphics[0].fillRect(0, 0, screen.width, screen.height);
+        for (var _i = 0, _a = this.graphics; _i < _a.length; _i++) {
+            var graphic = _a[_i];
+            screen.graphics[0].drawImage(graphic.canvas, 0, 0);
+        }
+        // Generate a data URL and set it as the download parameter for <a>
+        var dataURL = screen.graphics[0].canvas.toDataURL();
         var downloadLink = document.createElement('a');
         downloadLink.setAttribute('href', dataURL);
-        downloadLink.setAttribute('download', 'screenshot');
+        downloadLink.setAttribute('download', name);
         downloadLink.click();
+        // Remove all keys and mouse buttons down because we lose focus
+        this.keys.splice(0);
+        this.mouseButtons.splice(0);
     };
     /**
      * Draw an object onto the canvas.
      * @param drawable Any drawable object
+     * @param layer The zero-indexed layer to draw to
      */
-    Canvas.prototype.draw = function (drawable) {
-        drawable.draw(this.graphics);
+    Canvas.prototype.draw = function (drawable, layer) {
+        if (layer === void 0) { layer = 0; }
+        drawable.draw(this.graphics[layer]);
     };
     /**
      * Completely clears the canvas.
+     * @param layer The zero-indexed layer to clear, if unset, will clear all layers
      */
-    Canvas.prototype.clear = function () {
-        this.graphics.clearRect(0, 0, this.config.width, this.config.height);
+    Canvas.prototype.clear = function (layer) {
+        if (layer === void 0) { layer = -1; }
+        if (layer < 0) {
+            for (var _i = 0, _a = this.graphics; _i < _a.length; _i++) {
+                var graphic = _a[_i];
+                graphic.clearRect(0, 0, this.config.width, this.config.height);
+            }
+        }
+        else {
+            this.graphics[layer].clearRect(0, 0, this.config.width, this.config.height);
+        }
     };
     /**
      * Log a message to the debug console.
@@ -278,6 +328,8 @@ var Canvas = /** @class */ (function () {
         border: 'transparent',
         borderBlur: 'transparent',
         showMouse: true,
+        numLayers: 1,
+        acceleration: 'hardware',
         keydown: function () { return; },
         keyup: function () { return; },
         mousemove: function () { return; },

package/package.json

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

package/types/canvas.d.ts

@@ -46,15 +46,15 @@ export declare class Canvas {
      * The last frame's high resolution timestamp
      */
     private lastFrame;
+    /**
+     * Determine whether the client is focused or not
+     */
+    private focused;
     /**
      * 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.
      */
@@ -84,29 +84,34 @@ export declare class Canvas {
      * Get the color of the selected pixel.
      * @param x The pixel's x-coordinate
      * @param y The pixel's y-coordinate
+     * @param layer The zero-indexed layer to get data from
      * @returns `[red, green, blue, alpha]`
      */
-    getPixel(x: number, y: number): [number, number, number, number];
+    getPixel(x: number, y: number, layer?: 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]`
+     * @param layer The zero-indexed layer to set data to
      */
-    setPixel(x: number, y: number, color: [number, number, number, number]): void;
+    setPixel(x: number, y: number, color: [number, number, number, number], layer?: number): void;
     /**
      * Take a screenshot of the canvas contents and save to a .png file.
+     * @param name The file name of the screenshot
      */
-    screenshot(): void;
+    screenshot(name?: string): void;
     /**
      * Draw an object onto the canvas.
      * @param drawable Any drawable object
+     * @param layer The zero-indexed layer to draw to
      */
-    draw(drawable: Drawable): void;
+    draw(drawable: Drawable, layer?: number): void;
     /**
      * Completely clears the canvas.
+     * @param layer The zero-indexed layer to clear, if unset, will clear all layers
      */
-    clear(): void;
+    clear(layer?: number): void;
     /**
      * Log a message to the debug console.
      */
@@ -156,6 +161,16 @@ export interface Options {
      * Optionally show or hide the mouse when hovering over the canvas
      */
     readonly showMouse: boolean;
+    /**
+     * The number of layers in this canvas
+     */
+    readonly numLayers: number;
+    /**
+     * Uses hardware (GPU) or software (CPU) acceleration
+     * - For pixel manipulation, software acceleration is recommended
+     * - Otherwise, hardware acceleration is recommended (default)
+     */
+    readonly acceleration: 'hardware' | 'software';
     /**
      * Event listener for when a key is pressed
      * @param key The key that was pressed
@@ -185,7 +200,7 @@ export interface Options {
     /**
      * 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
+     * @returns An array of `Drawable` to render on layer 0, or void
      */
     readonly loop: (dt: number) => Drawable[] | (void | never);
 }