@cyber-harbour/ui 1.0.37 → 1.0.39

package/package.json

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

package/src/Core/Flex/FlexContainer.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import styled from 'styled-components';
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -22,20 +22,23 @@ export interface FlexContainerProps {
   as?: any; // TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexContainer = ({
-  children,
-  direction = 'row',
-  wrap = 'nowrap',
-  justify = 'flex-start',
-  align = 'stretch',
-  alignContent,
-  gap,
-  rowGap,
-  columnGap,
-  className,
-  style,
-  as = 'div',
-}: FlexContainerProps) => {
+export const FlexContainer: any = forwardRef<HTMLElement, FlexContainerProps>(function FlexContainer(
+  {
+    children,
+    direction = 'row',
+    wrap = 'nowrap',
+    justify = 'flex-start',
+    align = 'stretch',
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    className,
+    style,
+    as = 'div',
+  },
+  ref
+) {
   return (
     <StyledFlexContainer
       as={as}
@@ -49,11 +52,12 @@ export const FlexContainer = ({
       $columnGap={columnGap}
       className={className}
       style={style}
+      ref={ref}
     >
       {children}
     </StyledFlexContainer>
   );
-};
+});
 
 interface StyledFlexContainerProps {
   $direction: FlexDirection;

package/src/Graph2D/Graph2D.tsx

@@ -1,6 +1,6 @@
 import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-force-graph-2d';
 import { Graph2DProps } from './types';
-import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { forceCollide } from 'd3-force';
 import { styled, useTheme } from 'styled-components';
 import eyeLightIcon from './eye_light.png';
@@ -11,16 +11,16 @@ import GraphLoader from './GraphLoader';
 
 // Створюємо та налаштовуємо об'єкти зображень
 const imgEyeLightIcon = new Image();
-imgEyeLightIcon.src = eyeLightIcon;
+imgEyeLightIcon.src = eyeLightIcon.replace('./', '/');
 
 const imgEyeLightHoverIcon = new Image();
-imgEyeLightHoverIcon.src = eyeLightHoverIcon;
+imgEyeLightHoverIcon.src = eyeLightHoverIcon.replace('./', '/');
 
 const imgGroupLightIcon = new Image();
-imgGroupLightIcon.src = groupLightIcon;
+imgGroupLightIcon.src = groupLightIcon.replace('./', '/');
 
 const imgGroupLightHoverIcon = new Image();
-imgGroupLightHoverIcon.src = groupLightHoverIcon;
+imgGroupLightHoverIcon.src = groupLightHoverIcon.replace('./', '/');
 
 export const Graph2D = ({
   graphData,
@@ -126,32 +126,29 @@ export const Graph2D = ({
     setHighlightLinks(newHighlightLinks);
   };
 
-  const handleEngineTick = useCallback(() => {
-    if (isRendering)
-      if (
-        graphData &&
-        fgRef.current &&
-        fgRef.current.tick &&
-        graphData.nodes.length > 0 &&
-        graphData.nodes.length <= fgRef.current.tick
-      ) {
-        if (tickTimerRef.current) {
-          clearTimeout(tickTimerRef.current);
-        }
-        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);
-        }
-        tickTimerRef.current = setTimeout(() => {
-          //force tick check
+  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);
+          }
           fgRef.current.zoomToFit(0, 20);
           setIsRendering(false);
-        }, 1500);
+        } else {
+          fgRef.current.tick = fgRef.current.tick ? (fgRef.current.tick = fgRef.current.tick + 1) : 1;
+          if (tickTimerRef.current) {
+            clearTimeout(tickTimerRef.current);
+          }
+          tickTimerRef.current = setTimeout(() => {
+            //force tick check
+            fgRef.current.zoomToFit(0, 20);
+            setIsRendering(false);
+          }, 1500);
+        }
       }
-  }, [graphData]);
+    }
+  };
 
   // Створення взаємозв'язків між вузлами
   useEffect(() => {
@@ -274,9 +271,9 @@ export const Graph2D = ({
       const iconSize = buttonRadius * 0.3; // Розмір іконки відносно радіуса кнопки (зменшено вдвічі)
 
       // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
-      const groupIcon = hoverTopButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
+      const groupIcon = hoverBottomButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
       // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
-      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
+      const eyeIcon = hoverTopButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
 
       const renderEyeIcon = () => {
         try {
@@ -308,17 +305,17 @@ export const Graph2D = ({
         }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
-      if (eyeIcon.complete) {
+      if (groupIcon.complete) {
         // Розміщуємо іконку в центрі нижньої половини кнопки
 
         renderGroupIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
-        eyeIcon.onload = () => {
+        groupIcon.onload = () => {
           renderGroupIcon();
         };
 
-        eyeIcon.onerror = () => {
+        groupIcon.onerror = () => {
           console.warn('Error loading eye icon image');
         };
       }
@@ -560,7 +557,7 @@ export const Graph2D = ({
   };
 
   const renderGrid = (ctx: CanvasRenderingContext2D, globalScale: number) => {
-    if (isRendering) return; // Не малюємо сітку під час рендерингу
+    if (isRendering || loading) return; // Не малюємо сітку під час рендерингу
     // This will be called before each rendering frame
     ctx.getTransform();
     ctx.save();

package/src/Theme/themes/dark.ts

@@ -14,7 +14,7 @@ export const darkThemePx: Theme = {
   baseSize: 14, // Базовий розмір шрифту для конвертації px в rem
   // Секція кольорів з теми
   colors: {
-    background: '#0A0A0A',
+    background: '#0F1317',
     backgroundBase: '#000000',
     primary: {
       main: '#158EFF',
@@ -318,7 +318,7 @@ export const darkThemePx: Theme = {
           boxShadow: 'none',
           filledIcon: {
             background: '#158EFF',
-            color: '#0A0A0A',
+            color: '#0F1317',
           },
         },
         active: {
@@ -328,7 +328,7 @@ export const darkThemePx: Theme = {
           boxShadow: 'none',
           filledIcon: {
             background: '#158EFF',
-            color: '#0A0A0A',
+            color: '#0F1317',
           },
         },
         disabled: {
@@ -423,7 +423,7 @@ export const darkThemePx: Theme = {
 
   // Компонент Sidebar
   sidebar: {
-    background: '#0A0A0A',
+    background: '#0F1317',
     border: '#1E2226',
     width: 224,
     collapsedWidth: 65,
@@ -674,7 +674,7 @@ export const darkThemePx: Theme = {
       style: 'solid',
       color: '#1E2226',
     },
-    background: '#0A0A0A',
+    background: '#0F1317',
   },
   // Graph2D
   graph2D: {

package/src/Theme/themes/light.ts

@@ -698,8 +698,8 @@ export const lightThemePx: Theme = {
     },
   },
   contentLoader: {
-    foreground: '#535353',
-    background: '#99989C',
+    foreground: '#E2E2E2E2',
+    background: '#F3F3F3',
   },
 };