From: Tara L Andrews <tla\@mit.edu>
Date: Thu, 3 May 2012 13:54:10 +0000 (+0200)
Subject: integrate updates from shared lemmatizer repo
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=76f05423e4d36c01a24381f4b1ec91b4a762bfbe;p=scpubgit%2Fstemmaweb.git

integrate updates from shared lemmatizer repo
---

diff --git a/root/css/relationship.css b/root/css/relationship.css
index 9b778b6..2091ccb 100644
--- a/root/css/relationship.css
+++ b/root/css/relationship.css
@@ -200,3 +200,16 @@ span.apimore {
     list-style: none;
     margin-bottom: 3px;
 }
+
+.draggable {
+	cursor:pointer;
+}
+
+.noselect {
+-webkit-touch-callout: none;
+-webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
diff --git a/root/js/relationship.js b/root/js/relationship.js
index bd78e31..adc23bf 100644
--- a/root/js/relationship.js
+++ b/root/js/relationship.js
@@ -1,5 +1,11 @@
+var MARGIN=30;
+var svg_root = null;
+var svg_root_element = null;
+var start_element_height = 0;
+var reltypes = {};
+
 function getTextPath() {
-    var currpath = window.location.pathname
+    var currpath = window.location.pathname;
     // Get rid of trailing slash
     if( currpath.lastIndexOf('/') == currpath.length - 1 ) { 
     	currpath = currpath.slice( 0, currpath.length - 1) 
@@ -37,11 +43,55 @@ function svgEnlargementLoaded() {
 		{ 'top': lo_height / 2 - $("#loading_message").height() / 2,
 		  'left': lo_width / 2 - $("#loading_message").width() / 2 });
     //Set viewbox widht and height to widht and height of $('#svgenlargement svg').
+    $('#update_workspace_button').data('locked', false);
+    $('#update_workspace_button').css('background-position', '0px 44px');
     //This is essential to make sure zooming and panning works properly.
     $('#svgenlargement ellipse').attr( {stroke:'green', fill:'#b3f36d'} );
     var graph_svg = $('#svgenlargement svg');
     var svg_g = $('#svgenlargement svg g')[0];
+    if (!svg_g) return;
     svg_root = graph_svg.svg().svg('get').root();
+
+    // Find the real root and ignore any text nodes
+    for (i = 0; i < svg_root.childNodes.length; ++i) {
+        if (svg_root.childNodes[i].nodeName != '#text') {
+		svg_root_element = svg_root.childNodes[i];
+		break;
+	   }
+    }
+
+    // This might be a little application specific and should be pushed to the backend
+    // but... This collapes corrector hands when they agree with the original
+    // e.g., P46-*,P46-C becomes simply P46
+    $(svg_root).find('text').each(function () {
+		var t = $(this).text();
+		var ws = t.split(',');
+		for (i = 0; i < ws.length; ++i) {
+			if (ws[i].indexOf('-*')> -1) {
+				var collapse = false;
+				var main = $.trim(ws[i].substring(0,ws[i].indexOf('-')));
+				for (j = 0; j < ws.length; ++j) {
+					if (i != j && ws[j].indexOf('-')> -1) {
+						var pair = $.trim(ws[j].substring(0,ws[j].indexOf('-')));
+						if (main == pair) {
+							collapse = true;
+							ws[j] = '';
+						}
+					}
+				}
+				if (collapse) ws[i] = main;
+			}
+		}
+		t = '';
+		for (i = 0; i < ws.length; ++i) {
+			if (ws[i].length) {
+				if (t.length>0) t+=', ';
+				t+=ws[i];
+			}
+		}
+		$(this).text(t);
+	});
+
     svg_root.viewBox.baseVal.width = graph_svg.attr( 'width' );
     svg_root.viewBox.baseVal.height = graph_svg.attr( 'height' );
     //Now set scale and translate so svg height is about 150px and vertically centered in viewbox.
@@ -384,7 +434,7 @@ function relation_factory() {
         var p = svg_root.createSVGPoint();
         p.x = xs + ((xe-xs)*1.1);
         p.y = ye - ((ye-ys)/2);
-        var ctm = svg_root.children[0].getScreenCTM();
+        var ctm = svg_root_element.getScreenCTM();
         var nx = p.matrixTransform(ctm).x;
         var ny = p.matrixTransform(ctm).y;
         var dialog_aria = $ ("div[aria-labelledby='ui-dialog-title-delete-form']");
@@ -428,11 +478,13 @@ $(document).ready(function () {
         .data('x', event.clientX)
         .data('y', event.clientY)
         .data('scrollLeft', this.scrollLeft)
-        stateTf = svg_root.children[0].getCTM().inverse();
+        stateTf = svg_root_element.getCTM().inverse();
         var p = svg_root.createSVGPoint();
         p.x = event.clientX;
         p.y = event.clientY;
         stateOrigin = p.matrixTransform(stateTf);
+        event.returnValue = false;
+        event.preventDefault();
         return false;
   }).mouseup(function (event) {
         $(this).data('down', false);
@@ -445,22 +497,28 @@ $(document).ready(function () {
         p = p.matrixTransform(stateTf);
         var matrix = stateTf.inverse().translate(p.x - stateOrigin.x, p.y - stateOrigin.y);
         var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
-        svg_root.children[0].setAttribute("transform", s);
+        svg_root_element.setAttribute("transform", s);
     }
+    event.returnValue = false;
+    event.preventDefault();
   }).mousewheel(function (event, delta) {
     event.returnValue = false;
     event.preventDefault();
     if ( $('#update_workspace_button').data('locked') == false ) {
+        if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
+        if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
         if( delta < -9 ) { delta = -9 }; 
         var z = 1 + delta/10;
-        var g = svg_root.children[0];
-        if( (z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>1 && (g.getScreenCTM().a * start_element_height) < 100) ) {
+        z = delta > 0 ? 1 : -1;
+        var g = svg_root_element;
+        if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 100))) {
             var root = svg_root;
             var p = root.createSVGPoint();
-            p.x = event.clientX;
-            p.y = event.clientY;
+            p.x = event.originalEvent.clientX;
+            p.y = event.originalEvent.clientY;
             p = p.matrixTransform(g.getCTM().inverse());
-            var k = root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y);
+            var scaleLevel = 1+(z/20);
+            var k = root.createSVGMatrix().translate(p.x, p.y).scale(scaleLevel).translate(-p.x, -p.y);
             var matrix = g.getCTM().multiply(k);
             var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
             g.setAttribute("transform", s);
@@ -480,7 +538,7 @@ $(document).ready(function () {
     buttons: {
       "Ok": function() {
         $('#status').empty();
-        form_values = $('#collapse_node_form').serialize()
+        form_values = $('#collapse_node_form').serialize();
         ncpath = getRelationshipURL();
         $(':button :contains("Ok")').attr("disabled", true);
         var jqjson = $.post( ncpath, form_values, function(data) {
@@ -488,7 +546,7 @@ $(document).ready(function () {
             	var source_found = get_ellipse( source_target[0] );
             	var target_found = get_ellipse( source_target[1] );
             	if( source_found.size() && target_found.size() ) {
-					var relation = relation_manager.create( source_target[0], source_target[1], $('#rel_type').attr('selectedIndex') );
+                var relation = relation_manager.create( source_target[0], source_target[1], $('#rel_type')[0].selectedIndex-1 );
 					relation.data( 'type', $('#rel_type :selected').text()  );
 					relation.data( 'scope', $('#scope :selected').text()  );
 					relation.data( 'note', $('#note').val()  );
@@ -509,12 +567,12 @@ $(document).ready(function () {
         var jqjson = $.getJSON( basepath + '/definitions', function(data) {
             var types = data.types.sort();
             $.each( types, function(index, value) {   
-                 $('#rel_type').append( $('<option>').attr( "value", value ).text(value) ); 
+                 $('#rel_type').append( $('<option />').attr( "value", value ).text(value) ); 
                  $('#keymaplist').append( $('<li>').css( "border-color", relation_manager.relation_colors[index] ).text(value) ); 
             });
             var scopes = data.scopes;
             $.each( scopes, function(index, value) {   
-                 $('#scope').append( $('<option>').attr( "value", value ).text(value) ); 
+                 $('#scope').append( $('<option />').attr( "value", value ).text(value) ); 
             });
         });        
     },
@@ -576,9 +634,12 @@ $(document).ready(function () {
     }
   });
 
+  // function for reading form dialog should go here; for now hide the element
+  $('#reading_form').hide();
+
   $('#update_workspace_button').click( function() {
      var svg_enlargement = $('#svgenlargement').svg().svg('get').root();
-     mouse_scale = svg_root.children[0].getScreenCTM().a;
+     mouse_scale = svg_root_element.getScreenCTM().a;
      if( $(this).data('locked') == true ) {
          $('#svgenlargement ellipse' ).each( function( index ) {
              if( $(this).data( 'node_obj' ) != null ) {
@@ -594,7 +655,7 @@ $(document).ready(function () {
      } else {
          var left = $('#enlargement').offset().left;
          var right = left + $('#enlargement').width();
-         var tf = svg_root.children[0].getScreenCTM().inverse(); 
+         var tf = svg_root_element.getScreenCTM().inverse(); 
          var p = svg_root.createSVGPoint();
          p.x=left;
          p.y=100;
@@ -637,6 +698,51 @@ $(document).ready(function () {
       });
   }
 
+  expandFillPageClients();
+  $(window).resize(function() {
+    expandFillPageClients();
+  });
+
 });
 
 
+function expandFillPageClients() {
+	$('.fillPage').each(function () {
+		$(this).height($(window).height() - $(this).offset().top - MARGIN);
+	});
+}
+
+function loadSVG(svgData) {
+	var svgElement = $('#svgenlargement');
+
+	$(svgElement).svg('destroy');
+
+	$(svgElement).svg({
+		loadURL: svgData,
+		onLoad : svgEnlargementLoaded
+	});
+}
+
+
+/*	OS Gadget stuff
+
+function svg_select_callback(topic, data, subscriberData) {
+	svgData = data;
+	loadSVG(svgData);
+}
+
+function loaded() {
+	var prefs = new gadgets.Prefs();
+	var preferredHeight = parseInt(prefs.getString('height'));
+	if (gadgets.util.hasFeature('dynamic-height')) gadgets.window.adjustHeight(preferredHeight);
+	expandFillPageClients();
+}
+
+if (gadgets.util.hasFeature('pubsub-2')) {
+	gadgets.HubSettings.onConnect = function(hum, suc, err) {
+		subId = gadgets.Hub.subscribe("interedition.svg.selected", svg_select_callback);
+		loaded();
+	};
+}
+else gadgets.util.registerOnLoadHandler(loaded);
+*/
diff --git a/root/src/relate.tt b/root/src/relate.tt
index 65bb19e..891e5a2 100644
--- a/root/src/relate.tt
+++ b/root/src/relate.tt
@@ -4,8 +4,9 @@
 	applicationstyle = c.uri_for('/css/relationship.css')
 %]
 <script type="text/javascript">
-$(function() {
-  $('#svgenlargement').svg({loadURL: '[% svg_string %]', onLoad: svgEnlargementLoaded});
+
+$(document).ready(function () {
+  loadSVG('[% svg_string %]');
 });
 </script>
 [% END %]
@@ -29,41 +30,45 @@ $(function() {
 		</div>
 	</div>
 
-	<div id="enlargement_container">	
+	<div id="enlargement_container" class="fillPage">	
 		<div id="loading_overlay">
 			<div id="loading_message"><span>Loading, please wait...</span></div>
 		</div>
 		<div id="dialog_overlay"></div>
-		<div id="enlargement">
-	        <div id="svgenlargement" style="height: 500px;"></div>
+		<div id="enlargement" style="">
+	        <div id="svgenlargement"  class="fillPage"></div>
 		</div>
 	</div>
 	
 	<div id="update_workspace_button"></div>
 	
-	<div id="dialog-form" title="Create relation between two nodes..">
-		<form id="collapse_node_form">
+	<div id="dialog-form" title="Create relation between two nodes...">
+		<form id="collapse_node_form" action="#">
 		<fieldset>
 			<input type="hidden" name="source_id" id="source_node_id"/>
+			<input type="hidden" name="source_text" id="source_node_text"/>
 			<input type="hidden" name="target_id" id="target_node_id"/>
+			<input type="hidden" name="target_text" id="target_node_text"/>
 			<label for="rel_type">Relation type..&nbsp;</label>
 			<select name="rel_type" id="rel_type" class=".ui-widget select">
+				<option></option>
 			</select>
 			<br/><br/>
 			<label for="scope">Scope of relation..&nbsp;</label>
 			<select name="scope" id="scope" class=".ui-widget select">
+				<option></option>
 			</select>
 			<br/><br/>
 			<label for="note">Annotation or note..&nbsp;</label>
-			<input type="text" width="60" name="note" id="note" class=".ui-widget input" />
+			<textarea rows="3" style="width:100%;" name="note" id="note" class=".ui-widget input"></textarea>
 		</fieldset>
     	<div id="status"></div>		
 		</form>
 	</div>
 	<div id="dialog_overlay"></div>
 
-	<div id="delete-form" title="Relation info..">
-		<form id="delete_relation_form">
+	<div id="delete-form" title="Relation info...">
+		<form id="delete_relation_form" action="#">
 			<input type="hidden" name="source_id" id="delete_source_node_id"/>
 			<input type="hidden" name="target_id" id="delete_target_node_id"/>
 		</form>
@@ -73,6 +78,7 @@ $(function() {
     <p/><p/>	
     <div id="keymap">
         <ul id="keymaplist">
+          <li></li>
         </ul>
     </div>