feat(client): add filter on exist edges

This commit is contained in:
2025-07-22 10:59:41 +05:00
parent b503bc0bef
commit 65ed6b9561
2 changed files with 30 additions and 20 deletions

View File

@@ -129,7 +129,17 @@ export default function ReactFlowDrawer({ showDrawer }: ReactFlowDrawerProps) {
}; };
const menuItems = nodes 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) => ({ .map((node) => ({
key: node.id, key: node.id,
label: t("connectTo", { nodeId: node.id }), label: t("connectTo", { nodeId: node.id }),

View File

@@ -1,22 +1,22 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react";
import { Layout } from 'antd'; import { Layout } from "antd";
import Sider from 'antd/es/layout/Sider'; import Sider from "antd/es/layout/Sider";
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import SiderMenu from '@/components/SiderMenu'; import SiderMenu from "@/components/SiderMenu";
import ProcessDiagramPage from './ProcessDiagramPage'; import ProcessDiagramPage from "./ProcessDiagramPage";
import RunningProcessesPage from './RunningProcessesPage'; import AccountsPage from "./AccountsPage";
import AccountsPage from './AccountsPage'; import ConfigurationPage from "./ConfigurationPage";
import EventsListPage from './EventsListPage'; import EventsListPage from "./EventsListPage";
import ConfigurationPage from './ConfigurationPage'; import RunningProcessesPage from "./RunningProcessesPage";
export default function MainLayout() { export default function MainLayout() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const [collapsed, setCollapsed] = useState(false); 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 [collapsedWidth, setCollapsedWidth] = useState(50);
const calculateWidths = () => { const calculateWidths = () => {
@@ -29,24 +29,24 @@ export default function MainLayout() {
useEffect(() => { useEffect(() => {
calculateWidths(); calculateWidths();
window.addEventListener('resize', calculateWidths); window.addEventListener("resize", calculateWidths);
return () => window.removeEventListener('resize', calculateWidths); return () => window.removeEventListener("resize", calculateWidths);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (location.pathname === '/') { if (location.pathname === "/") {
navigate('/process-diagram'); navigate("/process-diagram");
} }
setSelectedKey(location.pathname); setSelectedKey(location.pathname);
}, [location.pathname]); }, [location.pathname]);
function hangleMenuClick(e: any) { function hangleMenuClick(e: any) {
const key = e.key; const key = e.key;
if (key === 'toggle') { if (key === "toggle") {
setCollapsed(!collapsed); setCollapsed(!collapsed);
return; return;
} }
if (key === 'divider') { if (key === "divider") {
return; return;
} }
@@ -55,7 +55,7 @@ export default function MainLayout() {
} }
return ( return (
<Layout style={{ minHeight: '100vh' }}> <Layout style={{ minHeight: "100vh" }}>
<Sider <Sider
className="sider" className="sider"
collapsible collapsible