From 65ed6b95619e8689940f733c7406d933f1f13a11 Mon Sep 17 00:00:00 2001
From: vsyroc <vsyroc@gmail.com>
Date: Tue, 22 Jul 2025 10:59:41 +0500
Subject: [PATCH] feat(client): add filter on exist edges

---
 client/src/components/ReactFlowDrawer.tsx | 12 ++++++-
 client/src/pages/MainLayout.tsx           | 38 +++++++++++------------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/client/src/components/ReactFlowDrawer.tsx b/client/src/components/ReactFlowDrawer.tsx
index 85a862e..98b2b90 100644
--- a/client/src/components/ReactFlowDrawer.tsx
+++ b/client/src/components/ReactFlowDrawer.tsx
@@ -129,7 +129,17 @@ export default function ReactFlowDrawer({ showDrawer }: ReactFlowDrawerProps) {
   };
 
   const menuItems = nodes
-    .filter((node) => node.id !== selectedHandleId?.split("-")[0]) // исключаем текущий узел
+    .filter((node) => node.id !== selectedHandleId?.split("-")[0])
+    .filter((node) => {
+      if (!selectedHandleId) return false;
+      const [sourceNodeId, sourceHandleId] = selectedHandleId.split("-");
+      return !edges.some(
+        (edge) =>
+          edge.source === sourceNodeId &&
+          edge.sourceHandle === sourceHandleId &&
+          edge.target === node.id
+      );
+    })
     .map((node) => ({
       key: node.id,
       label: t("connectTo", { nodeId: node.id }),
diff --git a/client/src/pages/MainLayout.tsx b/client/src/pages/MainLayout.tsx
index f2370d1..d0a5804 100644
--- a/client/src/pages/MainLayout.tsx
+++ b/client/src/pages/MainLayout.tsx
@@ -1,22 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useState } from 'react';
-import { Layout } from 'antd';
-import Sider from 'antd/es/layout/Sider';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import SiderMenu from '@/components/SiderMenu';
-import ProcessDiagramPage from './ProcessDiagramPage';
-import RunningProcessesPage from './RunningProcessesPage';
-import AccountsPage from './AccountsPage';
-import EventsListPage from './EventsListPage';
-import ConfigurationPage from './ConfigurationPage';
+import React, { useEffect, useState } from "react";
+import { Layout } from "antd";
+import Sider from "antd/es/layout/Sider";
+import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import SiderMenu from "@/components/SiderMenu";
+import ProcessDiagramPage from "./ProcessDiagramPage";
+import AccountsPage from "./AccountsPage";
+import ConfigurationPage from "./ConfigurationPage";
+import EventsListPage from "./EventsListPage";
+import RunningProcessesPage from "./RunningProcessesPage";
 
 export default function MainLayout() {
   const navigate = useNavigate();
   const location = useLocation();
   const [collapsed, setCollapsed] = useState(false);
-  const [selectedKey, setSelectedKey] = useState('1');
+  const [selectedKey, setSelectedKey] = useState("1");
 
-  const [width, setWidth] = useState<number | string>('15%');
+  const [width, setWidth] = useState<number | string>("15%");
   const [collapsedWidth, setCollapsedWidth] = useState(50);
 
   const calculateWidths = () => {
@@ -29,24 +29,24 @@ export default function MainLayout() {
 
   useEffect(() => {
     calculateWidths();
-    window.addEventListener('resize', calculateWidths);
-    return () => window.removeEventListener('resize', calculateWidths);
+    window.addEventListener("resize", calculateWidths);
+    return () => window.removeEventListener("resize", calculateWidths);
   }, []);
 
   useEffect(() => {
-    if (location.pathname === '/') {
-      navigate('/process-diagram');
+    if (location.pathname === "/") {
+      navigate("/process-diagram");
     }
     setSelectedKey(location.pathname);
   }, [location.pathname]);
 
   function hangleMenuClick(e: any) {
     const key = e.key;
-    if (key === 'toggle') {
+    if (key === "toggle") {
       setCollapsed(!collapsed);
       return;
     }
-    if (key === 'divider') {
+    if (key === "divider") {
       return;
     }
 
@@ -55,7 +55,7 @@ export default function MainLayout() {
   }
 
   return (
-    <Layout style={{ minHeight: '100vh' }}>
+    <Layout style={{ minHeight: "100vh" }}>
       <Sider
         className="sider"
         collapsible