@cyber-harbour/ui 1.0.45 → 1.0.46

package/src/Graph2D/Graph2D.tsx

@@ -1,980 +1,1506 @@
-import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-force-graph-2d';
-import { Graph2DProps } from './types';
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { forceCollide } from 'd3-force';
+import { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
+import { Graph2DProps, LinkObject, NodeObject, Graph2DRef } from './types';
+
+import cloneDeep from 'lodash.clonedeep';
+
+import {
+  forceCenter,
+  forceLink,
+  forceManyBody,
+  forceSimulation,
+  forceCollide,
+  forceX,
+  forceY,
+  Simulation,
+  ForceLink,
+  scaleOrdinal,
+  schemeCategory10,
+} from 'd3';
 import { styled, useTheme } from 'styled-components';
-import eyeLightIcon from './eye_light.png';
-import eyeLightHoverIcon from './eye_light_hover.png';
-import groupLightIcon from './group_light.png';
-import groupLightHoverIcon from './group_light_hover.png';
 import GraphLoader from './GraphLoader';
 
-// Створюємо та налаштовуємо об'єкти зображень
-const imgEyeLightIcon = new Image();
-imgEyeLightIcon.src = eyeLightIcon.replace('./', '/');
-
-const imgEyeLightHoverIcon = new Image();
-imgEyeLightHoverIcon.src = eyeLightHoverIcon.replace('./', '/');
-
-const imgGroupLightIcon = new Image();
-imgGroupLightIcon.src = groupLightIcon.replace('./', '/');
-
-const imgGroupLightHoverIcon = new Image();
-imgGroupLightHoverIcon.src = groupLightHoverIcon.replace('./', '/');
-
-export const Graph2D = ({
-  graphData,
-  width,
-  height,
-  linkTarget,
-  linkSource,
-  loading = false,
-  config = {
-    fontSize: 3, // Максимальний розмір шрифту при максимальному зумі
-    nodeSizeBase: 30, // Базовий розмір вузла
-    nodeAreaFactor: 2, // Фактор збільшення розміру вузла для відображення області (hover)
-    textPaddingFactor: 0.9, // Скільки разів текст може бути ширшим за розмір вузла
-    gridSpacing: 20, // Відстань між точками сітки
-    dotSize: 1, // Розмір точки сітки,
-    maxZoom: 4, // Максимальний зум
-  },
-  onNodeClick,
-  onNodeHover,
-  onLinkHover,
-  onLinkClick,
-  onBackgroundClick,
-  onClickLoadNodes,
-}: Graph2DProps) => {
-  const theme = useTheme();
-
-  // Стан для підсвічування вузлів і зв'язків
-  const [highlightNodes, setHighlightNodes] = useState(new Set());
-  const [highlightLinks, setHighlightLinks] = useState(new Set());
-  const [hoverNode, setHoverNode] = useState<any>(null);
-  const [selectedNode, setSelectedNode] = useState<any>(null);
-  const [unVisibleNodes, setUnVisibleNodes] = useState(new Set<string>());
-  const [hiddenNodes, setHiddenNodes] = useState(new Set<string>());
-  // Стани для відстеження наведення на кнопки
-  const [hoverTopButton, setHoverTopButton] = useState(false);
-  const [hoverBottomButton, setHoverBottomButton] = useState(false);
-  const [isRendering, setIsRendering] = useState(true);
-
-  const fgRef = useRef<
-    ForceGraphMethods & {
-      tick?: number;
-    }
-  >(null) as React.MutableRefObject<
-    ForceGraphMethods<NodeObject, LinkObject> & {
-      tick?: number;
-    }
-  >;
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const tickTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Функція для реверсивного масштабування тексту
-  // При максимальному зумі текст має розмір config.fontSize
-  // При зменшенні зуму текст також зменшується
-  const calculateFontSize = (scale: number): number => {
-    // Обмежуємо масштаб до config.maxZoom
-    const limitedScale = Math.min(scale, config.maxZoom);
-
-    // Обчислюємо коефіцієнт масштабування: при максимальному зумі = 1, при мінімальному - менше
-    const fontSizeRatio = limitedScale / config.maxZoom;
-
-    return Math.max(config.fontSize * fontSizeRatio, config.fontSize);
-  };
-
-  // Обробка подій наведення на вузол
-  const handleNodeHover = (node: NodeObject | null, _: NodeObject | null) => {
-    const newHighlightNodes = new Set();
-    const newHighlightLinks = new Set();
-
-    if (node) {
-      newHighlightNodes.add(node);
-
-      // Додавання сусідніх вузлів і зв'язків до підсвічування
-      // Перевіряємо наявність сусідів і зв'язків
-      if (node.neighbors) {
-        node.neighbors.forEach((neighbor: any) => newHighlightNodes.add(neighbor));
+// Завантаження та підготовка зображень кнопок
+function prepareButtonImages(buttons: Graph2DProps['buttons']) {
+  if (!buttons || buttons.length === 0) return [];
+
+  return buttons.map((button) => {
+    const normalImg = new Image();
+    normalImg.src = button.img;
+
+    const hoverImg = new Image();
+    hoverImg.src = button.hoverImg;
+
+    return {
+      ...button,
+      normalImg,
+      hoverImg,
+    };
+  });
+}
+
+// Конфігурація подібна до Graph2D
+const config = {
+  fontSize: 3,
+  nodeSizeBase: 30,
+  nodeAreaFactor: 2,
+  textPaddingFactor: 0.9,
+  gridSpacing: 20,
+  dotSize: 1,
+  maxZoom: 4,
+};
+
+export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
+  ({ loading, width, height, graphData, buttons = [], onNodeClick, onBackgroundClick, onNodeHover }, 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 { 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);
+    const color = scaleOrdinal(schemeCategory10);
+
+    // Ініціалізація контексту Canvas 2D
+    const init2DCanvas = useCallback(() => {
+      if (!canvasRef.current) return false;
+
+      try {
+        const ctx = canvasRef.current.getContext('2d');
+        if (!ctx) {
+          console.error('Failed to get 2D context');
+          return false;
+        }
+
+        ctx2dRef.current = ctx;
+        return true;
+      } catch (e) {
+        console.error('Error initializing Canvas 2D context:', e);
+        return false;
       }
+    }, []);
+
+    const getNodes = useCallback(() => {
+      if (!simulationRef.current) return null;
+      return simulationRef.current.nodes();
+    }, []);
+
+    const getLinks = useCallback(() => {
+      if (!simulationRef.current) return null;
+
+      const linkForce = simulationRef.current.force('link') as ForceLink<NodeObject, LinkObject>;
+      const links = linkForce ? linkForce.links() : null;
+      return links;
+    }, []);
+
+    // Рендеринг сітки на полотні
+    const renderGrid = useCallback(
+      (ctx: CanvasRenderingContext2D) => {
+        // Зберігаємо поточний стан контексту
+        ctx.save();
+
+        // Скидаємо трансформацію для малювання фону в координатах екрану
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+        // Малюємо фонові крапки
+        const { width: canvasWidth, height: canvasHeight } = ctx.canvas;
+        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) {
+            ctx.beginPath();
+            ctx.arc(x, y, dotSize, 0, 2 * Math.PI);
+            ctx.fill();
+          }
+        }
+
+        // Відновлюємо оригінальну трансформацію для іншого рендерингу
+        ctx.restore();
+      },
+      [theme.graph2D.grid.dotColor, config.gridSpacing, config.dotSize]
+    );
+
+    // Функція для обрізання тексту з додаванням трикрапки
+    const truncateText = (text: string, maxWidth: number, ctx: CanvasRenderingContext2D): string => {
+      if (!text) return '';
 
-      if (node.links) {
-        node.links.forEach((link: any) => newHighlightLinks.add(link));
+      // Вимірюємо ширину тексту
+      const textWidth = ctx.measureText(text).width;
+
+      // Повертаємо як є, якщо коротше за максимальну ширину
+      if (textWidth <= maxWidth) return text;
+
+      // Інакше обрізаємо і додаємо трикрапку
+      let truncated = text;
+      const ellipsis = '...';
+
+      // Поступово зменшуємо текст, поки він не поміститься
+      while (ctx.measureText(truncated + ellipsis).width > maxWidth && truncated.length > 0) {
+        truncated = truncated.slice(0, -1);
       }
-    }
-
-    onNodeHover?.(node);
-
-    setHoverNode(node || null);
-    setHighlightNodes(newHighlightNodes);
-    setHighlightLinks(newHighlightLinks);
-  };
-
-  // Обробка подій наведення на зв'язок
-  const handleLinkHover = (link: any) => {
-    const newHighlightNodes = new Set();
-    const newHighlightLinks = new Set();
-
-    if (link) {
-      newHighlightLinks.add(link);
-      newHighlightNodes.add(link.source);
-      newHighlightNodes.add(link.target);
-      onLinkHover?.(link);
-    }
-
-    setHighlightNodes(newHighlightNodes);
-    setHighlightLinks(newHighlightLinks);
-  };
-
-  const handleEngineTick = () => {
-    if (isRendering) {
-      if (fgRef.current && graphData) {
-        if (fgRef.current.tick && graphData.nodes.length > 0 && graphData.nodes.length <= fgRef.current.tick) {
-          if (tickTimerRef.current) {
-            clearTimeout(tickTimerRef.current);
+
+      return truncated + ellipsis;
+    };
+
+    // Розрахунок розміру шрифту на основі масштабу/зуму
+    const calculateFontSize = (scale: number): number => {
+      // Обмежуємо масштаб до максимального зуму
+      const limitedScale = Math.min(scale, config.maxZoom);
+
+      // Масштабуємо розмір шрифту пропорційно
+      const fontSizeRatio = limitedScale / config.maxZoom;
+
+      return Math.max(config.fontSize * fontSizeRatio, config.fontSize);
+    };
+
+    // Рендеринг зв'язків на полотні - подібно до реалізації Graph2D
+    const renderLinks = useCallback(
+      (ctx: CanvasRenderingContext2D) => {
+        const links = getLinks();
+        const nodes = getNodes();
+        if (!links || links.length === 0 || !nodes || nodes.length === 0) return;
+        ctx.lineWidth = 0.5;
+        ctx.globalAlpha = 1.0;
+
+        links.forEach((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);
+
+          if (!source || !target) return;
+
+          // Координати для початку і кінця
+          const start = { x: source.x || 0, y: source.y || 0 };
+          const end = { x: target.x || 0, y: target.y || 0 };
+
+          // Обчислення відстані і напрямку
+          const dx = end.x - start.x;
+          const dy = end.y - start.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          // Нормалізований вектор напрямку
+          const unitDx = dx / distance;
+          const unitDy = dy / distance;
+
+          // Коригування радіусу вузлів
+          const sourceRadius = config.nodeSizeBase / 2;
+          const targetRadius = config.nodeSizeBase / 2;
+          const arrowHeadLength = 4;
+
+          // Коригуємо початкову і кінцеву позиції, щоб починалися/закінчувалися на краях вузлів
+          const adjustedStart = {
+            x: start.x + unitDx * sourceRadius,
+            y: start.y + unitDy * sourceRadius,
+          };
+
+          const adjustedEnd = {
+            x: end.x - unitDx * (targetRadius + arrowHeadLength),
+            y: end.y - unitDy * (targetRadius + arrowHeadLength),
+          };
+
+          const adjusteArrowdEnd = {
+            x: end.x - unitDx * (targetRadius + 1),
+            y: end.y - unitDy * (targetRadius + 1),
+          };
+
+          // Колір лінії залежить від стану виділення
+          const isHighlighted = highlightLinks.has(link);
+          const lineColor = isHighlighted ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
+          const lineWidth = isHighlighted ? 1.5 : 0.5;
+
+          // Обчислення середини лінії для розміщення тексту
+          const middleX = start.x + (end.x - start.x) / 2;
+          const middleY = start.y + (end.y - start.y) / 2;
+          const angle = Math.atan2(dy, dx);
+
+          // Малюємо лінію у дві частини, якщо є мітка
+          if (link.label) {
+            // Обчислюємо ширину тексту для проміжку
+            const globalScale = transform.k;
+            const scaledFontSize = calculateFontSize(globalScale);
+            ctx.font = `${scaledFontSize}px Sans-Serif`;
+            const textWidth = ctx.measureText(link.label).width;
+            const padding = 10; // Додатковий простір навколо тексту
+
+            // Перша частина лінії
+            ctx.beginPath();
+            ctx.moveTo(adjustedStart.x, adjustedStart.y);
+
+            // Обчислюємо точку перед текстом
+            const beforeTextDistance = distance / 2 - (textWidth + padding) / 2;
+            const pointBeforeText = {
+              x: start.x + unitDx * beforeTextDistance,
+              y: start.y + unitDy * beforeTextDistance,
+            };
+            ctx.lineTo(pointBeforeText.x, pointBeforeText.y);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
+
+            // Друга частина лінії
+            ctx.beginPath();
+            // Обчислюємо точку після тексту
+            const afterTextDistance = distance / 2 + (textWidth + padding) / 2;
+            const pointAfterText = {
+              x: start.x + unitDx * afterTextDistance,
+              y: start.y + unitDy * afterTextDistance,
+            };
+            ctx.moveTo(pointAfterText.x, pointAfterText.y);
+            ctx.lineTo(adjustedEnd.x, adjustedEnd.y);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
+          } else {
+            // Малюємо суцільну лінію якщо немає мітки
+            ctx.beginPath();
+            ctx.moveTo(adjustedStart.x, adjustedStart.y);
+            ctx.lineTo(adjustedEnd.x, adjustedEnd.y);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
           }
-          fgRef.current.zoomToFit(0, 20);
-          setIsRendering(false);
-        } else {
-          fgRef.current.tick = fgRef.current.tick ? (fgRef.current.tick = fgRef.current.tick + 1) : 1;
-          if (tickTimerRef.current) {
-            clearTimeout(tickTimerRef.current);
+
+          // Малюємо стрілку
+          const arrowHeadWidth = 2;
+
+          ctx.save();
+          ctx.translate(adjusteArrowdEnd.x, adjusteArrowdEnd.y);
+          ctx.rotate(angle);
+
+          // Наконечник стрілки
+          ctx.beginPath();
+          ctx.moveTo(0, 0);
+          ctx.lineTo(-arrowHeadLength, arrowHeadWidth);
+          ctx.lineTo(-arrowHeadLength, 0);
+          ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
+          ctx.closePath();
+
+          ctx.fillStyle = lineColor;
+          ctx.fill();
+          ctx.restore();
+
+          // Малюємо мітку, якщо вона є
+          if (link.label) {
+            // Ми вже обчислили ці значення раніше
+            // const middleX = start.x + (end.x - start.x) / 2;
+            // const middleY = start.y + (end.y - start.y) / 2;
+
+            const globalScale = transform.k; // Використовуємо поточний рівень масштабування
+            const scaledFontSize = calculateFontSize(globalScale);
+
+            ctx.font = `${scaledFontSize}px Sans-Serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+
+            // Повертаємо текст, щоб він співпадав з кутом лінії
+            ctx.save();
+            ctx.translate(middleX, middleY);
+
+            // Коригуємо обертання, якщо текст буде перевернутим
+            if (Math.abs(angle) > Math.PI / 2) {
+              ctx.rotate(angle + Math.PI);
+            } else {
+              ctx.rotate(angle);
+            }
+
+            // Видалено фон для чистішого вигляду
+
+            // Малюємо текст
+            ctx.fillStyle = isHighlighted ? theme.graph2D.link.highlightedTextColor : theme.graph2D.link.textColor;
+
+            ctx.fillText(link.label, 0, 0);
+            ctx.restore();
           }
-          tickTimerRef.current = setTimeout(() => {
-            //force tick check
-            if (fgRef.current) {
-              fgRef.current.zoomToFit(0, 20);
-              setIsRendering(false);
+        });
+      },
+      [config, transform.k, highlightLinks, theme.graph2D.link]
+    );
+
+    // Функція для рендерингу кнопок навколо вузла
+    const renderNodeButtons = useCallback(
+      (node: NodeObject, ctx: CanvasRenderingContext2D) => {
+        if (!buttonImages || buttonImages.length === 0) return;
+        if (!node || !node.x || !node.y) return;
+
+        const { x, y } = node;
+        const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
+
+        // Зберігаємо стан канвасу
+        ctx.save();
+
+        // Обчислюємо кількість кнопок і їхніх секторів
+        const buttonCount = Math.min(buttonImages.length, 8); // Обмежуємо до максимум 8 кнопок для ясності інтерфейсу
+        const sectorAngle = Math.min((Math.PI * 2) / buttonCount, Math.PI); // Максимальний кут сектора - півколо (PI)
+
+        // Малюємо кнопки як сектори навколо вузла
+        for (let i = 0; i < buttonCount; i++) {
+          const startAngle = i * sectorAngle;
+          const endAngle = (i + 1) * sectorAngle;
+          const isHovered = hoveredButtonIndex === i;
+
+          // Малюємо фон сектора кнопки
+          ctx.beginPath();
+          ctx.arc(x, y, buttonRadius, startAngle, endAngle, false);
+          ctx.lineTo(x, y);
+          ctx.closePath();
+          ctx.lineWidth = 1;
+          ctx.strokeStyle = theme.graph2D?.button?.stroke || '#FFFFFF';
+          ctx.stroke();
+          ctx.fillStyle = isHovered
+            ? theme.graph2D?.button?.hoverFill || 'rgba(255, 255, 255, 0.3)'
+            : theme.graph2D?.button?.normalFill || 'rgba(255, 255, 255, 0.1)';
+          ctx.fill();
+
+          // Обчислюємо позицію для іконки
+          // Розташовуємо іконку в середині сектора
+          const iconSize = buttonRadius * 0.2;
+          const midAngle = (startAngle + endAngle) / 2;
+          const iconDistance = buttonRadius - config.nodeSizeBase / 2 + iconSize; // Коригуємо відстань, щоб уникнути перекриття з вузлом
+          const iconX = x + Math.cos(midAngle) * iconDistance;
+          const iconY = y + Math.sin(midAngle) * iconDistance;
+
+          // Вибираємо відповідну іконку залежно від стану наведення
+          const buttonImage = buttonImages[i];
+          const icon = isHovered ? buttonImage.hoverImg : buttonImage.normalImg;
+
+          // Малюємо іконку
+          if (icon.complete) {
+            try {
+              ctx.drawImage(icon, iconX - iconSize / 2, iconY - iconSize / 2, iconSize, iconSize);
+            } catch (error) {
+              console.warn('Error rendering button icon:', error);
             }
-          }, 1500);
+          } else {
+            // Set onload handler if image isn't loaded yet
+            icon.onload = () => {
+              if (ctx2dRef.current) {
+                try {
+                  ctx.drawImage(icon, iconX - iconSize / 2, iconY - iconSize / 2, iconSize, iconSize);
+                } catch (error) {
+                  console.warn('Error rendering button icon after load:', error);
+                }
+              }
+            };
+          }
         }
-      }
-    }
-  };
 
-  useEffect(() => {
-    const timeoutRef = tickTimerRef.current;
+        ctx.restore();
+      },
+      [buttonImages, hoveredButtonIndex, config, theme.graph2D?.button]
+    );
+
+    const renderNodes = useCallback(
+      (ctx: CanvasRenderingContext2D) => {
+        const nodes = getNodes();
+        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;
+
+          // 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;
+
+            ctx.beginPath();
+            ctx.arc(x as number, y as number, ringRadius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = theme.graph2D.ring.highlightFill;
+            ctx.fill();
+          }
 
-    return () => {
-      if (timeoutRef) {
-        clearTimeout(timeoutRef);
-      }
-    };
-  }, []);
-
-  // Створення взаємозв'язків між вузлами
-  useEffect(() => {
-    if (!graphData) return;
-
-    // Прив'язка вузлів до їхніх сусідів та зв'язків
-    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);
-
-      if (!source || !target) return;
-
-      // Ініціалізація масивів, якщо вони відсутні
-      !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);
-    });
-
-    // Додаємо різні сили для уникнення перекриття вузлів
-    if (fgRef.current) {
-      // 1. Додаємо силу відштовхування між всіма вузлами (charge force)
-      const chargeForce = fgRef.current.d3Force('charge');
-      if (chargeForce) {
-        chargeForce
-          .strength(config.nodeSizeBase) // Збільшуємо силу відштовхування (negative for repulsion)
-          .distanceMax(50); // Максимальна дистанція, на якій діє ця сила
-      }
+          // 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 {
+              const ringRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
+
+              ctx.beginPath();
+              ctx.arc(x as number, y as number, ringRadius, 0, 2 * Math.PI, false);
+              ctx.fillStyle = theme.graph2D.ring.selectionFill || theme.graph2D.ring.highlightFill;
+              ctx.fill();
+            }
+          }
 
-      // 2. Додаємо силу центрування для кращої організації графа
-      const centerForce = fgRef.current.d3Force('center');
-      if (centerForce) {
-        centerForce.strength(0.05); // Невелике притягування до центру
-      }
+          // 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();
 
-      // 3. Додаємо силу колізії через імпортовану функцію forceCollide
-      try {
-        const collideForce = forceCollide()
-          .radius((node: any) => {
-            // Визначаємо радіус колізії на основі розміру вузла
-            const nodeSize = node.size || config.nodeSizeBase;
-            return nodeSize * 1.5; // Більший відступ для кращої сепарації
-          })
-          .iterations(3) // Більше ітерацій для точнішого розрахунку
-          .strength(1); // Максимальна сила (1 - тверде обмеження)
-
-        fgRef.current.d3Force('collide', collideForce);
-      } catch (err) {
-        console.error('Error setting up collision force:', err);
-      }
-    }
-  }, [graphData]);
-
-  useEffect(() => {
-    if (!isRendering && fgRef.current) {
-      setIsRendering(true);
-      fgRef.current.tick = 0;
-      fgRef.current.d3ReheatSimulation();
-    }
-  }, [graphData]);
-
-  // Функція для малювання кільця навколо підсвічених вузлів
-  const paintRing = useCallback(
-    (node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
-      // Отримуємо розмір вузла
-      const radius = (config.nodeSizeBase * config.nodeAreaFactor * 0.75) / 2;
-
-      // Малюємо кільце навколо вузла
-      ctx.beginPath();
-      ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
-      ctx.fillStyle = theme.graph2D.ring.highlightFill;
-      ctx.fill();
-    },
-    [config]
-  );
-
-  // Функція для малювання кнопок навколо вузла при наведенні
-  const paintNodeButtons = useCallback(
-    (node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
-      const { x, y } = node;
-      const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
-
-      // Зберігаємо стан контексту
+          // Draw label if available
+          if (label) {
+            ctx.save();
+            ctx.translate(x as number, y as number);
+
+            const globalScale = transform.k;
+            const scaledFontSize = calculateFontSize(globalScale);
+            const maxWidth = size * config.textPaddingFactor;
+
+            ctx.font = `${scaledFontSize}px Sans-Serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = fontColor || '#000';
+
+            const truncatedLabel = truncateText(label, maxWidth, ctx);
+            ctx.fillText(truncatedLabel, 0, 0);
+
+            ctx.restore();
+          }
+        });
+      },
+      [
+        config,
+        color,
+        hoveredNode,
+        draggedNode,
+        selectedNode,
+        highlightNodes,
+        transform.k,
+        theme.graph2D.ring,
+        buttons,
+        renderNodeButtons,
+      ]
+    );
+
+    // 2D Canvas rendering for everything
+    const renderCanvas2D = useCallback(() => {
+      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);
+
+      // Render grid first (background)
+      renderGrid(ctx);
+
+      // Apply transformation (zoom and pan) - use matrix transformation for better performance
       ctx.save();
 
-      // Кнопка "сховати" (верхня частина кільця)
-      ctx.beginPath();
-      ctx.arc(x, y, buttonRadius, Math.PI, Math.PI * 2, false);
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = theme.graph2D.button.stroke;
-      ctx.stroke();
-      ctx.fillStyle = hoverTopButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
-      ctx.fill();
-
-      // Лінія розділення між кнопками
-      ctx.beginPath();
-      ctx.moveTo(x - buttonRadius, y);
-      ctx.lineTo(x + buttonRadius, y);
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = theme.graph2D.button.stroke;
-      ctx.stroke();
-
-      // Кнопка "згорнути" (нижня частина кільця)
-      ctx.beginPath();
-      ctx.arc(x, y, buttonRadius, Math.PI * 2, Math.PI, false);
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = theme.graph2D.button.stroke;
-      ctx.stroke();
-      ctx.fillStyle = hoverBottomButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
-      ctx.fill();
-
-      // Додаємо іконку хрестика для кнопки "сховати вузол"
-      const iconSize = buttonRadius * 0.3; // Розмір іконки відносно радіуса кнопки (зменшено вдвічі)
-
-      // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
-      const groupIcon = hoverBottomButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
-      // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
-      const eyeIcon = hoverTopButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
-
-      const renderEyeIcon = () => {
-        try {
-          ctx.drawImage(eyeIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
-        } catch (error) {
-          console.warn('Error rendering group icon:', error);
+      // 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
+      renderLinks(ctx);
+      renderNodes(ctx);
+
+      // Restore context
+      ctx.restore();
+    }, [width, height, renderLinks, renderNodes, renderGrid, transform]);
+
+    /**
+     * 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
+     */
+    const addNodes = useCallback(
+      (
+        newNodes: NodeObject[],
+        newLinks: LinkObject[] = [],
+        options?: {
+          smoothAppearance?: boolean;
+          transitionDuration?: number;
         }
-      };
-      // Використовуємо безпосередньо зображення, якщо воно вже завантажене
-      if (eyeIcon.complete) {
-        // Розміщуємо іконку в центрі верхньої половини кнопки
-        renderEyeIcon();
-      } else {
-        // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
-        eyeIcon.onload = () => {
-          renderEyeIcon();
-        };
-
-        eyeIcon.onerror = () => {
-          console.warn('Error loading group icon image');
-        };
-      }
+      ) => {
+        const links = getLinks() || [];
+        const nodes = getNodes() || [];
+        if (!simulationRef.current || !newNodes.length) return;
+
+        // Опції по умолчанню
+        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) =>
+              `${typeof link.source === 'object' ? link.source.id : link.source}-${
+                typeof link.target === 'object' ? link.target.id : link.target
+              }`
+          )
+        );
+
+        const filteredNewLinks = newLinks.filter((link) => {
+          const linkId = `${typeof link.source === 'object' ? link.source.id : link.source}-${
+            typeof link.target === 'object' ? link.target.id : link.target
+          }`;
+          return !existingLinkIds.has(linkId);
+        });
+
+        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;
+              return (
+                (sourceId === node.id && existingNodeIds.has(targetId)) ||
+                (targetId === node.id && existingNodeIds.has(sourceId))
+              );
+            });
+
+            if (connectedLinks.length > 0) {
+              // Find an existing connected node to position near
+              const someLink = connectedLinks[0];
+              const connectedNodeId =
+                typeof someLink.source === 'object'
+                  ? someLink.source.id === node.id
+                    ? someLink.target
+                    : someLink.source.id
+                  : someLink.source === node.id
+                  ? someLink.target
+                  : someLink.source;
+
+              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 angle = Math.random() * Math.PI * 2;
+
+              node.x = centerX + Math.cos(angle) * (radius * Math.random());
+              node.y = centerY + Math.sin(angle) * (radius * Math.random());
+              node.vx = 0;
+              node.vy = 0;
+            }
+          });
 
-      const renderGroupIcon = () => {
-        try {
-          ctx.drawImage(groupIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
-        } catch (error) {
-          console.warn('Error rendering eye icon:', error);
+          // Fix positions of existing nodes to prevent them from moving
+          nodes.forEach((node) => {
+            node.fx = node.x;
+            node.fy = node.y;
+          });
         }
-      };
-      // Використовуємо безпосередньо зображення, якщо воно вже завантажене
-      if (groupIcon.complete) {
-        // Розміщуємо іконку в центрі нижньої половини кнопки
-
-        renderGroupIcon();
-      } else {
-        // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
-        groupIcon.onload = () => {
-          renderGroupIcon();
-        };
-
-        groupIcon.onerror = () => {
-          console.warn('Error loading eye icon image');
-        };
-      }
 
-      ctx.restore();
-    },
-    [config, hoverTopButton, hoverBottomButton]
-  );
-
-  const hideNode = (unvisibles: Set<string>, node: NodeObject) => {
-    if (node && node.id && !unvisibles.has(`${node.id}`) && graphData) {
-      // Прив'язка вузлів до їхніх сусідів та зв'язків
-      const targets = graphData.links.filter((link: any) => {
-        return link.source.id === node.id && link.label !== 'MATCH';
-      });
-      targets.forEach((link: any) => {
-        unvisibles.add(`${link.target.id}`);
-        hideNode(unvisibles, link.target);
-      });
-    }
-  };
-
-  const showNode = (unvisibles: Set<string>, node: NodeObject) => {
-    if (node && node.id && graphData) {
-      // Прив'язка вузлів до їхніх сусідів та зв'язків
-      const targets = graphData.links.filter((link: any) => {
-        return link.source.id === node.id && link.label !== 'MATCH';
-      });
+        // 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);
+          const target =
+            typeof link.target === 'object' ? link.target : updatedNodes.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);
+        });
+
+        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.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
+          }, 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]
+    );
+
+    /**
+     * 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
+     */
+    const removeNodes = useCallback(
+      (nodeIds: (string | number)[]) => {
+        const nodes = getNodes();
+        const links = getLinks();
+        if (!simulationRef.current || !nodeIds.length || !nodes || nodes.length === 0 || !links || links.length === 0)
+          return;
+
+        // Create set of node IDs for quick lookup
+        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 (hoveredNode && hoveredNode.id !== undefined && nodeIdsToRemove.has(hoveredNode.id)) {
+          setHoveredNode(null);
+          setHighlightNodes(new Set());
+          setHighlightLinks(new Set());
+        }
 
-      targets.forEach((link: any) => {
-        if (unvisibles.has(`${link.target.id}`)) {
-          if (!hiddenNodes.has(`${link.target.id}`)) {
-            unvisibles.delete(`${link.target.id}`);
-            showNode(unvisibles, link.target);
+        if (draggedNode && draggedNode.id !== undefined && nodeIdsToRemove.has(draggedNode.id)) {
+          setDraggedNode(null);
+        }
+
+        // Get all nodes that will be kept after removal
+        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;
+
+          return (
+            sourceId !== undefined &&
+            !nodeIdsToRemove.has(sourceId) &&
+            targetId !== undefined &&
+            !nodeIdsToRemove.has(targetId)
+          );
+        });
+
+        // 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);
+          const target =
+            typeof link.target === 'object' ? link.target : remainingNodes.find((n: any) => n.id === link.target);
+
+          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);
+        }
+
+        // Просто перемальовуємо canvas з новими даними
+        renderCanvas2D();
+      },
+      [selectedNode, hoveredNode, draggedNode, graphData, renderCanvas2D]
+    );
+
+    // 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 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,
+          };
+
+          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);
           }
         }
-      });
-    }
-  };
-
-  // Функція для обробки кліку на кнопку "сховати вузол"
-  const handleHideNode = (node: any) => {
-    const newHiddenNodes = new Set(hiddenNodes);
-    const newUnVisibleNodes = new Set(unVisibleNodes);
-    if (newHiddenNodes.has(node.id)) {
-      newHiddenNodes.delete(node.id);
-      showNode(newUnVisibleNodes, node);
-    } else {
-      newHiddenNodes.add(node.id);
-      hideNode(newUnVisibleNodes, node);
-    }
-    setHiddenNodes(newHiddenNodes);
-    setUnVisibleNodes(newUnVisibleNodes);
-  };
-
-  // Функція для визначення, чи знаходиться точка в межах сектора кола (кнопки)
-  const isPointInButtonArea = useCallback(
-    (
-      x: number, // X координата точки кліку в системі координат canvas
-      y: number, // Y координата точки кліку в системі координат canvas
-      buttonX: number, // X координата центра вузла в системі координат canvas
-      buttonY: number, // Y координата центра вузла в системі координат canvas
-      buttonRadius: number, // Радіус кнопки (з урахуванням зуму)
-      startAngle: number, // Початковий кут сектора
-      endAngle: number // Кінцевий кут сектора
-    ): boolean => {
-      // Обчислюємо відстань від точки кліку до центру вузла
-      const dx = x - buttonX;
-      const dy = y - buttonY;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      // Обчислюємо кут між точкою та горизонтальною віссю
-      let angle = Math.atan2(dy, dx);
-      if (angle < 0) angle += 2 * Math.PI; // Конвертуємо у діапазон [0, 2π]
-
-      // Розширюємо діапазон радіусу для легшого потрапляння по кнопці
-      // При більшому зумі можна зменшити цей діапазон для більшої точності
-      const minRadiusRatio = 0.5; // Більш точне значення
-      const maxRadiusRatio = 1.5; // Більш точне значення
-      const isInRadius = distance >= buttonRadius * minRadiusRatio && distance <= buttonRadius * maxRadiusRatio;
-
-      // Перевіряємо чи знаходиться кут у межах сектора
-      let isInAngle = false;
-
-      // Верхня півкуля: від Math.PI до Math.PI * 2
-      if (startAngle === Math.PI && endAngle === Math.PI * 2) {
-        isInAngle = angle >= Math.PI && angle <= Math.PI * 2;
-      }
-      // Нижня півкуля: від 0 до Math.PI
-      else if (startAngle === 0 && endAngle === Math.PI) {
-        isInAngle = angle >= 0 && angle <= Math.PI;
+      },
+      [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;
+
+      // 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 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)); // Коефіцієнт затухання швидкості для зменшення "тряски"
+
+      return () => {
+        // Cleanup
+        simulation.stop();
+      };
+    }, [width, height, nodes, links, init2DCanvas]);
+
+    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);
+          }
+        });
       }
-      // Загальний випадок
-      else {
-        isInAngle =
-          (startAngle <= endAngle && angle >= startAngle && angle <= endAngle) ||
-          (startAngle > endAngle && (angle >= startAngle || angle <= endAngle));
+
+      if (!isRendering) {
+        renderCanvas2D();
       }
+    }, [isRendering, renderCanvas2D, zoomToFit]);
+
+    // Set up node relationships (neighbors and links)
+    useEffect(() => {
+      if (!graphData) return;
+
+      // 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);
+
+        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);
+      });
+    }, [graphData]);
 
-      return isInRadius && isInAngle;
-    },
-    []
-  );
-
-  // Додаємо обробник руху миші для відстеження наведення на кнопки
-  useEffect(() => {
-    const handleCanvasMouseMove = (event: MouseEvent) => {
-      if (!hoverNode || !fgRef.current || !wrapperRef.current) {
-        // Скидаємо стани наведення, якщо немає активного вузла
-        if (hoverTopButton) setHoverTopButton(false);
-        if (hoverBottomButton) setHoverBottomButton(false);
-        return;
+    // Initialize button images
+    useEffect(() => {
+      if (buttons && buttons.length > 0) {
+        setButtonImages(prepareButtonImages(buttons));
       }
+    }, [buttons]);
+
+    // 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]
+    );
+
+    // Utility function to check if a point is inside a button sector
+    const isPointInButtonSector = useCallback(
+      (
+        mouseX: number,
+        mouseY: number,
+        nodeX: number,
+        nodeY: number,
+        radius: number,
+        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
+
+        // 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
+        if (startAngle === Math.PI && endAngle === Math.PI * 2) {
+          isInAngle = angle >= Math.PI && angle <= Math.PI * 2;
+        }
+        // Bottom half circle: from 0 to 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) ||
+            (startAngle > endAngle && (angle >= startAngle || angle <= endAngle));
+        }
 
-      const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
-      const zoom = fgRef.current.zoom() || 1; // Отримуємо поточний зум
+        return isInRadius && isInAngle;
+      },
+      []
+    );
 
-      // Координати вузла в системі координат графа
-      const nodeX = hoverNode.x;
-      const nodeY = hoverNode.y;
+    // Handle node hover (similar to 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
+        }
 
-      // Отримуємо позицію canvas відносно вікна
-      const canvasRect = wrapperRef.current.getBoundingClientRect();
+        // Update last hovered node reference
+        lastHoveredNodeRef.current = node;
 
-      // Координати миші відносно canvas
-      const mouseX = event.clientX - canvasRect.left;
-      const mouseY = event.clientY - canvasRect.top;
+        const newHighlightNodes = new Set();
+        const newHighlightLinks = new Set();
 
-      // Враховуємо співвідношення між реальними розмірами canvas та його відображенням на екрані
-      const canvasScaleX = wrapperRef.current.clientWidth / canvasRect.width;
-      const canvasScaleY = wrapperRef.current.clientHeight / canvasRect.height;
+        if (node) {
+          newHighlightNodes.add(node);
 
-      // Масштабовані координати миші у внутрішній системі координат canvas
-      const scaledMouseX = mouseX * canvasScaleX;
-      const scaledMouseY = mouseY * canvasScaleY;
+          // Add neighboring nodes and links to highlighting
+          if (node.neighbors) {
+            node.neighbors.forEach((neighbor: any) => newHighlightNodes.add(neighbor));
+          }
 
-      // Отримуємо параметри трансформації графа
-      const graphCenter = {
-        x: wrapperRef.current.clientWidth / 2,
-        y: wrapperRef.current.clientHeight / 2,
-      };
+          if (node.links) {
+            node.links.forEach((link: any) => newHighlightLinks.add(link));
+          }
+        }
 
-      // Визначаємо координати вузла на екрані
-      let nodeScreenX, nodeScreenY;
+        setHoveredNode(node);
+        if (onNodeHover) onNodeHover(node);
+        setHighlightNodes(newHighlightNodes);
+        setHighlightLinks(newHighlightLinks);
+      },
+      [onNodeHover]
+    );
+
+    // Handle node click
+    const handleNodeClick = useCallback(
+      (node: NodeObject) => {
+        setSelectedNode(node);
+        if (onNodeClick) onNodeClick(node);
+      },
+      [onNodeClick]
+    );
 
-      if (typeof fgRef.current.graph2ScreenCoords === 'function') {
-        // Використовуємо API графа для перетворення координат
-        const screenPos = fgRef.current.graph2ScreenCoords(nodeX, nodeY);
-        if (screenPos) {
-          nodeScreenX = screenPos.x;
-          nodeScreenY = screenPos.y;
+    // Handle background click
+    const handleBackgroundClick = useCallback(() => {
+      setSelectedNode(null);
+      if (onBackgroundClick) onBackgroundClick();
+    }, [onBackgroundClick]);
+
+    // Відслідковування початкових координат для виявлення перетягування
+    const mouseStartPosRef = useRef<{ x: number; y: number } | null>(null);
+    const isDraggingRef = useRef<boolean>(false); // Handle mouse down for dragging
+
+    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;
+
+        // Try to find a node at the cursor position - we'll process the click on mouseUp if not dragging
+        const node = getNodeAtPosition(x, y);
+        if (node) {
+          // Set as potentially draggable but don't activate simulation yet
+          setDraggedNode(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 };
         }
-      }
+      },
+      [getNodeAtPosition]
+    );
 
-      // Якщо метод не доступний, спробуємо обчислити позицію
-      if (nodeScreenX === undefined || nodeScreenY === undefined) {
-        nodeScreenX = graphCenter.x + nodeX * zoom;
-        nodeScreenY = graphCenter.y + nodeY * zoom;
-      }
+    // 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;
+
+          // Визначаємо відстань переміщення для виявлення факту перетягування
+          const dx = x - startX;
+          const dy = y - startY;
+          const dragDistance = Math.sqrt(dx * dx + dy * dy);
+
+          // Якщо відстань досить велика - це перетягування, а не просто клік
+          const dragThreshold = 3; // поріг у пікселях
+
+          if (dragDistance > dragThreshold) {
+            // This is definitely a drag operation, not a click
+            isDraggingRef.current = 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;
+              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 isOverTopButton = isPointInButtonArea(
-        scaledMouseX,
-        scaledMouseY,
-        nodeScreenX,
-        nodeScreenY,
-        buttonRadius * zoom,
-        Math.PI,
-        Math.PI * 2
-      );
-
-      // Перевіряємо наведення на нижню кнопку
-      const isOverBottomButton = isPointInButtonArea(
-        scaledMouseX,
-        scaledMouseY,
-        nodeScreenX,
-        nodeScreenY,
-        buttonRadius * zoom,
-        0,
-        Math.PI
-      );
-
-      // Оновлюємо стани наведення
-      setHoverTopButton(isOverTopButton);
-      setHoverBottomButton(isOverBottomButton);
-    };
+          // Scale coordinates based on device pixel ratio and current transform
+          const pixelRatio = window.devicePixelRatio || 1;
 
-    if (wrapperRef.current) {
-      wrapperRef.current.addEventListener('mousemove', handleCanvasMouseMove);
-    }
+          // 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;
 
-    return () => {
-      if (wrapperRef.current) {
-        wrapperRef.current.removeEventListener('mousemove', handleCanvasMouseMove);
-      }
-    };
-  }, [hoverNode, config, isPointInButtonArea, hoverTopButton, hoverBottomButton]);
+          // Update the fixed positions of the dragged node with smoothing
+          draggedNode.fx = scaledX;
+          draggedNode.fy = scaledY;
+
+          if (isDraggingRef.current) {
+            // Reduce simulation energy during dragging for stability
+            simulationRef.current.alpha(0.1); // Reduce system energy
+          }
 
-  useEffect(() => {
-    if (fgRef.current) fgRef.current.zoomToFit(0, 20); // Автоматичне масштабування графа при першому рендері
-  }, [width, height]);
+          // No need to check for hover when dragging
+          return;
+        }
 
-  const truncateText = (text: string, maxWidth: number, ctx: CanvasRenderingContext2D): string => {
-    if (!text) return '';
+        // Handle panning
+        if (isPanning && mouseStartPosRef.current) {
+          const dx = x - lastMousePosRef.current.x;
+          const dy = y - lastMousePosRef.current.y;
+
+          // Calculate total distance moved during panning
+          const startX = mouseStartPosRef.current.x;
+          const startY = mouseStartPosRef.current.y;
+          const panDistance = Math.sqrt(Math.pow(x - startX, 2) + Math.pow(y - startY, 2));
+
+          // Використовуємо ту ж саму логіку і поріг відстані як і для перетягування вузла
+          const panThreshold = 3; // Той самий поріг як і для перетягування вузла
+          if (panDistance > panThreshold) {
+            // Це точно панорамування, а не просто клік
+            isDraggingRef.current = true;
+          }
 
-    // Вимірюємо ширину тексту
-    const textWidth = ctx.measureText(text).width;
+          setTransform((prev) => ({
+            ...prev,
+            x: prev.x + dx,
+            y: prev.y + dy,
+          }));
 
-    // Якщо текст коротший за максимальну ширину, повертаємо як є
-    if (textWidth <= maxWidth) return text;
+          lastMousePosRef.current = { x, y };
+          return;
+        }
 
-    // Інакше обрізаємо текст і додаємо трикрапку
-    let truncated = text;
-    const ellipsis = '...';
+        let hoveredNode;
 
-    // Поступово скорочуємо текст, поки він не поміститься
-    while (ctx.measureText(truncated + ellipsis).width > maxWidth && truncated.length > 0) {
-      truncated = truncated.slice(0, -1);
-    }
+        // Button hover detection logic
+        if (selectedNode && canvasRef.current && buttonImages.length > 0) {
+          const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
 
-    return truncated + ellipsis;
-  };
+          // Scale coordinates based on canvas display size
+          const canvasScaleX = canvasRef.current.width / rect.width;
+          const canvasScaleY = canvasRef.current.height / rect.height;
 
-  const renderGrid = (ctx: CanvasRenderingContext2D, globalScale: number) => {
-    if (isRendering || loading) return; // Не малюємо сітку під час рендерингу
-    // This will be called before each rendering frame
-    ctx.getTransform();
-    ctx.save();
+          // Scaled mouse coordinates in canvas coordinate system
+          const scaledMouseX = x * canvasScaleX;
+          const scaledMouseY = y * canvasScaleY;
 
-    // Reset transform to draw the background in screen coordinates
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+          // Apply current transformation to get world coordinates
+          const worldX = (scaledMouseX - transform.x) / transform.k;
+          const worldY = (scaledMouseY - transform.y) / transform.k;
 
-    // Draw background dots
-    const { width, height } = ctx.canvas;
-    const gridSpacing = config.gridSpacing;
-    const dotSize = config.dotSize;
+          // Node position
+          const nodeX = selectedNode.x || 0;
+          const nodeY = selectedNode.y || 0;
 
-    ctx.fillStyle = theme.graph2D.grid.dotColor;
+          // Calculate number of buttons and their sectors
+          const buttonCount = Math.min(buttonImages.length, 8);
+          const sectorAngle = Math.min((Math.PI * 2) / buttonCount, Math.PI);
 
-    for (let x = 0; x < width; x += gridSpacing) {
-      for (let y = 0; y < height; y += gridSpacing) {
-        ctx.beginPath();
-        ctx.arc(x, y, dotSize, 0, 2 * Math.PI);
-        ctx.fill();
-      }
-    }
-
-    // Restore original transform for the graph rendering
-    ctx.restore();
-  };
-
-  const renderNodePointerAreaPaint = (
-    node: NodeObject,
-    color: string,
-    ctx: CanvasRenderingContext2D,
-    globalScale: number
-  ) => {
-    const { x, y } = node;
-    const radius = selectedNode === node ? (config.nodeSizeBase * config.nodeAreaFactor) / 2 : config.nodeSizeBase / 2;
-
-    ctx.beginPath();
-    ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = color; //має бути обовʼязково колір що прийшов з параметрів ForceGraph
-    ctx.fill();
-  };
-
-  const renderNodeCanvasObject = (node: NodeObject, ctx: CanvasRenderingContext2D, globalScale: number) => {
-    // Функція для обрізання тексту з трикрапкою (аналог text-overflow: ellipsis)
-
-    // Якщо вузол підсвічений, малюємо кільце
-    if (highlightNodes.has(node)) {
-      // Якщо це наведений вузол, малюємо кнопки
-      if (node !== selectedNode) paintRing(node, ctx, globalScale);
-    }
-
-    if (node === selectedNode) {
-      paintNodeButtons(node, ctx, globalScale);
-    }
-
-    const { x, y, color, fontColor, label } = node;
-
-    const size = config.nodeSizeBase;
-    const radius = config.nodeSizeBase / 2;
-
-    // Малюємо коло
-    ctx.beginPath();
-    ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = color;
-
-    ctx.fill();
-
-    // пігтовока до малювання тексту
-    ctx.save();
-    ctx.translate(x as number, y as number);
-
-    const scaledFontSize = calculateFontSize(globalScale);
-    const maxWidth = size * config.textPaddingFactor;
-    // Розрахунок максимальної ширини тексту на основі розміру вузла
-    // Ширина тексту = діаметр вузла * коефіцієнт розширення
-    // Використовуємо globalScale для визначення пропорцій тексту
-    ctx.font = `${scaledFontSize}px Sans-Serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillStyle = fontColor;
-
-    const truncatedLabel = truncateText(label, maxWidth, ctx);
-    ctx.fillText(truncatedLabel, 0, 0);
-
-    ctx.restore();
-  };
-
-  const renderLinkCanvasObject = (link: NodeObject, ctx: CanvasRenderingContext2D, globalScale: number) => {
-    // Отримуємо позиції початку і кінця зв'язку
-    const { source, target, label } = link;
-
-    // Координати початку і кінця зв'язку
-    const start = { x: source.x, y: source.y };
-    const end = { x: target.x, y: target.y };
-
-    // Відстань між вузлами
-    const dx = end.x - start.x;
-    const dy = end.y - start.y;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-
-    // Розмір вузла
-    const sourceSize = config.nodeSizeBase;
-    const targetSize = config.nodeSizeBase;
-
-    // Нормалізовані вектори для напрямку
-    const unitDx = dx / distance;
-    const unitDy = dy / distance;
-
-    // Скоригований початок і кінець (щоб стрілка не починалася з центру вузла і не закінчувалася в центрі вузла)
-    const startRadius = sourceSize / 2;
-    const endRadius = targetSize / 2;
-
-    // Зміщені позиції початку і кінця
-    const adjustedStart = {
-      x: start.x + unitDx * startRadius,
-      y: start.y + unitDy * startRadius,
-    };
+          let hoveredIndex = null;
 
-    // Для кінцевої точки віднімаємо невелику відстань, щоб стрілка не заходила в вузол
-    const arrowHeadLength = 4;
-    const adjustedEnd = {
-      x: end.x - unitDx * (endRadius + arrowHeadLength),
-      y: end.y - unitDy * (endRadius + arrowHeadLength),
-    };
+          // Check if mouse is over any button sector
+          for (let i = 0; i < buttonCount; i++) {
+            const startAngle = i * sectorAngle;
+            const endAngle = (i + 1) * sectorAngle;
 
-    // Позиція для стрілки (трохи ближче до кінцевого вузла)
-    const adjusteArrowdEnd = {
-      x: end.x - unitDx * (endRadius + 1),
-      y: end.y - unitDy * (endRadius + 1),
-    };
+            if (isPointInButtonSector(worldX, worldY, nodeX, nodeY, buttonRadius, startAngle, endAngle)) {
+              hoveredIndex = i;
+              break;
+            }
+          }
+          if (hoveredIndex !== null) hoveredNode = selectedNode; // Set hoveredNode to selectedNode for further processing
+          setHoveredButtonIndex(hoveredIndex);
+        } else {
+          if (hoveredButtonIndex !== null) setHoveredButtonIndex(null);
+        }
 
-    // Малюємо лінію зв'язку з урахуванням місця для тексту, якщо він є
-    const lineColor = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
-    const lineWidth = highlightLinks.has(link) ? 1.5 : 0.5;
-
-    if (label) {
-      // Розраховуємо ширину тексту для визначення розміру проміжку
-      const scaledFontSize = calculateFontSize(globalScale);
-      ctx.font = `${scaledFontSize}px Sans-Serif`;
-      const textWidth = ctx.measureText(label).width;
-
-      // Розраховуємо довжину проміжку вздовж лінії
-      const gapLength = Math.sqrt(textWidth * textWidth + scaledFontSize * scaledFontSize);
-
-      // Загальна довжина лінії між вузлами
-      const lineLength = distance - startRadius - endRadius - arrowHeadLength;
-
-      // Розрахунок відстані від початку до середини і від середини до кінця
-      const halfLineLength = lineLength / 2;
-      const gapHalf = gapLength / 2;
-
-      // Малюємо першу частину лінії (від початку до проміжку)
-      if (halfLineLength > gapHalf) {
-        // Розрахунок точок перед проміжком
-        const gapStart = {
-          x: adjustedStart.x + unitDx * (halfLineLength - gapHalf),
-          y: adjustedStart.y + unitDy * (halfLineLength - gapHalf),
-        };
-
-        ctx.beginPath();
-        ctx.moveTo(adjustedStart.x, adjustedStart.y);
-        ctx.lineTo(gapStart.x, gapStart.y);
-        ctx.strokeStyle = lineColor;
-        ctx.lineWidth = lineWidth;
-        ctx.stroke();
-
-        // Розрахунок точок після проміжку
-        const gapEnd = {
-          x: adjustedStart.x + unitDx * (halfLineLength + gapHalf),
-          y: adjustedStart.y + unitDy * (halfLineLength + gapHalf),
-        };
-
-        ctx.beginPath();
-        ctx.moveTo(gapEnd.x, gapEnd.y);
-        ctx.lineTo(adjustedEnd.x, adjustedEnd.y);
-        ctx.strokeStyle = lineColor;
-        ctx.lineWidth = lineWidth;
-        ctx.stroke();
-      }
-    } else {
-      // Якщо немає тексту, малюємо повну лінію
-      ctx.beginPath();
-      ctx.moveTo(adjustedStart.x, adjustedStart.y);
-      ctx.lineTo(adjustedEnd.x, adjustedEnd.y);
-      ctx.strokeStyle = lineColor;
-      ctx.lineWidth = lineWidth;
-      ctx.stroke();
-    }
-
-    // Малюємо стрілку
-    const arrowHeadWidth = 2;
-    const angle = Math.atan2(dy, dx);
-
-    ctx.save();
-    ctx.translate(adjusteArrowdEnd.x, adjusteArrowdEnd.y);
-    ctx.rotate(angle);
-
-    // Малюємо наконечник стрілки
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(-arrowHeadLength, arrowHeadWidth);
-    ctx.lineTo(-arrowHeadLength, 0); // Стрілка трохи вдавлена всередину
-    ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
-    ctx.closePath();
-
-    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
-    ctx.fill();
-    ctx.restore();
-
-    // Якщо немає мітки, не малюємо текст
-    if (!label) return;
-
-    // Знаходимо середину лінії для розміщення тексту
-    const middleX = start.x + (end.x - start.x) / 2;
-    const middleY = start.y + (end.y - start.y) / 2;
-
-    // Використовуємо реверсивне масштабування для тексту
-    const scaledFontSize = calculateFontSize(globalScale);
-    ctx.font = `${scaledFontSize}px Sans-Serif`;
-    ctx.fillStyle = theme.graph2D.link.textColor; // Колір тексту
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-
-    // Визначення кута нахилу лінії для повороту тексту
-    ctx.save();
-    // Переміщення до центру лінії та поворот тексту
-    ctx.translate(middleX, middleY);
-    // Якщо кут близький до вертикального або перевернутий, коригуємо його
-    if (Math.abs(angle) > Math.PI / 2) {
-      ctx.rotate(angle + Math.PI);
-      ctx.textAlign = 'center';
-    } else {
-      ctx.rotate(angle);
-      ctx.textAlign = 'center';
-    }
-
-    // Рисуємо фон для тексту для кращої читаємості
-    const textWidth = ctx.measureText(label).width;
-    const padding = 2;
-    ctx.fillStyle = highlightLinks.has(link)
-      ? theme.graph2D.link.highlightedTextBgColor
-      : theme.graph2D.link.textBgColor;
-    ctx.fillRect(
-      -textWidth / 2 - padding,
-      -scaledFontSize / 2 - padding,
-      textWidth + padding * 2,
-      scaledFontSize + padding * 2
+        if (!hoveredNode) {
+          // If no node is hovered, reset hoveredNode
+          hoveredNode = getNodeAtPosition(x, y);
+        }
+        handleNodeHover(hoveredNode);
+        // Check for hover and update highlighting
+
+        // Change cursor style based on hover
+        if (canvasRef.current) {
+          canvasRef.current.style.cursor = hoveredNode ? 'pointer' : 'default';
+        }
+      },
+      [
+        draggedNode,
+        getNodeAtPosition,
+        isPanning,
+        transform,
+        handleNodeHover,
+        selectedNode,
+        buttonImages,
+        config,
+        hoveredButtonIndex,
+        simulationRef,
+        lastMousePosRef,
+        mouseStartPosRef,
+        isDraggingRef,
+        isPointInButtonSector,
+        canvasRef,
+        setTransform,
+        setHoveredButtonIndex,
+      ]
     );
 
-    // Малюємо текст
-    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlightedTextColor : theme.graph2D.link.textColor;
-    ctx.fillText(label, 0, 0);
-
-    // Відновлення стану контексту
-    ctx.restore();
-  };
-
-  const handleNodeClick = (node: NodeObject, event: MouseEvent) => {
-    if (!node || !fgRef.current) return;
-
-    const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
-    const zoom = fgRef.current.zoom() || 1; // Отримуємо поточний зум
-    const canvas = event.target as HTMLCanvasElement;
-    // Координати вузла в системі координат графа
-    const nodeX = node.x as number;
-    const nodeY = node.y as number;
-
-    // // Отримуємо позицію canvas відносно вікна
-    const canvasRect = canvas.getBoundingClientRect();
-
-    // Координати кліку відносно canvas
-    // event.clientX/Y - це координати кліку відносно вікна браузера
-    // віднімаємо координати canvas щоб отримати координати відносно canvas
-    // враховуємо також можливий скролінг сторінки
-    const clickX = event.clientX - canvasRect.left;
-    const clickY = event.clientY - canvasRect.top;
-
-    // Враховуємо співвідношення між реальними розмірами canvas та його відображенням на екрані
-    // це важливо якщо canvas відмальовується з відмінним від реального розміру
-    const canvasScaleX = canvas.width / canvasRect.width;
-    const canvasScaleY = canvas.height / canvasRect.height;
-
-    // Масштабовані координати кліку у внутрішній системі координат canvas
-    const scaledClickX = clickX * canvasScaleX;
-    const scaledClickY = clickY * canvasScaleY;
-
-    // Отримуємо параметри трансформації графа
-    // ForceGraph використовує центр канваса як початок координат
-    // і застосовує зум і панорамування до всіх координат
-    const graphCenter = {
-      x: canvas.width / 2,
-      y: canvas.height / 2,
-    };
+    const handleClick = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {
+      if (mustBeStoppedPropagation.current) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      mustBeStoppedPropagation.current = false;
+    }, []);
 
-    // Спробуємо отримати реальні координати вузла на екрані
-    // Якщо доступний метод перетворення координат
-    let nodeScreenX, nodeScreenY;
+    // Handle mouse up to end dragging
+    const handleMouseUp = useCallback(
+      (event: React.MouseEvent<HTMLCanvasElement>) => {
+        const wasDragging = isDraggingRef.current;
 
-    if (typeof fgRef.current.graph2ScreenCoords === 'function') {
-      // Використовуємо API графа для перетворення координат
-      const screenPos = fgRef.current.graph2ScreenCoords(nodeX, nodeY);
-      if (screenPos) {
-        nodeScreenX = screenPos.x;
-        nodeScreenY = screenPos.y;
-      }
-    }
-
-    // Якщо метод не доступний, спробуємо обчислити позицію
-    if (nodeScreenX === undefined || nodeScreenY === undefined) {
-      // Це наближене обчислення, яке може бути неточним, але краще ніж нічого
-      // Ми припускаємо, що граф знаходиться в центрі канваса і застосовується масштабування
-      nodeScreenX = graphCenter.x + nodeX * zoom;
-      nodeScreenY = graphCenter.y + nodeY * zoom;
-    }
-
-    // Перевіряємо клік на верхній кнопці (hide)
-    if (
-      isPointInButtonArea(
-        scaledClickX,
-        scaledClickY,
-        nodeScreenX,
-        nodeScreenY,
-        buttonRadius * zoom, // Масштабуємо радіус відповідно до зуму
-        Math.PI, // Початковий кут для верхньої півсфери
-        Math.PI * 2 // Кінцевий кут для верхньої півсфери
-      )
-    ) {
-      handleHideNode(hoverNode);
-      event.stopPropagation();
-      return;
-    }
-
-    // Перевіряємо клік на нижній кнопці
-    if (
-      isPointInButtonArea(
-        scaledClickX,
-        scaledClickY,
-        nodeScreenX,
-        nodeScreenY,
-        buttonRadius * zoom, // Масштабуємо радіус відповідно до зуму
-        0, // Початковий кут для нижньої півсфери
-        Math.PI // Кінцевий кут для нижньої півсфери
-      )
-    ) {
-      onClickLoadNodes?.(hoverNode);
-      event.stopPropagation();
-      return;
-    }
-    // Якщо клік не на кнопках, обробляємо клік на вузлі
-    setSelectedNode(node);
-    onNodeClick?.(node);
-  };
-
-  const handleBackgroundClick = (event: MouseEvent) => {
-    setSelectedNode(null);
-    onBackgroundClick?.();
-  };
-
-  return (
-    <Wrapper ref={wrapperRef}>
-      {(loading || isRendering) && <GraphLoader width={width} height={height} />}
-      <ForceGraph2D
-        ref={fgRef}
-        width={width}
-        height={height}
-        graphData={graphData}
-        linkTarget={linkTarget}
-        linkSource={linkSource}
-        onLinkClick={onLinkClick}
-        onNodeClick={handleNodeClick}
-        onBackgroundClick={handleBackgroundClick}
-        nodeLabel={(node: any) => `${node.label || ''}`} // Показуємо повний текст у тултіпі
-        linkLabel={(link: any) => link.label}
-        nodeAutoColorBy="label"
-        linkCurvature={0}
-        // Вимикаємо вбудовані стрілки, оскільки використовуємо свою реалізацію
-        linkDirectionalArrowLength={0}
-        // Обмеження максимального зуму
-        //maxZoom={config.maxZoom}
-        minZoom={0.01}
-        // Додавання обробників наведення
-        onNodeHover={handleNodeHover}
-        onLinkHover={handleLinkHover}
-        onEngineTick={handleEngineTick}
-        d3AlphaMin={0.001}
-        d3VelocityDecay={0.4}
-        d3AlphaDecay={0.038}
-        // Виділення зв'язків при наведенні
-        linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1)}
-        linkColor={(link: any) =>
-          highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal
+        if (wasDragging) {
+          mustBeStoppedPropagation.current = true;
         }
-        onRenderFramePre={renderGrid}
-        nodePointerAreaPaint={renderNodePointerAreaPaint}
-        nodeCanvasObject={renderNodeCanvasObject}
-        linkCanvasObjectMode={() => 'replace'} // 'replace' замість 'after' для повної заміни стандартного рендерингу зв'язків
-        linkCanvasObject={renderLinkCanvasObject}
-        linkVisibility={(link: any) => {
-          if (isRendering) return false; // Не показуємо вузол, якщо граф ще рендериться
-
-          // Перевіряємо, чи вузол прихований
-          if (hiddenNodes.has(link.source.id) || hiddenNodes.has(link.target.id)) return false;
-          // Перевіряємо, чи вузол згорнутий
-          if (unVisibleNodes.has(link.source.id) || unVisibleNodes.has(link.target.id)) return false;
-
-          return true; // Показуємо вузол, якщо не прихований і не згорнутий
-        }}
-        nodeVisibility={(node: NodeObject) => {
-          if (isRendering) return false; // Не показуємо вузол, якщо граф ще рендериться
-          // Перевіряємо, чи вузол прихований
-          if (hiddenNodes.has(node.id as string)) return false;
-          // Перевіряємо, чи вузол згорнутий
-          if (unVisibleNodes.has(node.id as string)) return false;
-          return true; // Показуємо вузол, якщо не прихований і не згорнутий
-        }}
-      />
-    </Wrapper>
-  );
-};
+        // Process node clicks or button clicks only if we haven't been dragging
+        if (!wasDragging && mouseStartPosRef.current) {
+          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]) {
+              // This is a button click, trigger the button's onClick handler
+              const button = buttons[hoveredButtonIndex];
+              if (button && button.onClick) {
+                button.onClick(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 (draggedNode && simulationRef.current) {
+          // If real dragging occurred, optimize simulation parameters
+          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
+
+            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;
+
+          setDraggedNode(null);
+        }
+
+        // Скидаємо всі стани перетягування
+        isDraggingRef.current = false;
+        mouseStartPosRef.current = null;
+
+        // End panning if active
+        if (isPanning) {
+          setIsPanning(false);
+        }
+      },
+      [draggedNode, isPanning, hoveredButtonIndex, selectedNode, buttons, handleNodeClick, handleBackgroundClick]
+    );
+
+    // Handle wheel event for zooming
+    const handleWheel = useCallback(
+      (event: WheelEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        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;
+
+          if (newScale < 0.01 || newScale > 10) return prev;
+          const newK = prev.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;
+
+          return {
+            k: newK,
+            x: newX,
+            y: newY,
+          };
+        });
+      },
+      [setTransform]
+    );
+
+    // 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,
+      () => ({
+        zoomToFit,
+        addNodes,
+        removeNodes,
+      }),
+      [zoomToFit, addNodes, removeNodes]
+    );
+
+    // Add wheel event listener with passive: false
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      // Add event listener with passive: false to allow preventDefault
+      canvas.addEventListener('wheel', handleWheel, { passive: false });
+
+      // Clean up when component unmounts
+      return () => {
+        canvas.removeEventListener('wheel', handleWheel);
+      };
+    }, [handleWheel]);
+
+    return (
+      <Wrapper>
+        {(loading || isRendering) && <GraphLoader width={width} height={height} />}
+        <Canvas
+          ref={canvasRef}
+          style={{ width, height, display: isRendering ? 'none' : 'block' }}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          onClick={handleClick}
+          // Wheel event is now handled by the useEffect above
+        />
+      </Wrapper>
+    );
+  }
+);
 
 const Wrapper = styled.div`
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   min-width: 0;
   position: relative;
 `;
+
+const Canvas = styled.canvas``;
+
+// Add display name for better debugging
+Graph2D.displayName = 'Graph2D';