details: http://www.bx.psu.edu/hg/galaxy/rev/b671c301674a changeset: 1479:b671c301674a user: James Taylor <james@jamestaylor.org> date: Fri Aug 22 17:47:43 2008 -0400 description: Internet explorer fixes and support -- popup menus and dialogs work better on IE6+, workflow editor works on IE7 (using excanvas). It actually *nearly* works on IE6 but there are some layout problems that are probably not worth wasting time on. If any IE users can test this that would be great! 13 file(s) affected in this change: static/june_2007_style/base.css.tmpl static/june_2007_style/blue/base.css static/june_2007_style/blue/panel_layout.css static/june_2007_style/panel_layout.css.tmpl static/scripts/galaxy.base.js static/scripts/galaxy.panels.js static/scripts/galaxy.ui.scrollPanel.js static/scripts/galaxy.workflow_editor.canvas.js static/scripts/packed/galaxy.base.js static/scripts/packed/galaxy.panels.js static/scripts/packed/galaxy.workflow_editor.canvas.js templates/workflow/editor.mako templates/workflow/index.mako diffs (648 lines): diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/base.css.tmpl --- a/static/june_2007_style/base.css.tmpl Fri Aug 22 17:44:32 2008 -0400 +++ b/static/june_2007_style/base.css.tmpl Fri Aug 22 17:47:43 2008 -0400 @@ -358,7 +358,7 @@ font-weight: bold; display: inline-block; cursor: pointer; - margin: -1px; padding: 2px; + padding: 2px; border: solid #aaaaaa 1px; padding-right: 0.5em; padding-left: 0.5em; diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css Fri Aug 22 17:44:32 2008 -0400 +++ b/static/june_2007_style/blue/base.css Fri Aug 22 17:47:43 2008 -0400 @@ -356,7 +356,7 @@ font-weight: bold; display: inline-block; cursor: pointer; - margin: -1px; padding: 2px; + padding: 2px; border: solid #aaaaaa 1px; padding-right: 0.5em; padding-left: 0.5em; diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/blue/panel_layout.css --- a/static/june_2007_style/blue/panel_layout.css Fri Aug 22 17:44:32 2008 -0400 +++ b/static/june_2007_style/blue/panel_layout.css Fri Aug 22 17:47:43 2008 -0400 @@ -244,14 +244,6 @@ top: 0; left: 0; width: 100%; height: 100%; z-index: 20000; } -#overlay-inner { - width: 100%; height: 100%; - background-color:#FFF; - filter:alpha(opacity=75); - -moz-opacity: 0.75; - opacity: 0.75; - z-index: 20000; -} .dialog-box-container { position: relative; @@ -259,15 +251,11 @@ margin-right: auto; margin-left: auto; } -.dialog-box-underlay { - position: absolute; - left: -1em; - right: -1em; - top: -1em; - bottom: -1em; - opacity: 0.5; - background: black; - z-index: -1; + +.dialog-box-wrapper { + position: relative; + padding: 1em; + background-color: rgba(0,0,0,0.5); -moz-border-radius: 1em; -webkit-border-radius: 1em; } diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/panel_layout.css.tmpl --- a/static/june_2007_style/panel_layout.css.tmpl Fri Aug 22 17:44:32 2008 -0400 +++ b/static/june_2007_style/panel_layout.css.tmpl Fri Aug 22 17:47:43 2008 -0400 @@ -244,30 +244,17 @@ z-index: 20000; } -#overlay-inner { - width: 100%; height: 100%; - background-color:#FFF; - filter:alpha(opacity=75); - -moz-opacity: 0.75; - opacity: 0.75; - z-index: 20000; -} - .dialog-box-container { position: relative; margin-top: 80px; margin-right: auto; margin-left: auto; } -.dialog-box-underlay { - position: absolute; - left: -1em; - right: -1em; - top: -1em; - bottom: -1em; - opacity: 0.5; - background: black; - z-index: -1; + +.dialog-box-wrapper { + position: relative; + padding: 1em; + background-color: rgba(0,0,0,0.5); -moz-border-radius: 1em; -webkit-border-radius: 1em; } diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.base.js --- a/static/scripts/galaxy.base.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/galaxy.base.js Fri Aug 22 17:47:43 2008 -0400 @@ -29,13 +29,10 @@ function ensure_popup_helper() { // And the helper below the popup menus if ( $( "#popup-helper" ).length == 0 ) { - var e = $("<div id='popup-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 15000;'></div>"); - if ( $.browser.ie ) { - // Element will not capture drags in ie without nonzero opacity, - // but causes flashing in firefox with nonzero opacity - e.css( "opacity", "0.01" ); - } - e.appendTo("body").hide(); + $( "<div id='popup-helper'/>" ).css( { + background: 'white', opacity: 0, zIndex: 15000, + position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' + } ).appendTo( "body" ).hide(); } } diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.panels.js --- a/static/scripts/galaxy.panels.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/galaxy.panels.js Fri Aug 22 17:47:43 2008 -0400 @@ -6,13 +6,10 @@ function ensure_dd_helper() { // Insert div that covers everything when dragging the borders if ( jq( "#DD-helper" ).length == 0 ) { - var e = jq("<div id='DD-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>"); - if ( jq.browser.ie ) { - // Element will not capture drags in ie without nonzero opacity, - // but causes flashing in firefox with nonzero opacity - e.css( "opacity", "0.01" ); - } - e.appendTo("body").hide(); + $( "<div id='DD-helper'/>" ).css( { + background: 'white', opacity: 0, zIndex: 9000, + position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' + } ).appendTo( "body" ).hide(); } } @@ -179,6 +176,46 @@ return { handle_minwidth_hint: handle_minwidth_hint }; }; +// Modal dialog boxes + +function hide_modal() { + $(".dialog-box-container" ).fadeOut( function() { $("#overlay").hide(); } ); +}; + +function show_modal( title, body, buttons, extra_buttons ) { + $( ".dialog-box" ).find( ".title" ).html( title ); + var b = $( ".dialog-box" ).find( ".buttons" ).html( "" ); + if ( buttons ) { + $.each( buttons, function( name, value ) { + b.append( $( '<button/>' ).text( name ).click( value ) ); + b.append( " " ); + }); + b.show(); + } else { + b.hide(); + } + var b = $( ".dialog-box" ).find( ".extra_buttons" ).html( "" ); + if ( extra_buttons ) { + $.each( extra_buttons, function( name, value ) { + b.append( $( '<button/>' ).text( name ).click( value ) ); + b.append( " " ); + }); + b.show(); + } else { + b.hide(); + } + if ( body == "progress" ) { + body = $( "<img src='../images/yui/rel_interstitial_loading.gif')' />" ); + } + $( ".dialog-box" ).find( ".body" ).html( body ); + if ( ! $(".dialog-box-container").is( ":visible" ) ) { + $("#overlay").show(); + $(".dialog-box-container").fadeIn() + } +}; + +// Popup -- is this up to date? + function make_popupmenu( button_element, options ) { var menu_element = $( "<div class='popupmenu'><div class='popupmenu-top'><div class='popupmenu-top-inner'/></div></div>" ).appendTo( "body" ); $.each( options, function( k, v ) { diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.ui.scrollPanel.js --- a/static/scripts/galaxy.ui.scrollPanel.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/galaxy.ui.scrollPanel.js Fri Aug 22 17:47:43 2008 -0400 @@ -18,7 +18,7 @@ element_w = element.width(), element_h = element.height(), moved = false, - close = 5, + close_dist = 5, nudge = 23, // Legal panel range p_min_x = - ( panel_w - viewport_w ), @@ -34,21 +34,21 @@ mouse_x = ui.position.left + instance.offset.click.left; mouse_y = ui.position.top + instance.offset.click.top; // Move it - if ( ( panel_pos.left < p_max_x ) && ( mouse_x - close < min_vis_x ) ) { + if ( ( panel_pos.left < p_max_x ) && ( mouse_x - close_dist < min_vis_x ) ) { var t = Math.min( nudge, p_max_x - panel_pos.left ); panel.css( "left", panel_pos.left + t ); moved = true; instance.offset.parent.left += t; ui.position.left -= t } - if ( ( ! moved ) && ( panel_pos.left > p_min_x ) && ( mouse_x + close > max_vis_x ) ) { + if ( ( ! moved ) && ( panel_pos.left > p_min_x ) && ( mouse_x + close_dist > max_vis_x ) ) { var t = Math.min( nudge, panel_pos.left - p_min_x ); panel.css( "left", panel_pos.left - t ); moved = true; instance.offset.parent.left -= t; ui.position.left += t; } - if ( ( ! moved ) && ( panel_pos.top < p_max_y ) && ( mouse_y - close < min_vis_y ) ) { + if ( ( ! moved ) && ( panel_pos.top < p_max_y ) && ( mouse_y - close_dist < min_vis_y ) ) { var t = Math.min( nudge, p_max_y - panel_pos.top ); panel.css( "top", panel_pos.top + t ); // Firefox sometimes moves by less, so we need to check. Yuck. @@ -57,7 +57,7 @@ ui.position.top -= amount_moved; moved = true; } - if ( ( ! moved ) && ( panel_pos.top > p_min_y ) && ( mouse_y + close > max_vis_y ) ) { + if ( ( ! moved ) && ( panel_pos.top > p_min_y ) && ( mouse_y + close_dist > max_vis_y ) ) { var t = Math.min( nudge, panel_pos.top - p_min_x ); panel.css( "top", ( panel_pos.top - t ) + "px" ); // Firefox sometimes moves by less, so we need to check. Yuck. diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.workflow_editor.canvas.js --- a/static/scripts/galaxy.workflow_editor.canvas.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/galaxy.workflow_editor.canvas.js Fri Aug 22 17:47:43 2008 -0400 @@ -32,15 +32,16 @@ this.datatype = datatype; } -OutputTerminal.prototype.__proto__ = Terminal.prototype; +OutputTerminal.prototype = new Terminal; function InputTerminal( element, datatypes ) { Terminal.call( this, element ); this.datatypes = datatypes; } -InputTerminal.prototype = { - __proto__: Terminal.prototype, +InputTerminal.prototype = new Terminal; + +$.extend( InputTerminal.prototype, { can_accept: function ( other ) { if ( this.connectors.length < 1 ) { for ( t in this.datatypes ) { @@ -53,7 +54,7 @@ } return false; } -} +}); function Connector( handle1, handle2 ) { this.canvas = null; @@ -81,6 +82,10 @@ var canvas_container = $("#canvas-container"); if ( ! this.canvas ) { this.canvas = document.createElement( "canvas" ); + // excanvas specific hack + if ( window.G_vmlCanvasManager ) { + G_vmlCanvasManager.initElement( this.canvas ); + } canvas_container.append( $(this.canvas) ); if ( this.dragging ) { this.canvas.style.zIndex = "300" } } @@ -182,14 +187,14 @@ t.remove(); }))) .bind( "mouseleave", function() { - $(this).fadeOut( "fast", function() { $(this).remove() } ) + $(this).remove(); }); // Position it and show t.css( { top: $(this).offset().top - 2, left: $(this).offset().left - t.width(), 'padding-right': $(this).width() } - ).fadeIn( "fast" ); + ).show(); } }, function() {} @@ -272,12 +277,12 @@ var node = this; var b = f.find( ".toolFormBody" ); b.find( "div" ).remove(); - var ibox = $("<div class='inputs'/>").appendTo( b ); + var ibox = $("<div class='inputs'></div>").appendTo( b ); $.each( data.data_inputs, function( i, input ) { - t = $("<div class='terminal input-terminal'></div>") + var t = $("<div class='terminal input-terminal'></div>"); node.enable_input_terminal( t, input.name, input.extensions ); - ibox.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div></div>" ).prepend( t ) ); - }); + ibox.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div>" ).prepend( t ) ); + }); if ( ( data.data_inputs.length > 0 ) && ( data.data_outputs.length > 0 ) ) { b.append( $( "<div class='rule'></div>" ) ); } @@ -305,8 +310,8 @@ } // Update input rows var old_body = el.find( "div.inputs" ); - var new_body = $("<div class='inputs'/>"); - old = old_body.find( "div.input-data-row") + var new_body = $("<div class='inputs'></div>"); + var old = old_body.find( "div.input-data-row") $.each( data.data_inputs, function( i, input ) { var t = $("<div class='terminal input-terminal'></div>"); node.enable_input_terminal( t, input.name, input.extensions ); @@ -322,7 +327,7 @@ $(this).remove(); }); // Append to new body - new_body.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div></div>" ).prepend( t ) ); + new_body.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div>" ).prepend( t ) ); }); old_body.replaceWith( new_body ); // Cleanup any leftover terminals @@ -468,13 +473,21 @@ f.append( b ) // Fix width to computed width // Now add floats - var buttons = $("<div class='buttons' style='float: right'></div>"); - buttons.append( $("<img src='../images/delete_icon.png' />").click( function() { + var buttons = $("<div class='buttons' style='float: right;'></div>"); + buttons.append( $("<img src='../images/delete_icon.png' />").click( function( e ) { node.destroy(); } ).hover( function() { $(this).attr( 'src', "../images/delete_icon_dark.png" ) }, function() { $(this).attr( 'src', "../images/delete_icon.png" ) } ) ); + // zIndex tracking for bring to front + zmax = $("#canvas-container").data( "zmax" ) + if ( ! zmax ) { + zmax = 0; + } + f.css( "zIndex", zmax + 1 ); + $("#canvas-container").data( "zmax", zmax + 1 ); + // Place inside container f.appendTo( "#canvas-container" ); // Position in container var o = $("#canvas-container").position(); @@ -494,13 +507,16 @@ // containment: $("#shim"), // grow: true, click: function( e, ui ) { - var element = $(this).data("draggable").element.get(0); - (function(p) { p.removeChild( element ); p.appendChild( element ) })(element.parentNode) + // Bring to front + zmax = $("#canvas-container").data( "zmax" ) + $(this).css( "zIndex", zmax + 1 ); + $("#canvas-container").data( "zmax", zmax + 1 ); + // Make active workflow.activate_node( node ); }, start: function( e, ui ) { workflow.activate_node( node ); - $(this).css( 'z-index', '1000' ); + $(this).css( 'z-index', $("#canvas-container").data( "zmax" ) + 1000 ); }, drag: function( e, ui ) { $(this).find( ".terminal" ).each( function() { @@ -508,9 +524,11 @@ }) }, stop: function( e, ui ) { - var element = $(this).data("draggable").element.get(0); - (function(p) { p.removeChild( element ); p.appendChild( element ) })(element.parentNode) - $(this).css( 'z-index', '100' ); + // Bring to front + zmax = $("#canvas-container").data( "zmax" ) + $(this).css( "zIndex", zmax + 1 ); + $("#canvas-container").data( "zmax", zmax + 1 ); + // Redraw $(this).find( ".terminal" ).each( function() { this.terminal.redraw(); }); diff -r 6eac08f7edcf -r b671c301674a static/scripts/packed/galaxy.base.js --- a/static/scripts/packed/galaxy.base.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/packed/galaxy.base.js Fri Aug 22 17:47:43 2008 -0400 @@ -1,1 +1,1 @@ -jQuery(document).ready(function(){jQuery("a[@confirm]").click(function(){return confirm(jQuery(this).attr("confirm"))});jQuery("div[@popupmenu]").each(function(){var B={};$(this).find("a").each(function(){var C=$(this).attr("confirm"),D=$(this).attr("href"),E=$(this).attr("target");B[$(this).text()]=function(){if(!C||confirm(C)){var F=window;if(E=="_parent"){F=window.parent}F.location=D}}});var A=$("#"+$(this).attr("popupmenu"));make_popupmenu(A,B);$(this).remove();A.show()})});function ensure_popup_helper(){if($("#popup-helper").length==0){var A=$("<div id='popup-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 15000;'></div>");if($.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}}function make_popupmenu(D,B){ensure_popup_helper();var A=$("<div class='popupmenu'></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=functi on(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(F){var G=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.pageY-2,left:F.pageX-2});return false};$(D).click(E)}; \ No newline at end of file +jQuery(document).ready(function(){jQuery("a[@confirm]").click(function(){return confirm(jQuery(this).attr("confirm"))});jQuery("div[@popupmenu]").each(function(){var B={};$(this).find("a").each(function(){var C=$(this).attr("confirm"),D=$(this).attr("href"),E=$(this).attr("target");B[$(this).text()]=function(){if(!C||confirm(C)){var F=window;if(E=="_parent"){F=window.parent}F.location=D}}});var A=$("#"+$(this).attr("popupmenu"));make_popupmenu(A,B);$(this).remove();A.show()})});function ensure_popup_helper(){if($("#popup-helper").length==0){$("<div id='popup-helper'/>").css({background:"white",opacity:0,zIndex:15000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_popupmenu(D,B){ensure_popup_helper();var A=$("<div class='popupmenu'></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E =function(F){var G=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.pageY-2,left:F.pageX-2});return false};$(D).click(E)}; \ No newline at end of file diff -r 6eac08f7edcf -r b671c301674a static/scripts/packed/galaxy.panels.js --- a/static/scripts/packed/galaxy.panels.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/packed/galaxy.panels.js Fri Aug 22 17:47:43 2008 -0400 @@ -1,1 +1,1 @@ -var hidden_width=7;var border_tweak=9;var jq=jQuery;function ensure_dd_helper(){if(jq("#DD-helper").length==0){var A=jq("<div id='DD-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>");if(jq.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}}function make_left_panel(E,A,B){var D=false;var C=null;resize=function(F){var G=F;if(F<0){F=0}jq(E).css("width",F);jq(B).css("left",G);jq(A).css("left",F+7);if(document.recalc){document.recalc()}};toggle=function(){if(D){jq(B).removeClass("hover");jq(B).animate({left:C},"fast");jq(E).css("left",-C).show().animate({left:0},"fast",function(){resize(C);jq(B).removeClass("hidden")});D=false}else{C=jq(B).position().left;jq(A).css("left",hidden_width);if(document.recalc){document.recalc()}jq(B).removeClass("hover");jq(E).animate({left:-C},"fast");jq(B).animate({left:-1},"fast",function(){jq(this).addClass("hidden")});D=true}};jq(B).hover(function( ){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(F,G){jq("#DD-helper").show()},stop:function(F,G){jq("#DD-helper").hide();return false},drag:function(F,G){x=G.position.left;x=Math.min(400,Math.max(100,x));if(D){jq(E).css("left",0);jq(B).removeClass("hidden");D=false}resize(x);G.position.left=x;G.position.top=$(this).data("draggable").originalPosition.top},click:function(){toggle()}}).find("div").show()}function make_right_panel(A,E,G){var I=false;var F=false;var C=null;var D=function(J){jq(A).css("width",J);jq(E).css("right",J+9);jq(G).css("right",J).css("left","");if(document.recalc){document.recalc()}};var H=function(){if(I){jq(G).removeClass("hover");jq(G).animate({right:C},"fast");jq(A).css("right",-C).show().animate({right:0},"fast",function(){D(C);jq(G).removeClass("hidden")});I=false}else{C=jq(document).width()-jq(G).position().left-border_tweak;jq(E).css("right",hidden_width+1);if(document.recalc){document.recalc()}jq (G).removeClass("hover");jq(A).animate({right:-C},"fast");jq(G).animate({right:-1},"fast",function(){jq(this).addClass("hidden")});I=true}F=false};var B=function(J){var K=jq(E).width()-(I?C:0);if(K<J){if(!I){H();F=true}}else{if(F){H();F=false}}};jq(G).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(J,K){jq("#DD-helper").show()},stop:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);D(w-x-border_tweak);jq("#DD-helper").hide();return false},click:function(){H()},drag:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(I){jq(A).css("right",0);jq(G).removeClass("hidden");I=false}D(w-x-border_tweak);K.position.left=x;K.position.top=$(this).data("draggable").originalPosition.top}}).find("div").show();return{handle_minwidth_hint:B}}function make_popupmenu(D,B){var A=$("<div class='popupmenu'><div class='popupmenu-top'><div class='p opupmenu-top-inner'/></div></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(){var F=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.top+$(D).height()+9,left:F.left+$(D).width()-$(A).width()})};$(D).click(E)}; \ No newline at end of file +var hidden_width=7;var border_tweak=9;var jq=jQuery;function ensure_dd_helper(){if(jq("#DD-helper").length==0){$("<div id='DD-helper'/>").css({background:"white",opacity:0,zIndex:9000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_left_panel(E,A,B){var D=false;var C=null;resize=function(F){var G=F;if(F<0){F=0}jq(E).css("width",F);jq(B).css("left",G);jq(A).css("left",F+7);if(document.recalc){document.recalc()}};toggle=function(){if(D){jq(B).removeClass("hover");jq(B).animate({left:C},"fast");jq(E).css("left",-C).show().animate({left:0},"fast",function(){resize(C);jq(B).removeClass("hidden")});D=false}else{C=jq(B).position().left;jq(A).css("left",hidden_width);if(document.recalc){document.recalc()}jq(B).removeClass("hover");jq(E).animate({left:-C},"fast");jq(B).animate({left:-1},"fast",function(){jq(this).addClass("hidden")});D=true}};jq(B).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover" )}).draggable({start:function(F,G){jq("#DD-helper").show()},stop:function(F,G){jq("#DD-helper").hide();return false},drag:function(F,G){x=G.position.left;x=Math.min(400,Math.max(100,x));if(D){jq(E).css("left",0);jq(B).removeClass("hidden");D=false}resize(x);G.position.left=x;G.position.top=$(this).data("draggable").originalPosition.top},click:function(){toggle()}}).find("div").show()}function make_right_panel(A,E,G){var I=false;var F=false;var C=null;var D=function(J){jq(A).css("width",J);jq(E).css("right",J+9);jq(G).css("right",J).css("left","");if(document.recalc){document.recalc()}};var H=function(){if(I){jq(G).removeClass("hover");jq(G).animate({right:C},"fast");jq(A).css("right",-C).show().animate({right:0},"fast",function(){D(C);jq(G).removeClass("hidden")});I=false}else{C=jq(document).width()-jq(G).position().left-border_tweak;jq(E).css("right",hidden_width+1);if(document.recalc){document.recalc()}jq(G).removeClass("hover");jq(A).animate({right:-C},"fast");jq(G).anima te({right:-1},"fast",function(){jq(this).addClass("hidden")});I=true}F=false};var B=function(J){var K=jq(E).width()-(I?C:0);if(K<J){if(!I){H();F=true}}else{if(F){H();F=false}}};jq(G).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(J,K){jq("#DD-helper").show()},stop:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);D(w-x-border_tweak);jq("#DD-helper").hide();return false},click:function(){H()},drag:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(I){jq(A).css("right",0);jq(G).removeClass("hidden");I=false}D(w-x-border_tweak);K.position.left=x;K.position.top=$(this).data("draggable").originalPosition.top}}).find("div").show();return{handle_minwidth_hint:B}}function hide_modal(){$(".dialog-box-container").fadeOut(function(){$("#overlay").hide()})}function show_modal(E,B,D,C){$(".dialog-box").find(".title").html(E);var A=$(". dialog-box").find(".buttons").html("");if(D){$.each(D,function(F,G){A.append($("<button/>").text(F).click(G));A.append(" ")});A.show()}else{A.hide()}var A=$(".dialog-box").find(".extra_buttons").html("");if(C){$.each(C,function(F,G){A.append($("<button/>").text(F).click(G));A.append(" ")});A.show()}else{A.hide()}if(B=="progress"){B=$("<img src='../images/yui/rel_interstitial_loading.gif')' />")}$(".dialog-box").find(".body").html(B);if(!$(".dialog-box-container").is(":visible")){$("#overlay").show();$(".dialog-box-container").fadeIn()}}function make_popupmenu(D,B){var A=$("<div class='popupmenu'><div class='popupmenu-top'><div class='popupmenu-top-inner'/></div></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(){var F=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.top+ $(D).height()+9,left:F.left+$(D).width()-$(A).width()})};$(D).click(E)}; \ No newline at end of file diff -r 6eac08f7edcf -r b671c301674a static/scripts/packed/galaxy.workflow_editor.canvas.js --- a/static/scripts/packed/galaxy.workflow_editor.canvas.js Fri Aug 22 17:44:32 2008 -0400 +++ b/static/scripts/packed/galaxy.workflow_editor.canvas.js Fri Aug 22 17:47:43 2008 -0400 @@ -1,1 +1,1 @@ -function Terminal(A){this.element=A;this.connectors=[]}Terminal.prototype={connect:function(A){this.connectors.push(A);if(this.node){this.node.changed()}},disconnect:function(A){this.connectors.splice($.inArray(A,this.connectors),1);if(this.node){this.node.changed()}},redraw:function(){$.each(this.connectors,function(A,B){B.redraw()})},destroy:function(){$.each(this.connectors.slice(),function(A,B){B.destroy()})}};function OutputTerminal(A,B){Terminal.call(this,A);this.datatype=B}OutputTerminal.prototype.__proto__=Terminal.prototype;function InputTerminal(A,B){Terminal.call(this,A);this.datatypes=B}InputTerminal.prototype={__proto__:Terminal.prototype,can_accept:function(A){if(this.connectors.length<1){for(t in this.datatypes){if(A.datatype=="input"){return true}if(issubtype(A.datatype,this.datatypes[t])){return true}}}return false}};function Connector(B,A){this.canvas=null;this.dragging=false;this.inner_color="#FFFFFF";this.outer_color="#D8B365"}$.extend(Connector.prototype ,{connect:function(B,A){this.handle1=B;this.handle1.connect(this);this.handle2=A;this.handle2.connect(this)},destroy:function(){if(this.handle1){this.handle1.disconnect(this)}if(this.handle2){this.handle2.disconnect(this)}$(this.canvas).remove()},redraw:function(){var C=$("#canvas-container");if(!this.canvas){this.canvas=document.createElement("canvas");C.append($(this.canvas));if(this.dragging){this.canvas.style.zIndex="300"}}var L=function(S){return $(S).offset().left-C.offset().left};var G=function(S){return $(S).offset().top-C.offset().top};var F=L(this.handle1.element)+5;var E=G(this.handle1.element)+5;var N=L(this.handle2.element)+5;var K=G(this.handle2.element)+5;var D=100;var I=Math.min(F,N);var A=Math.max(F,N);var H=Math.min(E,K);var R=Math.max(E,K);var B=Math.min(Math.max(Math.abs(R-H)/2,100),300);var M=I-D;var Q=H-D;var O=A-I+2*D;var J=R-H+2*D;this.canvas.style.left=M+"px";this.canvas.style.top=Q+"px";this.canvas.setAttribute("width",O);this.canvas.setAttribute("h eight",J);F-=M;E-=Q;N-=M;K-=Q;var P=this.canvas.getContext("2d");P.lineCap="round";P.strokeStyle=this.outer_color;P.lineWidth=7;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke();P.strokeStyle=this.inner_color;P.lineWidth=5;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke()}});function Node(A){this.element=A;this.input_terminals={};this.output_terminals={};this.tool_errors={}}$.extend(Node.prototype,{enable_input_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new InputTerminal(this,B);D.node=node;D.name=A;$(this).droppable({tolerance:"intersect",accept:function(E){E=E.get(0);return(E.terminal)&&(D.can_accept(E.terminal))},activeClass:"input-terminal-active",over:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#BBFFBB"},out:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#FFFFFF"},drop:function(I,G){var E=$(this).data("droppable");var F=G.draggable.get(0).terminal;var H= E.element.get(0).terminal;var J=new Connector();J.connect(F,H);J.redraw()}});$(this).hoverIntent(function(){if(D.connectors.length>0){var E=$("<div class='callout'></div>").css({display:"none"}).appendTo("body").append($("<div class='buttons'></div>").append($("<img src='../images/delete_icon.png' />").click(function(){$.each(D.connectors,function(G,F){F.destroy()});E.remove()}))).bind("mouseleave",function(){$(this).fadeOut("fast",function(){$(this).remove()})});E.css({top:$(this).offset().top-2,left:$(this).offset().left-E.width(),"padding-right":$(this).width()}).fadeIn("fast")}},function(){});node.input_terminals[A]=D})},enable_output_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new OutputTerminal(this,B);D.node=node;D.name=A;$(this).draggable({scrollPanel:true,panel:$("#canvas-container"),helper:function(){var E=$('<div class="drag-terminal" style="position: absolute;"></div>').appendTo("#canvas-container").get(0);E.terminal=new OutputTerm inal(E);var F=new Connector();this.drag_temp_connector=F;F.dragging=true;F.connect(this.terminal,E.terminal);return E},drag:function(F,E){h=E.helper.get(0);h.terminal.redraw()},stop:function(F,E){this.drag_temp_connector.destroy()}});node.output_terminals[A]=D})},redraw:function(){$.each(this.input_terminals,function(A,B){B.redraw()});$.each(this.output_terminals,function(A,B){B.redraw()})},destroy:function(){$.each(this.input_terminals,function(A,B){B.destroy();$(B.element).droppable("destroy")});$.each(this.output_terminals,function(A,B){B.destroy();$(B.element).draggable("destroy")});$(this.element).draggable("destroy").remove();workflow.remove_node(this)},make_active:function(){$(this.element).addClass("toolForm-active")},make_inactive:function(){$(this.element).removeClass("toolForm-active")},init_field_data:function(D){var C=this.element;if(D.type){this.type=D.type}this.form_html=D.form_html;this.tool_state=D.tool_state;this.tool_errors=D.tool_errors;if(this.tool_error s){C.addClass("tool-node-error")}else{C.removeClass("tool-node-error")}var B=this;var A=C.find(".toolFormBody");A.find("div").remove();var E=$("<div class='inputs'/>").appendTo(A);$.each(D.data_inputs,function(G,F){t=$("<div class='terminal input-terminal'></div>");B.enable_input_terminal(t,F.name,F.extensions);E.append($("<div class='form-row dataRow input-data-row' name='"+F.name+"'>"+F.label+"</div></div>").prepend(t))});if((D.data_inputs.length>0)&&(D.data_outputs.length>0)){A.append($("<div class='rule'></div>"))}$.each(D.data_outputs,function(I,F){var H=$("<div class='terminal output-terminal'></div>");B.enable_output_terminal(H,F.name,F.extension);var G=F.name;if(F.extension!="input"){G=G+" ("+F.extension+")"}A.append($("<div class='form-row dataRow'>"+G+"</div>").append(H))});workflow.node_changed(this)},update_field_data:function(D){var B=$(this.element),C=this;this.tool_state=D.tool_state;this.form_html=D.form_html;this.tool_errors=D.tool_errors;if(this.tool_errors ){B.addClass("tool-node-error")}else{B.removeClass("tool-node-error")}var E=B.find("div.inputs");var A=$("<div class='inputs'/>");old=E.find("div.input-data-row");$.each(D.data_inputs,function(H,F){var G=$("<div class='terminal input-terminal'></div>");C.enable_input_terminal(G,F.name,F.extensions);E.find("div[name="+F.name+"]").each(function(){$(this).find(".input-terminal").each(function(){var I=this.terminal.connectors[0];if(I){G[0].terminal.connectors[0]=I;I.handle2=G[0].terminal}});$(this).remove()});A.append($("<div class='form-row dataRow input-data-row' name='"+F.name+"'>"+F.label+"</div></div>").prepend(G))});E.replaceWith(A);E.find("div.input-data-row > .terminal").each(function(){this.terminal.destroy()});this.changed();this.redraw()},error:function(C){var A=$(this.element).find(".toolFormBody");A.find("div").remove();var B="<div style='color: red; text-style: italic;'>"+C+"</div>";this.form_html=B;A.html(B);workflow.node_changed(this)},changed:function(){workflow .node_changed(this)}});function Workflow(){this.id_counter=0;this.nodes={};this.name=null;this.has_changes=false}$.extend(Workflow.prototype,{add_node:function(A){A.id=this.id_counter;this.id_counter++;this.nodes[A.id]=A;this.has_changes=true;A.workflow=this},remove_node:function(A){if(this.active_node==A){this.clear_active_node()}delete this.nodes[A.id];this.has_changes=true},remove_all:function(){wf=this;$.each(this.nodes,function(B,A){A.destroy();wf.remove_node(A)})},to_simple:function(){var A={};$.each(this.nodes,function(B,D){var E={};$.each(D.input_terminals,function(F,G){E[G.name]=null;$.each(G.connectors,function(H,I){E[G.name]={id:I.handle1.node.id,output_name:I.handle1.name}})});var C={id:D.id,type:D.type,tool_id:D.tool_id,tool_state:D.tool_state,tool_errors:D.tool_errors,input_connections:E,position:$(D.element).position()};A[D.id]=C});return{steps:A}},from_simple:function(A){wf=this;var B=0;wf.name=A.name;$.each(A.steps,function(E,D){var C=prebuild_node("tool",D. name,D.tool_id);C.init_field_data(D);if(D.position){C.element.css({top:D.position.top,left:D.position.left})}C.id=D.id;wf.nodes[C.id]=C;B=Math.max(B,parseInt(E))});wf.id_counter=B+1;$.each(A.steps,function(E,D){var C=wf.nodes[E];$.each(D.input_connections,function(G,F){if(F){var H=wf.nodes[F.id];var I=new Connector();I.connect(H.output_terminals[F.output_name],C.input_terminals[G]);I.redraw()}})})},clear_active_node:function(){if(this.active_node){this.active_node.make_inactive()}parent.show_form_for_tool("<div>No node selected</div>")},activate_node:function(A){this.clear_active_node();parent.show_form_for_tool(A.form_html,A);A.make_active();this.active_node=A},node_changed:function(A){this.has_changes=true;if(this.active_node==A){this.activate_node(A)}}});function prebuild_node(H,F,K){var E=$("<div class='toolForm toolFormInCanvas'></div>");var C=new Node(E);C.type=H;if(H=="tool"){C.tool_id=K}var J=$("<div class='toolFormTitle unselectable'>"+F+"</div>");E.append(J);E.css( "left",$(window).scrollLeft()+20);E.css("top",$(window).scrollTop()+20);var I=$("<div class='toolFormBody'></div>");var D="<div><img height='16' align='middle' src='../images/loading_small_white_bg.gif'/> loading tool info...</div>";I.append(D);C.form_html=D;E.append(I);var G=$("<div class='buttons' style='float: right'></div>");G.append($("<img src='../images/delete_icon.png' />").click(function(){C.destroy()}).hover(function(){$(this).attr("src","../images/delete_icon_dark.png")},function(){$(this).attr("src","../images/delete_icon.png")}));E.appendTo("#canvas-container");var B=$("#canvas-container").position();E.css({left:(-B.left)+10,top:(-B.top)+10});var A=E.width();G.prependTo(J);A+=(G.width()+10);E.css("width",A);$(E).draggable({cursor:"move",scrollPanel:true,panel:$("#canvas-container"),scrollSensitivity:10,scrollSpeed:20,click:function(N,M){var L=$(this).data("draggable").element.get(0);(function(O){O.removeChild(L);O.appendChild(L)})(L.parentNode);workflow.activate _node(C)},start:function(M,L){workflow.activate_node(C);$(this).css("z-index","1000")},drag:function(M,L){$(this).find(".terminal").each(function(){this.terminal.redraw()})},stop:function(N,M){var L=$(this).data("draggable").element.get(0);(function(O){O.removeChild(L);O.appendChild(L)})(L.parentNode);$(this).css("z-index","100");$(this).find(".terminal").each(function(){this.terminal.redraw()});workflow.node_changed(this)}});return C}var ext_to_type=null;var type_to_type=null;function issubtype(B,A){B=ext_to_type[B];A=ext_to_type[A];return(A in type_to_type[B])}function populate_datatype_info(A){ext_to_type=A.ext_to_class_name;type_to_type=A.class_to_classes}; \ No newline at end of file +function Terminal(A){this.element=A;this.connectors=[]}Terminal.prototype={connect:function(A){this.connectors.push(A);if(this.node){this.node.changed()}},disconnect:function(A){this.connectors.splice($.inArray(A,this.connectors),1);if(this.node){this.node.changed()}},redraw:function(){$.each(this.connectors,function(A,B){B.redraw()})},destroy:function(){$.each(this.connectors.slice(),function(A,B){B.destroy()})}};function OutputTerminal(A,B){Terminal.call(this,A);this.datatype=B}OutputTerminal.prototype=new Terminal;function InputTerminal(A,B){Terminal.call(this,A);this.datatypes=B}InputTerminal.prototype=new Terminal;$.extend(InputTerminal.prototype,{can_accept:function(A){if(this.connectors.length<1){for(t in this.datatypes){if(A.datatype=="input"){return true}if(issubtype(A.datatype,this.datatypes[t])){return true}}}return false}});function Connector(B,A){this.canvas=null;this.dragging=false;this.inner_color="#FFFFFF";this.outer_color="#D8B365"}$.extend(Connector.prototy pe,{connect:function(B,A){this.handle1=B;this.handle1.connect(this);this.handle2=A;this.handle2.connect(this)},destroy:function(){if(this.handle1){this.handle1.disconnect(this)}if(this.handle2){this.handle2.disconnect(this)}$(this.canvas).remove()},redraw:function(){var C=$("#canvas-container");if(!this.canvas){this.canvas=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(this.canvas)}C.append($(this.canvas));if(this.dragging){this.canvas.style.zIndex="300"}}var L=function(S){return $(S).offset().left-C.offset().left};var G=function(S){return $(S).offset().top-C.offset().top};var F=L(this.handle1.element)+5;var E=G(this.handle1.element)+5;var N=L(this.handle2.element)+5;var K=G(this.handle2.element)+5;var D=100;var I=Math.min(F,N);var A=Math.max(F,N);var H=Math.min(E,K);var R=Math.max(E,K);var B=Math.min(Math.max(Math.abs(R-H)/2,100),300);var M=I-D;var Q=H-D;var O=A-I+2*D;var J=R-H+2*D;this.canvas.style.left=M+"px";this.canvas.styl e.top=Q+"px";this.canvas.setAttribute("width",O);this.canvas.setAttribute("height",J);F-=M;E-=Q;N-=M;K-=Q;var P=this.canvas.getContext("2d");P.lineCap="round";P.strokeStyle=this.outer_color;P.lineWidth=7;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke();P.strokeStyle=this.inner_color;P.lineWidth=5;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke()}});function Node(A){this.element=A;this.input_terminals={};this.output_terminals={};this.tool_errors={}}$.extend(Node.prototype,{enable_input_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new InputTerminal(this,B);D.node=node;D.name=A;$(this).droppable({tolerance:"intersect",accept:function(E){E=E.get(0);return(E.terminal)&&(D.can_accept(E.terminal))},activeClass:"input-terminal-active",over:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#BBFFBB"},out:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#FFFFFF"},drop:function(I ,G){var E=$(this).data("droppable");var F=G.draggable.get(0).terminal;var H=E.element.get(0).terminal;var J=new Connector();J.connect(F,H);J.redraw()}});$(this).hoverIntent(function(){if(D.connectors.length>0){var E=$("<div class='callout'></div>").css({display:"none"}).appendTo("body").append($("<div class='buttons'></div>").append($("<img src='../images/delete_icon.png' />").click(function(){$.each(D.connectors,function(G,F){F.destroy()});E.remove()}))).bind("mouseleave",function(){$(this).remove()});E.css({top:$(this).offset().top-2,left:$(this).offset().left-E.width(),"padding-right":$(this).width()}).show()}},function(){});node.input_terminals[A]=D})},enable_output_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new OutputTerminal(this,B);D.node=node;D.name=A;$(this).draggable({scrollPanel:true,panel:$("#canvas-container"),helper:function(){var E=$('<div class="drag-terminal" style="position: absolute;"></div>').appendTo("#canvas-container"). get(0);E.terminal=new OutputTerminal(E);var F=new Connector();this.drag_temp_connector=F;F.dragging=true;F.connect(this.terminal,E.terminal);return E},drag:function(F,E){h=E.helper.get(0);h.terminal.redraw()},stop:function(F,E){this.drag_temp_connector.destroy()}});node.output_terminals[A]=D})},redraw:function(){$.each(this.input_terminals,function(A,B){B.redraw()});$.each(this.output_terminals,function(A,B){B.redraw()})},destroy:function(){$.each(this.input_terminals,function(A,B){B.destroy();$(B.element).droppable("destroy")});$.each(this.output_terminals,function(A,B){B.destroy();$(B.element).draggable("destroy")});$(this.element).draggable("destroy").remove();workflow.remove_node(this)},make_active:function(){$(this.element).addClass("toolForm-active")},make_inactive:function(){$(this.element).removeClass("toolForm-active")},init_field_data:function(D){var C=this.element;if(D.type){this.type=D.type}this.form_html=D.form_html;this.tool_state=D.tool_state;this.tool_errors= D.tool_errors;if(this.tool_errors){C.addClass("tool-node-error")}else{C.removeClass("tool-node-error")}var B=this;var A=C.find(".toolFormBody");A.find("div").remove();var E=$("<div class='inputs'></div>").appendTo(A);$.each(D.data_inputs,function(H,F){var G=$("<div class='terminal input-terminal'></div>");B.enable_input_terminal(G,F.name,F.extensions);E.append($("<div class='form-row dataRow input-data-row' name='"+F.name+"'>"+F.label+"</div>").prepend(G))});if((D.data_inputs.length>0)&&(D.data_outputs.length>0)){A.append($("<div class='rule'></div>"))}$.each(D.data_outputs,function(I,F){var H=$("<div class='terminal output-terminal'></div>");B.enable_output_terminal(H,F.name,F.extension);var G=F.name;if(F.extension!="input"){G=G+" ("+F.extension+")"}A.append($("<div class='form-row dataRow'>"+G+"</div>").append(H))});workflow.node_changed(this)},update_field_data:function(E){var C=$(this.element),D=this;this.tool_state=E.tool_state;this.form_html=E.form_html;this.tool_error s=E.tool_errors;if(this.tool_errors){C.addClass("tool-node-error")}else{C.removeClass("tool-node-error")}var F=C.find("div.inputs");var B=$("<div class='inputs'></div>");var A=F.find("div.input-data-row");$.each(E.data_inputs,function(I,G){var H=$("<div class='terminal input-terminal'></div>");D.enable_input_terminal(H,G.name,G.extensions);F.find("div[name="+G.name+"]").each(function(){$(this).find(".input-terminal").each(function(){var J=this.terminal.connectors[0];if(J){H[0].terminal.connectors[0]=J;J.handle2=H[0].terminal}});$(this).remove()});B.append($("<div class='form-row dataRow input-data-row' name='"+G.name+"'>"+G.label+"</div>").prepend(H))});F.replaceWith(B);F.find("div.input-data-row > .terminal").each(function(){this.terminal.destroy()});this.changed();this.redraw()},error:function(C){var A=$(this.element).find(".toolFormBody");A.find("div").remove();var B="<div style='color: red; text-style: italic;'>"+C+"</div>";this.form_html=B;A.html(B);workflow.node_change d(this)},changed:function(){workflow.node_changed(this)}});function Workflow(){this.id_counter=0;this.nodes={};this.name=null;this.has_changes=false}$.extend(Workflow.prototype,{add_node:function(A){A.id=this.id_counter;this.id_counter++;this.nodes[A.id]=A;this.has_changes=true;A.workflow=this},remove_node:function(A){if(this.active_node==A){this.clear_active_node()}delete this.nodes[A.id];this.has_changes=true},remove_all:function(){wf=this;$.each(this.nodes,function(B,A){A.destroy();wf.remove_node(A)})},to_simple:function(){var A={};$.each(this.nodes,function(B,D){var E={};$.each(D.input_terminals,function(F,G){E[G.name]=null;$.each(G.connectors,function(H,I){E[G.name]={id:I.handle1.node.id,output_name:I.handle1.name}})});var C={id:D.id,type:D.type,tool_id:D.tool_id,tool_state:D.tool_state,tool_errors:D.tool_errors,input_connections:E,position:$(D.element).position()};A[D.id]=C});return{steps:A}},from_simple:function(A){wf=this;var B=0;wf.name=A.name;$.each(A.steps,functio n(E,D){var C=prebuild_node("tool",D.name,D.tool_id);C.init_field_data(D);if(D.position){C.element.css({top:D.position.top,left:D.position.left})}C.id=D.id;wf.nodes[C.id]=C;B=Math.max(B,parseInt(E))});wf.id_counter=B+1;$.each(A.steps,function(E,D){var C=wf.nodes[E];$.each(D.input_connections,function(G,F){if(F){var H=wf.nodes[F.id];var I=new Connector();I.connect(H.output_terminals[F.output_name],C.input_terminals[G]);I.redraw()}})})},clear_active_node:function(){if(this.active_node){this.active_node.make_inactive()}parent.show_form_for_tool("<div>No node selected</div>")},activate_node:function(A){this.clear_active_node();parent.show_form_for_tool(A.form_html,A);A.make_active();this.active_node=A},node_changed:function(A){this.has_changes=true;if(this.active_node==A){this.activate_node(A)}}});function prebuild_node(H,F,K){var E=$("<div class='toolForm toolFormInCanvas'></div>");var C=new Node(E);C.type=H;if(H=="tool"){C.tool_id=K}var J=$("<div class='toolFormTitle unselectab le'>"+F+"</div>");E.append(J);E.css("left",$(window).scrollLeft()+20);E.css("top",$(window).scrollTop()+20);var I=$("<div class='toolFormBody'></div>");var D="<div><img height='16' align='middle' src='../images/loading_small_white_bg.gif'/> loading tool info...</div>";I.append(D);C.form_html=D;E.append(I);var G=$("<div class='buttons' style='float: right;'></div>");G.append($("<img src='../images/delete_icon.png' />").click(function(L){C.destroy()}).hover(function(){$(this).attr("src","../images/delete_icon_dark.png")},function(){$(this).attr("src","../images/delete_icon.png")}));zmax=$("#canvas-container").data("zmax");if(!zmax){zmax=0}E.css("zIndex",zmax+1);$("#canvas-container").data("zmax",zmax+1);E.appendTo("#canvas-container");var B=$("#canvas-container").position();E.css({left:(-B.left)+10,top:(-B.top)+10});var A=E.width();G.prependTo(J);A+=(G.width()+10);E.css("width",A);$(E).draggable({cursor:"move",scrollPanel:true,panel:$("#canvas-container"),scrollSensitivity:10, scrollSpeed:20,click:function(M,L){zmax=$("#canvas-container").data("zmax");$(this).css("zIndex",zmax+1);$("#canvas-container").data("zmax",zmax+1);workflow.activate_node(C)},start:function(M,L){workflow.activate_node(C);$(this).css("z-index",$("#canvas-container").data("zmax")+1000)},drag:function(M,L){$(this).find(".terminal").each(function(){this.terminal.redraw()})},stop:function(M,L){zmax=$("#canvas-container").data("zmax");$(this).css("zIndex",zmax+1);$("#canvas-container").data("zmax",zmax+1);$(this).find(".terminal").each(function(){this.terminal.redraw()});workflow.node_changed(this)}});return C}var ext_to_type=null;var type_to_type=null;function issubtype(B,A){B=ext_to_type[B];A=ext_to_type[A];return(A in type_to_type[B])}function populate_datatype_info(A){ext_to_type=A.ext_to_class_name;type_to_type=A.class_to_classes}; \ No newline at end of file diff -r 6eac08f7edcf -r b671c301674a templates/workflow/editor.mako --- a/templates/workflow/editor.mako Fri Aug 22 17:44:32 2008 -0400 +++ b/templates/workflow/editor.mako Fri Aug 22 17:47:43 2008 -0400 @@ -14,8 +14,11 @@ <%def name="javascripts()"> - ## ${parent.javascripts()} - + ${parent.javascripts()} + + <!--[if IE]> + <script type='text/javascript' src="/static/scripts/excanvas.js"> </script> + <![endif]--> <script type='text/javascript' src="/static/scripts/jquery.js"> </script> <script type='text/javascript' src="/static/scripts/jquery.ui.js"> </script> <script type='text/javascript' src="/static/scripts/galaxy.ui.scrollPanel.js"> </script> @@ -23,46 +26,6 @@ <script type='text/javascript' src="/static/scripts/jquery.form.js"> </script> <script type='text/javascript' src="/static/scripts/jquery.json.js"> </script> - <script type='text/javascript'> - /* Dialog and menu handling tools to be moved to galaxy.layout.js */ - - function hide_modal() { - $(".dialog-box-container" ).fadeOut( function() { $("#overlay").hide(); } ); - }; - - function show_modal( title, body, buttons, extra_buttons ) { - $( ".dialog-box" ).find( ".title" ).html( title ); - var b = $( ".dialog-box" ).find( ".buttons" ).html( "" ); - if ( buttons ) { - $.each( buttons, function( name, value ) { - b.append( $( '<button/>' ).text( name ).click( value ) ); - b.append( " " ); - }); - b.show(); - } else { - b.hide(); - } - var b = $( ".dialog-box" ).find( ".extra_buttons" ).html( "" ); - if ( extra_buttons ) { - $.each( extra_buttons, function( name, value ) { - b.append( $( '<button/>' ).text( name ).click( value ) ); - b.append( " " ); - }); - b.show(); - } else { - b.hide(); - } - if ( body == "progress" ) { - body = $( "<img src='${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}'/>" ); - } - $( ".dialog-box" ).find( ".body" ).html( body ); - if ( ! $(".dialog-box-container").is( ":visible" ) ) { - $("#overlay").show(); - $(".dialog-box-container").fadeIn() - } - }; - </script> - <script type='text/javascript' src="/static/scripts/galaxy.workflow_editor.canvas.js"> </script> <script type='text/javascript'> @@ -70,38 +33,34 @@ $( function() { // Initialize workflow state reset(); - // Shim (the background of the editor area) causes loss of focus - // $("#shim").click( workflow.clear_active_node ).hoverIntent( { - // over: function () { $("div.toolForm").fadeTo( "fast", 0.7 ) }, - // out: function () { $("div.toolForm").fadeTo( "fast", 1.0 ) }, - // interval: 300 - // }); // Load the datatype info - $.getJSON( "${h.url_for( action='get_datatypes' )}", function( data ) { - populate_datatype_info( data ); - // Load workflow definition - $.ajax( { - url: "${h.url_for( action='load_workflow' )}", - data: { id: "${trans.security.encode_id( workflow_id )}", "_": "true" }, - dataType: 'json', - success: function( data ) { - reset(); - workflow.from_simple( data ); - workflow.has_changes = false; - scroll_to_nodes(); - hide_modal(); - }, - beforeSubmit: function( data ) { - show_modal( "Loading workflow", "progress" ); - } - }); + $.ajax( { + url: "${h.url_for( action='get_datatypes' )}", + dataType: "json", + cache: false, + success: function( data ) { + populate_datatype_info( data ); + // Load workflow definition + $.ajax( { + url: "${h.url_for( action='load_workflow' )}", + data: { id: "${trans.security.encode_id( workflow_id )}", "_": "true" }, + dataType: 'json', + cache: false, + success: function( data ) { + reset(); + workflow.from_simple( data ); + workflow.has_changes = false; + scroll_to_nodes(); + hide_modal(); + }, + beforeSubmit: function( data ) { + show_modal( "Loading workflow", "progress" ); + } + }); + } }); $(document).ajaxError( function ( e, x ) { - // $("#error-display").empty() - // .append( $("<div/>").html( x.responseText ) ) - // .append( $("<div><a>close</a></div>" ).click( function() { $("#error-display").hide(); } ) ) - // .show(); show_modal( "Server error", x.responseText, { "Ignore error" : hide_modal } ); return false; }); @@ -272,7 +231,7 @@ save_current_workflow( do_close ); } }, { - "Don't Save": do_close, + "Don't Save": do_close } ); } else { window.document.location = "${next_url}" @@ -410,20 +369,10 @@ margin: 5px; } - #error-display { - display: none; - position: fixed; - top: 5%; left: 5%; width: 90%; height: 90%; - border: solid red 10px; - background: #FFDDDD; - z-index: 50000; - overflow: auto; - } - canvas { position: absolute; z-index: 10; } canvas.dragging { position: absolute; z-index: 1000; } - .input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; left: -16px; z-index: 1500; } - .output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; right: -16px; z-index: 1500; } + .input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; top: 0; left: -16px; z-index: 1500; } + .output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; top: 0; right: -16px; z-index: 1500; } .drag-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_drag.png')}); position: absolute; z-index: 1500; } .input-terminal-active { background: url(${h.url_for('/static/style/workflow_circle_green.png')}); } ## .input-terminal-hover { background: yellow; border: solid black 1px; } @@ -504,13 +453,11 @@ </style> </%def> - -<div id="error-display"></div> <div id="overlay"> ## Need a table here for centering in IE6 <table class="dialog-box-container" border="0" cellpadding="0" cellspacing="0"><tr><td> - <div style="position: relative;"> + <div class="dialog-box-wrapper"> <div class="dialog-box"> <div class="unified-panel-header"> <div class="unified-panel-header-inner"><span class='title'>Loading workflow editor...</span></div> @@ -522,7 +469,6 @@ <div style="clear: both;"></div> </div> </div> - <div class="dialog-box-underlay"></div> </div> </td></tr></table> </div> @@ -558,9 +504,9 @@ %if "[[" in tool.description and "]]" in tool.description: ${tool.description.replace( '[[', '<a id="link-${tool.id}" href="javascript:add_node_for_tool( ${tool.id} )">' % tool.id ).replace( "]]", "</a>" )} %elif tool.name: - <a id="link-${tool.id}" href="javascript:add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.name}</a> ${tool.description} + <a id="link-${tool.id}" href="#" onclick="add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.name}</a> ${tool.description} %else: - <a id="link-${tool.id}" href="javascript:add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.description}</a> + <a id="link-${tool.id}" href="#" onclick="add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.description}</a> %endif </div> %else: @@ -588,7 +534,7 @@ <div id="__workflow__input__" class="toolSectionBody"> <div class="toolSectionBg"> <div class="toolTitle"> - <a href="javascript:add_node_for_module( 'data_input', 'Input Dataset' )">Input dataset</a> + <a href="#" onclick="add_node_for_module( 'data_input', 'Input Dataset' )">Input dataset</a> </div> </div> </div> diff -r 6eac08f7edcf -r b671c301674a templates/workflow/index.mako --- a/templates/workflow/index.mako Fri Aug 22 17:44:32 2008 -0400 +++ b/templates/workflow/index.mako Fri Aug 22 17:47:43 2008 -0400 @@ -21,16 +21,15 @@ </div> %endif -<div> - <div style="float: right;"> - <a class="action-button" href="${h.url_for( action='create' )}"> - <img src="${h.url_for('/static/images/silk/add.png')}" /> - <span>Add a new workflow</span> - </a> - </div> - <h2>Your workflows</h2> +<h2>Your workflows</h2> + +<div style="float: right; margin-top: -2.5em;"> + <a class="action-button" href="${h.url_for( action='create' )}"> + <img src="${h.url_for('/static/images/silk/add.png')}" /> + <span>Add a new workflow</span> + </a> </div> - + %if workflows: <table class="colored" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr class="header">