mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
CurveEditor ES6 class conversion (#162)
This commit is contained in:
filtered
316
src/litegraph.js
316
src/litegraph.js
@@ -14084,180 +14084,168 @@ const globalExport = {};
|
||||
};
|
||||
|
||||
//used by some widgets to render a curve editor
|
||||
function CurveEditor( points )
|
||||
{
|
||||
this.points = points;
|
||||
this.selected = -1;
|
||||
this.nearest = -1;
|
||||
this.size = null; //stores last size used
|
||||
this.must_update = true;
|
||||
this.margin = 5;
|
||||
}
|
||||
class CurveEditor {
|
||||
constructor(points) {
|
||||
this.points = points;
|
||||
this.selected = -1;
|
||||
this.nearest = -1;
|
||||
this.size = null; //stores last size used
|
||||
this.must_update = true;
|
||||
this.margin = 5;
|
||||
}
|
||||
|
||||
CurveEditor.sampleCurve = function(f,points)
|
||||
{
|
||||
if(!points)
|
||||
return;
|
||||
for(var i = 0; i < points.length - 1; ++i)
|
||||
{
|
||||
var p = points[i];
|
||||
var pn = points[i+1];
|
||||
if(pn[0] < f)
|
||||
continue;
|
||||
var r = (pn[0] - p[0]);
|
||||
if( Math.abs(r) < 0.00001 )
|
||||
return p[1];
|
||||
var local_f = (f - p[0]) / r;
|
||||
return p[1] * (1.0 - local_f) + pn[1] * local_f;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
static sampleCurve(f, points) {
|
||||
if (!points)
|
||||
return;
|
||||
for (var i = 0; i < points.length - 1; ++i) {
|
||||
var p = points[i];
|
||||
var pn = points[i + 1];
|
||||
if (pn[0] < f)
|
||||
continue;
|
||||
var r = (pn[0] - p[0]);
|
||||
if (Math.abs(r) < 0.00001)
|
||||
return p[1];
|
||||
var local_f = (f - p[0]) / r;
|
||||
return p[1] * (1.0 - local_f) + pn[1] * local_f;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
CurveEditor.prototype.draw = function( ctx, size, graphcanvas, background_color, line_color, inactive )
|
||||
{
|
||||
var points = this.points;
|
||||
if(!points)
|
||||
return;
|
||||
this.size = size;
|
||||
var w = size[0] - this.margin * 2;
|
||||
var h = size[1] - this.margin * 2;
|
||||
draw(ctx, size, graphcanvas, background_color, line_color, inactive) {
|
||||
var points = this.points;
|
||||
if (!points)
|
||||
return;
|
||||
this.size = size;
|
||||
var w = size[0] - this.margin * 2;
|
||||
var h = size[1] - this.margin * 2;
|
||||
|
||||
line_color = line_color || "#666";
|
||||
line_color = line_color || "#666";
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(this.margin,this.margin);
|
||||
ctx.save();
|
||||
ctx.translate(this.margin, this.margin);
|
||||
|
||||
if(background_color)
|
||||
{
|
||||
ctx.fillStyle = "#111";
|
||||
ctx.fillRect(0,0,w,h);
|
||||
ctx.fillStyle = "#222";
|
||||
ctx.fillRect(w*0.5,0,1,h);
|
||||
ctx.strokeStyle = "#333";
|
||||
ctx.strokeRect(0,0,w,h);
|
||||
}
|
||||
ctx.strokeStyle = line_color;
|
||||
if(inactive)
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
for(var i = 0; i < points.length; ++i)
|
||||
{
|
||||
var p = points[i];
|
||||
ctx.lineTo( p[0] * w, (1.0 - p[1]) * h );
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1;
|
||||
if(!inactive)
|
||||
for(var i = 0; i < points.length; ++i)
|
||||
{
|
||||
var p = points[i];
|
||||
ctx.fillStyle = this.selected == i ? "#FFF" : (this.nearest == i ? "#DDD" : "#AAA");
|
||||
ctx.beginPath();
|
||||
ctx.arc( p[0] * w, (1.0 - p[1]) * h, 2, 0, Math.PI * 2 );
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
if (background_color) {
|
||||
ctx.fillStyle = "#111";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
ctx.fillStyle = "#222";
|
||||
ctx.fillRect(w * 0.5, 0, 1, h);
|
||||
ctx.strokeStyle = "#333";
|
||||
ctx.strokeRect(0, 0, w, h);
|
||||
}
|
||||
ctx.strokeStyle = line_color;
|
||||
if (inactive)
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
for (var i = 0; i < points.length; ++i) {
|
||||
var p = points[i];
|
||||
ctx.lineTo(p[0] * w, (1.0 - p[1]) * h);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1;
|
||||
if (!inactive)
|
||||
for (var i = 0; i < points.length; ++i) {
|
||||
var p = points[i];
|
||||
ctx.fillStyle = this.selected == i ? "#FFF" : (this.nearest == i ? "#DDD" : "#AAA");
|
||||
ctx.beginPath();
|
||||
ctx.arc(p[0] * w, (1.0 - p[1]) * h, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
//localpos is mouse in curve editor space
|
||||
CurveEditor.prototype.onMouseDown = function( localpos, graphcanvas )
|
||||
{
|
||||
var points = this.points;
|
||||
if(!points)
|
||||
return;
|
||||
if( localpos[1] < 0 )
|
||||
return;
|
||||
//localpos is mouse in curve editor space
|
||||
onMouseDown(localpos, graphcanvas) {
|
||||
var points = this.points;
|
||||
if (!points)
|
||||
return;
|
||||
if (localpos[1] < 0)
|
||||
return;
|
||||
|
||||
//this.captureInput(true);
|
||||
var w = this.size[0] - this.margin * 2;
|
||||
var h = this.size[1] - this.margin * 2;
|
||||
var x = localpos[0] - this.margin;
|
||||
var y = localpos[1] - this.margin;
|
||||
var pos = [x,y];
|
||||
var max_dist = 30 / graphcanvas.ds.scale;
|
||||
//search closer one
|
||||
this.selected = this.getCloserPoint(pos, max_dist);
|
||||
//create one
|
||||
if(this.selected == -1)
|
||||
{
|
||||
var point = [x / w, 1 - y / h];
|
||||
points.push(point);
|
||||
points.sort(function(a,b){ return a[0] - b[0]; });
|
||||
this.selected = points.indexOf(point);
|
||||
this.must_update = true;
|
||||
}
|
||||
if(this.selected != -1)
|
||||
return true;
|
||||
}
|
||||
//this.captureInput(true);
|
||||
var w = this.size[0] - this.margin * 2;
|
||||
var h = this.size[1] - this.margin * 2;
|
||||
var x = localpos[0] - this.margin;
|
||||
var y = localpos[1] - this.margin;
|
||||
var pos = [x, y];
|
||||
var max_dist = 30 / graphcanvas.ds.scale;
|
||||
//search closer one
|
||||
this.selected = this.getCloserPoint(pos, max_dist);
|
||||
//create one
|
||||
if (this.selected == -1) {
|
||||
var point = [x / w, 1 - y / h];
|
||||
points.push(point);
|
||||
points.sort(function (a, b) { return a[0] - b[0]; });
|
||||
this.selected = points.indexOf(point);
|
||||
this.must_update = true;
|
||||
}
|
||||
if (this.selected != -1)
|
||||
return true;
|
||||
}
|
||||
|
||||
CurveEditor.prototype.onMouseMove = function( localpos, graphcanvas )
|
||||
{
|
||||
var points = this.points;
|
||||
if(!points)
|
||||
return;
|
||||
var s = this.selected;
|
||||
if(s < 0)
|
||||
return;
|
||||
var x = (localpos[0] - this.margin) / (this.size[0] - this.margin * 2 );
|
||||
var y = (localpos[1] - this.margin) / (this.size[1] - this.margin * 2 );
|
||||
var curvepos = [(localpos[0] - this.margin),(localpos[1] - this.margin)];
|
||||
var max_dist = 30 / graphcanvas.ds.scale;
|
||||
this._nearest = this.getCloserPoint(curvepos, max_dist);
|
||||
var point = points[s];
|
||||
if(point)
|
||||
{
|
||||
var is_edge_point = s == 0 || s == points.length - 1;
|
||||
if( !is_edge_point && (localpos[0] < -10 || localpos[0] > this.size[0] + 10 || localpos[1] < -10 || localpos[1] > this.size[1] + 10) )
|
||||
{
|
||||
points.splice(s,1);
|
||||
this.selected = -1;
|
||||
return;
|
||||
}
|
||||
if( !is_edge_point ) //not edges
|
||||
point[0] = clamp(x, 0, 1);
|
||||
else
|
||||
point[0] = s == 0 ? 0 : 1;
|
||||
point[1] = 1.0 - clamp(y, 0, 1);
|
||||
points.sort(function(a,b){ return a[0] - b[0]; });
|
||||
this.selected = points.indexOf(point);
|
||||
this.must_update = true;
|
||||
}
|
||||
}
|
||||
onMouseMove(localpos, graphcanvas) {
|
||||
var points = this.points;
|
||||
if (!points)
|
||||
return;
|
||||
var s = this.selected;
|
||||
if (s < 0)
|
||||
return;
|
||||
var x = (localpos[0] - this.margin) / (this.size[0] - this.margin * 2);
|
||||
var y = (localpos[1] - this.margin) / (this.size[1] - this.margin * 2);
|
||||
var curvepos = [(localpos[0] - this.margin), (localpos[1] - this.margin)];
|
||||
var max_dist = 30 / graphcanvas.ds.scale;
|
||||
this._nearest = this.getCloserPoint(curvepos, max_dist);
|
||||
var point = points[s];
|
||||
if (point) {
|
||||
var is_edge_point = s == 0 || s == points.length - 1;
|
||||
if (!is_edge_point && (localpos[0] < -10 || localpos[0] > this.size[0] + 10 || localpos[1] < -10 || localpos[1] > this.size[1] + 10)) {
|
||||
points.splice(s, 1);
|
||||
this.selected = -1;
|
||||
return;
|
||||
}
|
||||
if (!is_edge_point) //not edges
|
||||
point[0] = clamp(x, 0, 1);
|
||||
|
||||
CurveEditor.prototype.onMouseUp = function( localpos, graphcanvas )
|
||||
{
|
||||
this.selected = -1;
|
||||
return false;
|
||||
}
|
||||
else
|
||||
point[0] = s == 0 ? 0 : 1;
|
||||
point[1] = 1.0 - clamp(y, 0, 1);
|
||||
points.sort(function (a, b) { return a[0] - b[0]; });
|
||||
this.selected = points.indexOf(point);
|
||||
this.must_update = true;
|
||||
}
|
||||
}
|
||||
|
||||
CurveEditor.prototype.getCloserPoint = function(pos, max_dist)
|
||||
{
|
||||
var points = this.points;
|
||||
if(!points)
|
||||
return -1;
|
||||
max_dist = max_dist || 30;
|
||||
var w = (this.size[0] - this.margin * 2);
|
||||
var h = (this.size[1] - this.margin * 2);
|
||||
var num = points.length;
|
||||
var p2 = [0,0];
|
||||
var min_dist = 1000000;
|
||||
var closest = -1;
|
||||
var last_valid = -1;
|
||||
for(var i = 0; i < num; ++i)
|
||||
{
|
||||
var p = points[i];
|
||||
p2[0] = p[0] * w;
|
||||
p2[1] = (1.0 - p[1]) * h;
|
||||
if(p2[0] < pos[0])
|
||||
last_valid = i;
|
||||
var dist = vec2.distance(pos,p2);
|
||||
if(dist > min_dist || dist > max_dist)
|
||||
continue;
|
||||
closest = i;
|
||||
min_dist = dist;
|
||||
}
|
||||
return closest;
|
||||
}
|
||||
onMouseUp(localpos, graphcanvas) {
|
||||
this.selected = -1;
|
||||
return false;
|
||||
}
|
||||
|
||||
getCloserPoint(pos, max_dist) {
|
||||
var points = this.points;
|
||||
if (!points)
|
||||
return -1;
|
||||
max_dist = max_dist || 30;
|
||||
var w = (this.size[0] - this.margin * 2);
|
||||
var h = (this.size[1] - this.margin * 2);
|
||||
var num = points.length;
|
||||
var p2 = [0, 0];
|
||||
var min_dist = 1000000;
|
||||
var closest = -1;
|
||||
var last_valid = -1;
|
||||
for (var i = 0; i < num; ++i) {
|
||||
var p = points[i];
|
||||
p2[0] = p[0] * w;
|
||||
p2[1] = (1.0 - p[1]) * h;
|
||||
if (p2[0] < pos[0])
|
||||
last_valid = i;
|
||||
var dist = vec2.distance(pos, p2);
|
||||
if (dist > min_dist || dist > max_dist)
|
||||
continue;
|
||||
closest = i;
|
||||
min_dist = dist;
|
||||
}
|
||||
return closest;
|
||||
}
|
||||
}
|
||||
|
||||
LiteGraph.CurveEditor = CurveEditor;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user