@cyber-harbour/ui 1.0.69 → 1.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.69",
+  "version": "1.0.71",
   "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;
 // Завантаження та підготовка зображень кнопок
@@ -94,6 +95,11 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       isDragging: false,
       width: width * RATIO,
       height: height * RATIO,
+      animation: {
+        id: null,
+        buttonIndex: null,
+      },
+      spinnerAngle: 0,
     });
 
     const { nodes, links } = useMemo(() => cloneDeep(graphData), [graphData]);
@@ -365,6 +371,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,26 +454,70 @@ 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 / 2;
+            const dotRadius = iconSize / 12;
+
+            ctx.save();
+            ctx.translate(iconX, iconY);
+            ctx.rotate(stateRef.current.spinnerAngle);
+
+            // Малюємо кілька променів (ліній) по колу
+            for (let j = 0; j < 12; j++) {
+              const angle = (Math.PI * 2 * j) / 12;
+              const alpha = j / 12;
+
+              const dotX = Math.cos(angle) * spinnerRadius;
+              const dotY = Math.sin(angle) * spinnerRadius;
+
+              ctx.beginPath();
+              ctx.fillStyle = hexToRgba(theme.graph2D?.button?.spinnerColor, alpha);
+              ctx.arc(dotX, dotY, dotRadius, 0, Math.PI * 2);
+              ctx.fill();
+            }
+            ctx.restore();
+
+            stateRef.current.spinnerAngle += 0.1;
+            if (stateRef.current.spinnerAngle > Math.PI * 2) {
+              stateRef.current.spinnerAngle -= Math.PI * 2;
+            }
+            if (stateRef.current.animation.id !== null) {
+              cancelAnimationFrame(stateRef.current.animation.id);
+              stateRef.current.animation.id = null;
+              stateRef.current.animation.buttonIndex = null;
             }
+
+            stateRef.current.animation.id = requestAnimationFrame(renderCanvas2D);
+            stateRef.current.animation.buttonIndex = i;
           } 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);
+            if (stateRef.current.animation.id && stateRef.current.animation.buttonIndex === i) {
+              cancelAnimationFrame(stateRef.current.animation.id);
+              stateRef.current.animation.id = null;
+              stateRef.current.animation.buttonIndex = null;
+            }
+            const icon = isHovered ? buttonImage.hoverImg : buttonImage.normalImg;
+            //каунтер може не існувати
+            const counter = buttonImage.getCount ? buttonImage.getCount(node) : null;
+            // Малюємо іконку
+            if (icon.complete) {
+              drawIconWithOptionalCounter(ctx, icon, iconX, iconY, iconSize, counter, theme.graph2D?.button?.textColor);
+            } else {
+              // Встановлюємо обробник onload, якщо зображення ще не завантажено
+              icon.onload = () => {
+                if (ctx2dRef.current) {
+                  drawIconWithOptionalCounter(
+                    ctx,
+                    icon,
+                    iconX,
+                    iconY,
+                    iconSize,
+                    counter,
+                    theme.graph2D?.button?.textColor
+                  );
                 }
-              }
-            };
+              };
+            }
           }
         }
 

package/src/Graph2D/types.ts

@@ -63,6 +63,13 @@ export interface GraphState {
   isDragging: boolean;
   width: number;
   height: number;
+  /** Поточна анімація */
+  animation: {
+    id: number | null;
+    buttonIndex: number | null;
+  };
+  /** Кут оберту спінера */
+  spinnerAngle: number;
 }
 
 export interface Graph2DProps {
@@ -87,6 +94,8 @@ export interface Graph2DProps {
 export interface NodeButton {
   img: string;
   hoverImg: string;
+  loading?: boolean;
+  getCount?: (node: NodeObject) => number;
   onClick: (node: NodeObject) => void;
 }
 

package/src/Theme/themes/dark.ts

@@ -857,6 +857,8 @@ export const darkThemePx: Theme = {
       stroke: '#1A1A1A',
       normalFill: 'rgba(0, 0, 0, 0.8)',
       hoverFill: 'rgba(25, 25, 25, 0.9)',
+      textColor: '#99989C',
+      spinnerColor: '#80A0F5',
     },
     grid: {
       dotColor: 'rgba(255, 255, 255, 0.5)',

package/src/Theme/themes/light.ts

@@ -856,6 +856,8 @@ export const lightThemePx: Theme = {
       stroke: '#e5e5e5',
       normalFill: 'rgba(255, 255, 255, 0.8)',
       hoverFill: 'rgba(230, 230, 230, 0.9)',
+      textColor: '#99989C',
+      spinnerColor: '#80A0F5',
     },
     grid: {
       dotColor: 'rgba(0, 0, 0, 0.5)',

package/src/Theme/types.ts

@@ -253,6 +253,8 @@ export type Theme = {
       stroke: string;
       normalFill: string;
       hoverFill: string;
+      textColor: string;
+      spinnerColor: string;
     };
     grid: {
       dotColor: string;