mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 23:50:08 +00:00
Convert CurveEditor to TypeScript (#211)
This commit is contained in:
filtered
@@ -1,168 +1,173 @@
|
||||
// @ts-nocheck
|
||||
import { clamp } from "./litegraph";
|
||||
import type { Point, Rect } from "./interfaces"
|
||||
import { clamp, LGraphCanvas } from "./litegraph"
|
||||
import { distance } from "./measure"
|
||||
|
||||
//used by some widgets to render a curve editor
|
||||
|
||||
export 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;
|
||||
points: Point[]
|
||||
selected: number
|
||||
nearest: number
|
||||
size: Rect
|
||||
must_update: boolean
|
||||
margin: number
|
||||
_nearest: number
|
||||
|
||||
constructor(points: Point[]) {
|
||||
this.points = points
|
||||
this.selected = -1
|
||||
this.nearest = -1
|
||||
this.size = null //stores last size used
|
||||
this.must_update = true
|
||||
this.margin = 5
|
||||
}
|
||||
|
||||
static sampleCurve(f, points) {
|
||||
static sampleCurve(f: number, points: Point[]): number {
|
||||
if (!points)
|
||||
return;
|
||||
for (var i = 0; i < points.length - 1; ++i) {
|
||||
var p = points[i];
|
||||
var pn = points[i + 1];
|
||||
return
|
||||
for (let i = 0; i < points.length - 1; ++i) {
|
||||
const p = points[i]
|
||||
const pn = points[i + 1]
|
||||
if (pn[0] < f)
|
||||
continue;
|
||||
var r = (pn[0] - p[0]);
|
||||
continue
|
||||
const 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 p[1]
|
||||
const local_f = (f - p[0]) / r
|
||||
return p[1] * (1.0 - local_f) + pn[1] * local_f
|
||||
}
|
||||
return 0;
|
||||
return 0
|
||||
}
|
||||
|
||||
draw(ctx, size, graphcanvas, background_color, line_color, inactive) {
|
||||
var points = this.points;
|
||||
draw(ctx: CanvasRenderingContext2D, size: Rect, graphcanvas?: LGraphCanvas, background_color?: string, line_color?: string, inactive = false): void {
|
||||
const points = this.points
|
||||
if (!points)
|
||||
return;
|
||||
this.size = size;
|
||||
var w = size[0] - this.margin * 2;
|
||||
var h = size[1] - this.margin * 2;
|
||||
return
|
||||
this.size = size
|
||||
const w = size[0] - this.margin * 2
|
||||
const 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.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;
|
||||
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.globalAlpha = 0.5
|
||||
ctx.beginPath()
|
||||
for (let i = 0; i < points.length; ++i) {
|
||||
const p = points[i]
|
||||
ctx.lineTo(p[0] * w, (1.0 - p[1]) * h)
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1;
|
||||
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();
|
||||
for (let i = 0; i < points.length; ++i) {
|
||||
const 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();
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
//localpos is mouse in curve editor space
|
||||
onMouseDown(localpos, graphcanvas) {
|
||||
var points = this.points;
|
||||
onMouseDown(localpos: Point, graphcanvas: LGraphCanvas): boolean {
|
||||
const points = this.points
|
||||
if (!points)
|
||||
return;
|
||||
return
|
||||
if (localpos[1] < 0)
|
||||
return;
|
||||
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;
|
||||
const w = this.size[0] - this.margin * 2
|
||||
const h = this.size[1] - this.margin * 2
|
||||
const x = localpos[0] - this.margin
|
||||
const y = localpos[1] - this.margin
|
||||
const pos: Point = [x, y]
|
||||
const max_dist = 30 / graphcanvas.ds.scale
|
||||
//search closer one
|
||||
this.selected = this.getCloserPoint(pos, max_dist);
|
||||
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;
|
||||
const point: 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;
|
||||
return true
|
||||
}
|
||||
|
||||
onMouseMove(localpos, graphcanvas) {
|
||||
var points = this.points;
|
||||
onMouseMove(localpos: Point, graphcanvas: LGraphCanvas): void {
|
||||
const points = this.points
|
||||
if (!points)
|
||||
return;
|
||||
var s = this.selected;
|
||||
return
|
||||
const 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];
|
||||
return
|
||||
const x = (localpos[0] - this.margin) / (this.size[0] - this.margin * 2)
|
||||
const y = (localpos[1] - this.margin) / (this.size[1] - this.margin * 2)
|
||||
const curvepos: Point = [(localpos[0] - this.margin), (localpos[1] - this.margin)]
|
||||
const max_dist = 30 / graphcanvas.ds.scale
|
||||
this._nearest = this.getCloserPoint(curvepos, max_dist)
|
||||
const point = points[s]
|
||||
if (point) {
|
||||
var is_edge_point = s == 0 || s == points.length - 1;
|
||||
const 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;
|
||||
points.splice(s, 1)
|
||||
this.selected = -1
|
||||
return
|
||||
}
|
||||
if (!is_edge_point) //not edges
|
||||
point[0] = clamp(x, 0, 1);
|
||||
|
||||
|
||||
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;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
onMouseUp(localpos, graphcanvas) {
|
||||
this.selected = -1;
|
||||
return false;
|
||||
// Former params: localpos, graphcanvas
|
||||
onMouseUp(): boolean {
|
||||
this.selected = -1
|
||||
return false
|
||||
}
|
||||
|
||||
getCloserPoint(pos, max_dist) {
|
||||
var points = this.points;
|
||||
getCloserPoint(pos: Point, max_dist: number): number {
|
||||
const 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);
|
||||
return -1
|
||||
max_dist = max_dist || 30
|
||||
const w = (this.size[0] - this.margin * 2)
|
||||
const h = (this.size[1] - this.margin * 2)
|
||||
const num = points.length
|
||||
const p2: Point = [0, 0]
|
||||
let min_dist = 1000000
|
||||
let closest = -1
|
||||
for (let i = 0; i < num; ++i) {
|
||||
const p = points[i]
|
||||
p2[0] = p[0] * w
|
||||
p2[1] = (1.0 - p[1]) * h
|
||||
const dist = distance(pos, p2)
|
||||
if (dist > min_dist || dist > max_dist)
|
||||
continue;
|
||||
closest = i;
|
||||
min_dist = dist;
|
||||
continue
|
||||
closest = i
|
||||
min_dist = dist
|
||||
}
|
||||
return closest;
|
||||
return closest
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user