Merge remote-tracking branch 'upstream/master' into fix/auto_sort_value

src/litegraph-editor.js

@@ -16,11 +16,11 @@ function Editor(container_id, options) {
     this.content = root.querySelector(".content");
     this.footer = root.querySelector(".footer");
 
-    var canvas = root.querySelector(".graphcanvas");
+    var canvas = this.canvas = root.querySelector(".graphcanvas");
 
     //create graph
     var graph = (this.graph = new LGraph());
-    var graphcanvas = (this.graphcanvas = new LGraphCanvas(canvas, graph));
+    var graphcanvas = this.graphcanvas = new LGraphCanvas(canvas, graph);
     graphcanvas.background_image = "imgs/grid.png";
     graph.onAfterExecute = function() {
         graphcanvas.draw(true);
@@ -267,4 +267,17 @@ Editor.prototype.addMiniWindow = function(w, h) {
     this.root.querySelector(".content").appendChild(miniwindow);
 };
 
+Editor.prototype.addMultiview = function()
+{
+	var canvas = this.canvas;
+	this.graphcanvas.ctx.fillStyle = "black";
+	this.graphcanvas.ctx.fillRect(0,0,canvas.width,canvas.height);
+	this.graphcanvas.viewport = [0,0,canvas.width*0.5-2,canvas.height];
+
+	var graphcanvas = new LGraphCanvas( canvas, this.graph );
+    graphcanvas.background_image = "imgs/grid.png";
+    this.graphcanvas2 = graphcanvas;
+	this.graphcanvas2.viewport = [canvas.width*0.5,0,canvas.width*0.5,canvas.height];
+}
+
 LiteGraph.Editor = Editor;

src/litegraph.js

@@ -3503,7 +3503,7 @@
         out[0] = this.pos[0] - 4;
         out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;
         out[2] = this.size[0] + 4;
-        out[3] = this.size[1] + LiteGraph.NODE_TITLE_HEIGHT;
+        out[3] = this.flags.collapsed ? LiteGraph.NODE_TITLE_HEIGHT : this.size[1] + LiteGraph.NODE_TITLE_HEIGHT;
 
         if (this.onBounding) {
             this.onBounding(out);
@@ -4451,7 +4451,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;
@@ -4460,6 +4460,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;
@@ -4481,25 +4488,18 @@ LGraphNode.prototype.executeAction = function(action)
         e.canvasy = y;
         e.dragging = this.dragging;
 
+		var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
+
         var ignore = false;
         if (this.onmouse) {
             ignore = this.onmouse(e);
         }
 
-        if (e.type == "mousedown") {
+        if (e.type == "mousedown" && is_inside) {
             this.dragging = true;
-            canvas.removeEventListener(
-                "mousemove",
-                this._binded_mouse_callback
-            );
-            document.body.addEventListener(
-                "mousemove",
-                this._binded_mouse_callback
-            );
-            document.body.addEventListener(
-                "mouseup",
-                this._binded_mouse_callback
-            );
+            canvas.removeEventListener( "mousemove", this._binded_mouse_callback );
+            document.body.addEventListener( "mousemove", this._binded_mouse_callback );
+            document.body.addEventListener( "mouseup", this._binded_mouse_callback );
         } else if (e.type == "mousemove") {
             if (!ignore) {
                 var deltax = x - this.last_mouse[0];
@@ -4510,19 +4510,13 @@ LGraphNode.prototype.executeAction = function(action)
             }
         } else if (e.type == "mouseup") {
             this.dragging = false;
-            document.body.removeEventListener(
-                "mousemove",
-                this._binded_mouse_callback
-            );
-            document.body.removeEventListener(
-                "mouseup",
-                this._binded_mouse_callback
-            );
-            canvas.addEventListener("mousemove", this._binded_mouse_callback);
-        } else if (
-            e.type == "mousewheel" ||
+            document.body.removeEventListener( "mousemove", this._binded_mouse_callback );
+            document.body.removeEventListener( "mouseup", this._binded_mouse_callback );
+            canvas.addEventListener("mousemove", this._binded_mouse_callback );
+        } else if ( is_inside &&
+            (e.type == "mousewheel" ||
             e.type == "wheel" ||
-            e.type == "DOMMouseScroll"
+            e.type == "DOMMouseScroll")
         ) {
             e.eventType = "mousewheel";
             if (e.type == "wheel") {
@@ -4544,9 +4538,12 @@ LGraphNode.prototype.executeAction = function(action)
         this.last_mouse[0] = x;
         this.last_mouse[1] = y;
 
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
+		if(is_inside)
+		{
+	        e.preventDefault();
+		    e.stopPropagation();
+		    return false;
+		}
     };
 
     DragAndScale.prototype.toCanvasContext = function(ctx) {
@@ -4644,10 +4641,10 @@ 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 || {};
+        this.options = options = options || {};
 
         //if(graph === undefined)
         //	throw ("No graph assigned");
@@ -4687,6 +4684,7 @@ LGraphNode.prototype.executeAction = function(action)
         this.allow_interaction = true; //allow to control widgets, buttons, collapse, etc
         this.allow_searchbox = true;
         this.allow_reconnect_links = false; //allows to change a connection with having to redo it again
+		this.align_to_grid = false; //snap to grid
 
         this.drag_mode = false;
         this.dragging_rectangle = null;
@@ -4738,12 +4736,14 @@ 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);
         }
 
-        this.setCanvas(canvas);
+        this.setCanvas(canvas,options.skip_events);
         this.clear();
 
         if (!options.skip_render) {
@@ -5227,25 +5227,25 @@ LGraphNode.prototype.executeAction = function(action)
         LGraphCanvas.active_canvas = this;
         var that = this;
 
-        //move mouse move event to the window in case it drags outside of the canvas
-        this.canvas.removeEventListener("mousemove", this._mousemove_callback);
-        ref_window.document.addEventListener(
-            "mousemove",
-            this._mousemove_callback,
-            true
-        ); //catch for the entire window
-        ref_window.document.addEventListener(
-            "mouseup",
-            this._mouseup_callback,
-            true
-        );
+		var x = e.localX;
+		var y = e.localY;
+		//console.log(y,this.viewport);
 
-        var node = this.graph.getNodeOnPos(
-            e.canvasX,
-            e.canvasY,
-            this.visible_nodes,
-            5
-        );
+		this.ds.viewport = this.viewport;
+		var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
+
+        //move mouse move event to the window in case it drags outside of the canvas
+		if(!this.options.skip_events)
+		{
+			this.canvas.removeEventListener("mousemove", this._mousemove_callback);
+			ref_window.document.addEventListener( "mousemove", this._mousemove_callback, true ); //catch for the entire window
+			ref_window.document.addEventListener( "mouseup", this._mouseup_callback, true );
+		}
+
+		if(!is_inside)
+			return;
+
+        var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes, 5 );
         var skip_dragging = false;
         var skip_action = false;
         var now = LiteGraph.getTime();
@@ -5289,11 +5289,7 @@ LGraphNode.prototype.executeAction = function(action)
                 } //if it wasn't selected?
 
                 //not dragging mouse to connect two slots
-                if (
-                    !this.connecting_node &&
-                    !node.flags.collapsed &&
-                    !this.live_mode
-                ) {
+                if ( !this.connecting_node && !node.flags.collapsed && !this.live_mode ) {
                     //Search for corner for resize
                     if (
                         !skip_action &&
@@ -5314,11 +5310,7 @@ LGraphNode.prototype.executeAction = function(action)
                     } else {
                         //search for outputs
                         if (node.outputs) {
-                            for (
-                                var i = 0, l = node.outputs.length;
-                                i < l;
-                                ++i
-                            ) {
+                            for ( var i = 0, l = node.outputs.length; i < l; ++i ) {
                                 var output = node.outputs[i];
                                 var link_pos = node.getConnectionPos(false, i);
                                 if (
@@ -5358,11 +5350,7 @@ LGraphNode.prototype.executeAction = function(action)
 
                         //search for inputs
                         if (node.inputs) {
-                            for (
-                                var i = 0, l = node.inputs.length;
-                                i < l;
-                                ++i
-                            ) {
+                            for ( var i = 0, l = node.inputs.length; i < l; ++i ) {
                                 var input = node.inputs[i];
                                 var link_pos = node.getConnectionPos(true, i);
                                 if (
@@ -5800,9 +5788,12 @@ LGraphNode.prototype.executeAction = function(action)
         LGraphCanvas.active_canvas = this;
 
         //restore the mousemove event back to the canvas
-        document.removeEventListener("mousemove",this._mousemove_callback,true);
-        this.canvas.addEventListener("mousemove",this._mousemove_callback,true);
-        document.removeEventListener("mouseup", this._mouseup_callback, true);
+		if(!this.options.skip_events)
+		{
+			document.removeEventListener("mousemove",this._mousemove_callback,true);
+			this.canvas.addEventListener("mousemove",this._mousemove_callback,true);
+			document.removeEventListener("mouseup", this._mouseup_callback, true);
+		}
 
         this.adjustMouseEvent(e);
         var now = LiteGraph.getTime();
@@ -5977,7 +5968,7 @@ LGraphNode.prototype.executeAction = function(action)
                 this.dirty_bgcanvas = true;
                 this.node_dragged.pos[0] = Math.round(this.node_dragged.pos[0]);
                 this.node_dragged.pos[1] = Math.round(this.node_dragged.pos[1]);
-                if (this.graph.config.align_to_grid) {
+                if (this.graph.config.align_to_grid || this.align_to_grid ) {
                     this.node_dragged.alignToGrid();
                 }
 				if( this.onNodeMoved )
@@ -6050,6 +6041,12 @@ LGraphNode.prototype.executeAction = function(action)
 
         this.adjustMouseEvent(e);
 
+		var x = e.localX;
+		var y = e.localY;
+		var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
+		if(!is_inside)
+			return;
+
         var scale = this.ds.scale;
 
         if (delta > 0) {
@@ -6322,8 +6319,15 @@ LGraphNode.prototype.executeAction = function(action)
     LGraphCanvas.prototype.processDrop = function(e) {
         e.preventDefault();
         this.adjustMouseEvent(e);
+		var x = e.localX;
+		var y = e.localY;
+		var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
+		if(!is_inside)
+			return;
 
         var pos = [e.canvasX, e.canvasY];
+
+
         var node = this.graph ? this.graph.getNodeOnPos(pos[0], pos[1]) : null;
 
         if (!node) {
@@ -6758,7 +6762,7 @@ LGraphNode.prototype.executeAction = function(action)
         this.last_draw_time = now;
 
         if (this.graph) {
-            this.ds.computeVisibleArea();
+            this.ds.computeVisibleArea(this.viewport);
         }
 
         if (
@@ -6796,33 +6800,29 @@ LGraphNode.prototype.executeAction = function(action)
             return;
         }
 
-        if (ctx.start2D) {
+        var canvas = this.canvas;
+        if ( ctx.start2D && !this.viewport ) {
             ctx.start2D();
+			ctx.restore();
+			ctx.setTransform(1, 0, 0, 1, 0, 0);
         }
 
-        var canvas = this.canvas;
-
-        //reset in case of error
-        ctx.restore();
-        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();
         }
 
         //clear
         //canvas.width = canvas.width;
         if (this.clear_background) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+			if(area)
+	            ctx.clearRect( area[0],area[1],area[2],area[3] );
+			else
+	            ctx.clearRect(0, 0, canvas.width, canvas.height);
         }
 
         //draw bg canvas
@@ -6839,7 +6839,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) {
@@ -6982,9 +6982,8 @@ LGraphNode.prototype.executeAction = function(action)
             this.onDrawOverlay(ctx);
         }
 
-        if (this.dirty_area) {
+        if (area) {
             ctx.restore();
-            //this.dirty_area = null;
         }
 
         if (ctx.finish2D) {
@@ -7146,6 +7145,7 @@ LGraphNode.prototype.executeAction = function(action)
 
         ctx.font = "10px Arial";
         ctx.fillStyle = "#888";
+		ctx.textAlign = "left";
         if (this.graph) {
             ctx.fillText( "T: " + this.graph.globaltime.toFixed(2) + "s", 5, 13 * 1 );
             ctx.fillText("I: " + this.graph.iteration, 5, 13 * 2 );
@@ -7180,11 +7180,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];
@@ -7215,8 +7218,11 @@ LGraphNode.prototype.executeAction = function(action)
         }
 
         //reset in case of error
-        ctx.restore();
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        if ( !this.viewport )
+		{
+	        ctx.restore();
+		    ctx.setTransform(1, 0, 0, 1, 0, 0);
+		}
         this.visible_links.length = 0;
 
         if (this.graph) {
@@ -8838,7 +8844,7 @@ LGraphNode.prototype.executeAction = function(action)
 			var widget_width = w.width || width;
 			//outside
 			if ( w != active_widget && 
-				(x < 6 || x > widget_width - 12 || y < w.last_y || y > w.last_y + widget_height) ) 
+				(x < 6 || x > widget_width - 12 || y < w.last_y || y > w.last_y + widget_height || w.last_y === undefined) ) 
 				continue;
 
 			var old_value = w.value;
@@ -10227,7 +10233,8 @@ LGraphNode.prototype.executeAction = function(action)
 
 		root.close = function()
 		{
-			this.parentNode.removeChild(this);
+			if(this.parentNode)
+				this.parentNode.removeChild(this);
 		}
 
 		root.clear = function()

src/nodes/math.js

@@ -4,6 +4,7 @@
     //Converter
     function Converter() {
         this.addInput("in", "*");
+	this.addOutput("out");
         this.size = [80, 30];
     }