diff --git a/src/LGraphGroup.ts b/src/LGraphGroup.ts index d5874d6f3c..505548bc36 100644 --- a/src/LGraphGroup.ts +++ b/src/LGraphGroup.ts @@ -2,6 +2,7 @@ import { LiteGraph } from "./litegraph"; import { LGraphCanvas } from "./LGraphCanvas"; import { overlapBounding } from "./LiteGraphGlobal"; +import { LGraphNode } from "./LGraphNode"; export class LGraphGroup { @@ -248,4 +249,7 @@ export class LGraphGroup { { content: "Remove", callback: LGraphCanvas.onMenuNodeRemove } ]; } + + isPointInside = LGraphNode.prototype.isPointInside + setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas } diff --git a/src/LiteGraphGlobal.ts b/src/LiteGraphGlobal.ts index 8da0b40f9c..d8174437ce 100644 --- a/src/LiteGraphGlobal.ts +++ b/src/LiteGraphGlobal.ts @@ -1,6 +1,7 @@ import { LiteGraph } from "./litegraph"; import { LGraphNode } from "./LGraphNode"; import { drawSlot, SlotShape, SlotDirection, SlotType, LabelPosition } from "./draw"; +import { LGraph, LLink, LGraphGroup, DragAndScale, LGraphCanvas, ContextMenu, CurveEditor } from './litegraph' // ************************************************************* // LiteGraph CLASS ******* @@ -165,6 +166,15 @@ export class LiteGraphGlobal { // Whether to highlight the bounding box of selected groups highlight_selected_group = false + LGraph = LGraph + LLink = LLink + LGraphNode = LGraphNode + LGraphGroup = LGraphGroup + DragAndScale = DragAndScale + LGraphCanvas = LGraphCanvas + ContextMenu = ContextMenu + CurveEditor = CurveEditor + constructor() { //timer that works everywhere if (typeof performance != "undefined") { diff --git a/src/litegraph.js b/src/litegraph.js index 428fb3595b..bb3025e568 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -7,182 +7,17 @@ import { DragAndScale } from "./DragAndScale"; import { LGraphCanvas } from "./LGraphCanvas"; import { ContextMenu } from "./ContextMenu"; import { CurveEditor } from "./CurveEditor"; +import { loadPolyfills } from "./polyfills"; export { LGraph, LLink, LGraphNode, LGraphGroup, DragAndScale, LGraphCanvas, ContextMenu, CurveEditor } export const LiteGraph = new LiteGraphGlobal() - LiteGraph.LGraph = LGraph +export function clamp(v, a, b) { + return a > v ? a : b < v ? b : v; +}; - LiteGraph.LLink = LLink; - - LiteGraph.LGraphNode = LGraphNode; - - LGraphGroup.prototype.isPointInside = LGraphNode.prototype.isPointInside; - LGraphGroup.prototype.setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas; - - LiteGraph.LGraphGroup = LGraphGroup; - - LiteGraph.DragAndScale = DragAndScale; - - LiteGraph.LGraphCanvas = LGraphCanvas; - //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 - - LiteGraph.ContextMenu = ContextMenu; - - LiteGraph.closeAllContextMenus = function(ref_window) { - ref_window = ref_window || window; - - var elements = ref_window.document.querySelectorAll(".litecontextmenu"); - if (!elements.length) { - return; - } - - var result = []; - for (var i = 0; i < elements.length; i++) { - result.push(elements[i]); - } - - for (var i=0; i < result.length; i++) { - if (result[i].close) { - result[i].close(); - } else if (result[i].parentNode) { - result[i].parentNode.removeChild(result[i]); - } - } - }; - - LiteGraph.extendClass = function(target, origin) { - for (var i in origin) { - //copy class properties - if (target.hasOwnProperty(i)) { - continue; - } - target[i] = origin[i]; - } - - if (origin.prototype) { - //copy prototype properties - for (var i in origin.prototype) { - //only enumerable - if (!origin.prototype.hasOwnProperty(i)) { - continue; - } - - if (target.prototype.hasOwnProperty(i)) { - //avoid overwriting existing ones - continue; - } - - //copy getters - if (origin.prototype.__lookupGetter__(i)) { - target.prototype.__defineGetter__( - i, - origin.prototype.__lookupGetter__(i) - ); - } else { - target.prototype[i] = origin.prototype[i]; - } - - //and setters - if (origin.prototype.__lookupSetter__(i)) { - target.prototype.__defineSetter__( - i, - origin.prototype.__lookupSetter__(i) - ); - } - } - } - }; - - LiteGraph.CurveEditor = CurveEditor; - - export function clamp(v, a, b) { - return a > v ? a : b < v ? b : v; - }; - - if (typeof window != "undefined" && !window["requestAnimationFrame"]) { - window.requestAnimationFrame = - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - function(callback) { - window.setTimeout(callback, 1000 / 60); - }; - } +// Load legacy polyfills +loadPolyfills(); export { LGraphBadge, BadgePosition } from "./LGraphBadge" diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 0000000000..34718e25d0 --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,85 @@ + +//API ************************************************* +//like rect but rounded corners +export function loadPolyfills() { +if (typeof (window) != "undefined" && window.CanvasRenderingContext2D && !window.CanvasRenderingContext2D.prototype.roundRect) { + // @ts-expect-error Slightly broken polyfill - radius_low not impl. anywhere + 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 + +if (typeof window != "undefined" && !window["requestAnimationFrame"]) { + window.requestAnimationFrame = + // @ts-expect-error Legacy code + window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || + function (callback) { + window.setTimeout(callback, 1000 / 60); + }; +} +} \ No newline at end of file