Skip to content

Commit

Permalink
Code refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@nswamy14
nswamy14 committed Apr 9, 2024
1 parent 263bc45 commit 2cd7e73
Show file tree
Hide file tree
Showing 9 changed files with 822 additions and 801 deletions.
17 changes: 15 additions & 2 deletions demo/heatmapWithLabels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -92,7 +105,7 @@


// rendering labels
let webglRenderer = i2d.webglLayer(
let webglRenderer = webglLayer(
"#canvas",
{
alpha: true,
Expand Down
115 changes: 59 additions & 56 deletions dist/visualHeatmap.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,6 @@ const ImageShader = {
fragment: "#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "
};

function isNullUndefined(val) {
return val === null || val === undefined;
}
function isNotNumber(val) {
return typeof val !== 'number';
}
function isSortedAscending(arr) {
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i + 1].offset - arr[i].offset < 0) {
return false;
}
}
return true;
}
function gradientMapper(grad) {
if (!Array.isArray(grad) || grad.length < 2) {
throw new Error('Invalid gradient: Expected an array with at least 2 elements.');
}
if (!isSortedAscending(grad)) {
throw new Error('Invalid gradient: Gradient is not sorted');
}
const gradLength = grad.length;
const values = new Float32Array(gradLength * 4);
const offsets = new Array(gradLength);
grad.forEach(function (d, i) {
const baseIndex = i * 4;
values[baseIndex] = d.color[0] / 255;
values[baseIndex + 1] = d.color[1] / 255;
values[baseIndex + 2] = d.color[2] / 255;
values[baseIndex + 3] = d.color[3] !== undefined ? d.color[3] : 1.0;
offsets[i] = d.offset;
});
return {
value: values,
length: gradLength,
offset: offsets
};
}
function createShader(ctx, type, src) {
var shader = ctx.createShader(ctx[type]);
ctx.shaderSource(shader, src);
Expand Down Expand Up @@ -82,8 +44,8 @@ function createProgram(ctx, shader) {
return program;
}
}
function createImageShader(ctx) {
var program = createProgram(ctx, ImageShader);
const createImageShader = function (ctx, shader) {
var program = createProgram(ctx, shader);
return {
program: program,
attr: [{
Expand Down Expand Up @@ -112,9 +74,9 @@ function createImageShader(ctx) {
u_density: ctx.getUniformLocation(program, 'u_density')
}
};
}
function createGradiantShader(ctx) {
var program = createProgram(ctx, GradShader);
};
const createGradiantShader = function (ctx, shader) {
var program = createProgram(ctx, shader);
return {
program: program,
attr: [{
Expand Down Expand Up @@ -146,9 +108,9 @@ function createGradiantShader(ctx) {
u_density: ctx.getUniformLocation(program, 'u_density')
}
};
}
function createColorShader(ctx) {
var program = createProgram(ctx, ColorShader);
};
const createColorShader = function (ctx, shader) {
var program = createProgram(ctx, shader);
return {
program: program,
attr: [{
Expand All @@ -168,6 +130,51 @@ function createColorShader(ctx) {
u_offset: ctx.getUniformLocation(program, 'u_offset')
}
};
};

function isNullUndefined(val) {
return val === null || val === undefined;
}
function isNotNumber(val) {
return typeof val !== 'number';
}
function isSortedAscending(arr) {
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i + 1].offset - arr[i].offset < 0) {
return false;
}
}
return true;
}
function getPixlRatio(ctx) {
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}

function gradientMapper(grad) {
if (!Array.isArray(grad) || grad.length < 2) {
throw new Error('Invalid gradient: Expected an array with at least 2 elements.');
}
if (!isSortedAscending(grad)) {
throw new Error('Invalid gradient: Gradient is not sorted');
}
const gradLength = grad.length;
const values = new Float32Array(gradLength * 4);
const offsets = new Array(gradLength);
grad.forEach(function (d, i) {
const baseIndex = i * 4;
values[baseIndex] = d.color[0] / 255;
values[baseIndex + 1] = d.color[1] / 255;
values[baseIndex + 2] = d.color[2] / 255;
values[baseIndex + 3] = d.color[3] !== undefined ? d.color[3] : 1.0;
offsets[i] = d.offset;
});
return {
value: values,
length: gradLength,
offset: offsets
};
}
function extractData(data, self) {
const len = data.length;
Expand Down Expand Up @@ -203,11 +210,6 @@ function extractData(data, self) {
minMax: dataMinMaxValue
};
}
function getPixlRatio(ctx) {
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}
function transCoOr(data) {
const zoomFactor = this.zoom || 0.1;
const halfWidth = this.width / 2;
Expand Down Expand Up @@ -332,7 +334,7 @@ function imageInstance(url, onLoad, onError) {
imageIns.src = url;
return imageIns;
}
class Chart {
class HeatmapRenderer {
constructor(container, config) {
try {
const res = typeof container === 'string' ? document.querySelector(container) : container instanceof HTMLElement ? container : null;
Expand Down Expand Up @@ -372,9 +374,9 @@ class Chart {
this.hearmapExData = {};
this.layer = layer;
this.dom = res;
this.gradShadOP = createGradiantShader(this.ctx);
this.colorShadOP = createColorShader(this.ctx);
this.imageShaOP = createImageShader(this.ctx);
this.gradShadOP = createGradiantShader(this.ctx, GradShader);
this.colorShadOP = createColorShader(this.ctx, ColorShader);
this.imageShaOP = createImageShader(this.ctx, ImageShader);
this.fbTexObj = ctx.createTexture();
this.fbo = ctx.createFramebuffer();
if (!isNullUndefined(config.size)) {
Expand Down Expand Up @@ -610,9 +612,10 @@ class Chart {
};
}
}

function Heatmap(context) {
let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return new Chart(context, config);
return new HeatmapRenderer(context, config);
}

export { Heatmap as default };
2 changes: 1 addition & 1 deletion dist/visualHeatmap.esm.min.js
View file

Large diffs are not rendered by default.

115 changes: 59 additions & 56 deletions dist/visualHeatmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,6 @@
fragment: "#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "
};

function isNullUndefined(val) {
return val === null || val === undefined;
}
function isNotNumber(val) {
return typeof val !== 'number';
}
function isSortedAscending(arr) {
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i + 1].offset - arr[i].offset < 0) {
return false;
}
}
return true;
}
function gradientMapper(grad) {
if (!Array.isArray(grad) || grad.length < 2) {
throw new Error('Invalid gradient: Expected an array with at least 2 elements.');
}
if (!isSortedAscending(grad)) {
throw new Error('Invalid gradient: Gradient is not sorted');
}
const gradLength = grad.length;
const values = new Float32Array(gradLength * 4);
const offsets = new Array(gradLength);
grad.forEach(function (d, i) {
const baseIndex = i * 4;
values[baseIndex] = d.color[0] / 255;
values[baseIndex + 1] = d.color[1] / 255;
values[baseIndex + 2] = d.color[2] / 255;
values[baseIndex + 3] = d.color[3] !== undefined ? d.color[3] : 1.0;
offsets[i] = d.offset;
});
return {
value: values,
length: gradLength,
offset: offsets
};
}
function createShader(ctx, type, src) {
var shader = ctx.createShader(ctx[type]);
ctx.shaderSource(shader, src);
Expand Down Expand Up @@ -88,8 +50,8 @@
return program;
}
}
function createImageShader(ctx) {
var program = createProgram(ctx, ImageShader);
const createImageShader = function (ctx, shader) {
var program = createProgram(ctx, shader);
return {
program: program,
attr: [{
Expand Down Expand Up @@ -118,9 +80,9 @@
u_density: ctx.getUniformLocation(program, 'u_density')
}
};
}
function createGradiantShader(ctx) {
var program = createProgram(ctx, GradShader);
};
const createGradiantShader = function (ctx, shader) {
var program = createProgram(ctx, shader);
return {
program: program,
attr: [{
Expand Down Expand Up @@ -152,9 +114,9 @@
u_density: ctx.getUniformLocation(program, 'u_density')
}
};
}
function createColorShader(ctx) {
var program = createProgram(ctx, ColorShader);
};
const createColorShader = function (ctx, shader) {
var program = createProgram(ctx, shader);
return {
program: program,
attr: [{
Expand All @@ -174,6 +136,51 @@
u_offset: ctx.getUniformLocation(program, 'u_offset')
}
};
};

function isNullUndefined(val) {
return val === null || val === undefined;
}
function isNotNumber(val) {
return typeof val !== 'number';
}
function isSortedAscending(arr) {
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i + 1].offset - arr[i].offset < 0) {
return false;
}
}
return true;
}
function getPixlRatio(ctx) {
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}

function gradientMapper(grad) {
if (!Array.isArray(grad) || grad.length < 2) {
throw new Error('Invalid gradient: Expected an array with at least 2 elements.');
}
if (!isSortedAscending(grad)) {
throw new Error('Invalid gradient: Gradient is not sorted');
}
const gradLength = grad.length;
const values = new Float32Array(gradLength * 4);
const offsets = new Array(gradLength);
grad.forEach(function (d, i) {
const baseIndex = i * 4;
values[baseIndex] = d.color[0] / 255;
values[baseIndex + 1] = d.color[1] / 255;
values[baseIndex + 2] = d.color[2] / 255;
values[baseIndex + 3] = d.color[3] !== undefined ? d.color[3] : 1.0;
offsets[i] = d.offset;
});
return {
value: values,
length: gradLength,
offset: offsets
};
}
function extractData(data, self) {
const len = data.length;
Expand Down Expand Up @@ -209,11 +216,6 @@
minMax: dataMinMaxValue
};
}
function getPixlRatio(ctx) {
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}
function transCoOr(data) {
const zoomFactor = this.zoom || 0.1;
const halfWidth = this.width / 2;
Expand Down Expand Up @@ -338,7 +340,7 @@
imageIns.src = url;
return imageIns;
}
class Chart {
class HeatmapRenderer {
constructor(container, config) {
try {
const res = typeof container === 'string' ? document.querySelector(container) : container instanceof HTMLElement ? container : null;
Expand Down Expand Up @@ -378,9 +380,9 @@
this.hearmapExData = {};
this.layer = layer;
this.dom = res;
this.gradShadOP = createGradiantShader(this.ctx);
this.colorShadOP = createColorShader(this.ctx);
this.imageShaOP = createImageShader(this.ctx);
this.gradShadOP = createGradiantShader(this.ctx, GradShader);
this.colorShadOP = createColorShader(this.ctx, ColorShader);
this.imageShaOP = createImageShader(this.ctx, ImageShader);
this.fbTexObj = ctx.createTexture();
this.fbo = ctx.createFramebuffer();
if (!isNullUndefined(config.size)) {
Expand Down Expand Up @@ -616,9 +618,10 @@
};
}
}

function Heatmap(context) {
let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return new Chart(context, config);
return new HeatmapRenderer(context, config);
}

return Heatmap;
Expand Down
2 changes: 1 addition & 1 deletion dist/visualHeatmap.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2cd7e73

Please sign in to comment.