troncell-vue-component 1.0.0

package/dist/types/components/InfiniteGridComp/component/EventHandler.d.ts

@@ -0,0 +1,126 @@
+import { Mesh, Vec2, Raycast } from 'ogl';
+import { Position2D, ScrollState, CardData } from './types';
+/**
+ * Interface defining the required properties and methods that the EventHandler
+ * needs to access from the main InfiniteGrid class
+ */
+export interface EventHandlerHost {
+    container: HTMLElement;
+    pointer: Vec2;
+    raycast: Raycast;
+    camera: any;
+    renderer: any;
+    sceneRenderTarget: any;
+    postProcessShader: any;
+    scroll: ScrollState;
+    isDown: boolean;
+    isHoveringCanvas: boolean;
+    hasMovedSignificantly: boolean;
+    startPosition: Position2D;
+    scrollPosition: Position2D;
+    scrollTracker: any;
+    currentHoveredTileKey: string;
+    backgroundMeshMap: Map<string, Mesh>;
+    foregroundMeshMap: Map<string, Mesh>;
+    options: {
+        baseCameraZ: number;
+    };
+    maxClickMovement: number;
+    hoverTransitionDuration: number;
+    hoverEase: string;
+    initialBackgroundOpacity: number;
+    hoveredBackgroundOpacity: number;
+    cardData: CardData[];
+    updatePositions(): void;
+    animateInertiaScroll(vx?: number | string, vy?: number | string): void;
+    getTileKeyFromMesh(mesh: Mesh): string;
+    getCardDataForTile(groupIndex: number, tileIndex: number): CardData;
+    getInteractiveMeshes(): Mesh[];
+    updatePointerCoordinates(clientX: number, clientY: number): void;
+    performRaycast(): Mesh[];
+    fadeInBackground(mesh: Mesh): void;
+    fadeOutBackground(mesh: Mesh): void;
+}
+/**
+ * EventHandler class manages all user interactions for the infinite grid
+ *
+ * This class encapsulates event handling logic including:
+ * - Mouse and touch input processing
+ * - Hover state management with visual feedback
+ * - Click detection with drag threshold
+ * - Responsive window resize handling
+ * - Event listener lifecycle management
+ */
+export declare class EventHandler {
+    private host;
+    private isInitialized;
+    /**
+     * Creates a new EventHandler instance
+     * @param host - The main grid class that provides required properties and methods
+     */
+    constructor(host: EventHandlerHost);
+    /**
+     * Initializes event listeners
+     * Should be called once after the grid is set up
+     */
+    initialize(): void;
+    /**
+     * Handles pointer down events (mouse button press or touch start)
+     * Initiates drag interaction and camera zoom
+     */
+    private onPointerDown;
+    /**
+     * Handles pointer move events (mouse move or touch move)
+     * Processes scrolling or hover states depending on interaction state
+     */
+    private onPointerMove;
+    /**
+     * Handles pointer up events (mouse button release or touch end)
+     * Ends drag interaction and applies inertia scrolling
+     */
+    private onPointerUp;
+    /**
+     * Handles pointer leaving the canvas area
+     * Clears hover states when mouse exits
+     */
+    private onPointerOut;
+    /**
+     * Handles window resize events
+     * Updates camera aspect ratio and renderer size
+     */
+    private onWindowResize;
+    /**
+     * Handles hover effects when not dragging
+     * Manages background blur fade in/out based on tile intersection
+     */
+    private handleHover;
+    /**
+     * Handles mouse click events
+     * Processes clicks only if no significant movement occurred
+     */
+    private handleMouseClick;
+    /**
+     * Handles touch end events
+     * Combines pointer up logic with click detection for touch devices
+     */
+    private handleTouchEnd;
+    /**
+     * Performs tile click detection and event dispatching
+     * Uses raycasting to determine which tile was clicked
+     */
+    private performTileClick;
+    /**
+     * Adds all event listeners to the container and window
+     * Should be called once during initialization
+     */
+    private addEventListeners;
+    /**
+     * Removes all event listeners
+     * Should be called during cleanup/disposal
+     */
+    removeEventListeners(): void;
+    /**
+     * Gets the initialization status
+     */
+    get initialized(): boolean;
+}

package/dist/types/components/InfiniteGridComp/component/GridManager.d.ts

@@ -0,0 +1,191 @@
+import { Renderer, Transform, Texture, Mesh } from 'ogl';
+import { CardData, TileGroupData, CardTexturePair } from './types';
+/**
+ * Interface defining the required properties and methods that the GridManager
+ * needs to access from the main InfiniteGrid class
+ */
+export interface GridManagerHost {
+    renderer: Renderer | null;
+    scene: Transform;
+    cardData: CardData[];
+    GRID_COLS: number;
+    GRID_ROWS: number;
+    GRID_WIDTH: number;
+    GRID_HEIGHT: number;
+    TILE_SIZE: number;
+    TILE_SPACE: number;
+    initialBackgroundOpacity: number;
+    tileGroupsData: TileGroupData[];
+    groupObjects: Transform[];
+    foregroundMeshMap: Map<string, Mesh>;
+    backgroundMeshMap: Map<string, Mesh>;
+    cardTextures: CardTexturePair[];
+    staticUniforms: Map<string, any>;
+}
+/**
+ * GridManager handles all grid creation and management functionality
+ *
+ * This class encapsulates the complex logic of creating and managing
+ * the 3x3 infinite grid system including:
+ * - Tile group initialization and positioning
+ * - Dynamic tile creation with proper materials
+ * - Texture generation from card data
+ * - Shader program creation and management
+ * - Tile indexing and key management
+ *
+ * The grid system uses a 3x3 pattern of tile groups where each group
+ * contains a configurable number of individual tiles. This creates
+ * the illusion of infinite content while maintaining performance.
+ */
+export declare class GridManager {
+    private host;
+    private isInitialized;
+    /**
+     * Creates a new GridManager instance
+     * @param host - The main grid class that provides required properties and methods
+     */
+    constructor(host: GridManagerHost);
+    /**
+     * Initializes the complete grid system
+     *
+     * This method sets up the entire grid in the correct order:
+     * 1. Initialize tile group positions
+     * 2. Generate textures for all card data
+     * 3. Create all tile meshes with proper materials
+     *
+     * @returns Promise that resolves when all grid setup is complete
+     */
+    initialize(): Promise<void>;
+    /**
+     * Initializes the 3x3 grid of tile groups for infinite scrolling
+     *
+     * Creates 9 tile groups arranged in a 3x3 pattern. Each group contains
+     * a grid of tiles. As the user scrolls, groups are repositioned to
+     * create the illusion of infinite content.
+     */
+    private initializeTileGroups;
+    /**
+     * Creates all tiles for the grid system
+     *
+     * For each tile group, creates individual tiles with:
+     * - Background mesh (for blur effects)
+     * - Foreground mesh (for content display)
+     * - Proper positioning and parenting
+     * - User data for interaction
+     */
+    private createTiles;
+    /**
+     * Creates a background mesh for blur effects
+     */
+    private createBackgroundMesh;
+    /**
+     * Creates a foreground mesh for content display
+     */
+    private createForegroundMesh;
+    /**
+     * Generates a unique tile key for indexing
+     * @param groupIndex - The index of the tile group (0-8)
+     * @param tileIndex - The index of the tile within the group
+     * @returns A unique string key for the tile
+     */
+    getTileKey(groupIndex: number, tileIndex: number): string;
+    /**
+     * Calculates the card texture index for a given tile
+     * @param groupIndex - The index of the tile group
+     * @param tileIndex - The index of the tile within the group
+     * @returns The index of the card data to use for this tile
+     */
+    getCardTextureIndex(groupIndex: number, tileIndex: number): number;
+    /**
+     * Gets the foreground texture for a specific tile
+     * @param groupIndex - The index of the tile group
+     * @param tileIndex - The index of the tile within the group
+     * @returns The foreground texture or null if not available
+     */
+    getCardForegroundTexture(groupIndex: number, tileIndex: number): Texture | null;
+    /**
+     * Gets the background texture for a specific tile
+     * @param groupIndex - The index of the tile group
+     * @param tileIndex - The index of the tile within the group
+     * @returns The background texture or null if not available
+     */
+    getCardBackgroundTexture(groupIndex: number, tileIndex: number): Texture | null;
+    /**
+     * Creates a shader program for background tiles (with blur effects)
+     * @param groupIndex - The index of the tile group
+     * @param tileIndex - The index of the tile within the group
+     * @returns A configured Program for background rendering
+     */
+    private createBackgroundProgram;
+    /**
+     * Creates a shader program for foreground tiles (content display)
+     * @param groupIndex - The index of the tile group
+     * @param tileIndex - The index of the tile within the group
+     * @returns A configured Program for foreground rendering
+     */
+    private createForegroundProgram;
+    /**
+     * Generates textures for all card data
+     *
+     * Creates both foreground and background textures for each card
+     * using the Canvas 2D API. Textures are cached for efficient reuse.
+     *
+     * @returns Promise that resolves when all textures are generated
+     */
+    private generateTexturesForCardData;
+    /**
+     * Extracts tile key from a mesh using its userData
+     * @param mesh - The mesh to get the tile key from
+     * @returns The tile key or empty string if not found
+     */
+    getTileKeyFromMesh(mesh: Mesh): string;
+    /**
+     * Gets the card data for a specific tile
+     * @param groupIndex - The group index of the tile
+     * @param tileIndex - The tile index within the group
+     * @returns The card data for the tile
+     */
+    getCardDataForTile(groupIndex: number, tileIndex: number): CardData;
+    /**
+     * Updates card data and regenerates textures
+     *
+     * This method allows for dynamic content updates by:
+     * 1. Updating the card data
+     * 2. Regenerating all textures
+     * 3. Updating existing tile programs with new textures
+     *
+     * @param newCardData - The new card data to use
+     * @returns Promise that resolves when update is complete
+     */
+    updateCardData(newCardData: CardData[]): Promise<void>;
+    /**
+     * Updates all tile textures with newly generated textures
+     * This is called after card data changes to refresh the display
+     */
+    private updateTileTextures;
+    /**
+     * Gets all interactive meshes (foreground meshes that can be clicked)
+     * @returns Array of foreground meshes
+     */
+    getInteractiveMeshes(): Mesh[];
+    /**
+     * Clears all grid data and meshes
+     * This is useful for cleanup or reinitialization
+     */
+    clear(): void;
+    /**
+     * Gets the initialization status
+     */
+    get initialized(): boolean;
+    /**
+     * Gets statistics about the current grid
+     * @returns Object containing grid statistics
+     */
+    getGridStats(): {
+        totalGroups: number;
+        tilesPerGroup: number;
+        totalTiles: number;
+        totalTextures: number;
+        memoryEstimate: string;
+    };
+}

package/dist/types/components/InfiniteGridComp/component/InfiniteGrid.vue.d.ts

@@ -0,0 +1,16 @@
+import { InfiniteGridOptions, CardData } from './types';
+interface Props {
+    cardData: CardData[];
+    options?: Partial<InfiniteGridOptions>;
+    onTilesLoaded?: () => void;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    tileClicked: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onTileClicked?: ((...args: any[]) => any) | undefined;
+}>, {
+    options: Partial<InfiniteGridOptions>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    infiniteGridContainer: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;