added removeNodeInput And removeNodeOutput

jerosoler · Jul 29, 2020 · af83a12 · af83a12
1 parent 6a8769b
commit af83a12
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ Installing only a javascript library and with four lines of code.
 - Multiple Inputs / Outputs
 - Multiple connections
 - Delete Nodes and Connections
+- Add/Delete inputs/outputs 
 - Data sync on Nodes
 - Zoom in / out
 - Clear data module
@@ -199,6 +200,8 @@ Mehtod | Description
 `removeNodeId(id)` | Remove node. Ex id: `node-x`
 `addNodeInput(id)` | Add input to node. Ex id: `5`
 `addNodeOutput(id)` | Add output to node. Ex id: `5`
+`removeNodeInput(id, input_class)` | Remove input to node. Ex id: `5`, `input_2`
+`removeNodeOutput(id, output_class)` | Remove output to node. Ex id: `5`, `output_2`
 `addConnection(id_output, id_input, output_class, input_class)` | Add connection. Ex: `15,16,'output_1','input_1'`
 `removeSingleConnection(id_output, id_input, output_class, input_class)` | Remove connection. Ex: `15,16,'output_1','input_1'`
 `updateConnectionNodes(id)` | Update connections position from Node Ex id: `node-x`

diff --git a/src/drawflow.js b/src/drawflow.js
@@ -890,6 +890,146 @@ export default class Drawflow {
     this.drawflow.drawflow[moduleName].data[id].outputs["output_"+(numOutputs+1)] = { "connections": []};
   }
 
+  removeNodeInput(id, input_class) {
+    var moduleName = this.getModuleFromNodeId(id)
+    const infoNode = this.getNodeFromId(id)
+    if(this.module === moduleName) {
+      document.querySelector('#node-'+id+' .inputs .input.'+input_class).remove();
+    }
+    const removeInputs = [];
+    Object.keys(infoNode.inputs[input_class].connections).map(function(key, index) {
+      const id_output = infoNode.inputs[input_class].connections[index].node;
+      const output_class = infoNode.inputs[input_class].connections[index].input;
+      removeInputs.push({id_output, id, output_class, input_class})
+    })
+    // Remove connections
+    removeInputs.forEach((item, i) => {
+      this.removeSingleConnection(item.id_output, item.id, item.output_class, item.input_class);
+    });
+
+    delete this.drawflow.drawflow[moduleName].data[id].inputs[input_class];
+
+    // Update connection
+    const connections = [];
+    const connectionsInputs = this.drawflow.drawflow[moduleName].data[id].inputs
+    Object.keys(connectionsInputs).map(function(key, index) {
+      connections.push(connectionsInputs[key]);
+    });
+    this.drawflow.drawflow[moduleName].data[id].inputs = {};
+    const input_class_id = input_class.slice(6);
+    let nodeUpdates = [];
+    connections.forEach((item, i) => {
+      item.connections.forEach((itemx, f) => {
+        nodeUpdates.push(itemx);
+      });
+      this.drawflow.drawflow[moduleName].data[id].inputs['input_'+ (i+1)] = item;
+    });
+    nodeUpdates =  new Set(nodeUpdates.map(e => JSON.stringify(e)));
+    nodeUpdates = Array.from(nodeUpdates).map(e => JSON.parse(e));
+
+    if(this.module === moduleName) {
+      const eles = document.querySelectorAll("#node-"+id +" .inputs .input");
+      eles.forEach((item, i) => {
+        const id_class = item.classList[1].slice(6);
+        if(input_class_id < id_class) {
+          item.classList.remove('input_'+id_class);
+          item.classList.add('input_'+(id_class-1));
+        }
+      });
+
+    }
+
+    nodeUpdates.forEach((itemx, i) => {
+      this.drawflow.drawflow[moduleName].data[itemx.node].outputs[itemx.input].connections.forEach((itemz, g) => {
+          if(itemz.node == id) {
+            const output_id = itemz.output.slice(6);
+            if(input_class_id < output_id) {
+              if(this.module === moduleName) {
+                const ele = document.querySelector(".connection.node_in_node-"+id+".node_out_node-"+itemx.node+"."+itemx.input+".input_"+output_id);
+                ele.classList.remove('input_'+output_id);
+                ele.classList.add('input_'+(output_id-1));
+              }
+              this.drawflow.drawflow[moduleName].data[itemx.node].outputs[itemx.input].connections[g] = { node: itemz.node, output: 'input_'+(output_id-1)}
+            }
+          }
+      });
+    });
+    this.updateConnectionNodes('node-'+id);
+  }
+
+  removeNodeOutput(id, output_class) {
+    var moduleName = this.getModuleFromNodeId(id)
+    const infoNode = this.getNodeFromId(id)
+    if(this.module === moduleName) {
+      document.querySelector('#node-'+id+' .outputs .output.'+output_class).remove();
+    }
+    const removeOutputs = [];
+    Object.keys(infoNode.outputs[output_class].connections).map(function(key, index) {
+      const id_input = infoNode.outputs[output_class].connections[index].node;
+      const input_class = infoNode.outputs[output_class].connections[index].output;
+      removeOutputs.push({id, id_input, output_class, input_class})
+    })
+    // Remove connections
+    removeOutputs.forEach((item, i) => {
+      this.removeSingleConnection(item.id, item.id_input, item.output_class, item.input_class);
+    });
+
+    delete this.drawflow.drawflow[moduleName].data[id].outputs[output_class];
+
+    // Update connection
+    const connections = [];
+    const connectionsOuputs = this.drawflow.drawflow[moduleName].data[id].outputs
+    Object.keys(connectionsOuputs).map(function(key, index) {
+      connections.push(connectionsOuputs[key]);
+    });
+    this.drawflow.drawflow[moduleName].data[id].outputs = {};
+    const output_class_id = output_class.slice(7);
+    let nodeUpdates = [];
+    connections.forEach((item, i) => {
+      item.connections.forEach((itemx, f) => {
+        nodeUpdates.push(itemx);
+      });
+      this.drawflow.drawflow[moduleName].data[id].outputs['output_'+ (i+1)] = item;
+    });
+    nodeUpdates =  new Set(nodeUpdates.map(e => JSON.stringify(e)));
+    nodeUpdates = Array.from(nodeUpdates).map(e => JSON.parse(e));
+
+    if(this.module === moduleName) {
+      const eles = document.querySelectorAll("#node-"+id +" .outputs .output");
+      eles.forEach((item, i) => {
+        const id_class = item.classList[1].slice(7);
+        if(output_class_id < id_class) {
+          item.classList.remove('output_'+id_class);
+          item.classList.add('output_'+(id_class-1));
+        }
+      });
+
+    }
+
+    nodeUpdates.forEach((itemx, i) => {
+      this.drawflow.drawflow[moduleName].data[itemx.node].inputs[itemx.output].connections.forEach((itemz, g) => {
+          if(itemz.node == id) {
+            const input_id = itemz.input.slice(7);
+            if(output_class_id < input_id) {
+              if(this.module === moduleName) {
+                const ele = document.querySelector(".connection.node_in_node-"+itemx.node+".node_out_node-"+id+".output_"+input_id+"."+itemx.output);
+                ele.classList.remove('output_'+input_id);
+                ele.classList.remove(itemx.output);
+                ele.classList.add('output_'+(input_id-1));
+                ele.classList.add(itemx.output);
+              }
+              this.drawflow.drawflow[moduleName].data[itemx.node].inputs[itemx.output].connections[g] = { node: itemz.node, input: 'output_'+(input_id-1)}
+            }
+          }
+      });
+    });
+
+    this.updateConnectionNodes('node-'+id);
+
+  }
+
+
+
   removeNodeId(id) {
     this.removeConnectionNodeId(id);
     var moduleName = this.getModuleFromNodeId(id.slice(5))