@cyber-harbour/ui 1.0.39 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Button/Button.tsx

@@ -50,6 +50,7 @@ const ButtonTextContainer = styled.div`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  user-select: text;
 `;
 
 const StyledIconWrapper = styled.span`
@@ -94,6 +95,7 @@ const StyledButton = styled(createComponent('button'))<{
       text-decoration: none;
       transition: all 0.2s ease;
       outline: none;
+      user-select: text;
 
       ${$iconPosition === 'right' ? 'flex-direction: row-reverse;' : ''}
 

package/src/Graph2D/Graph2D.tsx

@@ -43,6 +43,7 @@ export const Graph2D = ({
   onLinkHover,
   onLinkClick,
   onBackgroundClick,
+  onClickLoadNodes,
 }: Graph2DProps) => {
   const theme = useTheme();
 
@@ -53,7 +54,6 @@ export const Graph2D = ({
   const [selectedNode, setSelectedNode] = useState<any>(null);
   const [unVisibleNodes, setUnVisibleNodes] = useState(new Set<string>());
   const [hiddenNodes, setHiddenNodes] = useState(new Set<string>());
-  const [collapsedNodes, setCollapsedNodes] = useState(new Set<string>());
   // Стани для відстеження наведення на кнопки
   const [hoverTopButton, setHoverTopButton] = useState(false);
   const [hoverBottomButton, setHoverBottomButton] = useState(false);
@@ -142,14 +142,26 @@ export const Graph2D = ({
           }
           tickTimerRef.current = setTimeout(() => {
             //force tick check
-            fgRef.current.zoomToFit(0, 20);
-            setIsRendering(false);
+            if (fgRef.current) {
+              fgRef.current.zoomToFit(0, 20);
+              setIsRendering(false);
+            }
           }, 1500);
         }
       }
     }
   };
 
+  useEffect(() => {
+    const timeoutRef = tickTimerRef.current;
+
+    return () => {
+      if (timeoutRef) {
+        clearTimeout(timeoutRef);
+      }
+    };
+  }, []);
+
   // Створення взаємозв'язків між вузлами
   useEffect(() => {
     if (!graphData) return;
@@ -349,9 +361,7 @@ export const Graph2D = ({
         if (unvisibles.has(`${link.target.id}`)) {
           if (!hiddenNodes.has(`${link.target.id}`)) {
             unvisibles.delete(`${link.target.id}`);
-            if (!collapsedNodes.has(`${link.target.id}`)) {
-              showNode(unvisibles, link.target);
-            }
+            showNode(unvisibles, link.target);
           }
         }
       });
@@ -373,21 +383,6 @@ export const Graph2D = ({
     setUnVisibleNodes(newUnVisibleNodes);
   };
 
-  // Функція для обробки кліку на кнопку "згорнути дочірні вузли"
-  const handleCollapseChildren = (node: any) => {
-    const newCollapsedNodes = new Set(collapsedNodes);
-    const newUnVisibleNodes = new Set(unVisibleNodes);
-    if (newCollapsedNodes.has(node.id)) {
-      newCollapsedNodes.delete(node.id);
-      showNode(newUnVisibleNodes, node);
-    } else {
-      newCollapsedNodes.add(node.id);
-      hideNode(newUnVisibleNodes, node);
-    }
-    setCollapsedNodes(newCollapsedNodes);
-    setUnVisibleNodes(newUnVisibleNodes);
-  };
-
   // Функція для визначення, чи знаходиться точка в межах сектора кола (кнопки)
   const isPointInButtonArea = useCallback(
     (
@@ -493,7 +488,7 @@ export const Graph2D = ({
         nodeScreenY = graphCenter.y + nodeY * zoom;
       }
 
-      // Перевіряємо наведення на верхню кнопку (hide)
+      // Перевіряємо наведення на верхню кнопку
       const isOverTopButton = isPointInButtonArea(
         scaledMouseX,
         scaledMouseY,
@@ -504,7 +499,7 @@ export const Graph2D = ({
         Math.PI * 2
       );
 
-      // Перевіряємо наведення на нижню кнопку (collapse)
+      // Перевіряємо наведення на нижню кнопку
       const isOverBottomButton = isPointInButtonArea(
         scaledMouseX,
         scaledMouseY,
@@ -620,7 +615,7 @@ export const Graph2D = ({
     // Малюємо коло
     ctx.beginPath();
     ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = collapsedNodes.has(node.id as string) ? `${color}50` : color; // Колір контуру з opacity для згорнутих вузлів
+    ctx.fillStyle = color;
 
     ctx.fill();
 
@@ -889,7 +884,7 @@ export const Graph2D = ({
       return;
     }
 
-    // Перевіряємо клік на нижній кнопці (collapse)
+    // Перевіряємо клік на нижній кнопці
     if (
       isPointInButtonArea(
         scaledClickX,
@@ -901,7 +896,7 @@ export const Graph2D = ({
         Math.PI // Кінцевий кут для нижньої півсфери
       )
     ) {
-      handleCollapseChildren(hoverNode);
+      onClickLoadNodes?.(hoverNode);
       event.stopPropagation();
       return;
     }
@@ -960,7 +955,6 @@ export const Graph2D = ({
           // Перевіряємо, чи вузол прихований
           if (hiddenNodes.has(link.source.id) || hiddenNodes.has(link.target.id)) return false;
           // Перевіряємо, чи вузол згорнутий
-          if (collapsedNodes.has(link.source.id)) return false;
           if (unVisibleNodes.has(link.source.id) || unVisibleNodes.has(link.target.id)) return false;
 
           return true; // Показуємо вузол, якщо не прихований і не згорнутий

package/src/Graph2D/types.ts

@@ -25,4 +25,5 @@ export interface Graph2DProps {
   onNodeHover?: (node: NodeObject | null) => void;
   onLinkHover?: (link: NodeObject | null) => void;
   onBackgroundClick?: () => void;
+  onClickLoadNodes?: (node: NodeObject) => void;
 }