@cyber-harbour/ui 1.0.68 → 1.0.70

package/package.json

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

package/src/Graph2D/Graph2D.tsx

@@ -27,6 +27,7 @@ import {
 } from 'd3';
 import { styled, useTheme } from 'styled-components';
 import GraphLoader from './GraphLoader';
+import { hexToRgba } from '../Theme';
 
 const RATIO = window.devicePixelRatio || 1;
 // Завантаження та підготовка зображень кнопок
@@ -90,10 +91,8 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       highlightLinks: new Set(),
       lastMousePos: { x: 0, y: 0 },
       mustBeStoppedPropagation: false,
-      lastHoveredNode: null,
       mouseStartPos: null,
       isDragging: false,
-      lastHoveredNodeRef: null,
       width: width * RATIO,
       height: height * RATIO,
     });
@@ -367,6 +366,44 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       [config, theme.graph2D.link]
     );
 
+    const drawIconWithOptionalCounter = (
+      ctx: CanvasRenderingContext2D,
+      icon: HTMLImageElement,
+      iconX: number,
+      iconY: number,
+      iconSize: number,
+      counter: number | null | undefined,
+      textColor?: string
+    ) => {
+      try {
+        if (counter !== null && counter !== undefined) {
+          const fontSize = iconSize * 0.8;
+          ctx.font = `${fontSize}px sans-serif`;
+          ctx.textBaseline = 'middle';
+          ctx.textAlign = 'left';
+
+          const counterText = new Intl.NumberFormat('en', {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+            minimumFractionDigits: 0,
+            compactDisplay: 'short',
+          }).format(counter);
+
+          const textWidth = ctx.measureText(counterText).width;
+          const spacing = iconSize * 0.3;
+          const totalWidth = iconSize + spacing + textWidth;
+          const offsetX = totalWidth / 2;
+
+          ctx.drawImage(icon, iconX - offsetX, iconY - iconSize / 2, iconSize, iconSize);
+          ctx.fillStyle = textColor || '#99989C';
+          ctx.fillText(counterText, iconX - offsetX + iconSize + spacing, iconY);
+        } else {
+          ctx.drawImage(icon, iconX - iconSize / 2, iconY - iconSize / 2, iconSize, iconSize);
+        }
+      } catch (error) {
+        console.warn('Error rendering icon:', error);
+      }
+    };
     // Функція для рендерингу кнопок навколо вузла
     const renderNodeButtons = useCallback(
       (node: NodeObject, ctx: CanvasRenderingContext2D) => {
@@ -412,32 +449,49 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
           // Вибираємо відповідну іконку залежно від стану наведення
           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);
+          // Якщо кнопка в лоадінгу — малюємо спінер
+          if (buttonImage.loading) {
+            const spinnerRadius = iconSize / 3;
+            const spinnerLineLength = iconSize / 3;
+            const spinnerLineWidth = 1;
+
+            ctx.save();
+            ctx.translate(iconX, iconY);
+
+            // Малюємо кілька променів (ліній) по колу
+            for (let j = 0; j < 12; j++) {
+              const alpha = j / 12;
+              ctx.beginPath();
+              ctx.strokeStyle = hexToRgba(theme.colors.primary.main, alpha);
+              ctx.lineWidth = spinnerLineWidth;
+              ctx.moveTo(0, -spinnerRadius);
+              ctx.lineTo(0, -spinnerRadius - spinnerLineLength);
+              ctx.stroke();
+              ctx.rotate((Math.PI * 2) / 12);
             }
+
+            ctx.restore();
           } else {
-            // Встановлюємо обробник onload, якщо зображення ще не завантажено
-            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);
+            const icon = isHovered ? buttonImage.hoverImg : buttonImage.normalImg;
+            //каунтер може не існувати
+            const counter = buttonImage.count ? buttonImage.count(node) : null;
+            // Малюємо іконку
+            if (icon.complete) {
+              drawIconWithOptionalCounter(ctx, icon, iconX, iconY, iconSize, counter, theme.colors?.text?.lighter);
+            } else {
+              // Встановлюємо обробник onload, якщо зображення ще не завантажено
+              icon.onload = () => {
+                if (ctx2dRef.current) {
+                  drawIconWithOptionalCounter(ctx, icon, iconX, iconY, iconSize, counter, theme.colors?.text?.lighter);
                 }
-              }
-            };
+              };
+            }
           }
         }
 
         ctx.restore();
       },
-      [buttonImages, theme.graph2D?.button]
+      [buttonImages, theme.graph2D?.button, theme.colors?.text?.lighter]
     );
 
     const renderNodes = useCallback(
@@ -1062,13 +1116,10 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
     const handleNodeHover = useCallback(
       (node: NodeObject | null) => {
         // Перевіряємо, чи вузол той самий, що і останній вузол, на який наводили
-        if (node === stateRef.current.lastHoveredNodeRef) {
+        if (node === stateRef.current.hoveredNode) {
           return; // Пропускаємо обробку, якщо це той самий вузол
         }
 
-        // Оновлюємо посилання на останній наведений вузол
-        stateRef.current.lastHoveredNodeRef = node;
-
         const newHighlightNodes = new Set<NodeObject>();
         const newHighlightLinks = new Set<any>();
 
@@ -1350,8 +1401,8 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
             if (shouldRenderLink) {
               renderCanvas2D();
+              return;
             }
-            return;
           }
         }
 

package/src/Graph2D/types.ts

@@ -57,10 +57,6 @@ export interface GraphState {
   lastMousePos: { x: number; y: number };
   /** Флаг необходимости остановки распространения события */
   mustBeStoppedPropagation: boolean;
-  /** Последний узел, над которым был курсор */
-  lastHoveredNode: NodeObject | null;
-  /** Кэшированная ссылка на последний узел, над которым был курсор (для избежания лишних вычислений) */
-  lastHoveredNodeRef: NodeObject | null;
   /** Начальная позиция курсора при начале перетаскивания */
   mouseStartPos: { x: number; y: number } | null;
   /** Флаг режима перетаскивания */
@@ -91,6 +87,8 @@ export interface Graph2DProps {
 export interface NodeButton {
   img: string;
   hoverImg: string;
+  loading?: boolean;
+  count?: (node: NodeObject) => number;
   onClick: (node: NodeObject) => void;
 }