unfolding graph node via left pinch

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,21 +2157,6 @@ 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
 }
 
@@ -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