import { DrawImage } from "./drawImage"
import { DrawChart } from "./drawChart"
import * as Help from "./helper"
import * as Dygraph from "dygraphs";
export class Events {
private image: DrawImage;
private chart: DrawChart;
//////////////////// Chart ///////////////////////////
private readonly setLinearButtonID: string = "setlinearButton";
private readonly setLogButtonID: string = "setlogButton";
private readonly setEnergyButtonID: string = "setEnergyButton";
private readonly setChannelButtonID: string = "setChannelsButton";
private readonly exportGraphID: string = "ExportGraph";
private readonly readSpinBoxID: string = "readSpinbox";
private readonly chartElementID: string = "chart";
private readonly elementSelectID: string = "elementSelect";
private _setLinearButton: HTMLAnchorElement;
private _setLogButton: HTMLAnchorElement;
private _setEnergyButton: HTMLAnchorElement;
private _setChannelButton: HTMLAnchorElement;
private _exportgraph: HTMLAnchorElement;
private _readSpinBox: HTMLButtonElement;
private _chartElement: HTMLElement;
private _elementSelect: HTMLSelectElement;
public spinBoxMin: HTMLInputElement;
public spinBoxMax: HTMLInputElement;
//////////////////// Image ///////////////////////////
private _startX: number;
private _startY: number;
private _mouseX: number;
private _mouseY: number;
private readonly _saturationSliderID: string = "SaturationSlider";
private readonly _replotButtonID: string = "rePlot";
private readonly _transparencySliderID: string = "TrasparencySlider";
private readonly _resetID: string = "reset";
private readonly _exportImageID: string = "ExportImage";
private readonly _selectionCanvasID: string = "selectionCanvas";
private readonly _myCanvasID: string = "myCanvas";
private _saturationSlider: HTMLInputElement;
private _replotButton: HTMLButtonElement;
private _transparencySlider: HTMLInputElement;
private _reset: HTMLDivElement;
private _exportImage: HTMLDivElement;
private _selectionCanvas: HTMLCanvasElement;
private _myCanvas: HTMLCanvasElement;
private _ctx;
private _isDown = false;
constructor(image: DrawImage, chart: DrawChart) {
this.image = image;
this.chart = chart;
//////////////////// Chart ///////////////////////////
this._setLinearButton = <HTMLAnchorElement>document.getElementById(this.setLinearButtonID);
this._setLinearButton.addEventListener("click", this.setLinearButtonClick, false);
this._setLogButton = <HTMLAnchorElement>document.getElementById(this.setLogButtonID);
this._setLogButton.addEventListener("click", this.setLogButtonClick, false);
this._setEnergyButton = <HTMLAnchorElement>document.getElementById(this.setEnergyButtonID);
this._setEnergyButton.addEventListener("click", this.setEnergyButtonClick, false);
this._setChannelButton = <HTMLAnchorElement>document.getElementById(this.setChannelButtonID);
this._setChannelButton.addEventListener("click", this.setChannelButtonClick, false);
this._exportgraph = <HTMLAnchorElement>document.getElementById(this.exportGraphID);
this._exportgraph.addEventListener("click", this.exportGraphClick, false);
this._readSpinBox = <HTMLButtonElement>document.getElementById(this.readSpinBoxID);
this._readSpinBox.addEventListener("click", this.readSpinBoxClick, false);
this._chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this._chartElement.addEventListener("click", this.chartClick, false);
this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this._elementSelect.addEventListener("select", this.elementSelect, false);
//////////////////// Image ///////////////////////////
this._selectionCanvas = <HTMLCanvasElement>document.getElementById(this._selectionCanvasID);
this._ctx = this._selectionCanvas.getContext("2d");
this._myCanvas = <HTMLCanvasElement>document.getElementById(this._myCanvasID);
this._saturationSlider = <HTMLInputElement>document.getElementById(this._saturationSliderID);
this._replotButton = <HTMLButtonElement>document.getElementById(this._replotButtonID);
this._transparencySlider = <HTMLInputElement>document.getElementById(this._transparencySliderID);
this._reset = <HTMLDivElement>document.getElementById(this._resetID);
this._exportImage = <HTMLDivElement>document.getElementById(this._exportImageID);
this._saturationSlider.addEventListener("mouseup", this.saturationSliderMouseUp, false);
this._replotButton.addEventListener("click", this.replotButtonClick, false);
this._transparencySlider.addEventListener("mouseup", this.trasparencySliderMouseUp, false);
this._reset.addEventListener("click", this.resetClick, false);
this._exportImage.addEventListener("click", this.exportImageClick, false);
this._selectionCanvas.addEventListener("mousedown", this.selectionCanvasMouseDown, false);
this._selectionCanvas.addEventListener("mouseup", this.clickdown, false);
this._selectionCanvas.addEventListener("mousemove", this.selectionCanvasMouseMove, false);
this._selectionCanvas.addEventListener("mouseup", this.selectionCanvasMouseUp, false);
this._selectionCanvas.addEventListener("mouseout", this.selectionCanvasMouseOut, false);
}
private saturationSliderMouseUp = (event: MouseEvent): void => {
this.image.drawImg(this.image._pixel1, this.image._pixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
};
private replotButtonClick = (event: MouseEvent) => {
//bottone per colorare con il max relativo
this.image.rePrint = true;
this._saturationSlider.value = "100";
// opacity value?
this.image.drawImg(this.image._pixel1, this.image._pixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
};
private trasparencySliderMouseUp = (event: MouseEvent) => {
this.image.drawImg(this.image._pixel1, this.image._pixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
};
private resetClick = (event: MouseEvent) => {
this.image.newOrigin = { x: 0, y: 0 };
this.image.rePrint = false;
this.chart.calibrated = false;
this.image.globalxMinRange = 0;
this.image.globalxMaxRange = this.image.channelDepth;
this._saturationSlider.value = "100";
this._transparencySlider.value = "0";
this.chart.spinBoxMin.setAttribute("value", "-");
this.chart.spinBoxMax.setAttribute("value", "-");
this.image.drawImg({ x: 0, y: 0 }, { x: this.image.width - 1, y: this.image.height - 1 }, 0, this.image.channelDepth);
this.chart.drawChart(this.image, { x: 0, y: 0 }, { x: this.image.width - 1, y: this.image.height - 1 }, 0, this.image.channelDepth);
};
private exportImageClick = (event: MouseEvent) => {
//esportazione immagine
let img = this._selectionCanvas.toDataURL("image/png");
this._selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream"));
document.getElementById("ExportLink").setAttribute("href", img);
};
private clickdown = (event: MouseEvent): void => {
this.image.setPosition(event, this.image.zPixel2, this._selectionCanvasID);
let tmp: number;
if (this.image.zPixel1.y > this.image.zPixel2.y) {
tmp = this.image.zPixel1.y;
this.image.zPixel1.y = this.image.zPixel2.y;
this.image.zPixel2.y = tmp;
}
//se รจ stato cliccato un punto disegno il grafico, altrimenti disegno anche il
//canvas e aggiorno l'origine
if (this.image.zPixel1.x != this.image.zPixel2.x || this.image.zPixel1.y != this.image.zPixel2.y) {
this.image.newOrigin = { x: this.image.zPixel1.x, y: this.image.zPixel1.y };
this.image.drawImg(this.image.zPixel1, this.image.zPixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
}
this.chart.drawChart(this.image, this.image.zPixel1, this.image.zPixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
};
private selectionCanvasMouseDown = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
//calculate mouse position
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
let scrollLEFT: number = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
let allX: number = event.clientX + scrollLEFT;
let allY: number = event.clientY + scrollTOP;
let elParent: any = this._myCanvas;
let objX: number = 0, objY: number = 0;
while (elParent) {
objX += elParent.offsetLeft;
objY += elParent.offsetTop;
elParent = elParent.offsetParent;
}
this._startX = allX - objX;
this._startY = allY - objY;
// set a flag indicating the drag has begun
this._isDown = true;
};
private selectionCanvasMouseUp = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// the drag is over, clear the dragging flag
this._isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
};
private selectionCanvasMouseMove = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// if we're not dragging, just return
if (!this._isDown) {
return;
}
//calculate mouse position
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
let scrollLEFT: number = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
let allX: number = event.clientX + scrollLEFT;
let allY: number = event.clientY + scrollTOP;
let elParent: any = this._myCanvas;
let objX: number = 0, objY: number = 0;
while (elParent) {
objX += elParent.offsetLeft;
objY += elParent.offsetTop;
elParent = elParent.offsetParent;
}
this._mouseX = allX - objX;
this._mouseY = allY - objY;
// clear the canvas
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
// calculate the rectangle width/height based
// on starting vs current mouse position
let width = this._mouseX - this._startX;
let height = this._mouseY - this._startY;
// draw a new rect from the start position
// to the current mouse position
this._ctx.fillRect(this._startX, this._startY, width, height);
};
private selectionCanvasMouseOut = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// the drag is over, clear the dragging flag
this._isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
};
private setLinearButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: false });
};
private setLogButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: true });
};
private setEnergyButtonClick = (event: MouseEvent) => {
this.chart.calibrated = true;
this.chart.drawChart(this.image, this.image._pixel1, this.image._pixel2, 0, this.image.channelDepth);
this.spinBoxMin.setAttribute("value", "0");
this.spinBoxMax.setAttribute("value", this.image.channelDepth.toString());
};
private setChannelButtonClick = (event: MouseEvent) => {
this.chart.calibrated = false;
this.chart.drawChart(this.image, this.image._pixel1, this.image._pixel2, 0, this.image.channelDepth);
this.spinBoxMin.setAttribute("value", "-");
this.spinBoxMax.setAttribute("value", "-");
};
private exportGraphClick = (event: MouseEvent) => {
let img = <HTMLImageElement>document.getElementById("chartToImg");
Dygraph.Export.asPNG(this.chart._graphic, img);
this._exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
};
private readSpinBoxClick = (event: MouseEvent) => {
//esportazione grafico
console.log("readspinbox");
this.chart.peackSelection(0, 0, this.image);
};
private chartClick = (event: MouseEvent) => {
//zoom manuale sul grafico
console.log("chartClick");
let r: number[];
r = this.chart._graphic.xAxisRange();
if (!this.chart.calibrated) {
r[0] = Math.floor(((r[0] + 1) * this.image.calibration.a - this.image.calibration.b) / 1000);
r[1] = Math.floor(((r[1] + 1) * this.image.calibration.a - this.image.calibration.b) / 1000);
} else {
r[0] = Help.round3(r[0]);
r[1] = Help.round3(r[1]);
this.spinBoxMin.setAttribute("value", r[0].toString());
this.spinBoxMax.setAttribute("value", r[1].toString());
}
this.image.globalxMinRange = r[0];
this.image.globalxMaxRange = r[1];
this.image.drawImg(this.image._pixel1, this.image._pixel2, r[0], r[1]);
};
private elementSelect = (event: MouseEvent) => {
//selezione elemento
let element: string = this._elementSelect.value;
switch (element) {
case "1": //Ca
this.chart.peackSelection(3.6, 3.8, this.image);
this.spinBoxMin.setAttribute("value", "3.60");
this.spinBoxMax.setAttribute("value", "3.80");
break;
case "2": //Pb
this.chart.peackSelection(10.4, 10.7, this.image);
this.spinBoxMin.setAttribute("value", "10.40");
this.spinBoxMax.setAttribute("value", "10.70");
break;
case "3": //Hg
this.chart.peackSelection(9.8, 10.15, this.image);
this.spinBoxMin.setAttribute("value", "9.80");
this.spinBoxMax.setAttribute("value", "10.15");
break;
case "4": //Fe
this.chart.peackSelection(6.3, 6.5, this.image);
this.spinBoxMin.setAttribute("value", "6.30");
this.spinBoxMax.setAttribute("value", "6.50");
break;
case "5": //Cu
this.chart.peackSelection(7.85, 8.2, this.image);
this.spinBoxMin.setAttribute("value", "7.85");
this.spinBoxMax.setAttribute("value", "8.20");
break;
case "6": //Zn
this.chart.peackSelection(8.5, 8.72, this.image);
this.spinBoxMin.setAttribute("value", "8.50");
this.spinBoxMax.setAttribute("value", "8.72");
break;
case "7": //Ti
this.chart.peackSelection(4.35, 4.65, this.image);
this.spinBoxMin.setAttribute("value", "4.35");
this.spinBoxMax.setAttribute("value", "4.65");
break;
case "8": //K
this.chart.peackSelection(3.2, 3.42, this.image);
this.spinBoxMin.setAttribute("value", "3.20");
this.spinBoxMax.setAttribute("value", "3.42");
break;
case "9": //Co
this.chart.peackSelection(6.8, 7.05, this.image);
this.spinBoxMin.setAttribute("value", "6.80");
this.spinBoxMax.setAttribute("value", "7.05");
break;
default:
this.chart.peackSelection(0, this.image.channelDepth, this.image);
this.spinBoxMin.setAttribute("value", "0");
this.spinBoxMax.setAttribute("value", this.image.channelDepth.toString());
break;
}
};
}