src/app/js/app.js

String.prototype.replaceAll = function ( search, replacement ){
  var target = this;
  return target.split(search).join(replacement);
};
module.exports = function (){
  var newOntologyCounter = 1;
  var app = {},
    graph = webvowl.graph(),
    options = graph.graphOptions(),
    languageTools = webvowl.util.languageTools(),
    GRAPH_SELECTOR = "#graph",
    // Modules for the webvowl app
    exportMenu = require("./menu/exportMenu")(graph),
    filterMenu = require("./menu/filterMenu")(graph),
    gravityMenu = require("./menu/gravityMenu")(graph),
    modeMenu = require("./menu/modeMenu")(graph),
    debugMenu = require("./menu/debugMenu")(graph),
    ontologyMenu = require("./menu/ontologyMenu")(graph),
    pauseMenu = require("./menu/pauseMenu")(graph),
    resetMenu = require("./menu/resetMenu")(graph),
    searchMenu = require("./menu/searchMenu")(graph),
    navigationMenu = require("./menu/navigationMenu")(graph),
    zoomSlider = require("./menu/zoomSlider")(graph),
    sidebar = require("./sidebar")(graph),
    leftSidebar = require("./leftSidebar")(graph),
    editSidebar = require("./editSidebar")(graph),
    configMenu = require("./menu/configMenu")(graph),
    loadingModule = require("./loadingModule")(graph),
    warningModule = require("./warningModule")(graph),
    directInputMod = require("./directInputModule")(graph),
    
    
    // Graph modules
    colorExternalsSwitch = webvowl.modules.colorExternalsSwitch(graph),
    compactNotationSwitch = webvowl.modules.compactNotationSwitch(graph),
    datatypeFilter = webvowl.modules.datatypeFilter(),
    disjointFilter = webvowl.modules.disjointFilter(),
    focuser = webvowl.modules.focuser(graph),
    emptyLiteralFilter = webvowl.modules.emptyLiteralFilter(),
    nodeDegreeFilter = webvowl.modules.nodeDegreeFilter(filterMenu),
    nodeScalingSwitch = webvowl.modules.nodeScalingSwitch(graph),
    objectPropertyFilter = webvowl.modules.objectPropertyFilter(),
    pickAndPin = webvowl.modules.pickAndPin(),
    selectionDetailDisplayer = webvowl.modules.selectionDetailsDisplayer(sidebar.updateSelectionInformation),
    statistics = webvowl.modules.statistics(),
    subclassFilter = webvowl.modules.subclassFilter(),
    setOperatorFilter = webvowl.modules.setOperatorFilter();
  
  
  app.getOptions = function (){
    return webvowl.opts;
  };
  app.getGraph = function (){
    return webvowl.gr;
  };
  // app.afterInitializationCallback=undefined;
  
  
  var executeFileDrop = false;
  var wasMessageToShow = false;
  var firstTime = false;
  
  function addFileDropEvents( selector ){
    var node = d3.select(selector);
    
    node.node().ondragover = function ( e ){
      e.preventDefault();

      d3.select("#dragDropContainer").classed("hidden", false);
      // get svg size
      var w = graph.options().width();
      var h = graph.options().height();
      
      // get event position; (using clientX and clientY);
      var cx = e.clientX;
      var cy = e.clientY;
      
      if ( firstTime === false ) {
        var state = d3.select("#loading-info").classed("hidden");
        wasMessageToShow = !state;
        firstTime = true;
        d3.select("#loading-info").classed("hidden", true); // hide it so it does not conflict with drop event
        var bb=d3.select("#drag_msg").node().getBoundingClientRect();
        var hs = bb.height;
        var ws = bb.width;
        
        var icon_scale=Math.min(hs,ws);
        icon_scale/=100;
        
        d3.select("#drag_icon_group").attr("transform", "translate ( " + 0.25 * ws + " " + 0.25 * hs + ")");
        d3.select("#drag_icon").attr("transform","matrix ("+icon_scale+",0,0,"+icon_scale+",0,0)");
        d3.select("#drag_icon_drop").attr("transform","matrix ("+icon_scale+",0,0,"+icon_scale+",0,0)");
      }
      
      
      if ( (cx > 0.25 * w && cx < 0.75 * w) && (cy > 0.25 * h && cy < 0.75 * h) ) {
        
        d3.select("#drag_msg_text").node().innerHTML = "Drop it here.";
        d3.select("#drag_msg").style("background-color", "#67bc0f");
        d3.select("#drag_msg").style("color", "#000000");
        executeFileDrop = true;
        // d3.select("#drag_svg").transition()
        //   .duration(100)
        //   // .attr("-webkit-transform", "rotate(90)")
        //   // .attr("-moz-transform",    "rotate(90)")
        //   // .attr("-o-transform",      "rotate(90)")
        //   .attr("transform",         "rotate(90)");
  
        d3.select("#drag_icon").classed("hidden",true);
        d3.select("#drag_icon_drop").classed("hidden",false);
  
  
      } else {
        d3.select("#drag_msg_text").node().innerHTML = "Drag ontology file here.";
        d3.select("#drag_msg").style("background-color", "#fefefe");
        d3.select("#drag_msg").style("color", "#000000");
        executeFileDrop = false;
  
        d3.select("#drag_icon").classed("hidden",false);
        d3.select("#drag_icon_drop").classed("hidden",true);
        
        
        // d3.select("#drag_svg").transition()
        //   .duration(100)
        //   // .attr("-webkit-transform", "rotate(0)")
        //   // .attr("-moz-transform",    "rotate(0)")
        //   // .attr("-o-transform",      "rotate(0)")
        //   .attr("transform",         "rotate(0)");
        //
      }
      
    };
    node.node().ondrop = function ( ev ){
      ev.preventDefault();
      firstTime = false;
      if ( executeFileDrop ) {
        if ( ev.dataTransfer.items ) {
          if ( ev.dataTransfer.items.length === 1 ) {
            if ( ev.dataTransfer.items[0].kind === 'file' ) {
              var file = ev.dataTransfer.items[0].getAsFile();
              graph.options().loadingModule().fromFileDrop(file.name, file);
            }
          }
          else {
            //  >> WARNING not multiple file uploaded;
            graph.options().warningModule().showMultiFileUploadWarning();
          }
        }
      }
      d3.select("#dragDropContainer").classed("hidden", true);
    };
    
    node.node().ondragleave = function ( e ){
      var w = graph.options().width();
      var h = graph.options().height();
      
      // get event position; (using clientX and clientY);
      var cx = e.clientX;
      var cy = e.clientY;
      
      var hidden = false;
      firstTime = false;
      
      if ( cx < 0.1 * w || cx > 0.9 * w ) hidden = true;
      if ( cy < 0.1 * h || cy > 0.9 * h ) hidden = true;
      d3.select("#dragDropContainer").classed("hidden", hidden);
      
      d3.select("#loading-info").classed("hidden", !wasMessageToShow); // show it again
      // check if it should be visible
      var should_show=graph.options().loadingModule().getMessageVisibilityStatus();
      if (should_show===false){
        d3.select("#loading-info").classed("hidden", true); // hide it
      }
    };
    
  }
  
  
  app.initialize = function (){
    addFileDropEvents(GRAPH_SELECTOR);
    
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function ( f ){
        return setTimeout(f, 1000 / 60);
      }; // simulate calling code 60
    window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || function ( requestID ){
        clearTimeout(requestID);
      }; //fall back
    
    options.graphContainerSelector(GRAPH_SELECTOR);
    options.selectionModules().push(focuser);
    options.selectionModules().push(selectionDetailDisplayer);
    options.selectionModules().push(pickAndPin);
    
    options.filterModules().push(emptyLiteralFilter);
    options.filterModules().push(statistics);
    
    options.filterModules().push(nodeDegreeFilter);
    options.filterModules().push(datatypeFilter);
    options.filterModules().push(objectPropertyFilter);
    options.filterModules().push(subclassFilter);
    options.filterModules().push(disjointFilter);
    options.filterModules().push(setOperatorFilter);
    options.filterModules().push(nodeScalingSwitch);
    options.filterModules().push(compactNotationSwitch);
    options.filterModules().push(colorExternalsSwitch);
    
    d3.select(window).on("resize", adjustSize);
    
    exportMenu.setup();
    gravityMenu.setup();
    filterMenu.setup(datatypeFilter, objectPropertyFilter, subclassFilter, disjointFilter, setOperatorFilter, nodeDegreeFilter);
    modeMenu.setup(pickAndPin, nodeScalingSwitch, compactNotationSwitch, colorExternalsSwitch);
    pauseMenu.setup();
    sidebar.setup();
    loadingModule.setup();
    leftSidebar.setup();
    editSidebar.setup();
    debugMenu.setup();
    var agentVersion = getInternetExplorerVersion();
    if ( agentVersion > 0 && agentVersion <= 11 ) {
      console.log("Agent version " + agentVersion);
      console.log("This agent is not supported");
      d3.select("#browserCheck").classed("hidden", false);
      d3.select("#killWarning").classed("hidden", true);
      d3.select("#optionsArea").classed("hidden", true);
      d3.select("#logo").classed("hidden", true);
    } else {
      d3.select("#logo").classed("hidden", false);
      if ( agentVersion === 12 ) {
        // allow Mircosoft Edge Browser but with warning
        d3.select("#browserCheck").classed("hidden", false);
        d3.select("#killWarning").classed("hidden", false);
      } else {
        d3.select("#browserCheck").classed("hidden", true);
      }
      
      resetMenu.setup([gravityMenu, filterMenu, modeMenu, focuser, selectionDetailDisplayer, pauseMenu]);
      searchMenu.setup();
      navigationMenu.setup();
      zoomSlider.setup();
      
      // give the options the pointer to the some menus for import and export
      options.literalFilter(emptyLiteralFilter);
      options.nodeDegreeFilter(nodeDegreeFilter);
      options.loadingModule(loadingModule);
      options.filterMenu(filterMenu);
      options.modeMenu(modeMenu);
      options.gravityMenu(gravityMenu);
      options.pausedMenu(pauseMenu);
      options.pickAndPinModule(pickAndPin);
      options.resetMenu(resetMenu);
      options.searchMenu(searchMenu);
      options.ontologyMenu(ontologyMenu);
      options.navigationMenu(navigationMenu);
      options.sidebar(sidebar);
      options.leftSidebar(leftSidebar);
      options.editSidebar(editSidebar);
      options.exportMenu(exportMenu);
      options.graphObject(graph);
      options.zoomSlider(zoomSlider);
      options.warningModule(warningModule);
      options.directInputModule(directInputMod);
      options.datatypeFilter(datatypeFilter);
      options.objectPropertyFilter(objectPropertyFilter);
      options.subclassFilter(subclassFilter);
      options.setOperatorFilter(setOperatorFilter);
      options.disjointPropertyFilter(disjointFilter);
      options.focuserModule(focuser);
      options.colorExternalsModule(colorExternalsSwitch);
      options.compactNotationModule(compactNotationSwitch);
      
      ontologyMenu.setup(loadOntologyFromText);
      configMenu.setup();
      
      leftSidebar.showSidebar(0);
      leftSidebar.hideCollapseButton(true);
      
      
      graph.start();
      
      var modeOp = d3.select("#modeOfOperationString");
      modeOp.style("font-size", "0.6em");
      modeOp.style("font-style", "italic");
      
      adjustSize();
      var defZoom;
      var w = graph.options().width();
      var h = graph.options().height();
      defZoom = Math.min(w, h) / 1000;
      
      var hideDebugOptions = true;
      if ( hideDebugOptions === false ) {
        graph.setForceTickFunctionWithFPS();
      }
      
      graph.setDefaultZoom(defZoom);
      d3.selectAll(".debugOption").classed("hidden", hideDebugOptions);
      
      // prevent backspace reloading event
      var htmlBody = d3.select("body");
      d3.select(document).on("keydown", function ( e ){
        if ( d3.event.keyCode === 8 && d3.event.target === htmlBody.node() ) {
          // we could add here an alert
          d3.event.preventDefault();
        }
        // using ctrl+Shift+d as debug option
        if ( d3.event.ctrlKey && d3.event.shiftKey && d3.event.keyCode === 68 ) {
          graph.options().executeHiddenDebugFeatuers();
          d3.event.preventDefault();
        }
      });
      if ( d3.select("#maxLabelWidthSliderOption") ) {
        var setValue = !graph.options().dynamicLabelWidth();
        d3.select("#maxLabelWidthSlider").node().disabled = setValue;
        d3.select("#maxLabelWidthvalueLabel").classed("disabledLabelForSlider", setValue);
        d3.select("#maxLabelWidthDescriptionLabel").classed("disabledLabelForSlider", setValue);
      }
      
      d3.select("#blockGraphInteractions").style("position", "absolute")
        .style("top", "0")
        .style("background-color", "#bdbdbd")
        .style("opacity", "0.5")
        .style("pointer-events", "auto")
        .style("width", graph.options().width() + "px")
        .style("height", graph.options().height() + "px")
        .on("click", function (){
          d3.event.preventDefault();
          d3.event.stopPropagation();
        })
        .on("dblclick", function (){
          d3.event.preventDefault();
          d3.event.stopPropagation();
        });
      
      d3.select("#direct-text-input").on("click", function (){
        directInputMod.setDirectInputMode();
      });
      d3.select("#blockGraphInteractions").node().draggable = false;
      options.prefixModule(webvowl.util.prefixTools(graph));
      adjustSize();
      sidebar.updateOntologyInformation(undefined, statistics);
      loadingModule.parseUrlAndLoadOntology(); // loads automatically the ontology provided by the parameters
      options.debugMenu(debugMenu);
      debugMenu.updateSettings();
      
      // connect the reloadCachedVersionButton
      d3.select("#reloadSvgIcon").on("click", function (){
        if ( d3.select("#reloadSvgIcon").node().disabled === true ) {
          graph.options().ontologyMenu().clearCachedVersion();
          return;
        }
        d3.select("#reloadCachedOntology").classed("hidden", true);
        graph.options().ontologyMenu().reloadCachedOntology();
        
      });
      // add the initialized objects
      webvowl.opts = options;
      webvowl.gr = graph;
      
    }
  };
  
  
  function loadOntologyFromText( jsonText, filename, alternativeFilename ){
    d3.select("#reloadCachedOntology").classed("hidden", true);
    pauseMenu.reset();
    graph.options().navigationMenu().hideAllMenus();
    
    if ( (jsonText === undefined && filename === undefined) || (jsonText.length === 0) ) {
      loadingModule.notValidJsonFile();
      return;
    }
    graph.editorMode(); // updates the checkbox
    var data;
    if ( jsonText ) {
      // validate JSON FILE
      var validJSON;
      try {
        data = JSON.parse(jsonText);
        validJSON = true;
      } catch ( e ) {
        validJSON = false;
      }
      if ( validJSON === false ) {
        // the server output is not a valid json file
        loadingModule.notValidJsonFile();
        return;
      }
      
      if ( !filename ) {
        // First look if an ontology title exists, otherwise take the alternative filename
        var ontologyNames = data.header ? data.header.title : undefined;
        var ontologyName = languageTools.textInLanguage(ontologyNames);
        
        if ( ontologyName ) {
          filename = ontologyName;
        } else {
          filename = alternativeFilename;
        }
      }
    }
    
    
    // check if we have graph data
    var classCount = 0;
    if ( data.class !== undefined ) {
      classCount = data.class.length;
    }
    
    var loadEmptyOntologyForEditing = false;
    if ( location.hash.indexOf("#new_ontology") !== -1 ) {
      loadEmptyOntologyForEditing = true;
      newOntologyCounter++;
      d3.select("#empty").node().href = "#opts=editorMode=true;#new_ontology" + newOntologyCounter;
    }
    if ( classCount === 0 && graph.editorMode() === false && loadEmptyOntologyForEditing === false ) {
      // generate message for the user;
      loadingModule.emptyGraphContentError();
    } else {
      loadingModule.validJsonFile();
      ontologyMenu.setCachedOntology(filename, jsonText);
      exportMenu.setJsonText(jsonText);
      options.data(data);
      graph.options().loadingModule().setPercentMode();
      if ( loadEmptyOntologyForEditing === true ) {
        graph.editorMode(true);
        
      }
      graph.load();
      sidebar.updateOntologyInformation(data, statistics);
      exportMenu.setFilename(filename);
      graph.updateZoomSliderValueFromOutside();
      adjustSize();
      
      var flagOfCheckBox = d3.select("#editorModeModuleCheckbox").node().checked;
      graph.editorMode(flagOfCheckBox);// update gui
      
    }
  }
  
  function adjustSize(){
    var graphContainer = d3.select(GRAPH_SELECTOR),
      svg = graphContainer.select("svg"),
      height = window.innerHeight - 40,
      width = window.innerWidth - (window.innerWidth * 0.22);
    
    if ( sidebar.getSidebarVisibility() === "0" ) {
      height = window.innerHeight - 40;
      width = window.innerWidth;
    }
    
    directInputMod.updateLayout();
    d3.select("#blockGraphInteractions").style("width", window.innerWidth + "px");
    d3.select("#blockGraphInteractions").style("height", window.innerHeight + "px");
    
    d3.select("#WarningErrorMessagesContainer").style("width", width + "px");
    d3.select("#WarningErrorMessagesContainer").style("height", height + "px");
    
    d3.select("#WarningErrorMessages").style("max-height", (height - 12) + "px");
    
    graphContainer.style("height", height + "px");
    svg.attr("width", width)
      .attr("height", height);
    
    options.width(width)
      .height(height);
    
    graph.updateStyle();
    
    if ( isTouchDevice() === true ) {
      if ( graph.isEditorMode() === true )
        d3.select("#modeOfOperationString").node().innerHTML = "touch able device detected";
      graph.setTouchDevice(true);
      
    } else {
      if ( graph.isEditorMode() === true )
        d3.select("#modeOfOperationString").node().innerHTML = "point & click device detected";
      graph.setTouchDevice(false);
    }
    
    d3.select("#loadingInfo-container").style("height", 0.5 * (height - 80) + "px");
    loadingModule.checkForScreenSize();
    
    adjustSliderSize();
    // update also the padding options of loading and the logo positions;
    var warningDiv = d3.select("#browserCheck");
    if ( warningDiv.classed("hidden") === false ) {
      var offset = 10 + warningDiv.node().getBoundingClientRect().height;
      d3.select("#logo").style("padding", offset + "px 10px");
    } else {
      // remove the dynamic padding from the logo element;
      d3.select("#logo").style("padding", "10px");
    }
    
    // scrollbar tests;
    var element = d3.select("#menuElementContainer").node();
    var maxScrollLeft = element.scrollWidth - element.clientWidth;
    var leftButton = d3.select("#scrollLeftButton");
    var rightButton = d3.select("#scrollRightButton");
    if ( maxScrollLeft > 0 ) {
      // show both and then check how far is bar;
      rightButton.classed("hidden", false);
      leftButton.classed("hidden", false);
      navigationMenu.updateScrollButtonVisibility();
    } else {
      // hide both;
      rightButton.classed("hidden", true);
      leftButton.classed("hidden", true);
    }
    
    // adjust height of the leftSidebar element;
    editSidebar.updateElementWidth();
    
    
    var hs = d3.select("#drag_msg").node().getBoundingClientRect().height;
    var ws = d3.select("#drag_msg").node().getBoundingClientRect().width;
    d3.select("#drag_icon_group").attr("transform", "translate ( " + 0.25 * ws + " " + 0.25 * hs + ")");
    
  }
  
  function adjustSliderSize(){
    // TODO: refactor and put this into the slider it self
    var height = window.innerHeight - 40;
    var fullHeight = height;
    var zoomOutPos = height - 30;
    var sliderHeight = 150;
    
    // assuming DOM elements are generated in the index.html
    // todo: refactor for independent usage of graph and app
    if ( fullHeight < 150 ) {
      // hide the slider button;
      d3.select("#zoomSliderParagraph").classed("hidden", true);
      d3.select("#zoomOutButton").classed("hidden", true);
      d3.select("#zoomInButton").classed("hidden", true);
      d3.select("#centerGraphButton").classed("hidden", true);
      return;
    }
    d3.select("#zoomSliderParagraph").classed("hidden", false);
    d3.select("#zoomOutButton").classed("hidden", false);
    d3.select("#zoomInButton").classed("hidden", false);
    d3.select("#centerGraphButton").classed("hidden", false);
    
    var zoomInPos = zoomOutPos - 20;
    var centerPos = zoomInPos - 20;
    if ( fullHeight < 280 ) {
      // hide the slider button;
      d3.select("#zoomSliderParagraph").classed("hidden", true);//var sliderPos=zoomOutPos-sliderHeight;
      d3.select("#zoomOutButton").style("top", zoomOutPos + "px");
      d3.select("#zoomInButton").style("top", zoomInPos + "px");
      d3.select("#centerGraphButton").style("top", centerPos + "px");
      return;
    }
    
    var sliderPos = zoomOutPos - sliderHeight;
    zoomInPos = sliderPos - 20;
    centerPos = zoomInPos - 20;
    d3.select("#zoomSliderParagraph").classed("hidden", false);
    d3.select("#zoomOutButton").style("top", zoomOutPos + "px");
    d3.select("#zoomInButton").style("top", zoomInPos + "px");
    d3.select("#centerGraphButton").style("top", centerPos + "px");
    d3.select("#zoomSliderParagraph").style("top", sliderPos + "px");
  }
  
  function isTouchDevice(){
    try {
      document.createEvent("TouchEvent");
      return true;
    } catch ( e ) {
      return false;
    }
  }
  
  
  function getInternetExplorerVersion(){
    var ua,
      re,
      rv = -1;
    
    // check for edge
    var isEdge = /(?:\b(MS)?IE\s+|\bTrident\/7\.0;.*\s+rv:|\bEdge\/)(\d+)/.test(navigator.userAgent);
    if ( isEdge ) {
      rv = parseInt("12");
      return rv;
    }
    
    var isIE11 = /Trident.*rv[ :]*11\./.test(navigator.userAgent);
    if ( isIE11 ) {
      rv = parseInt("11");
      return rv;
    }
    if ( navigator.appName === "Microsoft Internet Explorer" ) {
      ua = navigator.userAgent;
      re = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})");
      if ( re.exec(ua) !== null ) {
        rv = parseFloat(RegExp.$1);
      }
    } else if ( navigator.appName === "Netscape" ) {
      ua = navigator.userAgent;
      re = new RegExp("Trident/.*rv:([0-9]{1,}[\\.0-9]{0,})");
      if ( re.exec(ua) !== null ) {
        rv = parseFloat(RegExp.$1);
      }
    }
    return rv;
  }
  
  return app;
}
;