Merge pull request #385 from MarcMeszaros/moveable-interaction-off

Allow interactions per node override

Author: jagenjo

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 );
 }
 ```
 

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;
         }