@glyph-engine/web 0.0.0-stage → 0.1.0

package/dist/modules/camera.d.ts

@@ -0,0 +1,13 @@
+/**
+@module   camera
+@desc     Webcam init and helper
+@category public
+
+Initializes a user-facing camera,
+returns a video element (initialised asynchronously).
+*/
+declare const _default: {
+    init: typeof init;
+};
+export default _default;
+declare function init(callback?: (stream: MediaStream) => void): HTMLVideoElement;

package/dist/modules/canvas.d.ts

@@ -0,0 +1,65 @@
+/**
+@module   canvas
+@desc     A wrapper for a canvas element
+@category public
+
+A canvas 'wrapper' class.
+The purpose is to offer a ready to use buffer (a "pixel" array
+of {r, g, b, (a, v)} objects) of the same size of the ASCII context (or not)
+which can be read or sampled.
+Some convenience functions are provided.
+
+Resizes the canvas:
+- resize(w, h)
+
+Five main functions are implemented to copy a source (canvas, video, image)
+to the internal canvas:
+- image(source)  // resizes the canvas to the source image and copies it
+- copy(source, ...)
+- cover(source, ...)
+- fit(source, ...)
+- center(source, ...)
+
+A call to these functions will also update the internal 'pixels' array trough:
+- loadPixels()
+
+A few extra functions are provided to manipulate the array directly:
+- mirrorX()
+- normalize() // only v values
+- quantize()
+
+Finally the whole buffer can be copied to a destination trough:
+- writeTo()
+
+Or accessed with:
+- get(x, y)
+- sample(x, y)
+*/
+import { type RGB } from '@glyph-engine/core';
+type Source = HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
+export declare const MODE_COVER: unique symbol;
+export declare const MODE_FIT: unique symbol;
+export declare const MODE_CENTER: unique symbol;
+export default class Canvas {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    pixels: Array<RGB>;
+    constructor(sourceCanvas?: HTMLCanvasElement);
+    get width(): number;
+    get height(): number;
+    resize(dWidth: number, dHeight: number): this;
+    copy(source: Source, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): this;
+    image(source: Source): this;
+    cover(source: Source, aspect?: number): this;
+    fit(source: Source, aspect?: number): this;
+    center(source: Source, scaleX?: number, scaleY?: number): this;
+    mirrorX(): this;
+    normalize(): this;
+    quantize(palette: RGB[]): this;
+    get(x: number, y: number): RGB;
+    sample(sx: number, sy: number, gray?: boolean): number | RGB;
+    loadPixels(): this;
+    writeTo(buf: RGB[]): this;
+    display(target: HTMLElement, x?: number, y?: number): void;
+}
+export {};

package/dist/modules/exportframe.d.ts

@@ -0,0 +1,11 @@
+/**
+@module   exportframe
+@desc     Exports a single frame (or a range) to an image
+@category public
+
+Exports a frame as image.
+Expects the canvas renderer as the active renderer.
+Tested on Safari, FF, Chrome
+*/
+import type { Context } from '@glyph-engine/core';
+export declare function exportFrame(context: Context, filename: string, from?: number, to?: number): void;

package/dist/modules/filedownload.d.ts

@@ -0,0 +1,12 @@
+/**
+@module   filedownload
+@desc     Exports a file via Blob
+@category internal
+
+Downloads a Blob as file and this “hack”:
+creates an anchor with a “download” attribute
+and then emits a click event.
+See: https://github.com/tomast1337/FileSaver.ts
+*/
+export declare function saveSourceAsFile(src: string, filename: string): void;
+export declare function saveBlobAsFile(blob: Blob, filename: string): void;

package/dist/modules/image.d.ts

@@ -0,0 +1,22 @@
+/**
+@module   image
+@desc     Image loader and helper
+@category public
+
+Loads an image and draws it on a canvas.
+The returned object is a canvas wrapper and its methods (get, sample, etc.)
+can be used before the image has completely loaded.
+
+Usage:
+// Starts async loading:
+const img = Image.load('res/pattern.png')
+// Returns a black color until the image has been loaded:
+const color = img.get(10, 10)
+
+*/
+import Canvas from './canvas';
+declare const _default: {
+    load: typeof load;
+};
+export default _default;
+declare function load(path: string): Canvas;

package/dist/modules/load.d.ts

@@ -0,0 +1,37 @@
+/**
+@module   loader
+@desc     Various file type loader, returns a Promise
+@category internal
+
+Example:
+
+import Load from './load.js'
+
+// Usage: load different file types with one callback
+Promise.all([
+    Load.text('assets/1/text.txt'),
+    Load.image('assets/1/blocks.png'),
+    Load.image('assets/1/colors.png'),
+    Load.json('data.json'),
+]).then(function(res) {
+    console.log('Everything has loaded!')
+    console.log(res)
+}).catch(function() {
+    console.log('Error')
+})
+
+// Usage: load a single resource
+Load.image('assets/1/colors.png').then( img => {
+    console.log(`Image has loaded, size is: ${img.width}x${img.height}`)
+})
+
+*/
+declare const _default: {
+    json: typeof json;
+    image: typeof image;
+    text: typeof text;
+};
+export default _default;
+declare function image(url: string): Promise<unknown>;
+declare function text(url: string): Promise<string>;
+declare function json(url: string): Promise<any>;

package/dist/modules/sort.d.ts

@@ -0,0 +1,11 @@
+/**
+@module   sort
+@desc     Sorts a set of characters by brightness
+@category public
+
+Paints chars on a temporary canvas and counts the pixels.
+This could be done once and then stored / hardcoded.
+The fontFamily paramter needs to be set because it's used by the canvas element
+to draw the correct font.
+*/
+export declare function sort(charSet: Array<string> | string, fontFamily: string, ascending?: boolean): string | string[];

package/dist/renderer.d.ts

@@ -0,0 +1,7 @@
+import type { Context, Frame } from '@glyph-engine/core';
+import type { GpuStep } from './webgpurenderer';
+export type RenderModes = string;
+export type Render = {
+    preferredElementNodeName: RenderModes;
+    render: (context: Context, frame: Frame, gpu?: GpuStep) => void;
+};

package/dist/run.d.ts

@@ -0,0 +1,17 @@
+/**
+Runner
+*/
+import { type Program, type Settings } from '@glyph-engine/core';
+export type WebSettings = Settings & {
+    element: HTMLElement | HTMLCanvasElement | null;
+};
+export declare function run(program: Program, runSettings?: Partial<WebSettings>, userData?: object): Promise<unknown>;
+export declare function copyContent(el: HTMLElement): void;
+export declare function calcMetrics(el: HTMLElement | HTMLCanvasElement): {
+    aspect: number;
+    cellWidth: number;
+    lineHeight: number;
+    fontFamily: string;
+    fontSize: number;
+    _update: () => void;
+};

package/dist/storage.d.ts

@@ -0,0 +1,10 @@
+/**
+Save and restore a JSON object to and from local storage.
+*/
+interface Storage {
+    store: (key: string, obj: unknown) => boolean;
+    restore: <T extends object>(key: string, target: T) => T;
+    clear: (key: string) => void;
+}
+declare const storage: Storage;
+export default storage;

package/dist/textrenderer.d.ts

@@ -0,0 +1,8 @@
+/**
+@module   textrenderer
+@desc     renders to a text element
+@category renderer
+*/
+import type { Render } from './renderer';
+declare const _default: Render;
+export default _default;

package/dist/webglrenderer.d.ts

@@ -0,0 +1,8 @@
+/**
+@module   webglrenderer
+@desc     renders to canvas with WebGL2: the whole grid in one draw call
+@category renderer
+*/
+import type { Render } from './renderer';
+declare const _default: Render;
+export default _default;

package/dist/webgpurenderer.d.ts

@@ -0,0 +1,16 @@
+/**
+@module   webgpurenderer
+@desc     renders to canvas with WebGPU; runs WGSL programs on the GPU
+@category renderer
+*/
+import type { Cursor } from '@glyph-engine/core';
+import type { Render } from './renderer';
+export type GpuStep = {
+    wgsl: string;
+    glyphs: string;
+    cursor: Cursor;
+};
+declare const _default: Render;
+export default _default;
+export declare function initWebGPU(): Promise<boolean>;
+export declare function compileGpuProgram(wgsl: string, glyphs: string): Promise<void>;

package/package.json

@@ -1,6 +1,42 @@
 {
-  "name": "@glyph-engine/web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@glyph-engine/web",
+    "version": "0.1.0",
+    "description": "GlyphEngine in the browser: run() with text, canvas, WebGL2 and WebGPU renderers.",
+    "keywords": [
+        "ascii",
+        "ascii-art",
+        "canvas",
+        "webgl",
+        "webgpu",
+        "creative-coding"
+    ],
+    "license": "Apache-2.0",
+    "homepage": "https://github.com/tomast1337/GlyphEngine#readme",
+    "bugs": "https://github.com/tomast1337/GlyphEngine/issues",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/tomast1337/GlyphEngine.git",
+        "directory": "packages/web"
+    },
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "rm -rf dist && bun build src/index.ts --target browser --outdir dist --external @glyph-engine/core && tsc -p tsconfig.build.json",
+        "prepublishOnly": "bun run build",
+        "prepack": "cp ../../LICENSE ."
+    },
+    "dependencies": {
+        "@glyph-engine/core": "0.1.0"
+    }
+}