editor ausgegliedert

src/functions/codeEditor.js

@@ -5,12 +5,23 @@ import { createCustomCode } from "./api";
 import { showCheck } from "./visualValidation";
 import { handlePipeBinding, getPipesForFilter } from "./pipeBinding";
 
-export const codeEditor = (instance) => {
+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\n\n        //TODO: Code logic here\n});\n",
+  extensions: [basicSetup, javascript()],
+};
+
+let editorStartState = EditorState.create(editorValues);
+const editor = new EditorView({
+  state: editorStartState,
+});
+
+export const codeEditorElement = (instance) => {
   if (document.getElementById(`codeEditor${window.selectedFilter}`)) {
     const codeEditor = document.getElementById(
       `codeEditor${window.selectedFilter}`
     );
     codeEditor.style.visibility = "visible";
+    handlePipeBinding(getPipesForFilter(), editor);
   } else {
     var diagram = document.getElementById("Diagram");
 
@@ -45,30 +56,7 @@ export const codeEditor = (instance) => {
     closingX.addEventListener("click", () => handleCancel(editorContainer));
     editorContainer.appendChild(closingX);
 
-    let editorValues;
-    if (filterToCode.type.includes("Sender"))
-      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()],
-      };
-    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()],
-      };
-    } 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\n\n        //TODO: Code logic here\n});\n",
-        extensions: [basicSetup, javascript()],
-      };
-    }
-
-    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");

src/functions/contextmenu.js

 import { duplicatePipe, duplicateFilter, extendPipe } from "./duplication";
-import { codeEditor } from "./codeEditor";
+import { codeEditorElement } from "./codeEditor";
 import { scaleOut } from "./api";
 import { showCheck } from "./visualValidation";
 
@@ -59,7 +59,7 @@ export const initContextmenu = (instance) => {
     duplicateFilter(instance);
   });
   $("body").on("click", ".code-filter", (event) => {
-    codeEditor(instance);
+    codeEditorElement(instance);
   });
   $("body").on("click", ".scale-out", (event) => {
     scaleOut(window.selectedFilter);