463 lines
14 KiB
JavaScript
463 lines
14 KiB
JavaScript
function fitStageIntoParentContainer() {
|
|
|
|
var container = document.querySelector('#stage-parent');
|
|
|
|
// now we need to fit stage into parent
|
|
var containerWidth = container.offsetWidth;
|
|
// to do this we need to scale the stage
|
|
var scale = containerWidth / stageWidth;
|
|
|
|
// stage. und layer. Test
|
|
|
|
stage.width(stageWidth * scale);
|
|
stage.height(stageHeight * scale);
|
|
stage.scale({ x: scale, y: scale });
|
|
|
|
stage.on('wheel', (e) => {
|
|
//getConditions()
|
|
e.evt.preventDefault();
|
|
var oldScale = stage.scaleX();
|
|
|
|
var pointer = stage.getPointerPosition();
|
|
|
|
var mousePointTo = {
|
|
x: (pointer.x - stage.x()) / oldScale,
|
|
y: (pointer.y - stage.y()) / oldScale,
|
|
};
|
|
|
|
newScale = e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy; // Mouse Wheel Richtung > oder <
|
|
scaleRatio = newScale;
|
|
localStorage.setItem('zoomStage', newScale);
|
|
//console.log("Scale Wert: "+scaleRatio+" x: "+stage.x() +" y: "+stage.y());
|
|
|
|
//console.log("Pointer Wert x: "+pointer.x+" y: "+pointer.y);
|
|
if (newScale > 0.20 && newScale < 150){
|
|
stage.scale({ x: newScale, y: newScale });
|
|
//console.log("ZOOM");
|
|
var newPos = {
|
|
x: pointer.x - mousePointTo.x * newScale,
|
|
y: pointer.y - mousePointTo.y * newScale,
|
|
};
|
|
|
|
stage.position(newPos);
|
|
var pos = JSON.stringify(stage.position());
|
|
localStorage.setItem("Position",pos);
|
|
if(newScale <= 10 && big === 0) {
|
|
big = 1;
|
|
setConditions();
|
|
}
|
|
if(newScale > 10 && big === 1) {
|
|
big = 0;
|
|
setConditions();
|
|
}
|
|
}
|
|
|
|
layer.batchDraw();
|
|
});
|
|
|
|
}
|
|
|
|
function fitStageReset() {
|
|
localStorage.removeItem('xStage');
|
|
localStorage.removeItem('yStage');
|
|
localStorage.removeItem('Position');
|
|
localStorage.removeItem('Scale');
|
|
localStorage.removeItem('zoomStage');
|
|
localStorage.removeItem('AbsolutePosition');
|
|
location.reload();
|
|
}
|
|
|
|
function getStageData() {
|
|
localStorage.removeItem('xStage');
|
|
localStorage.removeItem('yStage');
|
|
localStorage.removeItem('Position');
|
|
localStorage.removeItem('Scale');
|
|
localStorage.removeItem('zoomStage');
|
|
localStorage.removeItem('AbsolutePosition');
|
|
location.reload();
|
|
}
|
|
|
|
fitStageIntoParentContainer();
|
|
// adapt the stage on any window resize
|
|
window.addEventListener('resize', fitStageIntoParentContainer);
|
|
|
|
function getDistance(p1, p2) {
|
|
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
|
|
}
|
|
|
|
function getCenter(p1, p2) {
|
|
return {
|
|
x: (p1.x + p2.x) / 2,
|
|
y: (p1.y + p2.y) / 2,
|
|
};
|
|
}
|
|
|
|
function stageTouchController(){
|
|
var lastCenter = null;
|
|
var lastDist = 0;
|
|
|
|
stage.on('touchmove', function (e) {
|
|
stage.draggable(true);
|
|
stage.listening(false);
|
|
e.evt.preventDefault();
|
|
var touch1 = e.evt.touches[0];
|
|
var touch2 = e.evt.touches[1];
|
|
|
|
if (touch1 && touch2) {
|
|
// if the stage was under Konva's drag&drop
|
|
// we need to stop it, and implement our own pan logic with two pointers
|
|
if (stage.isDragging()) {
|
|
stage.stopDrag();
|
|
}
|
|
|
|
var p1 = {
|
|
x: touch1.clientX,
|
|
y: touch1.clientY,
|
|
};
|
|
var p2 = {
|
|
x: touch2.clientX,
|
|
y: touch2.clientY,
|
|
};
|
|
|
|
if (!lastCenter) {
|
|
lastCenter = getCenter(p1, p2);
|
|
return;
|
|
}
|
|
var newCenter = getCenter(p1, p2);
|
|
|
|
var dist = getDistance(p1, p2);
|
|
|
|
if (!lastDist) {
|
|
lastDist = dist;
|
|
}
|
|
|
|
// local coordinates of center point
|
|
var pointTo = {
|
|
x: (newCenter.x - stage.x()) / stage.scaleX(),
|
|
y: (newCenter.y - stage.y()) / stage.scaleX(),
|
|
};
|
|
|
|
var scale = stage.scaleX() * (dist / lastDist);
|
|
|
|
stage.scaleX(scale);
|
|
stage.scaleY(scale);
|
|
|
|
// calculate new position of the stage
|
|
var dx = newCenter.x - lastCenter.x;
|
|
var dy = newCenter.y - lastCenter.y;
|
|
|
|
var newPos = {
|
|
x: newCenter.x - pointTo.x * scale + dx,
|
|
y: newCenter.y - pointTo.y * scale + dy,
|
|
};
|
|
|
|
stage.position(newPos);
|
|
stage.batchDraw();
|
|
|
|
//setConditions();
|
|
//setConditionsCable();
|
|
|
|
lastDist = dist;
|
|
lastCenter = newCenter;
|
|
}
|
|
});
|
|
|
|
stage.on('touchend', function () {
|
|
stage.draggable(false);
|
|
stage.listening(true);
|
|
lastDist = 0;
|
|
lastCenter = null;
|
|
});
|
|
|
|
var container = stage.container();
|
|
|
|
// make it focusable
|
|
|
|
container.tabIndex = 1;
|
|
// focus it
|
|
// also stage will be in focus on its click
|
|
container.focus();
|
|
|
|
const DELTA = 10;
|
|
|
|
container.addEventListener('keydown', function (e) {
|
|
if (e.keyCode === 39 || e.keyCode === 68) {
|
|
stage.listening(false);
|
|
stage.x(stage.x() - DELTA);
|
|
} else if (e.keyCode === 40 || e.keyCode === 83) {
|
|
stage.listening(false);
|
|
stage.y(stage.y() - DELTA);
|
|
} else if (e.keyCode === 37 || e.keyCode === 65) {
|
|
stage.listening(false);
|
|
stage.x(stage.x() + DELTA);
|
|
} else if (e.keyCode === 38 || e.keyCode === 87) {
|
|
stage.listening(false);
|
|
stage.y(stage.y() + DELTA);
|
|
} else {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
|
|
layer.batchDraw();
|
|
});
|
|
container.addEventListener('keyup', function (e) {
|
|
if (e.keyCode === 39 || e.keyCode === 68) {
|
|
stage.listening(true);
|
|
} else if (e.keyCode === 40 || e.keyCode === 83) {
|
|
stage.listening(true);
|
|
} else if (e.keyCode === 37 || e.keyCode === 65) {
|
|
stage.listening(true);
|
|
} else if (e.keyCode === 38 || e.keyCode === 87) {
|
|
stage.listening(true);
|
|
} else {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
layer.batchDraw();
|
|
});
|
|
}
|
|
|
|
stageTouchController();
|
|
|
|
function sideReload() {
|
|
window.location.reload(false);
|
|
}
|
|
|
|
function getStationInfos(id,color) {
|
|
//console.log("getStationInfo Test: "+id+" Farbe: "+color);
|
|
var res = id.split("station");
|
|
var stationIdInfo = res[1];
|
|
//console.log("Stations Listen ID: "+stationIdInfo);
|
|
var stationName = "";
|
|
for(i=0;i<anzahlStationen;i++) {
|
|
if(jdo.Points[i].IdL == stationIdInfo) {
|
|
stationName = jdo.Points[i].Name;
|
|
}
|
|
}
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;'><i class='fi-marker'></i> "+stationName+"</h4><b style='color:"+color+";text-transform: uppercase;'><i class='fi-alert'></i> Fehlertext Test</b><p style='padding-top:5px;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...</p>";
|
|
}
|
|
|
|
function getLineInfos(id,color) {
|
|
//console.log("getStationInfo Test: "+id+" Farbe: "+color);
|
|
var res = id.split("line");
|
|
var lineId = res[1];
|
|
//console.log("Strang Listen ID: "+lineId);
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;'><i class='fi-share'></i> Strang ID: "+jco.Lines[lineId].Short+"</h4><b style='color:"+color+";text-transform: uppercase;'><i class='fi-x'></i> Fehlertext Test</b><p style='padding-top:5px;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...</p>";
|
|
}
|
|
|
|
dragElement(document.getElementById("mainDataSheet"));
|
|
|
|
function dragElement(elmnt) {
|
|
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
|
if (document.getElementById(elmnt.id + "header")) {
|
|
// if present, the header is where you move the DIV from:
|
|
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
|
|
} else {
|
|
// otherwise, move the DIV from anywhere inside the DIV:
|
|
elmnt.onmousedown = dragMouseDown;
|
|
}
|
|
|
|
function dragMouseDown(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
// get the mouse cursor position at startup:
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
document.onmouseup = closeDragElement;
|
|
// call a function whenever the cursor moves:
|
|
document.onmousemove = elementDrag;
|
|
}
|
|
|
|
function elementDrag(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
// calculate the new cursor position:
|
|
pos1 = pos3 - e.clientX;
|
|
pos2 = pos4 - e.clientY;
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
// set the element's new position:
|
|
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
|
|
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
|
|
localStorage.setItem("mainDataSheetX", elmnt.style.left);
|
|
localStorage.setItem("mainDataSheetY", elmnt.style.top);
|
|
}
|
|
|
|
function closeDragElement() {
|
|
// stop moving when mouse button is released:
|
|
document.onmouseup = null;
|
|
document.onmousemove = null;
|
|
}
|
|
}
|
|
|
|
if (localStorage.getItem("mainDataSheetX")) {
|
|
document.getElementById("mainDataSheet").style.left = localStorage.getItem("mainDataSheetX");
|
|
document.getElementById("mainDataSheet").style.top = localStorage.getItem("mainDataSheetY");
|
|
}
|
|
|
|
function mainDataSheetPositionReset() {
|
|
localStorage.removeItem("mainDataSheetX");
|
|
localStorage.removeItem("mainDataSheetY");
|
|
document.getElementById("mainDataSheet").style.left = "";
|
|
document.getElementById("mainDataSheet").style.right = "25px";
|
|
document.getElementById("mainDataSheet").style.top = "25px";
|
|
}
|
|
|
|
document.getElementById("mousovertext").innerHTML = "OGE Masterkarte<br />Version 0.9.7";
|
|
|
|
setInterval(() => {
|
|
if (swapShiftKey === 0) {
|
|
//document.getElementById("loadingMap").innerHTML = "<div class='spinner-wrapper'><span class='spinner-text'>Update der Daten...</span><span class='spinner'></span></div>";
|
|
cableReset();
|
|
}
|
|
}, (updateInterval*60000));
|
|
|
|
stage.on('dragstart', function () {
|
|
layer.listening(false);
|
|
var pos = JSON.stringify(stage.position());
|
|
localStorage.setItem("Position",pos);
|
|
var sca = JSON.stringify(stage.scale());
|
|
localStorage.setItem("Scale",sca);
|
|
console.log("AUS");
|
|
});
|
|
stage.on('dragend', function () {
|
|
layer.listening(true);
|
|
var pos = JSON.stringify(stage.absolutePosition());
|
|
localStorage.setItem("AbsolutePosition",pos);
|
|
var pos = JSON.stringify(stage.position());
|
|
localStorage.setItem("Position",pos);
|
|
var sca = JSON.stringify(stage.scale());
|
|
localStorage.setItem("Scale",sca);
|
|
layer.batchDraw();
|
|
console.log("EIN");
|
|
});
|
|
|
|
function stationButtonChange() {
|
|
var el = document.getElementById("buttonStation");
|
|
if(el.style.opacity > 0.6) {
|
|
console.log("Aus");
|
|
el.style.border = "none";
|
|
el.style.opacity = 0.4;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
else {
|
|
console.log("Ein");
|
|
el.style.border = "2px solid #63de17";
|
|
el.style.opacity = 1;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
}
|
|
|
|
function ustationButtonChange() {
|
|
|
|
var el = document.getElementById("buttonUStation");
|
|
if(el.style.opacity > 0.6) {
|
|
console.log("Aus");
|
|
el.style.border = "none";
|
|
el.style.opacity = 0.4;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
else {
|
|
console.log("Ein");
|
|
el.style.border = "2px solid #63de17";
|
|
el.style.opacity = 1;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
|
|
}
|
|
|
|
function pstationButtonChange() {
|
|
|
|
var el = document.getElementById("buttonPStation");
|
|
if(el.style.opacity > 0.6) {
|
|
console.log("Aus");
|
|
el.style.border = "none";
|
|
el.style.opacity = 0.4;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
else {
|
|
console.log("Ein");
|
|
el.style.border = "2px solid #63de17";
|
|
el.style.opacity = 1;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
|
|
}
|
|
|
|
function diensteButtonChange() {
|
|
|
|
var el = document.getElementById("buttonDienste");
|
|
if(el.style.opacity > 0.6) {
|
|
console.log("Aus");
|
|
el.style.border = "none";
|
|
el.style.opacity = 0.4;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
else {
|
|
console.log("Ein");
|
|
el.style.border = "2px solid #63de17";
|
|
el.style.opacity = 1;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
|
|
}
|
|
|
|
function kabelButtonChange() {
|
|
|
|
var el = document.getElementById("buttonKabel");
|
|
if(el.style.opacity > 0.6) {
|
|
console.log("Aus");
|
|
el.style.border = "none";
|
|
el.style.opacity = 0.4;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
else {
|
|
console.log("Ein");
|
|
el.style.border = "2px solid #63de17";
|
|
el.style.opacity = 1;
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 1;
|
|
}
|
|
|
|
}
|
|
|
|
function ebenenSpeichern() {
|
|
var ebenenNamen = ["buttonStation","buttonUStation","buttonPStation","buttonDienste","buttonKabel"];
|
|
var ebenenTemp = [];
|
|
for (x = 0;x < 5; x++){
|
|
var el = document.getElementById(ebenenNamen[x]);
|
|
if(el.style.opacity > 0.6) {
|
|
ebenenTemp.push(1);
|
|
}
|
|
else{
|
|
ebenenTemp.push(0);
|
|
}
|
|
}
|
|
localStorage.setItem("ebenenLayer",ebenenTemp);
|
|
cableReset();
|
|
}
|
|
|
|
function ebenenZuruecksetzen() {
|
|
var ebenenNamen = ["buttonStation","buttonUStation","buttonPStation","buttonDienste","buttonKabel"];
|
|
document.getElementById("ebenenSpeichernButton").style.opacity = 0;
|
|
ebenenLayer = localStorage.getItem("ebenenLayer");
|
|
ebenenLayer = ebenenLayer.replaceAll(",","");
|
|
//console.log("Layer "+ebenenLayer);
|
|
for (x = 0;x < 5; x++){
|
|
if (parseInt(ebenenLayer[x]) > 0) {
|
|
//console.log("Layer "+x+" Ein - " +ebenenLayer[x]);
|
|
var el = document.getElementById(ebenenNamen[x]);
|
|
el.style.border = "2px solid #63de17";
|
|
el.style.opacity = 1;
|
|
}
|
|
else {
|
|
//console.log("Layer "+x+" Aus - " +ebenenLayer[x]);
|
|
var el = document.getElementById(ebenenNamen[x]);
|
|
el.style.border = "none";
|
|
el.style.opacity = 0.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
ebenenZuruecksetzen();
|
|
}, 5000);
|