Merge pull request #103 from ctk-hq/fix/jsplumb-conn-update

fix: update jsplumb instance

services/frontend/src/components/Project/index.tsx

@@ -289,6 +289,21 @@ export default function Project(props: IProjectProps) {
   const onUpdateEndpoint = (nodeItem: IServiceNodeItem) => {
     const key = nodeItem.key;
 
+    if (connections.length) {
+      const _connections = [...connections];
+
+      _connections.forEach((conn: any) => {
+        if (key === conn[0]) {
+          const filtered = connections.filter((conn: any) => {
+            return key !== conn[0];
+          }) as any;
+
+          setConnections(filtered);
+          stateConnectionsRef.current = filtered;
+        }
+      });
+    }
+
     if (Array.isArray(nodeItem.serviceConfig.depends_on)) {
       nodeItem.serviceConfig.depends_on.forEach((dep: string) => {
         const depObject = Object.keys(nodes).find((key: string) => {
@@ -298,9 +313,12 @@ export default function Project(props: IProjectProps) {
           }
         });
 
-        onConnectionAttached([key, depObject]);
+        if (depObject) {
+          onConnectionAttached([key, depObject]);
+        }
       });
     }
+
     setNodes({ ...nodes, [nodeItem.key]: nodeItem });
   };
 

services/frontend/src/components/useJsPlumb.ts

@@ -295,12 +295,30 @@ export const useJsPlumb = (
   useEffect(() => {
     if (!instance) return;
 
-    const exisitngConnectionUuids = (
+    const currentConnections = instance.getConnections(
+      {},
+      true
+    ) as Connection[];
+    const currentConnectionUuids = (
       instance.getConnections({}, true) as Connection[]
     ).map((x) => x.getUuids());
 
+    currentConnections.forEach((conn: Connection) => {
+      const uuids = conn.getUuids();
+      uuids[0] = uuids[0].replace("op_", "");
+      uuids[1] = uuids[1].replace("ip_", "");
+
+      const c = connections.find((y) => {
+        return isEqual([uuids[0], uuids[1]], y);
+      });
+
+      if (!c) {
+        instance.deleteConnection(conn);
+      }
+    });
+
     connections.forEach((x) => {
-      const c = exisitngConnectionUuids.find((y) => {
+      const c = currentConnectionUuids.find((y) => {
         return isEqual([`op_${x[0]}`, `ip_${x[1]}`], y);
       });