").addClass("fa-icon-button fa fa-times").click( function( e ) {
node.destroy();
}));
// Place inside container
f.appendTo( "#canvas-container" );
// Position in container
var o = $("#canvas-container").position();
var p = $("#canvas-container").parent();
var width = f.width();
var height = f.height();
f.css( { left: ( - o.left ) + ( p.width() / 2 ) - ( width / 2 ), top: ( - o.top ) + ( p.height() / 2 ) - ( height / 2 ) } );
buttons.prependTo( title );
width += ( buttons.width() + 10 );
f.css( "width", width );
$(f).bind( "dragstart", function() {
workflow.activate_node( node );
}).bind( "dragend", function() {
workflow.node_changed( this );
workflow.fit_canvas_to_nodes();
canvas_manager.draw_overview();
}).bind( "dragclickonly", function() {
workflow.activate_node( node );
}).bind( "drag", function( e, d ) {
// Move
var po = $(this).offsetParent().offset(),
x = d.offsetX - po.left,
y = d.offsetY - po.top;
$(this).css( { left: x, top: y } );
// Redraw
$(this).find( ".terminal" ).each( function() {
this.terminal.redraw();
});
});
return node;
}
function add_node( type, title_text, tool_id ) {
// Abstraction for use by galaxy.workflow.js to hide
// some editor details from workflow code and reduce duplication
// between add_node_for_tool and add_node_for_module.
var node = prebuild_node( type, title_text, tool_id );
workflow.add_node( node );
workflow.fit_canvas_to_nodes();
canvas_manager.draw_overview();
workflow.activate_node( node );
return node;
}
var ext_to_type = null;
var type_to_type = null;
function issubtype( child, parent ) {
child = ext_to_type[child];
parent = ext_to_type[parent];
return ( type_to_type[child] ) && ( parent in type_to_type[child] );
}
function populate_datatype_info( data ) {
ext_to_type = data.ext_to_class_name;
type_to_type = data.class_to_classes;
}
//////////////
// START VIEWS
//////////////
var NodeView = Backbone.View.extend( {
initialize: function( options ){
this.node = options.node;
this.output_width = Math.max(150, this.$el.width());
this.tool_body = this.$el.find( ".toolFormBody" );
this.tool_body.find( "div" ).remove();
this.newInputsDiv().appendTo( this.tool_body );
this.terminalViews = {};
this.outputTerminlViews = {};
},
render : function() {
this.renderToolErrors();
this.$el.css( "width", Math.min(250, Math.max(this.$el.width(), this.output_width )));
},
renderToolErrors: function( ) {
if ( this.node.tool_errors ) {
this.$el.addClass( "tool-node-error" );
} else {
this.$el.removeClass( "tool-node-error" );
}
},
newInputsDiv: function() {
return $("
");
},
updateMaxWidth: function( newWidth ) {
this.output_width = Math.max( this.output_width, newWidth );
},
addRule: function() {
this.tool_body.append( $( "
" ) );
},
addDataInput: function( input, body ) {
var skipResize = true;
if( ! body ) {
body = this.$( ".inputs" );
// initial addition to node - resize input to help calculate node
// width.
skipResize = false;
}
var terminalView = this.terminalViews[ input.name ];
var terminalViewClass = ( input.input_type == "dataset_collection" ) ? InputCollectionTerminalView : InputTerminalView;
if( terminalView && ! ( terminalView instanceof terminalViewClass ) ) {
terminalView.el.terminal.destroy();
terminalView = null;
}
if( ! terminalView ) {
terminalView = new terminalViewClass( {
node: this.node,
input: input
} );
} else {
var terminal = terminalView.el.terminal;
terminal.update( input );
terminal.destroyInvalidConnections();
}
this.terminalViews[ input.name ] = terminalView;
var terminalElement = terminalView.el;
var inputView = new DataInputView( {
terminalElement: terminalElement,
input: input,
nodeView: this,
skipResize: skipResize
} );
var ib = inputView.$el;
// Append to new body
body.append( ib.prepend( terminalView.terminalElements() ) );
return terminalView;
},
addDataOutput: function( output ) {
var terminalViewClass = ( output.collection_type ) ? OutputCollectionTerminalView : OutputTerminalView;
var terminalView = new terminalViewClass( {
node: this.node,
output: output
} );
var outputView = new DataOutputView( {
"output": output,
"terminalElement": terminalView.el,
"nodeView": this,
} );
this.tool_body.append( outputView.$el.append( terminalView.terminalElements() ) );
},
updateDataOutput: function( output ) {
var outputTerminal = this.node.output_terminals[ output.name ];
outputTerminal.update( output );
}
} );
var DataInputView = Backbone.View.extend( {
className: "form-row dataRow input-data-row",
initialize: function( options ){
this.input = options.input;
this.nodeView = options.nodeView;
this.terminalElement = options.terminalElement;
this.$el.attr( "name", this.input.name )
.html( this.input.label );
if( ! options.skipResize ) {
this.$el.css({ position:'absolute',
left: -1000,
top: -1000,
display:'none'});
$('body').append(this.el);
this.nodeView.updateMaxWidth( this.$el.outerWidth() );
this.$el.css({ position:'',
left:'',
top:'',
display:'' });
this.$el.remove();
}
},
} );
var OutputCalloutView = Backbone.View.extend( {
tagName: "div",
initialize: function( options ) {
this.label = options.label;
this.node = options.node;
this.output = options.output;
var view = this;
this.$el
.attr( "class", 'callout '+this.label )
.css( { display: 'none' } )
.append(
$("
").append(
$("
![]()
").attr('src', galaxy_config.root + 'static/images/fugue/asterisk-small-outline.png').click( function() {
if ($.inArray(view.output.name, view.node.workflow_outputs) != -1){
view.node.workflow_outputs.splice($.inArray(view.output.name, view.node.workflow_outputs), 1);
view.$('img').attr('src', galaxy_config.root + 'static/images/fugue/asterisk-small-outline.png');
}else{
view.node.workflow_outputs.push(view.output.name);
view.$('img').attr('src', galaxy_config.root + 'static/images/fugue/asterisk-small.png');
}
workflow.has_changes = true;
canvas_manager.draw_overview();
})))
.tooltip({delay:500, title: "Mark dataset as a workflow output. All unmarked datasets will be hidden." });
this.$el.css({
top: '50%',
margin:'-8px 0px 0px 0px',
right: 8
});
this.$el.show();
this.resetImage();
},
resetImage: function() {
if ($.inArray( this.output.name, this.node.workflow_outputs) === -1){
this.$('img').attr('src', galaxy_config.root + 'static/images/fugue/asterisk-small-outline.png');
} else{
this.$('img').attr('src', galaxy_config.root + 'static/images/fugue/asterisk-small.png');
}
},
hoverImage: function() {
this.$('img').attr('src', galaxy_config.root + 'static/images/fugue/asterisk-small-yellow.png');
}
} );
var DataOutputView = Backbone.View.extend( {
className: "form-row dataRow",
initialize: function( options ) {
this.output = options.output;
this.terminalElement = options.terminalElement;
this.nodeView = options.nodeView;
var output = this.output;
var label = output.name;
var node = this.nodeView.node;
var isInput = output.extensions.indexOf( 'input' ) >= 0 || output.extensions.indexOf( 'input_collection' ) >= 0;
if ( ! isInput ) {
label = label + " (" + output.extensions.join(", ") + ")";
}
this.$el.html( label )
if (node.type == 'tool'){
var calloutView = new OutputCalloutView( {
"label": label,
"output": output,
"node": node,
});
this.$el.append( calloutView.el );
this.$el.hover( function() { calloutView.hoverImage() }, function() { calloutView.resetImage() } );
}
this.$el.css({ position:'absolute',
left: -1000,
top: -1000,
display:'none'});
$('body').append( this.el );
this.nodeView.updateMaxWidth( this.$el.outerWidth() + 17 );
this.$el.css({ position:'',
left:'',
top:'',
display:'' })
.detach();
}
} );
var TerminalView = Backbone.View.extend( {
setupMappingView: function( terminal ) {
var terminalMapping = new this.terminalMappingClass( { terminal: terminal } );
var terminalMappingView = new this.terminalMappingViewClass( { model: terminalMapping } );
terminalMappingView.render();
terminal.terminalMappingView = terminalMappingView;
this.terminalMappingView = terminalMappingView;
},
terminalElements: function() {
if( this.terminalMappingView ) {
return [ this.terminalMappingView.el, this.el ];
} else{
return [ this.el ];
}
}
} );
var BaseInputTerminalView = TerminalView.extend( {
className: "terminal input-terminal",
initialize: function( options ) {
var node = options.node;
var input = options.input;
var name = input.name;
var terminal = this.terminalForInput( input );
if( ! terminal.multiple ) {
this.setupMappingView( terminal );
}
this.el.terminal = terminal;
terminal.node = node;
terminal.name = name;
node.input_terminals[name] = terminal;
},
events: {
"dropinit": "onDropInit",
"dropstart": "onDropStart",
"dropend": "onDropEnd",
"drop": "onDrop",
"hover": "onHover",
},
onDropInit: function( e, d ) {
var terminal = this.el.terminal;
// Accept a dragable if it is an output terminal and has a
// compatible type
return $(d.drag).hasClass( "output-terminal" ) && terminal.canAccept( d.drag.terminal );
},
onDropStart: function( e, d ) {
if (d.proxy.terminal) {
d.proxy.terminal.connectors[0].inner_color = "#BBFFBB";
}
},
onDropEnd: function ( e, d ) {
if (d.proxy.terminal) {
d.proxy.terminal.connectors[0].inner_color = "#FFFFFF";
}
},
onDrop: function( e, d ) {
var terminal = this.el.terminal;
new Connector( d.drag.terminal, terminal ).redraw();
},
onHover: function() {
var element = this.el;
var terminal = element.terminal;
// If connected, create a popup to allow disconnection
if ( terminal.connectors.length > 0 ) {
// Create callout
var t = $("
")
.css( { display: 'none' } )
.appendTo( "body" )
.append(
$("
").append(
$("
").addClass("fa-icon-button fa fa-times").click( function() {
$.each( terminal.connectors, function( _, x ) {
if (x) {
x.destroy();
}
});
t.remove();
})))
.bind( "mouseleave", function() {
$(this).remove();
});
// Position it and show
t.css({
top: $(element).offset().top - 2,
left: $(element).offset().left - t.width(),
'padding-right': $(element).width()
}).show();
}
},
} );
var InputTerminalView = BaseInputTerminalView.extend( {
terminalMappingClass: InputTerminalMapping,
terminalMappingViewClass: InputTerminalMappingView,
terminalForInput: function( input ) {
return new InputTerminal( { element: this.el, input: input } );
},
} );
var InputCollectionTerminalView = BaseInputTerminalView.extend( {
terminalMappingClass: InputCollectionTerminalMapping,
terminalMappingViewClass: InputCollectionTerminalMappingView,
terminalForInput: function( input ) {
return new InputCollectionTerminal( { element: this.el, input: input } );
},
} );
var BaseOutputTerminalView = TerminalView.extend( {
className: "terminal output-terminal",
initialize: function( options ) {
var node = options.node;
var output = options.output;
var name = output.name;
var terminal = this.terminalForOutput( output );
this.setupMappingView( terminal );
this.el.terminal = terminal;
terminal.node = node;
terminal.name = name;
node.output_terminals[name] = terminal;
},
events: {
"drag": "onDrag",
"dragstart": "onDragStart",
"dragend": "onDragEnd",
},
onDrag: function ( e, d ) {
var onmove = function() {
var po = $(d.proxy).offsetParent().offset(),
x = d.offsetX - po.left,
y = d.offsetY - po.top;
$(d.proxy).css( { left: x, top: y } );
d.proxy.terminal.redraw();
// FIXME: global
canvas_manager.update_viewport_overlay();
};
onmove();
$("#canvas-container").get(0).scroll_panel.test( e, onmove );
},
onDragStart: function( e, d ) {
$( d.available ).addClass( "input-terminal-active" );
// Save PJAs in the case of change datatype actions.
workflow.check_changes_in_active_form();
// Drag proxy div
var h = $( '
' )
.appendTo( "#canvas-container" ).get(0);
// Terminal and connection to display noodle while dragging
h.terminal = new OutputTerminal( { element: h } );
var c = new Connector();
c.dragging = true;
c.connect( this.el.terminal, h.terminal );
return h;
},
onDragEnd: function ( e, d ) {
var connector = d.proxy.terminal.connectors[0];
// check_changes_in_active_form may change the state and cause a
// the connection to have already been destroyed. There must be better
// ways to handle this but the following check fixes some serious GUI
// bugs for now.
if(connector) {
connector.destroy();
}
$(d.proxy).remove();
$( d.available ).removeClass( "input-terminal-active" );
$("#canvas-container").get(0).scroll_panel.stop();
}
} );
var OutputTerminalView = BaseOutputTerminalView.extend( {
terminalMappingClass: OutputTerminalMapping,
terminalMappingViewClass: OutputTerminalMappingView,
terminalForOutput: function( output ) {
var type = output.extensions;
var terminal = new OutputTerminal( { element: this.el, datatypes: type } );
return terminal;
},
} );
var OutputCollectionTerminalView = BaseOutputTerminalView.extend( {
terminalMappingClass: OutputCollectionTerminalMapping,
terminalMappingViewClass: OutputCollectionTerminalMappingView,
terminalForOutput: function( output ) {
var collection_type = output.collection_type;
var terminal = new OutputCollectionTerminal( { element: this.el, collection_type: collection_type, datatypes: output.extensions } );
return terminal;
},
} );
////////////
// END VIEWS
////////////
// FIXME: merge scroll panel into CanvasManager, clean up hardcoded stuff.
function ScrollPanel( panel ) {
this.panel = panel;
}
$.extend( ScrollPanel.prototype, {
test: function( e, onmove ) {
clearTimeout( this.timeout );
var x = e.pageX,
y = e.pageY,
// Panel size and position
panel = $(this.panel),
panel_pos = panel.position(),
panel_w = panel.width(),
panel_h = panel.height(),
// Viewport size and offset
viewport = panel.parent(),
viewport_w = viewport.width(),
viewport_h = viewport.height(),
viewport_offset = viewport.offset(),
// Edges of viewport (in page coordinates)
min_x = viewport_offset.left,
min_y = viewport_offset.top,
max_x = min_x + viewport.width(),
max_y = min_y + viewport.height(),
// Legal panel range
p_min_x = - ( panel_w - ( viewport_w / 2 ) ),
p_min_y = - ( panel_h - ( viewport_h / 2 )),
p_max_x = ( viewport_w / 2 ),
p_max_y = ( viewport_h / 2 ),
// Did the panel move?
moved = false,
// Constants
close_dist = 5,
nudge = 23;
if ( x - close_dist < min_x ) {
if ( panel_pos.left < p_max_x ) {
var t = Math.min( nudge, p_max_x - panel_pos.left );
panel.css( "left", panel_pos.left + t );
moved = true;
}
} else if ( x + close_dist > max_x ) {
if ( panel_pos.left > p_min_x ) {
var t = Math.min( nudge, panel_pos.left - p_min_x );
panel.css( "left", panel_pos.left - t );
moved = true;
}
} else if ( y - close_dist < min_y ) {
if ( panel_pos.top < p_max_y ) {
var t = Math.min( nudge, p_max_y - panel_pos.top );
panel.css( "top", panel_pos.top + t );
moved = true;
}
} else if ( y + close_dist > max_y ) {
if ( panel_pos.top > p_min_y ) {
var t = Math.min( nudge, panel_pos.top - p_min_x );
panel.css( "top", ( panel_pos.top - t ) + "px" );
moved = true;
}
}
if ( moved ) {
// Keep moving even if mouse doesn't move
onmove();
var panel = this;
this.timeout = setTimeout( function() { panel.test( e, onmove ); }, 50 );
}
},
stop: function( e, ui ) {
clearTimeout( this.timeout );
}
});
function CanvasManager( canvas_viewport, overview ) {
this.cv = canvas_viewport;
this.cc = this.cv.find( "#canvas-container" );
this.oc = overview.find( "#overview-canvas" );
this.ov = overview.find( "#overview-viewport" );
// Make overview box draggable
this.init_drag();
}
$.extend( CanvasManager.prototype, {
init_drag : function () {
var self = this;
var move = function( x, y ) {
x = Math.min( x, self.cv.width() / 2 );
x = Math.max( x, - self.cc.width() + self.cv.width() / 2 );
y = Math.min( y, self.cv.height() / 2 );
y = Math.max( y, - self.cc.height() + self.cv.height() / 2 );
self.cc.css( {
left: x,
top: y
});
self.cv.css( { "background-position-x": x,
"background-position-y": y
});
self.update_viewport_overlay();
};
// Dragging within canvas background
this.cc.each( function() {
this.scroll_panel = new ScrollPanel( this );
});
var x_adjust, y_adjust;
this.cv.bind( "dragstart", function() {
var o = $(this).offset();
var p = self.cc.position();
y_adjust = p.top - o.top;
x_adjust = p.left - o.left;
}).bind( "drag", function( e, d ) {
move( d.offsetX + x_adjust, d.offsetY + y_adjust );
}).bind( "dragend", function() {
workflow.fit_canvas_to_nodes();
self.draw_overview();
});
// Dragging for overview pane
this.ov.bind( "drag", function( e, d ) {
var in_w = self.cc.width(),
in_h = self.cc.height(),
o_w = self.oc.width(),
o_h = self.oc.height(),
p = $(this).offsetParent().offset(),
new_x_offset = d.offsetX - p.left,
new_y_offset = d.offsetY - p.top;
move( - ( new_x_offset / o_w * in_w ),
- ( new_y_offset / o_h * in_h ) );
}).bind( "dragend", function() {
workflow.fit_canvas_to_nodes();
self.draw_overview();
});
// Dragging for overview border (resize)
$("#overview-border").bind( "drag", function( e, d ) {
var op = $(this).offsetParent();
var opo = op.offset();
var new_size = Math.max( op.width() - ( d.offsetX - opo.left ),
op.height() - ( d.offsetY - opo.top ) );
$(this).css( {
width: new_size,
height: new_size
});
self.draw_overview();
});
/* Disable dragging for child element of the panel so that resizing can
only be done by dragging the borders */
$("#overview-border div").bind("drag", function() { });
},
update_viewport_overlay: function() {
var cc = this.cc,
cv = this.cv,
oc = this.oc,
ov = this.ov,
in_w = cc.width(),
in_h = cc.height(),
o_w = oc.width(),
o_h = oc.height(),
cc_pos = cc.position();
ov.css( {
left: - ( cc_pos.left / in_w * o_w ),
top: - ( cc_pos.top / in_h * o_h ),
// Subtract 2 to account for borders (maybe just change box sizing style instead?)
width: ( cv.width() / in_w * o_w ) - 2,
height: ( cv.height() / in_h * o_h ) - 2
});
},
draw_overview: function() {
var canvas_el = $("#overview-canvas"),
size = canvas_el.parent().parent().width(),
c = canvas_el.get(0).getContext("2d"),
in_w = $("#canvas-container").width(),
in_h = $("#canvas-container").height();
var o_h, shift_h, o_w, shift_w;
// Fit canvas into overview area
var cv_w = this.cv.width();
var cv_h = this.cv.height();
if ( in_w < cv_w && in_h < cv_h ) {
// Canvas is smaller than viewport
o_w = in_w / cv_w * size;
shift_w = ( size - o_w ) / 2;
o_h = in_h / cv_h * size;
shift_h = ( size - o_h ) / 2;
} else if ( in_w < in_h ) {
// Taller than wide
shift_h = 0;
o_h = size;
o_w = Math.ceil( o_h * in_w / in_h );
shift_w = ( size - o_w ) / 2;
} else {
// Wider than tall
o_w = size;
shift_w = 0;
o_h = Math.ceil( o_w * in_h / in_w );
shift_h = ( size - o_h ) / 2;
}
canvas_el.parent().css( {
left: shift_w,
top: shift_h,
width: o_w,
height: o_h
});
canvas_el.attr( "width", o_w );
canvas_el.attr( "height", o_h );
// Draw overview
$.each( workflow.nodes, function( id, node ) {
c.fillStyle = "#D2C099";
c.strokeStyle = "#D8B365";
c.lineWidth = 1;
var node_element = $(node.element),
position = node_element.position(),
x = position.left / in_w * o_w,
y = position.top / in_h * o_h,
w = node_element.width() / in_w * o_w,
h = node_element.height() / in_h * o_h;
if (node.tool_errors){
c.fillStyle = "#FFCCCC";
c.strokeStyle = "#AA6666";
} else if (node.workflow_outputs != undefined && node.workflow_outputs.length > 0){
c.fillStyle = "#E8A92D";
c.strokeStyle = "#E8A92D";
}
c.fillRect( x, y, w, h );
c.strokeRect( x, y, w, h );
});
this.update_viewport_overlay();
}
});
![](" + galaxy_config.root + "static/images/loading_small_white_bg.gif){kind=small}
loading tool info...