From: Joris van Zundert <joris.van.zundert@gmail.com>
Date: Thu, 18 Jul 2013 00:36:39 +0000 (-0500)
Subject: Merging functionality added, rough round the corners.
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=9231663d9374150913265b0d4d4a2446cf17bbe1;p=scpubgit%2Fstemmaweb.git

Merging functionality added, rough round the corners.
---

diff --git a/root/js/detach_helpers.js b/root/js/detach_helpers.js
index 69d9202..640020e 100644
--- a/root/js/detach_helpers.js
+++ b/root/js/detach_helpers.js
@@ -23,6 +23,8 @@ function Edge( g_elem ) {
     this.g_elem = g_elem;
     this.witnesses = g_elem.children('text').text().split( /,\s*/ );
     this.is_incoming = false;
+    this.start_node_id = g_elem.children('title').text().split('-')[0];
+    this.end_node_id = g_elem.children('title').text().split('>')[1];
     
     this.detach_witnesses = function( witnesses_to_detach ) {
         var detached = [];
@@ -73,9 +75,75 @@ function Edge( g_elem ) {
         return clone;
     }
     
-    this.attach = function( node_id_maybe ) {
-        //update title
-        return null;
+    this.attach_witnesses = function( witnesses ) {
+        self.witnesses.concat( witnesses );
+        self.g_elem.children( 'text' ).text( self.create_label( self.witnesses ) );
+        var edge_weight = 0.8 + ( 0.2 * self.witnesses.length );
+        self.g_elem.children( 'path' ).attr( 'stroke-width', edge_weight );
+        
+    }
+    
+    this.attach_endpoint = function( target_node_id ) {
+        // first let's find out if the startpoint might also be linked to the target already
+        // in that case we need to remove this edge and transfer the witnesses to the 
+        // appropriate edge of the target_node
+        $.each( edges_of( get_ellipse( target_node_id ) ), function( index, target_edge ) {
+            if( (self != null) && (self.start_node_id == target_edge.start_node_id) ) {
+                target_edge.attach_witnesses( self.witnesses );
+                self.g_elem.remove();
+                self = null;
+            }
+        } );
+        // if not let's really move the end pointer towards the target node
+        if( self != null ) {
+            var polygon = self.g_elem.children( 'polygon' ); 
+            if( polygon.size() > 0 ) {
+                var end_point_arrowhead = new svgshape( polygon );
+                var path_segments = self.g_elem.children('path')[0].pathSegList;
+                var edge_path = new svgpath( path_segments.getItem(path_segments.numberOfItems - 1), self.g_elem.children('path') );
+                var target_ellipse = get_ellipse( target_node_id );
+                var target_cx = target_ellipse.attr( 'cx' );
+                var target_cy = target_ellipse.attr( 'cy' );
+                var target_rx = target_ellipse.attr( 'rx' );
+                var source_ellipse = get_ellipse( self.end_node_id );
+                var source_cx = source_ellipse.attr( 'cx' );
+                var source_cy = source_ellipse.attr( 'cy' );
+                var source_rx = source_ellipse.attr( 'rx' );
+                var dx = (target_cx - target_rx) - (source_cx - source_rx);
+                var dy = (target_cy - source_cy);
+                end_point_arrowhead.reposition( dx, dy );
+                edge_path.reposition( dx, dy );
+            }
+        }
+    }
+
+    this.attach_startpoint = function( target_node_id ) {
+        // first let's find out if the endpoint might also be linked to the target already
+        // in that case we need to remove this edge and transfer the witnesses to the 
+        // appropriate edge of the target_node
+        $.each( edges_of( get_ellipse( target_node_id ) ), function( index, target_edge ) {
+            if( (self != null) && (self.end_node_id == target_edge.end_node_id) ) {
+                target_edge.attach_witnesses( self.witnesses );
+                self.g_elem.remove();
+                self = null;
+            }
+        } );
+        // if not let's really move the end pointer towards the target node
+        if( self != null ) {
+            var path_segments = self.g_elem.children('path')[0].pathSegList;                
+            var edge_path = new svgpath( path_segments.getItem(0), self.g_elem.children('path') );
+            var target_ellipse = get_ellipse( target_node_id );
+            var target_cx = target_ellipse.attr( 'cx' );
+            var target_cy = target_ellipse.attr( 'cy' );
+            var target_rx = target_ellipse.attr( 'rx' );
+            var source_ellipse = get_ellipse( self.start_node_id );
+            var source_cx = source_ellipse.attr( 'cx' );
+            var source_cy = source_ellipse.attr( 'cy' );
+            var source_rx = source_ellipse.attr( 'rx' );
+            var dx = (target_cx + target_rx) - (source_cx + source_rx);
+            var dy = (target_cy - source_cy);
+            edge_path.reposition( dx, dy );
+        }
     }
     
 }
diff --git a/root/js/relationship.js b/root/js/relationship.js
index 36e980a..a056ee7 100644
--- a/root/js/relationship.js
+++ b/root/js/relationship.js
@@ -226,9 +226,8 @@ function svgEnlargementLoaded() {
         $.getJSON( rdgpath, function( data ) {
             readingdata = data;
             $('#svgenlargement ellipse').each( function( i, el ) { color_inactive( el ) });
-            // detach_node(null);
+            $('#loading_overlay').hide(); 
         });
-        $('#loading_overlay').hide(); 
     });
     
     //initialize marquee
@@ -656,8 +655,7 @@ function draw_relation( source_id, target_id, relation_color ) {
     var sy = parseInt( source_ellipse.attr('cy') );
     var ex = parseInt( target_ellipse.attr('cx') );
     var ey = parseInt( target_ellipse.attr('cy') );
-    var relation = svg.group( $("#svgenlargement svg g"), 
-    	{ 'class':'relation', 'id':relation_id } );
+    var relation = svg.group( $("#svgenlargement svg g"), { 'class':'relation', 'id':relation_id } );
     svg.title( relation, source_id + '->' + target_id );
     svg.path( relation, path.move( sx, sy ).curveC( sx + (2*rx), sy, ex + (2*rx), ey, ex, ey ), {fill: 'none', stroke: relation_color, strokeWidth: 4});
     var relation_element = $('#svgenlargement .relation').filter( ':last' );
@@ -769,11 +767,54 @@ function detach_node( readings ) {
         ellipse_elem.data( 'node_obj', new_node );
 
         // Move the node somewhat up for 'dramatic effect' :-p
-        new_node.reposition( 0, -54 );        
+        new_node.reposition( 0, -70 );        
         
     } );
     
+}
 
+function merge_nodes( source_node_id, target_node_id, consequences ) {
+    if( consequences.status != null && consequences.status == 'ok' ) {
+        merge_node( source_node_id, target_node_id );
+        if( consequences.checkalign != null ) {
+            $.each( consequences.checkalign, function( index, node_ids ) {
+                temp_relation = draw_relation( node_ids[0], node_ids[1], "#89a02c" );
+                var sy = parseInt( temp_relation.children('path').attr('d').split('C')[0].split(',')[1] );
+                var ey = parseInt( temp_relation.children('path').attr('d').split(' ')[2].split(',')[1] );
+                var yC = ey + (( sy - ey )/2); 
+                // TODO: compute xC to be always the same distance to the amplitude of the curve
+                var xC = parseInt( temp_relation.children('path').attr('d').split(' ')[1].split(',')[0] );
+                var svg = $('#svgenlargement').children('svg').svg('get');
+                parent_g = svg.group( $('#svgenlargement svg g') );
+                var ids_text = node_ids[0] + '-' + node_ids[1]; 
+                var merge_id = 'merge-' + ids_text;
+                svg.image( parent_g, xC, (yC-8), 16, 16, '/images/tick_circle_frame.png', { id: merge_id } );
+                svg.image( parent_g, (xC+20), (yC-8), 16, 16, '/images/no_entry.png', { id: 'no' + merge_id } );
+                $( '#' + merge_id ).hover( function(){ $(this).addClass( 'draggable' ) }, function(){ $(this).removeClass( 'draggable' ) } );
+                $( '#no' + merge_id ).hover( function(){ $(this).addClass( 'draggable' ) }, function(){ $(this).removeClass( 'draggable' ) } );
+                $( '#' + merge_id ).click( function( evt ){ 
+                    merge_node( node_ids[0], node_ids[1] );
+                    temp_relation.remove();
+                    $( '#' + merge_id ).parent().remove();
+                } );
+                $( '#no' + merge_id ).click( function( evt ) {
+                    temp_relation.remove();
+                    $( '#' + merge_id ).parent().remove();
+                } );
+            } );
+        }
+    }
+}
+
+function merge_node( source_node_id, target_node_id ) {
+    $.each( edges_of( get_ellipse( source_node_id ) ), function( index, edge ) {
+        if( edge.is_incoming == true ) {
+            edge.attach_endpoint( target_node_id );
+        } else {
+            edge.attach_startpoint( target_node_id );
+        }
+    } );
+    $( jq( source_node_id ) ).remove();    
 }
 
 function Marquee() {
@@ -982,31 +1023,32 @@ $(document).ready(function () {
   // merge dialog where appropriate.
 			  
   if( editable ) {
-	$( "#dialog-form" ).dialog({
+	$( '#dialog-form' ).dialog( {
 	autoOpen: false,
 	height: 270,
 	width: 290,
 	modal: true,
 	buttons: {
-	  "Merge readings": function( evt ) {
-		  $(evt.target).button("disable");
-		  $('#status').empty();
-		  form_values = $('#collapse_node_form').serialize();
+	  'Merge readings': function( evt ) {
+		  $( evt.target ).button( 'disable' );
+		  $( '#status' ).empty();
+		  form_values = $( '#collapse_node_form' ).serialize();
 		  ncpath = getTextURL( 'merge' );
-		  var jqjson = $.post( ncpath, form_values, function(data) {
-			  alert( "Did a node merge" );
-		  });
+		  var jqjson = $.post( ncpath, form_values, function( data ) {
+			  merge_nodes( $( '#source_node_id' ).val(), $( '#target_node_id' ).val(), data );
+              $( '#dialog-form' ).dialog( 'close' );
+		  } );
 	  },
 	  OK: function( evt ) {
-		$(evt.target).button("disable");
-		$('#status').empty();
-		form_values = $('#collapse_node_form').serialize();
+		$( evt.target ).button( 'disable' );
+		$( '#status' ).empty();
+		form_values = $( '#collapse_node_form' ).serialize();
 		ncpath = getTextURL( 'relationships' );
-		var jqjson = $.post( ncpath, form_values, function(data) {
-			$.each( data, function(item, source_target) { 
+		var jqjson = $.post( ncpath, form_values, function( data ) {
+			$.each( data, function( item, source_target ) { 
 				var source_found = get_ellipse( source_target[0] );
 				var target_found = get_ellipse( source_target[1] );
-				var relation_found = $.inArray( source_target[2], $('#keymap').data('relations') );
+				var relation_found = $.inArray( source_target[2], $( '#keymap' ).data( 'relations' ) );
 				if( source_found.size() && target_found.size() && relation_found > -1 ) {
 					var relation = relation_manager.create( source_target[0], source_target[1], relation_found );
 					relation.data( 'type', source_target[2]  );
@@ -1014,13 +1056,13 @@ $(document).ready(function () {
 					relation.data( 'note', $('#note').val()  );
 					relation_manager.toggle_active( relation.attr('id') );
 				}
-				$(evt.target).button("enable");
+				$(evt.target).button( 'enable' );
 		   });
-			$( "#dialog-form" ).dialog( "close" );
+			$( '#dialog-form' ).dialog( 'close' );
 		}, 'json' );
 	  },
 	  Cancel: function() {
-		  $( this ).dialog( "close" );
+		  $( this ).dialog( 'close' );
 	  }
 	},
 	create: function(event, ui) {