File size: 3,356 Bytes
fe66731 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
/**
* 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;
};
|