diff --git a/frontend/src/GraphView.jsx b/frontend/src/GraphView.jsx
index ac60227..1194563 100644
--- a/frontend/src/GraphView.jsx
+++ b/frontend/src/GraphView.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
import {
ReactFlow,
Background,
@@ -7,14 +7,17 @@ import {
useNodesState,
addEdge,
MarkerType,
+ Handle,
+ Position,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { IconZoomIn, IconZoomOut, IconMaximize, IconMinimize } from '@tabler/icons-react';
-function GraphView({ servers, connections }) {
+function GraphView({ servers, connections, onCreateConnection }) {
const flowRef = useRef(null);
const instanceRef = useRef(null);
const containerRef = useRef(null);
+ const [isFullscreen, setIsFullscreen] = useState(false);
const getTunnelStyle = useCallback((tunnelType) => {
const map = {
@@ -83,7 +86,16 @@ function GraphView({ servers, connections }) {
setEdges(initialEdgesData);
}, [initialEdgesData, setEdges]);
- const onConnect = useCallback((params) => setEdges((eds) => addEdge({ ...params, type: 'default' }, eds)), [setEdges]);
+ const onConnect = useCallback(
+ (params) => {
+ // Делегируем создание связи в родителя, чтобы сохранить единую логику хранения
+ if (!params?.source || !params?.target || params.source === params.target) return;
+ if (onCreateConnection) {
+ onCreateConnection({ from: params.source, to: params.target });
+ }
+ },
+ [onCreateConnection]
+ );
const nodeTypes = useMemo(
() => ({
@@ -110,6 +122,8 @@ function GraphView({ servers, connections }) {
background: '#fff',
}}
>
+ {/* Точка входа соединений */}
+