From 4b47ed9056f716fec412d79ee49567a97dc63bfa Mon Sep 17 00:00:00 2001 From: tamat Date: Fri, 19 Mar 2021 20:56:14 +0100 Subject: [PATCH] added viewport rendering --- build/litegraph.js | 35 ++++++++++-------- build/litegraph.min.js | 82 +++++++++++++++++++++--------------------- editor/js/code.js | 3 ++ src/litegraph.js | 35 ++++++++++-------- 4 files changed, 86 insertions(+), 69 deletions(-) diff --git a/build/litegraph.js b/build/litegraph.js index 9d3cf23b8..65a220b2f 100644 --- a/build/litegraph.js +++ b/build/litegraph.js @@ -4449,7 +4449,7 @@ LGraphNode.prototype.executeAction = function(action) element.addEventListener("wheel", this._binded_mouse_callback, false); }; - DragAndScale.prototype.computeVisibleArea = function() { + DragAndScale.prototype.computeVisibleArea = function( viewport ) { if (!this.element) { this.visible_area[0] = this.visible_area[1] = this.visible_area[2] = this.visible_area[3] = 0; return; @@ -4458,6 +4458,13 @@ LGraphNode.prototype.executeAction = function(action) var height = this.element.height; var startx = -this.offset[0]; var starty = -this.offset[1]; + if( viewport ) + { + startx += viewport[0] / this.scale; + starty += viewport[1] / this.scale; + width = viewport[2]; + height = viewport[3]; + } var endx = startx + width / this.scale; var endy = starty + height / this.scale; this.visible_area[0] = startx; @@ -4642,7 +4649,7 @@ LGraphNode.prototype.executeAction = function(action) * @constructor * @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas element itself) * @param {LGraph} graph [optional] - * @param {Object} options [optional] { skip_rendering, autoresize } + * @param {Object} options [optional] { skip_rendering, autoresize, viewport } */ function LGraphCanvas(canvas, graph, options) { options = options || {}; @@ -4737,6 +4744,8 @@ LGraphNode.prototype.executeAction = function(action) this.visible_area = this.ds.visible_area; this.visible_links = []; + this.viewport = options.viewport || null; //to constraint render area to a portion of the canvas + //link canvas and graph if (graph) { graph.attachCanvas(this); @@ -6757,7 +6766,7 @@ LGraphNode.prototype.executeAction = function(action) this.last_draw_time = now; if (this.graph) { - this.ds.computeVisibleArea(); + this.ds.computeVisibleArea(this.viewport); } if ( @@ -6806,15 +6815,11 @@ LGraphNode.prototype.executeAction = function(action) ctx.setTransform(1, 0, 0, 1, 0, 0); //clip dirty area if there is one, otherwise work in full canvas - if (this.dirty_area) { + var area = this.viewport || this.dirty_area; + if (area) { ctx.save(); ctx.beginPath(); - ctx.rect( - this.dirty_area[0], - this.dirty_area[1], - this.dirty_area[2], - this.dirty_area[3] - ); + ctx.rect( area[0],area[1],area[2],area[3] ); ctx.clip(); } @@ -6838,7 +6843,7 @@ LGraphNode.prototype.executeAction = function(action) //info widget if (this.show_info) { - this.renderInfo(ctx); + this.renderInfo(ctx, area ? area[0] : 0, area ? area[1] : 0 ); } if (this.graph) { @@ -6981,9 +6986,8 @@ LGraphNode.prototype.executeAction = function(action) this.onDrawOverlay(ctx); } - if (this.dirty_area) { + if (area) { ctx.restore(); - //this.dirty_area = null; } if (ctx.finish2D) { @@ -7179,11 +7183,14 @@ LGraphNode.prototype.executeAction = function(action) ctx.start(); } + var viewport = this.viewport || [0,0,ctx.canvas.width,ctx.canvas.height]; + //clear if (this.clear_background) { - ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.clearRect( viewport[0], viewport[1], viewport[2], viewport[3] ); } + //show subgraph stack header if (this._graph_stack && this._graph_stack.length) { ctx.save(); var parent_graph = this._graph_stack[this._graph_stack.length - 1]; diff --git a/build/litegraph.min.js b/build/litegraph.min.js index 8482dc5b9..97eb83661 100644 --- a/build/litegraph.min.js +++ b/build/litegraph.min.js @@ -2,10 +2,10 @@ [0,0];this.element=null;this.visible_area=new Float32Array(4);a&&(this.element=a,b||this.bindEvents(a))}function h(a,b,d){d=d||{};this.background_image=h.DEFAULT_BACKGROUND_IMAGE;a&&a.constructor===String&&(a=document.querySelector(a));this.ds=new t;this.zoom_modify_alpha=!0;this.title_text_font=""+e.NODE_TEXT_SIZE+"px Arial";this.inner_text_font="normal "+e.NODE_SUBTEXT_SIZE+"px Arial";this.node_title_color=e.NODE_TITLE_COLOR;this.default_link_color=e.LINK_COLOR;this.default_connection_color={input_off:"#778", input_on:"#7F7",output_off:"#778",output_on:"#7F7"};this.highquality_render=!0;this.use_gradients=!1;this.editor_alpha=1;this.pause_rendering=!1;this.clear_background=!0;this.read_only=!1;this.render_only_selected=!0;this.live_mode=!1;this.allow_searchbox=this.allow_interaction=this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.drag_mode=this.align_to_grid=this.allow_reconnect_links=!1;this.filter=this.dragging_rectangle=null;this.set_canvas_dirty_on_mouse_event=!0;this.always_render_background= !1;this.render_canvas_border=this.render_shadows=!0;this.render_connections_shadows=!1;this.render_connections_border=!0;this.render_connection_arrows=this.render_curved_connections=!1;this.render_collapsed_slots=!0;this.render_execution_order=!1;this.render_link_tooltip=this.render_title_colored=!0;this.links_render_mode=e.SPLINE_LINK;this.mouse=[0,0];this.canvas_mouse=this.graph_mouse=[0,0];this.onAfterChange=this.onBeforeChange=this.onConnectingChange=this.onSelectionChange=this.onNodeMoved=this.onDrawLinkTooltip= -this.onDrawOverlay=this.onDrawForeground=this.onDrawBackground=this.onMouse=this.onSearchBoxSelection=this.onSearchBox=null;this.connections_width=3;this.round_radius=8;this.over_link_center=this.node_widget=this.current_node=null;this.last_mouse_position=[0,0];this.visible_area=this.ds.visible_area;this.visible_links=[];b&&b.attachCanvas(this);this.setCanvas(a);this.clear();d.skip_render||this.startRendering();this.autoresize=d.autoresize}function C(a,b){return Math.sqrt((b[0]-a[0])*(b[0]-a[0])+ -(b[1]-a[1])*(b[1]-a[1]))}function y(a,b,d,g,f,e){return da&&gb?!0:!1}function G(a,b){var d=a[0]+a[2],g=a[1]+a[3],f=b[1]+b[3];return a[0]>b[0]+b[2]||a[1]>f||da&&gb?!0:!1}function G(a,b){var d=a[0]+a[2],g=a[1]+a[3],f=b[1]+b[3];return a[0]>b[0]+b[2]||a[1]>f||dr.width-x.width- 10&&(m=r.width-x.width-10);r.height&&f>r.height-x.height-10&&(f=r.height-x.height-10)}e.style.left=m+"px";e.style.top=f+"px";b.scale&&(e.style.transform="scale("+b.scale+")")}function D(a){this.points=a;this.nearest=this.selected=-1;this.size=null;this.must_update=!0;this.margin=5}var e=B.LiteGraph={VERSION:0.4,CANVAS_GRID_SIZE:10,NODE_TITLE_HEIGHT:30,NODE_TITLE_TEXT_Y:20,NODE_SLOT_HEIGHT:20,NODE_WIDGET_HEIGHT:20,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,NODE_TITLE_COLOR:"#999", @@ -96,12 +96,12 @@ function(a){this.graph._version++;if(!1!==this.constructor.collapsable||a)this.f h.node_colors.pale_blue.groupcolor:"#AAA";this._bounding=new Float32Array([10,10,140,80]);this._pos=this._bounding.subarray(0,2);this._size=this._bounding.subarray(2,4);this._nodes=[];this.graph=null;Object.defineProperty(this,"pos",{set:function(a){!a||2>a.length||(this._pos[0]=a[0],this._pos[1]=a[1])},get:function(){return this._pos},enumerable:!0});Object.defineProperty(this,"size",{set:function(a){!a||2>a.length||(this._size[0]=Math.max(140,a[0]),this._size[1]=Math.max(80,a[1]))},get:function(){return this._size}, enumerable:!0})};s.prototype.configure=function(a){this.title=a.title;this._bounding.set(a.bounding);this.color=a.color;this.font=a.font};s.prototype.serialize=function(){var a=this._bounding;return{title:this.title,bounding:[Math.round(a[0]),Math.round(a[1]),Math.round(a[2]),Math.round(a[3])],color:this.color,font:this.font}};s.prototype.move=function(a,b,d){this._pos[0]+=a;this._pos[1]+=b;if(!d)for(d=0;dthis.max_scale&&(a=this.max_scale);if(a!=this.scale&&this.element){var d=this.element.getBoundingClientRect();if(d){b=b||[0.5*d.width,0.5*d.height];d=this.convertCanvasToOffset(b);this.scale=a;0.01>Math.abs(this.scale-1)&&(this.scale= -1);var g=this.convertCanvasToOffset(b),d=[g[0]-d[0],g[1]-d[1]];this.offset[0]+=d[0];this.offset[1]+=d[1];if(this.onredraw)this.onredraw(this)}}};t.prototype.changeDeltaScale=function(a,b){this.changeScale(this.scale*a,b)};t.prototype.reset=function(){this.scale=1;this.offset[0]=0;this.offset[1]=0};B.LGraphCanvas=e.LGraphCanvas=h;h.DEFAULT_BACKGROUND_IMAGE="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII="; +this._binded_mouse_callback);a.addEventListener("mousewheel",this._binded_mouse_callback,!1);a.addEventListener("wheel",this._binded_mouse_callback,!1)};t.prototype.computeVisibleArea=function(a){if(this.element){var b=this.element.width,d=this.element.height,g=-this.offset[0],f=-this.offset[1];a&&(g+=a[0]/this.scale,f+=a[1]/this.scale,b=a[2],d=a[3]);a=g+b/this.scale;d=f+d/this.scale;this.visible_area[0]=g;this.visible_area[1]=f;this.visible_area[2]=a-g;this.visible_area[3]=d-f}else this.visible_area[0]= +this.visible_area[1]=this.visible_area[2]=this.visible_area[3]=0};t.prototype.onMouse=function(a){if(this.enabled){var b=this.element,d=b.getBoundingClientRect(),g=a.clientX-d.left,d=a.clientY-d.top;a.canvasx=g;a.canvasy=d;a.dragging=this.dragging;var f=!1;this.onmouse&&(f=this.onmouse(a));if("mousedown"==a.type)this.dragging=!0,b.removeEventListener("mousemove",this._binded_mouse_callback),document.body.addEventListener("mousemove",this._binded_mouse_callback),document.body.addEventListener("mouseup", +this._binded_mouse_callback);else if("mousemove"==a.type)f||(b=g-this.last_mouse[0],f=d-this.last_mouse[1],this.dragging&&this.mouseDrag(b,f));else if("mouseup"==a.type)this.dragging=!1,document.body.removeEventListener("mousemove",this._binded_mouse_callback),document.body.removeEventListener("mouseup",this._binded_mouse_callback),b.addEventListener("mousemove",this._binded_mouse_callback);else if("mousewheel"==a.type||"wheel"==a.type||"DOMMouseScroll"==a.type)a.eventType="mousewheel",a.wheel="wheel"== +a.type?-a.deltaY:null!=a.wheelDeltaY?a.wheelDeltaY:-60*a.detail,a.delta=a.wheelDelta?a.wheelDelta/40:a.deltaY?-a.deltaY/3:0,this.changeDeltaScale(1+0.05*a.delta);this.last_mouse[0]=g;this.last_mouse[1]=d;a.preventDefault();a.stopPropagation();return!1}};t.prototype.toCanvasContext=function(a){a.scale(this.scale,this.scale);a.translate(this.offset[0],this.offset[1])};t.prototype.convertOffsetToCanvas=function(a){return[(a[0]+this.offset[0])*this.scale,(a[1]+this.offset[1])*this.scale]};t.prototype.convertCanvasToOffset= +function(a,b){b=b||[0,0];b[0]=a[0]/this.scale-this.offset[0];b[1]=a[1]/this.scale-this.offset[1];return b};t.prototype.mouseDrag=function(a,b){this.offset[0]+=a/this.scale;this.offset[1]+=b/this.scale;if(this.onredraw)this.onredraw(this)};t.prototype.changeScale=function(a,b){athis.max_scale&&(a=this.max_scale);if(a!=this.scale&&this.element){var d=this.element.getBoundingClientRect();if(d){b=b||[0.5*d.width,0.5*d.height];d=this.convertCanvasToOffset(b);this.scale= +a;0.01>Math.abs(this.scale-1)&&(this.scale=1);var g=this.convertCanvasToOffset(b),d=[g[0]-d[0],g[1]-d[1]];this.offset[0]+=d[0];this.offset[1]+=d[1];if(this.onredraw)this.onredraw(this)}}};t.prototype.changeDeltaScale=function(a,b){this.changeScale(this.scale*a,b)};t.prototype.reset=function(){this.scale=1;this.offset[0]=0;this.offset[1]=0};B.LGraphCanvas=e.LGraphCanvas=h;h.DEFAULT_BACKGROUND_IMAGE="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII="; h.link_type_colors={"-1":e.EVENT_LINK_COLOR,number:"#AAA",node:"#DCA"};h.gradients={};h.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.dragging_rectangle=null;this.selected_nodes={};this.selected_group=null;this.visible_nodes=[];this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highlighted_links={};this.dragging_canvas=!1;this.dirty_bgcanvas=this.dirty_canvas=!0;this.node_widget=this.node_in_panel=this.dirty_area= null;this.last_mouse=[0,0];this.last_mouseclick=0;this.visible_area.set([0,0,0,0]);if(this.onClear)this.onClear()};h.prototype.setGraph=function(a,b){this.graph!=a&&(b||this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this._graph_stack&&(this._graph_stack=null),this.setDirty(!0,!0)))};h.prototype.getTopGraph=function(){return this._graph_stack.length?this._graph_stack[0]:this.graph};h.prototype.openSubgraph=function(a){if(!a)throw"graph cannot be null";if(this.graph== a)throw"graph cannot be the same";this.clear();this.graph&&(this._graph_stack||(this._graph_stack=[]),this._graph_stack.push(this.graph));a.attachCanvas(this);this.checkPanels();this.setDirty(!0,!0)};h.prototype.closeSubgraph=function(){if(this._graph_stack&&0!=this._graph_stack.length){var a=this.graph._subgraph_node,b=this._graph_stack.pop();this.selected_nodes={};this.highlighted_links={};b.attachCanvas(this);this.setDirty(!0,!0);a&&(this.centerOnNode(a),this.selectNodes([a]))}};h.prototype.getCurrentGraph= @@ -151,41 +151,41 @@ b.outputs.length&&e.isValidConnection(b.inputs[0].type,b.outputs[0].type)&&b.inp function(a){this.ds.offset[0]=-a.pos[0]-0.5*a.size[0]+0.5*this.canvas.width/this.ds.scale;this.ds.offset[1]=-a.pos[1]-0.5*a.size[1]+0.5*this.canvas.height/this.ds.scale;this.setDirty(!0,!0)};h.prototype.adjustMouseEvent=function(a){if(this.canvas){var b=this.canvas.getBoundingClientRect();a.localX=a.clientX-b.left;a.localY=a.clientY-b.top}else a.localX=a.clientX,a.localY=a.clientY;a.deltaX=a.localX-this.last_mouse_position[0];a.deltaY=a.localY-this.last_mouse_position[1];this.last_mouse_position[0]= a.localX;this.last_mouse_position[1]=a.localY;a.canvasX=a.localX/this.ds.scale-this.ds.offset[0];a.canvasY=a.localY/this.ds.scale-this.ds.offset[1]};h.prototype.setZoom=function(a,b){this.ds.changeScale(a,b);this.dirty_bgcanvas=this.dirty_canvas=!0};h.prototype.convertOffsetToCanvas=function(a,b){return this.ds.convertOffsetToCanvas(a,b)};h.prototype.convertCanvasToOffset=function(a,b){return this.ds.convertCanvasToOffset(a,b)};h.prototype.convertEventToCanvasOffset=function(a){var b=this.canvas.getBoundingClientRect(); return this.convertCanvasToOffset([a.clientX-b.left,a.clientY-b.top])};h.prototype.bringToFront=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.push(a))};h.prototype.sendToBack=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.unshift(a))};var q=new Float32Array(4);h.prototype.computeVisibleNodes=function(a,b){var d=b||[];d.length=0;a=a||this.graph._nodes;for(var g=0,f=a.length;gd-this.graph._last_trigger_time)&&this.drawBackCanvas(); -(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1}};h.prototype.drawFrontCanvas=function(){this.dirty_canvas=!1;this.ctx||(this.ctx=this.bgcanvas.getContext("2d"));var a=this.ctx;if(a){a.start2D&&a.start2D();var b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());this.clear_background&&a.clearRect(0,0,b.width, -b.height);this.bgcanvas==this.canvas?this.drawBackCanvas():a.drawImage(this.bgcanvas,0,0);if(this.onRender)this.onRender(b,a);this.show_info&&this.renderInfo(a);if(this.graph){a.save();this.ds.toCanvasContext(a);for(var b=this.computeVisibleNodes(null,this.visible_nodes),d=0;dd-this.graph._last_trigger_time)&&this.drawBackCanvas(); +(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1}};h.prototype.drawFrontCanvas=function(){this.dirty_canvas=!1;this.ctx||(this.ctx=this.bgcanvas.getContext("2d"));var a=this.ctx;if(a){a.start2D&&a.start2D();var b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);var d=this.viewport||this.dirty_area;d&&(a.save(),a.beginPath(),a.rect(d[0],d[1],d[2],d[3]),a.clip());this.clear_background&&a.clearRect(0,0,b.width,b.height);this.bgcanvas==this.canvas? +this.drawBackCanvas():a.drawImage(this.bgcanvas,0,0);if(this.onRender)this.onRender(b,a);this.show_info&&this.renderInfo(a,d?d[0]:0,d?d[1]:0);if(this.graph){a.save();this.ds.toCanvasContext(a);for(var b=this.computeVisibleNodes(null,this.visible_nodes),g=0;g> ";b.fillText(g+d.getTitle(),0.5*a.width,40);b.restore()}d=!1;this.onRenderBackground&&(d=this.onRenderBackground(a,b));b.restore();b.setTransform(1,0,0,1,0,0);this.visible_links.length=0;if(this.graph){b.save();this.ds.toCanvasContext(b);if(this.background_image&&0.5this.ds.scale;if(this.live_mode){if(!a.flags.collapsed&&(b.shadowColor="transparent",a.onDrawForeground))a.onDrawForeground(b, -this,this.canvas)}else{var c=this.editor_alpha;b.globalAlpha=c;this.render_shadows&&!f?(b.shadowColor=e.DEFAULT_SHADOW_COLOR,b.shadowOffsetX=2*this.ds.scale,b.shadowOffsetY=2*this.ds.scale,b.shadowBlur=3*this.ds.scale):b.shadowColor="transparent";if(!a.flags.collapsed||!a.onDrawCollapsed||!0!=a.onDrawCollapsed(b,this)){var m=a._shape||e.BOX_SHAPE;H.set(a.size);var r=a.horizontal;if(a.flags.collapsed){b.font=this.inner_text_font;var x=a.getTitle?a.getTitle():a.title;null!=x&&(a._collapsed_width=Math.min(a.size[0], -b.measureText(x).width+2*e.NODE_TITLE_HEIGHT),H[0]=a._collapsed_width,H[1]=0)}a.clip_area&&(b.save(),b.beginPath(),m==e.BOX_SHAPE?b.rect(0,0,H[0],H[1]):m==e.ROUND_SHAPE?b.roundRect(0,0,H[0],H[1],10):m==e.CIRCLE_SHAPE&&b.arc(0.5*H[0],0.5*H[1],0.5*H[0],0,2*Math.PI),b.clip());a.has_errors&&(g="red");this.drawNodeShape(a,b,H,d,g,a.is_selected,a.mouseOver);b.shadowColor="transparent";if(a.onDrawForeground)a.onDrawForeground(b,this,this.canvas);b.textAlign=r?"center":"left";b.font=this.inner_text_font; -g=!f;m=this.connecting_output;b.lineWidth=1;var x=0,l=new Float32Array(2);if(!a.flags.collapsed){if(a.inputs)for(d=0;dthis.ds.scale,x=a._shape||a.constructor.shape||e.ROUND_SHAPE,l=a.constructor.title_mode,q=!0;l== -e.TRANSPARENT_TITLE?q=!1:l==e.AUTOHIDE_TITLE&&m&&(q=!0);w[0]=0;w[1]=q?-f:0;w[2]=d[0]+1;w[3]=q?d[1]+f:d[1];m=b.globalAlpha;b.beginPath();x==e.BOX_SHAPE||r?b.fillRect(w[0],w[1],w[2],w[3]):x==e.ROUND_SHAPE||x==e.CARD_SHAPE?b.roundRect(w[0],w[1],w[2],w[3],this.round_radius,x==e.CARD_SHAPE?0:this.round_radius):x==e.CIRCLE_SHAPE&&b.arc(0.5*d[0],0.5*d[1],0.5*d[0],0,2*Math.PI);b.fill();a.flags.collapsed||(b.shadowColor="transparent",b.fillStyle="rgba(0,0,0,0.2)",b.fillRect(0,-1,w[2],2));b.shadowColor="transparent"; -if(a.onDrawBackground)a.onDrawBackground(b,this,this.canvas,this.graph_mouse);if(q||l==e.TRANSPARENT_TITLE){if(a.onDrawTitleBar)a.onDrawTitleBar(b,f,d,this.ds.scale,g);else if(l!=e.TRANSPARENT_TITLE&&(a.constructor.title_color||this.render_title_colored)){q=a.constructor.title_color||g;a.flags.collapsed&&(b.shadowColor=e.DEFAULT_SHADOW_COLOR);if(this.use_gradients){var z=h.gradients[q];z||(z=h.gradients[q]=b.createLinearGradient(0,0,400,0),z.addColorStop(0,q),z.addColorStop(1,"#000"));b.fillStyle= -z}else b.fillStyle=q;b.beginPath();x==e.BOX_SHAPE||r?b.rect(0,-f,d[0]+1,f):x!=e.ROUND_SHAPE&&x!=e.CARD_SHAPE||b.roundRect(0,-f,d[0]+1,f,this.round_radius,a.flags.collapsed?this.round_radius:0);b.fill();b.shadowColor="transparent"}if(a.onDrawTitleBox)a.onDrawTitleBox(b,f,d,this.ds.scale);else x==e.ROUND_SHAPE||x==e.CIRCLE_SHAPE||x==e.CARD_SHAPE?(r&&(b.fillStyle="black",b.beginPath(),b.arc(0.5*f,-0.5*f,6,0,2*Math.PI),b.fill()),b.fillStyle=a.boxcolor||e.NODE_DEFAULT_BOXCOLOR,r?b.fillRect(0.5*f-5,-0.5* -f-5,10,10):(b.beginPath(),b.arc(0.5*f,-0.5*f,5,0,2*Math.PI),b.fill())):(r&&(b.fillStyle="black",b.fillRect(0.5*(f-10)-1,-0.5*(f+10)-1,12,12)),b.fillStyle=a.boxcolor||e.NODE_DEFAULT_BOXCOLOR,b.fillRect(0.5*(f-10),-0.5*(f+10),10,10));b.globalAlpha=m;if(a.onDrawTitleText)a.onDrawTitleText(b,f,d,this.ds.scale,this.title_text_font,c);!r&&(b.font=this.title_text_font,m=String(a.getTitle()))&&(b.fillStyle=c?e.NODE_SELECTED_TITLE_COLOR:a.constructor.title_text_color||this.node_title_color,a.flags.collapsed? -(b.textAlign="left",b.measureText(m),b.fillText(m.substr(0,20),f,e.NODE_TITLE_TEXT_Y-f),b.textAlign="left"):(b.textAlign="left",b.fillText(m,f,e.NODE_TITLE_TEXT_Y-f)));a.flags.collapsed||!a.subgraph||a.skip_subgraph_button||(m=e.NODE_TITLE_HEIGHT,q=a.size[0]-m,z=e.isInsideRectangle(this.graph_mouse[0]-a.pos[0],this.graph_mouse[1]-a.pos[1],q+2,-m+2,m-4,m-4),b.fillStyle=z?"#888":"#555",x==e.BOX_SHAPE||r?b.fillRect(q+2,-m+2,m-4,m-4):(b.beginPath(),b.roundRect(q+2,-m+2,m-4,m-4,4),b.fill()),b.fillStyle= -"#333",b.beginPath(),b.moveTo(q+0.2*m,0.6*-m),b.lineTo(q+0.8*m,0.6*-m),b.lineTo(q+0.5*m,0.3*-m),b.fill());if(a.onDrawTitle)a.onDrawTitle(b)}if(c){if(a.onBounding)a.onBounding(w);l==e.TRANSPARENT_TITLE&&(w[1]-=f,w[3]+=f);b.lineWidth=1;b.globalAlpha=0.8;b.beginPath();x==e.BOX_SHAPE?b.rect(-6+w[0],-6+w[1],12+w[2],12+w[3]):x==e.ROUND_SHAPE||x==e.CARD_SHAPE&&a.flags.collapsed?b.roundRect(-6+w[0],-6+w[1],12+w[2],12+w[3],2*this.round_radius):x==e.CARD_SHAPE?b.roundRect(-6+w[0],-6+w[1],12+w[2],12+w[3],2* -this.round_radius,2):x==e.CIRCLE_SHAPE&&b.arc(0.5*d[0],0.5*d[1],0.5*d[0]+6,0,2*Math.PI);b.strokeStyle=e.NODE_BOX_OUTLINE_COLOR;b.stroke();b.strokeStyle=g;b.globalAlpha=1}};var L=new Float32Array(4),n=new Float32Array(4),v=new Float32Array(2),l=new Float32Array(2);h.prototype.drawConnections=function(a){var b=e.getTime(),d=this.visible_area;L[0]=d[0]-20;L[1]=d[1]-20;L[2]=d[2]+40;L[3]=d[3]+40;a.lineWidth=this.connections_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";a.globalAlpha=this.editor_alpha; -for(var d=this.graph._nodes,g=0,f=d.length;gn[2]&&(n[0]+=n[2],n[2]=Math.abs(n[2]));0>n[3]&&(n[1]+=n[3],n[3]=Math.abs(n[3]));if(G(n, -L)){var F=x.outputs[q],q=c.inputs[m];if(F&&q&&(x=F.dir||(x.horizontal?e.DOWN:e.RIGHT),q=q.dir||(c.horizontal?e.UP:e.LEFT),this.renderLink(a,h,z,r,!1,0,null,x,q),r&&r._last_time&&1E3>b-r._last_time)){var F=2-0.002*(b-r._last_time),s=a.globalAlpha;a.globalAlpha=s*F;this.renderLink(a,h,z,r,!0,F,"white",x,q);a.globalAlpha=s}}}}}}a.globalAlpha=1};h.prototype.renderLink=function(a,b,d,g,f,c,m,r,x,l){g&&this.visible_links.push(g);!m&&g&&(m=g.color||h.link_type_colors[g.type]);m||(m=this.default_link_color); +this.canvas.height;this.bgctx||(this.bgctx=this.bgcanvas.getContext("2d"));var b=this.bgctx;b.start&&b.start();var d=this.viewport||[0,0,b.canvas.width,b.canvas.height];this.clear_background&&b.clearRect(d[0],d[1],d[2],d[3]);if(this._graph_stack&&this._graph_stack.length){b.save();d=this.graph._subgraph_node;b.strokeStyle=d.bgcolor;b.lineWidth=10;b.strokeRect(1,1,a.width-2,a.height-2);b.lineWidth=1;b.font="40px Arial";b.textAlign="center";b.fillStyle=d.bgcolor||"#AAA";for(var g="",f=1;f> ";b.fillText(g+d.getTitle(),0.5*a.width,40);b.restore()}d=!1;this.onRenderBackground&&(d=this.onRenderBackground(a,b));b.restore();b.setTransform(1,0,0,1,0,0);this.visible_links.length=0;if(this.graph){b.save();this.ds.toCanvasContext(b);if(this.background_image&&0.5this.ds.scale;if(this.live_mode){if(!a.flags.collapsed&& +(b.shadowColor="transparent",a.onDrawForeground))a.onDrawForeground(b,this,this.canvas)}else{var c=this.editor_alpha;b.globalAlpha=c;this.render_shadows&&!f?(b.shadowColor=e.DEFAULT_SHADOW_COLOR,b.shadowOffsetX=2*this.ds.scale,b.shadowOffsetY=2*this.ds.scale,b.shadowBlur=3*this.ds.scale):b.shadowColor="transparent";if(!a.flags.collapsed||!a.onDrawCollapsed||!0!=a.onDrawCollapsed(b,this)){var m=a._shape||e.BOX_SHAPE;H.set(a.size);var r=a.horizontal;if(a.flags.collapsed){b.font=this.inner_text_font; +var x=a.getTitle?a.getTitle():a.title;null!=x&&(a._collapsed_width=Math.min(a.size[0],b.measureText(x).width+2*e.NODE_TITLE_HEIGHT),H[0]=a._collapsed_width,H[1]=0)}a.clip_area&&(b.save(),b.beginPath(),m==e.BOX_SHAPE?b.rect(0,0,H[0],H[1]):m==e.ROUND_SHAPE?b.roundRect(0,0,H[0],H[1],10):m==e.CIRCLE_SHAPE&&b.arc(0.5*H[0],0.5*H[1],0.5*H[0],0,2*Math.PI),b.clip());a.has_errors&&(g="red");this.drawNodeShape(a,b,H,d,g,a.is_selected,a.mouseOver);b.shadowColor="transparent";if(a.onDrawForeground)a.onDrawForeground(b, +this,this.canvas);b.textAlign=r?"center":"left";b.font=this.inner_text_font;g=!f;m=this.connecting_output;b.lineWidth=1;var x=0,l=new Float32Array(2);if(!a.flags.collapsed){if(a.inputs)for(d=0;dthis.ds.scale,x=a._shape|| +a.constructor.shape||e.ROUND_SHAPE,l=a.constructor.title_mode,q=!0;l==e.TRANSPARENT_TITLE?q=!1:l==e.AUTOHIDE_TITLE&&m&&(q=!0);w[0]=0;w[1]=q?-f:0;w[2]=d[0]+1;w[3]=q?d[1]+f:d[1];m=b.globalAlpha;b.beginPath();x==e.BOX_SHAPE||r?b.fillRect(w[0],w[1],w[2],w[3]):x==e.ROUND_SHAPE||x==e.CARD_SHAPE?b.roundRect(w[0],w[1],w[2],w[3],this.round_radius,x==e.CARD_SHAPE?0:this.round_radius):x==e.CIRCLE_SHAPE&&b.arc(0.5*d[0],0.5*d[1],0.5*d[0],0,2*Math.PI);b.fill();a.flags.collapsed||(b.shadowColor="transparent",b.fillStyle= +"rgba(0,0,0,0.2)",b.fillRect(0,-1,w[2],2));b.shadowColor="transparent";if(a.onDrawBackground)a.onDrawBackground(b,this,this.canvas,this.graph_mouse);if(q||l==e.TRANSPARENT_TITLE){if(a.onDrawTitleBar)a.onDrawTitleBar(b,f,d,this.ds.scale,g);else if(l!=e.TRANSPARENT_TITLE&&(a.constructor.title_color||this.render_title_colored)){q=a.constructor.title_color||g;a.flags.collapsed&&(b.shadowColor=e.DEFAULT_SHADOW_COLOR);if(this.use_gradients){var z=h.gradients[q];z||(z=h.gradients[q]=b.createLinearGradient(0, +0,400,0),z.addColorStop(0,q),z.addColorStop(1,"#000"));b.fillStyle=z}else b.fillStyle=q;b.beginPath();x==e.BOX_SHAPE||r?b.rect(0,-f,d[0]+1,f):x!=e.ROUND_SHAPE&&x!=e.CARD_SHAPE||b.roundRect(0,-f,d[0]+1,f,this.round_radius,a.flags.collapsed?this.round_radius:0);b.fill();b.shadowColor="transparent"}if(a.onDrawTitleBox)a.onDrawTitleBox(b,f,d,this.ds.scale);else x==e.ROUND_SHAPE||x==e.CIRCLE_SHAPE||x==e.CARD_SHAPE?(r&&(b.fillStyle="black",b.beginPath(),b.arc(0.5*f,-0.5*f,6,0,2*Math.PI),b.fill()),b.fillStyle= +a.boxcolor||e.NODE_DEFAULT_BOXCOLOR,r?b.fillRect(0.5*f-5,-0.5*f-5,10,10):(b.beginPath(),b.arc(0.5*f,-0.5*f,5,0,2*Math.PI),b.fill())):(r&&(b.fillStyle="black",b.fillRect(0.5*(f-10)-1,-0.5*(f+10)-1,12,12)),b.fillStyle=a.boxcolor||e.NODE_DEFAULT_BOXCOLOR,b.fillRect(0.5*(f-10),-0.5*(f+10),10,10));b.globalAlpha=m;if(a.onDrawTitleText)a.onDrawTitleText(b,f,d,this.ds.scale,this.title_text_font,c);!r&&(b.font=this.title_text_font,m=String(a.getTitle()))&&(b.fillStyle=c?e.NODE_SELECTED_TITLE_COLOR:a.constructor.title_text_color|| +this.node_title_color,a.flags.collapsed?(b.textAlign="left",b.measureText(m),b.fillText(m.substr(0,20),f,e.NODE_TITLE_TEXT_Y-f),b.textAlign="left"):(b.textAlign="left",b.fillText(m,f,e.NODE_TITLE_TEXT_Y-f)));a.flags.collapsed||!a.subgraph||a.skip_subgraph_button||(m=e.NODE_TITLE_HEIGHT,q=a.size[0]-m,z=e.isInsideRectangle(this.graph_mouse[0]-a.pos[0],this.graph_mouse[1]-a.pos[1],q+2,-m+2,m-4,m-4),b.fillStyle=z?"#888":"#555",x==e.BOX_SHAPE||r?b.fillRect(q+2,-m+2,m-4,m-4):(b.beginPath(),b.roundRect(q+ +2,-m+2,m-4,m-4,4),b.fill()),b.fillStyle="#333",b.beginPath(),b.moveTo(q+0.2*m,0.6*-m),b.lineTo(q+0.8*m,0.6*-m),b.lineTo(q+0.5*m,0.3*-m),b.fill());if(a.onDrawTitle)a.onDrawTitle(b)}if(c){if(a.onBounding)a.onBounding(w);l==e.TRANSPARENT_TITLE&&(w[1]-=f,w[3]+=f);b.lineWidth=1;b.globalAlpha=0.8;b.beginPath();x==e.BOX_SHAPE?b.rect(-6+w[0],-6+w[1],12+w[2],12+w[3]):x==e.ROUND_SHAPE||x==e.CARD_SHAPE&&a.flags.collapsed?b.roundRect(-6+w[0],-6+w[1],12+w[2],12+w[3],2*this.round_radius):x==e.CARD_SHAPE?b.roundRect(-6+ +w[0],-6+w[1],12+w[2],12+w[3],2*this.round_radius,2):x==e.CIRCLE_SHAPE&&b.arc(0.5*d[0],0.5*d[1],0.5*d[0]+6,0,2*Math.PI);b.strokeStyle=e.NODE_BOX_OUTLINE_COLOR;b.stroke();b.strokeStyle=g;b.globalAlpha=1}};var L=new Float32Array(4),n=new Float32Array(4),v=new Float32Array(2),l=new Float32Array(2);h.prototype.drawConnections=function(a){var b=e.getTime(),d=this.visible_area;L[0]=d[0]-20;L[1]=d[1]-20;L[2]=d[2]+40;L[3]=d[3]+40;a.lineWidth=this.connections_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";a.globalAlpha= +this.editor_alpha;for(var d=this.graph._nodes,g=0,f=d.length;gn[2]&&(n[0]+=n[2],n[2]=Math.abs(n[2]));0>n[3]&&(n[1]+=n[3],n[3]=Math.abs(n[3])); +if(G(n,L)){var F=x.outputs[q],q=c.inputs[m];if(F&&q&&(x=F.dir||(x.horizontal?e.DOWN:e.RIGHT),q=q.dir||(c.horizontal?e.UP:e.LEFT),this.renderLink(a,h,z,r,!1,0,null,x,q),r&&r._last_time&&1E3>b-r._last_time)){var F=2-0.002*(b-r._last_time),s=a.globalAlpha;a.globalAlpha=s*F;this.renderLink(a,h,z,r,!0,F,"white",x,q);a.globalAlpha=s}}}}}}a.globalAlpha=1};h.prototype.renderLink=function(a,b,d,g,f,c,m,r,x,l){g&&this.visible_links.push(g);!m&&g&&(m=g.color||h.link_type_colors[g.type]);m||(m=this.default_link_color); null!=g&&this.highlighted_links[g.id]&&(m="#FFF");r=r||e.RIGHT;x=x||e.LEFT;var q=C(b,d);this.render_connections_border&&0.6