Merge pull request #26 from mohitkumartoshniwal/master

Add Typescript support to the library

.eslintignore

@@ -0,0 +1,2 @@
+dist
+demo

.eslintrc.js

@@ -1,41 +1,56 @@
 module.exports = {
-	extends: 'standard',
-	env: {
-		browser: true,
-		'es6': true
-	},
-	globals: {
-		'Image': true,
-		'Canvas': true
-	},
-	rules: {
-		// allow paren-less arrow functions
-		'arrow-parens': 'off',
-		// allow async-await
-		'generator-star-spacing': 'off',
-		// allow debugger during development
-		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-		//Allow semi colons
-		'semi': ['error', 'always'],
-		//Tab indentation
-		'indent': ['error', 'tab', { 'SwitchCase': 1, 'FunctionDeclaration': { 'body': 1, 'parameters': 2 } }],
-		'no-trailing-spaces': ['error', { 'skipBlankLines': true, 'ignoreComments': true }],
-		'no-tabs': 'off',
-		'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
-		'no-multiple-empty-lines': ['error', { 'max': 2, 'maxEOF': 1 }],
-		"no-global-assign": ["error", {"exceptions": ["window", "document"]}],
-		'no-mixed-operators': [
-			'error',
-			{
-				'groups': [
-					['+', '-', '*', '/', '%', '**'],
-					['&', '|', '^', '~', '<<', '>>', '>>>'],
-					['==', '!=', '===', '!==', '>', '>=', '<', '<='],
-					['&&', '||'],
-					['in', 'instanceof']
-				],
-				'allowSamePrecedence': true
-			}
-		]
-	}
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  env: {
+    browser: true,
+    es6: true,
+  },
+  globals: {
+    Image: true,
+    Canvas: true,
+  },
+  rules: {
+    // allow paren-less arrow functions
+    "arrow-parens": "off",
+    // allow async-await
+    "generator-star-spacing": "off",
+    // allow debugger during development
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    //Allow semi colons
+    semi: ["error", "always"],
+    //Tab indentation
+    indent: [
+      "error",
+      "tab",
+      { SwitchCase: 1, FunctionDeclaration: { body: 1, parameters: 2 } },
+    ],
+    "no-trailing-spaces": [
+      "error",
+      { skipBlankLines: true, ignoreComments: true },
+    ],
+    "no-tabs": "off",
+    // "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+    "no-mixed-spaces-and-tabs": "off",
+    "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }],
+    "no-global-assign": ["error", { exceptions: ["window", "document"] }],
+    // "no-mixed-operators": [
+    //   "error",
+    //   {
+    //     groups: [
+    //       ["+", "-", "*", "/", "%", "**"],
+    //       ["&", "|", "^", "~", "<<", ">>", ">>>"],
+    //       ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+    //       ["&&", "||"],
+    //       ["in", "instanceof"],
+    //     ],
+    //     allowSamePrecedence: true,
+    //   },
+    // ],
+  },
 };

README.md

@@ -129,7 +129,7 @@ Api to set point radius. Accepts float value as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
 ### instance.setGradient(gradient)
-Api to set color gradient. Accepts array of objects with color, value and offset.
+Api to set color gradient. Accepts array of objects with color value and offset.
 
 ### instance.setIntensity(number)
 Api to set Intensity factor. Accepts float value as an input.

dist/heatmap.d.ts

@@ -0,0 +1,109 @@
+import { HeatmapRenderer } from "./heatmapRenderer";
+import { BackgroundImageConfig, GradientElement, HeatmapConfig, Point, Translate } from "./types";
+export declare class Heatmap {
+    private renderer;
+    ctx: WebGL2RenderingContext | null;
+    ratio: number;
+    width: number;
+    height: number;
+    min: number;
+    max: number;
+    size: number;
+    zoom: number;
+    angle: number;
+    intensity: number;
+    translate: [number, number];
+    opacity: number;
+    gradient: import("./types").MappedGradient | null;
+    imageConfig: BackgroundImageConfig | null;
+    constructor(context: string | HTMLElement, config: HeatmapConfig);
+    /**
+   * Set the maximum data value for relative gradient calculations
+   * @param max - number
+   * @returns instance
+   */
+    setMax(max: number): HeatmapRenderer;
+    /**
+   * Set the minimum data value for relative gradient calculations
+   * @param min - number
+   * @returns instance
+   */
+    setMin(min: number): HeatmapRenderer;
+    /**
+   * Accepts array of objects with color value and offset
+   * @param gradient - Color Gradient
+   * @returns instance
+   */
+    setGradient(gradient: GradientElement[]): HeatmapRenderer;
+    /**
+   * Set the translate transformation on the canvas
+   * @param translate - Accepts array [x, y]
+   * @returns instance
+   */
+    setTranslate(translate: Translate): HeatmapRenderer;
+    /**
+   * Set the zoom transformation on the canvas
+   * @param zoom - Accepts float value
+   * @returns instance
+   */
+    setZoom(zoom: number): HeatmapRenderer;
+    /**
+   * Set the  rotation transformation on the canvas
+   * @param angle - Accepts angle in radians
+   * @returns instance
+   */
+    setRotationAngle(angle: number): HeatmapRenderer;
+    /**
+   * Set the point radius
+   * @param size - Accepts float value
+   * @returns instance
+   */
+    setSize(size: number): HeatmapRenderer;
+    /**
+   * Set the intensity factor
+   * @param intensity - Accepts float value
+   * @returns instance
+   */
+    setIntensity(intensity: number): HeatmapRenderer;
+    /**
+   * Set the opacity factor
+   * @param opacity - The opacity factor.
+   * @returns instance
+   */
+    setOpacity(opacity: number): HeatmapRenderer;
+    /**
+   * Set the background image
+   * @param config - Accepts Object with { Url, height, width, x, and y} properties
+   * @returns instance
+   */
+    setBackgroundImage(config: BackgroundImageConfig): HeatmapRenderer | undefined;
+    /**
+   * After adding data points, need to invoke .render() method to update the heatmap
+   * @param data - The data points with 'x', 'y' and 'value'
+   * @param transIntactFlag - Flag indicating whether to apply existing heatmap transformations on the newly added data points
+   * @returns instance
+   */
+    addData(data: Point[], transIntactFlag: boolean): HeatmapRenderer;
+    /**
+   * @param data - Accepts an array of data points with 'x', 'y' and 'value'
+   * @returns instance
+   */
+    renderData(data: Point[]): HeatmapRenderer;
+    /**
+   * Method to re-render the heatmap. This method needs to be invoked as and when configurations get changed
+   */
+    render(): void;
+    /**
+   * Get projected co-ordinates relative to the heatmap layer
+   * @param data - The data point to project.
+   * @returns projected data point.
+   */
+    projection(data: Point): {
+        x: number;
+        y: number;
+    };
+    /**
+   * Clears canvas
+   */
+    clear(): void;
+}

dist/heatmapRenderer.d.ts

@@ -0,0 +1,56 @@
+import { BackgroundImageConfig, GradientElement, HearmapExData, HeatmapConfig, MappedGradient, Point, ShaderProgram, Translate } from "./types";
+export declare class HeatmapRenderer {
+    ctx: WebGL2RenderingContext | null;
+    ratio: number;
+    width: number;
+    height: number;
+    imageConfig: BackgroundImageConfig | null;
+    configMin: number | null;
+    configMax: number | null;
+    min: number;
+    max: number;
+    hearmapExData: HearmapExData | object;
+    gradShadOP: ShaderProgram;
+    colorShadOP: ShaderProgram;
+    imageShaOP: ShaderProgram;
+    fbTexObj: WebGLTexture;
+    fbo: WebGLFramebuffer;
+    size: number;
+    zoom: number;
+    angle: number;
+    intensity: number;
+    translate: [number, number];
+    opacity: number;
+    gradient: MappedGradient | null;
+    imageTexture: WebGLTexture | null;
+    pLen: number | undefined;
+    buffer: ArrayBuffer | undefined;
+    buffer2: ArrayBuffer | undefined;
+    private layer;
+    private dom;
+    private imgWidth;
+    private imgHeight;
+    private heatmapData;
+    private type;
+    constructor(container: string | HTMLElement, config: HeatmapConfig);
+    resize(): void;
+    clear(): void;
+    setMax(max: number): HeatmapRenderer;
+    setMin(min: number): HeatmapRenderer;
+    setGradient(gradient: GradientElement[]): HeatmapRenderer;
+    setTranslate(translate: Translate): this;
+    setZoom(zoom: number): HeatmapRenderer;
+    setRotationAngle(angle: number): HeatmapRenderer;
+    setSize(size: number): HeatmapRenderer;
+    setIntensity(intensity: number): HeatmapRenderer;
+    setOpacity(opacity: number): HeatmapRenderer;
+    setBackgroundImage(config: BackgroundImageConfig): this | undefined;
+    clearData(): void;
+    addData(data: Point[], transIntactFlag: boolean): HeatmapRenderer;
+    renderData(data: Point[]): HeatmapRenderer;
+    render(): void;
+    projection(data: Point): {
+        x: number;
+        y: number;
+    };
+}

dist/main.d.ts

@@ -0,0 +1,3 @@
+import { Heatmap } from "./heatmap";
+import { HeatmapConfig } from "./types";
+export default function (context: string | HTMLElement, config: HeatmapConfig): Heatmap;

dist/shaders.d.ts

@@ -0,0 +1,12 @@
+export declare const GradShader: {
+    vertex: string;
+    fragment: string;
+};
+export declare const ColorShader: {
+    vertex: string;
+    fragment: string;
+};
+export declare const ImageShader: {
+    vertex: string;
+    fragment: string;
+};

dist/types.d.ts

@@ -0,0 +1,65 @@
+export type JavaScriptDataType = number | string | boolean | null | undefined | symbol | bigint | object;
+export type ShaderTypes = "VERTEX_SHADER" | "FRAGMENT_SHADER";
+export type Shader = {
+    vertex: string;
+    fragment: string;
+};
+export interface ShaderProgram {
+    program: WebGLProgram;
+    attr: {
+        bufferType: GLenum;
+        buffer: WebGLBuffer;
+        drawType: GLenum;
+        valueType: GLenum;
+        size: GLint;
+        attribute: number;
+        data: Float32Array;
+    }[];
+    uniform: {
+        [key: string]: WebGLUniformLocation | null;
+    };
+}
+export type Color = [number, number, number, number?];
+export interface GradientElement {
+    color: Color;
+    offset: number;
+}
+export interface MappedGradient {
+    value: Float32Array;
+    length: number;
+    offset: number[];
+}
+export interface Point {
+    x: number;
+    y: number;
+    value: number;
+}
+export type HeatmapConfig = {
+    size?: number;
+    max?: number;
+    min?: number;
+    intensity?: number;
+    translate?: [number, number];
+    zoom?: number;
+    angle?: number;
+    opacity?: number;
+    gradient: GradientElement[];
+    backgroundImage?: BackgroundImageConfig;
+};
+export type HearmapExData = {
+    posVec: Float32Array;
+    rVec: Float32Array;
+    minMax: {
+        min: number;
+        max: number;
+    };
+};
+export interface BackgroundImageConfig {
+    url?: string;
+    width?: number;
+    height?: number;
+    x: number;
+    y: number;
+    image?: HTMLImageElement;
+}
+export type Translate = [number, number];

dist/utils/shaderUtils.d.ts

@@ -0,0 +1,4 @@
+import { Shader, ShaderProgram } from "../types";
+export declare const createImageShader: (ctx: WebGL2RenderingContext, shader: Shader) => ShaderProgram;
+export declare const createGradiantShader: (ctx: WebGL2RenderingContext, shader: Shader) => ShaderProgram;
+export declare const createColorShader: (ctx: WebGL2RenderingContext, shader: Shader) => ShaderProgram;

dist/utils/utils.d.ts

@@ -0,0 +1,6 @@
+import { JavaScriptDataType } from "../types";
+export declare function isNullUndefined(val: unknown): val is null | undefined;
+export declare function isNotNumber(val: unknown): val is Exclude<JavaScriptDataType, number>;
+export declare function isSortedAscending(arr: any[]): boolean;
+/** @see https://codereview.chromium.org/156833002/ */
+export declare function getPixelRatio(ctx: any): number;