start.ts

// Copyright 2017 Istituto Nazionale di Fisica Nucleare
//
// Licensed under the EUPL

import * as $ from "jquery";
import * as img from "./draw";
import * as fs from "./fs";
import G = require("./globals");
import Callback = require("./callbacks");

class CanvasManager {
  private _canvas: HTMLCanvasElement;
  private _context: CanvasRenderingContext2D;
  private image: G.Image = G.Image.getInstance();
  private _canvasID: string;
  constructor(canvasID: string) {
    this._canvasID = canvasID;
    this._canvas = <HTMLCanvasElement>document.getElementById(this._canvasID);
    this._context = this._canvas.getContext("2d");
    this._canvas.addEventListener("mousedown", this.clickdown, false);
  }
  private clickdown = (event: MouseEvent): void => {
    this.setPosition(event, this.image.zPixel2, this._canvasID);
    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
    //alert(G.zPixel1.xp + ", " + G.zPixel1.yp + " - " + G.zPixel2.xp + ", " + G.zPixel2.yp);
    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
      };
      // comment out waiting to manage correctly callbacks
      img.drawImg(
        this.image,
        this.image.zPixel1,
        this.image.zPixel2,
        this.image.globalxMinRange,
        this.image.globalxMaxRange
      );
    }

    img.drawChart(
      this.image,
      this.image.zPixel1,
      this.image.zPixel2,
      this.image.globalxMinRange,
      this.image.globalxMaxRange
    );
  };
  //Il metodo findPosition definisce la posizione del cursore del mouse
  //relativa al canvas nel momento in cui avviene l'evento passato in input
  private setPosition(event: any, pixel: G.coordinates, canvasID: string) {
    let image = G.Image.getInstance();
    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 = document.getElementById(canvasID);
    let objX: number = 0,
      objY: number = 0;
    while (elParent) {
      objX += elParent.offsetLeft;
      objY += elParent.offsetTop;
      elParent = elParent.offsetParent;
    }

    pixel.x =
      Math.floor((allX - objX - 1) / image.pixelDim) + image.newOrigin.x;
    pixel.y =
      Math.floor((allY - objY - 1) / image.pixelDim) + image.newOrigin.y;
  }
}

//INIZIO DELLO SCRIPT
$(document).ready(function() {
  // skip the tooltip for the moment; it generates an apparently fatal error
  // $('[data-toggle="tooltip"]').tooltip();

  //creazione dell'albero e gestione barre laterali
  setImportFile();

  compressingSidenav();

  // enable drag&drop
  /*   let droppableArea: any = document.querySelector('.droppable');
  makeDroppable(droppableArea, callback);
 */

  let image: G.Image = G.Image.getInstance();
  new CanvasManager("selectionCanvas");

  image.zPixel1 = { x: 0, y: 0 };
  image.zPixel2 = { x: 0, y: 0 };
});

//funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
//Sono definiti quindi l'albero e il bottone per l'importazione da locale
function setImportFile() {
  console.log("here");

  // genero e leggo il contenuto della directory "filesystem"
  // comment out waiting to properly address the request
  /*   let xmlDoc: Document;
  let xmlListingFile: any = new XMLHttpRequest();
  xmlListingFile.open("PROPFIND", "CHNET/", false);
  xmlListingFile.setRequestHeader("Depth", "infinity");
  xmlListingFile.onreadystatechange = function ()
  {
    if (xmlListingFile.readyState === 4) {
      if (xmlListingFile.status === 207) {
        let parser = new DOMParser();
        xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml");
      }
    }
  }
  xmlListingFile.send(null);
 */
  /*
  //ora genero l'albero e definisco l'evento in caso di selezione di un nodo
  $('#FileTreeview').treeview({ data: generateTree(xmlDoc) });
  $('#FileTreeview').on('nodeSelected', function (e, node)
  {
    if (node['url'] != undefined) {
      $("#load-spinner").css("display", "inline");
      openFileFromServer(node['url']);
    }
  });
 */

  // import a local file
  let fileInputButton: any = document.getElementById("myImport");
  fileInputButton.onchange = function() {
    Callback.CallbackManager.getInstance().showElement("#load-spinner",true);
    $("#load-spinner").css("display", "inline");
    let file: File = fileInputButton.files[0];
    let readerObject = new FileReader();
    readerObject.onload = function() {
      let content: string = readerObject.result;
      let image: G.Image = fs.readImage(content);
      Callback.CallbackManager.getInstance().showElement("#load-spinner",false);
      img.drawImg(
        image,
        { x: 0, y: 0 },
        { x: image.width - 1, y: image.height - 1 },
        0,
        image.channelDepth,
        () => {$("#btnCloseModal").closest(".modal").hide()}
      );
      img.drawChart(
        image,
        { x: 0, y: 0 },
        { x: image.width - 1, y: image.height - 1 },
        0,
        image.channelDepth
      );
      // install callbacks for the canvas and chart?
    };
    readerObject.readAsText(file);
  };
}

//funzione per la compressione della sidenav sx
function compressingSidenav() {
  let fsLabel = $(".sidebar-label");
  let isClosedfs = false;
  fsLabel.click(function() {
    fsLabel_cross();
  });

  function fsLabel_cross() {
    if (isClosedfs == true) {
      isClosedfs = false;
      $(".w3-bar-block").css("width", "65px");
      $(".text-sidenav").css("display", "none");
      $("#collapse-symbol").attr("title", "Open Sidebar");
      $("#collapse-symbol").removeClass("fa-angle-double-left");
      $("#collapse-symbol").addClass("fa-angle-double-right");
    } else {
      isClosedfs = true;
      $(".w3-bar-block").css("width", "200px");
      $(".text-sidenav").css("display", "inline");
      $("#collapse-symbol").attr("title", "Close Sidebar");
      $("#collapse-symbol").removeClass("fa-angle-double-right");
      $("#collapse-symbol").addClass("fa-angle-double-left");
    }
  }
}

//funzione che definisce l'area su cui si può eseguire il drag&drop
function makeDroppable(droppableArea, callback) {
  //creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
  let input: any = document.createElement("input");
  input.setAttribute("type", "file");
  input.setAttribute("multiple", true);
  input.style.display = "none";
  droppableArea.appendChild(input);

  //questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
  droppableArea.addEventListener("dragover", function(e) {
    e.preventDefault(); //impediamo l'apertura del file
    e.stopPropagation();
    e.dataTransfer.dropEffect = "copy";
    droppableArea.classList.add("dragover");
  });

  //l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
  droppableArea.addEventListener("dragleave", function(e) {
    e.preventDefault();
    e.stopPropagation();
    droppableArea.classList.remove("dragover");
  });

  //questo evento si innesca quando il drop è effettivamente avvenuto
  droppableArea.addEventListener("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    droppableArea.classList.remove("dragover");
    callback.call(null, e.dataTransfer.files);
  });
}

//funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato,
//della sua lettura e del passaggio del suo contenuto alla funzione readData()
function callback(files) {
  $("#load-spinner").css("display", "inline");
  let file: File = files[files.length - 1];
  console.log("Try to open " + file.name + " ...");
  let readerObject = new FileReader();
  readerObject.onload = function() {
    let content: string = readerObject.result;
    fs.readImage(content);
    $("#load-spinner").css("display", "none");
  };
  readerObject.readAsText(file);
}