name a pipe

src/functions/contextmenu.js

@@ -3,7 +3,7 @@ import { codeEditor } from "./codeEditor";
 import { scaleOut } from "./api";
 
 export const initContextmenu = (instance) => {
-  // Kontext Menü zum Löschen von Connections
+  // Kontext Menü für Connections
   instance.bind("contextmenu", (component, event) => {
     if (component.hasClass("jtk-connector")) {
       event.preventDefault();
@@ -27,7 +27,7 @@ export const initContextmenu = (instance) => {
     $("div.custom-menu").remove();
   });
 
-  // Kontext Menü zum Löschen von Filters
+  // Kontext Menü für Filter Filters
   $("body").on("contextmenu", "#Diagram .Filter", (event) => {
     event.preventDefault();
     window.selectedFilter = $(event.currentTarget).attr("id");
@@ -64,7 +64,7 @@ export const initContextmenu = (instance) => {
     scaleOut(window.selectedFilter);
   });
 
-  // Kontext Menü zum Löschen von Pipes
+  // Kontext Menü für Pipes
   $("body").on("contextmenu", "#Diagram .Pipe", (event) => {
     event.preventDefault();
     window.selectedPipe = $(event.currentTarget).attr("id");
@@ -88,4 +88,14 @@ export const initContextmenu = (instance) => {
   $("body").on("click", ".duplicate-pipe", (event) => {
     duplicatePipe(instance);
   });
+
+  $("body").on("dblclick", "#Diagram .Pipe", (event) => {
+    event.preventDefault();
+    window.selectedPipe = $(event.currentTarget);
+    let pipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
+    if (pipeName !== null) {
+      let currentHTML = window.selectedPipe.html();
+      window.selectedPipe.html(`${currentHTML} <br> ${pipeName}`);
+    }
+  });
 };

src/functions/duplication.js

 import { v4 as uuidv4 } from "uuid";
-import { createEndpoints } from "./createEndpoint";
+import { createEndpoints } from "./endpoints";
 
 export const duplicatePipe = (instance) => {
   var selectedPipe = document.getElementById(window.selectedPipe);

src/main.js

@@ -4,7 +4,7 @@ import { jsPlumb } from "jsplumb";
 import { INTERCEPT_BEFORE_DROP } from "@jsplumb/browser-ui";
 import { isConnectionAllowed } from "./functions/isConnectionAllowed";
 import { initContextmenu } from "./functions/contextmenu";
-import { createEndpoints } from "./functions/createEndpoint";
+import { createEndpoints } from "./functions/endpoints";
 import {
   runCustomCode,
   stopCustomCode,

src/style.css

@@ -45,8 +45,11 @@
   text-align: center;
   align-content: center;
   position: absolute;
-  width: 60px;
-  height: 24px;
+  padding: 16px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  width: fit-content;
+  height: fit-content;
   border: 2px solid black;
   border-radius: 24px;
   cursor: grab;