Merge pull request #374 from tianlang0704/master

Add global switch for ctrl+shift+v to maintain old behavior in lib.

editor/js/code.js

@@ -104,6 +104,7 @@ addDemo("Audio", "examples/audio.json");
 addDemo("Audio Delay", "examples/audio_delay.json");
 addDemo("Audio Reverb", "examples/audio_reverb.json");
 addDemo("MIDI Generation", "examples/midi_generation.json");
+addDemo("Copy Paste", "examples/copypaste.json");
 addDemo("autobackup", function(){
 	var data = localStorage.getItem("litegraphg demo backup");
 	if(!data)
@@ -187,4 +188,8 @@ function enableWebGL()
 			gl.viewport(0,0,gl.canvas.width, gl.canvas.height );
 		}
 	}
-}
+}
+
+// Tests
+// CopyPasteWithConnectionToUnselectedOutputTest();
+// demo();

editor/js/defaults.js

@@ -28,4 +28,5 @@ LiteGraph.do_add_triggers_slots = true; // [true!] will create and connect event
 LiteGraph.allow_multi_output_for_events = false; // [false!] being events; it is strongly reccomended to use them sequentially; one by one
 LiteGraph.middle_click_slot_add_default_node = true;  //[true!] allows to create and connect a ndoe clicking with the third button (wheel)
 LiteGraph.release_link_on_empty_shows_menu = true; //[true!] dragging a link to empty space will open a menu, add from list, search or defaults
-LiteGraph.pointerevents_method = "mouse"; // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)
+LiteGraph.pointerevents_method = "mouse"; // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)
+LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs = true; //[true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected with the inputs of the newly pasted nodes

editor/js/defaults_mobile.js

@@ -28,4 +28,5 @@ LiteGraph.do_add_triggers_slots = true; // [true!] will create and connect event
 LiteGraph.allow_multi_output_for_events = false; // [false!] being events; it is strongly reccomended to use them sequentially; one by one
 LiteGraph.middle_click_slot_add_default_node = true;  //[true!] allows to create and connect a ndoe clicking with the third button (wheel)
 LiteGraph.release_link_on_empty_shows_menu = true; //[true!] dragging a link to empty space will open a menu, add from list, search or defaults
-LiteGraph.pointerevents_method = "pointer"; // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)
+LiteGraph.pointerevents_method = "pointer"; // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)
+LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs = true; //[true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected with the inputs of the newly pasted nodes

editor/js/demos.js

@@ -43,6 +43,51 @@ function multiConnection()
 	node_math.connect(0,node_watch2,0 );
 }
 
+function CopyPasteWithConnectionToUnselectedOutputTest()
+{
+	// number
+	var nodeConstA = LiteGraph.createNode("basic/const");
+	nodeConstA.pos = [200,200];
+	graph.add(nodeConstA);
+	nodeConstA.setValue(4.5);
+
+	// number
+	var nodeConstB = LiteGraph.createNode("basic/const");
+	nodeConstB.pos = [200,300];
+	graph.add(nodeConstB);
+	nodeConstB.setValue(10);
+
+	// math
+	var nodeMath = LiteGraph.createNode("math/operation");
+	nodeMath.pos = [400,200];
+	graph.add(nodeMath);
+
+	// connection
+	nodeConstA.connect(0,nodeMath,0 );
+	nodeConstB.connect(0,nodeMath,1 );
+
+	// copy with unselected nodes connected
+	graphcanvas.selectNodes([nodeMath]);
+	graphcanvas.copyToClipboard();
+	graphcanvas.pasteFromClipboard(true);
+
+	var count = 1;
+	var lastNode = null;
+	for (const [key, element] of Object.entries(graphcanvas.selected_nodes)) {
+		element.pos = [nodeMath.pos[0], nodeMath.pos[1] + 100 * count];
+		lastNode = element
+		count++;
+	}
+
+	// copy with unselected nodes unconnected
+	graphcanvas.pasteFromClipboard(false);
+	var count = 1;
+	for (const [key, element] of Object.entries(graphcanvas.selected_nodes)) {
+		element.pos = [nodeMath.pos[0], lastNode.pos[1] + 100 * count];
+		count++;
+	}
+}
+
 function sortTest()
 {
 	var rand = LiteGraph.createNode("math/rand",null, {pos: [10,100] });
@@ -227,3 +272,36 @@ TestPropertyEditorsNode.title = "Properties";
 
 LiteGraph.registerNodeType("features/properties_editor", TestPropertyEditorsNode );
 
+
+
+//Show value inside the debug console
+function LargeInputNode()
+{
+	this.addInput("in 1","number");
+	this.addInput("in 2","number");
+	this.addInput("in 3","number");
+	this.addInput("in 4","number");
+	this.addInput("in 5","number");
+	this.addInput("in 6","number");
+	this.addInput("in 7","number");
+	this.addInput("in 8","number");
+	this.addInput("in 9","number");
+	this.addInput("in 10","number");
+	this.addInput("in 11","number");
+	this.addInput("in 12","number");
+	this.addInput("in 13","number");
+	this.addInput("in 14","number");
+	this.addInput("in 15","number");
+	this.addInput("in 16","number");
+	this.addInput("in 17","number");
+	this.addInput("in 18","number");
+	this.addInput("in 19","number");
+	this.addInput("in 20","number");
+	this.size = [200,410];
+}
+
+LargeInputNode.title = "Large Input Node";
+
+
+LiteGraph.registerNodeType("features/largeinput_editor", LargeInputNode);
+

guides/README.md

@@ -226,6 +226,15 @@ function MyNode()
   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.
+### 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.
+* Ctrl + A - Select all nodes
+* Ctrl + C/Ctrl + V - Copy and paste selected nodes, without maintaining the connection to the outputs of unselected nodes.
+* Ctrl + C/Ctrl + Shift + V - Copy and paste selected nodes, and maintaining the connection from the outputs of unselected nodes to the inputs of the newly pasted nodes.
+* Holding Shift and drag selected nodes - Move multiple selected nodes at the same time.
 
 # Execution Flow
 To execute a graph you must call ```graph.runStep()```.
@@ -320,11 +329,6 @@ this.setOutputData(0, {
 
 
 
-```
-
-
-
-
 
 
 

src/litegraph.js

@@ -140,6 +140,8 @@
         pointerevents_method: "mouse", // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)
         // TODO implement pointercancel, gotpointercapture, lostpointercapture, (pointerover, pointerout if necessary)
 
+        ctrl_shift_v_paste_connect_unselected_outputs: false, //[true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected with the inputs of the newly pasted nodes
+
         /**
          * Register a node class so it can be listed when the user wants to create a new one
          * @method registerNodeType
@@ -7116,6 +7118,10 @@ LGraphNode.prototype.executeAction = function(action)
     };
 
     LGraphCanvas.prototype.pasteFromClipboard = function(isConnectUnselected = false) {
+        // if ctrl + shift + v is off, return when isConnectUnselected is true (shift is pressed) to maintain old behavior
+        if (!LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs && isConnectUnselected) {
+            return;
+        }
         var data = localStorage.getItem("litegrapheditor_clipboard");
         if (!data) {
             return;
@@ -7168,7 +7174,7 @@ LGraphNode.prototype.executeAction = function(action)
             var origin_node_relative_id = link_info[0];
             if (origin_node_relative_id != null) {
                 origin_node = nodes[origin_node_relative_id];
-            } else if (isConnectUnselected) {
+            } else if (LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs && isConnectUnselected) {
                 var origin_node_id = link_info[4];
                 if (origin_node_id) {
                     origin_node = this.graph.getNodeById(origin_node_id);