Changeset 1479:b671c301674a

Timestamp:

08/22/08 17:47:43 (3 months ago)

Author:

James Taylor <james@jamestaylor.org>

branch:

default

Message:

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!

Files:

• static/june_2007_style/base.css.tmpl (modified) (1 diff)
• static/june_2007_style/blue/base.css (modified) (1 diff)
• static/june_2007_style/blue/panel_layout.css (modified) (2 diffs)
• static/june_2007_style/panel_layout.css.tmpl (modified) (2 diffs)
• static/scripts/galaxy.base.js (modified) (1 diff)
• static/scripts/galaxy.panels.js (modified) (2 diffs)
• static/scripts/galaxy.ui.scrollPanel.js (modified) (5 diffs)
• static/scripts/galaxy.workflow_editor.canvas.js (modified) (13 diffs)
• static/scripts/packed/galaxy.base.js (modified) (1 diff)
• static/scripts/packed/galaxy.panels.js (modified) (1 diff)
• static/scripts/packed/galaxy.workflow_editor.canvas.js (modified) (1 diff)
• templates/workflow/editor.mako (modified) (9 diffs)
• templates/workflow/index.mako (modified) (1 diff)

static/june_2007_style/base.css.tmpl

@@ -359 +359 @@
-    display: inline-block;
-    cursor: pointer;
-margin: -1px; 
+
-    border: solid #aaaaaa 1px;
-    padding-right: 0.5em;

static/june_2007_style/blue/base.css

@@ -357 +357 @@
-    display: inline-block;
-    cursor: pointer;
-margin: -1px; 
+
-    border: solid #aaaaaa 1px;
-    padding-right: 0.5em;

static/june_2007_style/blue/panel_layout.css

@@ -245 +245 @@
-    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 {
@@ -260 +252 @@
-    margin-left: auto;
-}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-    -moz-border-radius: 1em;
-    -webkit-border-radius: 1em;

static/june_2007_style/panel_layout.css.tmpl

@@ -245 +245 @@
-}
-
-#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;
@@ -260 +251 @@
-    margin-left: auto;
-}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-    -moz-border-radius: 1em;
-    -webkit-border-radius: 1em;

static/scripts/galaxy.base.js

@@ -30 +30 @@
-    // And the helper below the popup menus
-    if ( $( "#popup-helper" ).length == 0 ) {
-
-
-
-
-
-
-
+
+
+
+
-    }
-}

static/scripts/galaxy.panels.js

@@ -7 +7 @@
-    // Insert div that covers everything when dragging the borders
-    if ( jq( "#DD-helper" ).length == 0 ) {
-
-
-
-
-
-
-
+
+
+
+
-    }
-}
@@ -180 +177 @@
-};
-
+// 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" );

static/scripts/galaxy.ui.scrollPanel.js

@@ -19 +19 @@
-            element_h = element.height(),
-            moved = false,
-
+_dist
-            nudge = 23,
-            // Legal panel range
@@ -35 +35 @@
-            mouse_y = ui.position.top + instance.offset.click.top;
-        // Move it
-
+_dist
-            var t = Math.min( nudge, p_max_x - panel_pos.left );
-            panel.css( "left", panel_pos.left + t );
@@ -42 +42 @@
-            ui.position.left -= t
-        }
-
+_dist
-            var t = Math.min( nudge, panel_pos.left  - p_min_x );
-            panel.css( "left", panel_pos.left - t );
@@ -49 +49 @@
-            ui.position.left += t;      
-        }
-
+_dist
-            var t = Math.min( nudge, p_max_y - panel_pos.top );
-            panel.css( "top", panel_pos.top + t );
@@ -58 +58 @@
-            moved = true;
-        }
-
+_dist
-            var t = Math.min( nudge, panel_pos.top  - p_min_x );
-            panel.css( "top", ( panel_pos.top - t ) + "px" );

static/scripts/galaxy.workflow_editor.canvas.js

@@ -33 +33 @@
-}
-
-.__proto__ = Terminal.prototype
+ = new Terminal
-
-function InputTerminal( element, datatypes ) {
@@ -40 +40 @@
-}
-
-
-
+
+
+
-    can_accept: function ( other ) {
-        if ( this.connectors.length < 1 ) {
@@ -54 +55 @@
-        return false;
-    }
-
+);
-
-function Connector( handle1, handle2 ) {
@@ -82 +83 @@
-        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" }
@@ -183 +188 @@
-                                    })))
-                            .bind( "mouseleave", function() {
-fadeOut( "fast", function() { $(this).remove() } )
+remove();
-                            });
-                        // Position it and show
@@ -190 +195 @@
-                                left: $(this).offset().left - t.width(),
-                                'padding-right': $(this).width() }
-fadeIn( "fast" 
+show(
-                    }
-                },
@@ -273 +278 @@
-        var b = f.find( ".toolFormBody" );
-        b.find( "div" ).remove();
-/
+></div
-        $.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 );
-</div>
-        
+
+
-        if ( ( data.data_inputs.length > 0 ) && ( data.data_outputs.length > 0 ) ) {
-            b.append( $( "<div class='rule'></div>" ) );
@@ -306 +311 @@
-        // Update input rows
-        var old_body = el.find( "div.inputs" );
-/
-
+></div
+var 
-        $.each( data.data_inputs, function( i, input ) {
-            var t = $("<div class='terminal input-terminal'></div>");
@@ -323 +328 @@
-            });
-            // Append to new body
-</div>
+
-        });
-        old_body.replaceWith( new_body );
@@ -469 +474 @@
-    // Fix width to computed width
-    // Now add floats
-
-) { 
+;
+ e ) {
-        node.destroy();
-    } ).hover( 
@@ -476 +481 @@
-        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
@@ -495 +508 @@
-        // grow: true,
-        click: function( e, ui ) {
-
-
+
+
+
+
+
-            workflow.activate_node( node );
-        },
-        start: function( e, ui ) {
-            workflow.activate_node( node );
-'1000'
+$("#canvas-container").data( "zmax" ) + 1000
-        },
-        drag: function( e, ui ) { 
@@ -509 +525 @@
-        },
-        stop: function( e, ui  ) {
-
-
-
+
+
+
+
+
-            $(this).find( ".terminal" ).each( function() {
-                this.terminal.redraw();

static/scripts/packed/galaxy.base.js

@@ -1 @@
-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
+$("<div id='popup-helper'/>").css({background:"white",opacity:0,zIndex:15000,position:"absolute",top:0,left:0,width:"100%",height:"100%"})

static/scripts/packed/galaxy.panels.js

@@ -1 @@
-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
+$("<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).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 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()

static/scripts/packed/galaxy.workflow_editor.canvas.js

@@ -1 @@
-.__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("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).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 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'/>").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"
+=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.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");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.style.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_errors=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_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(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

templates/workflow/editor.mako

@@ -15 +15 @@
-<%def name="javascripts()">
-    
-
-
+
+
+
+
+
-    <script type='text/javascript' src="/static/scripts/jquery.js"> </script>
-    <script type='text/javascript' src="/static/scripts/jquery.ui.js"> </script>
@@ -24 +27 @@
-    <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>
-    
@@ -71 +34 @@
-        // 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        });
-        
-        $(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;
@@ -273 +232 @@
-                            }
-                        }, {
-,
+
-                        } );
-        } else {
@@ -411 +370 @@
-    }
-    
-    #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; }
-bottom
-bottom
+top
+top
-    .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')}); }
@@ -505 +454 @@
-    </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>
-style="position: relative;
+class="dialog-box-wrapper
-        <div class="dialog-box">
-            <div class="unified-panel-header">
@@ -523 +470 @@
-            </div>
-        </div>
-        <div class="dialog-box-underlay"></div>
-    </div>
-    </td></tr></table>
@@ -559 +505 @@
-                                        ${tool.description.replace( '[[', '<a id="link-${tool.id}" href="javascript:add_node_for_tool( ${tool.id} )">' % tool.id ).replace( "]]", "</a>" )}
-                                    %elif tool.name:
-javascript:
+#" onclick="
-                                    %else:
-javascript:
+#" onclick="
-                                    %endif
-                                </div>
@@ -589 +535 @@
-                <div class="toolSectionBg">
-                    <div class="toolTitle">
-javascript:
+#" onclick="
-                    </div>
-                </div>

templates/workflow/index.mako

@@ -22 +22 @@
-%endif
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-</div>
-
+
-%if workflows:
-    <table class="colored" border="0" cellspacing="0" cellpadding="0" width="100%">