@cyber-harbour/ui 1.0.50 → 1.0.52

package/src/Graph2D/Graph2D.tsx

@@ -1,5 +1,14 @@
-import { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
-import { Graph2DProps, LinkObject, NodeObject, Graph2DRef } from './types';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useLayoutEffect,
+} from 'react';
+import { Graph2DProps, LinkObject, NodeObject, Graph2DRef, GraphState } from './types';
 
 import cloneDeep from 'lodash.clonedeep';
 
@@ -19,6 +28,7 @@ import {
 import { styled, useTheme } from 'styled-components';
 import GraphLoader from './GraphLoader';
 
+const RATIO = window.devicePixelRatio || 1;
 // Завантаження та підготовка зображень кнопок
 function prepareButtonImages(buttons: Graph2DProps['buttons']) {
   if (!buttons || buttons.length === 0) return [];
@@ -50,33 +60,51 @@ const config = {
 };
 
 export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
-  ({ loading, width, height, graphData, buttons = [], onNodeClick, onBackgroundClick, onNodeHover }, ref) => {
+  (
+    {
+      loading,
+      width,
+      height,
+      graphData,
+      buttons = [],
+      onNodeClick,
+      onBackgroundClick,
+      onNodeHover,
+      onLinkHover,
+      onLinkClick,
+    },
+    ref
+  ) => {
     const theme = useTheme();
     const [isRendering, setIsRendering] = useState(true);
-    const [hoveredNode, setHoveredNode] = useState<NodeObject | null>(null);
-    const [draggedNode, setDraggedNode] = useState<NodeObject | null>(null);
-    const [selectedNode, setSelectedNode] = useState<NodeObject | null>(null);
+
+    const stateRef = useRef<GraphState>({
+      transform: { x: 0, y: 0, k: 1 }, // x, y для переміщення, k для масштабу
+      isPanning: false,
+      hoveredNode: null,
+      hoveredLink: null,
+      draggedNode: null,
+      selectedNode: null,
+      hoveredButtonIndex: null,
+      highlightNodes: new Set(),
+      highlightLinks: new Set(),
+      lastMousePos: { x: 0, y: 0 },
+      mustBeStoppedPropagation: false,
+      lastHoveredNode: null,
+      mouseStartPos: null,
+      isDragging: false,
+      lastHoveredNodeRef: null,
+      width: width * RATIO,
+      height: height * RATIO,
+    });
 
     const { nodes, links } = useMemo(() => cloneDeep(graphData), [graphData]);
 
     // Стани кнопок
-    const [hoveredButtonIndex, setHoveredButtonIndex] = useState<number | null>(null);
     const [buttonImages, setButtonImages] = useState<any[]>([]);
 
-    // Стани виділення
-    const [highlightNodes, setHighlightNodes] = useState(new Set());
-    const [highlightLinks, setHighlightLinks] = useState(new Set());
-
-    // Стан трансформації для масштабування та панорамування
-    const [transform, setTransform] = useState({ x: 0, y: 0, k: 1 }); // x, y для переміщення, k для масштабу
-    const [isPanning, setIsPanning] = useState(false);
-    const lastMousePosRef = useRef({ x: 0, y: 0 });
-    const mustBeStoppedPropagation = useRef(false);
-
-    // Використання canvas замість SVG для кращої продуктивності
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const simulationRef = useRef<Simulation<NodeObject, LinkObject> | null>(null);
-    const lastHoveredNodeRef = useRef<NodeObject | null>(null);
 
     // Контекст Canvas для 2D рендерингу
     const ctx2dRef = useRef<CanvasRenderingContext2D | null>(null);
@@ -124,14 +152,14 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         ctx.setTransform(1, 0, 0, 1, 0, 0);
 
         // Малюємо фонові крапки
-        const { width: canvasWidth, height: canvasHeight } = ctx.canvas;
+        const { width: canvasWidth, height: canvasHeight } = stateRef.current;
         const gridSpacing = config.gridSpacing;
         const dotSize = config.dotSize;
 
         ctx.fillStyle = theme.graph2D.grid.dotColor;
 
-        for (let x = 0; x < canvasWidth; x += gridSpacing) {
-          for (let y = 0; y < canvasHeight; y += gridSpacing) {
+        for (let x = gridSpacing / 2; x <= canvasWidth; x += gridSpacing) {
+          for (let y = gridSpacing / 2; y <= canvasHeight; y += gridSpacing) {
             ctx.beginPath();
             ctx.arc(x, y, dotSize, 0, 2 * Math.PI);
             ctx.fill();
@@ -145,7 +173,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
     );
 
     // Функція для обрізання тексту з додаванням трикрапки
-    const truncateText = (text: string, maxWidth: number, ctx: CanvasRenderingContext2D): string => {
+    const truncateText = useCallback((text: string, maxWidth: number, ctx: CanvasRenderingContext2D): string => {
       if (!text) return '';
 
       // Вимірюємо ширину тексту
@@ -164,7 +192,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       }
 
       return truncated + ellipsis;
-    };
+    }, []);
 
     // Розрахунок розміру шрифту на основі масштабу/зуму
     const calculateFontSize = (scale: number): number => {
@@ -227,7 +255,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           };
 
           // Колір лінії залежить від стану виділення
-          const isHighlighted = highlightLinks.has(link);
+          const isHighlighted = stateRef.current.highlightLinks.has(link);
           const lineColor = isHighlighted ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
           const lineWidth = isHighlighted ? 1.5 : 0.5;
 
@@ -239,7 +267,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           // Малюємо лінію у дві частини, якщо є мітка
           if (link.label) {
             // Обчислюємо ширину тексту для проміжку
-            const globalScale = transform.k;
+            const globalScale = stateRef.current.transform.k;
             const scaledFontSize = calculateFontSize(globalScale);
             ctx.font = `${scaledFontSize}px Sans-Serif`;
             const textWidth = ctx.measureText(link.label).width;
@@ -305,10 +333,10 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           // Малюємо мітку, якщо вона є
           if (link.label) {
             // Ми вже обчислили ці значення раніше
-            // const middleX = start.x + (end.x - start.x) / 2;
-            // const middleY = start.y + (end.y - start.y) / 2;
+            // const середнєX = start.x + (end.x - start.x) / 2;
+            // const середнєY = start.y + (end.y - start.y) / 2;
 
-            const globalScale = transform.k; // Використовуємо поточний рівень масштабування
+            const globalScale = stateRef.current.transform.k; // Використовуємо поточний рівень масштабування
             const scaledFontSize = calculateFontSize(globalScale);
 
             ctx.font = `${scaledFontSize}px Sans-Serif`;
@@ -336,7 +364,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           }
         });
       },
-      [config, transform.k, highlightLinks, theme.graph2D.link]
+      [config, theme.graph2D.link]
     );
 
     // Функція для рендерингу кнопок навколо вузла
@@ -359,7 +387,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         for (let i = 0; i < buttonCount; i++) {
           const startAngle = i * sectorAngle;
           const endAngle = (i + 1) * sectorAngle;
-          const isHovered = hoveredButtonIndex === i;
+          const isHovered = stateRef.current.hoveredButtonIndex === i;
 
           // Малюємо фон сектора кнопки
           ctx.beginPath();
@@ -394,7 +422,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
               console.warn('Error rendering button icon:', error);
             }
           } else {
-            // Set onload handler if image isn't loaded yet
+            // Встановлюємо обробник onload, якщо зображення ще не завантажено
             icon.onload = () => {
               if (ctx2dRef.current) {
                 try {
@@ -409,7 +437,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
         ctx.restore();
       },
-      [buttonImages, hoveredButtonIndex, config, theme.graph2D?.button]
+      [buttonImages, theme.graph2D?.button]
     );
 
     const renderNodes = useCallback(
@@ -418,17 +446,20 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         if (!nodes || nodes.length === 0) return;
 
         ctx.globalAlpha = 1.0;
-        // Draw all nodes
+        // Малюємо всі вузли
         nodes.forEach((node) => {
           const { x, y, color: nodeColor, fontColor, label } = node;
-          const isHighlighted = highlightNodes.has(node) || node === hoveredNode || node === draggedNode;
-          const isSelected = node === selectedNode;
+          const isHighlighted =
+            stateRef.current.highlightNodes.has(node) ||
+            node === stateRef.current.hoveredNode ||
+            node === stateRef.current.draggedNode;
+          const isSelected = node === stateRef.current.selectedNode;
 
-          // Node size and position
+          // Розмір та позиція вузла
           const size = config.nodeSizeBase;
           const radius = isSelected ? config.nodeSizeBase / 2 : config.nodeSizeBase / 2;
 
-          // If node is highlighted, draw highlight ring
+          // Якщо вузол виділено, малюємо кільце підсвічування
           if (isHighlighted && !isSelected) {
             const ringRadius = (config.nodeSizeBase * config.nodeAreaFactor * 0.75) / 2;
 
@@ -438,9 +469,9 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
             ctx.fill();
           }
 
-          // If node is selected, draw selection ring and buttons
+          // Якщо вузол обрано, малюємо кільце вибору та кнопки
           if (isSelected) {
-            // Draw buttons around selected node if buttons are available
+            // Малюємо кнопки навколо обраного вузла, якщо кнопки доступні
             if (buttons && buttons.length > 0) {
               renderNodeButtons(node, ctx);
             } else {
@@ -453,18 +484,18 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
             }
           }
 
-          // Draw the node circle
+          // Малюємо коло вузла
           ctx.beginPath();
           ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
           ctx.fillStyle = nodeColor || color(node.group || '0');
           ctx.fill();
 
-          // Draw label if available
+          // Малюємо мітку, якщо вона доступна
           if (label) {
             ctx.save();
             ctx.translate(x as number, y as number);
 
-            const globalScale = transform.k;
+            const globalScale = stateRef.current.transform.k;
             const scaledFontSize = calculateFontSize(globalScale);
             const maxWidth = size * config.textPaddingFactor;
 
@@ -480,18 +511,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           }
         });
       },
-      [
-        config,
-        color,
-        hoveredNode,
-        draggedNode,
-        selectedNode,
-        highlightNodes,
-        transform.k,
-        theme.graph2D.ring,
-        buttons,
-        renderNodeButtons,
-      ]
+      [theme.graph2D.ring, buttons, renderNodeButtons]
     );
 
     // 2D Canvas rendering for everything
@@ -499,34 +519,40 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       const ctx = ctx2dRef.current;
       if (!ctx) return;
 
-      // Get device pixel ratio for correct rendering
-      const pixelRatio = window.devicePixelRatio || 1;
+      // Отримуємо відношення пікселів пристрою для коректного рендерингу
 
       // Очищуємо весь канвас перед новим рендерингом.
-      ctx.clearRect(0, 0, width * pixelRatio, height * pixelRatio);
+      ctx.clearRect(0, 0, stateRef.current.width, stateRef.current.height);
 
-      // Render grid first (background)
+      // Спочатку відображаємо сітку (фон)
       renderGrid(ctx);
 
-      // Apply transformation (zoom and pan) - use matrix transformation for better performance
+      // Застосовуємо трансформацію (масштабування та панорамування) - використовуємо матричну трансформацію для кращої продуктивності
       ctx.save();
 
-      // First translate to the pan position, then scale around that point
-      ctx.setTransform(transform.k, 0, 0, transform.k, transform.x, transform.y);
-
-      // Render links and nodes
+      // Спочатку переміщуємо до позиції панорамування, потім масштабуємо навколо цієї точки
+      ctx.setTransform(
+        stateRef.current.transform.k,
+        0,
+        0,
+        stateRef.current.transform.k,
+        stateRef.current.transform.x,
+        stateRef.current.transform.y
+      );
+
+      // Відображаємо зв'язки та вузли
       renderLinks(ctx);
       renderNodes(ctx);
 
-      // Restore context
+      // Відновлюємо контекст
       ctx.restore();
-    }, [width, height, renderLinks, renderNodes, renderGrid, transform]);
+    }, [renderLinks, renderNodes, renderGrid]);
 
     /**
-     * Function to add new nodes to the graph with optional smooth appearance animation
-     * @param newNodes The new nodes to add to the graph
-     * @param newLinks Optional new links to add with the nodes
-     * @param options Configuration options for the node addition
+     * Функція для додавання нових вузлів до графа з опціональною плавною анімацією появи
+     * @param newNodes Нові вузли для додавання до графа
+     * @param newLinks Опціональні нові зв'язки для додавання з вузлами
+     * @param options Параметри конфігурації для додавання вузлів
      */
     const addNodes = useCallback(
       (
@@ -541,15 +567,15 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         const nodes = getNodes() || [];
         if (!simulationRef.current || !newNodes.length) return;
 
-        // Опції по умолчанню
+        const { width: canvasWidth, height: canvasHeight } = stateRef.current; // Опції по умолчанню
         const smoothAppearance = options?.smoothAppearance ?? false;
         const transitionDuration = options?.transitionDuration ?? 1000; // 1 секунда по умолчанню
 
-        // Process the new nodes to avoid duplicates
+        // Обробляємо нові вузли, щоб уникнути дублікатів
         const existingNodeIds = new Set(nodes.map((node) => node.id));
         const filteredNewNodes = newNodes.filter((node) => !existingNodeIds.has(node.id));
 
-        // Process the new links to avoid duplicates and ensure they reference valid nodes
+        // Обробляємо нові зв'язки, щоб уникнути дублікатів та переконатися, що вони посилаються на дійсні вузли
         const existingLinkIds = new Set(
           links.map(
             (link) =>
@@ -568,15 +594,14 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
         if (filteredNewNodes.length === 0 && filteredNewLinks.length === 0) return;
 
-        // Update graphData with new nodes and links
         const updatedNodes = [...nodes, ...filteredNewNodes];
         const updatedLinks = [...links, ...filteredNewLinks];
 
-        // Pre-position new nodes only when smooth appearance is enabled
+        // Попереднє позиціонування нових вузлів тільки коли плавна поява увімкнена
         if (smoothAppearance) {
-          // Pre-position new nodes near their connected nodes
+          // Попередньо позиціонуємо нові вузли біля підключених вузлів
           filteredNewNodes.forEach((node) => {
-            // Check if any link connects this node to existing nodes
+            // Перевіряємо, чи є зв'язки, що поєднують цей вузол з існуючими вузлами
             const connectedLinks = filteredNewLinks.filter((link) => {
               const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
               const targetId = typeof link.target === 'object' ? link.target.id : link.target;
@@ -587,7 +612,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
             });
 
             if (connectedLinks.length > 0) {
-              // Find an existing connected node to position near
+              // Знаходимо існуючий підключений вузол для розташування поряд
               const someLink = connectedLinks[0];
               const connectedNodeId =
                 typeof someLink.source === 'object'
@@ -601,23 +626,23 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
               const connectedNode = updatedNodes.find((n) => n.id === connectedNodeId);
 
               if (connectedNode && connectedNode.x !== undefined && connectedNode.y !== undefined) {
-                // Position new node near the connected node with small randomization
+                // Розташовуємо новий вузол біля підключеного вузла з невеликою рандомізацією
                 const randomOffset = 30 + Math.random() * 20;
                 const randomAngle = Math.random() * Math.PI * 2;
 
-                // Set initial position
+                // Встановлюємо початкову позицію
                 node.x = connectedNode.x + Math.cos(randomAngle) * randomOffset;
                 node.y = connectedNode.y + Math.sin(randomAngle) * randomOffset;
 
-                // Set initial velocity to zero for smoother appearance
+                // Встановлюємо початкову швидкість в нуль для плавнішої появи
                 node.vx = 0;
                 node.vy = 0;
               }
             } else {
-              // For disconnected nodes, place them in view at random positions
-              const centerX = width / 2;
-              const centerY = height / 2;
-              const radius = Math.min(width, height) / 4;
+              // Для непідключених вузлів розміщуємо їх у полі зору у випадкових позиціях
+              const centerX = canvasWidth / 2;
+              const centerY = canvasHeight / 2;
+              const radius = Math.min(canvasWidth, canvasHeight) / 4;
               const angle = Math.random() * Math.PI * 2;
 
               node.x = centerX + Math.cos(angle) * (radius * Math.random());
@@ -627,23 +652,23 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
             }
           });
 
-          // Fix positions of existing nodes to prevent them from moving
+          // Фіксуємо позиції існуючих вузлів, щоб запобігти їхньому руху
           nodes.forEach((node) => {
             node.fx = node.x;
             node.fy = node.y;
           });
         }
 
-        // Update the simulation with new nodes and links
+        // Оновлюємо симуляцію з новими вузлами та зв'язками
         simulationRef.current.nodes(updatedNodes);
 
-        // Get the link force with proper typing
+        // Отримуємо силу зв'язків із правильним типом
         const linkForce = simulationRef.current.force('link') as ForceLink<NodeObject, LinkObject>;
         if (linkForce) {
           linkForce.links(updatedLinks);
         }
 
-        // Connect new nodes to their neighbors and links
+        // Підключаємо нові вузли до їхніх сусідів та зв'язків
         filteredNewLinks.forEach((link: any) => {
           const source =
             typeof link.source === 'object' ? link.source : updatedNodes.find((n: any) => n.id === link.source);
@@ -652,7 +677,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
           if (!source || !target) return;
 
-          // Initialize arrays if they don't exist
+          // Ініціалізуємо масиви, якщо вони не існують
           !source.neighbors && (source.neighbors = []);
           !target.neighbors && (target.neighbors = []);
           source.neighbors.push(target);
@@ -665,40 +690,40 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         });
 
         if (smoothAppearance) {
-          // Configure simulation for smooth appearance of new nodes
+          // Налаштовуємо симуляцію для плавної появи нових вузлів
           simulationRef.current.alphaTarget(0.3);
           simulationRef.current.alpha(0.3);
-          simulationRef.current.velocityDecay(0.7); // Higher decay for smoother motion
+          simulationRef.current.velocityDecay(0.7); // Більше загасання для плавнішого руху
           simulationRef.current.restart();
 
-          // After a short time, unfix all nodes and reset simulation parameters
+          // Через короткий час відфіксовуємо всі вузли та скидаємо параметри симуляції
           setTimeout(() => {
-            // Unfix existing nodes to allow natural movement again
+            // Звільняємо існуючі вузли, щоб дозволити їм природний рух
             nodes.forEach((node) => {
               node.fx = undefined;
               node.fy = undefined;
             });
 
-            // Reset simulation to normal settings
+            // Скидаємо симуляцію до нормальних налаштувань
             simulationRef.current?.alphaTarget(0);
             simulationRef.current?.alpha(0.1);
-            simulationRef.current?.velocityDecay(0.6); // Reset to default
+            simulationRef.current?.velocityDecay(0.6); // Скидаємо до значення за замовчуванням
           }, transitionDuration);
         } else {
-          // Standard restart with low energy for minimal movement
+          // Стандартний перезапуск з низькою енергією для мінімального руху
           simulationRef.current.alpha(0.1).restart();
         }
 
-        // Re-render the canvas
+        // Перемальовуємо канвас
         renderCanvas2D();
       },
-      [graphData, simulationRef, renderCanvas2D, width, height]
+      [nodes, renderCanvas2D]
     );
 
     /**
-     * Function to remove nodes from the graph with optional smooth disappearance animation
-     * @param nodeIds Array of node IDs to remove
-     * @param options Configuration options for the node removal
+     * Функція для видалення вузлів з графа з опціональною плавною анімацією зникнення
+     * @param nodeIds Масив ID вузлів для видалення
+     * @param options Параметри конфігурації для видалення вузлів
      */
     const removeNodes = useCallback(
       (nodeIds: (string | number)[]) => {
@@ -707,28 +732,61 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         if (!simulationRef.current || !nodeIds.length || !nodes || nodes.length === 0 || !links || links.length === 0)
           return;
 
-        // Create set of node IDs for quick lookup
+        // Створюємо набір ID вузлів для швидкого пошуку
         const nodeIdsToRemove = new Set(nodeIds);
 
-        // First check if we're removing any selected/hovered node
-        if (selectedNode && selectedNode.id !== undefined && nodeIdsToRemove.has(selectedNode.id)) {
-          setSelectedNode(null);
+        // Спочатку перевіряємо, чи видаляємо який-небудь виділений/наведений вузол
+        if (
+          stateRef.current.selectedNode &&
+          stateRef.current.selectedNode.id !== undefined &&
+          nodeIdsToRemove.has(stateRef.current.selectedNode.id)
+        ) {
+          stateRef.current.selectedNode = null;
         }
 
-        if (hoveredNode && hoveredNode.id !== undefined && nodeIdsToRemove.has(hoveredNode.id)) {
-          setHoveredNode(null);
-          setHighlightNodes(new Set());
-          setHighlightLinks(new Set());
+        if (
+          stateRef.current.hoveredNode &&
+          stateRef.current.hoveredNode.id !== undefined &&
+          nodeIdsToRemove.has(stateRef.current.hoveredNode.id)
+        ) {
+          stateRef.current.hoveredNode = null;
+          stateRef.current.highlightNodes = new Set<NodeObject>();
+          stateRef.current.highlightLinks = new Set<any>();
         }
 
-        if (draggedNode && draggedNode.id !== undefined && nodeIdsToRemove.has(draggedNode.id)) {
-          setDraggedNode(null);
+        // Clear hoveredLink if it involves removed nodes
+        if (stateRef.current.hoveredLink) {
+          const source =
+            typeof stateRef.current.hoveredLink.source === 'object'
+              ? stateRef.current.hoveredLink.source.id
+              : stateRef.current.hoveredLink.source;
+          const target =
+            typeof stateRef.current.hoveredLink.target === 'object'
+              ? stateRef.current.hoveredLink.target.id
+              : stateRef.current.hoveredLink.target;
+
+          if (
+            (source !== undefined && nodeIdsToRemove.has(source)) ||
+            (target !== undefined && nodeIdsToRemove.has(target))
+          ) {
+            stateRef.current.hoveredLink = null;
+            stateRef.current.highlightNodes = new Set<NodeObject>();
+            stateRef.current.highlightLinks = new Set<any>();
+          }
         }
 
-        // Get all nodes that will be kept after removal
+        if (
+          stateRef.current.draggedNode &&
+          stateRef.current.draggedNode.id !== undefined &&
+          nodeIdsToRemove.has(stateRef.current.draggedNode.id)
+        ) {
+          stateRef.current.draggedNode = null;
+        }
+
+        // Отримуємо всі вузли, які залишаться після видалення
         const remainingNodes = nodes.filter((node) => node.id !== undefined && !nodeIdsToRemove.has(node.id));
 
-        // Get all links that don't connect to removed nodes
+        // Отримуємо всі зв'язки, які не підключаються до видалених вузлів
         const remainingLinks = links.filter((link) => {
           const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
           const targetId = typeof link.target === 'object' ? link.target.id : link.target;
@@ -741,14 +799,14 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           );
         });
 
-        // Rebuild node relationships (neighbors and links) for remaining nodes
-        // First, clear existing relationships
+        // Перебудовуємо відносини вузлів (сусіди та зв'язки) для вузлів, що залишилися
+        // Спочатку очищаємо існуючі відносини
         remainingNodes.forEach((node) => {
           node.neighbors = [];
           node.links = [];
         });
 
-        // Then rebuild based on remaining links
+        // Потім перебудовуємо на основі зв'язків, що залишилися
         remainingLinks.forEach((link: any) => {
           const source =
             typeof link.source === 'object' ? link.source : remainingNodes.find((n: any) => n.id === link.source);
@@ -757,28 +815,24 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
           if (!source || !target) return;
 
-          // Add to neighbors arrays
+          // Додаємо до масивів сусідів
           source.neighbors = source.neighbors || [];
           target.neighbors = target.neighbors || [];
           source.neighbors.push(target);
           target.neighbors.push(source);
 
-          // Add to links arrays
+          // Додаємо до масивів зв'язків
           source.links = source.links || [];
           target.links = target.links || [];
           source.links.push(link);
           target.links.push(link);
         });
 
-        // Update component state directly
-        graphData.nodes = remainingNodes;
-        graphData.links = remainingLinks;
-
-        // Update the simulation with the filtered nodes and links
+        // Оновлюємо симуляцію з відфільтрованими вузлами та зв'язками
         // але не змінюємо їхні позиції
         simulationRef.current.nodes(remainingNodes);
 
-        // Get and update the link force
+        // Отримуємо та оновлюємо силу зв'язків
         const linkForce = simulationRef.current.force('link') as ForceLink<NodeObject, LinkObject>;
         if (linkForce) {
           linkForce.links(remainingLinks);
@@ -787,248 +841,176 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         // Просто перемальовуємо canvas з новими даними
         renderCanvas2D();
       },
-      [selectedNode, hoveredNode, draggedNode, graphData, renderCanvas2D]
+      [renderCanvas2D]
     );
+    // Функція для масштабування, щоб усі вузли помістилися в полі зору з відступами
+    const zoomToFit = useCallback((duration: number = 0, padding: number = 20) => {
+      const nodes = getNodes();
+      const ctx = ctx2dRef.current;
+      if (!ctx || !canvasRef.current || !nodes || !nodes.length) return;
+
+      // Знаходимо межі всіх вузлів
+      let minX = Infinity,
+        minY = Infinity;
+      let maxX = -Infinity,
+        maxY = -Infinity;
+
+      // Розраховуємо область, що містить усі вузли
+      nodes.forEach((node) => {
+        if (node.x === undefined || node.y === undefined) return;
+
+        const x = node.x;
+        const y = node.y;
+
+        // Оновлюємо мін/макс координати
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      });
 
-    // Function to zoom to fit all nodes in view with padding
-
-    // Function to zoom to fit all nodes in view with padding
-    const zoomToFit = useCallback(
-      (duration: number = 0, padding: number = 20) => {
-        const nodes = getNodes();
-        if (!canvasRef.current || !nodes || !nodes.length) return;
-
-        // Find the bounds of all nodes
-        let minX = Infinity,
-          minY = Infinity;
-        let maxX = -Infinity,
-          maxY = -Infinity;
-
-        // Calculate the bounding box containing all nodes
-        nodes.forEach((node) => {
-          if (node.x === undefined || node.y === undefined) return;
-
-          const x = node.x;
-          const y = node.y;
-
-          // Update min/max coordinates
-          minX = Math.min(minX, x);
-          minY = Math.min(minY, y);
-          maxX = Math.max(maxX, x);
-          maxY = Math.max(maxY, y);
-        });
+      // Якщо у нас валідні межі
+      if (isFinite(minX) && isFinite(maxX) && isFinite(minY) && isFinite(maxY)) {
+        // Розраховуємо необхідний масштаб, щоб вмістити всі вузли
+        const { width: canvasWidth, height: canvasHeight } = stateRef.current;
+
+        // Додаємо відступи до області
+        minX -= padding;
+        minY -= padding;
+        maxX += padding;
+        maxY += padding;
+
+        // Розраховуємо ширину та висоту вмісту
+        const contentWidth = maxX - minX;
+        const contentHeight = maxY - minY;
+
+        // Розраховуємо масштаб, необхідний для розміщення вмісту
+        const scaleX = contentWidth > 0 ? canvasWidth / contentWidth : 1;
+        const scaleY = contentHeight > 0 ? canvasHeight / contentHeight : 1;
+        const scale = Math.min(scaleX, scaleY, 10); // Обмежуємо масштаб до 10x
+
+        // Розраховуємо центр вмісту
+        const centerX = minX + contentWidth / 2;
+        const centerY = minY + contentHeight / 2;
+
+        // Розраховуємо нову трансформацію для правильного центрування та масштабування
+        const newTransform = {
+          k: scale,
+          x: canvasWidth / 2 - centerX * scale,
+          y: canvasHeight / 2 - centerY * scale,
+        };
+
+        if (duration > 0) {
+          // Анімуємо перехід, якщо вказана тривалість
+          const startTransform = { ...stateRef.current.transform };
+          const startTime = Date.now();
+
+          const animateZoom = () => {
+            const t = Math.min(1, (Date.now() - startTime) / duration);
+
+            // Використовуємо функцію пом'якшення для плавнішого переходу
+            const easedT = t === 1 ? 1 : 1 - Math.pow(1 - t, 3); // Кубічне пом'якшення
+
+            // Інтерполюємо між початковою та кінцевою трансформаціями
+            const interpolatedTransform = {
+              k: startTransform.k + (newTransform.k - startTransform.k) * easedT,
+              x: startTransform.x + (newTransform.x - startTransform.x) * easedT,
+              y: startTransform.y + (newTransform.y - startTransform.y) * easedT,
+            };
 
-        // If we have valid bounds
-        if (isFinite(minX) && isFinite(maxX) && isFinite(minY) && isFinite(maxY)) {
-          // Calculate the required scale to fit all nodes
-          const canvasWidth = width;
-          const canvasHeight = height;
-
-          // Add padding to the bounding box
-          minX -= padding;
-          minY -= padding;
-          maxX += padding;
-          maxY += padding;
-
-          // Calculate the width and height of the content
-          const contentWidth = maxX - minX;
-          const contentHeight = maxY - minY;
-
-          // Calculate the scale required to fit the content
-          const scaleX = contentWidth > 0 ? canvasWidth / contentWidth : 1;
-          const scaleY = contentHeight > 0 ? canvasHeight / contentHeight : 1;
-          const scale = Math.min(scaleX, scaleY, 10); // Cap zoom at 10x
-
-          // Calculate the center of the content
-          const centerX = minX + contentWidth / 2;
-          const centerY = minY + contentHeight / 2;
-
-          // Calculate the new transform to center and scale correctly
-          const newTransform = {
-            k: scale,
-            x: canvasWidth / 2 - centerX * scale,
-            y: canvasHeight / 2 - centerY * scale,
+            stateRef.current.transform = interpolatedTransform;
+            renderCanvas2D();
+            if (t < 1) {
+              requestAnimationFrame(animateZoom);
+            }
           };
 
-          if (duration > 0) {
-            // Animate the transition if duration is provided
-            const startTransform = { ...transform };
-            const startTime = Date.now();
-
-            const animateZoom = () => {
-              const t = Math.min(1, (Date.now() - startTime) / duration);
-
-              // Use easing function for smoother transition
-              const easedT = t === 1 ? 1 : 1 - Math.pow(1 - t, 3); // Cubic easing
-
-              // Interpolate between start and end transform
-              const interpolatedTransform = {
-                k: startTransform.k + (newTransform.k - startTransform.k) * easedT,
-                x: startTransform.x + (newTransform.x - startTransform.x) * easedT,
-                y: startTransform.y + (newTransform.y - startTransform.y) * easedT,
-              };
-
-              setTransform(interpolatedTransform);
-
-              if (t < 1) {
-                requestAnimationFrame(animateZoom);
-              }
-            };
-
-            requestAnimationFrame(animateZoom);
-          } else {
-            // Apply transform immediately if no duration
-            setTransform(newTransform);
-          }
+          requestAnimationFrame(animateZoom);
+        } else {
+          // Застосовуємо трансформацію негайно, якщо немає тривалості
+          stateRef.current.transform = newTransform;
+          renderCanvas2D();
         }
-      },
-      [width, height, transform]
-    );
-
-    useEffect(() => {
-      // Initialize canvas context
-      const canvasElement = canvasRef.current;
-      if (!canvasElement) return;
-
-      // Set canvas size with device pixel ratio for sharp rendering
-      const pixelRatio = window.devicePixelRatio || 1;
-      canvasElement.width = width * pixelRatio;
-      canvasElement.height = height * pixelRatio;
-      canvasElement.style.width = `${width}px`;
-      canvasElement.style.height = `${height}px`;
-
-      // Initialize Canvas 2D context
-      init2DCanvas();
+      }
+    }, []);
 
-      // Calculate the center position adjusted for the canvas size
-      const centerX = width / 2;
-      const centerY = height / 2;
+    // Знаходимо вузол за вказаними координатами
+    const getNodeAtPosition = useCallback((x: number, y: number): NodeObject | null => {
+      const nodes = getNodes();
+      if (!nodes || nodes.length === 0) return null;
 
-      // Initialize D3 force simulation
-      const nodeSize = config.nodeSizeBase;
-      const nodeRadius = nodeSize / 2;
-      const linkDistance = nodeSize * 2.5; // Calculate link distance based on node size
+      // Знаходимо будь-який вузол у межах радіусу від вказівника (з урахуванням розміру вузла)
+      const nodeRadius = config.nodeSizeBase / 2;
 
-      const simulation = (simulationRef.current = forceSimulation(nodes)
-        .force(
-          'link',
-          forceLink(links)
-            .id((d: any) => d.id)
-            .distance(linkDistance) // Адаптивна відстань між вузлами на основі розміру
-            .strength(0.9) // Зменшуємо силу зв'язків (значення від 0 до 1)
-        )
-        .force(
-          'charge',
-          forceManyBody()
-            .strength((-nodeSize / 10) * 100) // Силу відштовхування на основі розміру вузла
-            .theta(0.5) // Оптимізація для стабільності (0.5-1.0)
-            .distanceMin(nodeSize * 2)
-        )
-        .force('x', forceX().strength(0.03)) // Слабка сила для стабілізації по осі X
-        .force('y', forceY().strength(0.03)) // Слабка сила для стабілізації по осі Y
-        .force('center', forceCenter(centerX, centerY).strength(0.05)) // Слабка сила центрування
-        .force(
-          'collide',
-          forceCollide()
-            .radius(nodeRadius * 2) // Радіус колізії залежно від розміру вузла
-            .iterations(2) // Більше ітерацій для кращого запобігання перекриття
-            .strength(1) // Збільшуємо силу запобігання колізіям
-        )
-        .velocityDecay(0.6)); // Коефіцієнт затухання швидкості для зменшення "тряски"
+      // Масштабуємо координати на основі коефіцієнту щільності пікселів пристрою та застосовуємо зворотну трансформацію
+      const pixelRatio = window.devicePixelRatio || 1;
+      // Застосовуємо зворотну трансформацію, щоб отримати координати в системі координат графа
+      const scaledX = (x * pixelRatio - stateRef.current.transform.x) / stateRef.current.transform.k;
+      const scaledY = (y * pixelRatio - stateRef.current.transform.y) / stateRef.current.transform.k;
+
+      return (
+        nodes.find((node) => {
+          const dx = (node.x || 0) - scaledX;
+          const dy = (node.y || 0) - scaledY;
+          return Math.sqrt(dx * dx + dy * dy) <= nodeRadius;
+        }) || null
+      );
+    }, []);
 
-      return () => {
-        // Cleanup
-        simulation.stop();
-      };
-    }, [width, height, nodes, links, init2DCanvas]);
+    // Знаходимо лінк за вказаними координатами
+    const getLinkAtPosition = useCallback((x: number, y: number): LinkObject | null => {
+      const links = getLinks();
+      const nodes = getNodes();
+      if (!links || links.length === 0 || !nodes || nodes.length === 0) return null;
 
-    useEffect(() => {
-      if (simulationRef.current) {
-        const simulation = simulationRef.current;
-        // Update node positions on each tick
+      // Масштабуємо координати на основі коефіцієнту щільності пікселів пристрою та застосовуємо зворотну трансформацію
+      const pixelRatio = window.devicePixelRatio || 1;
+      // Застосовуємо зворотну трансформацію, щоб отримати координати в системі координат графа
+      const scaledX = (x * pixelRatio - stateRef.current.transform.x) / stateRef.current.transform.k;
+      const scaledY = (y * pixelRatio - stateRef.current.transform.y) / stateRef.current.transform.k;
 
-        simulation.on('tick', () => {
-          renderCanvas2D();
-        });
+      // Пороговая відстань для визначення кліку по лінку
+      const threshold = 5;
 
-        // When simulation ends, stop rendering indicator
-        simulation.on('end', () => {
-          // Render one last time
-          if (isRendering) {
-            zoomToFit(0, 20); // Zoom to fit after rendering
+      return (
+        links.find((link) => {
+          const source = typeof link.source === 'object' ? link.source : nodes.find((n) => n.id === link.source);
+          const target = typeof link.target === 'object' ? link.target : nodes.find((n) => n.id === link.target);
 
-            setTimeout(() => {
-              setIsRendering(false);
-            }, 200);
-          }
-        });
-      }
+          if (!source || !target) return false;
 
-      if (!isRendering) {
-        renderCanvas2D();
-      }
-    }, [isRendering, renderCanvas2D, zoomToFit]);
+          const sourceX = source.x || 0;
+          const sourceY = source.y || 0;
+          const targetX = target.x || 0;
+          const targetY = target.y || 0;
 
-    // Set up node relationships (neighbors and links)
-    useEffect(() => {
-      if (!graphData) return;
+          // Вычисляем расстояние от точки до линии
+          const A = scaledX - sourceX;
+          const B = scaledY - sourceY;
+          const C = targetX - sourceX;
+          const D = targetY - sourceY;
 
-      // Connect nodes to their neighbors and links
-      graphData.links.forEach((link: any) => {
-        const source =
-          typeof link.source === 'object' ? link.source : graphData.nodes.find((n: any) => n.id === link.source);
-        const target =
-          typeof link.target === 'object' ? link.target : graphData.nodes.find((n: any) => n.id === link.target);
+          const dot = A * C + B * D;
+          const lenSq = C * C + D * D;
 
-        if (!source || !target) return;
+          if (lenSq === 0) return false; // Линия нулевой длины
 
-        // Initialize arrays if they don't exist
-        !source.neighbors && (source.neighbors = []);
-        !target.neighbors && (target.neighbors = []);
-        source.neighbors.push(target);
-        target.neighbors.push(source);
+          let param = dot / lenSq;
+          param = Math.max(0, Math.min(1, param)); // Ограничиваем параметр отрезком [0, 1]
 
-        !source.links && (source.links = []);
-        !target.links && (target.links = []);
-        source.links.push(link);
-        target.links.push(link);
-      });
-    }, [graphData]);
+          const xx = sourceX + param * C;
+          const yy = sourceY + param * D;
 
-    // Initialize button images
-    useEffect(() => {
-      if (buttons && buttons.length > 0) {
-        setButtonImages(prepareButtonImages(buttons));
-      }
-    }, [buttons]);
+          const dx = scaledX - xx;
+          const dy = scaledY - yy;
+          const distance = Math.sqrt(dx * dx + dy * dy);
 
-    // Find node at specific coordinates
-    const getNodeAtPosition = useCallback(
-      (x: number, y: number): NodeObject | null => {
-        const nodes = getNodes();
-        if (!nodes || nodes.length === 0) return null;
-
-        // Find any node within radius pixels of the pointer (adjusted for node size)
-        const nodeRadius = config.nodeSizeBase / 2;
-
-        // Scale coordinates based on device pixel ratio and apply inverse transform
-        const pixelRatio = window.devicePixelRatio || 1;
-        // Apply inverse transform to get the coordinates in the graph's coordinate system
-        const scaledX = (x * pixelRatio - transform.x) / transform.k;
-        const scaledY = (y * pixelRatio - transform.y) / transform.k;
-
-        return (
-          nodes.find((node) => {
-            const dx = (node.x || 0) - scaledX;
-            const dy = (node.y || 0) - scaledY;
-            return Math.sqrt(dx * dx + dy * dy) <= nodeRadius;
-          }) || null
-        );
-      },
-      [transform, config.nodeSizeBase]
-    );
+          return distance <= threshold;
+        }) || null
+      );
+    }, []);
 
-    // Utility function to check if a point is inside a button sector
+    // Допоміжна функція для перевірки, чи знаходиться точка всередині сектора кнопки
     const isPointInButtonSector = useCallback(
       (
         mouseX: number,
@@ -1039,32 +1021,32 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         startAngle: number,
         endAngle: number
       ): boolean => {
-        // Calculate distance from node center to mouse point
+        // Розраховуємо відстань від центру вузла до точки миші
         const dx = mouseX - nodeX;
         const dy = mouseY - nodeY;
         const distance = Math.sqrt(dx * dx + dy * dy);
 
-        // Calculate angle between point and horizontal axis
+        // Розраховуємо кут між точкою та горизонтальною віссю
         let angle = Math.atan2(dy, dx);
-        if (angle < 0) angle += 2 * Math.PI; // Convert to [0, 2π] range
+        if (angle < 0) angle += 2 * Math.PI; // Конвертуємо в діапазон [0, 2π]
 
-        // Expand radius range for easier button interaction
+        // Розширюємо діапазон радіусу для зручнішої взаємодії з кнопками
         const minRadiusRatio = 0.5;
         const maxRadiusRatio = 1;
         const isInRadius = distance >= radius * minRadiusRatio && distance <= radius * maxRadiusRatio;
 
-        // Check if the angle is within the sector
+        // Перевіряємо, чи кут знаходиться в межах сектора
         let isInAngle = false;
 
-        // Top half circle: from Math.PI to Math.PI * 2
+        // Верхнє півколо: від Math.PI до Math.PI * 2
         if (startAngle === Math.PI && endAngle === Math.PI * 2) {
           isInAngle = angle >= Math.PI && angle <= Math.PI * 2;
         }
-        // Bottom half circle: from 0 to Math.PI
+        // Нижнє півколо: від 0 до Math.PI
         else if (startAngle === 0 && endAngle === Math.PI) {
           isInAngle = angle >= 0 && angle <= Math.PI;
         }
-        // General case for arbitrary sectors
+        // Загальний випадок для довільних секторів
         else {
           isInAngle =
             (startAngle <= endAngle && angle >= startAngle && angle <= endAngle) ||
@@ -1076,24 +1058,24 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       []
     );
 
-    // Handle node hover (similar to Graph2D handleNodeHover)
+    // Обробка наведення на вузол (подібно до Graph2D handleNodeHover)
     const handleNodeHover = useCallback(
       (node: NodeObject | null) => {
-        // Check if the node is the same as the last hovered node
-        if (node === lastHoveredNodeRef.current) {
-          return; // Skip processing if it's the same node
+        // Перевіряємо, чи вузол той самий, що і останній вузол, на який наводили
+        if (node === stateRef.current.lastHoveredNodeRef) {
+          return; // Пропускаємо обробку, якщо це той самий вузол
         }
 
-        // Update last hovered node reference
-        lastHoveredNodeRef.current = node;
+        // Оновлюємо посилання на останній наведений вузол
+        stateRef.current.lastHoveredNodeRef = node;
 
-        const newHighlightNodes = new Set();
-        const newHighlightLinks = new Set();
+        const newHighlightNodes = new Set<NodeObject>();
+        const newHighlightLinks = new Set<any>();
 
         if (node) {
           newHighlightNodes.add(node);
 
-          // Add neighboring nodes and links to highlighting
+          // Додаємо сусідні вузли та зв'язки до підсвічування
           if (node.neighbors) {
             node.neighbors.forEach((neighbor: any) => newHighlightNodes.add(neighbor));
           }
@@ -1103,78 +1085,116 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           }
         }
 
-        setHoveredNode(node);
+        stateRef.current.hoveredNode = node;
         if (onNodeHover) onNodeHover(node);
-        setHighlightNodes(newHighlightNodes);
-        setHighlightLinks(newHighlightLinks);
+        stateRef.current.highlightNodes = newHighlightNodes;
+        stateRef.current.highlightLinks = newHighlightLinks;
       },
       [onNodeHover]
     );
 
-    // Handle node click
+    // Обробка наведення на лінк
+    const handleLinkHover = useCallback(
+      (link: LinkObject | null) => {
+        // Перевіряємо, чи лінк той самий, що і останній лінк, на який наводили
+        if (link === stateRef.current.hoveredLink) {
+          return; // Пропускаємо обробку, якщо це той самий лінк
+        }
+
+        const newHighlightNodes = new Set<NodeObject>();
+        const newHighlightLinks = new Set<any>();
+
+        if (link) {
+          // Підсвічуємо сам лінк
+          newHighlightLinks.add(link);
+
+          // Підсвічуємо пов'язані вузли
+          const nodes = getNodes();
+          if (nodes) {
+            const source = typeof link.source === 'object' ? link.source : nodes.find((n) => n.id === link.source);
+            const target = typeof link.target === 'object' ? link.target : nodes.find((n) => n.id === link.target);
+
+            if (source) newHighlightNodes.add(source);
+            if (target) newHighlightNodes.add(target);
+          }
+        }
+
+        stateRef.current.hoveredLink = link;
+        if (onLinkHover) onLinkHover(link);
+        stateRef.current.highlightNodes = newHighlightNodes;
+        stateRef.current.highlightLinks = newHighlightLinks;
+      },
+      [onLinkHover, getNodes]
+    );
+
+    // Обробка кліку на лінк
+    const handleLinkClick = useCallback(
+      (link: LinkObject) => {
+        if (onLinkClick) onLinkClick(link);
+      },
+      [onLinkClick]
+    );
+
+    // Обробка кліку на вузол
     const handleNodeClick = useCallback(
       (node: NodeObject) => {
-        setSelectedNode(node);
+        stateRef.current.selectedNode = node;
         if (onNodeClick) onNodeClick(node);
       },
       [onNodeClick]
     );
 
-    // Handle background click
+    // Обробка кліку на фон
     const handleBackgroundClick = useCallback(() => {
-      setSelectedNode(null);
+      stateRef.current.selectedNode = null;
       if (onBackgroundClick) onBackgroundClick();
-    }, [onBackgroundClick]);
-
-    // Відслідковування початкових координат для виявлення перетягування
-    const mouseStartPosRef = useRef<{ x: number; y: number } | null>(null);
-    const isDraggingRef = useRef<boolean>(false); // Handle mouse down for dragging
+    }, [onBackgroundClick]); // Перетягування тепер обробляється через stateRef для покращення продуктивності
 
     const handleMouseDown = useCallback(
       (event: React.MouseEvent<HTMLCanvasElement>) => {
         if (!canvasRef.current || !simulationRef.current) return;
 
-        // Get canvas-relative coordinates
+        // Отримуємо координати відносно полотна
         const rect = canvasRef.current.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
 
         // Зберігаємо початкові координати для подальшого відстеження перетягування
-        mouseStartPosRef.current = { x, y };
-        isDraggingRef.current = false;
+        stateRef.current.mouseStartPos = { x, y };
+        stateRef.current.isDragging = false;
 
-        // Try to find a node at the cursor position - we'll process the click on mouseUp if not dragging
+        // Намагаємося знайти вузол у позиції курсора - обробимо клік при mouseUp, якщо не відбувається перетягування
         const node = getNodeAtPosition(x, y);
         if (node) {
-          // Set as potentially draggable but don't activate simulation yet
-          setDraggedNode(node);
+          // Встановлюємо як потенційно перетягуваний, але не активуємо симуляцію поки що
+          stateRef.current.draggedNode = node;
 
-          // Fix the node position temporarily - поки що фіксуємо позицію
+          // Тимчасово фіксуємо позицію вузла
           node.fx = node.x;
           node.fy = node.y;
         } else {
-          // If no node was clicked, start panning
-          setIsPanning(true);
-          lastMousePosRef.current = { x, y };
+          // Якщо не клікнули на вузол, починаємо панорамування
+          stateRef.current.isPanning = true;
+          stateRef.current.lastMousePos = { x, y };
         }
       },
       [getNodeAtPosition]
     );
 
-    // Handle mouse move for dragging and hovering
+    // Обробка руху миші для перетягування та наведення
     const handleMouseMove = useCallback(
       (event: React.MouseEvent<HTMLCanvasElement>) => {
         if (!canvasRef.current) return;
 
-        // Get canvas-relative coordinates
+        // Отримуємо координати відносно полотна
         const rect = canvasRef.current.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
 
         // Перевіряємо чи почалось перетягування
-        if (draggedNode && mouseStartPosRef.current && simulationRef.current) {
-          const startX = mouseStartPosRef.current.x;
-          const startY = mouseStartPosRef.current.y;
+        if (stateRef.current.draggedNode && stateRef.current.mouseStartPos && simulationRef.current) {
+          const startX = stateRef.current.mouseStartPos.x;
+          const startY = stateRef.current.mouseStartPos.y;
 
           // Визначаємо відстань переміщення для виявлення факту перетягування
           const dx = x - startX;
@@ -1185,97 +1205,100 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           const dragThreshold = 3; // поріг у пікселях
 
           if (dragDistance > dragThreshold) {
-            // This is definitely a drag operation, not a click
-            isDraggingRef.current = true;
+            // Це точно операція перетягування, а не просто клік
+            stateRef.current.isDragging = true;
 
-            // If this is the first detection of dragging, configure the simulation
+            // Якщо це перше виявлення перетягування, налаштовуємо симуляцію
             if (simulationRef.current.alphaTarget() === 0) {
-              // Set alphaTarget to a value based on node size for appropriate movement intensity
-              const alphaValue = 0.15;
+              // Встановлюємо alphaTarget на значення, що базується на розмірі вузла для відповідної інтенсивності руху
+              const alphaValue = 0;
               simulationRef.current.alphaTarget(alphaValue).restart();
 
-              // Adjust decay based on node size for better stability during drag
-              const decayValue = 0.8;
-              simulationRef.current.velocityDecay(decayValue);
+              // // Регулюємо швидкість загасання для кращої стабільності під час перетягування
+              // const decayValue = 0.2;
+              // simulationRef.current.velocityDecay(decayValue);
             }
           }
 
-          // Scale coordinates based on device pixel ratio and current transform
+          // Масштабуємо координати на основі співвідношення пікселів пристрою та поточної трансформації
           const pixelRatio = window.devicePixelRatio || 1;
 
-          // Apply inverse transformation to get coordinates in the graph's space
-          const scaledX = (x * pixelRatio - transform.x) / transform.k;
-          const scaledY = (y * pixelRatio - transform.y) / transform.k;
+          // Застосовуємо зворотну трансформацію, щоб отримати координати у просторі графа
+          const scaledX = (x * pixelRatio - stateRef.current.transform.x) / stateRef.current.transform.k;
+          const scaledY = (y * pixelRatio - stateRef.current.transform.y) / stateRef.current.transform.k;
 
-          // Update the fixed positions of the dragged node with smoothing
-          draggedNode.fx = scaledX;
-          draggedNode.fy = scaledY;
+          // Оновлюємо фіксовані позиції перетягуваного вузла з плавністю
+          stateRef.current.draggedNode.fx = scaledX;
+          stateRef.current.draggedNode.fy = scaledY;
 
-          if (isDraggingRef.current) {
-            // Reduce simulation energy during dragging for stability
-            simulationRef.current.alpha(0.1); // Reduce system energy
-          }
+          // if (stateRef.current.isDragging) {
+          //   // Зменшуємо енергію симуляції під час перетягування для стабільності
+          //   simulationRef.current.alpha(0); // Зменшуємо енергію системи
+          // }
 
-          // No need to check for hover when dragging
+          // Немає потреби перевіряти наведення під час перетягування
           return;
         }
 
-        // Handle panning
-        if (isPanning && mouseStartPosRef.current) {
-          const dx = x - lastMousePosRef.current.x;
-          const dy = y - lastMousePosRef.current.y;
+        // Обробка панорамування
+        if (stateRef.current.isPanning && stateRef.current.mouseStartPos) {
+          const dx = x - stateRef.current.lastMousePos.x;
+          const dy = y - stateRef.current.lastMousePos.y;
 
-          // Calculate total distance moved during panning
-          const startX = mouseStartPosRef.current.x;
-          const startY = mouseStartPosRef.current.y;
+          // Обчислюємо загальну відстань, пройдену під час панорамування
+          const startX = stateRef.current.mouseStartPos.x;
+          const startY = stateRef.current.mouseStartPos.y;
           const panDistance = Math.sqrt(Math.pow(x - startX, 2) + Math.pow(y - startY, 2));
 
           // Використовуємо ту ж саму логіку і поріг відстані як і для перетягування вузла
           const panThreshold = 3; // Той самий поріг як і для перетягування вузла
           if (panDistance > panThreshold) {
             // Це точно панорамування, а не просто клік
-            isDraggingRef.current = true;
+            stateRef.current.isDragging = true;
           }
 
-          setTransform((prev) => ({
-            ...prev,
-            x: prev.x + dx,
-            y: prev.y + dy,
-          }));
+          // Оновлюємо трансформацію безпосередньо у stateRef
+          stateRef.current.transform = {
+            ...stateRef.current.transform,
+            x: stateRef.current.transform.x + dx,
+            y: stateRef.current.transform.y + dy,
+          };
 
-          lastMousePosRef.current = { x, y };
+          stateRef.current.lastMousePos = { x, y };
+          renderCanvas2D(); // Перемальовуємо полотно після панорамування
           return;
         }
 
+        let shouldRender;
         let hoveredNode;
 
-        // Button hover detection logic
-        if (selectedNode && canvasRef.current && buttonImages.length > 0) {
+        // Логіка виявлення наведення на кнопки
+        if (stateRef.current.selectedNode && canvasRef.current && buttonImages.length > 0) {
           const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
 
-          // Scale coordinates based on canvas display size
+          // Масштабуємо координати відносно розміру відображення полотна
           const canvasScaleX = canvasRef.current.width / rect.width;
           const canvasScaleY = canvasRef.current.height / rect.height;
 
-          // Scaled mouse coordinates in canvas coordinate system
+          // Масштабовані координати миші в системі координат полотна
           const scaledMouseX = x * canvasScaleX;
           const scaledMouseY = y * canvasScaleY;
 
-          // Apply current transformation to get world coordinates
-          const worldX = (scaledMouseX - transform.x) / transform.k;
-          const worldY = (scaledMouseY - transform.y) / transform.k;
+          // Застосовуємо поточну трансформацію для отримання світових координат
+          const worldX = (scaledMouseX - stateRef.current.transform.x) / stateRef.current.transform.k;
+          const worldY = (scaledMouseY - stateRef.current.transform.y) / stateRef.current.transform.k;
 
           // Node position
-          const nodeX = selectedNode.x || 0;
-          const nodeY = selectedNode.y || 0;
+          const nodeX = stateRef.current.selectedNode.x || 0;
+          const nodeY = stateRef.current.selectedNode.y || 0;
 
-          // Calculate number of buttons and their sectors
+          // Обчислюємо кількість кнопок та їхні сектори
           const buttonCount = Math.min(buttonImages.length, 8);
           const sectorAngle = Math.min((Math.PI * 2) / buttonCount, Math.PI);
 
           let hoveredIndex = null;
 
-          // Check if mouse is over any button sector
+          // Перевіряємо, чи вказівник миші знаходиться над будь-яким сектором кнопок
           for (let i = 0; i < buttonCount; i++) {
             const startAngle = i * sectorAngle;
             const endAngle = (i + 1) * sectorAngle;
@@ -1285,128 +1308,167 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
               break;
             }
           }
-          if (hoveredIndex !== null) hoveredNode = selectedNode; // Set hoveredNode to selectedNode for further processing
-          setHoveredButtonIndex(hoveredIndex);
+          if (hoveredIndex !== null) hoveredNode = stateRef.current.selectedNode; // Set hoveredNode to selectedNode for further processing
+          if (hoveredIndex !== stateRef.current.hoveredButtonIndex) {
+            shouldRender = true; // Only render if hovered button index has changed
+          }
+          stateRef.current.hoveredButtonIndex = hoveredIndex;
         } else {
-          if (hoveredButtonIndex !== null) setHoveredButtonIndex(null);
+          if (stateRef.current.hoveredButtonIndex !== null) stateRef.current.hoveredButtonIndex = null;
         }
 
         if (!hoveredNode) {
-          // If no node is hovered, reset hoveredNode
+          // If no node is hovered, check for link hover
           hoveredNode = getNodeAtPosition(x, y);
+
+          // If no node is hovered, check for link hover
+          if (!hoveredNode) {
+            const hoveredLink = getLinkAtPosition(x, y);
+            const shouldRenderLink = hoveredLink !== stateRef.current.hoveredLink;
+
+            // Clear node hover state when hovering over a link
+            if (hoveredLink && stateRef.current.hoveredNode) {
+              handleNodeHover(null);
+            }
+
+            handleLinkHover(hoveredLink);
+
+            // Update cursor style for links
+            if (canvasRef.current) {
+              canvasRef.current.style.cursor = hoveredLink ? 'pointer' : 'default';
+            }
+
+            if (shouldRenderLink) {
+              renderCanvas2D();
+            }
+            return;
+          }
+        }
+
+        // Clear link hover state when hovering over a node
+        if (hoveredNode && stateRef.current.hoveredLink) {
+          handleLinkHover(null);
         }
+
+        if (hoveredNode !== stateRef.current.hoveredNode) shouldRender = true;
+
         handleNodeHover(hoveredNode);
-        // Check for hover and update highlighting
+        // Перевіряємо наведення та оновлюємо підсвічування
 
-        // Change cursor style based on hover
+        // Змінюємо стиль курсору залежно від наведення
         if (canvasRef.current) {
           canvasRef.current.style.cursor = hoveredNode ? 'pointer' : 'default';
         }
+        if (shouldRender) {
+          renderCanvas2D(); // Перемальовуємо полотно після зміни наведення
+        }
       },
       [
-        draggedNode,
+        buttonImages,
         getNodeAtPosition,
-        isPanning,
-        transform,
+        getLinkAtPosition,
         handleNodeHover,
-        selectedNode,
-        buttonImages,
-        config,
-        hoveredButtonIndex,
-        simulationRef,
-        lastMousePosRef,
-        mouseStartPosRef,
-        isDraggingRef,
+        handleLinkHover,
+        renderCanvas2D,
         isPointInButtonSector,
-        canvasRef,
-        setTransform,
-        setHoveredButtonIndex,
       ]
     );
 
     const handleClick = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {
-      if (mustBeStoppedPropagation.current) {
+      if (stateRef.current.mustBeStoppedPropagation) {
         event.stopPropagation();
         event.preventDefault();
       }
-      mustBeStoppedPropagation.current = false;
+      stateRef.current.mustBeStoppedPropagation = false;
     }, []);
 
-    // Handle mouse up to end dragging
+    // Обробляємо відпускання кнопки миші для завершення перетягування
     const handleMouseUp = useCallback(
       (event: React.MouseEvent<HTMLCanvasElement>) => {
-        const wasDragging = isDraggingRef.current;
+        const wasDragging = stateRef.current.isDragging;
 
         if (wasDragging) {
-          mustBeStoppedPropagation.current = true;
+          stateRef.current.mustBeStoppedPropagation = true;
         }
-        // Process node clicks or button clicks only if we haven't been dragging
-        if (!wasDragging && mouseStartPosRef.current) {
+        // Обробляємо кліки на вузли або кнопки тільки якщо ми не перетягували
+        if (!wasDragging && stateRef.current.mouseStartPos) {
           const rect = canvasRef.current?.getBoundingClientRect();
           if (rect) {
             const x = event.clientX - rect.left;
             const y = event.clientY - rect.top;
 
-            // First check if we're clicking on a button of the selected node
+            // Спочатку перевіряємо, чи ми клікаємо на кнопку обраного вузла
             let isButtonClick = false;
-            if (selectedNode && hoveredButtonIndex !== null && buttons[hoveredButtonIndex]) {
+            if (
+              stateRef.current.selectedNode &&
+              stateRef.current.hoveredButtonIndex !== null &&
+              buttons[stateRef.current.hoveredButtonIndex]
+            ) {
               // This is a button click, trigger the button's onClick handler
-              const button = buttons[hoveredButtonIndex];
+              const button = buttons[stateRef.current.hoveredButtonIndex];
               if (button && button.onClick) {
-                button.onClick(selectedNode);
+                button.onClick(stateRef.current.selectedNode);
                 isButtonClick = true;
               }
             }
 
             // If not a button click and we have a draggedNode (mouse was pressed on a node), trigger node click
-            if (!isButtonClick && draggedNode) {
-              handleNodeClick(draggedNode);
-            } else if (!isButtonClick && !draggedNode) {
-              // If we didn't click on a node or a button, it's a background click
-              // Only trigger background click if there was no dragging
-              handleBackgroundClick();
+            if (!isButtonClick && stateRef.current.draggedNode) {
+              handleNodeClick(stateRef.current.draggedNode);
+            } else if (!isButtonClick && !stateRef.current.draggedNode) {
+              // Check if we clicked on a link
+              const clickedLink = getLinkAtPosition(x, y);
+              if (clickedLink) {
+                handleLinkClick(clickedLink);
+              } else {
+                // If we didn't click on a node, button, or link, it's a background click
+                // Only trigger background click if there was no dragging
+                handleBackgroundClick();
+              }
             }
           }
         }
 
-        if (draggedNode && simulationRef.current) {
-          // If real dragging occurred, optimize simulation parameters
+        if (stateRef.current.draggedNode && simulationRef.current) {
+          // Якщо відбулось реальне перетягування, оптимізуємо параметри симуляції
           if (wasDragging) {
-            // Gradually reduce the simulation energy
+            // Поступово зменшуємо енергію симуляції
             simulationRef.current.alphaTarget(0);
 
-            // Optimize simulation parameters for better stabilization
-            const alphaValue = 0.05; // Low alpha for gentle settling
-            const alphaDecayValue = 0.04; // Moderate decay to stop more quickly
-            const velocityDecayValue = 0.6; // Standard velocity decay after dragging
+            // Оптимізуємо параметри симуляції для кращої стабілізації
+            const alphaValue = 0.05; // Низька альфа для плавного затухання
+            const alphaDecayValue = 0.04; // Помірний коефіцієнт затухання для швидшої зупинки
+            const velocityDecayValue = 0.6; // Стандартний коефіцієнт загасання швидкості після перетягування
 
             simulationRef.current.alpha(alphaValue).alphaDecay(alphaDecayValue);
             simulationRef.current.velocityDecay(velocityDecayValue);
           } else {
-            // If it was just a click, not a drag, stop simulation immediately
+            // Якщо це був просто клік, а не перетягування, негайно зупиняємо симуляцію
             simulationRef.current.alphaTarget(0);
           }
 
-          // Release node position regardless of whether it was dragged or clicked
-          draggedNode.fx = undefined;
-          draggedNode.fy = undefined;
+          // Звільняємо позицію вузла незалежно від того, чи його перетягували або клікали
+          stateRef.current.draggedNode.fx = undefined;
+          stateRef.current.draggedNode.fy = undefined;
 
-          setDraggedNode(null);
+          stateRef.current.draggedNode = null;
         }
 
         // Скидаємо всі стани перетягування
-        isDraggingRef.current = false;
-        mouseStartPosRef.current = null;
+        stateRef.current.isDragging = false;
+        stateRef.current.mouseStartPos = null;
 
         // End panning if active
-        if (isPanning) {
-          setIsPanning(false);
+        if (stateRef.current.isPanning) {
+          stateRef.current.isPanning = false;
         }
+
+        renderCanvas2D();
       },
-      [draggedNode, isPanning, hoveredButtonIndex, selectedNode, buttons, handleNodeClick, handleBackgroundClick]
+      [buttons, renderCanvas2D, handleNodeClick, handleBackgroundClick, getLinkAtPosition, handleLinkClick]
     );
 
-    // Handle wheel event for zooming
+    // Обробляємо подію колеса миші для масштабування
     const handleWheel = useCallback(
       (event: WheelEvent) => {
         event.stopPropagation();
@@ -1414,41 +1476,39 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
         if (!canvasRef.current) return;
 
-        // Get canvas-relative coordinates
+        // Отримуємо координати відносно полотна
         const rect = canvasRef.current.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
 
-        // Calculate zoom factor
+        // Обчислюємо коефіцієнт масштабування
         const delta = -event.deltaY;
         const scaleFactor = delta > 0 ? 1.1 : 1 / 1.1;
 
-        // Calculate new transform with zoom around mouse position
-        setTransform((prev) => {
-          // Limit zoom level (optional)
-          const newScale = prev.k * scaleFactor;
+        // Обчислюємо нову трансформацію з масштабуванням навколо позиції миші
+        const currentTransform = stateRef.current.transform;
 
-          if (newScale < 0.01 || newScale > 10) return prev;
-          const newK = prev.k * scaleFactor;
+        // Обмежуємо рівень масштабування (опціонально)
+        const newScale = currentTransform.k * scaleFactor;
 
-          // Calculate new translation to zoom centered on mouse position
-          const newX = x - (x - prev.x) * scaleFactor;
-          const newY = y - (y - prev.y) * scaleFactor;
+        if (newScale < 0.01 || newScale > 10) return;
+        const newK = currentTransform.k * scaleFactor;
 
-          return {
-            k: newK,
-            x: newX,
-            y: newY,
-          };
-        });
+        // Обчислюємо нове переміщення для центрування масштабування на позиції миші
+        const newX = x - (x - currentTransform.x) * scaleFactor;
+        const newY = y - (y - currentTransform.y) * scaleFactor;
+
+        // Update transform in stateRef
+        stateRef.current.transform = {
+          k: newK,
+          x: newX,
+          y: newY,
+        };
+        renderCanvas2D();
       },
-      [setTransform]
+      [renderCanvas2D]
     );
 
-    // Button click handling has been moved directly into the handleMouseDown method
-    // This prevents duplicate handling of click events and ensures proper coordination
-    // with node selection and dragging logic
-
     useImperativeHandle(
       ref,
       () => ({
@@ -1459,6 +1519,127 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       [zoomToFit, addNodes, removeNodes]
     );
 
+    useEffect(() => {
+      // Initialize canvas context
+      const canvasElement = canvasRef.current;
+      const { width: canvasWidth, height: canvasHeight } = stateRef.current;
+      if (!canvasElement) return;
+
+      // Initialize Canvas 2D context
+      init2DCanvas();
+      setIsRendering(true);
+
+      // Розрахунок центральної позиції з урахуванням розміру полотна
+      const centerX = canvasWidth / 2;
+      const centerY = canvasHeight / 2;
+
+      // Ініціалізація силової симуляції D3
+      const nodeSize = config.nodeSizeBase;
+      const nodeRadius = nodeSize / 2;
+      const linkDistance = nodeSize * 2.5; // Розрахунок відстані між зв'язками на основі розміру вузла
+
+      if (simulationRef.current) simulationRef.current.stop();
+      const simulation = (simulationRef.current = forceSimulation(nodes)
+        .force(
+          'link',
+          forceLink(links)
+            .id((d: any) => d.id)
+            .distance(linkDistance) // Адаптивна відстань між вузлами на основі розміру
+            .strength(0.9) // Зменшуємо силу зв'язків (значення від 0 до 1)
+        )
+        .force(
+          'charge',
+          forceManyBody()
+            .strength((-nodeSize / 10) * 200) // Силу відштовхування на основі розміру вузла
+            .theta(0.5) // Оптимізація для стабільності (0.5-1.0)
+            .distanceMin(nodeSize * 2)
+        )
+        .force('x', forceX().strength(0.03)) // Слабка сила для стабілізації по осі X
+        .force('y', forceY().strength(0.03)) // Слабка сила для стабілізації по осі Y
+        .force('center', forceCenter(centerX, centerY).strength(0.05)) // Слабка сила центрування
+        .force(
+          'collide',
+          forceCollide()
+            .radius(nodeRadius * 2) // Радіус колізії залежно від розміру вузла
+            .iterations(2) // Більше ітерацій для кращого запобігання перекриття
+            .strength(1) // Збільшуємо силу запобігання колізіям
+        )
+        .velocityDecay(0.6)); // Коефіцієнт затухання швидкості для зменшення "тряски"
+
+      return () => {
+        // Cleanup
+        simulation.stop();
+      };
+    }, [nodes, links]);
+
+    useLayoutEffect(() => {
+      const canvasElement = canvasRef.current;
+      if (!canvasElement) return;
+      stateRef.current.width = width * RATIO;
+      stateRef.current.height = height * RATIO;
+      canvasElement.width = stateRef.current.width;
+      canvasElement.height = stateRef.current.height;
+    }, [width, height]);
+
+    useEffect(() => {
+      if (simulationRef.current) {
+        const simulation = simulationRef.current;
+
+        // Update node positions on each tick
+
+        simulation.on('tick', () => {
+          renderCanvas2D();
+        });
+
+        // When simulation ends, stop rendering indicator
+        simulation.on('end', () => {
+          // Render one last time
+
+          if (isRendering) {
+            zoomToFit(0, 20); // Zoom to fit after rendering
+            setTimeout(() => {
+              setIsRendering(false);
+            }, 200);
+          }
+        });
+      }
+
+      if (!isRendering) {
+        renderCanvas2D();
+      }
+    }, [nodes, links, isRendering, renderCanvas2D, zoomToFit]);
+
+    // Set up node relationships (neighbors and links)
+    useEffect(() => {
+      if (!nodes || !links) return;
+
+      // Connect nodes to their neighbors and links
+      links.forEach((link: any) => {
+        const source = typeof link.source === 'object' ? link.source : nodes.find((n: any) => n.id === link.source);
+        const target = typeof link.target === 'object' ? link.target : nodes.find((n: any) => n.id === link.target);
+
+        if (!source || !target) return;
+
+        // Initialize arrays if they don't exist
+        !source.neighbors && (source.neighbors = []);
+        !target.neighbors && (target.neighbors = []);
+        source.neighbors.push(target);
+        target.neighbors.push(source);
+
+        !source.links && (source.links = []);
+        !target.links && (target.links = []);
+        source.links.push(link);
+        target.links.push(link);
+      });
+    }, [nodes, links]);
+
+    // Initialize button images
+    useEffect(() => {
+      if (buttons && buttons.length > 0) {
+        setButtonImages(prepareButtonImages(buttons));
+      }
+    }, [buttons]);
+
     // Add wheel event listener with passive: false
     useEffect(() => {
       const canvas = canvasRef.current;
@@ -1478,13 +1659,12 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         {(loading || isRendering) && <GraphLoader width={width} height={height} />}
         <Canvas
           ref={canvasRef}
-          style={{ width, height, display: isRendering ? 'none' : 'block' }}
+          style={{ width, height, display: loading || isRendering ? 'none' : 'block' }}
           onMouseDown={handleMouseDown}
           onMouseMove={handleMouseMove}
           onMouseUp={handleMouseUp}
           onMouseLeave={handleMouseUp}
           onClick={handleClick}
-          // Wheel event is now handled by the useEffect above
         />
       </Wrapper>
     );