src/app/js/menu/gravityMenu.js

/**
 * Contains the logic for setting up the gravity sliders.
 *
 * @param graph the associated webvowl graph
 * @returns {{}}
 */
module.exports = function ( graph ){
  
  var gravityMenu = {},
    sliders = [],
    options = graph.graphOptions(),
    defaultCharge = options.charge();
  
  
  /**
   * Adds the gravity sliders to the website.
   */
  gravityMenu.setup = function (){
    var menuEntry = d3.select("#m_gravity");
    menuEntry.on("mouseover", function (){
      var searchMenu = graph.options().searchMenu();
      searchMenu.hideSearchEntries();
    });
    addDistanceSlider("#classSliderOption", "class", "Class distance", options.classDistance);
    addDistanceSlider("#datatypeSliderOption", "datatype", "Datatype distance", options.datatypeDistance);
  };
  
  function addDistanceSlider( selector, identifier, label, distanceFunction ){
    var defaultLinkDistance = distanceFunction();
    
    var sliderContainer,
      sliderValueLabel;
    
    sliderContainer = d3.select(selector)
      .append("div")
      .datum({ distanceFunction: distanceFunction }) // connect the options-function with the slider
      .classed("distanceSliderContainer", true);
    
    var slider = sliderContainer.append("input")
      .attr("id", identifier + "DistanceSlider")
      .attr("type", "range")
      .attr("min", 10)
      .attr("max", 600)
      .attr("value", distanceFunction())
      .attr("step", 10);
    
    sliderContainer.append("label")
      .classed("description", true)
      .attr("for", identifier + "DistanceSlider")
      .text(label);
    
    sliderValueLabel = sliderContainer.append("label")
      .classed("value", true)
      .attr("for", identifier + "DistanceSlider")
      .text(distanceFunction());
    
    // Store slider for easier resetting
    sliders.push(slider);
    
    slider.on("focusout", function (){
      graph.updateStyle();
    });
    
    slider.on("input", function (){
      var distance = slider.property("value");
      distanceFunction(distance);
      adjustCharge(defaultLinkDistance);
      sliderValueLabel.text(distance);
      graph.updateStyle();
    });
    
    // add wheel event to the slider
    slider.on("wheel", function (){
      var wheelEvent = d3.event;
      var offset;
      if ( wheelEvent.deltaY < 0 ) offset = 10;
      if ( wheelEvent.deltaY > 0 ) offset = -10;
      var oldVal = parseInt(slider.property("value"));
      var newSliderValue = oldVal + offset;
      if ( newSliderValue !== oldVal ) {
        slider.property("value", newSliderValue);
        distanceFunction(newSliderValue);
        slider.on("input")(); // << set text and update the graphStyles
      }
      d3.event.preventDefault();
    });
  }
  
  function adjustCharge( defaultLinkDistance ){
    var greaterDistance = Math.max(options.classDistance(), options.datatypeDistance()),
      ratio = greaterDistance / defaultLinkDistance,
      newCharge = defaultCharge * ratio;
    
    options.charge(newCharge);
  }
  
  /**
   * Resets the gravity sliders to their default.
   */
  gravityMenu.reset = function (){
    sliders.forEach(function ( slider ){
      slider.property("value", function ( d ){
        // Simply reload the distance from the options
        return d.distanceFunction();
      });
      slider.on("input")();
    });
  };
  
  
  return gravityMenu;
};