@shopify/klint 0.2.0 → 0.3.0

package/dist/plugins/index.d.cts

@@ -0,0 +1,560 @@
+import { K as KlintContext } from '../Klint-CsVzll4n.cjs';
+import 'react';
+
+interface FontPoint {
+    x: number;
+    y: number;
+    contour: number;
+}
+interface FontLetter {
+    center: {
+        x: number;
+        y: number;
+    };
+    letterIndex: number;
+    wordIndex: number;
+    lineIndex: number;
+    width: number;
+    height: number;
+    char?: string;
+}
+interface FontLetterWithPath extends FontLetter {
+    path: Path2D;
+}
+interface FontLetterWithPoints extends FontLetter {
+    shape: FontPoint[];
+}
+interface FontTextBlock {
+    width: number;
+    height: number;
+}
+interface FontPathsResult {
+    letters: FontLetterWithPath[];
+    block: FontTextBlock;
+}
+interface FontPointsResult {
+    letters: FontLetterWithPoints[];
+    block: FontTextBlock;
+}
+interface FontTextOptions {
+    align?: "left" | "center" | "right";
+    baseline?: "top" | "center" | "bottom" | "baseline";
+    anchor?: "default" | "center";
+    letterSpacing?: number;
+    lineSpacing?: number;
+    wordSpacing?: number;
+    sampling?: number;
+    axisValues?: number[];
+}
+interface FontData {
+    toPaths(text: string, size?: number, options?: FontTextOptions): FontPathsResult;
+    toPoints(text: string, size?: number, options?: FontTextOptions): FontPointsResult;
+    layoutText(font: any, text: string, size: number, options?: FontTextOptions): any;
+    head?: {
+        unitsPerEm: number;
+        xMin: number;
+        yMin: number;
+        xMax: number;
+        yMax: number;
+    };
+    hhea?: {
+        ascender: number;
+        descender: number;
+        lineGap: number;
+    };
+    name?: {
+        fontFamily: string;
+        postScriptName: string;
+    };
+    fvar?: any;
+    [key: string]: any;
+}
+declare class FontParser {
+    fonts: Map<any, any>;
+    constructor();
+    load(url: string): Promise<any>;
+    loadFromBuffer(buffer: any): any;
+    createAPI(font: any): any;
+}
+
+/**
+ * Triangle structure for Delaunay triangulation
+ */
+interface Triangle {
+    p1: {
+        x: number;
+        y: number;
+    };
+    p2: {
+        x: number;
+        y: number;
+    };
+    p3: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Static Delaunay Plugin
+ *
+ * Performs Delaunay triangulation on point sets without requiring Klint context.
+ * Context is only passed when drawing operations are needed.
+ *
+ * @example
+ * ```tsx
+ * import { Delaunay } from '@shopify/klint/plugins';
+ *
+ * const draw = (K) => {
+ *   const points = [
+ *     { x: 100, y: 100 },
+ *     { x: 200, y: 150 },
+ *     { x: 150, y: 250 }
+ *   ];
+ *
+ *   const triangles = Delaunay.triangulate(points);
+ *   Delaunay.drawTriangles(K, triangles);
+ * };
+ * ```
+ */
+declare class Delaunay {
+    /**
+     * Perform Delaunay triangulation on a set of points
+     */
+    static triangulate(points: Array<{
+        x: number;
+        y: number;
+    }>): Triangle[];
+    /**
+     * Draw triangles to the canvas
+     */
+    static drawTriangles(ctx: KlintContext, triangles: Triangle[], options?: {
+        fill?: boolean;
+        stroke?: boolean;
+        fillStyle?: string;
+        strokeStyle?: string;
+    }): void;
+    /**
+     * Calculate circumcenter of a triangle
+     */
+    static circumcenter(triangle: Triangle): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Check if a point is inside a triangle's circumcircle
+     */
+    static inCircumcircle(point: {
+        x: number;
+        y: number;
+    }, triangle: Triangle): boolean;
+}
+
+/**
+ * Static CatmullRom Plugin
+ *
+ * Provides Catmull-Rom spline interpolation without requiring Klint context.
+ * Context is only passed when drawing operations are needed.
+ *
+ * @example
+ * ```tsx
+ * import { CatmullRom } from '@shopify/klint/plugins';
+ *
+ * const draw = (K) => {
+ *   const points = [
+ *     { x: 100, y: 100 },
+ *     { x: 200, y: 150 },
+ *     { x: 300, y: 100 },
+ *     { x: 400, y: 200 }
+ *   ];
+ *
+ *   const smooth = CatmullRom.interpolate(points);
+ *   CatmullRom.draw(K, points);
+ * };
+ * ```
+ */
+declare class CatmullRom {
+    /**
+     * Interpolate points using Catmull-Rom spline
+     */
+    static interpolate(points: Array<{
+        x: number;
+        y: number;
+    }>, tension?: number, segments?: number): Array<{
+        x: number;
+        y: number;
+    }>;
+    /**
+     * Draw interpolated curve to canvas
+     */
+    static draw(ctx: KlintContext, points: Array<{
+        x: number;
+        y: number;
+    }>, options?: {
+        tension?: number;
+        segments?: number;
+        closed?: boolean;
+        strokeStyle?: string;
+        lineWidth?: number;
+    }): void;
+    /**
+     * Get path as a Path2D object
+     */
+    static toPath2D(points: Array<{
+        x: number;
+        y: number;
+    }>, options?: {
+        tension?: number;
+        segments?: number;
+        closed?: boolean;
+    }): Path2D;
+}
+
+/**
+ * Configuration options for Things plugin
+ */
+interface ThingsConfig {
+    maxThings?: number;
+    defaultSize?: number;
+    defaultColor?: string;
+}
+/**
+ * Individual Thing interface
+ */
+interface Thing {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    scale: number;
+    color: string;
+    data?: any;
+}
+/**
+ * Static Things Plugin
+ *
+ * Manages a collection of "things" - generic objects that can be positioned,
+ * transformed, and rendered without requiring Klint context initialization.
+ * Context is only passed when drawing operations are needed.
+ *
+ * @example
+ * ```tsx
+ * import { Things } from '@shopify/klint/plugins';
+ *
+ * // Create things
+ * Things.create({ x: 100, y: 100 });
+ * Things.create({ x: 200, y: 200, color: '#ff0066' });
+ *
+ * // Update and draw
+ * Things.animatePhysics(deltaTime);
+ * Things.draw(K);
+ * ```
+ */
+declare class Things {
+    private static things;
+    private static config;
+    private static idCounter;
+    /**
+     * Configure the plugin
+     */
+    static configure(config: ThingsConfig): void;
+    /**
+     * Create a new thing
+     */
+    static create(options?: Partial<Thing>): Thing;
+    /**
+     * Get a thing by ID
+     */
+    static get(id: string): Thing | undefined;
+    /**
+     * Get all things
+     */
+    static getAll(): Thing[];
+    /**
+     * Update a thing's properties
+     */
+    static update(id: string, updates: Partial<Thing>): void;
+    /**
+     * Remove a thing
+     */
+    static remove(id: string): boolean;
+    /**
+     * Clear all things
+     */
+    static clear(): void;
+    /**
+     * Move a thing
+     */
+    static move(id: string, dx: number, dy: number): void;
+    /**
+     * Rotate a thing
+     */
+    static rotate(id: string, angle: number): void;
+    /**
+     * Scale a thing
+     */
+    static scale(id: string, factor: number): void;
+    /**
+     * Find things within a radius
+     */
+    static findNear(x: number, y: number, radius: number): Thing[];
+    /**
+     * Find things that overlap with a rectangle
+     */
+    static findInRect(x: number, y: number, width: number, height: number): Thing[];
+    /**
+     * Apply a function to all things
+     */
+    static forEach(fn: (thing: Thing) => void): void;
+    /**
+     * Map things to a new array
+     */
+    static map<T>(fn: (thing: Thing) => T): T[];
+    /**
+     * Filter things
+     */
+    static filter(fn: (thing: Thing) => boolean): Thing[];
+    /**
+     * Sort things by a property or function
+     */
+    static sort(fn: (a: Thing, b: Thing) => number): Thing[];
+    /**
+     * Draw all things
+     */
+    static draw(ctx: KlintContext, options?: {
+        customDraw?: (ctx: KlintContext, thing: Thing) => void;
+        filter?: (thing: Thing) => boolean;
+    }): void;
+    /**
+     * Default drawing method for a thing
+     */
+    private static drawThing;
+    /**
+     * Animate things with a simple physics update
+     */
+    static animatePhysics(deltaTime: number, options?: {
+        gravity?: number;
+        friction?: number;
+        bounds?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    }): void;
+    /**
+     * Get the count of things
+     */
+    static count(): number;
+    /**
+     * Check if a thing exists
+     */
+    static has(id: string): boolean;
+    /**
+     * Utility: Get distance between two things
+     */
+    static distance(id1: string, id2: string): number;
+    /**
+     * Utility: Check collision between two things
+     */
+    static collides(id1: string, id2: string): boolean;
+}
+
+/**
+ * Sprite configuration
+ */
+interface SpriteConfig {
+    name: string;
+    url: string;
+    spriteWidth: number;
+    spriteHeight: number;
+    gap?: number;
+}
+/**
+ * Spritesheet data
+ */
+interface Spritesheet {
+    image: HTMLImageElement;
+    srcNaturalWidth: number;
+    srcNaturalHeight: number;
+    numSprites: number;
+    spriteWidth: number;
+    spriteHeight: number;
+    gap: number;
+    cols: number;
+    rows: number;
+}
+/**
+ * Static Sprites Plugin
+ *
+ * Manages spritesheets and sprite rendering without requiring Klint context initialization.
+ * Context is only passed when drawing operations are needed.
+ *
+ * @example
+ * ```tsx
+ * import { Sprites } from '@shopify/klint/plugins';
+ *
+ * const preload = async () => {
+ *   await Sprites.load({
+ *     name: 'player',
+ *     url: '/assets/player-sprites.png',
+ *     spriteWidth: 32,
+ *     spriteHeight: 32,
+ *     gap: 0
+ *   });
+ * };
+ *
+ * const draw = (K) => {
+ *   const sheet = Sprites.sheet('player');
+ *   const frame = Math.floor(K.frame / 10) % sheet.numSprites;
+ *   Sprites.draw(K, 'player', frame, 100, 100);
+ * };
+ * ```
+ */
+declare class Sprites {
+    private static spritesheets;
+    private static loadingPromises;
+    /**
+     * Load one or more spritesheets
+     * @param configs - Sprite configuration(s) to load
+     * @returns Promise that resolves when all sprites are loaded
+     */
+    static load(...configs: SpriteConfig[]): Promise<void>;
+    /**
+     * Load a single spritesheet
+     * @param config - Sprite configuration
+     * @returns Promise that resolves when sprite is loaded
+     */
+    private static loadSingle;
+    /**
+     * Get spritesheet information
+     * @param name - Name of the spritesheet
+     * @returns Spritesheet data or undefined if not loaded
+     */
+    static sheet(name: string): Spritesheet | undefined;
+    /**
+     * Draw a sprite from a spritesheet
+     * @param ctx - Klint context
+     * @param sheetName - Name of the spritesheet
+     * @param sprite - Sprite index to draw
+     * @param x - X position to draw at
+     * @param y - Y position to draw at
+     * @param options - Drawing options
+     */
+    static draw(ctx: KlintContext, sheetName: string, sprite: number, x: number, y: number, options?: {
+        width?: number;
+        height?: number;
+        rotation?: number;
+        scale?: number;
+        flipX?: boolean;
+        flipY?: boolean;
+        alpha?: number;
+    }): void;
+    /**
+     * Draw a sprite at its actual position without centering
+     * @param ctx - Klint context
+     * @param sheetName - Name of the spritesheet
+     * @param sprite - Sprite index to draw
+     * @param x - X position to draw at
+     * @param y - Y position to draw at
+     * @param width - Width to draw (optional)
+     * @param height - Height to draw (optional)
+     */
+    static drawCorner(ctx: KlintContext, sheetName: string, sprite: number, x: number, y: number, width?: number, height?: number): void;
+    /**
+     * Create an animation from a range of sprites
+     * @param sheetName - Name of the spritesheet
+     * @param startSprite - Starting sprite index
+     * @param endSprite - Ending sprite index
+     * @param frameDuration - Duration of each frame in milliseconds
+     * @returns Animation object
+     */
+    static animation(sheetName: string, startSprite: number, endSprite: number, frameDuration?: number): SpriteAnimation;
+    /**
+     * Check if a spritesheet is loaded
+     * @param name - Name of the spritesheet
+     * @returns True if loaded, false otherwise
+     */
+    static hasSheet(name: string): boolean;
+    /**
+     * Unload a spritesheet
+     * @param name - Name of the spritesheet to unload
+     */
+    static unload(name: string): void;
+    /**
+     * Unload all spritesheets
+     */
+    static clear(): void;
+    /**
+     * Get the number of loaded spritesheets
+     * @returns Number of loaded spritesheets
+     */
+    static count(): number;
+    /**
+     * Get all loaded spritesheet names
+     * @returns Array of spritesheet names
+     */
+    static getSheetNames(): string[];
+}
+/**
+ * Sprite animation helper class
+ */
+declare class SpriteAnimation {
+    private sheetName;
+    private startSprite;
+    private endSprite;
+    private frameDuration;
+    private currentFrame;
+    private lastFrameTime;
+    private playing;
+    private loop;
+    constructor(sheetName: string, startSprite: number, endSprite: number, frameDuration: number);
+    /**
+     * Update animation frame
+     * @param deltaTime - Time since last update in milliseconds
+     */
+    update(deltaTime: number): void;
+    /**
+     * Draw the current animation frame
+     * @param ctx - Klint context
+     * @param x - X position
+     * @param y - Y position
+     * @param options - Drawing options
+     */
+    draw(ctx: KlintContext, x: number, y: number, options?: Parameters<typeof Sprites.draw>[5]): void;
+    /**
+     * Play the animation
+     */
+    play(): void;
+    /**
+     * Pause the animation
+     */
+    pause(): void;
+    /**
+     * Stop the animation and reset to start
+     */
+    stop(): void;
+    /**
+     * Set whether the animation should loop
+     * @param loop - True to loop, false to play once
+     */
+    setLoop(loop: boolean): void;
+    /**
+     * Get the current frame
+     * @returns Current frame index
+     */
+    getCurrentFrame(): number;
+    /**
+     * Set the current frame
+     * @param frame - Frame index to set
+     */
+    setFrame(frame: number): void;
+    /**
+     * Check if animation is playing
+     * @returns True if playing, false otherwise
+     */
+    isPlaying(): boolean;
+}
+
+export { CatmullRom, Delaunay, type FontData, type FontLetter, type FontLetterWithPath, type FontLetterWithPoints, FontParser, type FontPathsResult, type FontPoint, type FontPointsResult, type FontTextBlock, type FontTextOptions, Sprites, Things };