140 lines
4.5 KiB
JavaScript
140 lines
4.5 KiB
JavaScript
<script>
|
|
|
|
function requestFullScreen(elt) {
|
|
// console.log("Requesting fullscreen for", elt);
|
|
if (elt.requestFullscreen) {
|
|
elt.requestFullscreen();
|
|
} else if (elt.msRequestFullscreen) {
|
|
elt.msRequestFullscreen();
|
|
} else if (elt.mozRequestFullScreen) {
|
|
elt.mozRequestFullScreen();
|
|
} else if (elt.webkitRequestFullscreen) {
|
|
elt.webkitRequestFullscreen();
|
|
} else {
|
|
// console.error("Fullscreen not available");
|
|
}
|
|
}
|
|
|
|
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
|
|
resizeGraphContainer();
|
|
});
|
|
|
|
// custom resize function as there is no event to fire and we need
|
|
// to react to the sidebar.
|
|
function resizeGraphContainer() {
|
|
setTimeout(function(){
|
|
var netmap_pane = jQuery('#netmap_pane');
|
|
graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
|
|
graph.height( window.innerHeight - 100 ).resume();
|
|
}, 500)
|
|
}
|
|
|
|
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
|
|
|
|
jQuery(document).ready(function() {
|
|
window.graph = netGobrechtsD3Force('netmap_pane')
|
|
.debug(true)
|
|
[% '.showLegend(false)' IF NOT params.colorgroups %]
|
|
.lassoMode(true)
|
|
.dragMode(true)
|
|
.nodeEventToOpenLink('click')
|
|
.nodeLinkTarget('none')
|
|
.labelDistance(2)
|
|
.linkDistance(120)
|
|
.zoomMode(true)
|
|
.pinMode(true)
|
|
.nodeEventToStopPinMode('none')
|
|
.showLinkDirection(false)
|
|
.colorScheme('color20')
|
|
// .preventLabelOverlappingOnForceEnd(true)
|
|
// .zoomToFitOnForceEnd(true)
|
|
.width( parseInt(jQuery('#netmap_pane').parent().css('width')) )
|
|
.height( window.innerHeight - 100 )
|
|
.showSelfLinks(true)
|
|
.minZoomFactor(0.1)
|
|
.maxZoomFactor(10)
|
|
.charge(-550)
|
|
.gravity(0.3);
|
|
|
|
jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
|
|
jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
|
|
jQuery(window).on("resize", resizeGraphContainer);
|
|
|
|
graph['nd2'] = {};
|
|
graph['nd2']['centernode'] = mapdata['v3']['centernode'];
|
|
graph['nd2']['dragging'] = false;
|
|
|
|
graph.inspect().main.force.on('end.setupfornetdisco', function() {
|
|
graph.inspect().main.nodes.each(function(n) { n.fixed = true });
|
|
|
|
if (mapdata['v3']['newnodes']) {
|
|
$.post(
|
|
'[% uri_for('/ajax/data/device/netmappositions') %]'
|
|
,$("#nd_vlan-entry, #nd_devgrp-select, input[name='mapshow']").serialize()
|
|
+ '&positions=' + JSON.stringify(graph.positions())
|
|
);
|
|
}
|
|
// else { graph.zoomToFit() }
|
|
|
|
graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
|
|
graph['nd2']['dragging'] = false;
|
|
});
|
|
|
|
graph.inspect().main.nodes.on('mousedown.dragall', function(n) {
|
|
if (this.nodeName !== 'circle') { return }
|
|
graph['nd2']['dragging'] = true;
|
|
graph['nd2']['dragStartX'] = n.x;
|
|
graph['nd2']['dragStartY'] = n.y;
|
|
graph['nd2']['draggedNode'] = n.index;
|
|
});
|
|
|
|
graph.inspect().main.nodes.on('mousemove.dragall', function(draggedNode) {
|
|
var evt = window.event;
|
|
if (!("buttons" in evt) || (evt.buttons !== 1)) { return }
|
|
if (!(graph['nd2']['dragging']) || !(graph['nd2']['draggedNode'])) { return }
|
|
if (draggedNode.index !== graph['nd2']['draggedNode']) { return }
|
|
|
|
var dx = (draggedNode.x - graph['nd2']['dragStartX']),
|
|
dy = (draggedNode.y - graph['nd2']['dragStartY']);
|
|
graph['nd2']['dragStartX'] += dx;
|
|
graph['nd2']['dragStartY'] += dy;
|
|
|
|
graph.inspect().main.nodes
|
|
.filter(function(n) { return (n.selected && (n.index !== draggedNode.index)) })
|
|
.each(function(n) {
|
|
n.x += dx; n.y += dy;
|
|
n.px += dx; n.py += dy;
|
|
});
|
|
});
|
|
|
|
graph.inspect().main.force.on('end.setupfornetdisco', null);
|
|
});
|
|
|
|
var netmapdata = {'data': {
|
|
'nodes': mapdata['v4']['nodes'].map(function(node) {
|
|
var index = node['index'];
|
|
return mapdata['v3']['nodes'][index];
|
|
}),
|
|
'links': mapdata['v3']['links']
|
|
}};
|
|
graph.start(netmapdata);
|
|
|
|
graph.inspect().dom.svg
|
|
.append("svg:text")
|
|
.attr("id", "nd2_fullscreen_netmap")
|
|
.attr("class", "link")
|
|
.attr("x", (graph.width() - 17))
|
|
.attr("y", 17)
|
|
.attr("text-anchor", "start")
|
|
.attr("font-family", "FontAwesome")
|
|
.text(function() { return '\uf0b2' })
|
|
.on("click", function() {
|
|
requestFullScreen(document.getElementById('netmap_pane'));
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
// vim: ft=javascript
|
|
</script>
|