graphico 1.1.1 → 1.2.0

package/README.md

@@ -13,6 +13,7 @@
 - **User interaction** captured via keyboard inputs or mouse movements or clicks
 - Multiple audio tracks supported by system **audio player** with volume, mute, and loop toggle
 - Built-in logic for **screenshots** and **screen recordings** that capture both video and audio
+- Secure and convenient **browser storage** that persists across browser and system restarts
 
 ## Caveats
 

package/dist/canvas.js

@@ -70,6 +70,7 @@ var Canvas = /** @class */ (function () {
         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.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');
@@ -409,6 +410,79 @@ var Canvas = /** @class */ (function () {
             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, "\"."));
+        }
+    };
+    /**
+     * 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];
+            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, "\""));
+                }
+            }
+            catch (_c) {
+                this.log("Skipping \"".concat(key, "\"..."));
+            }
+        }
+        return loaded;
+    };
+    /**
+     * 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, "\"..."));
+            }
+        }
+    };
+    /**
+     * Encode data for local browser storage.
+     */
+    Canvas.prototype.encode = function (raw) {
+        return raw.map(function (item) { return btoa(encodeURIComponent(JSON.stringify(item))); }).join('.');
+    };
+    /**
+     * Decode data from local browser storage.
+     */
+    Canvas.prototype.decode = function (code) {
+        return code.split('.').map(function (item) { return JSON.parse(decodeURIComponent(atob(item))); });
+    };
     /**
      * Log a message to the debug console.
      */

package/package.json

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

package/types/canvas.d.ts

@@ -1,4 +1,4 @@
-import { Drawable, Options } from '.';
+import { Drawable, Options, StoreData } from '.';
 /**
  * Represents a canvas for drawing and animating
  */
@@ -155,6 +155,33 @@ export declare class Canvas {
      * @param layer The zero-indexed layer to clear, if unset, will clear all layers
      */
     clear(layer?: number): void;
+    /**
+     * 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
+     */
+    saveData<T extends StoreData>(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>;
+    /**
+     * Clear **all** saved data. This action is permanent!
+     * @param name An optional "namespace" to clear data from.
+     */
+    clearData(name?: string): void;
+    /**
+     * Encode data for local browser storage.
+     */
+    private encode;
+    /**
+     * Decode data from local browser storage.
+     */
+    private decode;
     /**
      * Log a message to the debug console.
      */

package/types/types.d.ts

@@ -93,3 +93,7 @@ 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>;