FEAT: replace pipe name in code if wished

src/functions/codeEditor.js

@@ -6,7 +6,7 @@ import { showCheck } from "./visualValidation";
 import { handlePipeBinding, getPipesForFilter } from "./pipeBinding";
 
 let editorValues = {
-  doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n        // START pipe-binding\n        // incoming Pipes\n        // outgoing Pipes\n        // END pipe-binding\n\n        // TODO: Code logic here\n\n\n\t});\n});\n",
+  doc: "// Please don't remove comments!\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n        // START PIPE-BINDING\n        // INCOMING PIPES\n        // OUTGOING PIPES\n        // END PIPE-BINDING\n\n        // TODO: Code logic here\n\n\n\t});\n});\n",
   extensions: [basicSetup, javascript()],
 };
 

src/functions/naming.js

 import { showCheck } from "./visualValidation";
 import { appState } from "./state";
+import { renamePipeNamesInCode } from "./pipeBinding";
 
 export const namePipe = (instance) => {
   let newPipeName;
 
+  const selectedPipe = window.selectedPipe;
+  const pipeWasNamedBefore = appState.getPipe(selectedPipe);
+  const allConnections = instance.getAllConnections();
+  const pipeHasConnection = allConnections.some(
+    (con) => con.sourceId === selectedPipe || con.targetId === selectedPipe
+  );
+
   while (true) {
     newPipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
 
@@ -15,6 +23,41 @@ export const namePipe = (instance) => {
       alert(
         "Dieser Name ist bereits vergeben. Bitte geben Sie einen anderen Namen ein."
       );
+    } else if (pipeHasConnection && pipeWasNamedBefore && newPipeName) {
+      if (
+        confirm(
+          "Durch ändern des Pipe Namens wird dein Code im Filter angepasst! Alle alten Pipe Namen werden durch den Neuen ersetzt."
+        )
+      ) {
+        const oldPipeName = appState.getPipe(selectedPipe);
+
+        const tagetIds = allConnections
+          .filter((con) => con.sourceId === selectedPipe)
+          .map((con) => con.targetId);
+        const sourceIds = allConnections
+          .filter((con) => con.targetId === selectedPipe)
+          .map((con) => con.sourceId);
+        const filterIDs = [...tagetIds, ...sourceIds];
+
+        const filterEditors = [];
+        filterIDs.forEach((id) => {
+          const codeEditorEl = document.getElementById(`codeEditor${id}`);
+          if (codeEditorEl) {
+            const editor = codeEditorEl.editor;
+            filterEditors.push(editor);
+          }
+        });
+
+        if (filterEditors.length !== 0) {
+          filterEditors.forEach((editor) =>
+            renamePipeNamesInCode(editor, oldPipeName, newPipeName)
+          );
+        }
+        break;
+      } else {
+        newPipeName = null;
+        break;
+      }
     } else {
       break;
     }

src/functions/pipeBinding.js

@@ -29,7 +29,7 @@ export const getPipesForFilter = (instance) => {
       const pipeName = appState.getPipe(connection.pipeId);
       if (!pipeName) {
         const pipeName = `Default${defaultCount}`;
-        appState.addPipe(connection, pipeName);
+        appState.addPipe(connection.pipeId, pipeName);
         const pipe = { pipeName, ...connection };
         pipeMapping.push(pipe);
         const spanToChange = document.querySelector(
@@ -51,9 +51,9 @@ export const getPipesForFilter = (instance) => {
 export const handlePipeBinding = (pipeMapping, editor) => {
   // clear pipe-binindg code
   let codeArray = editor.state.doc.toString();
-  const start = "        // incoming Pipes";
-  const middle = "        // outgoing Pipes";
-  const end = "        // END pipe-binding";
+  const start = "        // INCOMING PIPES";
+  const middle = "        // OUTGOING PIPES";
+  const end = "        // END PIPE-BINDING";
 
   const startIndex = codeArray.indexOf(start);
   const midIndexIn = codeArray.indexOf(middle);
@@ -139,6 +139,16 @@ const makeValidConstName = (str) => {
     "import",
     "export",
     "default",
+    "throw",
+    "callback",
+    "amqp",
+    "rabbitmqUrl",
+    "error0",
+    "error1",
+    "connection",
+    "channel",
+    "createConnection",
+    "createChannel",
   ]);
   if (reservedWords.has(validStr)) {
     validStr = "_" + validStr;
@@ -204,3 +214,24 @@ const fillEditorwithCode = (editor, pipeMapping, lineNumber) => {
     lineNumber = lineNumber + 4;
   });
 };
+
+export const renamePipeNamesInCode = (editor, oldName, newName) => {
+  const oldNameInCode = makeValidConstName(oldName);
+  const newNameInCode = makeValidConstName(newName);
+  const codeString = editor.state.doc.toString();
+  const from = "        // TODO: Code logic here";
+  const fromIndex = codeString.indexOf(from);
+  const codeToChange = codeString.slice(fromIndex);
+
+  const newCodeString = codeToChange.replaceAll(oldNameInCode, newNameInCode);
+  const transaction = editor.state.update({
+    changes: [
+      {
+        from: fromIndex,
+        to: editor.state.doc.length,
+        insert: newCodeString,
+      },
+    ],
+  });
+  editor.dispatch(transaction);
+};