+++ /dev/null
-function getRelativePath( action ) {
- path_elements = window.location.pathname.split('/');
- if( path_elements[1].length > 0 ) {
- return window.location.pathname.split('/')[1] + '/' + action;
- } else {
- return action;
- }
-}
-
-function svgLoaded() {
- $('ellipse').attr( {stroke:'black', fill:'#fff'} );
- ncpath = getRelativePath( 'node_click' );
- var jqjson = $.getJSON( ncpath, 'node_id=null', function(data) {
- $.each( data, function(item, node_id_and_state) {
- if( node_id_and_state[1] == 1 ) {
- node_ellipse = $('.node').children('title').filter( function(index) {
- return $(this).text() == node_id_and_state[0];
- }).siblings('ellipse');
- node_ellipse.attr( {stroke:'green', fill:'#b3f36d'} );
- $('#constructedtext').append( node_ellipse.siblings('text').text() + ' ' );
- } else {
- if( node_id_and_state[1] == null ) {
- $('#constructedtext').append( ' … ' );
- }
- }
- });
- add_node_objs();
- });
-}
-
-function add_node_objs() {
- $('ellipse[fill="#fff"]').each( function() {
- $(this).data( 'node_obj', new node_obj( $(this) ) );
- }
- );
-}
-
-function get_node_obj( node_id ) {
- return $('.node').children('title').filter( function(index) {
- return $(this).text() == node_id;
- }).siblings('ellipse').data( 'node_obj' );
-}
-
-function get_edge( edge_id ) {
- return $('.edge').filter( function(index) {
- return $(this).children( 'title' ).text() == $('<div/>').html(edge_id).text() ;
- });
-}
-
-function node_obj(ellipse) {
- this.ellipse = ellipse;
- var self = this;
-
- this.x = 0;
- this.y = 0;
- this.dx = 0;
- this.dy = 0;
- this.node_elements = node_elements_for(self.ellipse);
- this.sub_nodes = [];
- this.super_node = null;
-
- this.dblclick_listener = function(evt) {
- node_id = self.ellipse.siblings('title').text();
- ncpath = getRelativePath( 'node_click' );
- var jqjson = $.getJSON( ncpath, 'node_id=' + node_id, function(data) {
- $('#constructedtext').empty();
- $.each( data, function(item, node_id_and_state) {
- node = get_node_obj( node_id_and_state[0] );
- // 1 -> turn the associated SVG node on, put in the associate word in the text box.
- // 0 -> turn SVG node off.
- // null -> turn node off, put in ellipsis in text box at the corresponding place.
- if( node_id_and_state[1] == 1 ) {
-//TODO: create test suite en refactor this in to more OO! (node and node_ellipse are 'conflated')
- node_ellipse = $('.node').children('title').filter( function(index) {
- return $(this).text() == node_id_and_state[0];
- }).siblings('ellipse');
- $('#constructedtext').append( node_ellipse.siblings('text').text() + ' ' );
- if( node ) { node.set_draggable( false ) }
- } else {
- if( node ) { node.set_draggable( true ) };
- if( node_id_and_state[1] == null ) {
- $('#constructedtext').append( ' … ' );
- }
- }
- });
- });
- }
-
- this.set_draggable = function( draggable ) {
- if( draggable ) {
- self.ellipse.attr( {stroke:'black', fill:'#fff'} );
- self.ellipse.mousedown( this.mousedown_listener );
- self.ellipse.hover( this.enter_node, this.leave_node );
- } else {
- self.ellipse.unbind('mouseenter').unbind('mouseleave').unbind('mousedown');
- self.ellipse.attr( {stroke:'green', fill:'#b3f36d'} );
- }
- }
-
- this.mousedown_listener = function(evt) {
- evt.stopPropagation();
- self.x = evt.clientX;
- self.y = evt.clientY;
- $('body').mousemove( self.mousemove_listener );
- $('body').mouseup( self.mouseup_listener );
- self.ellipse.unbind('mouseenter').unbind('mouseleave')
- self.ellipse.attr( 'fill', '#ff66ff' );
- }
-
- this.mousemove_listener = function(evt) {
- self.dx = evt.clientX - self.x;
- self.dy = evt.clientY - self.y;
- self.move_elements();
- }
-
- this.mouseup_listener = function(evt) {
- if( $('ellipse[fill="#ffccff"]').size() > 0 ) {
- $('#source_node_id').val( self.ellipse.siblings('title').text() );
- $('#target_node_id').val( $('ellipse[fill="#ffccff"]').siblings("title").text() );
- $( '#dialog-form' ).dialog( 'open' );
- };
- $('body').unbind('mousemove');
- $('body').unbind('mouseup');
- self.ellipse.attr( 'fill', '#fff' );
- self.ellipse.hover( self.enter_node, self.leave_node );
- if( self.super_node ) {
- self.eclipse();
- } else {
- self.reset_elements();
- }
- }
-
- this.cpos = function() {
- return { x: self.ellipse.attr('cx'), y: self.ellipse.attr('cy') };
- }
-
- this.get_g = function() {
- return self.ellipse.parent('g');
- }
-
- this.stack_behind = function( collapse_info ) {
- self.super_node = get_node_obj( collapse_info.target );
- self.super_node.sub_nodes.push( self );
- self.eclipse();
- if( collapse_info.edges ) {
- $.each( collapse_info.edges, function( source_edge_id, target_info ) {
- get_edge(source_edge_id).attr( 'display', 'none' );
- target_edge = get_edge(target_info.target);
- // Unfortunately, the simple solution doesn't work...
- // target_edge.children( 'text' ).replaceWith( '<text x="2270" y="-59.400001525878906"><tspan text-anchor="middle">A, B</tspan><tspan fill="red">, C</tspan></text>' );
- // ..so we take the long and winding road...
- var svg = $('#svgbasics').children('svg').svg().svg('get');
- textx = target_edge.children( 'text' )[0].x.baseVal.getItem(0).value
- texty = target_edge.children( 'text' )[0].y.baseVal.getItem(0).value
- current_label = target_edge.children( 'text' ).text();
- target_edge.children( 'text' ).remove();
- texts = svg.createText();
- texts.span(current_label, {'text-anchor': 'middle'}).span(target_info.label, {fill: 'red'});
- svg.text(target_edge, textx, texty, texts);
- });
- }
- }
-
- this.eclipse = function() {
- self.dx = new Number( self.super_node.cpos().x ) - new Number( self.cpos().x ) + ( 10 * (self.super_node.sub_nodes.indexOf(self) + 1) );
- self.dy = new Number( self.super_node.cpos().y ) - new Number( self.cpos().y ) + ( 5 * (self.super_node.sub_nodes.indexOf(self) + 1) );
- self.move_elements();
- eclipse_index = self.super_node.sub_nodes.indexOf(self) - 1;
- if( eclipse_index > -1 ) {
- self.get_g().insertBefore( self.super_node.sub_nodes[eclipse_index].get_g() );
- } else {
- self.get_g().insertBefore( self.super_node.get_g() );
- }
- }
-
- this.enter_node = function(evt) {
- self.ellipse.attr( 'fill', '#ffccff' );
- }
-
- this.leave_node = function(evt) {
- self.ellipse.attr( 'fill', '#fff' );
- }
-
- this.move_elements = function() {
- $.each( self.node_elements, function(index, value) {
- value.move(self.dx,self.dy);
- });
- }
-
- this.reset_elements = function() {
- $.each( self.node_elements, function(index, value) {
- value.reset();
- });
- }
-
- this.ellipse.dblclick( this.dblclick_listener );
- self.set_draggable( true );
-}
-
-function svgshape( shape_element ) {
- this.shape = shape_element;
- this.move = function(dx,dy) {
- this.shape.attr( "transform", "translate(" + dx + " " + dy + ")" );
- }
- this.reset = function() {
- this.shape.attr( "transform", "translate( 0, 0 )" );
- }
-}
-
-function svgpath( path_element ) {
- this.path = path_element;
- this.x = this.path.x;
- this.y = this.path.y;
- this.move = function(dx,dy) {
- this.path.x = this.x + dx;
- this.path.y = this.y + dy;
- }
- this.reset = function() {
- this.path.x = this.x;
- this.path.y = this.y;
- }
-}
-
-function node_elements_for( ellipse ) {
- node_elements = get_edge_elements_for( ellipse );
- node_elements.push( new svgshape( ellipse.siblings('text') ) );
- node_elements.push( new svgshape( ellipse ) );
- return node_elements;
-}
-
-function get_edge_elements_for( ellipse ) {
- edge_elements = new Array();
- node_id = ellipse.siblings('title').text();
- edge_in_pattern = new RegExp( node_id + '$' );
- edge_out_pattern = new RegExp( '^' + node_id );
- $.each( $('.edge').children('title'), function(index) {
- title = $(this).text();
- if( edge_in_pattern.test(title) ) {
- edge_elements.push( new svgshape( $(this).siblings('polygon') ) );
- path_segments = $(this).siblings('path')[0].pathSegList;
- edge_elements.push( new svgpath( path_segments.getItem(path_segments.numberOfItems - 1) ) );
- }
- if( edge_out_pattern.test(title) ) {
- path_segments = $(this).siblings('path')[0].pathSegList;
- edge_elements.push( new svgpath( path_segments.getItem(0) ) );
- }
- });
- return edge_elements;
-}
-
-$(document).ready(function () {
- $('#graph').ajaxError(function() {
- console.log( 'Oops.. something went wrong with trying to save this change. Please try again...' );
- });
- $('#graph').mousedown(function (event) {
- $(this)
- .data('down', true)
- .data('x', event.clientX)
- .data('scrollLeft', this.scrollLeft);
- return false;
- }).mouseup(function (event) {
- $(this).data('down', false);
- }).mousemove(function (event) {
- if ($(this).data('down') == true ) {
- this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
- }
- }).mousewheel(function (event, delta) {
- this.scrollLeft -= (delta * 30);
- }).css({
- 'overflow' : 'hidden',
- 'cursor' : '-moz-grab'
- });
- $( "#dialog-form" ).dialog({
- autoOpen: false,
- height: 150,
- width: 250,
- modal: true,
- buttons: {
- "Ok": function() {
- form_values = $('#collapse_node_form').serialize()
- ncpath = getRelativePath( 'node_collapse' );
- var jqjson = $.getJSON( ncpath, form_values, function(data) {
- $.each( data, function(item, collapse_info) {
- get_node_obj( item ).stack_behind( collapse_info );
- });
- });
- $( this ).dialog( "close" );
- },
- Cancel: function() {
- $( this ).dialog( "close" );
- }
- },
- close: function() {
- $('#reason').val( "" ).removeClass( "ui-state-error" );
- }
- });
-});
-
-
-$(window).mouseout(function (event) {
- if ($('#graph').data('down')) {
- try {
- if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
- $('#graph').data('down', false);
- }
- } catch (e) {}
- }
-});
-
-
projects / scpubgit/stemmaweb.git / commitdiff