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

Remove extending the Javascript builtin objects

Browse Source 
- Remove extending the Math & CanvasRenderingContext2D classes.
  - It was messing up the typescript 4.9+
  - Using the built-in roundRect function
  - Adding global clamp function
- Add some type corrections in litegraph.d.ts
- Fix a couple of build issues

Co-authored-by: Ranuka Perera <premium@sawrc.com>
Co-authored-by: Moritz Ulmer <moritz.ulmer@posteo.de>
This commit is contained in:
Moritz Ulmer
2023-06-30 13:31:00 +02:00
parent 0a4bd193a3
commit aec5d622a9
12 changed files with 51 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@@ -38,13 +38,15 @@
"eslint": "^8.37.0 ",
"eslint-plugin-jest": "^27.2.1",
"express": "^4.17.1",
"google-closure-compiler": "^20171112.0.0",
"google-closure-compiler": "^20230411.0.0",
"grunt": "^1.1.0",
"grunt-cli": "^1.2.0",
"grunt-closure-tools": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-concat": "^2.1.0",
"jest": "^28.1.3",
"nodemon": "^1.19.4",
"rimraf": "^2.7.1"
"jest-cli": "^28.1.3",
"nodemon": "^2.0.22",
"rimraf": "^5.0.0",
"yuidocjs": "^0.10.2"
}
}

29
src/litegraph.d.ts vendored
View File

@@ -698,6 +698,8 @@ export declare class LGraphNode {
getInputInfo(
slot: number
): { link: number; name: string; type: string | 0 } | null;
/** Returns the link info in the connection of an input slot */
getInputLink(slot: number): LLink | null;
/** returns the node connected in the input slot */
getInputNode(slot: number): LGraphNode | null;
/** returns the value of an input with this name, otherwise checks if there is a property with that name */
@@ -729,6 +731,8 @@ export declare class LGraphNode {
* @param link_id in case you want to trigger and specific output link in a slot
*/
clearTriggeredSlot(slot: number, link_id?: number): void;
/** changes node size and triggers callback */
setSize(size: Vector2): void;
/**
* add a new property to this node
* @param name
@@ -801,9 +805,10 @@ export declare class LGraphNode {
direction: string;
links: null;
};
setValue(v: any): void;
/** computes the size of a node according to its inputs and output slots */
computeSize(): [number, number];
/** computes the minimum size of a node according to its inputs and output slots */
computeSize(minHeight?: Vector2): Vector2;
/** returns all the info available about a property of this node */
getPropertyInfo(property: string): object;
/**
* https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#node-widgets
* @return created widget
@@ -1487,20 +1492,4 @@ declare class ContextMenu {
getFirstEvent(): void;
}
declare global {
interface CanvasRenderingContext2D {
/** like rect but rounded corners */
roundRect(
x: number,
y: number,
width: number,
height: number,
radius: number,
radiusLow: number
): void;
}
interface Math {
clamp(v: number, min: number, max: number): number;
}
}
declare function clamp(v: number, min: number, max: number): number;

91
src/litegraph.js
View File

@@ -3569,8 +3569,8 @@
/**
* computes the minimum size of a node according to its inputs and output slots
* @method computeSize
* @param {number} minHeight
* @return {number} the total size
* @param {vec2} minHeight
* @return {vec2} the total size
*/
LGraphNode.prototype.computeSize = function(out) {
if (this.constructor.size) {
@@ -9997,7 +9997,7 @@ LGraphNode.prototype.executeAction = function(action)
break;
case "slider":
var old_value = w.value;
var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1);
var nvalue = clamp((x - 15) / (widget_width - 30), 0, 1);
if(w.options.read_only) break;
w.value = w.options.min + (w.options.max - w.options.min) * nvalue;
if (old_value != w.value) {
@@ -13378,82 +13378,6 @@ LGraphNode.prototype.executeAction = function(action)
};
//API *************************************************
//like rect but rounded corners
if (typeof(window) != "undefined" && window.CanvasRenderingContext2D && !window.CanvasRenderingContext2D.prototype.roundRect) {
window.CanvasRenderingContext2D.prototype.roundRect = function(
x,
y,
w,
h,
radius,
radius_low
) {
var top_left_radius = 0;
var top_right_radius = 0;
var bottom_left_radius = 0;
var bottom_right_radius = 0;
if ( radius === 0 )
{
this.rect(x,y,w,h);
return;
}
if(radius_low === undefined)
radius_low = radius;
//make it compatible with official one
if(radius != null && radius.constructor === Array)
{
if(radius.length == 1)
top_left_radius = top_right_radius = bottom_left_radius = bottom_right_radius = radius[0];
else if(radius.length == 2)
{
top_left_radius = bottom_right_radius = radius[0];
top_right_radius = bottom_left_radius = radius[1];
}
else if(radius.length == 4)
{
top_left_radius = radius[0];
top_right_radius = radius[1];
bottom_left_radius = radius[2];
bottom_right_radius = radius[3];
}
else
return;
}
else //old using numbers
{
top_left_radius = radius || 0;
top_right_radius = radius || 0;
bottom_left_radius = radius_low || 0;
bottom_right_radius = radius_low || 0;
}
//top right
this.moveTo(x + top_left_radius, y);
this.lineTo(x + w - top_right_radius, y);
this.quadraticCurveTo(x + w, y, x + w, y + top_right_radius);
//bottom right
this.lineTo(x + w, y + h - bottom_right_radius);
this.quadraticCurveTo(
x + w,
y + h,
x + w - bottom_right_radius,
y + h
);
//bottom left
this.lineTo(x + bottom_right_radius, y + h);
this.quadraticCurveTo(x, y + h, x, y + h - bottom_left_radius);
//top left
this.lineTo(x, y + bottom_left_radius);
this.quadraticCurveTo(x, y, x + top_left_radius, y);
};
}//if
function compareObjects(a, b) {
for (var i in a) {
if (a[i] != b[i]) {
@@ -14182,10 +14106,10 @@ LGraphNode.prototype.executeAction = function(action)
return;
}
if( !is_edge_point ) //not edges
point[0] = Math.clamp(x,0,1);
point[0] = clamp(x, 0, 1);
else
point[0] = s == 0 ? 0 : 1;
point[1] = 1.0 - Math.clamp(y,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;
@@ -14333,10 +14257,11 @@ LGraphNode.prototype.executeAction = function(action)
return oDOM.removeEventListener(sEvent, fCall, capture);
}
}
Math.clamp = function(v, a, b) {
function clamp(v, a, b) {
return a > v ? a : b < v ? b : v;
};
global.clamp = clamp;
if (typeof window != "undefined" && !window["requestAnimationFrame"]) {
window.requestAnimationFrame =

2
src/nodes/events.js
View File

@@ -133,7 +133,7 @@
if(index != null)
{
index = Math.floor(index);
index = Math.clamp( index, 0, this.outputs ? (this.outputs.length - 2) : 0 );
index = clamp( index, 0, this.outputs ? (this.outputs.length - 2) : 0 );
if( index != this.properties.index )
{
this.properties.index = index;

18
src/nodes/gltextures.js
View File

@@ -2077,7 +2077,7 @@ void main() {\n\
LGraphTextureLinearAvgSmooth._shader_avg = new GL.Shader( GL.Shader.SCREEN_VERTEX_SHADER, LGraphTextureLinearAvgSmooth.pixel_shader_avg );
}
var samples = Math.clamp(this.properties.samples,0,64);
var samples = clamp(this.properties.samples,0,64);
var frame = this.frame;
var interval = this.properties.frames_interval;
@@ -2708,11 +2708,11 @@ void main() {\n\
var c = this.properties.color;
ctx.fillStyle =
"rgb(" +
Math.floor(Math.clamp(c[0], 0, 1) * 255) +
Math.floor(clamp(c[0], 0, 1) * 255) +
"," +
Math.floor(Math.clamp(c[1], 0, 1) * 255) +
Math.floor(clamp(c[1], 0, 1) * 255) +
"," +
Math.floor(Math.clamp(c[2], 0, 1) * 255) +
Math.floor(clamp(c[2], 0, 1) * 255) +
")";
if (this.flags.collapsed) {
this.boxcolor = ctx.fillStyle;
@@ -3540,7 +3540,7 @@ LGraphTextureBlur.pixel_shader = "precision highp float;\n\
var currentSource = currentDestination;
var iterations = this.iterations;
iterations = Math.clamp(iterations, 1, 16) | 0;
iterations = clamp(iterations, 1, 16) | 0;
var texel_size = uniforms.u_texel_size;
var intensity = this.intensity;
@@ -4678,14 +4678,14 @@ void main(void){\n\
{
if(split)
{
values[i*4] = Math.clamp( this.sampleCurve(i/num,this._points.R)*255,0,255);
values[i*4+1] = Math.clamp( this.sampleCurve(i/num,this._points.G)*255,0,255);
values[i*4+2] = Math.clamp( this.sampleCurve(i/num,this._points.B)*255,0,255);
values[i*4] = clamp( this.sampleCurve(i/num,this._points.R)*255,0,255);
values[i*4+1] = clamp( this.sampleCurve(i/num,this._points.G)*255,0,255);
values[i*4+2] = clamp( this.sampleCurve(i/num,this._points.B)*255,0,255);
}
else
{
var v = this.sampleCurve(i/num);//sample curve
values[i*4] = values[i*4+1] = values[i*4+2] = Math.clamp(v*255,0,255);
values[i*4] = values[i*4+1] = values[i*4+2] = clamp(v*255,0,255);
}
values[i*4+3] = 255; //alpha fixed
}

4
src/nodes/graphics.js
View File

@@ -63,10 +63,10 @@
ctx.strokeStyle = colors[i];
ctx.beginPath();
var v = values[0] * scale * -1 + offset;
ctx.moveTo(0, Math.clamp(v, 0, size[1]));
ctx.moveTo(0, clamp(v, 0, size[1]));
for (var j = 1; j < values.length && j < size[0]; ++j) {
var v = values[j] * scale * -1 + offset;
ctx.lineTo(j, Math.clamp(v, 0, size[1]));
ctx.lineTo(j, clamp(v, 0, size[1]));
}
ctx.stroke();
}

4
src/nodes/interface.js
View File

@@ -244,7 +244,7 @@
this._remainder = steps % 1;
steps = steps | 0;
var v = Math.clamp(
var v = clamp(
this.properties.value + steps * this.properties.step,
this.properties.min,
this.properties.max
@@ -257,7 +257,7 @@
WidgetNumber.prototype.onMouseUp = function(e, pos) {
if (e.click_time < 200) {
var steps = pos[1] > this.size[1] * 0.5 ? -1 : 1;
this.properties.value = Math.clamp(
this.properties.value = clamp(
this.properties.value + steps * this.properties.step,
this.properties.min,
this.properties.max

4
src/nodes/math.js
View File

@@ -168,7 +168,7 @@
this._last_v = ((v - in_min) / (in_max - in_min)) * (out_max - out_min) + out_min;
this.setOutputData(0, this._last_v);
this.setOutputData(1, Math.clamp( this._last_v, out_min, out_max ));
this.setOutputData(1, clamp( this._last_v, out_min, out_max ));
};
MathRange.prototype.onDrawBackground = function(ctx) {
@@ -498,7 +498,7 @@
var edge1 = this.properties.B;
// Scale, bias and saturate x to 0..1 range
v = Math.clamp((v - edge0) / (edge1 - edge0), 0.0, 1.0);
v = clamp((v - edge0) / (edge1 - edge0), 0.0, 1.0);
// Evaluate polynomial
v = v * v * (3 - 2 * v);

4
src/nodes/math3d.js
View File

@@ -544,7 +544,7 @@
for(var i = 0; i < 3; ++i)
{
var r = range_max[i] - range_min[i];
this._clamped[i] = Math.clamp( this._value[i], range_min[i], range_max[i] );
this._clamped[i] = clamp( this._value[i], range_min[i], range_max[i] );
if(r == 0)
{
this._value[i] = (target_min[i] + target_max[i]) * 0.5;
@@ -553,7 +553,7 @@
var n = (this._value[i] - range_min[i]) / r;
if(this.properties.clamp)
n = Math.clamp(n,0,1);
n = clamp(n,0,1);
var t = target_max[i] - target_min[i];
this._value[i] = target_min[i] + n * t;
}

4
src/nodes/midi.js
View File

@@ -891,13 +891,13 @@
case "value1":
var v = this.getInputData(i);
if (v != null) {
this.properties.value1 = Math.clamp(v|0,0,127);
this.properties.value1 = clamp(v|0,0,127);
}
break;
case "value2":
var v = this.getInputData(i);
if (v != null) {
this.properties.value2 = Math.clamp(v|0,0,127);
this.properties.value2 = clamp(v|0,0,127);
}
break;
}

2
utils/builder.py
View File

@@ -4,7 +4,7 @@ import re, os, sys, time, tempfile, shutil
import argparse
from datetime import date
compiler_path = "../node_modules/google-closure-compiler/compiler.jar"
compiler_path = "../node_modules/google-closure-compiler-java/compiler.jar"
root_path = "./"
#arguments

8
utils/generate_doc.sh
View File

@@ -1 +1,7 @@
yuidoc ../src -o ../doc
#!/bin/bash
# For migration to JSDoc (YUIDoc was deprecated in 2014): https://github.com/pnstickne/yuidoc-to-jsdoc
cd "$(dirname "$0")" || exit
rm -rf ../docs/*
../node_modules/.bin/yuidoc ../src -o ../docs