@cyber-harbour/ui 1.0.70 → 1.0.71

package/package.json

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

package/src/Graph2D/Graph2D.tsx

@@ -95,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]);
@@ -451,38 +456,65 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           const buttonImage = buttonImages[i];
           // Якщо кнопка в лоадінгу — малюємо спінер
           if (buttonImage.loading) {
-            const spinnerRadius = iconSize / 3;
-            const spinnerLineLength = iconSize / 3;
-            const spinnerLineWidth = 1;
+            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.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.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 {
+            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.count ? buttonImage.count(node) : null;
+            const counter = buttonImage.getCount ? buttonImage.getCount(node) : null;
             // Малюємо іконку
             if (icon.complete) {
-              drawIconWithOptionalCounter(ctx, icon, iconX, iconY, iconSize, counter, theme.colors?.text?.lighter);
+              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.colors?.text?.lighter);
+                  drawIconWithOptionalCounter(
+                    ctx,
+                    icon,
+                    iconX,
+                    iconY,
+                    iconSize,
+                    counter,
+                    theme.graph2D?.button?.textColor
+                  );
                 }
               };
             }
@@ -491,7 +523,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
         ctx.restore();
       },
-      [buttonImages, theme.graph2D?.button, theme.colors?.text?.lighter]
+      [buttonImages, theme.graph2D?.button]
     );
 
     const renderNodes = useCallback(

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 {
@@ -88,7 +95,7 @@ export interface NodeButton {
   img: string;
   hoverImg: string;
   loading?: boolean;
-  count?: (node: NodeObject) => number;
+  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;