diff --git a/display/graph.js b/display/graph.js index 9fffa3c2bef0f64e80fc98d010d3182e09aa3608..0c14467f517f6a3d94a34eaf24271b7c9e349c7f 100644 --- a/display/graph.js +++ b/display/graph.js @@ -7,6 +7,7 @@ class Graph { this.highlightLinks = new Set(); this.hoverNode = null; this.edgeColors = {}; + this.idToNode = {}; this.firstTick = true; this.infooverlay = null; @@ -46,6 +47,7 @@ class Graph { if (this.firstTick) { this.mapEdgeColors(); this.updateLinks(); + this.updateNodeMap(); this.addBackground(); // Catch resize events @@ -107,6 +109,10 @@ class Graph { } focusOnNode(node) { + if (typeof node == "string") { + node = this.idToNode[node]; + } + // Aim at node from outside it const distance = 250; const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z); @@ -118,18 +124,8 @@ class Graph { ); } - focusOnNodeId(id) { - const gData = this.graph.graphData(); - - gData.nodes.forEach(node => { - if (node.id === id) { - this.onNodeClick(node); - } - }) - } - updateLinks() { - const gData = this.graph.graphData() + const gData = this.graph.graphData(); // cross-link node objects gData.links.forEach(link => { const a = link.source; @@ -155,6 +151,13 @@ class Graph { .linkDirectionalParticles(this.graph.linkDirectionalParticles()); } + updateNodeMap() { + const gData = this.graph.graphData(); + gData.nodes.forEach(node => { + this.idToNode[node.id] = node; + }) + } + resize() { if(document.fullscreenElement == getCanvasDivNode()) { this.graph.height(screen.height); diff --git a/display/infooverlay.js b/display/infooverlay.js index 1003e202953b398fe17613901358fb88f46d3301..edb8c9a15d95b92bb08f2498b253d3cc933eb2f9 100644 --- a/display/infooverlay.js +++ b/display/infooverlay.js @@ -149,7 +149,7 @@ class InfoOverlay { //linkButton.appendChild(linkTitle); linkButton.appendChild(linkImage); - linkButton.addEventListener('click', function (){focusOnNodeId(nodeID)}); + jQuery(linkButton).on('click', () => this.graph.focusOnNode(nodeID)); tabcontent[i].appendChild(linkButton); } }); diff --git a/knowledge-space.php b/knowledge-space.php index f2f4c07622fe0c72970b5092f2e40dcd4a3bfd6d..63b8a2e493af2199e7ab07dd7bd03ba8ea9a2934 100644 --- a/knowledge-space.php +++ b/knowledge-space.php @@ -11,8 +11,8 @@ function ks_add_graph(): string { $graph = '<script src="//unpkg.com/3d-force-graph"></script>'; $three = '<script src="//unpkg.com/three@0.130.0"></script>'; - $renderer = '<script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>'; - $renderer2 = '<script src="//unpkg.com/three/examples/js/renderers/CSS3DRenderer.js"></script>'; + $renderer = '<script src="//unpkg.com/three@0.130.0/examples/js/renderers/CSS2DRenderer.js"></script>'; + $renderer2 = '<script src="//unpkg.com/three@0.130.0/examples/js/renderers/CSS3DRenderer.js"></script>'; $div = '<div id="3d-graph"></div>'; $plugin_dir = plugin_dir_url(__FILE__); //$dataset = $plugin_dir.'datasets/miserables.json';