From e7abb17c124be5108c219e05b6b6a9408ccb37f4 Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Mon, 16 Jan 2023 17:10:07 +0100 Subject: [PATCH] unfolding graph node via left pinch --- index.html | 51 +++++++++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 7531f9f..f380175 100644 --- a/index.html +++ b/index.html @@ -948,6 +948,7 @@ AFRAME.registerComponent('pinchsecondary', { selectedElements.push({element:selectedElement, timestamp:Date.now(), primary:false}) // if close enough to a target among a list of potential targets, unselect previous target then select new if (selectedElement) interpretJXR( selectedElement.getAttribute("value") ) + if (selectedElement) selectedElement.emit('lreleased') selectedElement = null if (setupMode) setupBBox["B"] = event.detail.position if ( setupBBox["A"] && setupBBox["B"] ) { @@ -2090,23 +2091,38 @@ function displayLeafs(graph, graphEl, rootId, rootEl, depth=3){ graph[rootId].Targets.map( l => { console.log( "-", graph[l].Id ) let x = addNodeFromGraph(graph[l].Id, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) ) + // layout could be done with Cytoscape but somehow seems I can't use it properly, in headless mode or not. x.setAttribute('update-links-on-pinchended', true) + x.setAttribute('toggle-links-on-left-pinchended', true) console.log("linking:", rootEl, x) edges_to_display.push({graphel:graphEl, source:rootEl, target:x}) displayLeafs( graph, graphEl, graph[l].Id, x, --depth) }) } +AFRAME.registerComponent('toggle-links-on-left-pinchended', { + init: function(){ + let graphEl = document.querySelector("#graphroot") + let el = this.el + this.el.addEventListener('lreleased', function (event) { + // if it has children (...how knowing that we are not using the hierarchy?) + // delete them, including links (should be recursive too) + // if not, displayLeafs( mynodes, graphEl, root.Id, rootEl, 1) + // assumes not for now + displayLeafs( wikiStructure, graphEl, el.getAttribute("value"), el, 1) + setTimeout( _ => { edges_to_display.map( i => addEdgeBetweenNodesFromGraph( i.graphel, i.source, i.target ))}, 2000 ) + }) + } +}) + AFRAME.registerComponent('update-links-on-pinchended', { init: function(){ let rootEl = document.querySelector("#graphroot") let el = this.el this.el.addEventListener('released', function (event) { - let found_links = 0 Object.keys( rootEl.components ) // get all links .filter( i => i.indexOf(el.id) > -1 ) // keeps links related to the moved node .map( i => { // for each link - found_links++ let newpos = AFRAME.utils.coordinates.stringify( el.getAttribute("position") ) let [src,tgt] = i.replace("line__","").split("__to__"); srcpos = AFRAME.utils.coordinates.stringify( rootEl.getAttribute(i).start ) @@ -2121,19 +2137,19 @@ AFRAME.registerComponent('update-links-on-pinchended', { } }) +let nodes = [] +let edges = [] +let wikiStructure = null + fetch('https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph.json').then( r => r.json() ).then( r => displayGraph(r.Nodes) ); function displayGraph(mynodes){ - // add few nodes with few edges for testing - // then loading from wiki JSON file - // layout could be done with Cytoscape but somehow seems I can't use it properly, in headless mode or not. + wikiStructure = mynodes let startingNode = "Wiki.VirtualRealityInterface" let root = mynodes[startingNode] let graphEl = document.createElement("a-entity") graphEl.id = "graphroot" AFRAME.scenes[0].appendChild( graphEl ) - let nodes = [] - let edges = [] let node_names = Object.keys( mynodes ) let rootEl = addNodeFromGraph(root.Id, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) ) @@ -2141,22 +2157,7 @@ function displayGraph(mynodes){ displayLeafs( mynodes, graphEl, root.Id, rootEl, 2) setTimeout( _ => { edges_to_display.map( i => addEdgeBetweenNodesFromGraph( i.graphel, i.source, i.target ))}, 2000 ) // quite unreliable - - // random graph, no preferential attachement - /* - for (var i=0;i<10;i++){ - let random_name = node_names[Math.floor(Math.random()*node_names.length)] - let x = addNodeFromGraph(random_name, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) ) - nodes.push(x) - } - for (var i=0;i<10;i++){ - let a = nodes[Math.floor(Math.random()*nodes.length)] - let b = nodes[Math.floor(Math.random()*nodes.length)] - setTimeout( _ => { addEdgeBetweenNodesFromGraph(graphEl, a,b) }, 100) // otherwise null positions - edges.push({source:a, target:b}) - } - */ - // should listen to an event instead to insure that nodes are all created before + // should listen to an event instead to insure that nodes are all created before } function addNodeFromGraph(name, position="0 0 0"){ @@ -2166,7 +2167,9 @@ function addNodeFromGraph(name, position="0 0 0"){ let el = addNewNote(name, position, ".1 .1 .1", "node_" +Date.now(), "node_from_graph") let sphereEl = document.createElement("a-sphere") sphereEl.setAttribute("radius", .1) - sphereEl.setAttribute("opacity", .2) + sphereEl.setAttribute("segments-height", 4) + sphereEl.setAttribute("segments-width", 4) + sphereEl.setAttribute("wireframe", true) sphereEl.setAttribute("position", "0 -.1 0") el.appendChild(sphereEl) // position shouldn't have to be offset