From c5d5db267e756ced9c7b384ff3eb5744b6401e57 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Mon, 25 Feb 2019 12:18:45 +0100
Subject: [PATCH] Drag+drop in Panopticon

---
 www/js/hugvey_console.js | 51 ++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/www/js/hugvey_console.js b/www/js/hugvey_console.js
index 266dd21..aaaa5a8 100644
--- a/www/js/hugvey_console.js
+++ b/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);
 
@@ -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;
     }
 }