@webeach/gl-circular-progress 0.2.0

package/lib/types/classes/CircularProgressFire/CircularProgressFire.d.ts

@@ -0,0 +1,98 @@
+import { BaseCircularProgress } from '../BaseCircularProgress';
+import type { CircularProgressFireOptions } from './types';
+/**
+ * A circular progress indicator with a fire effect.
+ * Uses WebGL 2.0 for rendering.
+ *
+ * @example
+ * const instance = new CircularProgressFire(canvas, {
+ *   colors: [0xff5a00, 0xff9a00],
+ *   intensity: 1.0,
+ *   progress: 0.5,
+ *   speed: 1.5,
+ *   thickness: 20,
+ * });
+ *
+ * @see https://webeach.github.io/gl-circular-progress/CircularProgressFire.html - Live Demo
+ * @see https://github.com/webeach/gl-circular-progress/blob/main/docs/en/CircularProgressFire.md - Documentation
+ */
+export declare class CircularProgressFire extends BaseCircularProgress {
+    private readonly extraState;
+    private animationFrameId;
+    private gl;
+    private gradientTexture;
+    private lastFrameTime;
+    private locations;
+    private program;
+    private targetProgress;
+    private time;
+    private visualProgress;
+    /**
+     * Creates an instance of CircularProgressFire.
+     *
+     * @param canvas - The HTMLCanvasElement to render on.
+     * @param options - Configuration options.
+     */
+    constructor(canvas: HTMLCanvasElement, options: CircularProgressFireOptions);
+    /**
+     * Cleans up WebGL resources and stops animation.
+     */
+    destroy(): void;
+    /**
+     * Gets the current intensity.
+     */
+    get intensity(): number;
+    /**
+     * Sets the intensity and updates rendering.
+     */
+    set intensity(value: number);
+    /**
+     * Handles resizing of the canvas and updates WebGL viewport.
+     */
+    protected resize(): void;
+    /**
+     * Updates WebGL uniforms when colors change.
+     */
+    protected updateColors(): void;
+    /**
+     * Creates the gradient texture from the colors option.
+     */
+    private createGradientTexture;
+    protected updateIntensity(): void;
+    /**
+     * Updates the progress value.
+     *
+     * @param value - The new progress value (0.0 to 1.0).
+     */
+    protected updateProgress(value: number): void;
+    /**
+     * Updates WebGL uniforms when direction changes.
+     */
+    protected updateReversed(): void;
+    /**
+     * Updates WebGL uniforms when speed changes.
+     */
+    protected updateSpeed(): void;
+    /**
+     * Updates WebGL uniforms when start angle changes.
+     */
+    protected updateStartAngle(): void;
+    /**
+     * Updates WebGL uniforms when thickness changes.
+     */
+    protected updateThickness(): void;
+    /**
+     * The main animation loop.
+     */
+    private animate;
+    /**
+     * Creates and compiles a shader.
+     */
+    private createShader;
+    /**
+     * Initializes WebGL context and shaders.
+     */
+    private initWebGL;
+    private startAnimation;
+}
+//# sourceMappingURL=CircularProgressFire.d.ts.map

package/lib/types/classes/CircularProgressFire/CircularProgressFire.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressFire.d.ts","sourceRoot":"","sources":["../../../../src/classes/CircularProgressFire/CircularProgressFire.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAK/D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,oBAAqB,SAAQ,oBAAoB;IAC5D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,EAAE,CAAuC;IACjD,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,SAAS,CAUD;IAChB,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,cAAc,CAAe;IAErC;;;;;OAKG;gBACS,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,2BAA2B;IAkB3E;;OAEG;IACa,OAAO,IAAI,IAAI;IAkB/B;;OAEG;IACH,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED;;OAEG;IACH,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAGjC;IAED;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;IAaxB;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoE7B,SAAS,CAAC,eAAe,IAAI,IAAI;IAOjC;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7C;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAUhC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAQlC;;OAEG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAIjC;;OAEG;IACH,OAAO,CAAC,OAAO;IA6Cf;;OAEG;IACH,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACH,OAAO,CAAC,SAAS;IAqEjB,OAAO,CAAC,cAAc;CAGvB"}

package/lib/types/classes/CircularProgressFire/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CircularProgressFire';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/classes/CircularProgressFire/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/classes/CircularProgressFire/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC"}

package/lib/types/classes/CircularProgressFire/types.d.ts

@@ -0,0 +1,12 @@
+import type { BaseCircularProgressOptions } from '../BaseCircularProgress';
+/**
+ * Options for the CircularProgressFire class.
+ */
+export type CircularProgressFireOptions = BaseCircularProgressOptions & {
+    /**
+     * Intensity of the fire effect.
+     * @default 1.0
+     */
+    intensity?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/types/classes/CircularProgressFire/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/classes/CircularProgressFire/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG,2BAA2B,GAAG;IACtE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/lib/types/classes/CircularProgressLiquid/CircularProgressLiquid.d.ts

@@ -0,0 +1,99 @@
+import { BaseCircularProgress } from '../BaseCircularProgress';
+import type { CircularProgressLiquidOptions } from './types';
+/**
+ * A circular progress indicator with a liquid/water effect.
+ * Uses WebGL 2.0 for rendering.
+ *
+ * @example
+ * const instance = new CircularProgressLiquid(canvas, {
+ *   colors: [0x00c6ff, 0x0072ff],
+ *   progress: 0.6,
+ *   speed: 0.5,
+ *   thickness: 30,
+ *   volume: 0.5,
+ * });
+ *
+ * @see https://webeach.github.io/gl-circular-progress/CircularProgressLiquid.html - Live Demo
+ * @see https://github.com/webeach/gl-circular-progress/blob/main/docs/en/CircularProgressLiquid.md - Documentation
+ */
+export declare class CircularProgressLiquid extends BaseCircularProgress {
+    private readonly extraState;
+    private animationFrameId;
+    private flowTime;
+    private gl;
+    private gradientTexture;
+    private lastFrameTime;
+    private locations;
+    private program;
+    private targetProgress;
+    private velocity;
+    private visualProgress;
+    /**
+     * Creates an instance of CircularProgressLiquid.
+     *
+     * @param canvas - The HTMLCanvasElement to render on.
+     * @param options - Configuration options.
+     */
+    constructor(canvas: HTMLCanvasElement, options: CircularProgressLiquidOptions);
+    /**
+     * Cleans up WebGL resources and stops animation.
+     */
+    destroy(): void;
+    /**
+     * Gets the current volume.
+     */
+    get volume(): number;
+    /**
+     * Sets the volume and updates rendering.
+     */
+    set volume(value: number);
+    /**
+     * Handles resizing of the canvas and updates WebGL viewport.
+     */
+    protected resize(): void;
+    /**
+     * Updates WebGL uniforms when colors change.
+     */
+    protected updateColors(): void;
+    /**
+     * Updates the progress value.
+     *
+     * @param value - The new progress value (0.0 to 1.0).
+     */
+    protected updateProgress(value: number): void;
+    /**
+     * Updates WebGL uniforms when direction changes.
+     */
+    protected updateReversed(): void;
+    /**
+     * Updates WebGL uniforms when speed changes.
+     */
+    protected updateSpeed(): void;
+    /**
+     * Updates WebGL uniforms when start angle changes.
+     */
+    protected updateStartAngle(): void;
+    /**
+     * Updates WebGL uniforms when thickness changes.
+     */
+    protected updateThickness(): void;
+    protected updateVolume(): void;
+    /**
+     * The main animation loop.
+     */
+    private animate;
+    /**
+     * Creates the gradient texture from the colors option.
+     */
+    private createGradientTexture;
+    /**
+     * Creates and compiles a shader.
+     */
+    private createShader;
+    /**
+     * Initializes WebGL context and shaders.
+     */
+    private initWebGL;
+    private startAnimation;
+}
+//# sourceMappingURL=CircularProgressLiquid.d.ts.map

package/lib/types/classes/CircularProgressLiquid/CircularProgressLiquid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressLiquid.d.ts","sourceRoot":"","sources":["../../../../src/classes/CircularProgressLiquid/CircularProgressLiquid.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAK/D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,sBAAuB,SAAQ,oBAAoB;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,EAAE,CAAuC;IACjD,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,SAAS,CAWD;IAChB,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,cAAc,CAAe;IAErC;;;;;OAKG;gBAED,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,6BAA6B;IAmBxC;;OAEG;IACa,OAAO,IAAI,IAAI;IAkB/B;;OAEG;IACH,IAAW,MAAM,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAG9B;IAED;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;IAaxB;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7C;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAUhC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAQlC;;OAEG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAIjC,SAAS,CAAC,YAAY,IAAI,IAAI;IAO9B;;OAEG;IACH,OAAO,CAAC,OAAO;IA0Df;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAgE7B;;OAEG;IACH,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACH,OAAO,CAAC,SAAS;IAsEjB,OAAO,CAAC,cAAc;CAGvB"}

package/lib/types/classes/CircularProgressLiquid/index.d.ts

@@ -0,0 +1,3 @@
+export { CircularProgressLiquid } from './CircularProgressLiquid';
+export type { CircularProgressLiquidOptions } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/classes/CircularProgressLiquid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/classes/CircularProgressLiquid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC"}

package/lib/types/classes/CircularProgressLiquid/types.d.ts

@@ -0,0 +1,13 @@
+import type { BaseCircularProgressOptions } from '../BaseCircularProgress';
+/**
+ * Options for the CircularProgressLiquid class.
+ */
+export type CircularProgressLiquidOptions = BaseCircularProgressOptions & {
+    /**
+     * Volume (3D/Lens effect) intensity.
+     * Value usually between 0.0 (flat) and 1.0 (strong effect).
+     * @default 0
+     */
+    volume?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/types/classes/CircularProgressLiquid/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/classes/CircularProgressLiquid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,6BAA6B,GAAG,2BAA2B,GAAG;IACxE;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classes/CircularProgressLiquid';
+export * from './classes/CircularProgressFire';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC"}

package/lib/types/types/core.d.ts

@@ -0,0 +1,4 @@
+export type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+//# sourceMappingURL=core.d.ts.map

package/lib/types/types/core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../src/types/core.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI;IACvB,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC/B,CAAC"}

package/lib/types/utils/hexToCss/hexToCss.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts a hexadecimal color number to a CSS color string.
+ *
+ * @param hex - The hexadecimal color number (e.g., 0xFF5733).
+ * @returns The CSS color string in #RRGGBB format.
+ *
+ * @example
+ * const cssColor = hexToCss(0xFF5733);
+ * // Returns '#ff5733'
+ *
+ * @example
+ * const cssColor = hexToCss(0x0000FF);
+ * // Returns '#0000ff'
+ */
+export declare function hexToCss(hex: number): string;
+//# sourceMappingURL=hexToCss.d.ts.map

package/lib/types/utils/hexToCss/hexToCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexToCss.d.ts","sourceRoot":"","sources":["../../../../src/utils/hexToCss/hexToCss.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE5C"}

package/lib/types/utils/hexToCss/index.d.ts

@@ -0,0 +1,2 @@
+export { hexToCss } from './hexToCss';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/utils/hexToCss/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/hexToCss/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@webeach/gl-circular-progress",
+  "version": "0.2.0",
+  "author": {
+    "name": "Ruslan Martynov",
+    "email": "github@webea.ch"
+  },
+  "description": "Beautiful WebGL circular progress bars library (Fire and Liquid effects).",
+  "keywords": [
+    "webgl",
+    "circular-progress",
+    "progress-bar",
+    "canvas",
+    "fire",
+    "liquid",
+    "shader",
+    "typescript",
+    "ui",
+    "component",
+    "webeach"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webeach/gl-circular-progress"
+  },
+  "bugs": {
+    "url": "https://github.com/webeach/gl-circular-progress/issues"
+  },
+  "homepage": "https://webeach.github.io/gl-circular-progress",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": "^22",
+    "pnpm": "^10"
+  },
+  "type": "module",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "files": [
+    "docs/en",
+    "lib",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:demo": "rm -rf demo/lib && ln -s ../lib/esm demo/lib",
+    "build:watch": "rollup -c -w",
+    "start": "pnpm run build:demo && npx http-server demo",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "lint:types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "release": "semantic-release",
+    "generate-exports": "tsx ./scripts/generate-exports.ts",
+    "prepare": "is-ci || husky"
+  },
+  "lint-staged": {
+    "**/*.{cjs,cts,js,jsx,mjs,mts,ts,tsx}": [
+      "pnpm run lint"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.35.0",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.5",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.1",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "fast-glob": "^3.3.3",
+    "globals": "^16.4.0",
+    "husky": "^9.1.7",
+    "is-ci": "^4.1.0",
+    "lint-staged": "^16.1.6",
+    "prettier": "^3.6.2",
+    "rollup": "^4.50.1",
+    "rollup-plugin-glsl": "^1.3.0",
+    "rollup-plugin-node-externals": "^8.1.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "semantic-release": "^24.2.7",
+    "tsx": "^4.20.5",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.43.0",
+    "vitest": "^3.2.4"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    },
+    "./CircularProgressFire": {
+      "types": "./lib/types/classes/CircularProgressFire/index.d.ts",
+      "import": "./lib/esm/classes/CircularProgressFire/index.js",
+      "require": "./lib/cjs/classes/CircularProgressFire/index.js"
+    },
+    "./CircularProgressLiquid": {
+      "types": "./lib/types/classes/CircularProgressLiquid/index.d.ts",
+      "import": "./lib/esm/classes/CircularProgressLiquid/index.js",
+      "require": "./lib/cjs/classes/CircularProgressLiquid/index.js"
+    }
+  }
+}