119 lines
2.1 KiB
JavaScript
119 lines
2.1 KiB
JavaScript
window.addEventListener("keydown", function(e) {
|
|
// space and arrow keys
|
|
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
|
|
e.preventDefault();
|
|
}
|
|
}, false);
|
|
var xvb = 0;
|
|
var yvb=0;
|
|
var zoomx = window.innerWidth;
|
|
var zoomy = window.innerHeight;
|
|
|
|
updatescr();
|
|
|
|
function updatescr(){
|
|
if (zoomx < 51){
|
|
zoomx += 50;
|
|
}
|
|
if (zoomy < 51){
|
|
zoomy += 50;
|
|
}
|
|
let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString();
|
|
$("#svg1").removeAttr("viewBox");
|
|
$("#svg1").each(function(){$(this)[0].setAttribute("viewBox",newname)});
|
|
}
|
|
document.addEventListener("keydown",e=> {
|
|
if(e.keyCode == 40){
|
|
yvb += 10;
|
|
updatescr();
|
|
}
|
|
else if(e.keyCode == 39){
|
|
xvb += 10;
|
|
updatescr();
|
|
}
|
|
else if(e.keyCode == 38){
|
|
yvb -= 10;
|
|
updatescr();
|
|
}
|
|
else if(e.keyCode == 37){
|
|
xvb -= 10;
|
|
updatescr();
|
|
}
|
|
else if(e.keyCode == 187){
|
|
if (!(zoomx < 101)&&!(zoomy < 101)){
|
|
xvb += 25;
|
|
yvb += 25;
|
|
}
|
|
zoomx -= 50;
|
|
zoomy -= 50;
|
|
updatescr();
|
|
}
|
|
else if(e.keyCode == 189){
|
|
xvb -= 25;
|
|
yvb -= 25;
|
|
zoomx += 50;
|
|
zoomy += 50;
|
|
updatescr();
|
|
}
|
|
},false);
|
|
|
|
|
|
var zooming = false;
|
|
var xbeg = 0;
|
|
var ybeg = 0;
|
|
var moveing = false;
|
|
|
|
$("svg").on("mousemove touchmove",function(e){
|
|
if (moveing && selected == "yay"){
|
|
if (!(zooming)){
|
|
zooming = true;
|
|
|
|
//setting our first mouse poitions
|
|
xbeg = e.pageX * zoomx/window.innerWidth;
|
|
ybeg = e.pageY * zoomy/window.innerHeight;
|
|
|
|
xbeg += xvb;
|
|
ybeg += yvb;
|
|
console.log("started zooming"+xbeg+"and"+ybeg);
|
|
//moveing = (moveing +1)%2;
|
|
}
|
|
|
|
var newx = e.pageX * zoomx/window.innerWidth;
|
|
var newy = e.pageY * zoomy/window.innerHeight;
|
|
|
|
newx += xvb;
|
|
newy += yvb;
|
|
|
|
xvb -= newx - xbeg;
|
|
yvb -= newy - ybeg;
|
|
updatescr();
|
|
|
|
console.log(xvb+"newx"+newx+"xbeg"+xbeg);
|
|
}
|
|
});
|
|
|
|
|
|
$("svg").on("mousedown touchstart",function(e){
|
|
//e.preventDefault();
|
|
moveing = true;
|
|
});
|
|
|
|
|
|
$("svg").on("mouseup touchend",function(e){
|
|
e.preventDefault();
|
|
selected = "yay";
|
|
zooming = false;
|
|
moveing = false;
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|