r/hugvey
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Drag+drop in Panopticon

Browse source
This commit is contained in:
Ruben van de Ven 2019-02-25 12:18:45 +01:00
parent b4167574df
commit c5d5db267e
1 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
www/js/hugvey_console.js
View file

@ -332,7 +332,7 @@ class Graph {
}
}
}, 'delete'),
crel( 'h1', { 'class': 'msg__id' }, msg['@id'] ),
crel( 'h1', { 'class': 'msg__id' }, msg['@id'] + ` (${panopticon.graph.distances[msg['@id']]})` ),
crel( 'label',
crel( 'span', 'Text' ),
crel( 'input', {
@ -916,7 +916,8 @@ class Graph {
this.data = [...this.messages, ...this.conditions,
...this.directions, ...this.diversions]
let d = [];
let toRemove = ['sourceX', 'sourceY', 'targetX', 'targetY', 'x', 'y', 'vx', 'vy']
// let toRemove = ['sourceX', 'sourceY', 'targetX', 'targetY', 'x', 'y', 'vx', 'vy']
let toRemove = ['sourceX', 'sourceY', 'targetX', 'targetY', 'vx', 'vy']
for ( let node of this.data ) {
let n = {};
console.log( node['source'] );
@ -1045,7 +1046,7 @@ class Graph {
console.log('fx', m['@id'], panopticon.graph.distances[m['@id']], fx);
return fx;
}).strength(50))
.force( "forceY", d3.forceY(m => panopticon.graph.distances[m['@id']] !== null ? 0 : panopticon.graph.nodeSize * 3 ).strength(30))
// .force( "forceY", d3.forceY(m => panopticon.graph.distances[m['@id']] !== null ? 0 : panopticon.graph.nodeSize * 3 ).strength(30))
;
this.simulation.velocityDecay(.99);
@ -1054,13 +1055,13 @@ class Graph {
.selectAll( "g" )
.data( this.messages, n => n['@id'] )
;
// Update existing nodes
let newNode = node.enter();
let newNodeG = newNode.append( "g" )
.attr( 'id', d => d['@id'] )
// .call( d3.drag( this.simulation ) )
.on( 'click', function( d ) {
this.clickMsg( d );
}.bind( this ) )
@ -1083,6 +1084,7 @@ class Graph {
// remove
node.exit().remove();
node = node.merge( newNodeG );
// for all existing nodes:
node.attr( 'class', msg => {
@ -1096,6 +1098,27 @@ class Graph {
return classes.join( ' ' );
} )
.on(".drag", null)
.call(
d3.drag( this.simulation )
.on("start", function(d){
if (!d3.event.active) panopticon.graph.simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
})
.on('drag', function(d){
d.fx = d3.event.x;
d.fy = d3.event.y;
})
.on("end", function(d){
if (!d3.event.active) panopticon.graph.simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
})
// .container(document.getElementById('container'))
);
let link = this.linkG
.selectAll( "line" )
@ -1184,10 +1207,8 @@ class Graph {
// this.simulation.alpha(1);
// this.simulation.restart();
if ( typeof isInit != 'undefined' && isInit ) {
for ( let i = 0, n = Math.ceil( Math.log( this.simulation.alphaMin() ) / Math.log( 1 - this.simulation.alphaDecay() ) ); i < n; ++i ) {
// this.simulation.tick();
}
for ( let i = 0, n = Math.ceil( Math.log( this.simulation.alphaMin() ) / Math.log( 1 - this.simulation.alphaDecay() ) ); i < n; ++i ) {
this.simulation.tick();
}
return this.svg.node();
}
@ -1198,12 +1219,12 @@ class Graph {
console.error("No start set");
return;
}
let startMsg = starts[0];
//initiate distances
let distances = {};
for(let msg of this.messages) {
distances[msg['@id']] = msg === startMsg ? 0 : null;
// distances[msg['@id']] = msg === startMsg ? 0 : null;
distances[msg['@id']] = null;
}
let targetsPerMsg = {};
@ -1247,7 +1268,12 @@ class Graph {
}
}
}
traverseMsg(startMsg['@id'], 1 , true);
for(let startMsg of starts) {
if(distances[startMsg['@id']] === null) {
distances[startMsg['@id']] = 0;
}
traverseMsg(startMsg['@id'], 1 , true);
}
// now we have the formal tree, lets try to polish the rest:
for(let msgId in distances) {
@ -1270,7 +1296,6 @@ class Graph {
// traverseMsg(msgId, additionalsDepth+1, true);
//
// }
return distances;
}
}