add copy&paste feature

client/galaxy/scripts/mvc/workflow/workflow-canvas.js

@@ -7,6 +7,8 @@ function CanvasManager(app, canvas_viewport, overview) {
     this.ov = overview.find("#overview-viewport");
     // Make overview box draggable
     this.init_drag();
+    // Initialize Copy & Paste events
+    this.init_copy_paste();
 }
 $.extend(CanvasManager.prototype, {
     init_drag: function() {
@@ -96,6 +98,27 @@ $.extend(CanvasManager.prototype, {
                 only be done by dragging the borders */
         $("#overview-border div").bind("drag", () => {});
     },
+    init_copy_paste: function() {
+        document.addEventListener('copy', (e) => {
+            if (this.app.workflow.active_node) {
+                e.clipboardData.setData('application/json', JSON.stringify({
+                    nodeId: this.app.workflow.active_node.id
+                }));
+            }
+            e.preventDefault();
+        });
+
+        document.addEventListener('paste', (e) => {
+            var nodeId;
+            try {
+                nodeId = JSON.parse(e.clipboardData.getData('application/json')).nodeId;
+            } catch (error) {}
+            if (nodeId && this.app.workflow.nodes.hasOwnProperty(nodeId)) {
+                this.app.workflow.nodes[nodeId].clone();
+            }
+            e.preventDefault();
+        });
+    },
     update_viewport_overlay: function() {
         var cc = this.cc;
         var cv = this.cv;

static/scripts/mvc/workflow/workflow-canvas.js

@@ -1 +1 @@
-define("mvc/workflow/workflow-canvas",["exports"],function(t){"use strict";function i(t,i,e){this.app=t,this.cv=i,this.cc=this.cv.find("#canvas-container"),this.overview=e,this.oc=e.find("#overview-canvas"),this.ov=e.find("#overview-viewport"),this.init_drag()}function e(t){this.panel=t}Object.defineProperty(t,"__esModule",{value:!0}),$.extend(i.prototype,{init_drag:function(){var t=this,i=function(i,e){i=Math.min(i,t.cv.width()/2),i=Math.max(i,-t.cc.width()+t.cv.width()/2),e=Math.min(e,t.cv.height()/2),e=Math.max(e,-t.cc.height()+t.cv.height()/2),t.cc.css({left:i,top:e}),t.cv.css({"background-position-x":i,"background-position-y":e}),t.update_viewport_overlay()};this.cc.each(function(){this.scroll_panel=new e(this)});var o,h;this.cv.bind("dragstart",function(){var i=$(this).offset(),e=t.cc.position();h=e.top-i.top,o=e.left-i.left}).bind("drag",function(t,e){i(e.offsetX+o,e.offsetY+h)}).bind("dragend",function(){t.app.workflow.fit_canvas_to_nodes(),t.draw_overview()}),this.overview.click(function(e){if(t.overview.hasClass("blockaclick"))t.overview.removeClass("blockaclick");else{var o=t.cc.width(),h=t.cc.height(),s=t.oc.width(),c=t.oc.height(),n=e.pageX-t.oc.offset().left-t.ov.width()/2,a=e.pageY-t.oc.offset().top-t.ov.height()/2;i(-n/s*o,-a/c*h),t.app.workflow.fit_canvas_to_nodes(),t.draw_overview()}}),this.ov.bind("drag",function(e,o){var h=t.cc.width(),s=t.cc.height(),c=t.oc.width(),n=t.oc.height(),a=o.offsetX-t.overview.offset().left,f=o.offsetY-t.overview.offset().top;i(-a/c*h,-f/n*s)}).bind("dragend",function(){t.overview.addClass("blockaclick"),t.app.workflow.fit_canvas_to_nodes(),t.draw_overview()}),$("#overview-border").bind("drag",function(i,e){var o=$(this).offsetParent(),h=o.offset(),s=Math.max(o.width()-(e.offsetX-h.left),o.height()-(e.offsetY-h.top));$(this).css({width:s,height:s}),t.draw_overview()}),$("#overview-border div").bind("drag",function(){})},update_viewport_overlay:function(){var t=this.cc,i=this.cv,e=this.oc,o=this.ov,h=t.width(),s=t.height(),c=e.width(),n=e.height(),a=t.position();o.css({left:-a.left/h*c,top:-a.top/s*n,width:i.width()/h*c-2,height:i.height()/s*n-2})},draw_overview:function(){var t,i,e,o,h=$("#overview-canvas"),s=h.parent().parent().width(),c=h.get(0).getContext("2d"),n=$("#canvas-container").width(),a=$("#canvas-container").height(),f=this.cv.width(),r=this.cv.height();n<f&&a<r?(o=(s-(e=n/f*s))/2,i=(s-(t=a/r*s))/2):n<a?(i=0,t=s,o=(s-(e=Math.ceil(t*n/a)))/2):(e=s,o=0,i=(s-(t=Math.ceil(e*a/n)))/2),h.parent().css({left:o,top:i,width:e,height:t}),h.attr("width",e),h.attr("height",t),$.each(this.app.workflow.nodes,function(i,o){c.fillStyle="#D2C099",c.strokeStyle="#D8B365",c.lineWidth=1;var h=$(o.element),s=h.position(),f=s.left/n*e,r=s.top/a*t,v=h.width()/n*e,l=h.height()/a*t;o.errors?(c.fillStyle="#FFCCCC",c.strokeStyle="#AA6666"):void 0!==o.workflow_outputs&&o.workflow_outputs.length>0&&(c.fillStyle="#E8A92D",c.strokeStyle="#E8A92D"),c.fillRect(f,r,v,l),c.strokeRect(f,r,v,l)}),this.update_viewport_overlay()}}),$.extend(e.prototype,{test:function(t,i){clearTimeout(this.timeout);var e=t.pageX,o=t.pageY,h=(b=$(this.panel)).position(),s=b.width(),c=b.height(),n=b.parent(),a=n.width(),f=n.height(),r=n.offset(),v=r.left,l=r.top,d=v+n.width(),w=l+n.height(),p=-(s-a/2),g=-(c-f/2),u=a/2,_=f/2,k=!1;if(e-5<v){if(h.left<u){m=Math.min(23,u-h.left);b.css("left",h.left+m),k=!0}}else if(e+5>d){if(h.left>p){m=Math.min(23,h.left-p);b.css("left",h.left-m),k=!0}}else if(o-5<l){if(h.top<_){m=Math.min(23,_-h.top);b.css("top",h.top+m),k=!0}}else if(o+5>w&&h.top>g){var m=Math.min(23,h.top-p);b.css("top",h.top-m+"px"),k=!0}if(k){i();var b=this;this.timeout=setTimeout(function(){b.test(t,i)},50)}},stop:function(t,i){clearTimeout(this.timeout)}}),t.default=i});
+define("mvc/workflow/workflow-canvas",["exports"],function(t){"use strict";function e(t,e,i){this.app=t,this.cv=e,this.cc=this.cv.find("#canvas-container"),this.overview=i,this.oc=i.find("#overview-canvas"),this.ov=i.find("#overview-viewport"),this.init_drag(),this.init_copy_paste()}function i(t){this.panel=t}Object.defineProperty(t,"__esModule",{value:!0}),$.extend(e.prototype,{init_drag:function(){var t=this,e=function(e,i){e=Math.min(e,t.cv.width()/2),e=Math.max(e,-t.cc.width()+t.cv.width()/2),i=Math.min(i,t.cv.height()/2),i=Math.max(i,-t.cc.height()+t.cv.height()/2),t.cc.css({left:e,top:i}),t.cv.css({"background-position-x":e,"background-position-y":i}),t.update_viewport_overlay()};this.cc.each(function(){this.scroll_panel=new i(this)});var o,a;this.cv.bind("dragstart",function(){var e=$(this).offset(),i=t.cc.position();a=i.top-e.top,o=i.left-e.left}).bind("drag",function(t,i){e(i.offsetX+o,i.offsetY+a)}).bind("dragend",function(){t.app.workflow.fit_canvas_to_nodes(),t.draw_overview()}),this.overview.click(function(i){if(t.overview.hasClass("blockaclick"))t.overview.removeClass("blockaclick");else{var o=t.cc.width(),a=t.cc.height(),n=t.oc.width(),s=t.oc.height(),c=i.pageX-t.oc.offset().left-t.ov.width()/2,h=i.pageY-t.oc.offset().top-t.ov.height()/2;e(-c/n*o,-h/s*a),t.app.workflow.fit_canvas_to_nodes(),t.draw_overview()}}),this.ov.bind("drag",function(i,o){var a=t.cc.width(),n=t.cc.height(),s=t.oc.width(),c=t.oc.height(),h=o.offsetX-t.overview.offset().left,r=o.offsetY-t.overview.offset().top;e(-h/s*a,-r/c*n)}).bind("dragend",function(){t.overview.addClass("blockaclick"),t.app.workflow.fit_canvas_to_nodes(),t.draw_overview()}),$("#overview-border").bind("drag",function(e,i){var o=$(this).offsetParent(),a=o.offset(),n=Math.max(o.width()-(i.offsetX-a.left),o.height()-(i.offsetY-a.top));$(this).css({width:n,height:n}),t.draw_overview()}),$("#overview-border div").bind("drag",function(){})},init_copy_paste:function(){var t=this;document.addEventListener("copy",function(e){t.app.workflow.active_node&&e.clipboardData.setData("application/json",JSON.stringify({nodeId:t.app.workflow.active_node.id})),e.preventDefault()}),document.addEventListener("paste",function(e){var i;try{i=JSON.parse(e.clipboardData.getData("application/json")).nodeId}catch(t){}i&&t.app.workflow.nodes.hasOwnProperty(i)&&t.app.workflow.nodes[i].clone(),e.preventDefault()})},update_viewport_overlay:function(){var t=this.cc,e=this.cv,i=this.oc,o=this.ov,a=t.width(),n=t.height(),s=i.width(),c=i.height(),h=t.position();o.css({left:-h.left/a*s,top:-h.top/n*c,width:e.width()/a*s-2,height:e.height()/n*c-2})},draw_overview:function(){var t,e,i,o,a=$("#overview-canvas"),n=a.parent().parent().width(),s=a.get(0).getContext("2d"),c=$("#canvas-container").width(),h=$("#canvas-container").height(),r=this.cv.width(),f=this.cv.height();c<r&&h<f?(o=(n-(i=c/r*n))/2,e=(n-(t=h/f*n))/2):c<h?(e=0,t=n,o=(n-(i=Math.ceil(t*c/h)))/2):(i=n,o=0,e=(n-(t=Math.ceil(i*h/c)))/2),a.parent().css({left:o,top:e,width:i,height:t}),a.attr("width",i),a.attr("height",t),$.each(this.app.workflow.nodes,function(e,o){s.fillStyle="#D2C099",s.strokeStyle="#D8B365",s.lineWidth=1;var a=$(o.element),n=a.position(),r=n.left/c*i,f=n.top/h*t,v=a.width()/c*i,d=a.height()/h*t;o.errors?(s.fillStyle="#FFCCCC",s.strokeStyle="#AA6666"):void 0!==o.workflow_outputs&&o.workflow_outputs.length>0&&(s.fillStyle="#E8A92D",s.strokeStyle="#E8A92D"),s.fillRect(r,f,v,d),s.strokeRect(r,f,v,d)}),this.update_viewport_overlay()}}),$.extend(i.prototype,{test:function(t,e){clearTimeout(this.timeout);var i=t.pageX,o=t.pageY,a=(y=$(this.panel)).position(),n=y.width(),s=y.height(),c=y.parent(),h=c.width(),r=c.height(),f=c.offset(),v=f.left,d=f.top,p=v+c.width(),l=d+c.height(),w=-(n-h/2),u=-(s-r/2),g=h/2,_=r/2,k=!1;if(i-5<v){if(a.left<g){m=Math.min(23,g-a.left);y.css("left",a.left+m),k=!0}}else if(i+5>p){if(a.left>w){m=Math.min(23,a.left-w);y.css("left",a.left-m),k=!0}}else if(o-5<d){if(a.top<_){m=Math.min(23,_-a.top);y.css("top",a.top+m),k=!0}}else if(o+5>l&&a.top>u){var m=Math.min(23,a.top-w);y.css("top",a.top-m+"px"),k=!0}if(k){e();var y=this;this.timeout=setTimeout(function(){y.test(t,e)},50)}},stop:function(t,e){clearTimeout(this.timeout)}}),t.default=e});