From 1dc167044e0eccd7a2731527f8b4b554e0486100 Mon Sep 17 00:00:00 2001 From: Marc Meszaros Date: Thu, 20 Apr 2023 11:29:46 -0700 Subject: [PATCH] Allow dragging and interacting with nodes with graph being read-only --- guides/README.md | 21 ++++++++++++++------- src/litegraph.js | 12 ++++++------ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/guides/README.md b/guides/README.md index 536f4a7b6..efdc6c308 100755 --- a/guides/README.md +++ b/guides/README.md @@ -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 ); } ``` diff --git a/src/litegraph.js b/src/litegraph.js index a51b14463..195102b68 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -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; }