@cyber-harbour/ui 1.0.69 → 1.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.69",
+  "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;
 // Завантаження та підготовка зображень кнопок
@@ -365,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) => {
@@ -410,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(

package/src/Graph2D/types.ts

@@ -87,6 +87,8 @@ export interface Graph2DProps {
 export interface NodeButton {
   img: string;
   hoverImg: string;
+  loading?: boolean;
+  count?: (node: NodeObject) => number;
   onClick: (node: NodeObject) => void;
 }