Skip to content

Commit

Permalink
LGraphGroup ES6 class conversion (#100)
Browse files Browse the repository at this point in the history 
Co-authored-by: filtered <[email protected]>
  • Loading branch information
@huchenlei @webfiltered
huchenlei and webfiltered authored Aug 29, 2024
1 parent 643b2a3 commit 26cccd6
Showing 1 changed file with 128 additions and 125 deletions.
253 changes: 128 additions & 125 deletions src/litegraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4797,150 +4797,153 @@ const globalExport = {};

globalThis.LGraphNode = LiteGraph.LGraphNode = LGraphNode;

function LGraphGroup(title) {
this._ctor(title);
}
class LGraphGroup {

globalThis.LGraphGroup = LiteGraph.LGraphGroup = LGraphGroup;
constructor(title) {
this._ctor(title);
}

LGraphGroup.prototype._ctor = function(title) {
this.title = title || "Group";
this.font_size = LiteGraph.DEFAULT_GROUP_FONT || 24;
this.color = LGraphCanvas.node_colors.pale_blue
? LGraphCanvas.node_colors.pale_blue.groupcolor
: "#AAA";
this._bounding = new Float32Array([10, 10, 140, 80]);
this._pos = this._bounding.subarray(0, 2);
this._size = this._bounding.subarray(2, 4);
this._nodes = [];
this.graph = null;

Object.defineProperty(this, "pos", {
set: function(v) {
if (!v || v.length < 2) {
return;
}
this._pos[0] = v[0];
this._pos[1] = v[1];
},
get: function() {
return this._pos;
},
enumerable: true
});
_ctor(title) {
this.title = title || "Group";
this.font_size = LiteGraph.DEFAULT_GROUP_FONT || 24;
this.color = LGraphCanvas.node_colors.pale_blue
? LGraphCanvas.node_colors.pale_blue.groupcolor
: "#AAA";
this._bounding = new Float32Array([10, 10, 140, 80]);
this._pos = this._bounding.subarray(0, 2);
this._size = this._bounding.subarray(2, 4);
this._nodes = [];
this.graph = null;

Object.defineProperty(this, "size", {
set: function(v) {
if (!v || v.length < 2) {
return;
}
this._size[0] = Math.max(140, v[0]);
this._size[1] = Math.max(80, v[1]);
},
get: function() {
return this._size;
},
enumerable: true
});
};
Object.defineProperty(this, "pos", {
set: function (v) {
if (!v || v.length < 2) {
return;
}
this._pos[0] = v[0];
this._pos[1] = v[1];
},
get: function () {
return this._pos;
},
enumerable: true
});

LGraphGroup.prototype.configure = function(o) {
this.title = o.title;
this._bounding.set(o.bounding);
this.color = o.color;
if (o.font_size) {
this.font_size = o.font_size;
Object.defineProperty(this, "size", {
set: function (v) {
if (!v || v.length < 2) {
return;
}
this._size[0] = Math.max(140, v[0]);
this._size[1] = Math.max(80, v[1]);
},
get: function () {
return this._size;
},
enumerable: true
});
}
};

LGraphGroup.prototype.serialize = function() {
var b = this._bounding;
return {
title: this.title,
bounding: [
Math.round(b[0]),
Math.round(b[1]),
Math.round(b[2]),
Math.round(b[3])
],
color: this.color,
font_size: this.font_size
};
};

LGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes) {
this._pos[0] += deltax;
this._pos[1] += deltay;
if (ignore_nodes) {
return;
}
for (var i = 0; i < this._nodes.length; ++i) {
var node = this._nodes[i];
node.pos[0] += deltax;
node.pos[1] += deltay;
configure(o) {
this.title = o.title;
this._bounding.set(o.bounding);
this.color = o.color;
if (o.font_size) {
this.font_size = o.font_size;
}
}
};

LGraphGroup.prototype.recomputeInsideNodes = function() {
this._nodes.length = 0;
var nodes = this.graph._nodes;
var node_bounding = new Float32Array(4);

for (var i = 0; i < nodes.length; ++i) {
var node = nodes[i];
node.getBounding(node_bounding);
if (!overlapBounding(this._bounding, node_bounding)) {
continue;
} //out of the visible area
this._nodes.push(node);
serialize() {
var b = this._bounding;
return {
title: this.title,
bounding: [
Math.round(b[0]),
Math.round(b[1]),
Math.round(b[2]),
Math.round(b[3])
],
color: this.color,
font_size: this.font_size
};
}
};

/**
* Add nodes to the group and adjust the group's position and size accordingly
* @param {LGraphNode[]} nodes - The nodes to add to the group
* @param {number} [padding=10] - The padding around the group
* @returns {void}
*/
LGraphGroup.prototype.addNodes = function(nodes, padding = 10) {
if (!this._nodes && nodes.length === 0) return;

const allNodes = [...(this._nodes || []), ...nodes];

const bounds = allNodes.reduce((acc, node) => {
const [x, y] = node.pos;
const [width, height] = node.size;
const isReroute = node.type === "Reroute";
const isCollapsed = node.flags?.collapsed;

const top = y - (isReroute ? 0 : LiteGraph.NODE_TITLE_HEIGHT);
const bottom = isCollapsed ? top + LiteGraph.NODE_TITLE_HEIGHT : y + height;
const right = isCollapsed && node._collapsed_width ? x + Math.round(node._collapsed_width) : x + width;
move(deltax, deltay, ignore_nodes) {
this._pos[0] += deltax;
this._pos[1] += deltay;
if (ignore_nodes) {
return;
}
for (var i = 0; i < this._nodes.length; ++i) {
var node = this._nodes[i];
node.pos[0] += deltax;
node.pos[1] += deltay;
}
}

return {
left: Math.min(acc.left, x),
top: Math.min(acc.top, top),
right: Math.max(acc.right, right),
bottom: Math.max(acc.bottom, bottom)
};
}, { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity });
recomputeInsideNodes() {
this._nodes.length = 0;
var nodes = this.graph._nodes;
var node_bounding = new Float32Array(4);

const groupTitleHeight = Math.round(this.font_size * 1.4);
for (var i = 0; i < nodes.length; ++i) {
var node = nodes[i];
node.getBounding(node_bounding);
if (!overlapBounding(this._bounding, node_bounding)) {
continue;
} //out of the visible area
this._nodes.push(node);
}
}

this.pos = [
bounds.left - padding,
bounds.top - padding - groupTitleHeight
];
/**
* Add nodes to the group and adjust the group's position and size accordingly
* @param {LGraphNode[]} nodes - The nodes to add to the group
* @param {number} [padding=10] - The padding around the group
* @returns {void}
*/
addNodes(nodes, padding = 10) {
if (!this._nodes && nodes.length === 0) return;

const allNodes = [...(this._nodes || []), ...nodes];

const bounds = allNodes.reduce((acc, node) => {
const [x, y] = node.pos;
const [width, height] = node.size;
const isReroute = node.type === "Reroute";
const isCollapsed = node.flags?.collapsed;

const top = y - (isReroute ? 0 : LiteGraph.NODE_TITLE_HEIGHT);
const bottom = isCollapsed ? top + LiteGraph.NODE_TITLE_HEIGHT : y + height;
const right = isCollapsed && node._collapsed_width ? x + Math.round(node._collapsed_width) : x + width;

return {
left: Math.min(acc.left, x),
top: Math.min(acc.top, top),
right: Math.max(acc.right, right),
bottom: Math.max(acc.bottom, bottom)
};
}, { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity });

const groupTitleHeight = Math.round(this.font_size * 1.4);

this.pos = [
bounds.left - padding,
bounds.top - padding - groupTitleHeight
];

this.size = [
bounds.right - bounds.left + padding * 2,
bounds.bottom - bounds.top + padding * 2 + groupTitleHeight
];
this.size = [
bounds.right - bounds.left + padding * 2,
bounds.bottom - bounds.top + padding * 2 + groupTitleHeight
];
}
}

LGraphGroup.prototype.isPointInside = LGraphNode.prototype.isPointInside;
LGraphGroup.prototype.setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas;

globalThis.LGraphGroup = LiteGraph.LGraphGroup = LGraphGroup;

//****************************************

//Scale and Offset
Expand Down

0 comments on commit 26cccd6

Please sign in to comment.