drawHistogram is called in all funtions before drawCanvas

Author: testica

build/bitmap.js

@@ -691,6 +691,8 @@ define(["require", "exports", "./histogram", "./transform", "./filter"], functio
  properties[3].innerHTML = (this._bitmap.header.size / (1024 * 1024));
  };
  Bitmap.prototype.drawHistogram = function (canvas_r, canvas_g, canvas_b, canvas_avg) {
+ this._histogram = new histogram_1.Histogram();
+ this._histogram.fillAll(this._bitmap.current.data);
  if (!this._grayScale) {
  canvas_avg.style.display = "none";
  canvas_r.style.display = "block";

build/main.js

@@ -122,10 +122,12 @@ define(["require", "exports", "./bitmap"], function (require, exports, bitmap_1)
  var scaleHeight = +document.getElementById("scaleHeight").value;
  if (document.getElementsByName("algorithm")[0].checked) {
  bmp.scale(scaleWidth, scaleHeight, "neighbor");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  }
  else {
  bmp.scale(scaleWidth, scaleHeight, "interpolation");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  }
  });
@@ -138,24 +140,28 @@ define(["require", "exports", "./bitmap"], function (require, exports, bitmap_1)
  var input = +document.getElementById("inputKernel").value;
  bmp.kernel(input, input);
  bmp.blur("box");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  });
  document.getElementById("gaussBlur").addEventListener("click", function () {
  var input = +document.getElementById("inputKernel").value;
  bmp.kernel(input, input);
  bmp.blur("gauss");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  });
  document.getElementById("prewittEdge").addEventListener("click", function () {
  var input = +document.getElementById("inputKernel").value;
  bmp.kernel(3, 3);
  bmp.edge("prewitt");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  });
  document.getElementById("sobelEdge").addEventListener("click", function () {
  var input = +document.getElementById("inputKernel").value;
  bmp.kernel(3, 3);
  bmp.edge("sobel");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  });
  document.getElementById("customFilter").addEventListener("click", function () {
@@ -185,15 +191,20 @@ define(["require", "exports", "./bitmap"], function (require, exports, bitmap_1)
  document.getElementById("custom").style.display = "none";
  bmp.kernel(input, input, custom);
  bmp.customFilter();
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  });
  });
  document.getElementById("undo").addEventListener("click", function () {
- if (bmp.undo())
+ if (bmp.undo()) {
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas, true);
+ }
  });
  document.getElementById("redo").addEventListener("click", function () {
- if (bmp.redo())
+ if (bmp.redo()) {
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas, true);
+ }
  });
 });

src/bitmap.ts

@@ -779,6 +779,8 @@ export class Bitmap {
  }
 
  public drawHistogram(canvas_r: HTMLCanvasElement, canvas_g: HTMLCanvasElement, canvas_b: HTMLCanvasElement, canvas_avg: HTMLCanvasElement) {
+ this._histogram = new Histogram();
+ this._histogram.fillAll(this._bitmap.current.data);
  if (!this._grayScale) {
  canvas_avg.style.display = "none";
  canvas_r.style.display = "block";

src/main.ts

@@ -153,10 +153,12 @@ document.getElementById("scaleBtn").addEventListener("click", () => {
  if ((<HTMLInputElement> document.getElementsByName("algorithm")[0]).checked) {
  // neighbor algorithm
  bmp.scale(scaleWidth, scaleHeight, "neighbor");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  } else {
  // interpolation algorithm
  bmp.scale(scaleWidth, scaleHeight, "interpolation");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  }
 });
@@ -175,6 +177,7 @@ document.getElementById("boxBlur").addEventListener("click", () => {
 
  bmp.kernel(input, input);
  bmp.blur("box");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
 });
 
@@ -184,6 +187,7 @@ document.getElementById("gaussBlur").addEventListener("click", () => {
 
  bmp.kernel(input, input);
  bmp.blur("gauss");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
 });
 
@@ -193,6 +197,7 @@ document.getElementById("prewittEdge").addEventListener("click", () => {
 
  bmp.kernel(3, 3);
  bmp.edge("prewitt");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
 });
 
@@ -202,6 +207,7 @@ document.getElementById("sobelEdge").addEventListener("click", () => {
 
  bmp.kernel(3, 3);
  bmp.edge("sobel");
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
 });
 
@@ -237,18 +243,23 @@ document.getElementById("customFilter").addEventListener("click", () => {
  document.getElementById("custom").style.display = "none";
  bmp.kernel(input, input, custom);
  bmp.customFilter();
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas);
  });
 });
 
 // undo
 document.getElementById("undo").addEventListener("click", () => {
- if (bmp.undo())
+ if (bmp.undo()) {
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas, true);
+ }
 });
 
 // redo
 document.getElementById("redo").addEventListener("click", () => {
- if (bmp.redo())
+ if (bmp.redo()) {
+ bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
  bmp.drawOnCanvas(canvas, true);
+ }
 });