start.ts

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

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

//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);
 */

  G.zPixel1 = { x: 0, y: 0 };
  G.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
export 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 ()
  {
    $("#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 = fs.readImage(content);
      $("#load-spinner").css("display", "none");
      console.log(image.width);
      img.drawImg(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, G.channelDepth);
      img.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, G.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);
}

//la funzione findPosition definisce la posizione del cursore del mouse
//relativa al canvas nel momento in cui avviene l'evento passato in input
function findPosition(event: any, pixel: G.coordinates)
{

  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('myCanvas');
  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) / G.pixelDim) + G.newOrigin.x;
  pixel.y = Math.floor((allY - objY - 1) / G.pixelDim) + G.newOrigin.y;
}


//la funzione findPosDown memorizza la posizione del pixel cliccato
function findPosDown(event: any)
{

  findPosition(event, G.zPixel1);

}

//la funzione findPosUp memorizza la posizione del pixel quando il mouse viene
//rilasciato, ordina le coordinate, aggiorna l'origine e la pagina.
function findPosUp(event: any)
{

  findPosition(event, G.zPixel2);
  let tmp: number;
  if (G.zPixel1.x > G.zPixel2.x) {
    tmp = G.zPixel1.x;
    G.zPixel1.x = G.zPixel2.x;
    G.zPixel2.x = tmp;
  }
  if (G.zPixel1.y > G.zPixel2.y) {
    tmp = G.zPixel1.y;
    G.zPixel1.y = G.zPixel2.y;
    G.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 (G.zPixel1.x != G.zPixel2.x || G.zPixel1.y != G.zPixel2.y) {
    G.newOrigin = { x: G.zPixel1.x, y: G.zPixel1.y };
    // comment out waiting to manage correctly callbacks
    //    img.drawImg(image, G.zPixel1, G.zPixel2, G.globalxMinRange, G.globalxMaxRange);
  }
    // comment out waiting to manage correctly callbacks
/*     img.drawChart(image, G.zPixel1, G.zPixel2, G.globalxMinRange, G.globalxMaxRange);
 */
}