Skip to content
Snippets Groups Projects
Commit 2fe53c05 authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

More refactoring.

parent 6f500f39
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
config.js 0 → 100644
+ 9
− 0
View file @ 2fe53c05
const COLOR_PALETTE = [
'rgb(104, 169, 77)',
'rgb(102, 75, 154)',
'rgb(41, 171, 226)',
'rgb(224, 133, 35)',
'rgb(214, 207, 126)',
'rgb(239, 65, 35)',
'rgb(255, 255, 255)'
];
\ No newline at end of file
display/graph.js
+ 69
− 84
View file @ 2fe53c05
const colorPallette = ['rgb(104, 169, 77)', 'rgb(102, 75, 154)', 'rgb(41, 171, 226)', 'rgb(224, 133, 35)',
'rgb(214, 207, 126)', 'rgb(239, 65, 35)', 'rgb(255, 255, 255)'];
const edgeColors = {};
var graph_element = document.getElementById('3d-graph');
class Graph {
constructor(dataUrl) {
this.graph = null;
this.highlightNodes = new Set();
this.highlightLinks = new Set();
this.hoverNode = null;
this.edgeColors = {};
this.firstTick = true;
this.infooverlay = null;
this.loadGraph(dataUrl);
}
async loadGraph(dataUrl) {
......@@ -43,13 +42,28 @@ class Graph {
.height(getHeight());
}
initializeModel() {
if (this.firstTick) {
this.mapEdgeColors();
this.updateLinks();
this.addBackground();
// Catch resize events
getCanvasDivNode().addEventListener("fullscreenchange", this.resize());
window.onresize = G.resize();
loadComponents();
this.firstTick = false;
}
}
getNodeColor(node) {
return this.highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)';
}
getLinkColor(link) {
if ('type' in link) {
return edgeColors[link.type]
return this.edgeColors[link.type]
}
return 'rgb(255, 255, 255)'
}
......@@ -58,6 +72,12 @@ class Graph {
return this.highlightLinks.has(link) ? 2 : 0.8;
}
getLinkClasses() {
const linkClasses = [];
this.graph.graphData().links.forEach(link => linkClasses.push(link.type));
return [... new Set(linkClasses)];
}
onNodeHover(node) {
// no state change
if ((!node && !this.highlightNodes.size) || (node && this.hoverNode === node)) return;
......@@ -86,17 +106,26 @@ class Graph {
this.updateHighlight();
}
getLinkClasses() {
const linkClasses = [];
this.graph.graphData().links.forEach(link => linkClasses.push(link.type));
return [... new Set(linkClasses)];
focusOnNode(node) {
// Aim at node from outside it
const distance = 250;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
this.graph.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
1000 // ms transition duration
);
}
mapEdgeColors() {
const linkClasses = this.getLinkClasses()
for (let i = 0; i < linkClasses.length; i++) {
edgeColors[linkClasses[i]] = colorPallette[i % colorPallette.length]
}
focusOnNodeId(id) {
const gData = this.graph.graphData();
gData.nodes.forEach(node => {
if (node.id === id) {
this.onNodeClick(node);
}
})
}
updateLinks() {
......@@ -126,6 +155,16 @@ class Graph {
.linkDirectionalParticles(this.graph.linkDirectionalParticles());
}
resize() {
if(document.fullscreenElement == getCanvasDivNode()) {
this.graph.height(screen.height);
this.graph.width(screen.width);
} else {
this.graph.height(window.innerHeight - 200);
this.graph.width(getWidth());
}
}
addBackground() {
const sphereGeometry = new THREE.SphereGeometry(20000, 32, 32);
//const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
......@@ -139,42 +178,18 @@ class Graph {
this.graph.scene().add(mesh);
}
focusOnNode(node) {
// Aim at node from outside it
const distance = 250;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
this.graph.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
1000 // ms transition duration
);
}
focusOnNodeId(id) {
const gData = this.graph.graphData();
gData.nodes.forEach(node => {
if (node.id === id) {
this.onNodeClick(node);
}
})
mapEdgeColors() {
const linkClasses = this.getLinkClasses()
for (let i = 0; i < linkClasses.length; i++) {
this.edgeColors[linkClasses[i]] = COLOR_PALETTE[i % COLOR_PALETTE.length]
}
}
resizeGraph() {
resize() {
this.graph.width(getWidth());
this.graph.height(getHeight());
}
initializeModel() {
if (this.firstTick) {
this.mapEdgeColors();
this.updateLinks();
this.addBackground();
loadComponents();
this.firstTick = false;
}
}
drawNode(node) {
// Draw node as label + image
......@@ -225,57 +240,27 @@ class Graph {
const dataUrl = plugin_path + 'datasets/aud1.json'
G = new Graph(dataUrl);
linkoverlay = new LinkOverlay(G);
infooverlay = new InfoOverlay();
infooverlay = new InfoOverlay(G);
G.infooverlay = infooverlay;
function loadComponents() {
linkoverlay.create();
infooverlay.create();
add_fullscreen_mode_button();
add_fullscreen_Listener();
window.onresize = G.resizeGraph();
createFullScreenButton();
}
function getWidth() {
return document.getElementById('3d-graph').offsetWidth;
}
function getHeight() {
return window.innerHeight - 200
}
function getCanvasDivNode() {
const domNode = document.getElementById('3d-graph');
return domNode.firstChild.firstChild.firstChild;
}
function add_fullscreen_mode_button() {
function createFullScreenButton() {
const sceneNode = document.getElementById('3d-graph');
const overlayNode = document.createElement('button');
overlayNode.className = 'fullscreen_button';
overlayNode.innerText = 'fullscreen';
overlayNode.addEventListener("click", fullscreen_mode);
overlayNode.addEventListener("click", function () {
if(getCanvasDivNode().requestFullscreen) {
getCanvasDivNode().requestFullscreen().catch();
}
});
sceneNode.appendChild(overlayNode);
}
function fullscreen_mode(){
if(getCanvasDivNode().requestFullscreen) {
getCanvasDivNode().requestFullscreen().catch();
}
}
function resize_canvas() {
if(document.fullscreenElement == getCanvasDivNode()) {
G.graph.height(screen.height);
G.graph.width(screen.width);
} else {
G.graph.height(window.innerHeight - 200);
G.graph.width(getWidth());
}
}
function add_fullscreen_Listener() {
getCanvasDivNode().addEventListener("fullscreenchange", resize_canvas);
}
display/helpers.js 0 → 100644
+ 15
− 0
View file @ 2fe53c05
function getWidth() {
return document.getElementById('3d-graph').offsetWidth;
}
function getHeight() {
return window.innerHeight - 200
}
function getCanvasDivNode() {
const domNode = document.getElementById('3d-graph');
return domNode.firstChild.firstChild.firstChild;
}
\ No newline at end of file
display/infooverlay.js
+ 4
− 6
View file @ 2fe53c05
class InfoOverlay {
constructor() {
constructor(graph) {
this.graph = graph;
}
create() {
......@@ -63,7 +61,7 @@ class InfoOverlay {
tablink.className = 'tablinks';
tablink.id = linkType + "_id";
tablink.innerHTML = linkType[0] + linkType[1] + linkType[2];
tablink.style = "background-color: " + edgeColors[linkClasses[i]];
tablink.style = "background-color: " + this.graph.edgeColors[linkClasses[i]];
tablink.setAttribute("onclick", "openTab(event, " + linkType + "_id)"); //unusual function call
links.appendChild(tablink);
......@@ -77,7 +75,7 @@ class InfoOverlay {
const tabcontent = document.createElement('div');
tabcontent.className = "tabcontent";
tabcontent.id = linkType + "_id_content";
tabcontent.style = "background-color: " + edgeColors[linkClasses[i]];
tabcontent.style = "background-color: " + this.graph.edgeColors[linkClasses[i]];
link_container.appendChild(tabcontent);
}
......
display/linkoverlay.js
+ 1
− 1
View file @ 2fe53c05
......@@ -23,7 +23,7 @@ class LinkOverlay {
const colorStrip = document.createElement('div');
colorStrip.className = 'rel-container';
colorStrip.style = "background-color: " + edgeColors[linkClasses[i]] + "; width: " + 10 * chars + "px;";
colorStrip.style = "background-color: " + this.graph.edgeColors[linkClasses[i]] + "; width: " + 10 * chars + "px;";
relation.appendChild(colorStrip);
}
}
......
knowledge-space.php
+ 12
− 5
View file @ 2fe53c05
......@@ -10,7 +10,7 @@ Author: Matthias Konitzny
function ks_add_graph(): string
{
$graph = '<script src="//unpkg.com/3d-force-graph"></script>';
$three = '<script src="//unpkg.com/three"></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>';
$div = '<div id="3d-graph"></div>';
......@@ -19,16 +19,23 @@ function ks_add_graph(): string
$variables = "<script>
var plugin_path = '$plugin_dir';
</script>";
$script_path1 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'infooverlay.js';
$script_path2 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'linkoverlay.js';
$script_path3 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'graph.js';
// Yeah this is pretty ugly - need packaging asap.
$script_path0 = $plugin_dir.'config.js';
$script_path1 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'helpers.js';
$script_path2 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'infooverlay.js';
$script_path3 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'linkoverlay.js';
$script_path4 = $plugin_dir.'display'.DIRECTORY_SEPARATOR.'graph.js';
$script0 = "<script src='$script_path0'></script>";
$script1 = "<script src='$script_path1'></script>";
$script2 = "<script src='$script_path2'></script>";
$script3 = "<script src='$script_path3'></script>";
$script4 = "<script src='$script_path4'></script>";
return $three . $renderer .$renderer2 . $graph . $div . $variables . $script1 . $script2 .$script3;
return $three . $renderer .$renderer2 . $graph . $div . $variables . $script0 . $script1 . $script2 .$script3 .$script4;
}
function ks_add_editor(): string
......
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