| Line 1: |
Line 1: |
| | $(document).ready(function() { | | $(document).ready(function() { |
| | $.getScript('https://unpkg.com/vis-network/standalone/umd/vis-network.min.js').done(function() { | | $.getScript('https://unpkg.com/vis-network/standalone/umd/vis-network.min.js').done(function() { |
| − | if( $('#visNetworkGraph').length ) {//check if div element(s) exist
| + | var pathId = 0; |
| − | var input = JSON.parse($("#visNetworkGraph").text());
| + | var newNodes = {}; |
| − |
| + | var editNodes = {}; |
| − | // create an array with nodes
| + | var editDeletedEdges = {}; |
| − | var nodes = new vis.DataSet([]);
| + | var editDeletedNodes = {}; |
| − | // create an array with edges
| + | $(".InteractiveSemanticGraph").each(function(index) { |
| − | var edges = new vis.DataSet([]);
| + | if ($('.InteractiveSemanticGraph').length) { //check if div element(s) exist |
| − |
| + | var input = JSON.parse(this.innerHTML); |
| − | var colors = ['#ff7878', '#73ff77', '#e878ff', '#ffae57', '#80f8ff', '#ffff75', '#adadad', '#b482ff'];
| + | // create an array with nodes |
| − |
| + | var nodes = new vis.DataSet([]); |
| − | var id = 1;
| + | // create an array with edges |
| − | nodes.add({id: id, label: input.root});
| + | var edges = new vis.DataSet([]); |
| − | id++;
| + | //colors for the graph |
| | + | var colors = []; |
| | + | var oldGroups = {}; |
| | + | var givenDiv = this; |
| | + | givenDiv.style.position = "relative"; |
| | + | givenDiv.style.display = "inline-block"; |
| | | | |
| − | function createUrl(root, properties){
| + | //Function for random colors |
| − | var url = `${wikiUrl}/w/api.php?action=ask&query=[[${root}]]`;
| + | var h = Math.random(); |
| − | var propertiesVar ='';
| + | var golden = 0.618033988749895; |
| − | for (var i = 0; i < properties.length; i++) {
| |
| − | propertiesVar += '|?'+ properties[i];
| |
| − |
| |
| − | }
| |
| − |
| |
| − | url = url + propertiesVar + '&format=json';
| |
| − | return url;
| |
| − | }
| |
| | | | |
| | + | function randomHSL() { |
| | + | h += golden; |
| | + | h %= 1; |
| | + | return "hsla(" + (360 * h) + "," + |
| | + | "70%," + |
| | + | "80%,1)"; |
| | + | } |
| | + | for (var i = 0; i < input.properties.length; i++) { |
| | + | colors.push(randomHSL()); |
| | + | } |
| | | | |
| | + | function isLabelSet(id) { |
| | + | node = nodes.get(id); |
| | + | if (node === null) return false; |
| | + | else return id; |
| | + | } |
| | | | |
| − | function fetchData(root, properties, nodeID){
| + | nodes.add({ |
| − | fetch(createUrl(root, properties))
| + | id: input.root, |
| − | .then(response => response.json())
| + | label: input.root, //todo: query display title |
| − | .then(data => {
| + | color: '#6dbfa9' |
| − |
| + | }); |
| − |
| + | //Creates API query Url with the given root and properties |
| − |
| + | function createUrl(root, properties) { |
| − | for (var i = 0; i < properties.length; i++) {
| + | if (properties[0] === "-Category") properties[0] = "Category"; |
| − | for (var j = 0; j < data.query.results[root].printouts[properties[i]].length; j++) {
| + | else if (root.startsWith("Category:")) root = ":" + root; //[[Category:X]] queries pages within this category, [[:Category:X]] the category itself |
| − | if(data.query.results[root].printouts[properties[i]].length == 1){
| + | var url = `/w/api.php?action=ask&query=[[${encodeURIComponent(root)}]]`; |
| − | if(data.query.results[root].printouts[properties[i]][j].fulltext){
| + | var propertiesVar = ''; |
| − | nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][j].fulltext, color: colors[i], group: properties[i], hidden:false});
| + | for (var i = 0; i < properties.length; i++) { |
| − | if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}
| + | propertiesVar += '|?' + encodeURIComponent(properties[i]) + "=" + encodeURIComponent(properties[i]); //explicit label overwrites property display title. ToDo: extrakt label in result and get corresponding printout |
| − | else{
| + | propertiesVar += '|?' + encodeURIComponent(properties[i] + ".Display title of") + "=" + encodeURIComponent(properties[i] + ".Display title of"); //explicit query for display title due to slow update of the displaytitle page field |
| − | edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
| + | } |
| − | id++;
| + | url = url + propertiesVar + '&format=json'; |
| − |
| + | return url; |
| − | }else{
| + | } |
| − |
| + | //Makes an API call with the given parameters and adds the results to the nodes and edges datasets. |
| − | nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][0].toString(), color: colors[i], group: properties[i], hidden:false});
| + | //With a given nodeID the edges are set to the nodeID, else they are set to the root node. |
| − | if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}else{
| + | function fetchData(root, properties, nodeID, setGroup, setColor) { |
| − | edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
| + | fetch(createUrl(root, properties)) |
| − | id++;}
| + | .then(response => response.json()) |
| − | }else if(!data.query.results[root].printouts[properties[i]][j].fulltext){
| + | .then(data => { |
| − | nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][j], color: colors[i], group: properties[i], hidden:false});
| + | if (!nodeID && root) { //first query on root node |
| − | if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}else{
| + | var rootNode = nodes.get(root); |
| − | edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
| + | rootNode.url = data.query.results[root].fullurl; |
| − | id++;
| + | if (data.query.results[root].displaytitle) rootNode.label = data.query.results[root].displaytitle; |
| − |
| + | } |
| − |
| + | |
| − | }else{
| + | for (var i = 0; i < properties.length; i++) { |
| − | nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][j].fulltext, color: colors[i], group: properties[i], hidden:false});
| |
| − | if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}else{
| |
| − | edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
| |
| − | id++;
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | });
| |
| − | }
| |
| − | fetchData(input.root, input.properties);
| |
| − | // create a network
| |
| − | var container = document.getElementById("visNetworkGraph");
| |
| − | var data = {
| |
| − | nodes: nodes,
| |
| − | edges: edges,
| |
| − | };
| |
| − |
| |
| − |
| |
| − | var options = {width: "100%", height: "100%", interaction: { hover: true },
| |
| − | manipulation: {
| |
| − | enabled: true,
| |
| − | }, /*layout:{improvedLayout:false},*/
| |
| − | groups: {
| |
| − | useDefaultGroups: false
| |
| − | },
| |
| − | physics:{
| |
| − | stabilization: {
| |
| − | enabled: true,
| |
| − | /*iterations: 1,
| |
| − | updateInterval: 25,
| |
| − | onlyDynamicEdges: false,
| |
| − | fit: true*/
| |
| − | },
| |
| − | barnesHut: {
| |
| − | gravitationalConstant: -40000,
| |
| − | centralGravity: 0,
| |
| − | springLength: 0,
| |
| − | springConstant: 0.5,
| |
| − | damping: 1,
| |
| − | avoidOverlap: 0
| |
| − | },
| |
| − | maxVelocity: 5
| |
| − | },
| |
| − |
| |
| − | };
| |
| − |
| |
| − | for(var i=0;i<input.properties.length;i++){
| |
| − | options.groups[input.properties[i]] = {hidden: false};
| |
| − | }
| |
| − | console.log(options);
| |
| − |
| |
| − | var network = new vis.Network(container, data, options);
| |
| − | var x = -visNetworkGraph.clientWidth / 2 + 50;
| |
| − | var y = -visNetworkGraph.clientHeight / 2 + 50;
| |
| − | var step = 70;
| |
| − | var legendID = 1000;
| |
| − | for (var i = 0; i < input.properties.length; i++) {
| |
| − | if(i<1){
| |
| − |
| |
| − | nodes.add({
| |
| − | id: legendID,
| |
| − | x: x,
| |
| − | y: y,
| |
| − | label: input.properties[i],
| |
| − | /*group: input.properties[i],*/
| |
| − | value: 1,
| |
| − | fixed: true,
| |
| − | physics: false,
| |
| − | color: colors[i],
| |
| − | });legendID++;
| |
| − |
| |
| − | }else{
| |
| − |
| |
| − | nodes.add({
| |
| − | id: legendID,
| |
| − | x: x,
| |
| − | y: y + i * step,
| |
| − | label: input.properties[i],
| |
| − | /*group: input.properties[i],*/
| |
| − | value: 1,
| |
| − | fixed: true,
| |
| − | physics: false,
| |
| − | color: colors[i],
| |
| − | });
| |
| − | legendID++;
| |
| − |
| |
| − | }
| |
| − | }
| |
| − | function deleteNodes(node){
| |
| − |
| |
| − | var deleteNode = network.getConnectedNodes(node);
| |
| − | for(var i = 1; i < deleteNode.length;i++){
| |
| − | if(network.getConnectedNodes(deleteNode[i]).length > 1){
| |
| − | deleteNodes(deleteNode[i]);
| |
| − |
| |
| − |
| |
| − |
| |
| − | }else{
| |
| − |
| |
| − | nodes.remove([deleteNode[i]]);
| |
| − | if(node === 1){
| |
| − |
| |
| − | deleteNodes(deleteNode[0]);
| |
| − | nodes.remove([deleteNode[0]]);
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | }
| |
| − | for( i = 1; i < deleteNode.length;i++){
| |
| − | nodes.remove([deleteNode[i]]);
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | var nodesArray = [];
| |
| − | //var isInArray = false;
| |
| − | var legendClicked = false;
| |
| | | | |
| − |
| + | for (var j = 0; j < data.query.results[root].printouts[properties[i]].length; j++) { |
| | | | |
| − | var oldGroups = []; | + | //define colors |
| − |
| + | if (!(properties[i] in legendColors) && setColor) { |
| − | network.on("click", function (params) {
| + | legendColors[properties[i]] = colors[i]; |
| − | if(params.nodes[0]){
| + | } else { |
| − | //////////////////////////////////////////////////////////
| + | setColor = legendColors[properties[i]]; |
| − | var legendGroup;
| + | colors[i] = legendColors[properties[i]]; |
| − | var group;
| + | colors[i] = legendColors[properties[i]]; |
| − | var nodeChildren;
| + | } |
| − |
| + | //define id and label. use displaytitle if available. Use string representation of non-page properties |
| − | if(params.nodes[0] > 999){ | + | var id = ""; |
| − | legendGroup = nodes.get(params.nodes[0]).label;
| + | var label = ""; |
| − | if(options.groups[legendGroup].hidden === false){
| + | if (data.query.results[root].printouts[properties[i]][j].fulltext) id = data.query.results[root].printouts[properties[i]][j].fulltext; |
| | + | else if (data.query.results[root].printouts[properties[i]][j].value) id = '' + data.query.results[root].printouts[properties[i]][j].value + ' ' + data.query.results[root].printouts[properties[i]][j].unit; |
| | + | else id = data.query.results[root].printouts[properties[i]][j].toString(); |
| | + | if (data.query.results[root].printouts[properties[i]][j].displaytitle) label = data.query.results[root].printouts[properties[i]][j].displaytitle; |
| | + | if (data.query.results[root].printouts[properties[i] + ".Display title of"][j]) label = data.query.results[root].printouts[properties[i] + ".Display title of"][j]; //explicit use property display title due to slow update of the displaytitle page field |
| | + | if (label === "") label = id; |
| | + | if (isLabelSet(id) === false) { |
| | + | if (setGroup && setColor) { |
| | + | nodes.add({ |
| | + | id: id, |
| | + | label: label, |
| | + | color: setColor, |
| | + | group: setGroup[0], |
| | + | hidden: false, |
| | + | url: data.query.results[root].printouts[properties[i]][j].fullurl, |
| | + | oncontext: true, |
| | + | }); |
| | + | oldGroups["" + id] = setGroup[0]; |
| | + | } else { |
| | + | nodes.add({ |
| | + | id: id, |
| | + | label: label, |
| | + | color: colors[i], |
| | + | group: properties[i], |
| | + | hidden: false, |
| | + | url: data.query.results[root].printouts[properties[i]][j].fullurl |
| | + | }); |
| | + | oldGroups["" + id] = properties[i]; |
| | + | } |
| | + | if (nodeID) { |
| | + | edges.add({ |
| | + | from: nodeID, |
| | + | to: id, |
| | + | label: properties[i], |
| | + | color: colors[i], |
| | + | group: properties[i] |
| | + | }); |
| | + | } else { |
| | + | edges.add({ |
| | + | from: input.root, |
| | + | to: id, |
| | + | label: properties[i], |
| | + | color: colors[i], |
| | + | group: properties[i] |
| | + | }); |
| | + | } |
| | + | } else { |
| | + | edges.add({ |
| | + | from: nodeID, |
| | + | to: isLabelSet(id), |
| | + | label: properties[i], |
| | + | color: setColor, |
| | + | group: properties[i] |
| | + | }); |
| | + | } |
| | + | } |
| | + | } |
| | + | network.setOptions(options); |
| | + | network.body.emitter.emit('_dataChanged'); |
| | + | network.redraw(); |
| | + | }); |
| | + | } |
| | + | fetchData(input.root, input.properties); |
| | + | // create a network |
| | + | var container = this; //document.getElementById("InteractiveSemanticGraph"); |
| | + | var data = { |
| | + | nodes: nodes, |
| | + | edges: edges, |
| | + | }; |
| | + | var options = { |
| | + | width: "100%", |
| | + | height: "100%", |
| | + | interaction: { |
| | + | hover: true |
| | + | }, |
| | + | manipulation: { |
| | + | enabled: true, |
| | + | editEdge: false, |
| | + | deleteNode: function(data, callback) { |
| | + | deleteSelectedNode(data, callback) |
| | + | }.bind(this), |
| | + | deleteEdge: function(data, callback) { |
| | + | deleteSelectedEdge(data, callback) |
| | + | }.bind(this), |
| | + | addNode: function(data, callback) { |
| | + | // filling in the popup DOM elements |
| | + | document.getElementById("node-operation").innerText = "Add Node"; |
| | + | dragElement(document.getElementById("node-popUp")); |
| | + | editNode(data, clearNodePopUp, callback); |
| | + | }, |
| | + | addEdge: function(data, callback) { |
| | + | if (data.from == data.to) { |
| | + | var r = confirm("Do you want to connect the node to itself?"); |
| | + | if (r != true) { |
| | + | callback(null); |
| | + | return; |
| | + | } |
| | + | } |
| | + | document.getElementById("edge-operation").innerText = "Add Edge"; |
| | + | dragElement(document.getElementById("edge-popUp")); |
| | + | editEdgeWithoutDrag(data, callback); |
| | + | }, |
| | + | }, |
| | + | edges: { |
| | + | arrows: { |
| | + | to: { |
| | + | enabled: true |
| | + | }, |
| | + | //from:{enabled: true} |
| | + | } |
| | + | }, |
| | + | groups: { |
| | + | useDefaultGroups: false |
| | + | }, |
| | + | physics: { |
| | + | stabilization: { |
| | + | enabled: true, |
| | + | }, |
| | + | barnesHut: { |
| | + | gravitationalConstant: -40000, |
| | + | centralGravity: 0, |
| | + | springLength: 0, |
| | + | springConstant: 0.5, |
| | + | damping: 1, |
| | + | avoidOverlap: 0 |
| | + | }, |
| | + | maxVelocity: 5 |
| | + | }, |
| | + | }; |
| | + | //Creates groups in the options and sets them all to hidden:false. |
| | + | for (var i = 0; i < input.properties.length; i++) { |
| | + | options.groups[input.properties[i]] = { |
| | + | hidden: false |
| | + | }; |
| | + | } |
| | + | var network = new vis.Network(container, data, options); |
| | | | |
| − | group = nodes.get({ | + | //The function getAllEdgesBetween() returns all edges between two nodes |
| − | filter: function (item) {
| + | function getAllEdgesBetween(node1, node2) { |
| − | return item.group == legendGroup;
| + | return edges.get().filter(function(edge) { |
| | + | return (edge.from === node1 && edge.to === node2) || (edge.from === node2 && edge.to === node1); |
| | + | }); |
| | + | } |
| | + | |
| | + | //Cartesian Product of arrays |
| | + | function cartesianProduct(arr) { |
| | + | return arr.reduce(function(a,b){ |
| | + | return a.map(function(x){ |
| | + | return b.map(function(y){ |
| | + | return x.concat([y]); |
| | + | }) |
| | + | }).reduce(function(a,b){ return a.concat(b) },[]) |
| | + | }, [[]]) |
| | } | | } |
| − | });
| + | //Cartesian Product of given arrays |
| − | console.log(options.groups);
| + | function getAllCombs(arrays) { |
| − | for(var i = 0; i<group.length;i++){
| + | var allCombs = cartesianProduct(arrays); |
| | + | return allCombs; |
| | + | } |
| | + | //Gets Path array with nodes, returns Cartesian Product of edges |
| | + | function getEdgePathsForPath(path) { |
| | + | var arraysOfEdgesForNodeInPath = []; |
| | + | for (var i = 1; i < path.length; i++) { |
| | + | var edgesBetween = getAllEdgesBetween(path[i - 1], path[i]); |
| | + | var localedgesBetween = edgesBetween.slice(); |
| | + | |
| | + | arraysOfEdgesForNodeInPath.push(localedgesBetween); |
| | + | } |
| | + | var allEdgePaths = getAllCombs(arraysOfEdgesForNodeInPath); |
| | + | return allEdgePaths; |
| | + | } |
| | + | //Given Label is reversed with "-" or "-" is removed |
| | + | function reverseLabel(label) { |
| | + | if (label[0] == "-") { |
| | + | return label.substring(1); |
| | + | } else { |
| | + | return "-" + label; |
| | + | } |
| | + | } |
| | + | //Gets Path array with nodes, returns all possible edge paths |
| | + | function getEdgeLabelStringsForPath(path) { |
| | + | var allEdgePaths = getEdgePathsForPath(path); |
| | + | var allStrings = new Array(allEdgePaths.length); |
| | + | for (var i = 0; i < allEdgePaths.length; i++) { |
| | + | var s = ""; |
| | + | for (var j = 0; j < allEdgePaths[i].length; j++) { |
| | + | var edge = allEdgePaths[i][j]; |
| | + | var label = edge.label; |
| | + | var nodeId1 = path[j]; |
| | + | var nodeId2 = path[j + 1]; |
| | + | if (edge.to == nodeId1 && edge.from == nodeId2) { |
| | + | label = reverseLabel(label); |
| | + | } |
| | + | if (j == (allEdgePaths[i].length - 1)) { |
| | + | s = s + label; |
| | + | } else { |
| | + | s = s + label + "."; |
| | + | } |
| | + | } |
| | + | allStrings[i] = s; |
| | + | } |
| | + | return allStrings; |
| | + | } |
| | + | //Gets Path arrays with nodes, returns all possible edge paths |
| | + | function getAllStringsForAllPaths(paths) { |
| | + | var arrayOfAllStrings = []; |
| | + | for (var i = 0; i < paths.length; i++) { |
| | + | var path = paths[i]; |
| | + | var allStrings = getEdgeLabelStringsForPath(path); |
| | + | arrayOfAllStrings.push(allStrings); |
| | + | } |
| | + | return arrayOfAllStrings; |
| | + | } |
| | + | //Removes the given value from the given array |
| | + | function removeItem(arr, value) { |
| | + | var index = arr.indexOf(value); |
| | + | if (index > -1) { |
| | + | arr.splice(index, 1); |
| | + | } |
| | + | return arr; |
| | + | } |
| | + | //Returns all paths between startNode and endNode |
| | + | function findAllPaths(startNode, endNode) { |
| | + | var visitedNodes = []; |
| | + | var currentPath = []; |
| | + | var allPaths = []; |
| | + | dfs(startNode, endNode, currentPath, allPaths, visitedNodes); |
| | + | return allPaths; |
| | + | } |
| | + | //Algorithm to search for all paths between two nodes |
| | + | function dfs(start, end, currentPath, allPaths, visitedNodes) { |
| | + | if (visitedNodes.includes(start)) return; |
| | + | visitedNodes.push(start); |
| | + | currentPath.push(start); |
| | + | if (start == end) { |
| | + | var localCurrentPath = currentPath.slice(); |
| | + | allPaths.push(localCurrentPath); |
| | + | removeItem(visitedNodes, start); |
| | + | currentPath.pop(); |
| | + | return; |
| | + | } |
| | + | var neighbours = network.getConnectedNodes(start); |
| | + | for (var i = 0; i < neighbours.length; i++) { |
| | + | var current = neighbours[i]; |
| | + | dfs(current, end, currentPath, allPaths, visitedNodes); |
| | + | } |
| | + | currentPath.pop(); |
| | + | removeItem(visitedNodes, start); |
| | + | } |
| | + | //Algorithm that gets all nodes that are reachable from the given node in the graph |
| | + | function getAllReachableNodesTo(nodeId, excludeIds, reachableNodes) { |
| | + | if (reachableNodes.includes(nodeId) || excludeIds.includes(nodeId)) { |
| | + | return; |
| | + | } |
| | + | var children = network.getConnectedNodes(nodeId); |
| | + | reachableNodes.push(nodeId); |
| | + | for (var i = 0; i < children.length; i++) { |
| | + | getAllReachableNodesTo(children[i], excludeIds, reachableNodes); |
| | + | //if(excludeIds.includes(children[i]))continue; |
| | + | //reachableNodes.push(children[i]); |
| | + | } |
| | + | } |
| | + | //This function deletes all children of a given node. |
| | + | function deleteNodesChildren(nodeId, deleteEdge) { |
| | + | var excludedIds = []; |
| | + | if (deleteEdge === true) { |
| | + | console.log("deleteEdge true") |
| | + | } else { |
| | + | excludedIds.push(nodeId); |
| | + | } |
| | + | var reachableNodesTo = []; |
| | + | getAllReachableNodesTo(input.root, excludedIds, reachableNodesTo); |
| | + | var nodesToDelete = []; |
| | + | var allIds = nodes.getIds(); |
| | + | for (var i = 0; i < allIds.length; i++) { |
| | + | if (reachableNodesTo.includes(allIds[i])) continue; |
| | + | if (allIds[i] == nodeId) { |
| | + | deleteEdges(nodeId); |
| | + | continue; |
| | + | } |
| | + | nodesToDelete.push(allIds[i]); |
| | + | deleteEdges(allIds[i]); |
| | + | nodes.remove(allIds[i]); |
| | + | delete oldGroups["" + allIds[i]]; |
| | + | delete objClickedProps["" + allIds[i]]; |
| | + | } |
| | + | return nodesToDelete; |
| | + | } |
| | + | //Deletes all edges from given node |
| | + | function deleteEdges(nodeID) { |
| | + | var fromEdges = edges.get({ |
| | + | filter: function(item) { |
| | + | return item.from == nodeID; |
| | + | } |
| | + | }); |
| | + | for (var j = 0; j < fromEdges.length; j++) { |
| | + | edges.remove(fromEdges[j]); |
| | + | } |
| | + | } |
| | + | var nodesClicked = []; |
| | + | var tip = '<p><strong>Hinweis:</strong> Um sich einen Pfad zwischen zwei Knoten ausgeben zu lassen, <em>Strg</em> gedrückt halten und die gewünschten zwei Knoten mit der <em>linken Maustaste</em> anklicken. </p>' |
| | + | this.insertAdjacentHTML('afterbegin', tip); |
| | + | //Ctrl and click on two nodes, puts out all possible paths between the two nodes under the tip |
| | + | network.on("click", function(params) { |
| | + | if (params.nodes[0] && params.event.srcEvent.ctrlKey) { |
| | + | if (nodesClicked.length < 2) { |
| | + | nodesClicked.push(params.nodes[0]); |
| | + | } |
| | + | if (nodesClicked.length == 2 && nodesClicked[0] != nodesClicked[1]) { |
| | + | var foundPaths = findAllPaths(nodesClicked[0], nodesClicked[1]); |
| | + | //.querySelector('[id^="poll-"]').id; |
| | + | if (document.querySelectorAll('[id^="fullPath"]')) { |
| | + | for (var i = 0; i < document.querySelectorAll('[id^="fullPath"]').length; i++) { |
| | + | document.querySelectorAll('[id^="fullPath"]')[i].remove(); |
| | + | } |
| | + | } |
| | + | var element = '<div id="fullPath' + pathId + '"></div>' |
| | + | givenDiv.children[0].insertAdjacentHTML('afterend', element); |
| | + | var allStringsArray = getAllStringsForAllPaths(foundPaths); |
| | + | var stringDiv = givenDiv.querySelector('#fullPath' + pathId); |
| | + | if (foundPaths.length == 1) { |
| | + | stringDiv.innerHTML = "<strong>Gefundener Pfad:</strong><br>" |
| | + | } else { |
| | + | stringDiv.innerHTML = "<strong>Gefundene Pfade:</strong><br>" |
| | + | } |
| | + | for (var s = 0; s < foundPaths.length; s++) { |
| | + | if (foundPaths.length == 1) { |
| | + | var pathNumb = "" |
| | + | } else { |
| | + | var pathNumb = "<strong>" + (s + 1) + ". Pfad:</strong> <br>" |
| | + | } |
| | + | stringDiv.innerHTML += pathNumb + "<strong>Knoten: </strong>"; |
| | + | for (var t = 0; t < foundPaths[s].length; t++) { |
| | + | var currentFoundPath = foundPaths[s][t]; |
| | + | if (t == (foundPaths[s].length - 1)) { |
| | + | stringDiv.innerHTML = stringDiv.innerHTML + currentFoundPath + " "; |
| | + | } else { |
| | + | stringDiv.innerHTML = stringDiv.innerHTML + currentFoundPath + " - "; |
| | + | } |
| | + | } |
| | + | stringDiv.innerHTML += "<br>" |
| | + | stringDiv.innerHTML += "<strong>Kanten:</strong><br>" |
| | + | for (var t = 0; t < allStringsArray[s].length; t++) { |
| | + | var currentString = allStringsArray[s][t]; |
| | + | var currentFoundPath = foundPaths[s][t]; |
| | + | var stringDiv = givenDiv.querySelector('#fullPath' + pathId); |
| | + | stringDiv.innerHTML = stringDiv.innerHTML + '● ' + currentString + '<br>'; |
| | + | } |
| | + | stringDiv.innerHTML += "<br>" |
| | + | } |
| | + | nodesClicked = []; |
| | + | } |
| | + | if (nodesClicked[0] === nodesClicked[1] || nodesClicked.length > 2) { |
| | + | nodesClicked = []; |
| | + | } |
| | + | } |
| | + | pathId++; |
| | + | }); |
| | + | $(document).keyup(function(event) { |
| | + | if (!event.ctrlKey) { |
| | + | nodesClicked = []; |
| | + | } |
| | + | }); |
| | + | var contextCreatedProps = []; |
| | + | |
| | + | network.on("doubleClick", function(params) { |
| | + | if (params.nodes[0]) { |
| | + | //Checks if all node children are created from context menu or manually, if so it creates nodes for before defined properties else it deletes all children |
| | + | var conManNodes = network.getConnectedNodes(params.nodes[0], 'to'); |
| | + | var onlyConManNodes = true; |
| | + | for (var i = 0; i < conManNodes.length; i++) { |
| | + | if (!(nodes.get(conManNodes[i]).oncontext || nodes.get(conManNodes[i]).manually)) { |
| | + | onlyConManNodes = false; |
| | + | } |
| | + | } |
| | + | //Node is expanded -> delete it and all nodes related to its expansion |
| | + | if (network.getConnectedNodes(params.nodes[0]).length > 1 && onlyConManNodes == false) { |
| | + | deleteNodesChildren(params.nodes[0]); |
| | + | for (var i = 0; i < contextCreatedProps.length; i++) { |
| | + | var noNodesInNetwork = true; |
| | + | for (var j = 0; j < nodes.getIds().length; j++) { |
| | + | if (contextCreatedProps[i] == nodes.get(nodes.getIds()[j]).group) { |
| | + | noNodesInNetwork = false; |
| | + | } |
| | + | } |
| | + | if (noNodesInNetwork === true) { |
| | + | givenDiv.querySelector('#' + contextCreatedProps[i]).remove(); |
| | + | contextCreatedProps.splice(contextCreatedProps.indexOf(contextCreatedProps[i]), 1); |
| | + | i--; |
| | + | } |
| | + | } |
| | + | delete objClickedProps["" + params.nodes[0]]; |
| | + | //nodesArray.splice(nodesArray.indexOf(params.nodes[0]), 1); |
| | + | } else { |
| | + | //Node is unexpanded -> expand it |
| | + | var nodeById = nodes.get(params.nodes[0]); |
| | + | fetchData(nodeById.id, input.properties, params.nodes[0]); |
| | + | //nodesArray.push(params.nodes[0]); |
| | + | } |
| | + | } |
| | + | }); |
| | + | |
| | + | function newGroup(node, legendGroup) { |
| | + | nodes.update({ |
| | + | id: node, |
| | + | group: legendGroup |
| | + | }); |
| | + | var connectedNodes = network.getConnectedNodes(node, 'to'); |
| | + | for (var i = 0; i < connectedNodes.length; i++) { |
| | + | newGroup(connectedNodes[i], legendGroup); |
| | + | } |
| | + | } |
| | + | //Checks, if a node has a path over visible edges to the root node. |
| | + | //If not, the nodes gets hidden |
| | + | function setNodeVisibilityByVisiblePath(nodeId, rootNodeId) { |
| | + | if (nodeId == rootNodeId) return true; //root is always visible |
| | + | var node = nodes.get(nodeId); |
| | + | if (node.visited) return !node.hidden //prevent circles. ToDo: Reuse results between runs |
| | + | node.visited = true; |
| | + | node.hidden = true; |
| | + | var connectedEdgesIds = network.getConnectedEdges(nodeId); |
| | + | var connectedEdges = edges.get(connectedEdgesIds); |
| | + | connectedEdges.forEach(function(edge) { |
| | + | if (edge.hidden) return; //don't follow hidden edges |
| | + | var connectedNodesIds = network.getConnectedNodes(edge.id); |
| | + | var connectedNodes = nodes.get(connectedNodesIds); |
| | + | connectedNodes.forEach(function(connectedNode) { |
| | + | if (connectedNode.id == nodeId) return; //prevent self evaluation |
| | + | if (setNodeVisibilityByVisiblePath(connectedNode.id, rootNodeId)) { |
| | + | node.hidden = false; //set node visible, if at least one connected node is visible |
| | + | } |
| | + | }); |
| | + | }); |
| | + | node.physics = !node.hidden; //disable physics for hidden nodes |
| | + | return !node.hidden; |
| | + | } |
| | + | |
| | + | function legendFunctionality() { |
| | + | var legendGroup; |
| | + | var group; |
| | + | var nodeChildren; |
| | + | legendGroup = this.parentNode.childNodes[1].innerHTML; |
| | + | var strategy = "strategy2" |
| | + | if (strategy == "strategy2") { |
| | + | //A node is visible if at least one path over visible edges to the root node exists. |
| | + | options.groups[legendGroup].hidden = !options.groups[legendGroup].hidden; //toggle state |
| | + | if (options.groups[legendGroup].hidden) this.parentNode.childNodes[1].style.background = '#FFFFFF'; |
| | + | else this.parentNode.childNodes[1].style.background = '#DEF'; |
| | + | //update all edges |
| | + | edges.forEach(function(edge) { |
| | + | edge.hidden = options.groups[edge.label].hidden; |
| | + | edge.physics = !edge.hidden; |
| | + | }); |
| | + | //reset nodes |
| | + | nodes.forEach(function(node) { |
| | + | node.hidden = false; |
| | + | node.physics = !node.hidden; |
| | + | node.visited = false; |
| | + | }); |
| | + | //check each node |
| | + | nodes.forEach(function(node) { |
| | + | setNodeVisibilityByVisiblePath(node.id, input.root) |
| | + | //reset visited state. Todo: Reuse visited nodes between runs |
| | + | nodes.forEach(function(node) { |
| | + | node.visited = false; |
| | + | }); |
| | + | }); |
| | + | } |
| | + | network.setOptions(options); |
| | + | network.body.emitter.emit('_dataChanged'); |
| | + | network.redraw(); |
| | + | var allFalse = Object.keys(options.groups).every(function(k) { |
| | + | if (k === 'useDefaultGroups') { |
| | + | return true |
| | + | } |
| | + | return options.groups[k].hidden === false |
| | + | }); |
| | + | if (allFalse === true) { |
| | + | /*oldGroups = {};*/ |
| | + | } |
| | + | }; |
| | + | var legendDiv = document.createElement("div"); |
| | + | this.append(legendDiv); |
| | + | legendDiv.style.width = '100%'; |
| | + | legendDiv.style.position = 'relative'; |
| | + | legendDiv.style.display = 'inline-block'; |
| | + | legendDiv.id = "legendContainer"; |
| | + | var legendColors = {}; |
| | + | for (var i = 0; i < input.properties.length; i++) { |
| | + | legendColors[input.properties[i]] = colors[i]; |
| | + | var propertyContainer = document.createElement("div"); |
| | + | var propertyColor = document.createElement("div"); |
| | + | var propertyName = document.createElement("div"); |
| | + | propertyContainer.className = "legend-element-container"; |
| | + | propertyContainer.id = input.properties[i]; |
| | + | propertyColor.className = "color-container"; |
| | + | propertyName.className = "name-container"; |
| | + | propertyColor.style.float = "left"; |
| | + | propertyName.style.float = "left"; |
| | + | propertyColor.style.border = "1px solid black"; |
| | + | propertyName.style.border = "1px solid black"; |
| | + | propertyColor.style.background = colors[i]; |
| | + | propertyColor.innerHTML = ""; |
| | + | propertyName.innerHTML = input.properties[i]; |
| | + | propertyColor.style.width = "30px"; |
| | + | propertyColor.style.height = "30px"; |
| | + | propertyName.style.height = "30px"; |
| | + | propertyName.style.background = '#DEF'; |
| | + | //propertyName.text-align = 'center'; |
| | + | propertyContainer.paddinng = '5px 5px 5px 5px'; |
| | + | propertyName.addEventListener("click", legendFunctionality); |
| | + | propertyColor.addEventListener("click", legendFunctionality); |
| | + | legendDiv.append(propertyContainer); |
| | + | propertyContainer.append(propertyColor); |
| | + | propertyContainer.append(propertyName); |
| | + | } |
| | + | var ul = document.createElement("ul"); |
| | + | ul.className = 'custom-menu'; |
| | + | document.body.append(ul); |
| | + | objClickedProps = {}; |
| | + | objColors = {}; |
| | + | var start = 0; |
| | + | //On a node right click it puts out all properties of the clicked node and a link to the node wiki-page |
| | + | network.on("oncontext", function(params) { |
| | + | params.event.preventDefault(); |
| | + | var timeNow = Date.now(); |
| | + | var timeDiff = timeNow - start |
| | + | if (timeDiff > 300) { |
| | + | start = Date.now(); |
| | + | //console.log(nodes.get(network.getNodeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y }))); |
| | + | //console.log(edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y }))); |
| | + | $('.custom-menu').each(function(index) { |
| | + | while (this.lastElementChild) { |
| | + | this.removeChild(this.lastElementChild); |
| | + | } |
| | + | }); |
| | + | if (!(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | }) && network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | }))) { |
| | + | if (edges.get(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).from) { |
| | + | params.event.preventDefault(); |
| | + | if (edges.get(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).label == 'Category') { |
| | + | var li = document.createElement("li"); |
| | + | li.innerHTML = '' + '\uD83D\uDD17' + ' ' + edges.get(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).to; |
| | + | li.addEventListener("click", function NewTab() { |
| | + | window.open('/wiki/' + edges.get(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).to); |
| | + | }); |
| | + | ul.prepend(li); |
| | + | } else { |
| | + | var li = document.createElement("li"); |
| | + | li.innerHTML = '' + '\uD83D\uDD17' + ' ' + edges.get(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).label; |
| | + | li.addEventListener("click", function NewTab() { |
| | + | window.open('/wiki/' + 'Property:' + edges.get(network.getEdgeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).label); |
| | + | }); |
| | + | ul.prepend(li); |
| | + | } |
| | + | $(".custom-menu").finish().toggle(100).css({ |
| | + | top: params.event.pageY + "px", |
| | + | left: params.event.pageX + "px", |
| | + | display: "block" |
| | + | }); |
| | + | } |
| | + | } |
| | + | if (network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })) { |
| | + | params.event.preventDefault(); |
| | + | const nodeID = nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id; |
| | + | var subject = nodeID.split("#")[0]; |
| | + | var subObject = ""; |
| | + | if (nodeID.split("#")[1]) { |
| | + | subObject = nodeID.split("#")[1].replace(" ", "_"); |
| | + | } |
| | + | var namespace_id = 0; |
| | + | if (subject.split(":")[1]) { |
| | + | const namespace = subject.split(":")[0]; |
| | + | subject = subject.split(":")[1]; |
| | + | namespace_id = mw.config.get('wgNamespaceIds')[namespace.replaceAll(" ","_").toLowerCase()]; |
| | + | //console.log(`Namespace ${namespace}, ID ${namespace_id}`); |
| | + | } |
| | + | |
| | + | //inverse properties are only available in html format |
| | + | const query = `/w/api.php?action=smwbrowse&browse=subject¶ms={"subject":"${encodeURIComponent(subject)}","subobject":"${subObject}","options":{"showAll":"true"}, "ns":${namespace_id}, "type":"html"}&format=json`; |
| | + | fetch(query) |
| | + | .then(response => response.json()) |
| | + | .then(data => { |
| | + | var selected_node = nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })); |
| | + | if (selected_node.url) { |
| | + | var li = document.createElement("li"); |
| | + | li.innerHTML = '' + '\uD83D\uDD17' + ' ' + selected_node.label; |
| | + | li.addEventListener("click", function NewTab() { |
| | + | window.open(selected_node.url); |
| | + | }); |
| | + | ul.prepend(li); |
| | + | } |
| | + | var page_properties = []; |
| | + | $html = $(data.query); |
| | + | $html.find("div.smwb-propvalue").each(function() { |
| | + | $prop = $(this).find("div.smwb-prophead a"); |
| | + | //var propName = $prop.text(); |
| | + | //var propName = $prop.attr('title').replace("Property:", ""); |
| | + | var propName = ""; |
| | + | if ($prop.attr('title') === "Special:Categories") propName += "Category"; |
| | + | else if ($prop.attr('title') === "Special:ListRedirects") return; |
| | + | else if ($prop.attr('href')) propName += $prop.attr('href').split("Property:")[1].split("&")[0]; |
| | + | else return; //empty property |
| | + | page_properties.push(propName); |
| | + | //console.log(propName); |
| | + | $(this).find("div.smwb-propval span.smwb-value").each(function() { |
| | + | var value = $(this).find("a").attr("title"); |
| | + | //console.log("-> " + value); |
| | + | }); |
| | + | }) |
| | + | $html.find("div.smwb-ipropvalue").each(function() { |
| | + | $prop = $(this).find("div.smwb-prophead a"); |
| | + | //var propName = $prop.text(); |
| | + | //var propName = $prop.attr('title').replace("Property:", ""); |
| | + | var propName = "-"; |
| | + | if ($prop.attr('title') === "Special:Categories") propName += "Category"; |
| | + | else if ($prop.attr('title') === "Special:ListRedirects") return; |
| | + | else if ($prop.attr('href')) propName += $prop.attr('href').split("Property:")[1].split("&")[0]; |
| | + | else return; //empty property |
| | + | page_properties.push(propName); |
| | + | //console.log(propName); |
| | + | $(this).find("div.smwb-propval span.smwb-ivalue").each(function() { |
| | + | var value = $(this).find("a").attr("title"); |
| | + | //console.log("-> " + value); |
| | + | }); |
| | + | }) |
| | + | for (var i = 0; i < page_properties.length; i++) { |
| | + | if (!page_properties[i].startsWith("_")) { |
| | + | var li = document.createElement("li"); |
| | + | li.dataset.action = page_properties[i].replaceAll('_', ' '); |
| | + | li.innerHTML = page_properties[i].replaceAll('_', ' '); |
| | + | ul.append(li); |
| | + | } |
| | + | } |
| | + | /* old: use json result */ |
| | + | /* |
| | + | var page_properties = data.query.data; //normal page |
| | + | if (selected_node.id.includes('#')) { //subobject |
| | + | for (var i = 0; i < data.query.sobj.length; i++) { |
| | + | if (data.query.sobj[i].subject.endsWith(selected_node.id.split('#').pop().replace(' ',''))){ |
| | + | page_properties = data.query.sobj[i].data |
| | + | break; |
| | + | } |
| | + | } |
| | + | } |
| | + | for (var i = 0; i < page_properties.length; i++) { |
| | + | if (!page_properties[i].property.startsWith("_")) { |
| | + | var li = document.createElement("li"); |
| | + | li.dataset.action = page_properties[i].property.replaceAll('_',' '); |
| | + | li.innerHTML = page_properties[i].property.replaceAll('_',' '); |
| | + | ul.append(li); |
| | + | } |
| | + | }*/ |
| | + | //On left click on one of the properties it creates nodes for the clicked property and if the legend doesnt have that property as a legend entry it is created |
| | + | $(".custom-menu li").click(function() { |
| | + | var clickedProperty = [$(this).attr("data-action")] |
| | + | var clickedPropertyColor = randomHSL(); |
| | + | if (!(clickedProperty in legendColors)) { |
| | + | legendColors[clickedProperty] = clickedPropertyColor; |
| | + | } else { |
| | + | clickedPropertyColor = legendColors[clickedProperty]; |
| | + | } |
| | + | if (objColors[clickedProperty]) { |
| | + | clickedPropertyColor = objColors[clickedProperty] |
| | + | } else { |
| | + | objColors[clickedProperty] = clickedPropertyColor; |
| | + | } |
| | + | if (!objClickedProps[nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id]) { |
| | + | objClickedProps[nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id] = new Array(); |
| | + | } |
| | + | if (!objClickedProps["" + nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id].includes(clickedProperty[0])) { |
| | + | fetchData(nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id, clickedProperty, nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id, clickedProperty, clickedPropertyColor) |
| | + | objClickedProps["" + nodes.get(network.getNodeAt({ |
| | + | x: params.pointer.DOM.x, |
| | + | y: params.pointer.DOM.y |
| | + | })).id].push(clickedProperty[0]); |
| | + | } |
| | + | if (!(contextCreatedProps.includes(clickedProperty[0]) || input.properties.includes(clickedProperty[0]) /*|| legendColors[clickedProperty[0]]*/ )) { |
| | + | contextCreatedProps.push(clickedProperty[0]); |
| | + | options.groups[clickedProperty] = { |
| | + | hidden: false |
| | + | }; |
| | + | var propertyContainer = document.createElement("div"); |
| | + | var propertyColor = document.createElement("div"); |
| | + | var propertyName = document.createElement("div"); |
| | + | propertyContainer.className = "legend-element-container"; |
| | + | propertyContainer.id = clickedProperty; |
| | + | propertyColor.className = "color-container"; |
| | + | propertyName.className = "name-container"; |
| | + | propertyColor.style.float = "left"; |
| | + | propertyName.style.float = "left"; |
| | + | propertyColor.style.border = "1px solid black"; |
| | + | propertyName.style.border = "1px solid black"; |
| | + | propertyContainer.style = "margin-right: 5px"; |
| | + | propertyColor.style.background = clickedPropertyColor; |
| | + | propertyColor.innerHTML = ""; |
| | + | propertyName.innerHTML = clickedProperty; |
| | + | propertyColor.style.width = "30px"; |
| | + | propertyColor.style.height = "30px"; |
| | + | propertyName.style.height = "30px"; |
| | + | propertyName.style.background = '#DEF'; |
| | + | //propertyName.text-align = 'center'; |
| | + | propertyName.margin = 'auto 5px auto 5px'; |
| | + | propertyName.addEventListener("click", legendFunctionality); |
| | + | propertyColor.addEventListener("click", legendFunctionality); |
| | + | legendDiv.append(propertyContainer); |
| | + | propertyContainer.append(propertyColor); |
| | + | propertyContainer.append(propertyName); |
| | + | } |
| | + | $(".custom-menu").hide(100); |
| | + | }); |
| | + | }); |
| | + | $(".custom-menu").finish().toggle(100).css({ |
| | + | top: params.event.pageY + "px", |
| | + | left: params.event.pageX + "px", |
| | + | display: "block" |
| | + | }); |
| | + | } |
| | + | } |
| | + | }); |
| | + | // If the document is clicked somewhere it hides the context menu |
| | + | $(document).bind("mousedown", function(e) { |
| | + | // If the clicked element is not the menu |
| | + | if (!$(e.target).parents(".custom-menu").length > 0) { |
| | + | // Hide it |
| | + | $(".custom-menu").hide(100); |
| | + | } |
| | + | }); |
| | + | //Add Node popup |
| | + | function editNode(data, cancelAction, callback) { |
| | + | var newNodeActive = true; |
| | + | document.getElementById("node-label").value = data.label; |
| | + | document.getElementById("node-saveButton").onclick = saveNodeData.bind( |
| | + | this, |
| | + | data, |
| | + | callback |
| | + | ); |
| | + | document.getElementById("node-cancelButton").onclick = cancelAction.bind( |
| | + | this, |
| | + | callback |
| | + | ); |
| | + | //document.getElementById("node-popUp") |
| | + | $('canvas').on('click', function(e) { |
| | + | if (newNodeActive === true) { |
| | + | $("#node-popUp").css({ |
| | + | top: e.pageY + "px", |
| | + | left: e.pageX + "px", |
| | + | display: "block" |
| | + | }); |
| | + | } |
| | + | newNodeActive = false; |
| | + | }); |
| | + | } |
| | | | |
| − |
| + | function clearNodePopUp() { |
| − | //nodes.update({id:group[i].id, hidden:true}); | + | document.getElementById("node-saveButton").onclick = null; |
| − | nodeChildren = network.getConnectedNodes(group[i].id, 'to');
| + | document.getElementById("node-cancelButton").onclick = null; |
| − | options.groups[legendGroup].hidden = true;
| + | document.getElementById("node-popUp").style.display = "none"; |
| − | //console.log(options.groups[legendGroup]);
| + | } |
| − | network.body.emitter.emit('_dataChanged');
| + | |
| − | network.redraw();
| + | function cancelNodeEdit(callback) { |
| − |
| + | clearNodePopUp(); |
| | + | callback(null); |
| | + | } |
| | + | //saveNodeData to the graph |
| | + | function saveNodeData(data, callback) { |
| | + | data.label = document.getElementById("node-label").value; |
| | + | data.id = document.getElementById("node-label").value; |
| | + | data.hidden = false; |
| | + | data.physics = false; |
| | + | document.getElementById("node-label").value = ""; |
| | + | clearNodePopUp(); |
| | + | callback(data); |
| | + | } |
| | + | //addEdge popup |
| | + | function editEdgeWithoutDrag(data, callback) { |
| | + | var newEdgeActive = true; |
| | + | // filling in the popup DOM elements |
| | + | document.getElementById("edge-label").value = data.label; |
| | + | |
| | + | document.getElementById("edge-saveButton").onclick = saveEdgeData.bind( |
| | + | this, |
| | + | data, |
| | + | callback |
| | + | ); |
| | + | document.getElementById("edge-cancelButton").onclick = cancelEdgeEdit.bind( |
| | + | this, |
| | + | callback |
| | + | ); |
| | + | $('canvas').on('click', function(e) { |
| | + | if (newEdgeActive === true) { |
| | + | $("#edge-popUp").css({ |
| | + | top: e.pageY + "px", |
| | + | left: e.pageX + "px", |
| | + | display: "block" |
| | + | }); |
| | + | } |
| | + | newEdgeActive = false; |
| | + | }); |
| | + | //document.getElementById("edge-popUp").style.display = "block"; |
| | + | } |
| | + | |
| | + | function clearEdgePopUp() { |
| | + | document.getElementById("edge-saveButton").onclick = null; |
| | + | document.getElementById("edge-cancelButton").onclick = null; |
| | + | document.getElementById("edge-popUp").style.display = "none"; |
| | + | } |
| | + | |
| | + | function cancelEdgeEdit(callback) { |
| | + | clearEdgePopUp(); |
| | + | callback(null); |
| | + | } |
| | | | |
| − | if(nodeChildren.length === 0){
| + | function isLabelReversed(label) { |
| − |
| + | if (label[0] == "-") { |
| − | continue;
| + | return true; |
| − | }else{
| + | } else { |
| − |
| + | return false; |
| − | for(var j = 0; j<nodeChildren.length;j++){
| + | } |
| − | console.log(nodes.get(nodeChildren[j]).group);
| + | } |
| − | oldGroups.push({id: nodes.get(nodeChildren[j]).id, group:nodes.get(nodeChildren[j]).group});
| + | var pageBool; |
| − |
| + | //Checks if page exists in the wiki |
| − | nodes.update({id: nodeChildren[j], group:legendGroup});
| + | async function pageExists(id) { |
| − | console.log(nodes.get(nodeChildren[j]));
| + | await fetch('/w/api.php?action=parse&page=' + id + '&prop=wikitext&format=json') |
| − | network.body.emitter.emit('_dataChanged');
| + | .then(response => response.json()) |
| − | network.redraw();
| + | .then(data => { |
| − |
| + | if (data.error) { |
| − |
| + | pageBool = false; |
| − |
| + | } else { |
| − |
| + | pageBool = true; |
| − | }console.log(oldGroups);
| + | } |
| − | }
| + | }) |
| | + | return pageBool; |
| | + | } |
| | + | var wikiText = ""; |
| | + | var semantic = ""; |
| | + | //Splits Wikitext and Semantic/Element or Semantic/Link |
| | + | async function editWikiText(node) { |
| | + | await fetch('/w/api.php?action=parse&page=' + node + '&prop=wikitext&format=json') |
| | + | .then(response => response.json()) |
| | + | .then(data => { |
| | + | wikiText = data.parse.wikitext['*']; |
| | + | semantic = ""; |
| | + | if (wikiText.search(/(\{\{Semantic\/[^}]*[\r\n]*\}[\r\n]*\})/g) >= 0) { |
| | + | //var edgeStringFound = wikiText.search(re) >= 0; |
| | + | const found = wikiText.match(/(\{\{Semantic\/[^}]*[\r\n]*\}[\r\n]*\})/g); |
| | + | var newWikiText = wikiText; |
| | + | for (var i = 0; i < found.length; i++) { |
| | + | if (i == found.length - 1) { |
| | + | semantic += found[i]; |
| | + | newWikiText = newWikiText.replace(/(\{\{Semantic\/[^}]*[\r\n]*\}[\r\n]*\}[\r\n]*\}[\r\n]*\})/g, ""); |
| | + | newWikiText = newWikiText.replace(/(\{\{Semantic\/Link[^}]*[\r\n]*\}[\r\n]*\})/g, ""); |
| | + | } else { |
| | + | semantic += found[i]; |
| | + | newWikiText = newWikiText.replace(found[i], ""); |
| | + | } |
| | + | } |
| | + | wikiText = newWikiText; |
| | + | } |
| | + | }); |
| | + | return [semantic, wikiText]; |
| | + | } |
| | + | //Save button on create edge popup |
| | + | async function saveEdgeData(data, callback) { |
| | + | //Sets various options to the nodes that the edge gets connected |
| | + | if (typeof data.to === "object") data.to = data.to.id; |
| | + | if (typeof data.from === "object") data.from = data.from.id; |
| | + | data.label = document.getElementById("edge-label").value; |
| | + | options.groups[data.label] = { |
| | + | hidden: false |
| | + | }; |
| | + | var toNode = nodes.get(data.to); |
| | + | var fromNode = nodes.get(data.from); |
| | + | fromNode.physics = true; |
| | + | toNode.physics = true; |
| | + | delete fromNode.x; |
| | + | delete fromNode.y; |
| | + | delete toNode.x; |
| | + | delete toNode.y; |
| | + | if (!toNode.group) { |
| | + | toNode.group = data.label |
| | + | } |
| | + | if (!fromNode.group) { |
| | + | fromNode.group = data.label |
| | + | } |
| | + | if (legendColors[data.label]) { |
| | + | data.color = legendColors[data.label]; |
| | + | } else { |
| | + | data.color = randomHSL(); |
| | + | } |
| | + | if (!toNode.color) { |
| | + | toNode.color = data.color; |
| | + | toNode.manually = true; |
| | + | } |
| | + | if (!fromNode.color) { |
| | + | fromNode.color = data.color; |
| | + | fromNode.manually = true; |
| | + | } |
| | + | //If the given property is not set in the legend, a legend entry is created |
| | + | if (!(contextCreatedProps.includes(data.label) || input.properties.includes(data.label))) { |
| | + | contextCreatedProps.push(data.label); |
| | + | var propertyContainer = document.createElement("div"); |
| | + | var propertyColor = document.createElement("div"); |
| | + | var propertyName = document.createElement("div"); |
| | + | propertyContainer.className = "legend-element-container"; |
| | + | propertyContainer.id = data.label; |
| | + | propertyColor.className = "color-container"; |
| | + | propertyName.className = "name-container"; |
| | + | propertyColor.style.float = "left"; |
| | + | propertyName.style.float = "left"; |
| | + | propertyColor.style.border = "1px solid black"; |
| | + | propertyName.style.border = "1px solid black"; |
| | + | propertyContainer.style = "margin-right: 5px"; |
| | + | propertyColor.style.background = data.color; |
| | + | propertyColor.innerHTML = ""; |
| | + | propertyName.innerHTML = data.label; |
| | + | propertyColor.style.width = "30px"; |
| | + | propertyColor.style.height = "30px"; |
| | + | propertyName.style.height = "30px"; |
| | + | propertyName.style.background = '#DEF'; |
| | + | //propertyName.text-align = 'center'; |
| | + | propertyName.margin = 'auto 5px auto 5px'; |
| | + | propertyName.addEventListener("click", legendFunctionality); |
| | + | propertyColor.addEventListener("click", legendFunctionality); |
| | + | legendDiv.append(propertyContainer); |
| | + | propertyContainer.append(propertyColor); |
| | + | propertyContainer.append(propertyName); |
| | + | legendColors[data.label] = data.color; |
| | + | } |
| | + | //Creates new wikitext that will be saved after the save button is clicked |
| | + | if (isLabelReversed(data.label)) { |
| | + | if (await pageExists(fromNode.id) === false) { |
| | + | if (!(newNodes[fromNode.id])) { |
| | + | newNodes[fromNode.id] = '' + '{{Semantic/Element' + |
| | + | '|label=' + fromNode.label + |
| | + | '|description=test' + |
| | + | '|relations='; |
| | + | } |
| | + | } |
| | + | if (await pageExists(toNode.id) === true) { |
| | + | var splitWikiText = await editWikiText(toNode.id); |
| | + | if (editNodes[toNode.id]) { |
| | + | editNodes[toNode.id] += '' + '{{Semantic/Link' + |
| | + | '|property=' + reverseLabel(data.label) + |
| | + | '|value=' + fromNode.id + |
| | + | '}}' + ''; |
| | + | } else { |
| | + | if (splitWikiText[0].search(/(\{\{Semantic\/Element[^}]*[\r\n]*\}[\r\n]*\})/g) >= 0) { |
| | + | editNodes[toNode.id] = splitWikiText[1] + splitWikiText[0] + '{{Semantic/Link' + |
| | + | '|property=' + reverseLabel(data.label) + |
| | + | '|value=' + fromNode.id + |
| | + | '}}' + ''; |
| | + | } else { |
| | + | editNodes[toNode.id] = splitWikiText[1] + '{{Semantic/Element' + |
| | + | '|label=' + toNode.label + |
| | + | '|description=test' + |
| | + | '|relations=' + |
| | + | '{{Semantic/Link' + |
| | + | '|property=' + reverseLabel(data.label) + |
| | + | '|value=' + fromNode.id + |
| | + | '}}' + '' + splitWikiText[0]; |
| | + | } |
| | + | } |
| | + | } else { |
| | + | if (newNodes[toNode.id]) { |
| | + | newNodes[toNode.id] += '' + '{{Semantic/Link' + |
| | + | '|property=' + reverseLabel(data.label) + |
| | + | '|value=' + fromNode.id + |
| | + | '}}' + ''; |
| | + | } else { |
| | + | newNodes[toNode.id] = '' + '{{Semantic/Element' + |
| | + | '|label=' + toNode.label + |
| | + | '|description=test' + |
| | + | '|relations={{Semantic/Link' + |
| | + | '|property=' + reverseLabel(data.label) + |
| | + | '|value=' + fromNode.id + |
| | + | '}}' + |
| | + | ''; |
| | + | } |
| | + | } |
| | + | } else { |
| | + | if (await pageExists(toNode.id) === false) { |
| | + | if (!(newNodes[toNode.id])) { |
| | + | newNodes[toNode.id] = '' + '{{Semantic/Element' + |
| | + | '|label=' + toNode.label + |
| | + | '|description=test' + |
| | + | '|relations='; |
| | + | } |
| | + | } |
| | + | if (await pageExists(fromNode.id) === true) { |
| | + | var splitWikiText = await editWikiText(fromNode.id); |
| | + | if (editNodes[fromNode.id]) { |
| | + | editNodes[fromNode.id] += '' + '{{Semantic/Link' + |
| | + | '|property=' + data.label + |
| | + | '|value=' + toNode.id + |
| | + | '}}' + ''; |
| | + | } else { |
| | + | if (splitWikiText[0].search(/(\{\{Semantic\/Element[^}]*[\r\n]*\}[\r\n]*\})/g) >= 0) { |
| | + | editNodes[fromNode.id] = splitWikiText[1] + splitWikiText[0] + '{{Semantic/Link' + |
| | + | '|property=' + data.label + |
| | + | '|value=' + toNode.id + |
| | + | '}}' + ''; |
| | + | } else { |
| | + | editNodes[fromNode.id] = splitWikiText[1] + '{{Semantic/Element' + |
| | + | '|label=' + fromNode.label + |
| | + | '|description=test' + |
| | + | '|relations=' + |
| | + | '{{Semantic/Link' + |
| | + | '|property=' + data.label + |
| | + | '|value=' + toNode.id + |
| | + | '}}' + '' + splitWikiText[0]; |
| | + | } |
| | + | } |
| | + | } else { |
| | + | if (newNodes[fromNode.id]) { |
| | + | newNodes[fromNode.id] += '' + '{{Semantic/Link' + |
| | + | '|property=' + data.label + |
| | + | '|value=' + toNode.id + |
| | + | '}}' + ''; |
| | + | } else { |
| | + | newNodes[fromNode.id] = '' + '{{Semantic/Element' + |
| | + | '|label=' + fromNode.label + |
| | + | '|description=test' + |
| | + | '|relations={{Semantic/Link' + |
| | + | '|property=' + data.label + |
| | + | '|value=' + toNode.id + |
| | + | '}}' + |
| | + | ''; |
| | + | } |
| | + | } |
| | + | } |
| | + | //console.log(toNode); |
| | + | //console.log(fromNode); |
| | + | //console.log(editNodes); |
| | + | //console.log(newNodes); |
| | + | clearEdgePopUp(); |
| | + | callback(data); |
| | + | network.setOptions(options); |
| | + | network.body.emitter.emit('_dataChanged'); |
| | + | network.redraw(); |
| | + | } |
| | + | //save button |
| | + | var saveBtn = document.createElement("button"); |
| | + | saveBtn.addEventListener("click", saveGraphChanges); |
| | + | saveBtn.innerHTML = "Speichern"; |
| | + | saveBtn.style.width = "auto"; |
| | + | saveBtn.style.height = "auto"; |
| | + | givenDiv.appendChild(saveBtn); |
| | | | |
| − | | + | //Called on save button click. Creates new wiki pages or edits them with the created wiki text. |
| − | | + | function saveGraphChanges() { |
| − | }
| + | var alertString = ""; |
| − | network.body.emitter.emit('_dataChanged');
| + | OO.ui.confirm('Änderungen übernehmen?').done(async function(confirmed) { |
| − | network.redraw();
| + | if (confirmed) { |
| | + | for (const [key, value] of Object.entries(newNodes)) { |
| | + | var params = { |
| | + | action: 'edit', |
| | + | title: '' + key, |
| | + | appendtext: '' + value + '}}', |
| | + | format: 'json' |
| | + | }, |
| | + | api = new mw.Api(); |
| | + | await api.postWithToken('csrf', params).done(function(data) { |
| | + | console.log(data); |
| | + | alertString += "Seite " + key + " erstellt!\r\n" |
| | + | }); |
| | + | } |
| | + | for (const [key, value] of Object.entries(editNodes)) { |
| | + | var params = { |
| | + | action: 'edit', |
| | + | title: '' + key, |
| | + | text: '' + value + '}}', |
| | + | format: 'json' |
| | + | }, |
| | + | api = new mw.Api(); |
| | + | await api.postWithToken('csrf', params).done(function(data) { |
| | + | console.log(data); |
| | + | alertString += "Seite " + key + " bearbeitet!\r\n" |
| | + | }); |
| | + | } |
| | + | for (const [key, value] of Object.entries(editDeletedEdges)) { |
| | + | var params = { |
| | + | action: 'edit', |
| | + | title: '' + key, |
| | + | text: '' + value, |
| | + | format: 'json' |
| | + | }, |
| | + | api = new mw.Api(); |
| | + | await api.postWithToken('csrf', params).done(function(data) { |
| | + | console.log(data); |
| | + | alertString += "Auf der Seite " + key + " wurde ein Attribut gelöscht!\r\n" |
| | + | }); |
| | + | } |
| | + | for (const [key, value] of Object.entries(editDeletedNodes)) { |
| | + | var params = { |
| | + | action: 'delete', |
| | + | title: '' + key, |
| | + | format: 'json' |
| | + | }, |
| | + | api = new mw.Api(); |
| | + | await api.postWithToken('csrf', params).done(function(data) { |
| | + | console.log(data); |
| | + | alertString += "Seite " + key + " wurde gelöscht!\r\n" |
| | + | }); |
| | + | } |
| | + | // Example: Customize the displayed actions at the time the window is opened. |
| | + | var messageDialog = new OO.ui.MessageDialog(); |
| | + | // Create and append a window manager. |
| | + | var windowManager = new OO.ui.WindowManager(); |
| | + | $('body').append(windowManager.$element); |
| | + | // Add the dialog to the window manager. |
| | + | windowManager.addWindows([messageDialog]); |
| | + | // Configure the message dialog when it is opened with the window manager's openWindow() method. |
| | + | windowManager.openWindow(messageDialog, { |
| | + | title: 'Folgende Änderugnen wurden übernommen:', |
| | + | message: '' + alertString, |
| | + | verbose: true, |
| | + | actions: [{ |
| | + | action: 'accept', |
| | + | label: 'Okay', |
| | + | flags: 'primary' |
| | + | }] |
| | + | }); |
| | + | /*OO.ui.alert( "" + alertString ).done( function () { |
| | + | console.log( alertString ); |
| | + | } );*/ |
| | + | } else {} |
| | + | }); |
| | + | } |
| | + | //Deletes node in manipulation mode and the wiki page. |
| | + | function deleteSelectedNode(data, callback) { |
| | + | deleteNodesChildren(data.nodes[0]); |
| | + | nodes.remove(data.nodes[0]); |
| | + | for (var i = 0; i < contextCreatedProps.length; i++) { |
| | + | var noNodesInNetwork = true; |
| | + | for (var j = 0; j < nodes.getIds().length; j++) { |
| | + | if (contextCreatedProps[i] == nodes.get(nodes.getIds()[j]).group) { |
| | + | noNodesInNetwork = false; |
| | + | } |
| | + | } |
| | + | if (noNodesInNetwork === true) { |
| | + | givenDiv.querySelector('#' + contextCreatedProps[i]).remove(); |
| | + | contextCreatedProps.splice(contextCreatedProps.indexOf(contextCreatedProps[i]), 1); |
| | + | i--; |
| | + | } |
| | + | } |
| | + | delete oldGroups["" + data.nodes[0]]; |
| | + | delete objClickedProps["" + data.nodes[0]]; |
| | + | callback(); |
| | + | document.querySelector('.vis-delete').remove(); |
| | + | editDeletedNodes["" + data.nodes[0]] = ""; |
| | + | delete newNodes["" + data.nodes[0]]; |
| | + | delete editNodes["" + data.nodes[0]]; |
| | + | } |
| | + | //Deletes edge in manipulation mode and deletes the property from the node wikipages |
| | + | async function deleteSelectedEdge(data, callback) { |
| | + | var edgeToNode = edges.get(data.edges[0]).to; |
| | + | var edgeFromNode = edges.get(data.edges[0]).from; |
| | + | var edgeLabel = edges.get(data.edges[0]).label; |
| | + | edges.remove(data.edges[0]); |
| | + | deleteNodesChildren(edgeToNode, true); |
| | + | deleteNodesChildren(edgeFromNode, true); |
| | + | for (var i = 0; i < contextCreatedProps.length; i++) { |
| | + | var noNodesInNetwork = true; |
| | + | for (var j = 0; j < nodes.getIds().length; j++) { |
| | + | if (contextCreatedProps[i] == nodes.get(nodes.getIds()[j]).group) { |
| | + | noNodesInNetwork = false; |
| | + | } |
| | + | } |
| | + | if (noNodesInNetwork === true) { |
| | + | givenDiv.querySelector('#' + contextCreatedProps[i]).remove(); |
| | + | contextCreatedProps.splice(contextCreatedProps.indexOf(contextCreatedProps[i]), 1); |
| | + | i--; |
| | + | } |
| | + | } |
| | + | if (edgeLabel[0] == "-") { |
| | + | if (await pageExists(edgeToNode) === true) { |
| | + | await fetch('/w/api.php?action=parse&page=' + edgeToNode + '&prop=wikitext&format=json') |
| | + | .then(response => response.json()) |
| | + | .then(data => { |
| | + | var wikiText = data.parse.wikitext['*']; |
| | + | var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=` + reverseLabel(edgeLabel) + `[\\r\\n]*\\|[\\r\\n]*value=` + edgeFromNode + `[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)` |
| | + | //var edgeString = '(\\{\\{Semantic\/Element[^}]*[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*[\\r\\n]*\\}[\\r\\n]*\\})' |
| | + | var re = new RegExp(edgeString, "g"); |
| | + | var edgeStringFound = wikiText.search(re) >= 0; |
| | + | if (edgeStringFound) { |
| | + | if (editDeletedEdges["" + edgeToNode]) { |
| | + | var newWikiText = editDeletedEdges["" + edgeToNode].replace(re, ""); |
| | + | editDeletedEdges["" + edgeToNode] = newWikiText; |
| | + | } else { |
| | + | var newWikiText = wikiText.replace(re, ""); |
| | + | editDeletedEdges["" + edgeToNode] = newWikiText; |
| | + | } |
| | + | } |
| | + | if (newNodes["" + edgeToNode]) { |
| | + | var newWikiText = newNodes["" + edgeToNode].replace(re, ""); |
| | + | newNodes["" + edgeToNode] = newWikiText; |
| | + | } |
| | + | if (editNodes["" + edgeToNode]) { |
| | + | var newWikiText = editNodes["" + edgeToNode].replace(re, ""); |
| | + | editNodes["" + edgeToNode] = newWikiText; |
| | + | } |
| | + | }); |
| | + | } else { |
| | + | if (network.getConnectedNodes(edgeToNode).length == 0) { |
| | + | delete newNodes["" + edgeToNode]; |
| | + | } else { |
| | + | var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=` + reverseLabel(edgeLabel) + `[\\r\\n]*\\|[\\r\\n]*value=` + edgeFromNode + `[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`; |
| | + | var re = new RegExp(edgeString, "g"); |
| | + | var wikiText = newNodes["" + edgeToNode]; |
| | + | var newWikiText = wikiText.replace(re, ""); |
| | + | newNodes["" + edgeToNode] = newWikiText; |
| | + | } |
| | + | } |
| | + | } else { |
| | + | if (await pageExists(edgeFromNode) === true) { |
| | + | await fetch('/w/api.php?action=parse&page=' + edgeFromNode + '&prop=wikitext&format=json') |
| | + | .then(response => response.json()) |
| | + | .then(data => { |
| | + | var wikiText = data.parse.wikitext['*']; |
| | + | var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=` + edgeLabel + `[\\r\\n]*\\|[\\r\\n]*value=` + edgeToNode + `[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`; |
| | + | //var edgeString = '(\\{\\{Semantic\/Element[^}]*[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*[\\r\\n]*\\}[\\r\\n]*\\})' |
| | + | var re = new RegExp(edgeString, "g"); |
| | + | var edgeStringFound = wikiText.search(re) >= 0; |
| | + | if (edgeStringFound) { |
| | + | if (editDeletedEdges["" + edgeFromNode]) { |
| | + | var newWikiText = editDeletedEdges["" + edgeFromNode].replace(re, ""); |
| | + | editDeletedEdges["" + edgeFromNode] = newWikiText; |
| | + | } else { |
| | + | var newWikiText = wikiText.replace(re, ""); |
| | + | editDeletedEdges["" + edgeFromNode] = newWikiText; |
| | + | } |
| | + | } |
| | + | if (newNodes["" + edgeFromNode]) { |
| | + | var newWikiText = newNodes["" + edgeFromNode].replace(re, ""); |
| | + | newNodes["" + edgeFromNode] = newWikiText; |
| | + | } |
| | + | if (editNodes["" + edgeFromNode]) { |
| | + | var newWikiText = editNodes["" + edgeFromNode].replace(re, ""); |
| | + | editNodes["" + edgeFromNode] = newWikiText; |
| | + | } |
| | + | }); |
| | + | } else { |
| | + | if (network.getConnectedNodes(edgeFromNode).length == 0) { |
| | + | delete newNodes["" + edgeFromNode]; |
| | + | } else { |
| | + | var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=` + edgeLabel + `[\\r\\n]*\\|[\\r\\n]*value=` + edgeToNode + `[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`; |
| | + | var re = new RegExp(edgeString, "g"); |
| | + | var wikiText = newNodes["" + edgeFromNode]; |
| | + | var newWikiText = wikiText.replace(re, ""); |
| | + | newNodes["" + edgeFromNode] = newWikiText; |
| | + | } |
| | + | } |
| | + | } |
| | + | //nodes.remove(edges.get(data.edges[0]).to); |
| | + | callback(data); |
| | + | document.querySelector('.vis-delete').remove(); |
| | + | } |
| | + | //HTML for the manipulation popups |
| | + | var editHtml = '' + |
| | + | '<div id="node-popUp">' + |
| | + | ' <span id="node-operation" style="cursor: move;">node</span> <br />' + |
| | + | ' <table style="margin: auto">' + |
| | + | ' <tbody>' + |
| | + | ' <tr>' + |
| | + | ' <td>label</td>' + |
| | + | ' <td><input id="node-label" value="" /></td>' + |
| | + | ' </tr>' + |
| | + | ' </tbody>' + |
| | + | ' </table>' + |
| | + | ' <input type="button" value="save" id="node-saveButton" />' + |
| | + | ' <input type="button" value="cancel" id="node-cancelButton" />' + |
| | + | '</div>' + |
| | + | '' + |
| | + | '<div id="edge-popUp">' + |
| | + | ' <span id="edge-operation" style="cursor: move;">edge</span> <br />' + |
| | + | ' <table style="margin: auto">' + |
| | + | ' <tbody>' + |
| | + | ' <tr>' + |
| | + | ' <td>label</td>' + |
| | + | ' <td><input id="edge-label" value="" /></td>' + |
| | + | ' </tr>' + |
| | + | ' </tbody>' + |
| | + | ' </table>' + |
| | + | ' <input type="button" value="save" id="edge-saveButton" />' + |
| | + | ' <input type="button" value="cancel" id="edge-cancelButton" />' + |
| | + | '</div>' + |
| | + | ''; |
| | + | var editHtmlDiv = document.createElement("div"); |
| | + | editHtmlDiv.innerHTML = editHtml; |
| | + | document.body.appendChild(editHtmlDiv); |
| | + | //dragElement(document.getElementById("node-popUp")); |
| | + | //dragElement(document.getElementById("edge-popUp")); |
| | + | |
| | + | //function to make the manipulation popups draggable |
| | + | function dragElement(elmnt) { |
| | + | var pos1 = 0, |
| | + | pos2 = 0, |
| | + | pos3 = 0, |
| | + | pos4 = 0; |
| | + | if (document.getElementById(elmnt.id)) { |
| | + | // if present, the header is where you move the DIV from: |
| | + | document.getElementById("node-operation").onmousedown = dragMouseDown; |
| | + | document.getElementById("edge-operation").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; |
| − | }else{
| + | pos4 = e.clientY; |
| − |
| + | document.onmouseup = closeDragElement; |
| − | group = nodes.get({
| + | // call a function whenever the cursor moves: |
| − | filter: function (item) {
| + | document.onmousemove = elementDrag; |
| − | return item.group == legendGroup;
| + | } |
| − | }
| |
| − | });
| |
| − | console.log(options.groups);
| |
| − | for( i = 0; i<group.length;i++){
| |
| − |
| |
| − |
| |
| − | nodeChildren = network.getConnectedNodes(group[i].id, 'to');
| |
| − | options.groups[legendGroup].hidden = false;
| |
| − | //options.groups[legendGroup].hidden = false;
| |
| − | network.body.emitter.emit('_dataChanged');
| |
| − | network.redraw();
| |
| − | console.log(nodeChildren.length);
| |
| − | if(nodeChildren.length === 0){
| |
| − | continue;
| |
| − | }else{
| |
| − | for( j = 0; j<oldGroups.length;j++){
| |
| − | console.log(oldGroups[j],id);
| |
| − | nodes.update({id: oldGroups[j].id, group:oldGroups[j].group});
| |
| − | network.body.emitter.emit('_dataChanged');
| |
| − | network.redraw();
| |
| − |
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − | network.body.emitter.emit('_dataChanged');
| |
| − | network.redraw();
| |
| − | oldGroups = [];
| |
| − |
| |
| − |
| |
| − | }}
| |
| − | ///////////////////////////////////////////////////////////////////////////////////// | |
| − |
| |
| − | /*for( i = 0; i < nodesArray.length; i++){
| |
| − | if(params.nodes[0] == nodesArray[i]){
| |
| − | isInArray = true;
| |
| − | }}*/
| |
| − | if(network.getConnectedNodes(params.nodes[0]).length >1 ){
| |
| − | deleteNodes(params.nodes[0]);
| |
| − | nodesArray.splice(nodesArray.indexOf(params.nodes[0]),1);
| |
| − | //|| (params.nodes[0]===1)
| |
| − |
| |
| − | //isInArray = false;
| |
| − | }else{
| |
| − | var nodeById = nodes.get(params.nodes[0]);
| |
| − | fetchData(nodeById.label, input.properties, params.nodes[0]);
| |
| − | nodesArray.push(params.nodes[0]);
| |
| − |
| |
| − | }
| |
| | | | |
| − | }
| + | 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"; |
| | + | } |
| | | | |
| − | });
| + | function closeDragElement() { |
| − |
| + | // stop moving when mouse button is released: |
| − |
| + | document.onmouseup = null; |
| − |
| + | document.onmousemove = null; |
| − | }
| + | } |
| | + | } |
| | + | } |
| | + | }); |
| | }); | | }); |
| | }); | | }); |
| − |
| |
| − | /*groups: {
| |
| − | useDefaultGroups: false,
| |
| − | 'Kategorie': {},
| |
| − | '-IsLocatedIn': {}
| |
| − | }*/
| |
| − |
| |
| − |
| |
| − | /*for (var key in data.query.results[input.root].printouts) {
| |
| − | if (data.query.results[input.root].printouts.hasOwnProperty(key)) {
| |
| − | for(var key2 in data.query.results[input.root].printouts[key]){
| |
| − | console.log(data.query.results[input.root].printouts[key][key2].fulltext);
| |
| − | }
| |
| − | }
| |
| − | }*/
| |