pipe binding: direct binding

src/functions/codeEditor.js

 import { basicSetup, EditorView } from "codemirror";
+import { EditorState } from "@codemirror/state";
 import { javascript } from "@codemirror/lang-javascript";
 import { createCustomCode } from "./api";
 import { showCheck } from "./visualValidation";
-import {
-  createPipesElements,
-  getPipesForFilter,
-  createPipeButtons,
-} from "./pipeBinding";
+import { handlePipeBinding, getPipesForFilter } from "./pipeBinding";
 
 export const codeEditor = (instance) => {
   if (document.getElementById(`codeEditor${window.selectedFilter}`)) {
@@ -14,7 +11,6 @@ export const codeEditor = (instance) => {
       `codeEditor${window.selectedFilter}`
     );
     codeEditor.style.visibility = "visible";
-    createPipeButtons(getPipesForFilter());
   } else {
     var diagram = document.getElementById("Diagram");
 
@@ -30,8 +26,6 @@ export const codeEditor = (instance) => {
 
     diagram.appendChild(editorContainer);
 
-    createPipesElements();
-
     const filterToCode = {
       type: document
         .getElementById(window.selectedFilter)
@@ -56,22 +50,26 @@ export const codeEditor = (instance) => {
       editorValues = {
         doc: "// publisher.js\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        // DO NOT CHANGE \n        const queue = process.env.QUEUE_NAME\n\n        channel.assertQueue(queue, {\n            durable: false\n        });\n\n        const sendMessage = () => {\n            const msg = 'Hello World! ' + new Date().toISOString();\n            channel.sendToQueue(queue, Buffer.from(msg));\n            console.log(\" [x] Sent '%s'\", msg);\n        };\n\n        setInterval(sendMessage, 1000);\n    });\n});\n",
         extensions: [basicSetup, javascript()],
-        parent: editorContainer,
       };
     else if (filterToCode.type.includes("Receiver")) {
       editorValues = {
         doc: "// consumer.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n\tif (error0) {\n\t\tthrow error0;\n\t}\n\tconnection.createChannel((error1, channel) => {\n\t\tif (error1) {\n\t\t\tthrow error1;\n\t\t}\n\n\t\t// DO NOT CHANGE \n        const queue = process.env.QUEUE_NAME\n\n\t\tchannel.assertQueue(queue, {\n\t\t\tdurable: false\n\t\t});\n\n\t\tconsole.log(\" [*] Waiting for messages in %s. To exit press CTRL+C\", queue);\n\n\t\t// Funktion, um eine Nachricht aus der Queue zu konsumieren\n\t\tconst consumeMessage = () => {\n\t\t\tchannel.get(queue, { noAck: false }, (error, msg) => {\n\t\t\t\tif (error) {\n\t\t\t\t\tthrow error;\n\t\t\t\t}\n\t\t\t\tif (msg) {\n\t\t\t\t\tconsole.log(\" [x] Received '%s'\", msg.content.toString());\n\t\t\t\t\t// Nachricht bestätigen (acknowledge)\n\t\t\t\t\tchannel.ack(msg);\n\t\t\t\t} else {\n\t\t\t\t\tconsole.log(\" [x] No message received at this interval.\");\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// Setze ein Intervall von 3 Sekunden\n\t\tsetInterval(consumeMessage, 3000);\n\t});\n});\n",
         extensions: [basicSetup, javascript()],
-        parent: editorContainer,
       };
     } else {
       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        //TODO: Code logic here\n});\n",
+        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\n\n        //TODO: Code logic here\n});\n",
         extensions: [basicSetup, javascript()],
-        parent: editorContainer,
       };
     }
-    const editor = new EditorView(editorValues);
+
+    let editorStartState = EditorState.create(editorValues);
+    const editor = new EditorView({
+      state: editorStartState,
+    });
+    handlePipeBinding(getPipesForFilter(), editor);
+    // createPipesElements(editor);
+    editorContainer.appendChild(editor.dom);
 
     var buttonContainer = document.createElement("div");
     buttonContainer.classList.add("codeEditorButtons");

src/functions/pipeBinding.js

 import { appState } from "./state";
 import { errorFeedbackSimple } from "./feedback";
 
-export const createPipesElements = () => {
-  const codeEditor = document.getElementById(
-    `codeEditor${window.selectedFilter}`
-  );
-  const pipesDiv = document.createElement("div");
-  pipesDiv.classList.add("pipes");
-
-  const incomingPipesDiv = document.createElement("div");
-  incomingPipesDiv.id = "IncomingPipes";
-  const incomingPipesHeading = document.createElement("h5");
-  incomingPipesHeading.style.margin = "6px";
-  incomingPipesHeading.appendChild(document.createTextNode("Incoming Pipes"));
-  incomingPipesDiv.appendChild(incomingPipesHeading);
-
-  const outgoingPipesDiv = document.createElement("div");
-  outgoingPipesDiv.id = "OutgoingPipes";
-  const outgoingPipesHeading = document.createElement("h5");
-  outgoingPipesHeading.style.margin = "6px";
-  outgoingPipesHeading.appendChild(document.createTextNode("Outgoing Pipes"));
-  outgoingPipesDiv.appendChild(outgoingPipesHeading);
-
-  pipesDiv.appendChild(incomingPipesDiv);
-  pipesDiv.appendChild(outgoingPipesDiv);
-
-  codeEditor.appendChild(pipesDiv);
-  createPipeButtons(getPipesForFilter());
-};
-
 export const getPipesForFilter = () => {
   const filter = window.selectedFilter;
   const connections = appState.getConnection(filter);
@@ -46,20 +18,20 @@ export const getPipesForFilter = () => {
   return pipeMapping;
 };
 
-export const createPipeButtons = (pipeMapping) => {
-  const incomingPipesDiv = document.getElementById("IncomingPipes");
-  const outgoingPipesDiv = document.getElementById("OutgoingPipes");
-
+export const handlePipeBinding = (pipeMapping, editor) => {
+  let lineNumber = 14;
   pipeMapping.forEach((pipe) => {
-    if (document.getElementById(`Button${pipe.pipeId}`)) {
-      return;
-    } else {
-      const pipeButton = document.createElement("button");
-      pipeButton.id = `Button${pipe.pipeId}`;
-      pipeButton.appendChild(document.createTextNode(pipe.pipeName));
-      pipe.direction === "in"
-        ? incomingPipesDiv.appendChild(pipeButton)
-        : outgoingPipesDiv.appendChild(pipeButton);
-    }
+    let line = editor.state.doc.line(lineNumber);
+    let position = line.from;
+    let transaction = editor.state.update({
+      changes: {
+        from: position,
+        insert: `\t\tconst ${pipe.pipeName.replace(/\s+/g, "")} = "${
+          pipe.pipeName
+        }"\n`,
+      },
+    });
+    editor.dispatch(transaction);
+    lineNumber++;
   });
 };