Commit 70c7fc39 authored by Keith Downie's avatar Keith Downie Committed by Leigh Stoller

Added support in AptUI for zooming and panning

parent 31740f5b
......@@ -174,6 +174,10 @@ body {
margin-bottom: 10px;
}
#showtopo_div {
border: 1px solid #000;
}
.panel-body {
background-color: #f5f5f5;
}
......@@ -232,3 +236,10 @@ body {
stroke-opacity: 1.0;
stroke-width: 2;
}
.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
\ No newline at end of file
......@@ -129,7 +129,7 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors)
if ($internal_error) {
echo "<center><h2>$internal_error</h2></center><br>\n";
}
echo "<script src='d3.v3.js'></script>\n";
echo "<div class='row'>
<div class='col-lg-6 col-lg-offset-3
col-md-6 col-md-offset-3
......@@ -303,7 +303,6 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors)
echo "<SCRIPT LANGUAGE=JavaScript>
window.onload = InitProfileSelector;
</SCRIPT>\n";
echo "<script src='d3.v3.js'></script>\n";
echo "<SCRIPT LANGUAGE=JavaScript>\n";
if ($newuser) {
......
......@@ -649,19 +649,62 @@ function StartCountdownClock(when)
function maketopmap(divname, width, height, json)
{
var ismousedown = false;
var savedTrans;
var savedScale;
var change_view = d3.behavior.zoom()
.scaleExtent([1,5])
.on("zoom", rescaleg);
function rescaleg(d, i, j) {
if (!ismousedown)
{
trans=d3.event.translate;
scale=d3.event.scale;
tx = Math.min(0, Math.max(width * (1 - scale), trans[0]));
ty = Math.min(0, Math.max(height * (1 - scale), trans[1]));
change_view.translate([tx, ty]);
vis.attr("transform",
"translate(" + tx + "," + ty + ")"
+ " scale(" + scale + ")");
}
}
function mousedown()
{
$("#quickvm_topomodal").addClass("unselectable");
}
function mouseup()
{
$("#quickvm_topomodal").removeClass("unselectable");
}
$(divname).html("<div></div>");
var vis = d3.select(divname).append("svg:svg")
.attr("class", "topomap")
.style("visibility", "hidden")
.attr("width", width)
.attr("height", height);
vis.append("svg:rect")
var outer = d3.select(divname).append("svg:svg")
.attr("class", "topomap")
.style("visibility", "hidden")
.attr("width", width)
.attr("height", height)
.attr("pointer-events", "all");
var vis = outer
.append('svg:g')
.on("dblclick.zoom", null)
.call(change_view)
.append('svg:g')
.on("mousedown", mousedown)
.on("mouseup", mouseup);
var rect = vis.append("svg:rect")
.attr("width", width)
.attr("height", height)
.style("fill-opacity", 0.0)
.style("stroke", "#000");
.style("stroke", "#000");
var topo = function(json) {
var force = self.force = d3.layout.force()
......@@ -697,6 +740,10 @@ function maketopmap(divname, width, height, json)
function dragstart(d, i) {
// stops the force auto positioning before you start dragging
force.stop()
ismousedown = true;
savedTrans = change_view.translate();
savedScale = change_view.scale();
}
function dragmove(d, i) {
......@@ -714,6 +761,10 @@ function maketopmap(divname, width, height, json)
// include the node in its auto positioning stuff
d.fixed = true;
force.resume();
ismousedown = false;
change_view.translate(savedTrans);
change_view.scale(savedScale);
}
var nodeg = vis.selectAll("g.node")
......@@ -743,7 +794,7 @@ function maketopmap(divname, width, height, json)
function tick(e) {
if (e && e.alpha < 0.05) {
vis.style("visibility", "visible")
outer.style("visibility", "visible")
force.stop();
return;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment