modern-canvas 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "packageManager": "pnpm@7.26.2",
   "description": "A data driven modern canvas library",
   "author": "wxm",

package/types/app.d.ts

@@ -0,0 +1,63 @@
+import type { QueryOptions } from './query';
+import type { RenderNodeOptions } from './render';
+import type { System } from './system';
+import type { Texture } from './texture';
+import type { Shape, UserShape } from './shape';
+import type { Node } from './node';
+import type { Material, UserMaterial } from './material';
+import type { Plugin } from './plugin';
+import type { Container } from './container';
+export interface App extends Container {
+    view: HTMLCanvasElement;
+    children: Node[];
+    context: WebGLRenderingContext;
+    defaultTexture: WebGLTexture;
+    framebuffers: {
+        buffer: WebGLFramebuffer | null;
+        depthBuffer: WebGLRenderbuffer | null;
+        texture: WebGLTexture | null;
+        resize(): void;
+    }[];
+    drawModes: {
+        points: GLenum;
+        linear: GLenum;
+        triangles: GLenum;
+        triangleStrip: GLenum;
+        triangleFan: GLenum;
+    };
+    slTypes: Record<number, 'float' | 'vec2' | 'vec3' | 'vec4' | 'int' | 'ivec2' | 'ivec3' | 'ivec4' | 'uint' | 'uvec2' | 'uvec3' | 'uvec4' | 'bool' | 'bvec2' | 'bvec3' | 'bvec4' | 'mat2' | 'mat3' | 'mat4' | 'sampler2D' | 'samplerCube' | 'sampler2DArray'>;
+    extensions: {
+        loseContext: WEBGL_lose_context | null;
+    };
+    width: number;
+    height: number;
+    plugins: Map<string, Plugin>;
+    shapes: Map<string, Shape>;
+    registerShape(name: string, shape: UserShape): void;
+    materials: Map<string, Material>;
+    registerMaterial(name: string, material: UserMaterial): void;
+    textures: Map<number, Texture>;
+    registerTexture(id: number, source: TexImageSource): Promise<void>;
+    lastState?: {
+        material: string;
+        shape: string;
+    };
+    entities: Map<number, {
+        path: number[];
+        archetypeId: string;
+    }>;
+    components: Map<string, number>;
+    archetypes: Map<string, {
+        entityIds: Set<number>;
+        codePoints: number[];
+    }>;
+    systems: System[];
+    registerSystem(system: System): void;
+    query(where?: QueryOptions): Node;
+    setup(): void;
+    load(): Promise<void>;
+    renderNode(options: RenderNodeOptions): void;
+    render(time?: number): void;
+    start(): void;
+    destroy(): void;
+}

package/types/container.d.ts

@@ -9,6 +9,5 @@ export interface Container {
     set<T = any>(key: string, value: T): void;
     bind<T = any>(key: string, value: () => T, shared?: boolean): void;
     singleton<T = any>(key: string, value: () => T): void;
-    [key: string]: any;
 }
 export declare function createContainer(): Container;

package/types/create-app.d.ts

@@ -0,0 +1,3 @@
+import type { Options } from './options';
+import type { App } from './app';
+export declare function createApp(options?: Options): App;

package/types/index.d.ts

@@ -1,2 +1,4 @@
 export * from './plugins';
-export * from './canvas';
+export * from './app';
+export * from './create-app';
+export type { Node } from './node';

package/types/material.d.ts

@@ -1,26 +1,24 @@
-import type { GlSlType } from './gl';
-import type { Canvas } from './canvas';
-export interface Material {
-    name: string;
+import type { App } from './app';
+export interface UserMaterial {
     vertexShader: string;
     fragmentShader: string;
     uniforms?: Record<string, any>;
 }
-export type InternalMaterial = Material & {
+export type Material = UserMaterial & {
     program: WebGLProgram;
     attributes: Record<string, MaterialAttribute>;
     uniforms: Record<string, MaterialUniform>;
-    setAttributes(attributes: Record<string, any>): void;
-    setUniforms(uniforms: Record<string, any>): void;
+    setupAttributes(attributes: Record<string, any>): void;
+    setupUniforms(uniforms: Record<string, any>): void;
 };
 export interface MaterialAttribute {
-    type: GlSlType;
+    type: App['slTypes'][keyof App['slTypes']];
     isArray: boolean;
     location: GLint;
 }
 export interface MaterialUniform {
-    type: GlSlType;
+    type: App['slTypes'][keyof App['slTypes']];
     isArray: boolean;
     location: WebGLUniformLocation | null;
 }
-export declare function registerMaterial(canvas: Canvas, material: Material): void;
+export declare function registerMaterial(app: App, name: string, userMaterial: UserMaterial): void;

package/types/node.d.ts

@@ -1,10 +1,4 @@
-import type { Canvas } from './canvas';
 export interface Node {
     [key: string]: any;
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
     children?: Node[];
 }
-export declare function forEachNode(canvas: Canvas, callbackFn: (node: Node, path: number[]) => void): void;

package/types/options.d.ts

@@ -0,0 +1,7 @@
+import type { Node } from './node';
+import type { Plugin } from './plugin';
+export interface Options extends WebGLContextAttributes {
+    view?: HTMLCanvasElement;
+    children?: Node[];
+    plugins?: Plugin[];
+}

package/types/plugin.d.ts

@@ -1,8 +1,6 @@
-import type { Canvas } from './canvas';
+import type { App } from './app';
 export interface Plugin {
     name: string;
-    register?(canvas: Canvas): void;
-    beforeRender?(canvas: Canvas): void;
-    afterRender?(canvas: Canvas): void;
+    register?(app: App): void;
 }
 export declare function definePlugin(plugin: Plugin | (() => Plugin)): Plugin;

package/types/plugins/index.d.ts

@@ -1,7 +1 @@
-export * from './base';
-export * from './fade';
-export * from './node-image';
-export * from './node-text';
-export * from './selector2d';
-export * from './transform2d';
-export declare const plugins: import("../plugin").Plugin[];
+export * from './renderer2d';

package/types/plugins/renderer2d.d.ts

@@ -0,0 +1 @@
+export declare const Renderer2d: import("../plugin").Plugin;

package/types/query.d.ts

@@ -0,0 +1,4 @@
+import type { App } from './app';
+import type { Node } from './node';
+export type QueryOptions = string | string[];
+export declare function query(app: App, options?: QueryOptions): Node[];

package/types/render.d.ts

@@ -1,2 +1,13 @@
-import type { Canvas } from './canvas';
-export declare function render(canvas: Canvas, time?: number): void;
+import type { App } from './app';
+export interface RenderNodeOptions {
+    shape: string;
+    material: string;
+    uniforms?: Record<string, any>;
+    extraRenderers?: {
+        shape: string;
+        material: string;
+        uniforms?: Record<string, any>;
+    }[];
+}
+export declare function renderNode(app: App, options: RenderNodeOptions): void;
+export declare function render(app: App, time?: number): void;

package/types/setup.d.ts

@@ -0,0 +1,2 @@
+import type { App } from './app';
+export declare function setup(app: App): void;

package/types/shape.d.ts

@@ -1,14 +1,12 @@
-import type { GlDrawModes } from './gl';
-import type { Canvas } from './canvas';
-export interface Shape {
-    name: string;
+import type { App } from './app';
+export interface UserShape {
     type?: '2d' | '3d';
-    mode?: keyof GlDrawModes;
-    data?: Uint8Array | Uint8ClampedArray | Uint16Array | Uint32Array | Int8Array | Int16Array | Int32Array | BigUint64Array | BigInt64Array | Float32Array | Float64Array;
+    mode?: keyof App['drawModes'];
+    buffer?: Uint8Array | Uint8ClampedArray | Uint16Array | Uint32Array | Int8Array | Int16Array | Int32Array | BigUint64Array | BigInt64Array | Float32Array | Float64Array;
 }
-export interface InternalShape {
+export interface Shape {
     mode: GLenum;
     count: number;
     buffer: WebGLBuffer | null;
 }
-export declare function registerShape(canvas: Canvas, shape: Shape): void;
+export declare function registerShape(app: App, name: string, userShape: UserShape): void;

package/types/system.d.ts

@@ -0,0 +1,5 @@
+import type { App } from './app';
+export interface System {
+    update?(time?: number): void;
+}
+export declare function registerSystem(app: App, system: System): void;

package/types/texture.d.ts

@@ -0,0 +1,7 @@
+import type { App } from './app';
+export interface Texture {
+    loading: boolean;
+    value: WebGLTexture | null;
+    source: TexImageSource;
+}
+export declare function registerTexture(app: App, name: number, source: TexImageSource): Promise<void>;

package/types/utils.d.ts

@@ -0,0 +1,11 @@
+export declare class Matrix3 extends Float32Array {
+    static identity(): Matrix3;
+    static translation(tx: number, ty: number): Matrix3;
+    static rotation(radians: number): Matrix3;
+    static scaling(sx: number, sy: number): Matrix3;
+    multiply(matrix3: Matrix3): this;
+}
+export declare function getArchetypeIdCodePoints(componentIds: number[]): number[];
+export declare function createVideo(url: string): HTMLVideoElement;
+export declare function createImage(url: string): HTMLImageElement;
+export declare function resolveColor(value: string, defaultValue?: number[]): [number, number, number, number];

package/types/canvas.d.ts

@@ -1,42 +0,0 @@
-import type { InternalResource, Resource } from './resource';
-import type { InternalShape, Shape } from './shape';
-import type { GlDrawModes, GlExtensions, GlFramebuffer, GlSlTypes } from './gl';
-import type { InternalNodeRenderer, NodeRenderer } from './node-renderer';
-import type { Node } from './node';
-import type { InternalMaterial, Material } from './material';
-import type { Plugin } from './plugin';
-import type { Container } from './container';
-export interface CanvasOptions extends WebGLContextAttributes {
-    view?: HTMLCanvasElement;
-    children?: Node[];
-    plugins?: Plugin[];
-}
-export interface Canvas extends Container {
-    view: HTMLCanvasElement;
-    children: Node[];
-    gl: WebGLRenderingContext;
-    glDefaultTexture: WebGLTexture;
-    glFramebuffers: GlFramebuffer[];
-    glDrawModes: GlDrawModes;
-    glSlTypes: GlSlTypes;
-    glExtensions: GlExtensions;
-    width: number;
-    height: number;
-    plugins: Map<string, Plugin>;
-    beforeRenderPlugins: Plugin[];
-    afterRenderPlugins: Plugin[];
-    shapes: Map<string, InternalShape>;
-    registerShape(shape: Shape): void;
-    materials: Map<string, InternalMaterial>;
-    registerMaterial(options: Material): void;
-    resources: Map<string, InternalResource>;
-    registerResource(options: Resource): void;
-    nodeRenderers: Map<string, InternalNodeRenderer>;
-    registerNodeRenderer(options: NodeRenderer): void;
-    forEachNode(callbackFn: (node: Node, path: number[]) => void): void;
-    load(): Promise<void>;
-    render(time?: number): void;
-    startRenderLoop(): void;
-    destroy(): void;
-}
-export declare function createCanvas(options?: CanvasOptions): Canvas;

package/types/gl.d.ts

@@ -1,20 +0,0 @@
-import type { Canvas } from './canvas';
-export interface GlDrawModes {
-    points: GLenum;
-    linear: GLenum;
-    triangles: GLenum;
-    triangleStrip: GLenum;
-    triangleFan: GLenum;
-}
-export type GlSlType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'int' | 'ivec2' | 'ivec3' | 'ivec4' | 'uint' | 'uvec2' | 'uvec3' | 'uvec4' | 'bool' | 'bvec2' | 'bvec3' | 'bvec4' | 'mat2' | 'mat3' | 'mat4' | 'sampler2D' | 'samplerCube' | 'sampler2DArray';
-export type GlSlTypes = Record<number, GlSlType>;
-export interface GlFramebuffer {
-    buffer: WebGLFramebuffer | null;
-    depthBuffer: WebGLRenderbuffer | null;
-    texture: WebGLTexture | null;
-    resize(): void;
-}
-export interface GlExtensions {
-    loseContext: WEBGL_lose_context | null;
-}
-export declare function provideGl(canvas: Canvas, options?: WebGLContextAttributes): void;

package/types/node-renderer.d.ts

@@ -1,18 +0,0 @@
-import type { Canvas } from './canvas';
-import type { Material } from './material';
-import type { Shape } from './shape';
-import type { Node } from './node';
-export interface NodeRenderer {
-    name: string;
-    include?: (node: Node, path: number[]) => boolean;
-    exclude?: (node: Node, path: number[]) => boolean;
-    shape: string | Omit<Shape, 'name'>;
-    material: string | Omit<Material, 'name'>;
-    update?(node: Node, time: number): undefined | Record<string, any>;
-}
-export interface InternalNodeRenderer extends NodeRenderer {
-    shape: string;
-    material: string;
-    render(node: Node, time: number): void;
-}
-export declare function registerNodeRenderer(canvas: Canvas, renderer: NodeRenderer): void;

package/types/plugins/base.d.ts

@@ -1 +0,0 @@
-export declare const basePlugin: import("../plugin").Plugin;

package/types/plugins/fade.d.ts

@@ -1 +0,0 @@
-export declare const fadePlugin: import("../plugin").Plugin;

package/types/plugins/node-image.d.ts

@@ -1 +0,0 @@
-export declare const nodeImagePlugin: import("../plugin").Plugin;

package/types/plugins/node-text.d.ts

@@ -1 +0,0 @@
-export declare const nodeTextPlugin: import("../plugin").Plugin;

package/types/plugins/selector2d.d.ts

@@ -1 +0,0 @@
-export declare const selector2dPlugin: import("../plugin").Plugin;

package/types/plugins/transform2d.d.ts

@@ -1 +0,0 @@
-export declare const transform2dPlugin: import("../plugin").Plugin;

package/types/resource.d.ts

@@ -1,10 +0,0 @@
-import type { Canvas } from './canvas';
-export interface Resource {
-    name: string;
-    data: TexImageSource;
-}
-export type InternalResource = {
-    loading: boolean;
-    texture: WebGLTexture | null;
-};
-export declare function registerResource(canvas: Canvas, resource: Resource): void;

package/types/utils/index.d.ts

@@ -1 +0,0 @@
-export * from './matrix3';

package/types/utils/matrix3.d.ts

@@ -1,7 +0,0 @@
-export declare class Matrix3 extends Float32Array {
-    static identity(): Matrix3;
-    static translation(tx: number, ty: number): Matrix3;
-    static rotation(radians: number): Matrix3;
-    static scaling(sx: number, sy: number): Matrix3;
-    multiply(matrix3: Matrix3): this;
-}