Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-09 09:30:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow dragging and interacting with nodes with graph being read-only

Browse Source
This commit is contained in:
Marc Meszaros
2023-04-20 11:29:46 -07:00
parent 0970a40e7d
commit 1dc167044e
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
guides/README.md
View File

@@ -110,7 +110,7 @@ Slots have the next information:
* **dir**: optional, could be LiteGraph.UP, LiteGraph.RIGHT, LiteGraph.DOWN, LiteGraph.LEFT
* **color_on**: color to render when it is connected
* **color_off**: color to render when it is not connected
To retrieve the data traveling through a link you can call ```node.getInputData``` or ```node.getOutputData```
### Define your Graph Node
@@ -151,7 +151,7 @@ node.onDrawForeground = function(ctx, graphcanvas)
}
```
### Custom Node Behaviour
### Custom Node Behaviour
You can also grab events from the mouse in case your node has some sort of special interactivity.
@@ -192,11 +192,11 @@ This is the list of supported widgets:
* **"combo"** to select between multiple choices, the syntax is:
```this.addWidget("combo","Combo", "red", callback, { values:["red","green","blue"]} );```
or if you want to use objects:
```this.addWidget("combo","Combo", value1, callback, { values: { "title1":value1, "title2":value2 } } );```
* **"text"** to edit a short string
* **"toggle"** like a checkbox
* **"button"**
@@ -223,11 +223,18 @@ Or if you want to associate a widget with a property of the node, then specify i
function MyNode()
{
this.properties = { surname: "smith" };
this.addWidget("text","Surname","", { property: "surname"}); //this will modify the node.properties
this.addWidget("text","Surname","", { property: "surname"}); //this will modify the node.properties
}
```
## LGraphCanvas
LGraphCanvas is the class in charge of rendering/interaction with the nodes inside the browser.
## LGraphCanvas settings
There are graph canvas settings that could be defined or modified to change behaviour:
* **allow_interaction**: when set to `false` disable interaction with the canvas
* **drag_mode**: when set to `true` and `allow_interaction` is `false`, allow individual nodes with `flags.allow_interaction` set to `true` to be interacted with
### Canvas Shortcuts
* Space - Holding space key while moving the cursor moves the canvas around. It works when holding the mouse button down so it is easier to connect different nodes when the canvas gets too large.
* Ctrl/Shift + Click - Add clicked node to selection.
@@ -277,7 +284,7 @@ To define slots for nodes you must use the type LiteGraph.ACTION for inputs, and
function MyNode()
{
this.addInput("play", LiteGraph.ACTION );
this.addInput("onFinish", LiteGraph.EVENT );
this.addInput("onFinish", LiteGraph.EVENT );
}
```

12
src/litegraph.js
View File

@@ -5214,7 +5214,7 @@ LGraphNode.prototype.executeAction = function(action)
this.allow_reconnect_links = true; //allows to change a connection with having to redo it again
this.align_to_grid = false; //snap to grid
this.drag_mode = false;
this.drag_mode = false; // allow dragging when interactions are disabled
this.dragging_rectangle = null;
this.filter = null; //allows to filter to only accept some type of nodes in a graph
@@ -5865,13 +5865,13 @@ LGraphNode.prototype.executeAction = function(action)
//when clicked on top of a node
//and it is not interactive
if (node && this.allow_interaction && !skip_action && !this.read_only) {
if (node && (this.allow_interaction || (!this.allow_interaction && node.flags.allow_interaction)) && !skip_action && !this.read_only) {
if (!this.live_mode && !node.flags.pinned) {
this.bringToFront(node);
} //if it wasn't selected?
//not dragging mouse to connect two slots
if ( !this.connecting_node && !node.flags.collapsed && !this.live_mode ) {
if ( this.allow_interaction && !this.connecting_node && !node.flags.collapsed && !this.live_mode ) {
//Search for corner for resize
if ( !skip_action &&
node.resizable !== false &&
@@ -6025,7 +6025,7 @@ LGraphNode.prototype.executeAction = function(action)
}
//double clicking
if (is_double_click && this.selected_nodes[node.id]) {
if (this.allow_interaction && is_double_click && this.selected_nodes[node.id]) {
//double click node
if (node.onDblClick) {
node.onDblClick( e, pos, this );
@@ -6328,7 +6328,7 @@ LGraphNode.prototype.executeAction = function(action)
this.ds.offset[1] += delta[1] / this.ds.scale;
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
} else if (this.allow_interaction && !this.read_only) {
} else if ((this.allow_interaction || (!this.allow_interaction && this.drag_mode)) && !this.read_only) {
if (this.connecting_node) {
this.dirty_canvas = true;
}
@@ -9912,7 +9912,7 @@ LGraphNode.prototype.executeAction = function(action)
event,
active_widget
) {
if (!node.widgets || !node.widgets.length) {
if (!node.widgets || !node.widgets.length || (!this.allow_interaction && !node.flags.allow_interaction)) {
return null;
}