diff --git a/index.html b/index.html index 443cac1..5e993bb 100644 --- a/index.html +++ b/index.html @@ -2083,21 +2083,43 @@ function stableGraph(){ // run on entire wiki though whereas previous D3 instance limited to 10 pages and their targets } +let edges_to_display = [] function displayLeafs(graph, graphEl, rootId, rootEl, depth=3){ console.log( graph[rootId].Id ) if (depth<1) return 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) ) - //nodes.push(x) + x.setAttribute('update-links-on-pinchended', true) console.log("linking:", rootEl, x) - setTimeout( _ => { addEdgeBetweenNodesFromGraph(graphEl, rootEl, x) }, 2000) // otherwise null positions - // might need to delay that differently - //edges.push({source:root, target:x}) + edges_to_display.push({graphel:graphEl, source:rootEl, target:x}) displayLeafs( graph, graphEl, graph[l].Id, x, --depth) }) } +AFRAME.registerComponent('update-links-on-pinchended', { + init: function(){ + let rootEl = document.querySelector("#graphroot") + let el = this.el + this.el.addEventListener('released', function (event) { + 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 + let newpos = el.getAttribute("position") + let [src,tgt] = i.replace("line__","").split("__to__"); + srcpos = AFRAME.utils.coordinates.stringify( rootEl.getAttribute(i).start ) + tgtpos = AFRAME.utils.coordinates.stringify( rootEl.getAttribute(i).end ) + if (src==el.id){ + rootEl.setAttribute(i, { start: newpos, end: tgtpos }) + } else { + rootEl.setAttribute(i, { start: srcpos, end: newpos }) + } + // somehow works once... + }) + }) + } +}) + 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 @@ -2107,13 +2129,17 @@ function displayGraph(mynodes){ 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) ) + rootEl.setAttribute('update-links-on-pinchended', true) 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 /*