start.ts

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

import $ from "jquery";
import Dygraph from "dygraphs";
import "./globals";
import * as fs from "./loaddir";
import * as img from "./draw";

//INIZIO DELLO SCRIPT
$(document).ready(function ()
{

  //abilito tooltip
  $('[data-toggle="tooltip"]').tooltip();
  //creazione dell'albero e gestione barre laterali
  fs.setImportFile();
  compressingSidenav();

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

  //inizializzazione variabili
  zPixel1 = { xp: 0, yp: 0 };
  zPixel2 = { xp: 0, yp: 0 };

});

//funzione per la compressione della sidenav sx
function compressingSidenav()
{

  let fsLabel: any = $('.sidebar-label');
  let isClosedfs: boolean = 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");
  console.log("Try to open " + files[files.length - 1].name + " ...");
  let readerObject: any = new FileReader();
  readerObject.readAsBinaryString(files[files.length - 1]);
  readerObject.onload = function ()
  {
    let fileString: string = readerObject.result;
    fs.readData(fileString);
  }
}

//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: 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.xp = Math.floor((allX - objX - 1) / pixelDim) + newOrigin.xp;
  pixel.yp = Math.floor((allY - objY - 1) / pixelDim) + newOrigin.yp;
}


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

  findPosition(event, 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, zPixel2);
  let tmp: number;
  if (zPixel1.xp > zPixel2.xp) {
    tmp = zPixel1.xp;
    zPixel1.xp = zPixel2.xp;
    zPixel2.xp = tmp;
  }
  if (zPixel1.yp > zPixel2.yp) {
    tmp = zPixel1.yp;
    zPixel1.yp = zPixel2.yp;
    zPixel2.yp = tmp;
  }
  //se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il
  //canvas e aggiorno l'origine
  //alert(zPixel1.xp + ", " + zPixel1.yp + " - " + zPixel2.xp + ", " + zPixel2.yp);
  if (zPixel1.xp != zPixel2.xp || zPixel1.yp != zPixel2.yp) {
    newOrigin = { xp: zPixel1.xp, yp: zPixel1.yp };
    img.drawImg(zPixel1, zPixel2, globalxMinRange, globalxMaxRange);
  }
  img.drawChart(zPixel1, zPixel2, globalxMinRange, globalxMaxRange);

}