graphico 1.2.0 → 1.3.0

package/dist/canvas.js

@@ -1,79 +1,117 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Canvas = void 0;
 /**
  * Represents a canvas for drawing and animating
  */
-var Canvas = /** @class */ (function () {
+export class Canvas {
+    /**
+     * Default canvas options
+     */
+    static defaults = {
+        debug: false,
+        parent: document.body,
+        width: 600,
+        height: 400,
+        scale: 1,
+        background: 'white',
+        border: 'transparent',
+        borderBlur: 'transparent',
+        showMouse: true,
+        keepFocused: false,
+        numLayers: 1,
+        numTracks: 1,
+        keydown() { return; },
+        keyup() { return; },
+        mousemove() { return; },
+        mousedown() { return; },
+        mouseup() { return; },
+        loop() { return; },
+    };
+    /**
+     * Configuration options for this canvas
+     */
+    config;
+    /**
+     * Used to render 2D objects onto the main canvas
+     */
+    graphic;
+    /**
+     * Can be used to render 2D graphics onto layers of the canvas
+     */
+    layers = [];
+    /**
+     * Contains a list of current keys pressed
+     */
+    keys = [];
+    /**
+     * Contains a list of current mouse buttons pressed
+     */
+    mouseButtons = [];
+    /**
+     * The width of the canvas, in pixels
+     */
+    width;
+    /**
+     * The height of the canvas, in pixels
+     */
+    height;
+    /**
+     * Contains the mouse X-coordinate, in pixels
+     */
+    mouseX = 0;
+    /**
+     * Contains the mouse Y-coordinate, in pixels
+     */
+    mouseY = 0;
+    /**
+     * Represents the animation ID handle to cancel the animation
+     */
+    animation = 0;
+    /**
+     * The last frame's high resolution timestamp
+     */
+    lastFrame = 0;
+    /**
+     * Determine whether the client is focused or not
+     */
+    focused = false;
+    /**
+     * Determine whether the user has interacted with this canvas
+     */
+    interacted = false;
+    /**
+     * The media recording object for screen captures
+     */
+    recorder;
+    /**
+     * Determine whether audio is allowed or muted
+     */
+    muted = false;
+    /**
+     * Contains the list of all active audio elements
+     */
+    audios = [];
     /**
      * Create a new canvas with the provided options
      * @param options Configuration options
      */
-    function Canvas(options) {
-        if (options === void 0) { options = {}; }
-        var _this = this;
-        /**
-         * Can be used to render 2D graphics onto layers of the canvas
-         */
-        this.layers = [];
-        /**
-         * 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;
-        /**
-         * Determine whether the client is focused or not
-         */
-        this.focused = false;
-        /**
-         * Determine whether the user has interacted with this canvas
-         */
-        this.interacted = false;
-        /**
-         * Determine whether audio is allowed or muted
-         */
-        this.muted = false;
-        /**
-         * Contains the list of all active audio elements
-         */
-        this.audios = [];
+    constructor(options = {}) {
         this.config = Canvas.setDefaults(options, Canvas.defaults);
         this.width = this.config.width;
         this.height = this.config.height;
         // Create the main <canvas> element and set properties
-        var main = document.createElement('canvas');
+        const main = document.createElement('canvas');
         main.tabIndex = 1; // For element focus
         main.style.outline = 'none';
         main.style.imageRendering = 'pixelated';
         main.width = this.config.width;
         main.height = this.config.height;
-        main.style.width = "".concat(this.config.width * this.config.scale, "px");
-        main.style.height = "".concat(this.config.height * this.config.scale, "px");
-        main.style.border = "".concat(this.config.scale, "px solid ").concat(this.config.border);
+        main.style.width = `${this.config.width * this.config.scale}px`;
+        main.style.height = `${this.config.height * this.config.scale}px`;
+        main.style.border = `${this.config.scale}px solid ${this.config.border}`;
         main.style.cursor = this.config.showMouse ? 'default' : 'none';
         main.style.boxSizing = 'content-box';
         this.config.parent.appendChild(main);
         // Create main canvas graphics object
-        var graphics = main.getContext('2d');
+        const graphics = main.getContext('2d');
         if (graphics) {
             this.graphic = graphics;
         }
@@ -82,9 +120,9 @@ var Canvas = /** @class */ (function () {
         }
         graphics.imageSmoothingEnabled = false;
         // Create canvas layers
-        for (var i = 0; i < this.config.numLayers; i++) {
-            var canvas = document.createElement('canvas');
-            var layer = canvas.getContext('2d');
+        for (let i = 0; i < this.config.numLayers; i++) {
+            const canvas = document.createElement('canvas');
+            const layer = canvas.getContext('2d');
             if (layer) {
                 this.layers.push(layer);
             }
@@ -98,124 +136,123 @@ var Canvas = /** @class */ (function () {
             layer.imageSmoothingEnabled = false;
         }
         // Event listeners
-        main.addEventListener('mousemove', function (e) {
-            if (!_this.focused) {
+        main.addEventListener('mousemove', e => {
+            if (!this.focused) {
                 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);
+            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);
         });
-        main.addEventListener('keydown', function (e) {
+        main.addEventListener('keydown', e => {
             audioContext.resume();
-            _this.interacted = true;
-            if (!_this.focused) {
+            this.interacted = true;
+            if (!this.focused) {
                 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);
+            const key = e.key.toLowerCase();
+            this.log(e.type, this.keys);
+            if (!this.keys.includes(key)) {
+                this.keys.push(key);
+                this.config.keydown(key);
             }
         });
-        main.addEventListener('keyup', function (e) {
-            if (!_this.focused) {
+        main.addEventListener('keyup', e => {
+            if (!this.focused) {
                 return;
             }
-            var key = e.key.toLowerCase();
-            var index = _this.keys.indexOf(key);
-            _this.log(e.type, _this.keys);
+            const key = e.key.toLowerCase();
+            const index = this.keys.indexOf(key);
+            this.log(e.type, this.keys);
             if (index >= 0) {
-                _this.keys.splice(index, 1);
-                _this.config.keyup(key);
+                this.keys.splice(index, 1);
+                this.config.keyup(key);
             }
         });
-        main.addEventListener('mousedown', function (e) {
+        main.addEventListener('mousedown', e => {
             audioContext.resume();
-            _this.interacted = true;
-            if (!_this.focused) {
+            this.interacted = true;
+            if (!this.focused) {
                 return;
             }
-            var button = e.button;
-            _this.log(e.type, _this.mouseButtons);
-            if (!_this.mouseButtons.includes(button)) {
-                _this.mouseButtons.push(button);
-                _this.config.mousedown(button);
+            const button = e.button;
+            this.log(e.type, this.mouseButtons);
+            if (!this.mouseButtons.includes(button)) {
+                this.mouseButtons.push(button);
+                this.config.mousedown(button);
             }
         });
-        main.addEventListener('mouseup', function (e) {
-            if (!_this.focused) {
+        main.addEventListener('mouseup', e => {
+            if (!this.focused) {
                 return;
             }
-            var button = e.button;
-            var index = _this.mouseButtons.indexOf(button);
-            _this.log(e.type, _this.mouseButtons);
+            const button = e.button;
+            const index = this.mouseButtons.indexOf(button);
+            this.log(e.type, this.mouseButtons);
             if (index >= 0) {
-                _this.mouseButtons.splice(index, 1);
-                _this.config.mouseup(button);
+                this.mouseButtons.splice(index, 1);
+                this.config.mouseup(button);
             }
         });
-        main.addEventListener('focusin', function (e) {
-            _this.focused = true;
-            main.style.borderColor = _this.config.border;
-            _this.log(e.type, _this.focused);
-            _this.animation = requestAnimationFrame(function (time) { return _this.startAnimate(time); });
+        main.addEventListener('focusin', e => {
+            this.focused = true;
+            main.style.borderColor = this.config.border;
+            this.log(e.type, this.focused);
+            this.animation = requestAnimationFrame(time => this.startAnimate(time));
         });
-        main.addEventListener('focusout', function (e) {
-            if (_this.config.keepFocused) {
+        main.addEventListener('focusout', e => {
+            if (this.config.keepFocused) {
                 main.focus();
             }
             else {
-                _this.focused = false;
-                main.style.borderColor = _this.config.borderBlur;
-                _this.log(e.type, _this.focused);
-                cancelAnimationFrame(_this.animation);
+                this.focused = false;
+                main.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);
+        window.addEventListener('blur', e => {
+            this.log(e.type);
+            cancelAnimationFrame(this.animation);
         });
-        main.addEventListener('contextmenu', function (e) { return e.preventDefault(); });
+        main.addEventListener('contextmenu', e => e.preventDefault());
         // Initialize audio tracks for recording
-        var stream = new MediaStream(main.captureStream()); // video stream
-        var audioContext = new window.AudioContext();
-        for (var track = 0; track < this.config.numTracks; track++) {
-            var audio = new Audio();
-            var source = audioContext.createMediaElementSource(audio);
-            var destination = audioContext.createMediaStreamDestination();
+        const stream = new MediaStream(main.captureStream()); // video stream
+        const audioContext = new window.AudioContext();
+        for (let track = 0; track < this.config.numTracks; track++) {
+            const audio = new Audio();
+            const source = audioContext.createMediaElementSource(audio);
+            const destination = audioContext.createMediaStreamDestination();
             source.connect(destination); // contains the audio stream for recording
             source.connect(audioContext.destination); // so the user can hear
             this.audios.push(audio);
-            for (var _i = 0, _a = destination.stream.getAudioTracks(); _i < _a.length; _i++) {
-                var audioTrack = _a[_i];
-                this.log("Adding ".concat(audioTrack.id, " to track ").concat(track, "."));
+            for (const audioTrack of destination.stream.getAudioTracks()) {
+                this.log(`Adding ${audioTrack.id} to track ${track}.`);
                 stream.addTrack(audioTrack); // add audio track
             }
         }
         // Initialize the media recorder
-        var recordPart = [];
+        const recordPart = [];
         this.recorder = new MediaRecorder(stream);
-        this.recorder.addEventListener('dataavailable', function (e) {
-            _this.log(e.type);
+        this.recorder.addEventListener('dataavailable', e => {
+            this.log(e.type);
             recordPart.push(e.data);
         });
-        this.recorder.addEventListener('stop', function (e) {
-            _this.log(e.type);
-            var recording = new Blob(recordPart, { type: 'video/webm;codecs=h264' });
-            var url = URL.createObjectURL(recording);
-            var downloadLink = document.createElement('a');
+        this.recorder.addEventListener('stop', e => {
+            this.log(e.type);
+            const recording = new Blob(recordPart, { type: 'video/webm;codecs=h264' });
+            const url = URL.createObjectURL(recording);
+            const downloadLink = document.createElement('a');
             downloadLink.setAttribute('href', url);
-            downloadLink.setAttribute('download', "recording-".concat(Date.now()));
+            downloadLink.setAttribute('download', `recording-${Date.now()}`);
             downloadLink.click();
             // Clear out the existing blob parts for recording a new capture
             recordPart.splice(0);
             // Remove all keys and mouse buttons down because we lose focus
-            _this.keys.splice(0);
-            _this.mouseButtons.splice(0);
+            this.keys.splice(0);
+            this.mouseButtons.splice(0);
         });
         // Focus on the canvas
         main.focus();
@@ -223,91 +260,87 @@ var Canvas = /** @class */ (function () {
     /**
      * Start the animation.
      */
-    Canvas.prototype.startAnimate = function (time) {
-        var _this = this;
+    startAnimate(time) {
         this.log('startAnimate', time);
         this.lastFrame = time;
-        this.animation = requestAnimationFrame(function (time) { return _this.animate(time); });
-    };
+        this.animation = requestAnimationFrame(time => this.animate(time));
+    }
     /**
      * Run the main animation loop.
      */
-    Canvas.prototype.animate = function (time) {
-        var _this = this;
-        var currentFrame = time;
-        var dt = currentFrame - this.lastFrame;
+    animate(time) {
+        const currentFrame = time;
+        const dt = currentFrame - this.lastFrame;
         this.lastFrame = currentFrame;
         this.config.loop(dt);
         // Draw all the layers onto the main canvas
         this.graphic.fillStyle = this.config.background;
         this.graphic.fillRect(0, 0, this.width, this.height);
-        for (var _i = 0, _a = this.layers; _i < _a.length; _i++) {
-            var layer = _a[_i];
+        for (const layer of this.layers) {
             this.graphic.drawImage(layer.canvas, 0, 0);
         }
-        this.animation = requestAnimationFrame(function (time) { return _this.animate(time); });
-    };
+        this.animation = requestAnimationFrame(time => 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) {
+    isKeyDown(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) {
+    isMouseButtonDown(button) {
         return this.mouseButtons.includes(button);
-    };
+    }
     /**
      * Get the current cursor position.
      * @returns Cursor position as `[x, y]`
      */
-    Canvas.prototype.getMousePosition = function () {
+    getMousePosition() {
         return [this.mouseX, this.mouseY];
-    };
+    }
     /**
      * 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 (name) {
-        if (name === void 0) { name = 'screenshot'; }
+    screenshot(name = 'screenshot') {
         // Generate a data URL and set it as the download parameter for <a>
-        var dataURL = this.graphic.canvas.toDataURL();
-        var downloadLink = document.createElement('a');
+        const dataURL = this.graphic.canvas.toDataURL();
+        const downloadLink = document.createElement('a');
         downloadLink.setAttribute('href', dataURL);
         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);
-    };
+    }
     /**
      * Start recording all layers on the canvas
      */
-    Canvas.prototype.startRecording = function () {
+    startRecording() {
         if (!this.interacted) {
             throw new Error('The user has not yet interacted with this canvas.');
         }
         this.recorder.start();
-    };
+    }
     /**
      * Stop recording and download screen capture
      */
-    Canvas.prototype.stopRecording = function () {
+    stopRecording() {
         this.recorder.stop();
-    };
+    }
     /**
      * Determines whether the media recorder is active
      * @returns True if currently recording
      */
-    Canvas.prototype.isRecording = function () {
+    isRecording() {
         return this.recorder.state === 'recording';
-    };
+    }
     /**
      * Play an audio file
      * @param src The path of the audio file
@@ -315,221 +348,161 @@ var Canvas = /** @class */ (function () {
      * @param volume The normalized [0-1] volume
      * @param track The track number to play on
      */
-    Canvas.prototype.playAudio = function (src, loop, volume, track) {
-        if (loop === void 0) { loop = false; }
-        if (volume === void 0) { volume = 1; }
-        if (track === void 0) { track = 0; }
-        this.log("Playing audio on track ".concat(track, "."));
+    playAudio(src, loop = false, volume = 1, track = 0) {
+        this.log(`Playing audio on track ${track}.`);
         if (!this.interacted) {
             throw new Error('The user has not yet interacted with this canvas.');
         }
         if (track < 0 || track >= this.config.numTracks) {
-            throw new Error("Track ".concat(track, " is out of range. [0,").concat(this.config.numTracks, ")"));
+            throw new Error(`Track ${track} is out of range. [0,${this.config.numTracks})`);
         }
-        var audio = this.audios[track];
+        const audio = this.audios[track];
         audio.src = src;
         audio.loop = loop;
         audio.volume = volume;
         audio.muted = this.muted;
         audio.play();
-    };
+    }
     /**
      * Stop all audio tracks from playing
      */
-    Canvas.prototype.stopAudio = function (track) {
-        if (track === void 0) { track = -1; }
-        this.log("Stopping audio on track ".concat(track, "."));
+    stopAudio(track = -1) {
+        this.log(`Stopping audio on track ${track}.`);
         if (track >= this.config.numTracks) {
-            throw new Error("Track ".concat(track, " is out of range. [0,").concat(this.config.numTracks, ")"));
+            throw new Error(`Track ${track} is out of range. [0,${this.config.numTracks})`);
         }
         if (track < 0) {
-            for (var _i = 0, _a = this.audios; _i < _a.length; _i++) {
-                var audio = _a[_i];
+            for (const audio of this.audios) {
                 audio.pause();
             }
         }
         else {
             this.audios[track].pause();
         }
-    };
+    }
     /**
      * Mute all audio
      */
-    Canvas.prototype.mute = function () {
+    mute() {
         this.muted = true;
-        for (var _i = 0, _a = this.audios; _i < _a.length; _i++) {
-            var audio = _a[_i];
+        for (const audio of this.audios) {
             audio.muted = this.muted;
         }
-    };
+    }
     /**
      * Unmute all audio
      */
-    Canvas.prototype.unmute = function () {
+    unmute() {
         this.muted = false;
-        for (var _i = 0, _a = this.audios; _i < _a.length; _i++) {
-            var audio = _a[_i];
+        for (const audio of this.audios) {
             audio.muted = this.muted;
         }
-    };
+    }
     /**
      * Determines whether audio is muted
      * @returns True if currently muted
      */
-    Canvas.prototype.isMuted = function () {
+    isMuted() {
         return this.muted;
-    };
+    }
     /**
      * 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, layer) {
-        if (layer === void 0) { layer = 0; }
+    draw(drawable, layer = 0) {
         if (layer < 0 || layer >= this.config.numLayers) {
-            throw new Error("Layer ".concat(layer, " is out of range. [0,").concat(this.config.numLayers, ")"));
+            throw new Error(`Layer ${layer} is out of range. [0,${this.config.numLayers})`);
         }
         drawable.draw(this.layers[layer]);
-    };
+    }
     /**
      * Completely clears the canvas.
      * @param layer The zero-indexed layer to clear, if unset, will clear all layers
      */
-    Canvas.prototype.clear = function (layer) {
-        if (layer === void 0) { layer = -1; }
+    clear(layer = -1) {
         if (layer >= this.config.numLayers) {
-            throw new Error("Layer ".concat(layer, " is out of range. [0,").concat(this.config.numLayers, ")"));
+            throw new Error(`Layer ${layer} is out of range. [0,${this.config.numLayers})`);
         }
         if (layer < 0) {
-            for (var _i = 0, _a = this.layers; _i < _a.length; _i++) {
-                var layer_1 = _a[_i];
-                layer_1.clearRect(0, 0, this.config.width, this.config.height);
+            for (const layer of this.layers) {
+                layer.clearRect(0, 0, this.config.width, this.config.height);
             }
         }
         else {
             this.layers[layer].clearRect(0, 0, this.config.width, this.config.height);
         }
-    };
+    }
     /**
      * Save arbitrary data to the browser storage.
      * **Warning:** This will overwrite any existing data under these object keys.
      * @param data The arbirary data object to save
      * @param name An optional "namespace" to store the data, which can be assigned when a user has multiple profiles, for example
      */
-    Canvas.prototype.saveData = function (data, name) {
-        if (name === void 0) { name = 'data'; }
-        for (var rawkey in data) {
-            var rawval = data[rawkey];
-            var key = this.encode([name, rawkey]);
-            var value = this.encode([rawval, typeof rawval]);
-            localStorage.setItem(key, value);
-            this.log("Saved \"".concat(name, ".").concat(rawkey, "\" = \"").concat(rawval, ".").concat(typeof rawval, "\" as \"").concat(key, "\" = \"").concat(value, "\"."));
-        }
-    };
+    saveData(data, name = 'data') {
+        const key = this.encode(name);
+        const value = this.encode(data);
+        localStorage.setItem(key, value);
+        this.log(`Saved "${data}" in ${name}.`);
+    }
     /**
      * Load arbitrary data from the browser storage.
      * **Warning:** The loaded data object is not strictly type-checked or sanitized, so it may have missing fields or contain extra fields. It's good practice to manually validate the data once it's loaded from storage.
      * @param name An optional "namespace" to load data from, assigned when saving data
      * @returns The data object loaded from browser storage
      */
-    Canvas.prototype.loadData = function (name) {
-        var _a;
-        if (name === void 0) { name = 'data'; }
-        var loaded = {};
-        for (var _i = 0, _b = Object.keys(localStorage); _i < _b.length; _i++) {
-            var key = _b[_i];
+    loadData(name = 'data') {
+        const key = this.encode(name);
+        const value = localStorage.getItem(key);
+        if (value) {
             try {
-                var decodedKey = this.decode(key);
-                var decodedVal = this.decode((_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : '');
-                if (decodedKey[0] === name && decodedKey.length >= 2 && decodedVal.length >= 1) {
-                    loaded[decodedKey[1]] = decodedVal[0];
-                    this.log("Loaded \"".concat(decodedKey.join('.'), "\" = \"").concat(decodedVal.join('.'), "\" from \"").concat(key, "\""));
-                }
+                const decoded = this.decode(value);
+                this.log(`Loaded "${decoded}" from ${name}.`);
+                return decoded;
             }
-            catch (_c) {
-                this.log("Skipping \"".concat(key, "\"..."));
+            catch {
+                this.log(`Failed to load ${name}.`);
             }
         }
-        return loaded;
-    };
+        return undefined;
+    }
     /**
      * Clear **all** saved data. This action is permanent!
      * @param name An optional "namespace" to clear data from.
      */
-    Canvas.prototype.clearData = function (name) {
-        if (name === void 0) { name = 'data'; }
-        for (var _i = 0, _a = Object.keys(localStorage); _i < _a.length; _i++) {
-            var key = _a[_i];
-            try {
-                if (this.decode(key)[0] === name) {
-                    localStorage.removeItem(key);
-                    this.log("Removed ".concat(key, " from storage."));
-                }
-            }
-            catch (_b) {
-                this.log("Skipping \"".concat(key, "\"..."));
-            }
-        }
-    };
+    clearData(name = 'data') {
+        const key = this.encode(name);
+        localStorage.removeItem(key);
+        this.log(`Removed ${name} from storage.`);
+    }
     /**
      * Encode data for local browser storage.
      */
-    Canvas.prototype.encode = function (raw) {
-        return raw.map(function (item) { return btoa(encodeURIComponent(JSON.stringify(item))); }).join('.');
-    };
+    encode(raw) {
+        return btoa(encodeURIComponent(JSON.stringify(raw)));
+    }
     /**
      * Decode data from local browser storage.
      */
-    Canvas.prototype.decode = function (code) {
-        return code.split('.').map(function (item) { return JSON.parse(decodeURIComponent(atob(item))); });
-    };
+    decode(code) {
+        return JSON.parse(decodeURIComponent(atob(code)));
+    }
     /**
      * 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];
-        }
+    log(...x) {
         if (this.config.debug) {
-            console.log.apply(console, x);
+            console.log(...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];
+    static setDefaults(options, defaults) {
+        const copy = {};
+        for (const key of Object.keys(defaults)) {
+            copy[key] = options[key] ?? defaults[key];
         }
         return copy;
-    };
-    /**
-     * Default canvas options
-     */
-    Canvas.defaults = {
-        debug: false,
-        parent: document.body,
-        width: 600,
-        height: 400,
-        scale: 1,
-        background: 'white',
-        border: 'transparent',
-        borderBlur: 'transparent',
-        showMouse: true,
-        keepFocused: false,
-        numLayers: 1,
-        numTracks: 1,
-        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,19 +1,3 @@
-"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 });
 /**
  * @packageDocumentation
  * Canvas 2D rendering toolkit for games and visual projects
@@ -21,5 +5,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * ![NPM Downloads](https://img.shields.io/npm/d18m/graphico)
  * ![NPM Last Update](https://img.shields.io/npm/last-update/graphico)
  */
-__exportStar(require("./canvas"), exports);
-__exportStar(require("./types"), exports);
+export * from './canvas.js';
+export * from './types.js';

package/dist/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "graphico",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Canvas 2D rendering toolkit for games and visual projects",
   "homepage": "https://npm.nicfv.com/",
+  "type": "module",
   "bin": "",
   "main": "dist/index.js",
   "types": "types/index.d.ts",
@@ -42,6 +43,6 @@
   "repository": "github:nicfv/npm",
   "license": "MIT",
   "devDependencies": {
-    "t6": "1.2.1"
+    "t6": "1.3.0"
   }
 }

package/types/canvas.d.ts

@@ -1,4 +1,4 @@
-import { Drawable, Options, StoreData } from '.';
+import { Drawable, Options } from './index.js';
 /**
  * Represents a canvas for drawing and animating
  */
@@ -161,14 +161,14 @@ export declare class Canvas {
      * @param data The arbirary data object to save
      * @param name An optional "namespace" to store the data, which can be assigned when a user has multiple profiles, for example
      */
-    saveData<T extends StoreData>(data: T, name?: string): void;
+    saveData<T>(data: T, name?: string): void;
     /**
      * Load arbitrary data from the browser storage.
      * **Warning:** The loaded data object is not strictly type-checked or sanitized, so it may have missing fields or contain extra fields. It's good practice to manually validate the data once it's loaded from storage.
      * @param name An optional "namespace" to load data from, assigned when saving data
      * @returns The data object loaded from browser storage
      */
-    loadData<T extends StoreData>(name?: string): Partial<T>;
+    loadData<T>(name?: string): Partial<T> | undefined;
     /**
      * Clear **all** saved data. This action is permanent!
      * @param name An optional "namespace" to clear data from.

package/types/index.d.ts

@@ -5,5 +5,5 @@
  * ![NPM Downloads](https://img.shields.io/npm/d18m/graphico)
  * ![NPM Last Update](https://img.shields.io/npm/last-update/graphico)
  */
-export * from './canvas';
-export * from './types';
+export * from './canvas.js';
+export * from './types.js';

package/types/types.d.ts

@@ -93,7 +93,3 @@ export interface Drawable {
      */
     draw(graphics: CanvasRenderingContext2D): void;
 }
-/**
- * An arbitrary object which can be saved or loaded from browser storage.
- */
-export type StoreData = Record<string, unknown>;