Commit e8eca5b3 authored by unknown's avatar unknown

Added clear canvas menu + loading autocomplete displayed only after login

parent 700b21aa
......@@ -14,6 +14,7 @@ export class Graph2D {
this.graph2d = new Graph2d(dbConnector, idList, cullList);
this.cy = null;
this.nodes = [];
this.showClearMenu = true;
}
showGraph2D = () => {
......@@ -74,11 +75,12 @@ export class Graph2D {
this.filterByDate([document.getElementById('filter-date-start'), document.getElementById('filter-date-end')]);
this.applyFilterToGraph();
this.cy.elements().nodes().on('cxttap', (e) => this.displayContextMenu(e));
this.cy.elements().nodes().on('mouseover', (e) => this.highlightNode(e));
this.cy.elements().nodes().on('mouseout', (e) => this.deEmphasizeNode(e));
this.cy.on('tapstart', (e) => { this.hideContextMenu(e); this.hideGraphMenu(e); });
this.cy.on('cxttap', this.displayGraphMenu);
this.cy.on('tapstart', this.hideContextMenu);
this.cy.on('cxttap', 'node', this.displayContextMenu);
this.cy.on('mouseover', 'node', this.highlightNode);
this.cy.on('mouseout', 'node', this.deEmphasizeNode);
}
showTooltip = () => {
......@@ -100,6 +102,8 @@ export class Graph2D {
});
associatedSearchRows.map(row => row.getElementsByTagName("td")[0].style.backgroundColor = "rgb(255, 255, 70)");
this.showTooltip();
this.showClearMenu = false;
}
hideTooltip = () => {
......@@ -121,15 +125,17 @@ export class Graph2D {
});
associatedSearchRows.map(row => row.getElementsByTagName("td")[0].style.backgroundColor = this.selectedNodeColor + "aa");
this.hideTooltip();
this.showClearMenu = true;
}
deleteNode = () => {
this.hideContextMenu();
this.graph2d.removeComponents([this.selectedNodeId])((type, id) => {
if (type === "node") {
this.cy.remove('node[id = \'' + id + '\']')
}
});
this.graph2d.mutate().then(() => this.hideContextMenu());
}
displayNewElements = (type, element) => {
......@@ -142,10 +148,7 @@ export class Graph2D {
group: 'nodes',
data: element,
position: { x: cX + 200 * Math.cos(a), y: cY + 200 * Math.sin(a) }
})
.on('cxttap', (e) => this.displayContextMenu(e))
.on('mouseover', (e) => this.highlightNode(e))
.on('mouseout', (e) => this.deEmphasizeNode(e));
});
} else {
this.cy.add({
group: 'edges',
......@@ -199,6 +202,8 @@ export class Graph2D {
}
displayContextMenu = (e) => {
this.hideGraphMenu();
let d = document.getElementById("contextMenu");
d.style.position = "absolute";
d.style.left = e.renderedPosition.x + 'px';
......@@ -215,6 +220,30 @@ export class Graph2D {
this.getContextSubMenu("Collapse", nodeSummary, this.collapseNodes, extraInfo);
}
clearGraph = () => {
this.graph2d = new Graph2d(this.dbConnector, [], []);
this.hideGraphMenu();
this.addNodeIds([]);
}
hideGraphMenu = () => {
let d = document.getElementById("graph2DMenu");
d.style.display = 'none';
}
displayGraphMenu = (e) => {
if (this.showClearMenu) {
this.hideContextMenu();
let d = document.getElementById("graph2DMenu");
d.style.position = "absolute";
d.style.left = e.renderedPosition.x + 'px';
d.style.top = e.renderedPosition.y + 'px';
d.style.display = 'inline-block';
document.getElementById("clear2DGraph").addEventListener("click", this.clearGraph);
}
}
hideContextMenu = () => {
let d = document.getElementById("contextMenu");
d.style.display = 'none';
......
......@@ -370,6 +370,14 @@ intergraph .tooltip-arrow {
border: 1px solid black;
background-color: white;
display: none;
z-index: 2;
}
#graph2DMenu {
border: 1px solid black;
background-color: white;
display: none;
z-index: 2;
}
#nodeId {
......@@ -393,7 +401,7 @@ intergraph .tooltip-arrow {
#load-autocompletion {
position: absolute;
left: 0;
display: flex;
display: none;
height: 100vh;
width: 100%;
align-items: center;
......
......@@ -77,10 +77,11 @@ function setupDateFilter(app, newGraph, id, start, end) {
function start(settings, login, password) {
let url = settings.database.url;
let dbConnector = new dbConnectorConstructor(settings, url, login, password);
document.getElementById("load-autocompletion").style.display = "flex";
const entrySearch = new EntrySearch(dbConnector, () => {
document.getElementById("load-autocompletion").style.visibility = "hidden";
document.getElementById("load-autocompletion").style.display = "none";
$('#keyword').focus();
})
});
dbConnector.test().then(result => {
if (!result) {
......
......@@ -104,6 +104,10 @@
<div id="extraInfo"></div>
<div class="menuItem" id="deleteNode"><i class="fa fa-trash fa-fw"></i>Remove node</div>
</div>
<div id="graph2DMenu" oncontextmenu="return false">
<div><i class="fa fa-fw"></i><b>Graph</b></div>
<div class="menuItem" id="clear2DGraph"><i class="fa fa-fw"></i>Clear Graph</div>
</div>
</div>
<div id="filters">
<table>
......
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