@vectojs/three 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,123 @@
+import { IRenderer, Scene, SceneOptions } from '@vectojs/core';
+import * as THREE from 'three';
+
+declare class WebGLGradient {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    colorStops: {
+        stop: number;
+        color: string;
+    }[];
+    type: string;
+    constructor(x0: number, y0: number, x1: number, y1: number, colorStops: {
+        stop: number;
+        color: string;
+    }[]);
+}
+/**
+ * WebGL/Three.js implementation of {@link IRenderer}.
+ *
+ * Bridges VectoJS's 2D canvas API to Three.js for 3D hardware-accelerated rendering.
+ */
+declare class ThreeRenderer implements IRenderer {
+    scene: THREE.Scene;
+    camera: THREE.OrthographicCamera;
+    renderer: THREE.WebGLRenderer;
+    private width;
+    private height;
+    private matrix;
+    private stack;
+    private globalAlpha;
+    private alphaStack;
+    private currentPath;
+    private activeObjects;
+    private scissorStack;
+    constructor(canvas: HTMLCanvasElement);
+    resize(width: number, height: number): void;
+    clear(): void;
+    save(): void;
+    restore(): void;
+    translate(x: number, y: number): void;
+    scale(x: number, y: number): void;
+    rotate(angle: number): void;
+    setGlobalAlpha(alpha: number): void;
+    clip(x: number, y: number, width: number, height: number): void;
+    beginPath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+    closePath(): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+    roundRect(x: number, y: number, width: number, height: number, radii: number | number[]): void;
+    drawImage(source: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
+    fill(colorOrGradient: string | any): void;
+    private fillSolidShape;
+    stroke(colorOrGradient: string | any, lineWidth?: number): void;
+    fillText(text: string, x: number, y: number, font: string, color: string | any): void;
+    fillCircle(cx: number, cy: number, radius: number, color: string, alpha?: number): void;
+    flush(): void;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number, colorStops: {
+        stop: number;
+        color: string;
+    }[]): any;
+}
+
+interface ThreeAdapterOptions {
+    /** Physical layout width of the 2D UI canvas. */
+    width: number;
+    /** Physical layout height of the 2D UI canvas. */
+    height: number;
+    /** Optional pre-existing canvas element. If omitted, a new canvas is created. */
+    canvas?: HTMLCanvasElement;
+    /** Options passed to the VectoScene constructor. */
+    sceneOptions?: SceneOptions;
+}
+/**
+ * Adapts a VectoJS Scene into a Three.js CanvasTexture, allowing VectoJS
+ * components to be rendered in 3D space (e.g. on a plane, screen, or VR dashboard).
+ */
+declare class ThreeAdapter {
+    /** The Three.js CanvasTexture wrapping the offscreen Vecto canvas. */
+    texture: THREE.CanvasTexture;
+    /** The active VectoJS Scene instance. */
+    vectoScene: Scene;
+    /** The offscreen HTMLCanvasElement on which Vecto draws. */
+    canvas: HTMLCanvasElement;
+    /** A pre-built THREE.Mesh with PlaneGeometry and this texture for immediate use. */
+    mesh: THREE.Mesh;
+    /** Track hover states independently per pointerId for WebXR / Multi-Touch. */
+    private activePointers;
+    constructor(options: ThreeAdapterOptions);
+    /**
+     * Processes 3D Raycasting intersections and forwards pointer/scroll events.
+     * Call this from window/document event listeners passing the raycaster.
+     *
+     * @param raycaster Three.js Raycaster instance.
+     * @param type Pointer event type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click'.
+     * @param originalEvent Optional original DOM Event to forward scroll deltas or button states.
+     * @returns true if the ray intersected the VectoJS mesh; false otherwise.
+     */
+    updateIntersection(raycaster: THREE.Raycaster, type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click', originalEvent?: Event): boolean;
+    /**
+     * Dispatches pointer events mapped from UV coordinates [0, 1] to VectoJS entities.
+     */
+    private dispatchAtUv;
+    /**
+     * Routes events to the associated A11y DOM element, or Vecto's own event dispatch system.
+     */
+    private dispatchEventToTarget;
+    private createDOMEvent;
+    private findEntityById;
+    /**
+     * Resizes the offscreen canvas and VectoScene dimensions.
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Disposes of Three.js textures, geometries, and VectoJS scenes to prevent memory leaks.
+     */
+    dispose(): void;
+}
+
+export { ThreeAdapter, type ThreeAdapterOptions, ThreeRenderer, WebGLGradient };

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import { IRenderer, Scene, SceneOptions } from '@vectojs/core';
+import * as THREE from 'three';
+
+declare class WebGLGradient {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    colorStops: {
+        stop: number;
+        color: string;
+    }[];
+    type: string;
+    constructor(x0: number, y0: number, x1: number, y1: number, colorStops: {
+        stop: number;
+        color: string;
+    }[]);
+}
+/**
+ * WebGL/Three.js implementation of {@link IRenderer}.
+ *
+ * Bridges VectoJS's 2D canvas API to Three.js for 3D hardware-accelerated rendering.
+ */
+declare class ThreeRenderer implements IRenderer {
+    scene: THREE.Scene;
+    camera: THREE.OrthographicCamera;
+    renderer: THREE.WebGLRenderer;
+    private width;
+    private height;
+    private matrix;
+    private stack;
+    private globalAlpha;
+    private alphaStack;
+    private currentPath;
+    private activeObjects;
+    private scissorStack;
+    constructor(canvas: HTMLCanvasElement);
+    resize(width: number, height: number): void;
+    clear(): void;
+    save(): void;
+    restore(): void;
+    translate(x: number, y: number): void;
+    scale(x: number, y: number): void;
+    rotate(angle: number): void;
+    setGlobalAlpha(alpha: number): void;
+    clip(x: number, y: number, width: number, height: number): void;
+    beginPath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+    closePath(): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+    roundRect(x: number, y: number, width: number, height: number, radii: number | number[]): void;
+    drawImage(source: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
+    fill(colorOrGradient: string | any): void;
+    private fillSolidShape;
+    stroke(colorOrGradient: string | any, lineWidth?: number): void;
+    fillText(text: string, x: number, y: number, font: string, color: string | any): void;
+    fillCircle(cx: number, cy: number, radius: number, color: string, alpha?: number): void;
+    flush(): void;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number, colorStops: {
+        stop: number;
+        color: string;
+    }[]): any;
+}
+
+interface ThreeAdapterOptions {
+    /** Physical layout width of the 2D UI canvas. */
+    width: number;
+    /** Physical layout height of the 2D UI canvas. */
+    height: number;
+    /** Optional pre-existing canvas element. If omitted, a new canvas is created. */
+    canvas?: HTMLCanvasElement;
+    /** Options passed to the VectoScene constructor. */
+    sceneOptions?: SceneOptions;
+}
+/**
+ * Adapts a VectoJS Scene into a Three.js CanvasTexture, allowing VectoJS
+ * components to be rendered in 3D space (e.g. on a plane, screen, or VR dashboard).
+ */
+declare class ThreeAdapter {
+    /** The Three.js CanvasTexture wrapping the offscreen Vecto canvas. */
+    texture: THREE.CanvasTexture;
+    /** The active VectoJS Scene instance. */
+    vectoScene: Scene;
+    /** The offscreen HTMLCanvasElement on which Vecto draws. */
+    canvas: HTMLCanvasElement;
+    /** A pre-built THREE.Mesh with PlaneGeometry and this texture for immediate use. */
+    mesh: THREE.Mesh;
+    /** Track hover states independently per pointerId for WebXR / Multi-Touch. */
+    private activePointers;
+    constructor(options: ThreeAdapterOptions);
+    /**
+     * Processes 3D Raycasting intersections and forwards pointer/scroll events.
+     * Call this from window/document event listeners passing the raycaster.
+     *
+     * @param raycaster Three.js Raycaster instance.
+     * @param type Pointer event type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click'.
+     * @param originalEvent Optional original DOM Event to forward scroll deltas or button states.
+     * @returns true if the ray intersected the VectoJS mesh; false otherwise.
+     */
+    updateIntersection(raycaster: THREE.Raycaster, type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click', originalEvent?: Event): boolean;
+    /**
+     * Dispatches pointer events mapped from UV coordinates [0, 1] to VectoJS entities.
+     */
+    private dispatchAtUv;
+    /**
+     * Routes events to the associated A11y DOM element, or Vecto's own event dispatch system.
+     */
+    private dispatchEventToTarget;
+    private createDOMEvent;
+    private findEntityById;
+    /**
+     * Resizes the offscreen canvas and VectoScene dimensions.
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Disposes of Three.js textures, geometries, and VectoJS scenes to prevent memory leaks.
+     */
+    dispose(): void;
+}
+
+export { ThreeAdapter, type ThreeAdapterOptions, ThreeRenderer, WebGLGradient };