Drag+drop in Panopticon

www/js/hugvey_console.js

@@ -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);
 
@@ -1055,12 +1056,12 @@ class Graph {
             .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 ) )
@@ -1084,6 +1085,7 @@ class Graph {
         node.exit().remove();
         node = node.merge( newNodeG );
         
+
         // for all existing nodes:
         node.attr( 'class', msg => {
             let classes = [];
@@ -1097,6 +1099,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" )
             .data( this.directions )
@@ -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();
+            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 {
 				}
 			}
 		}
+		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;
     }
 }