File size: 3,317 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 114 115 | /** The zoom Slider **/
module.exports = function ( graph ){
var zoomSlider = {};
var minMag = graph.options().minMagnification(),
maxMag = graph.options().maxMagnification(),
defZoom,
t_zoomOut,
t_zoomIn,
zoomValue,
showSlider = true,
w = graph.options().width(),
h = graph.options().height(),
slider;
defZoom = Math.min(w, h) / 1000;
function clearAllTimers(){
cancelAnimationFrame(t_zoomOut);
cancelAnimationFrame(t_zoomIn);
}
function timed_zoomOut(){
zoomValue = 0.98 * zoomValue;
// fail saves
if ( zoomValue < minMag ) {
zoomValue = minMag;
}
graph.setSliderZoom(zoomValue);
t_zoomOut = requestAnimationFrame(timed_zoomOut);
}
function timed_zoomIn(){
zoomValue = 1.02 * zoomValue;
// fail saves
if ( zoomValue > maxMag ) {
zoomValue = maxMag;
}
graph.setSliderZoom(zoomValue);
t_zoomIn = requestAnimationFrame(timed_zoomIn);
}
zoomSlider.setup = function (){
slider = d3.select("#zoomSliderParagraph").append("input")
.datum({})
.attr("id", "zoomSliderElement")
.attr("type", "range")
.attr("value", defZoom)
.attr("min", minMag)
.attr("max", maxMag)
.attr("step", (maxMag - minMag) / 40)
.attr("title", "zoom factor")
.on("input", function (){
zoomSlider.zooming();
});
d3.select("#zoomOutButton").on("mousedown", function (){
graph.options().navigationMenu().hideAllMenus();
zoomValue = graph.scaleFactor();
t_zoomOut = requestAnimationFrame(timed_zoomOut);
})
.on("touchstart", function (){
graph.options().navigationMenu().hideAllMenus();
zoomValue = graph.scaleFactor();
t_zoomOut = requestAnimationFrame(timed_zoomOut);
})
.on("mouseup", clearAllTimers)
.on("touchend", clearAllTimers)
.on("touchcancel", clearAllTimers)
.attr("title", "zoom out");
d3.select("#zoomInButton").on("mousedown", function (){
graph.options().navigationMenu().hideAllMenus();
zoomValue = graph.scaleFactor();
t_zoomIn = requestAnimationFrame(timed_zoomIn);
})
.on("touchstart", function (){
graph.options().navigationMenu().hideAllMenus();
zoomValue = graph.scaleFactor();
t_zoomIn = requestAnimationFrame(timed_zoomIn);
})
.on("mouseup", clearAllTimers)
.on("touchend", clearAllTimers)
.on("touchcancel", clearAllTimers)
.attr("title", "zoom in");
d3.select("#centerGraphButton").on("click", function (){
graph.options().navigationMenu().hideAllMenus();
graph.forceRelocationEvent();
}).attr("title", "center graph");
};
zoomSlider.showSlider = function ( val ){
if ( !arguments.length ) return showSlider;
d3.select("#zoomSlider").classed("hidden", !val);
showSlider = val;
};
zoomSlider.zooming = function (){
graph.options().navigationMenu().hideAllMenus();
var zoomValue = slider.property("value");
slider.attr("value", zoomValue);
graph.setSliderZoom(zoomValue);
};
zoomSlider.updateZoomSliderValue = function ( val ){
if ( slider ) {
slider.attr("value", val);
slider.property("value", val);
}
};
return zoomSlider;
};
|