Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 10:42:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate snap to grid (#41)

Browse Source 
* rename

* migrate
This commit is contained in:
Chenlei Hu
2024-06-18 17:19:35 -04:00
committed by GitHub
parent 584051b22f
commit 9e758929dd
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/extensions/core/snapToGrid.js → src/extensions/core/snapToGrid.ts
View File

@@ -58,7 +58,9 @@ app.registerExtension({
}; };
// Draw a preview of where the node will go if holding shift and the node is selected // Draw a preview of where the node will go if holding shift and the node is selected
// @ts-ignore
const origDrawNode = LGraphCanvas.prototype.drawNode; const origDrawNode = LGraphCanvas.prototype.drawNode;
// @ts-ignore
LGraphCanvas.prototype.drawNode = function (node, ctx) { LGraphCanvas.prototype.drawNode = function (node, ctx) {
if (app.shiftDown && this.node_dragged && node.id in this.selected_nodes) { if (app.shiftDown && this.node_dragged && node.id in this.selected_nodes) {
const [x, y] = roundVectorToGrid([...node.pos]); const [x, y] = roundVectorToGrid([...node.pos]);
@@ -88,8 +90,6 @@ app.registerExtension({
return origDrawNode.apply(this, arguments); return origDrawNode.apply(this, arguments);
}; };
/** /**
* The currently moving, selected group only. Set after the `selected_group` has actually started * The currently moving, selected group only. Set after the `selected_group` has actually started
* moving. * moving.
@@ -100,7 +100,9 @@ app.registerExtension({
* Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups` * Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups`
* below) as well as handle the last move call from LiteGraph's `processMouseUp`. * below) as well as handle the last move call from LiteGraph's `processMouseUp`.
*/ */
// @ts-ignore
const groupMove = LGraphGroup.prototype.move; const groupMove = LGraphGroup.prototype.move;
// @ts-ignore
LGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes) { LGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes) {
const v = groupMove.apply(this, arguments); const v = groupMove.apply(this, arguments);
// When we've started moving, set `selectedAndMovingGroup` as LiteGraph sets `selected_group` // When we've started moving, set `selectedAndMovingGroup` as LiteGraph sets `selected_group`
@@ -120,6 +122,7 @@ app.registerExtension({
for (const node of this._nodes) { for (const node of this._nodes) {
node.alignToGrid(); node.alignToGrid();
} }
// @ts-ignore
LGraphNode.prototype.alignToGrid.apply(this); LGraphNode.prototype.alignToGrid.apply(this);
} }
return v; return v;
@@ -130,7 +133,9 @@ app.registerExtension({
* drawing a ghost box when one is actively being moved. This mimics the node snapping behavior for * drawing a ghost box when one is actively being moved. This mimics the node snapping behavior for
* both. * both.
*/ */
// @ts-ignore
const drawGroups = LGraphCanvas.prototype.drawGroups; const drawGroups = LGraphCanvas.prototype.drawGroups;
// @ts-ignore
LGraphCanvas.prototype.drawGroups = function (canvas, ctx) { LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
if (this.selected_group && app.shiftDown) { if (this.selected_group && app.shiftDown) {
if (this.selected_group_resizing) { if (this.selected_group_resizing) {
@@ -155,13 +160,18 @@ app.registerExtension({
/** Handles adding a group in a snapping-enabled state. */ /** Handles adding a group in a snapping-enabled state. */
// @ts-ignore
const onGroupAdd = LGraphCanvas.onGroupAdd; const onGroupAdd = LGraphCanvas.onGroupAdd;
// @ts-ignore
LGraphCanvas.onGroupAdd = function() { LGraphCanvas.onGroupAdd = function() {
const v = onGroupAdd.apply(app.canvas, arguments); const v = onGroupAdd.apply(app.canvas, arguments);
if (app.shiftDown) { if (app.shiftDown) {
// @ts-ignore
const lastGroup = app.graph._groups[app.graph._groups.length - 1]; const lastGroup = app.graph._groups[app.graph._groups.length - 1];
if (lastGroup) { if (lastGroup) {
// @ts-ignore
roundVectorToGrid(lastGroup.pos); roundVectorToGrid(lastGroup.pos);
// @ts-ignore
roundVectorToGrid(lastGroup.size); roundVectorToGrid(lastGroup.size);
} }
} }

4
src/types/litegraph.d.ts vendored
View File

@@ -411,6 +411,8 @@ export type SerializedLGraphNode<T extends LGraphNode = LGraphNode> = {
/** https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#lgraphnode */ /** https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#lgraphnode */
export declare class LGraphNode { export declare class LGraphNode {
onResize?: Function;
// Used in group node // Used in group node
setInnerNodes(nodes: any) { setInnerNodes(nodes: any) {
throw new Error("Method not implemented."); throw new Error("Method not implemented.");
@@ -1028,6 +1030,8 @@ export declare class LGraphCanvas {
node_over: LGraphNode | null; node_over: LGraphNode | null;
node_title_color: string; node_title_color: string;
node_widget: [LGraphNode, IWidget] | null; node_widget: [LGraphNode, IWidget] | null;
last_mouse_dragging: boolean;
/** Called by `LGraphCanvas.drawBackCanvas` */ /** Called by `LGraphCanvas.drawBackCanvas` */
onDrawBackground: onDrawBackground:
| ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void) | ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void)