merged Master branch changes

.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

@@ -26,7 +26,7 @@ Or Download source code from below links
 # Usage
 
 ### Importing
-Visual-Heatmap provides ES6 and UMD modules. Accordingly module can be embeded into applications.
+Visual-Heatmap offers both ES6 and UMD modules, making it possible to integrate the module into applications as needed.
 
 ```
 import Heatmap from 'visual-heatmap'
@@ -128,6 +128,9 @@ Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 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.
+
 ### instance.setIntensity(number)
 Api to set Intensity factor. Accepts float value as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
@@ -144,6 +147,9 @@ Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 Api to get projected co-ordinates relative to the heatmap layer.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html)
 
+### instance.resize()
+Api to rerender heatmep on parent container resizes.
+
 ### instance.clear()
 Api to clear canvas.
 

babel.config.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead"
+      }
+    ]
+  ]
+}

demo/heatmapWithLabels.html

@@ -12,7 +12,20 @@
 <script type="text/javascript" src="./../dist/visualHeatmap.js"></script>
 <script type="text/javascript" src="./dat.gui.min.js"></script>
 
-<script type="text/javascript">
+<script type="importmap">
+{
+    "imports": {
+        "i2djs": "https://i2djs.github.io/I2Djs/dist/i2d.esm.js",
+        "visualHeatmap": "./../dist/visualHeatmap.esm.js"
+    }
+}
+</script>
+
+<script type="module">
+
+import Heatmap from "visualHeatmap";
+import { webglLayer } from "i2djs";
+
 let data = [];
 let instance = visualHeatmap('#canvas', {
         size: 50.0,
@@ -92,7 +105,7 @@
 
 
     // rendering labels
-    let webglRenderer = i2d.webglLayer(
+    let webglRenderer = webglLayer(
                 "#canvas",
                 {
                     alpha: true,

dist/types/heatmap.d.ts

@@ -0,0 +1,129 @@
+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;
+    size: number;
+    zoom: number;
+    angle: number;
+    intensity: number;
+    translate: [number, number];
+    opacity: number;
+    hearmapExData: HearmapExData | object;
+    gradient: MappedGradient | null;
+    _imageTexture: WebGLTexture | null;
+    _pDataLength: number | undefined;
+    _gradShadOP: ShaderProgram;
+    _colorShadOP: ShaderProgram;
+    _imageShaOP: ShaderProgram;
+    _fbTexObj: WebGLTexture;
+    _fbo: WebGLFramebuffer;
+    private layer;
+    private dom;
+    private imgWidth;
+    private imgHeight;
+    private heatmapData;
+    private type;
+    constructor(container: string | HTMLElement, config: HeatmapConfig);
+    /**
+    * Invoke resize method on container resize.
+    */
+    resize(): void;
+    clear(): void;
+    /**
+    * 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 on the Heatmap
+   * @param translate - Accepts array [x, y]
+   * @returns instance
+   */
+    setTranslate(translate: Translate): HeatmapRenderer;
+    /**
+   * Set the zoom transformation on the Heatmap
+   * @param zoom - Accepts float value
+   * @returns instance
+   */
+    setZoom(zoom: number): HeatmapRenderer;
+    /**
+   * Set the  rotation transformation on the Heatmap
+   * @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;
+    /**
+   * Clear heatmap
+   */
+    clearData(): void;
+    /**
+   * Method to append data points. This method automatically adds new data points to the existing dataset and the heatmap updates in immediately. no need to call the ".render" method separately.
+   * @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;
+    /**
+   * Method to load data. This will override any existing data.
+   * @param data - Accepts an array of data points with 'x', 'y' and 'value'
+   * @returns instance
+   */
+    renderData(data: Point[]): HeatmapRenderer;
+    /**
+   * Method to update the heatmap. This method to be invoked on every change in configuration.
+   */
+    render(): void;
+    /**
+   * Get projected co-ordinates relative to the heatmap
+   * @param data - The data point to project.
+   * @returns projected data point.
+   */
+    projection(data: Point): {
+        x: number;
+        y: number;
+    };
+}

dist/types/main.d.ts

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

dist/types/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/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/types/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/types/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;