mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 09:44:06 +00:00
Clean litegraph module entry file (#171)
* Move LiteGraph global class props, fix duplicates * Split polyfills out to separate file * Move prototype modifications to class decl
This commit is contained in:
filtered
@@ -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
|
||||
}
|
||||
|
||||
@@ -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") {
|
||||
|
||||
177
src/litegraph.js
177
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"
|
||||
|
||||
85
src/polyfills.ts
Normal file
85
src/polyfills.ts
Normal file
@@ -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);
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user