Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-11 02:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added viewport rendering

Browse Source
This commit is contained in:
tamat
2021-03-19 20:56:14 +01:00
parent 0eae390b43
commit 4b47ed9056
4 changed files with 86 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/litegraph.js
View File

@@ -4447,7 +4447,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;
@@ -4456,6 +4456,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;
@@ -4640,7 +4647,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 || {};
@@ -4735,6 +4742,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);
@@ -6755,7 +6764,7 @@ LGraphNode.prototype.executeAction = function(action)
this.last_draw_time = now;
if (this.graph) {
this.ds.computeVisibleArea();
this.ds.computeVisibleArea(this.viewport);
}
if (
@@ -6804,15 +6813,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();
}
@@ -6836,7 +6841,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) {
@@ -6979,9 +6984,8 @@ LGraphNode.prototype.executeAction = function(action)
this.onDrawOverlay(ctx);
}
if (this.dirty_area) {
if (area) {
ctx.restore();
//this.dirty_area = null;
}
if (ctx.finish2D) {
@@ -7177,11 +7181,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];