X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=blobdiff_plain;f=stemmaweb%2Froot%2Fjs%2Frelationship.js;h=cd3d867d0ed8ed8d01c2470ff8a913cba3f2cd5f;hb=a1411d50483bfd6cc561d7f8d81941cd6d6f61a9;hp=608d1edca349fe6e0146c05ba8cae3899be0fd99;hpb=7fd1d97a0e7b50b8f0e30190aeb62eaaf239552c;p=scpubgit%2Fstemmatology.git
diff --git a/stemmaweb/root/js/relationship.js b/stemmaweb/root/js/relationship.js
index 608d1ed..cd3d867 100644
--- a/stemmaweb/root/js/relationship.js
+++ b/stemmaweb/root/js/relationship.js
@@ -1,8 +1,20 @@
+var MARGIN=30;
+var svg_root = null;
+var svg_root_element = null;
+var start_element_height = 0;
+var reltypes = {};
+var readingdata = {};
+
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)
};
+ // Get rid of query parameters
+ if( currpath.lastIndexOf('?') != -1 ) {
+ currpath = currpath.slice( 0, currpath.lastIndexOf('?') );
+ };
var path_elements = currpath.split('/');
var textid = path_elements.pop();
var basepath = path_elements.join( '/' );
@@ -10,74 +22,242 @@ function getTextPath() {
return path_parts;
}
-function svgLoaded() {
- // some initial scaling
- var svg_element = $('#svgbasics').children('svg');
- var svg_graph = svg_element.svg().svg('get').root();
- var svg_vbwidth = svg_graph.viewBox.baseVal.width;
- var svg_vbheight = svg_graph.viewBox.baseVal.height;
- var scroll_padding = $('#graph_container').width();
- // (Use attr('width') to set width attr, otherwise style="width: npx;" is set.)
- var svg_element_width = svg_vbwidth/svg_vbheight * parseInt(svg_element.attr('height'));
- svg_element_width += scroll_padding;
- svg_element.attr( 'width', svg_element_width );
- $('ellipse').attr( {stroke:'black', fill:'#fff'} );
+function getRelativePath() {
+ var path_parts = getTextPath();
+ return path_parts[0];
+}
+
+function getTextURL( which ) {
+ var path_parts = getTextPath();
+ return path_parts[0] + '/' + path_parts[1] + '/' + which;
+}
+
+function getReadingURL( reading_id ) {
+ var path_parts = getTextPath();
+ return path_parts[0] + '/' + path_parts[1] + '/reading/' + reading_id;
+}
+
+// Make an XML ID into a valid selector
+function jq(myid) {
+ return '#' + myid.replace(/(:|\.)/g,'\\$1');
+}
+
+// Actions for opening the reading panel
+function node_dblclick_listener( evt ) {
+ // Open the reading dialogue for the given node.
+ // First get the reading info
+ var reading_id = $(this).attr('id');
+ var reading_info = readingdata[reading_id];
+ // and then populate the dialog box with it.
+ // Set the easy properties first
+ $('#reading-form').dialog( 'option', 'title', 'Reading information for "' + reading_info['text'] + '"' );
+ $('#reading_id').val( reading_id );
+ toggle_checkbox( $('#reading_is_nonsense'), reading_info['is_nonsense'] );
+ toggle_checkbox( $('#reading_grammar_invalid'), reading_info['grammar_invalid'] );
+ // Use .text as a backup for .normal_form
+ var normal_form = reading_info['normal_form'];
+ if( !normal_form ) {
+ normal_form = reading_info['text'];
+ }
+ var nfboxsize = 10;
+ if( normal_form.length > 9 ) {
+ nfboxsize = normal_form.length + 1;
+ }
+ $('#reading_normal_form').attr( 'size', nfboxsize )
+ $('#reading_normal_form').val( normal_form );
+ // Now do the morphological properties.
+ morphology_form( reading_info['lexemes'] );
+ // and then open the dialog.
+ $('#reading-form').dialog("open");
+}
+
+function toggle_checkbox( box, value ) {
+ if( value == null ) {
+ value = false;
+ }
+ box.attr('checked', value );
+}
+
+function morphology_form ( lexlist ) {
+ $('#morphology').empty();
+ $.each( lexlist, function( idx, lex ) {
+ var morphoptions = [];
+ if( 'wordform_matchlist' in lex ) {
+ $.each( lex['wordform_matchlist'], function( tdx, tag ) {
+ var tagstr = stringify_wordform( tag );
+ morphoptions.push( tagstr );
+ });
+ }
+ var formtag = 'morphology_' + idx;
+ var formstr = '';
+ if( 'form' in lex ) {
+ formstr = stringify_wordform( lex['form'] );
+ }
+ var form_morph_elements = morph_elements(
+ formtag, lex['string'], formstr, morphoptions );
+ $.each( form_morph_elements, function( idx, el ) {
+ $('#morphology').append( el );
+ });
+ });
+}
+
+function stringify_wordform ( tag ) {
+ if( tag ) {
+ var elements = tag.split(' // ');
+ return elements[1] + ' // ' + elements[2];
+ }
+ return ''
+}
+
+function morph_elements ( formtag, formtxt, currform, morphoptions ) {
+ var clicktag = '(Click to select)';
+ if ( !currform ) {
+ currform = clicktag;
+ }
+ var formlabel = $('').attr( 'id', 'label_' + formtag ).attr(
+ 'for', 'reading_' + formtag ).text( formtxt + ': ' );
+ var forminput = $('').attr( 'id', 'reading_' + formtag ).attr(
+ 'name', 'reading_' + formtag ).attr( 'size', '50' ).attr(
+ 'class', 'reading_morphology' ).val( currform );
+ forminput.autocomplete({ source: morphoptions, minLength: 0 });
+ forminput.focus( function() {
+ if( $(this).val() == clicktag ) {
+ $(this).val('');
+ }
+ $(this).autocomplete('search', '')
+ });
+ var morphel = [ formlabel, forminput, $('
') ];
+ return morphel;
+}
+
+function color_inactive ( el ) {
+ var reading_id = $(el).parent().attr('id');
+ var reading_info = readingdata[reading_id];
+ // If the reading info has any non-disambiguated lexemes, color it yellow;
+ // otherwise color it green.
+ $(el).attr( {stroke:'green', fill:'#b3f36d'} );
+ if( reading_info ) {
+ $.each( reading_info['lexemes'], function ( idx, lex ) {
+ if( !lex['is_disambiguated'] || lex['is_disambiguated'] == 0 ) {
+ $(el).attr( {stroke:'orange', fill:'#fee233'} );
+ }
+ });
+ }
+}
+
+function relemmatize () {
+ // Send the reading for a new lemmatization and reopen the form.
+ $('#relemmatize_pending').show();
+ var reading_id = $('#reading_id').val()
+ ncpath = getReadingURL( reading_id );
+ form_values = {
+ 'normal_form': $('#reading_normal_form').val(),
+ 'relemmatize': 1 };
+ var jqjson = $.post( ncpath, form_values, function( data ) {
+ // Update the form with the return
+ if( 'id' in data ) {
+ // We got back a good answer. Stash it
+ readingdata[reading_id] = data;
+ // and regenerate the morphology form.
+ morphology_form( data['lexemes'] );
+ } else {
+ alert("Could not relemmatize as requested: " + data['error']);
+ }
+ $('#relemmatize_pending').hide();
+ });
}
+// Initialize the SVG once it exists
function svgEnlargementLoaded() {
- // some initial scaling
- var svg_element = $('#svgenlargement').children('svg');
- var svg_graph = svg_element.svg().svg('get').root()
- var svg_vbwidth = svg_graph.viewBox.baseVal.width;
- var svg_vbheight = svg_graph.viewBox.baseVal.height;
- var scroll_padding = $('#enlargement_container').width();
- // (Use attr('width') to set width attr, otherwise style="width: npx;" is set.)
- var svg_element_width = svg_vbwidth/svg_vbheight * parseInt(svg_element.attr('height'));
- svg_element_width += scroll_padding;
- svg_element.attr( 'width', svg_element_width );
- $('ellipse').attr({
- stroke: 'black',
- fill: '#fff'
- });
- var svg_height = parseInt( $('#svgenlargement').height() );
- scroll_enlargement_ratio = svg_height/svg_vbheight;
- add_relations();
+ //Give some visual evidence that we are working
+ $('#loading_overlay').show();
+ lo_height = $("#enlargement_container").outerHeight();
+ lo_width = $("#enlargement_container").outerWidth();
+ $("#loading_overlay").height( lo_height );
+ $("#loading_overlay").width( lo_width );
+ $("#loading_overlay").offset( $("#enlargement_container").offset() );
+ $("#loading_message").offset(
+ { '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.
+ var rdgpath = getTextURL( 'readings' );
+ $.getJSON( rdgpath, function( data ) {
+ readingdata = data;
+ $('#svgenlargement ellipse').each( function( i, el ) { color_inactive( el ) });
+ });
+ $('#svgenlargement ellipse').parent().dblclick( node_dblclick_listener );
+ 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;
+ }
+ }
+
+ 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.
+ //This is just to create a nice starting enlargement.
+ var initial_svg_height = 250;
+ var scale = initial_svg_height/graph_svg.attr( 'height' );
+ var additional_translate = (graph_svg.attr( 'height' ) - initial_svg_height)/(2*scale);
+ var transform = svg_g.getAttribute('transform');
+ var translate = parseFloat( transform.match( /translate\([^\)]*\)/ )[0].split('(')[1].split(' ')[1].split(')')[0] );
+ translate += additional_translate;
+ var transform = 'rotate(0) scale(' + scale + ') translate(4 ' + translate + ')';
+ svg_g.setAttribute('transform', transform);
+ //used to calculate min and max zoom level:
+ start_element_height = $('#__START__').children('ellipse')[0].getBBox().height;
+ add_relations( function() { $('#loading_overlay').hide(); });
}
-function add_relations() {
- var pathparts = getTextPath();
- $.getJSON( pathparts[0] + '/definitions', function(data) {
+function add_relations( callback_fn ) {
+ var basepath = getRelativePath();
+ var textrelpath = getTextURL( 'relationships' );
+ $.getJSON( basepath + '/definitions', function(data) {
var rel_types = data.types.sort();
- var pathparts = getTextPath();
- $.getJSON( pathparts[0] + '/' + pathparts[1] + '/relationships',
+ $.getJSON( textrelpath,
function(data) {
$.each(data, function( index, rel_info ) {
var type_index = $.inArray(rel_info.type, rel_types);
- if( type_index != -1 ) {
- console.log( 'drawing' );
- relation_manager.create( rel_info.source, rel_info.target, type_index );
- } else {
- console.log( 'not drawing' );
+ var source_found = get_ellipse( rel_info.source );
+ var target_found = get_ellipse( rel_info.target );
+ if( type_index != -1 && source_found.size() && target_found.size() ) {
+ var relation = relation_manager.create( rel_info.source, rel_info.target, type_index );
+ relation.data( 'type', rel_info.type );
+ relation.data( 'scope', rel_info.scope );
+ relation.data( 'note', rel_info.note );
+ var node_obj = get_node_obj(rel_info.source);
+ node_obj.set_draggable( false );
+ node_obj.ellipse.data( 'node_obj', null );
+ node_obj = get_node_obj(rel_info.target);
+ node_obj.set_draggable( false );
+ node_obj.ellipse.data( 'node_obj', null );
}
- })
- });
+ });
+ callback_fn.call();
+ });
});
}
function get_ellipse( node_id ) {
- return $('#svgenlargement .node').children('title').filter( function(index) {
- return $(this).text() == node_id;
- }).siblings('ellipse');
+ return $( jq( node_id ) + ' ellipse');
}
function get_node_obj( node_id ) {
- return get_ellipse( node_id ).data( 'node_obj' );
-}
-
-function get_edge( edge_id ) {
- return $('#svgenlargement .edge').filter( function(index) {
- return $(this).children( 'title' ).text() == $('
The relationship can not be made in this way between these nodes.
' ); + if( ajaxSettings.url == getTextURL('relationships') + && ajaxSettings.type == 'POST' && jqXHR.status == 403 ) { + var errobj = jQuery.parseJSON( jqXHR.responseText ); + $('#status').append( 'Error: ' + errobj.error + 'The relationship cannot be made.
' ); } + $(event.target).parent().find('.ui-button').button("enable"); } ); + $( "#delete-form" ).dialog({ + autoOpen: false, + height: 135, + width: 160, + modal: false, + buttons: { + Cancel: function() { + $( this ).dialog( "close" ); + }, + Delete: function() { + form_values = $('#delete_relation_form').serialize(); + ncpath = getTextURL( 'relationships' ); + var jqjson = $.ajax({ url: ncpath, data: form_values, success: function(data) { + $.each( data, function(item, source_target) { + relation_manager.remove( get_relation_id( source_target[0], source_target[1] ) ); + }); + $( "#delete-form" ).dialog( "close" ); + }, dataType: 'json', type: 'DELETE' }); + } + }, + create: function(event, ui) { + var buttonset = $(this).parent().find( '.ui-dialog-buttonset' ).css( 'width', '100%' ); + buttonset.find( "button:contains('Cancel')" ).css( 'float', 'right' ); + var dialog_aria = $("div[aria-labelledby='ui-dialog-title-delete-form']"); + dialog_aria.mouseenter( function() { + if( mouseWait != null ) { clearTimeout(mouseWait) }; + }) + dialog_aria.mouseleave( function() { + mouseWait = setTimeout( function() { $("#delete-form").dialog( "close" ) }, 2000 ); + }) + }, + open: function() { + mouseWait = setTimeout( function() { $("#delete-form").dialog( "close" ) }, 2000 ); + }, + close: function() { + } + }); + + // function for reading form dialog should go here; for now hide the element + $('#reading-form').dialog({ + autoOpen: false, + height: 400, + width: 600, + modal: true, + buttons: { + Cancel: function() { + $( this ).dialog( "close" ); + }, + Update: function( evt ) { + // Disable the button + $(evt.target).button("disable"); + $('#reading_status').empty(); + var reading_id = $('#reading_id').val() + form_values = { + 'id' : reading_id, + 'is_nonsense': $('#reading_is_nonsense').is(':checked'), + 'grammar_invalid': $('#reading_grammar_invalid').is(':checked'), + 'normal_form': $('#reading_normal_form').val() }; + // Add the morphology values + $('.reading_morphology').each( function() { + if( $(this).val() != '(Click to select)' ) { + var rmid = $(this).attr('id'); + rmid = rmid.substring(8); + form_values[rmid] = $(this).val(); + } + }); + // Make the JSON call + ncpath = getReadingURL( reading_id ); + var reading_element = readingdata[reading_id]; + // $(':button :contains("Update")').attr("disabled", true); + var jqjson = $.post( ncpath, form_values, function(data) { + $.each( data, function(key, value) { + reading_element[key] = value; + }); + if( $('#update_workspace_button').data('locked') == false ) { + color_inactive( get_ellipse( reading_id ) ); + } + $(evt.target).button("enable"); + $( "#reading-form" ).dialog( "close" ); + }); + // Re-color the node if necessary + return false; + } + }, + create: function() { + }, + open: function() { + $(".ui-widget-overlay").css("background", "none"); + $("#dialog_overlay").show(); + $('#reading_status').empty(); + $("#dialog_overlay").height( $("#enlargement_container").height() ); + $("#dialog_overlay").width( $("#enlargement_container").innerWidth() ); + $("#dialog_overlay").offset( $("#enlargement_container").offset() ); + $("#reading-form").parent().find('.ui-button').button("enable"); + }, + close: function() { + $("#dialog_overlay").hide(); + } + }).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) { + if( ajaxSettings.url.lastIndexOf( getReadingURL('') ) > -1 + && ajaxSettings.type == 'POST' && jqXHR.status == 403 ) { + var errobj = jQuery.parseJSON( jqXHR.responseText ); + $('#reading_status').append( 'Error: ' + errobj.error + '
' ); + } + $(event.target).parent().find('.ui-button').button("enable"); + }); + + $('#update_workspace_button').click( function() { var svg_enlargement = $('#svgenlargement').svg().svg('get').root(); - if( $(this).data('locked')==true) { - $.each( ellipses_in_magnifier, function( index, ellipse ) { - ellipse.data( 'node_obj' ).ungreyout_edges(); - ellipse.data( 'node_obj' ).set_draggable( false ); - ellipse.data( 'node_obj', null ); + mouse_scale = svg_root_element.getScreenCTM().a; + if( $(this).data('locked') == true ) { + $('#svgenlargement ellipse' ).each( function( index ) { + if( $(this).data( 'node_obj' ) != null ) { + $(this).data( 'node_obj' ).ungreyout_edges(); + $(this).data( 'node_obj' ).set_draggable( false ); + var node_id = $(this).data( 'node_obj' ).get_id(); + toggle_relation_active( node_id ); + $(this).data( 'node_obj', null ); + } }) - svg_enlargement.children[0].setAttribute( 'transform', $(this).data('transform_memo') ); - $('#enlargement').scrollLeft( $(this).data('scrollleft_memo') ); $(this).data('locked', false); - $(this).css('background-position', '0px 0px'); + $(this).css('background-position', '0px 44px'); } else { - $(this).css('background-position', '0px 17px'); - var y_min = parseInt( ellipses_in_magnifier[0].attr('cy') ) - parseInt( ellipses_in_magnifier[0].attr('ry') ); - var y_max = parseInt( ellipses_in_magnifier[0].attr('cy') ) + parseInt( ellipses_in_magnifier[0].attr('ry') ); - $.each( ellipses_in_magnifier, function( index, ellipse ) { - var ny_min = parseInt( ellipse.attr('cy') ) - parseInt( ellipse.attr('ry') ); - var ny_max = parseInt( ellipse.attr('cy') ) + parseInt( ellipse.attr('ry') ); - if( ny_min < y_min ) { y_min = ny_min }; - if( ny_max > y_max ) { y_max = ny_max }; - if( ellipse.data( 'node_obj' ) == null ) { - ellipse.data( 'node_obj', new node_obj( ellipse ) ); - } else { - ellipse.data( 'node_obj' ).set_draggable( true ); + var left = $('#enlargement').offset().left; + var right = left + $('#enlargement').width(); + var tf = svg_root_element.getScreenCTM().inverse(); + var p = svg_root.createSVGPoint(); + p.x=left; + p.y=100; + var cx_min = p.matrixTransform(tf).x; + p.x=right; + var cx_max = p.matrixTransform(tf).x; + $('#svgenlargement ellipse').each( function( index ) { + var cx = parseInt( $(this).attr('cx') ); + if( cx > cx_min && cx < cx_max) { + if( $(this).data( 'node_obj' ) == null ) { + $(this).data( 'node_obj', new node_obj( $(this) ) ); + } else { + $(this).data( 'node_obj' ).set_draggable( true ); + } + $(this).data( 'node_obj' ).greyout_edges(); + var node_id = $(this).data( 'node_obj' ).get_id(); + toggle_relation_active( node_id ); } - ellipse.data( 'node_obj' ).greyout_edges(); - }) - var graph_frag_height = y_max - y_min ; - var svg_enlargement_vbheight = svg_enlargement.viewBox.baseVal.height; - var svg_enlargement_vbwidth = svg_enlargement.viewBox.baseVal.width; - var scale = svg_enlargement_vbheight / graph_frag_height; - mousemove_enlargement_ratio = scroll_enlargement_ratio * scale; - var scroll_padding = $('#enlargement_container').width(); - var scroll_scale = svg_enlargement_vbwidth / ( parseFloat( $('#svgenlargement svg').attr('width') ) - scroll_padding ); - var vbx_of_scroll = ( $('#enlargement').scrollLeft() ) * scroll_scale; - var translate_x = vbx_of_scroll; - var transform = svg_enlargement.children[0].getAttribute('transform'); - $(this).data('transform_memo', transform ); - $(this).data('scrollleft_memo', $('#enlargement').scrollLeft() ); + }); + $(this).css('background-position', '0px 0px'); $(this).data('locked', true ); - $('#enlargement').scrollLeft(0); - transform = 'scale(' + scale + ') translate(' + (-1 * translate_x) + ',' + (-1 * y_min) + ')'; - svg_enlargement.children[0].setAttribute( 'transform', transform ); } }); -}); + $('.helptag').popupWindow({ + height:500, + width:800, + top:50, + left:50, + scrollbars:1 + }); -$(window).mouseout(function (event) { - if ($('#graph').data('down')) { - try { - if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') { - $('#graph').data('down', false); - } - } catch (e) {} + + function toggle_relation_active( node_id ) { + $('#svgenlargement .relation').find( "title:contains('" + node_id + "')" ).each( function(index) { + matchid = new RegExp( "^" + node_id ); + if( $(this).text().match( matchid ) != null ) { + var relation_id = $(this).parent().attr('id'); + relation_manager.toggle_active( relation_id ); + }; + }); } + + expandFillPageClients(); + $(window).resize(function() { + expandFillPageClients(); + }); + }); -function color_enlarged() { - ellipses_in_magnifier = []; - var scroll_offset = parseInt( $('#enlargement').scrollLeft() ); - var scroll_padding = $('#enlargement_container').width()/2; - $('#svgenlargement ellipse,#svgbasics ellipse' ).each( function( index ) { - var cpos_inscrollcoor = parseInt( $(this).attr('cx') ) * scroll_enlargement_ratio; - if ( ( cpos_inscrollcoor > (scroll_offset - scroll_padding) ) && ( cpos_inscrollcoor < ( scroll_offset + scroll_padding ) ) ) { - $(this).attr( {stroke:'green', fill:'#b3f36d'} ); - if( $(this).parents('#svgenlargement').size() == 1 ) { ellipses_in_magnifier.push( $(this) ) }; - } else { - $(this).attr( {stroke:'black', fill:'#fff'} ); - } - }); + +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); +*/