Remove extending the Javascript builtin objects

- 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>

src/litegraph.d.ts

@@ -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;

src/litegraph.js

@@ -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 =

src/nodes/events.js

@@ -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;

src/nodes/gltextures.js

@@ -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
 		}

src/nodes/graphics.js

@@ -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();
             }

src/nodes/interface.js

@@ -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

src/nodes/math.js

@@ -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);
 

src/nodes/math3d.js

@@ -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;
 			}

src/nodes/midi.js

@@ -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;
                 }