ranuts 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/src/utils/visual/render/utils/webgl/batchPool.d.ts

@@ -0,0 +1,28 @@
+import type { WebGLRenderer } from '@/utils/visual/render/webGlRenderer';
+export interface Batch {
+    vertices: Float32Array;
+    vertexIndices: Uint16Array;
+    rgba: number;
+}
+export declare class BatchPool {
+    renderer: WebGLRenderer;
+    private vertexCount;
+    private vertexIndexCount;
+    private batches;
+    private batchesCount;
+    static testDrawCallCount: number;
+    private vertexBufferFloatView;
+    private vertexBufferIntView;
+    private vertexBufferPool;
+    private vertexIndexBuffer;
+    private vertexIndexBufferPool;
+    private curVertexBufferSize;
+    private curVertexIndexBufferSize;
+    private curElementCount;
+    constructor(renderer: WebGLRenderer);
+    private setBuffer;
+    push(batch: Batch): void;
+    private draw;
+    private packData;
+    flush(): void;
+}

package/dist/src/utils/visual/render/utils/webgl/initShader.d.ts

@@ -0,0 +1,2 @@
+import type { WebGLRenderer } from '@/utils/visual/render/webGlRenderer';
+export declare const initShader: (renderer: WebGLRenderer) => WebGLProgram;

package/dist/src/utils/visual/render/utils/webgl/shaders.d.ts

@@ -0,0 +1,2 @@
+export declare const vertexShaderSource: string;
+export declare const fragmentShaderSource: string;

package/dist/src/utils/visual/render/utils/webgpu/shaders.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 顶点着色器
+ */
+export declare const vertexShaderSource = "\n@group(0) @binding(0) var<uniform> u_root_transform: mat3x3<f32>;\n@group(0) @binding(1) var<uniform> u_projection_matrix: mat3x3<f32>;\n\nstruct VertOutput {\n  @builtin(position) v_position: vec4<f32>,\n  @location(0) v_color : vec4<f32>,\n};\n\n@vertex\nfn main(\n  @location(0) a_position: vec2<f32>,\n  @location(1) a_color: vec4<f32>,\n) -> VertOutput {\n  let v_position = vec4<f32>((u_projection_matrix * u_root_transform * vec3<f32>(a_position, 1.0)).xy, 0.0, 1.0);\n\n  let v_color = a_color;\n\n  return VertOutput(v_position, v_color);\n}\n";
+/**
+ * 片元着色器
+ */
+export declare const fragmentShaderSource = "\n@fragment\nfn main(\n  @location(0) v_color : vec4<f32>,\n) -> @location(0) vec4<f32> {\n  return v_color;\n}\n";

package/dist/src/utils/visual/render/webGPURenderer.d.ts

@@ -0,0 +1,49 @@
+import { BatchRenderer } from '@/utils/visual/render/batchRenderer';
+import type { IApplicationOptions } from '@/utils/visual/types';
+export declare class WebGPURenderer extends BatchRenderer {
+    private gpu;
+    private device;
+    private pipeline;
+    private renderPassDescriptor;
+    private options;
+    /**
+     * 顶点的 webGPU buffer
+     */
+    private gpuVertexBuffer;
+    /**
+     * 顶点下标的 webGPU buffer
+     */
+    private gpuIndexBuffer;
+    /**
+     * 投影矩阵的 webGPU buffer
+     */
+    private projectionMatBuffer;
+    /**
+     * stage 的变换矩阵的 webGPU buffer
+     */
+    private stageMatBuffer;
+    /**
+     * uniform 变量的 bind group
+     */
+    private uniformBindGroup;
+    constructor(options: IApplicationOptions);
+    init(): Promise<void>;
+    protected draw(): void;
+    private initUniformBindGroup;
+    private initGpuBuffer;
+    protected updateBuffer(): void;
+    protected setRootTransform(a: number, b: number, c: number, d: number, tx: number, ty: number): void;
+    protected setProjectionMatrix(): void;
+    /**
+     * 初始化 pipeline
+     */
+    private createPipeline;
+    /**
+     * 初始化 device
+     */
+    private initDevice;
+    /**
+     * 初始化 renderPassDescriptor
+     */
+    private initRenderPassDescriptor;
+}

package/dist/src/utils/visual/render/webGlRenderer.d.ts

@@ -0,0 +1,17 @@
+import { Renderer } from '@/utils/visual/render/render';
+import { BatchPool } from '@/utils/visual/render/utils/webgl/batchPool';
+import type { IApplicationOptions } from '@/utils/visual/types';
+import type { Container } from '@/utils/visual/vertex/container';
+export declare class WebGLRenderer extends Renderer {
+    gl: WebGLRenderingContext;
+    batchPool: BatchPool;
+    private program;
+    private unifLoc;
+    constructor(options: IApplicationOptions);
+    /**
+     * 设置投影矩阵
+     */
+    private setProjectionMatrix;
+    private setRootTransform;
+    render(rootContainer: Container): void;
+}

package/dist/src/utils/visual/shape/circle.d.ts

@@ -0,0 +1,11 @@
+import { Shape } from '@/utils/visual/shape/shape';
+import { SHAPE_TYPE } from '@/utils/visual/enums';
+import type { Point } from '@/utils/visual/vertex/point';
+export declare class Circle extends Shape {
+    x: number;
+    y: number;
+    radius: number;
+    readonly type = SHAPE_TYPE.CIRCLE;
+    constructor(x?: number, y?: number, radius?: number);
+    contains(p: Point): boolean;
+}

package/dist/src/utils/visual/shape/ellipse.d.ts

@@ -0,0 +1,12 @@
+import { Shape } from '@/utils/visual/shape/shape';
+import { SHAPE_TYPE } from '@/utils/visual/enums';
+import type { Point } from '@/utils/visual/vertex/point';
+export declare class Ellipse extends Shape {
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+    readonly type = SHAPE_TYPE.ELLIPSE;
+    constructor(x?: number, y?: number, radiusX?: number, radiusY?: number);
+    contains(p: Point): boolean;
+}

package/dist/src/utils/visual/shape/index.d.ts

@@ -0,0 +1,7 @@
+import { Circle } from '@/utils/visual/shape/circle';
+import { Ellipse } from '@/utils/visual/shape/ellipse';
+import { Polygon } from '@/utils/visual/shape/polygon';
+import { Rectangle } from '@/utils/visual/shape/rectangle';
+import { Shape } from '@/utils/visual/shape/shape';
+import { RoundedRectangle } from '@/utils/visual/shape/roundedRectangle';
+export { Shape, Circle, Ellipse, Polygon, Rectangle, RoundedRectangle };

package/dist/src/utils/visual/shape/polygon.d.ts

@@ -0,0 +1,11 @@
+import { Shape } from '@/utils/visual/shape/shape';
+import { SHAPE_TYPE } from '@/utils/visual/enums';
+import type { Point } from '@/utils/visual/vertex/point';
+export declare class Polygon extends Shape {
+    points: number[];
+    closeStroke: boolean;
+    type: SHAPE_TYPE;
+    constructor(points?: number[]);
+    private isIntersect;
+    contains(p: Point): boolean;
+}

package/dist/src/utils/visual/shape/rectangle.d.ts

@@ -0,0 +1,12 @@
+import { Shape } from '@/utils/visual/shape/shape';
+import { SHAPE_TYPE } from '@/utils/visual/enums';
+import type { Point } from '@/utils/visual/vertex/point';
+export declare class Rectangle extends Shape {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type: SHAPE_TYPE;
+    constructor(x?: number, y?: number, width?: number, height?: number);
+    contains(p: Point): boolean;
+}

package/dist/src/utils/visual/shape/roundedRectangle.d.ts

@@ -0,0 +1,13 @@
+import { Shape } from '@/utils/visual/shape/shape';
+import { SHAPE_TYPE } from '@/utils/visual/enums';
+import type { Point } from '@/utils/visual/vertex/point';
+export declare class RoundedRectangle extends Shape {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    readonly type = SHAPE_TYPE.ROUNDED_RECTANGLE;
+    constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
+    contains(p: Point): boolean;
+}

package/dist/src/utils/visual/shape/shape.d.ts

@@ -0,0 +1,6 @@
+import type { SHAPE_TYPE } from '@/utils/visual/enums';
+import type { Point } from '@/utils/visual/vertex/point';
+export declare abstract class Shape {
+    abstract type: SHAPE_TYPE;
+    abstract contains(point: Point): boolean;
+}

package/dist/src/utils/visual/style/fill.d.ts

@@ -0,0 +1,8 @@
+export declare class Fill {
+    color: string;
+    alpha: number;
+    visible: boolean;
+    constructor();
+    clone(): Fill;
+    reset(): void;
+}

package/dist/src/utils/visual/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Fill } from '@/utils/visual/style/fill';
+import { Line } from '@/utils/visual/style/line';
+export { Fill, Line };

package/dist/src/utils/visual/style/line.d.ts

@@ -0,0 +1,10 @@
+import { LINE_CAP, LINE_JOIN } from '@/utils/visual/enums';
+import { Fill } from '@/utils/visual/style/fill';
+export declare class Line extends Fill {
+    width: number;
+    cap: LINE_CAP;
+    join: LINE_JOIN;
+    miterLimit: number;
+    clone(): Line;
+    reset(): void;
+}

package/dist/src/utils/visual/types.d.ts

@@ -0,0 +1,17 @@
+import type { LINE_CAP, LINE_JOIN, RENDERER_TYPE } from '@/utils/visual/enums';
+export interface IApplicationOptions {
+    prefer?: RENDERER_TYPE.CANVAS | RENDERER_TYPE.WEB_GL | RENDERER_TYPE.WEB_GPU;
+    view?: HTMLCanvasElement;
+    backgroundColor?: string;
+    backgroundAlpha?: number;
+}
+export interface IFillStyleOptions {
+    color?: string;
+    alpha?: number;
+    visible?: boolean;
+}
+export interface ILineStyleOptions extends IFillStyleOptions {
+    width?: number;
+    cap?: LINE_CAP;
+    join?: LINE_JOIN;
+}

package/dist/src/utils/visual/vertex/container.d.ts

@@ -0,0 +1,73 @@
+import { Vertex } from '@/utils/visual/vertex/vertex';
+import type { CanvasRenderer } from '@/utils/visual/render/canvasRenderer';
+import type { Point } from '@/utils/visual/vertex/point';
+import type { WebGLRenderer } from '@/utils/visual/render/webGlRenderer';
+import type { BatchRenderer } from '@/utils/visual/render/batchRenderer';
+import type { Batch } from '@/utils/visual/render/utils/batch/index';
+export declare class Container extends Vertex {
+    isSort: boolean;
+    type: string;
+    /**
+     * 所有子元素
+     */
+    readonly children: Container[];
+    /**
+     * 用来标记 worldTransform 是否发生了改变
+     */
+    protected worldId: number;
+    /**
+     * 所有 batch
+     */
+    protected batches: Batch[];
+    /**
+     * batch 总数
+     */
+    protected batchCount: number;
+    constructor();
+    /**
+     * @description: 添加子元素
+     * @param {Container} child
+     * @return {*}
+     */
+    addChild: (child: Container) => void;
+    /**
+     * @description:删除子元素
+     * @param {Container} child
+     * @return {void}
+     */
+    removeChild: (child: Container) => void;
+    /**
+     * @description: 根据 z-index 排序子元素
+     * @return {*}
+     */
+    sortChildren: () => void;
+    /**
+     * 渲染自身，在 container 上面没有东西要渲染，所以这个函数的内容为空
+     */
+    protected renderCanvas(render: CanvasRenderer): void;
+    /**
+     * 递归渲染以自身为根的整棵节点树
+     */
+    renderCanvasRecursive: (render: CanvasRenderer) => void;
+    /**
+     * 递归更新当前元素以及所有子元素的 transform
+     */
+    updateTransform: () => void;
+    containsPoint: (p: Point) => boolean;
+    /**
+     * 使用 webGL，渲染自身，在 container 上面没有东西要渲染，所以这个函数的内容为空
+     */
+    protected renderWebGL(renderer: WebGLRenderer): void;
+    /**
+     * 使用 webGL，递归渲染以自身为根的整棵节点树
+     */
+    renderWebGLRecursive(renderer: WebGLRenderer): void;
+    /**
+     * 构建自身的 batch
+     */
+    buildBatches(batchRenderer: BatchRenderer): void;
+    /**
+     * 更新自身的所有 batch 对应的大数组中的顶点
+     */
+    updateBatches(floatView: Float32Array): void;
+}

package/dist/src/utils/visual/vertex/index.d.ts

@@ -0,0 +1,5 @@
+import { Application } from '@/utils/visual/application';
+import { Container } from '@/utils/visual/vertex/container';
+import { ObservablePoint, Point } from '@/utils/visual/vertex/point';
+import { Vertex } from '@/utils/visual/vertex/vertex';
+export { Application, Container, Point, ObservablePoint, Vertex };

package/dist/src/utils/visual/vertex/point.d.ts

@@ -0,0 +1,18 @@
+export declare class Point {
+    x: number;
+    y: number;
+    constructor(x?: number, y?: number);
+    set(x?: number, y?: number): void;
+    clone: () => Point;
+}
+export declare class ObservablePoint<T = never> {
+    private _x;
+    private _y;
+    private cb;
+    constructor(cb: (...args: T[]) => void, x?: number, y?: number);
+    set(x?: number, y?: number): void;
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+}

package/dist/src/utils/visual/vertex/vertex.d.ts

@@ -0,0 +1,36 @@
+import { SyncHook } from '@/utils/subscribe';
+import { Transform } from '@/utils/visual/math/transform';
+import type { Container } from '@/utils/visual/vertex/container';
+import type { ObservablePoint } from '@/utils/visual/vertex/point';
+import type { Matrix } from '@/utils/visual/math/matrix';
+import type { Cursor, FederatedEventMap } from '@/utils/visual/event';
+import type { Shape } from '@/utils/visual/shape';
+export declare abstract class Vertex extends SyncHook {
+    protected _zIndex: number;
+    parent: Container | undefined;
+    visible: boolean;
+    transform: Transform;
+    alpha: number;
+    worldAlpha: number;
+    hitArea: Shape | null;
+    cursor: Cursor;
+    get zIndex(): number;
+    set zIndex(value: number);
+    get position(): ObservablePoint;
+    get localTransform(): Matrix;
+    get worldTransform(): Matrix;
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get scale(): ObservablePoint;
+    get pivot(): ObservablePoint;
+    get skew(): ObservablePoint;
+    get rotation(): number;
+    set rotation(value: number);
+    get angle(): number;
+    set angle(value: number);
+    updateTransform(): void;
+    addEventListener: <K extends keyof FederatedEventMap>(type: K, listener: (e: FederatedEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions) => void;
+    removeEventListener: <K extends keyof FederatedEventMap>(type: K, listener: (e: FederatedEventMap[K]) => unknown, capture?: boolean) => void;
+}

package/dist/src/vnode/chainDom.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @description: 链式调用的 dom 操作
+ * @return {HTMLElement}
+ */
+export declare class Chain {
+    element: HTMLElement;
+    constructor(tagName: string, options?: ElementCreationOptions);
+    /**
+     * @description: 创建元素
+     * @param {string} tagName
+     * @param {ElementCreationOptions} options
+     * @return {Chain}
+     */
+    create: (tagName: string, options?: ElementCreationOptions) => HTMLElement;
+    /**
+     * @description: 设置当前元素的属性
+     * @param {string} name
+     * @param {string} value
+     * @return {Chain}
+     */
+    setAttribute: (name: string, value: string) => Chain;
+    /**
+     * @description: 移除当前元素的属性
+     * @param {string} name
+     * @return {Chain}
+     */
+    removeAttribute: (name: string) => Chain;
+    /**
+     * @description: 当前元素添加子元素
+     * @param {HTMLElement} child
+     * @return {ChainElement}
+     */
+    append: (child: HTMLElement) => Chain;
+    /**
+     * @description: 当前元素移除子元素
+     * @param {HTMLElement} child
+     * @return {Chain}
+     */
+    remove: (child: HTMLElement) => Chain;
+    /**
+     * @description: 给当前元素设置文本内容
+     * @param {string} text
+     * @return {Chain}
+     */
+    setTextContent: (text: string) => Chain;
+}
+export declare const create: (tagName: string, options?: ElementCreationOptions) => Chain;

package/dist/src/vnode/h.d.ts

@@ -0,0 +1,6 @@
+import type { VNode, VNodeChildren, VNodeData } from './vnode';
+export declare function addNS(data: VNodeData, children: Array<VNode | string | number> | undefined, sel: string | undefined): void;
+export declare function h(sel: string): VNode;
+export declare function h(sel: string, data: VNodeData | null): VNode;
+export declare function h(sel: string, children: VNodeChildren): VNode;
+export declare function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode;

package/dist/src/vnode/hooks.d.ts

@@ -0,0 +1,23 @@
+import type { VNode } from './vnode';
+export type PreHook = () => any;
+export type InitHook = (vNode: VNode) => any;
+export type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
+export type InsertHook = (vNode: VNode) => any;
+export type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
+export type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
+export type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
+export type DestroyHook = (vNode: VNode) => any;
+export type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
+export type PostHook = () => any;
+export interface Hooks {
+    pre?: PreHook;
+    init?: InitHook;
+    create?: CreateHook;
+    insert?: InsertHook;
+    prepatch?: PrePatchHook;
+    update?: UpdateHook;
+    postpatch?: PostPatchHook;
+    destroy?: DestroyHook;
+    remove?: RemoveHook;
+    post?: PostHook;
+}

package/dist/src/vnode/htmlDomApi.d.ts

@@ -0,0 +1,33 @@
+export interface Fragment extends DocumentFragment {
+    parent: Node | null;
+    firstChildNode: ChildNode | null;
+    lastChildNode: ChildNode | null;
+}
+export interface DOMAPI {
+    createElement: (tagName: any, options?: ElementCreationOptions) => HTMLElement;
+    createElementNS: (namespaceURI: string, qualifiedName: string, options?: ElementCreationOptions) => Element;
+    /**
+     * @experimental
+     * @todo Make it required when the fragment is considered stable.
+     */
+    createDocumentFragment?: () => Fragment;
+    createTextNode: (text: string) => Text;
+    createComment: (text: string) => Comment;
+    insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void;
+    removeChild: (node: Node, child: Node) => void;
+    appendChild: (node: Node, child: Node) => void;
+    parentNode: (node: Node) => Node | null;
+    nextSibling: (node: Node) => Node | null;
+    tagName: (elm: Element) => string;
+    setTextContent: (node: Node, text: string | null) => void;
+    getTextContent: (node: Node) => string | null;
+    isElement: (node: Node) => node is Element;
+    isText: (node: Node) => node is Text;
+    isComment: (node: Node) => node is Comment;
+    /**
+     * @experimental
+     * @todo Make it required when the fragment is considered stable.
+     */
+    isDocumentFragment?: (node: Node) => node is DocumentFragment;
+}
+export declare const htmlDomApi: DOMAPI;

package/dist/src/vnode/init.d.ts

@@ -0,0 +1,2 @@
+import type { VNode } from './vnode';
+export declare function init(): (oldVnode: VNode | Element, vnode: VNode) => VNode;

package/dist/src/vnode/is.d.ts

@@ -0,0 +1,5 @@
+import type { VNode } from './vnode';
+export declare const array: (arg: any) => arg is any[];
+export declare const isStr: (str: unknown) => str is string;
+export declare function primitive(s: unknown): s is string | number;
+export declare function isVnode(s: any): s is VNode;

package/dist/src/vnode/modules/attributes.d.ts

@@ -0,0 +1,8 @@
+import type { VNode } from '../vnode';
+export type Attrs = Record<string, string | number | boolean>;
+declare function updateAttrs(oldVnode: VNode, vnode: VNode): void;
+export declare const attributesModule: {
+    create: typeof updateAttrs;
+    update: typeof updateAttrs;
+};
+export {};

package/dist/src/vnode/modules/class.d.ts

@@ -0,0 +1,8 @@
+import type { VNode } from '../vnode';
+export type Classes = Record<string, boolean>;
+declare function updateClass(oldVnode: VNode, vnode: VNode): void;
+export declare const classModule: {
+    create: typeof updateClass;
+    update: typeof updateClass;
+};
+export {};

package/dist/src/vnode/modules/index.d.ts

@@ -0,0 +1,3 @@
+export type ModuleHook = any;
+export type Modules = Record<string, Record<string, ModuleHook>>;
+export declare const modules: Modules;

package/dist/src/vnode/modules/listeners.d.ts

@@ -0,0 +1,12 @@
+import type { VNode } from '../vnode';
+type Listener<T> = (this: VNode, ev: T, vnode: VNode) => void;
+export type On = {
+    [N in keyof HTMLElementEventMap]?: Listener<HTMLElementEventMap[N]> | Array<Listener<HTMLElementEventMap[N]>>;
+} & Record<string, Listener<any> | Array<Listener<any>>>;
+declare function updateEventListeners(oldVnode: VNode, vnode?: VNode): void;
+export declare const eventListenersModule: {
+    create: typeof updateEventListeners;
+    update: typeof updateEventListeners;
+    destroy: typeof updateEventListeners;
+};
+export {};

package/dist/src/vnode/modules/props.d.ts

@@ -0,0 +1,8 @@
+import type { VNode } from '../vnode';
+export type Props = Record<string, any>;
+declare function updateProps(oldVnode: VNode, vnode: VNode): void;
+export declare const propsModule: {
+    create: typeof updateProps;
+    update: typeof updateProps;
+};
+export {};

package/dist/src/vnode/modules/style.d.ts

@@ -0,0 +1,14 @@
+import type { VNode } from '../vnode';
+export type VNodeStyle = Record<string, any>;
+declare function updateStyle(oldVnode: VNode, vnode: VNode): void;
+declare function forceReflow(): void;
+declare function applyDestroyStyle(vnode: VNode): void;
+declare function applyRemoveStyle(vnode: VNode, rm: () => void): void;
+export declare const styleModule: {
+    pre: typeof forceReflow;
+    create: typeof updateStyle;
+    update: typeof updateStyle;
+    destroy: typeof applyDestroyStyle;
+    remove: typeof applyRemoveStyle;
+};
+export {};

package/dist/src/vnode/vnode.d.ts

@@ -0,0 +1,31 @@
+import type { On } from './modules/listeners';
+import type { Attrs } from './modules/attributes';
+import type { Classes } from './modules/class';
+import type { Props } from './modules/props';
+import type { VNodeStyle } from './modules/style';
+import type { Hooks } from './hooks';
+export type VNodes = VNode[];
+export type VNodeChildElement = VNode | string | number;
+export type ArrayOrElement<T> = T | T[];
+export type VNodeChildren = ArrayOrElement<VNodeChildElement>;
+export type Key = string | number;
+export interface VNode {
+    sel: string | undefined;
+    data: VNodeData | undefined;
+    children: Array<VNode | string | number> | undefined;
+    elm: Node | undefined;
+    text: string | number | undefined;
+    key: Key | undefined;
+    listener?: EventListenerOrEventListenerObject | undefined;
+}
+export interface VNodeData {
+    props?: Props;
+    attrs?: Attrs;
+    class?: Classes;
+    style?: VNodeStyle;
+    on?: On;
+    key?: Key;
+    ns?: string;
+    hook?: Hooks;
+}
+export declare function vnode(sel: string | undefined, data: any | undefined, children: Array<VNode | string | number> | undefined, text: string | number | undefined, elm: Element | Text | undefined): VNode;

package/dist/src/wasm/index.d.ts

@@ -0,0 +1,2 @@
+import word from '@/wasm/word';
+export { word };